/* ============================================================
   TerraTec · eigene Bausteine
   style.css ist das Blatt von terra-ing.de, nur in den Farben auf das
   TerraTec-Logo gezogen. Was es dort nicht gibt oder hier anders sein muss,
   steht in dieser Datei. So bleibt style.css mit dem TIG-Blatt vergleichbar.
   ============================================================ */

/* ---------- Marke ----------
   Logo der TerraTec, hochkant 1,61:1: Bildzeichen ueber TERRATEC, darunter
   die Zeile "Baugrunduntersuchung GmbH & Co. KG" (Hinweis Hannes, Fixpunkt
   11.11.2026: das seitliche Logo der Altseite war das falsche). Die festen
   Masse aus style.css gelten fuer das TIG-Kopflogo und werden hier ersetzt. */
.brand-logo { height: 60px; width: 97px; }

@media (min-width: 1181px) {
  .site-header.dicht .brand-logo { width: 74px; height: 46px; }
}

@media (max-width: 560px) {
  .brand-logo { height: 48px; width: 78px; }
}

@media (max-width: 380px) {
  .brand-logo { height: 42px; width: 68px; }
}

/* Unter 420 px passen Logo mit Schriftzug, Hoerer, Knopf und Menue nicht
   nebeneinander, das Menue rutschte 14 bis 20 px aus dem Bild. Der Knopf
   steht im aufgeklappten Menue ohnehin, hier faellt er weg. */
@media (max-width: 420px) {
  .header-actions .btn { display: none; }
}

.footer-logo { height: 96px; width: 155px; }

/* Qualifikation: im Band schnitt die Mitte den Helm ab (Hinweis Hannes,
   Fixpunkt 27.10.2026). */
.image-band img[src*="team-sondierung-bahn-lachend"] { object-position: 50% 20%; }

/* ---------- Hero: Standbild statt Film ---------- */
.hero-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 40%;
  background: var(--anthrazit);
}

/* Unter 900 px zeigt der Kopf das Standbild des Films. Der Pausen- bzw.
   Abspielknopf liegt dann unten rechts im Bild statt oben. */
@media (max-width: 860px) {
  .video-toggle { top: auto; bottom: 12px; right: 12px; }
}

/* ---------- Verfahren ----------
   Drei Gruppen, links die Gruppe, rechts ihre Karten. Die beiden Bohrungen
   bekommen je zwei Spalten: sie sind das Kerngeschaeft und haben die
   laengeren Texte. */
.verfahren { display: grid; gap: clamp(36px, 4vw, 64px); }

.verfahren-gruppe {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  padding-top: clamp(24px, 2.4vw, 36px);
  border-top: 1px solid var(--linie);
}

.verfahren-kopf .label { color: var(--rot); margin-bottom: 10px; }

.verfahren-kopf p { font-size: var(--t-sm); color: var(--grau); line-height: 1.5; }

.verfahren-karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}

.verfahren-karten-breit { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.vf-karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  transition: border-color 0.2s ease;
}

.vf-karte:hover { border-color: var(--grau-hell); }

.vf-karte img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.verfahren-karten-breit .vf-karte img { aspect-ratio: 16 / 9; }

.vf-text { padding: clamp(16px, 1.4vw, 24px); display: flex; flex-direction: column; gap: 10px; flex: 1; }

.vf-kuerzel {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--versal-eng);
  text-transform: uppercase;
  color: var(--rot);
}

.vf-karte h4 {
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  hyphens: manual;
}

.vf-text p { font-size: var(--t-xs); line-height: 1.55; color: var(--text); }

.vf-text .vf-kuerzel { color: var(--rot); font-size: var(--t-3xs); }

.vf-text .vf-norm {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  font-size: var(--t-2xs);
  color: var(--grau);
}

.verfahren-ausserdem {
  margin-top: clamp(32px, 3vw, 48px);
  max-width: 52em;
  font-size: var(--t-sm);
  color: var(--grau);
}

.verfahren-ausserdem strong { color: var(--anthrazit); font-weight: 600; }

@media (max-width: 1180px) {
  .verfahren-gruppe { grid-template-columns: 1fr; }
  .verfahren-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .verfahren-karten,
  .verfahren-karten-breit { grid-template-columns: 1fr; }
}

/* ---------- Qualitaet: vier Zertifikate ---------- */
.zertifikate {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}

.zert {
  background: var(--weiss);
  padding: clamp(24px, 2.2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zert-stelle { color: var(--grau); }

.zert h3 { font-size: clamp(22px, 1.8vw, 30px); }

.zert p:not(.label) { font-size: var(--t-sm); line-height: 1.55; }

.zert-link {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--rot);
  text-decoration: none;
}

.zert-link:hover { color: var(--rot-dunkel); text-decoration: underline; }

.zert-format { font-weight: 400; color: var(--grau); margin-left: 6px; font-size: var(--t-2xs); }

@media (max-width: 1180px) {
  .zertifikate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .zertifikate { grid-template-columns: 1fr; }
}

/* ---------- Referenzen: zwei Karten statt acht Kacheln ----------
   Die TIG legt den Text auf das Bild, mit einem Verlauf, der die untere
   Haelfte deckt. Bei acht kleinen Kacheln traegt das. Bei zwei breiten
   Kacheln deckte er den groessten Teil der Motive zu, man sah vom
   Bohrgeraet in Sengwarden fast nichts mehr (Hinweis von Arno, 15.10.2026).
   Hier steht das Bild deshalb frei und der Text darunter. */
.ref-tiles-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ref-tiles-zwei .ref-tile {
  aspect-ratio: auto;
  flex-direction: column;
  align-items: stretch;
}

.ref-tiles-zwei .ref-tile::after { display: none; }

.ref-tiles.ref-tiles-zwei .ref-tile img {
  position: static;
  z-index: auto;
  height: auto;
  aspect-ratio: 16 / 9;
}

.ref-tiles-zwei .ref-tile-body { padding: clamp(18px, 1.6vw, 28px); }

.ref-tiles-zwei .ref-tile h3 { font-size: clamp(20px, 1.6vw, 26px); }

.ref-tiles-zwei .ref-tile-fact { font-size: var(--t-xs); max-width: 40em; opacity: 1; }

/* Ohne Projektseiten traegt der Titel keinen Verweis; dann gibt es auch
   keine Hover-Bewegung, die einen Klick verspricht. */
.ref-tile:not(:has(a)):hover { border-color: var(--linie-dunkel); }
.ref-tile:not(:has(a)):hover img { transform: none; }
.ref-tile:not(:has(a)):hover .ref-tile-body { transform: none; }

@media (max-width: 860px) {
  .ref-tiles.ref-tiles-zwei { grid-template-columns: 1fr; }
}

/* ---------- Kontakt: drei Standorte ---------- */
.standorte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--linie-dunkel);
}

.standort { color: var(--grau-invert); font-size: var(--t-sm); line-height: 1.6; }

.standort .label { color: var(--rot-hell); margin-bottom: 8px; }

.standort h3 { color: var(--weiss); font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 10px; }

.standort-person { color: var(--text-invert); font-weight: 500; margin-bottom: 6px; }

.standort p + p { margin-top: 6px; }

.standort a { color: var(--text-invert); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

.standort a:hover { color: var(--rot-hell); }

@media (max-width: 760px) {
  .standorte { grid-template-columns: 1fr; }
}

/* ---------- Fuss: Zertifikate als eigene Spalte ---------- */
.footer-zert .label { color: var(--grau-hell); margin-bottom: 12px; }

.footer-zert ul { list-style: none; display: grid; gap: 8px; color: var(--text-invert); }

.footer-zert a { color: var(--text-invert); text-decoration: none; border-bottom: 1px solid var(--grau-hell); }

.footer-zert a:hover { color: var(--rot-hell); border-bottom-color: var(--rot-hell); }

/* Vier Spalten wie bei der TIG, die dritte traegt hier die Zertifikate. */
@media (min-width: 1181px) {
  .footer-grid { grid-template-columns: auto auto auto 1fr; }
  .footer-contact { justify-self: end; }
}

/* ---------- Historie: Bild im Querformat statt Panorama ----------
   Die Motive sind 2,2:1. In der halben Spalte waere das ein Streifen neben
   vier Zeilen Ueberschrift. */
.about-media img[data-format="panorama"] { aspect-ratio: 4 / 3; object-position: 30% center; }

/* ---------- Verfahrenskarten mit eigener Seite ----------
   Die ganze Karte ist der Klickbereich, der Linktext bleibt der Name. */
.vf-karte { position: relative; }
.vf-karte h3 a,
.vf-karte h4 a { color: inherit; text-decoration: none; }
.vf-karte h3 a::before,
.vf-karte h4 a::before { content: ""; position: absolute; inset: 0; }
.vf-karte:hover { border-color: var(--rot); }
.vf-karte:hover h3 a,
.vf-karte:hover h4 a { color: var(--rot); }
.vf-karte:has(a:focus-visible) { outline: 3px solid var(--rot); outline-offset: 2px; }
.vf-karte a:focus-visible { outline: none; }
.vf-karte h3 {
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  hyphens: manual;
}

/* Auf /leistungen/ tragen die Gruppen h2, das Mass bleibt das der Labels. */
.verfahren-kopf h2.label { font-size: var(--t-2xs); letter-spacing: var(--versal); }

/* ---------- Referenzkarten: drei nebeneinander auf /referenzen/ ---------- */
.ref-tiles.ref-tiles-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-tiles-zwei .ref-tile:has(a):hover { border-color: var(--rot-hell); }

@media (max-width: 1100px) {
  .ref-tiles.ref-tiles-drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ref-tiles.ref-tiles-drei { grid-template-columns: 1fr; }
}

/* ---------- Bohrplaene: nie beschneiden ---------- */
.bohrplan { background: var(--weiss); border: 1px solid var(--linie); padding: clamp(8px, 1vw, 16px); }
.bohrplan img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.bohrplan figcaption { margin-top: 10px; font-size: var(--t-2xs); color: var(--grau); }

/* ---------- Standortkarte auf /kontakt/ ---------- */
.standortkarte { max-width: 1000px; margin-inline: auto; }
.standortkarte img { width: 100%; height: auto; }
.standortkarte figcaption { margin-top: 12px; text-align: center; font-size: var(--t-xs); color: var(--grau); }

/* ---------- Kleinteile ---------- */
.mehr-link { margin-top: clamp(24px, 2.4vw, 36px); }
.stellen-hinweis { margin-top: 28px; font-size: var(--t-sm); color: var(--grau); }
.schiene-karte .fact-list { margin-bottom: 18px; }
.schiene-karte > p:not(.schiene-label) { font-size: var(--t-sm); line-height: 1.55; margin-bottom: 16px; }
.schiene-karte .cred-list { margin-bottom: 18px; }

/* Die Faktenliste stammt aus dem dunklen Referenzblock und schreibt ihre
   Zahlen dort weiss. Auf den hellen Referenzseiten verschwanden sie. */
.section-light .ref-facts li,
.section-light .ref-facts strong { color: var(--anthrazit); }
.section-light .ref-facts { margin-bottom: 1.4em; }

/* ============================================================
   Verfahrensseiten, zweite Fassung
   ============================================================ */

/* ---------- Kennzahlen unter dem Seitenkopf ---------- */
.kennzahlen-band { padding-block: 0; }
.kennzahlen-band .stats { border-top: 0; padding-block: clamp(28px, 3.4vw, 52px); border-bottom: 1px solid var(--linie); }
.kennzahlen-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.kennzahlen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kennzahlen .stat dd { font-size: clamp(34px, 3vw, 56px); }
@media (max-width: 700px) {
  .kennzahlen-2, .kennzahlen-3 { grid-template-columns: 1fr; }
}

/* ---------- So laeuft es ab: Schema links, Schritte rechts ---------- */
.so-gehts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.so-gehts h2 { color: var(--weiss); margin-bottom: clamp(24px, 2.4vw, 36px); }
@media (max-width: 900px) {
  .so-gehts-grid { grid-template-columns: 1fr; }
}

.schema-figur figcaption { margin-top: 10px; font-size: var(--t-2xs); color: var(--grau-hell); }
.schema { width: 100%; height: auto; overflow: visible; }
.schema .schema-schicht { stroke: none; }
.schema .s1 { fill: #3A342C; }
.schema .s2 { fill: #5A4A30; }
.schema .s3 { fill: #3B3F45; }
.schema .schema-gelaende { stroke: var(--grau-invert); stroke-width: 1.5; fill: none; }
.schema .schema-linie { stroke: var(--text-invert); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.schema .schema-linie.duenn { stroke-width: 1.2; stroke: var(--grau-invert); }
.schema .schema-rohr { fill: var(--anthrazit-tief); stroke: var(--text-invert); stroke-width: 2; }
.schema .schema-probe { stroke: var(--text-invert); stroke-width: 1.2; }
.schema .schema-baer { fill: var(--rot); stroke: none; }
.schema .schema-kappe { fill: var(--grau-invert); }
.schema .schema-dichtung { fill: rgba(233, 234, 235, 0.22); }
.schema .schema-filter { stroke: #7FB4E6; stroke-width: 2; }
.schema .schema-wasser { stroke: #7FB4E6; stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.schema .schema-diagramm { stroke: var(--rot-hell); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.schema .schema-spitze { fill: var(--text-invert); }
.schema .schema-akzent { stroke: var(--rot-hell); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.schema .schema-punkt { fill: var(--rot-hell); }
.schema .schema-text { fill: var(--grau-invert); font-family: var(--font-sans); font-size: 12px; }

/* .ablauf ist im TIG-Blatt schon vergeben (Bewerbungsformular), daher .schritte. */
/* Nummerierte Schritte. Die Ziffer steht im Aufschlusspunkt-Ring. */
.schritte { list-style: none; counter-reset: schritt; display: grid; gap: 22px; }
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 52px;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--rot-hell);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--weiss);
}
.schritte-liste li::before { content: ""; width: 14px; height: 14px; top: 5px; left: 10px; background: radial-gradient(circle, var(--rot-hell) 35%, transparent 40%); }
.schritte h3 { color: var(--weiss); font-size: clamp(18px, 1.3vw, 21px); margin-bottom: 6px; }
.schritte p { color: var(--grau-invert); font-size: var(--t-sm); line-height: 1.6; max-width: 34em; }

/* ---------- Vergleichstabellen ---------- */
.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); background: var(--weiss); }
.vergleich { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 560px; }
.vergleich th, .vergleich td { text-align: left; padding: 14px clamp(14px, 1.4vw, 24px); border-bottom: 1px solid var(--linie); vertical-align: top; }
.vergleich thead th { font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--versal-eng); text-transform: uppercase; color: var(--grau); background: var(--papier); }
.vergleich tbody th { font-weight: 600; }
.vergleich tbody tr:last-child > * { border-bottom: 0; }
.vergleich a { color: var(--rot); text-decoration: none; }
.vergleich a:hover { text-decoration: underline; }
.vergleich tr.aktuell { background: rgba(212, 42, 34, 0.06); }
.vergleich tr.aktuell th { color: var(--rot); }

/* ---------- Seitenschiene: zweite Karte ---------- */
.schiene-einsatz { margin-top: 18px; }

/* ---------- Kombinierte Verfahren: drei Karten ---------- */
.verfahren-karten-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .verfahren-karten-drei { grid-template-columns: 1fr; }
}

/* ============================================================
   Standortkarte (/kontakt/)
   Gezeichnet von tools/karte.py, liegt als Inline-SVG im Markup. Farben,
   Schrift und Bewegung kommen von hier.
   ============================================================ */
.standort-raster-neu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch;
}

.karte-rahmen-neu {
  position: relative;
  align-self: start;
  background: #DCE5EA;
  border: 1px solid var(--linie);
  overflow: hidden;
}

.standortkarte-svg { display: block; width: 100%; height: auto; }

.k-meer { fill: #DCE5EA; }
.k-ausland { fill: #EEEEEA; stroke: #C9CED1; stroke-width: 0.8; }
.k-land { fill: var(--weiss); stroke: #C3C8CC; stroke-width: 0.9; stroke-linejoin: round; transition: fill 0.2s ease; }
.k-land:hover { fill: #FBF7F6; }
.k-stadtstaat { fill: #F6F1EF; }

.k-meername { fill: #7F98A6; font-family: var(--font-serif); font-style: italic; font-size: 22px; letter-spacing: 0.08em; }
.k-auslandname { fill: #A2A6A9; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.k-landname { fill: #B7BBBE; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-anchor: middle; }

/* Referenzen: der Aufschlusspunkt aus dem Blatt, klein und in Anthrazit */
.k-strecke { fill: none; stroke: var(--anthrazit); stroke-width: 2.4; stroke-dasharray: 1 5; stroke-linecap: round; }
.k-ref-ring { fill: var(--weiss); stroke: var(--anthrazit); stroke-width: 1.5; }
.k-ref-punkt { fill: var(--anthrazit); }
.k-ref-name { fill: var(--grau); font-family: var(--font-sans); font-size: 12px; font-weight: 500; }
.k-ref:hover .k-ref-name, .k-ref:focus-visible .k-ref-name { fill: var(--rot); text-decoration: underline; }
.k-ref:hover .k-ref-ring { stroke: var(--rot); }

/* Standorte: roter Aufschlusspunkt mit Puls */
.k-ort-ring { fill: var(--weiss); stroke: var(--rot); stroke-width: 2.4; }
.k-ort-punkt { fill: var(--rot); }
.k-puls { fill: var(--rot); opacity: 0; transform-box: fill-box; transform-origin: center; animation: k-puls 2.8s ease-out infinite; }
.k-ort:nth-of-type(2) .k-puls { animation-delay: 0.9s; }
.k-ort:nth-of-type(3) .k-puls { animation-delay: 1.8s; }
@keyframes k-puls {
  0% { opacity: 0.35; transform: scale(0.6); }
  70%, 100% { opacity: 0; transform: scale(2.4); }
}
.k-ort-art { fill: var(--rot); font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.k-ort-name { fill: var(--anthrazit); font-family: var(--font-sans); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 4px; stroke-linejoin: round; }
.k-ort:hover .k-ort-ring, .k-ort:focus-visible .k-ort-ring { fill: var(--rot); }
.k-ort:focus-visible, .k-ref:focus-visible { outline: none; }

.k-massstab path { stroke: var(--anthrazit); stroke-width: 1.5; fill: none; }
.k-massstab text { fill: var(--anthrazit); font-family: var(--font-sans); font-size: 11px; font-weight: 600; }
.k-quelle { fill: #8B969C; font-family: var(--font-sans); font-size: 9.5px; }

@media (prefers-reduced-motion: reduce) {
  .k-puls { animation: none; }
}

/* Die Legende steht unter der Karte, nicht darauf: auf der Karte verdeckte
   sie die Strecke Husum–Westerland. */
.karte-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px clamp(14px, 1.4vw, 20px);
  background: var(--weiss);
  border-top: 1px solid var(--linie);
  font-size: var(--t-2xs);
  color: var(--grau);
}
.karte-legende span { display: flex; align-items: center; gap: 8px; }
.karte-legende span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.legende-ort::before { border: 2.4px solid var(--rot); background: radial-gradient(circle, var(--rot) 34%, var(--weiss) 38%); }
.legende-ref::before { border: 1.5px solid var(--anthrazit); background: radial-gradient(circle, var(--anthrazit) 28%, var(--weiss) 32%); }

/* Standortkarten neben der Karte */
.standort-liste { list-style: none; display: grid; gap: clamp(12px, 1.2vw, 18px); align-content: start; }
.standort-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
  padding: clamp(16px, 1.4vw, 24px);
  font-size: var(--t-sm);
  line-height: 1.55;
  scroll-margin-top: 110px;
}
.standort-karte .label { color: var(--rot); margin-bottom: 6px; }
.standort-karte h2 { font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 8px; }
.standort-karte .standort-person { font-weight: 600; color: var(--anthrazit); margin-bottom: 4px; }
.standort-karte p + p { margin-top: 4px; color: var(--grau); }
.standort-karte a { color: var(--anthrazit); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.standort-karte a:hover { color: var(--rot); }
.standort-karte:target { border-color: var(--rot); box-shadow: 0 8px 28px rgba(212, 42, 34, 0.14); }

@media (max-width: 980px) {
  .standort-raster-neu { grid-template-columns: 1fr; }
  .standort-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .standort-liste { grid-template-columns: 1fr; }
}

/* Auf dem Handy schrumpft die Karte auf gut ein Drittel. Die Schrift im SVG
   schrumpft mit, deshalb hier groesser, und was nur Beiwerk ist, faellt weg. */
@media (max-width: 700px) {
  .k-landname, .k-auslandname, .k-quelle, .k-massstab { display: none; }
  .k-meername { font-size: 34px; }
  .k-ort-name { font-size: 46px; stroke-width: 8px; }
  .k-ort-art { display: none; }
  .k-ort-ring { r: 16px; }
  .k-ort-punkt { r: 7px; }
  .k-ref-name { display: none; }
  .k-ref-ring { r: 10px; }
  /* Rechts neben Stralsund ist auf dem Handy kein Platz mehr. */
  .k-ort-stralsund .k-ort-name { text-anchor: end; transform: translateX(-36px); }
}

/* ============================================================
   TerraTec-Styleguide 2026 (style/TerraTec_Styleguide.pdf)
   Steht am Ende, damit es alles darueber und das TIG-Blatt uebersteuert.
   Schriften: Space Grotesk fuer Ueberschriften, Inter fuer Text und Labels.
   Farben: Rot, Schwarz #181818, Schiefergrau #3A3F44, Sandstein #E7DFD3,
   Ocker #E0A53B (Akzent, Linien), Papier #F6F3EE (Hintergrund).

   Rot auf der Website laut Styleguide #EE3A34. Kleine Schrift darauf oder
   in dieser Farbe erreicht keine 4,5:1, deshalb gilt:
     --rot-marke #EE3A34  Logo, Punkte, Linien, grosse Flaechen ohne Text
     --rot-flaeche #E43030 rote Flaechen mit grosser Schrift (4,41:1 gg. Weiss)
     --rot      #D42A22  Knoepfe und roter Text (5,06:1 gg. Weiss, 4,57:1 gg. Papier)
     --rot-dunkel #B3231C Kicker und Labels, auch auf Sandstein lesbar
   ============================================================ */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
  /* Der Styleguide kennt keine Serifenschrift. Was im TIG-Blatt auf Noto
     Serif kursiv stand, steht hier in Space Grotesk. */
  --font-serif: var(--font-head);

  --rot-marke: #EE3A34;
  --rot-flaeche: #E43030;
  --anthrazit: #181818;
  --anthrazit-2: #3A3F44;
  --anthrazit-tief: #121212;
  --verlauf-grund: 18, 18, 18;
  --papier: #F6F3EE;
  --sandstein: #E7DFD3;
  --ocker: #E0A53B;
  --text: #181818;
  --grau: #5F5A54;
  --linie: #E2DACD;
  --linie-dunkel: #33373B;
  --radius: 10px;
}

body { background: var(--papier); color: var(--text); }

h1, h2, h3, h4,
.vf-karte h3, .vf-karte h4,
.stat dd, .zert h3, .standort-karte h2 {
  font-family: var(--font-head);
  letter-spacing: -0.025em;
}

h1 { font-weight: 700; }
h1 em {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  color: var(--rot-marke);
}

/* Kicker wie im Styleguide: Versalien, gesperrt, rot. Darunter ein kurzer
   Ocker-Strich als Akzent. */
.kicker {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: var(--t-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rot-dunkel);
  margin-bottom: 16px;
}
.section-dark .kicker,
.cta-band .kicker,
.feldnotiz .kicker,
.so-gehts .kicker { color: var(--rot-hell); }
.section-head h2::after,
.page-hero h1::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 0.42em;
  background: var(--ocker);
  border-radius: 2px;
}
.hero h1::after { display: none; }

/* Flaechen: Papier ist der Grund, Weiss nur fuer Karten. */
.section-light { background: var(--papier); }
.section-grey { background: var(--sandstein); }
.section-grey .kicker { color: var(--rot-dunkel); }
.hero { background: var(--papier); border-bottom-color: var(--linie); }
.site-header { background: rgba(246, 243, 238, 0.94); border-bottom-color: var(--linie); }
.page-hero { background: var(--papier); }

/* Rote Flaeche: Partnerband in der Styleguide-Farbe, Schrift gross genug. */
.partner-strip { background: var(--rot-flaeche); }
.partner-claim { font-family: var(--font-head); font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.ref-cta p, .schiene-label, .anfrage-titel { font-family: var(--font-head); font-style: normal; }

/* Rundungen wie die Karten im Styleguide */
.btn { border-radius: 8px; font-family: var(--font-sans); font-weight: 600; }
.vf-karte, .zert, .standort-karte, .schiene-karte, .ref-tile, .ref-featured-media img,
.gallery-item img, .tabelle-rahmen, .karte-rahmen-neu, .contact-wege, .bohrplan,
.spec, .job-card, .feldnotiz-bild img, .about-media img, .page-hero-bild img {
  border-radius: var(--radius);
}
.vf-karte, .ref-tile, .tabelle-rahmen, .karte-rahmen-neu, .bohrplan { overflow: hidden; }
.vf-karte img { border-radius: 0; }
.zertifikate { gap: clamp(12px, 1.2vw, 18px); background: none; border: 0; }
.zert { border: 1px solid var(--linie); }
.spec-grid { gap: clamp(12px, 1.2vw, 18px); }
.standort-karte { border-left-width: 1px; border-top: 3px solid var(--rot-marke); }
.chip { border-radius: 999px; }

/* Ocker fuer Linien und Zahlen: Aufschlusspunkte der Zahlenreihe, Ablauf-
   ziffern auf dunklem Grund, Strecken in der Karte bleiben dunkel. */
.stat::before { --marker-farbe: var(--ocker); }
.schritte li::before { border-color: var(--ocker); color: var(--ocker); }
.schritte-liste li::before { background: radial-gradient(circle, var(--ocker) 35%, transparent 40%); }
.vf-text .vf-norm { border-top-color: var(--linie); }
.vergleich thead th { background: var(--sandstein); color: var(--anthrazit-2); }
.vergleich tr.aktuell { background: rgba(224, 165, 59, 0.14); }

/* Fuss in Schwarz laut Styleguide */
.site-footer { background: var(--anthrazit); }

/* Karte: Meer und Land in den Styleguide-Toenen */
.karte-rahmen-neu, .k-meer { background: #D9E2E6; fill: #D9E2E6; }
.k-land { fill: #FFFDF9; stroke: #CBC2B4; }
.k-stadtstaat { fill: var(--sandstein); }
.k-ausland { fill: #ECE7DE; stroke: #D3CBBE; }
.k-meername { font-family: var(--font-head); font-style: normal; font-weight: 500; letter-spacing: 0.12em; }
.k-ort-name { font-family: var(--font-head); }
.karte-legende { background: var(--weiss); }

/* ---------- Standorte neben der Karte: Liste statt Karten ----------
   Wie die Anfahrtsliste auf terra-ing.de: keine Kaesten, keine farbigen
   Kanten. Eine Haarlinie trennt die Standorte, davor steht die Nummer wie
   der Seitenzaehler im Styleguide ("01 / 07"). */
.standort-liste { gap: 0; counter-reset: standort; border-bottom: 1px solid var(--linie); }
.standort-karte {
  counter-increment: standort;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 8px;
  background: none;
  border: 0;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  padding: 22px 0 24px;
  box-shadow: none;
  transition: background-color 0.25s ease;
}
.standort-karte:first-child { border-top: 2px solid var(--anthrazit); }
.standort-karte::before {
  content: counter(standort, decimal-leading-zero);
  grid-row: 1 / span 6;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--grau);
  padding-top: 1px;
}
.standort-karte > * { grid-column: 2; }
.standort-karte .label { color: var(--grau); margin-bottom: 4px; }
.standort-karte h2 { font-size: clamp(24px, 2vw, 30px); margin-bottom: 10px; }
.standort-karte h2::after { display: none; }
.standort-karte .standort-person { font-weight: 600; margin-bottom: 2px; }
.standort-karte p + p { margin-top: 2px; }
.standort-karte a {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 1px;
}
.standort-karte a:hover { color: var(--rot); border-bottom-color: var(--rot); }
/* Klick auf einen Kartenpunkt springt hierher: kurz markieren, ohne Kasten. */
.standort-karte:target { background: rgba(231, 223, 211, 0.55); box-shadow: none; border-color: var(--linie); }
.standort-karte:target::before { color: var(--rot); }

@media (max-width: 980px) {
  .standort-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; border-bottom: 0; }
  .standort-karte, .standort-karte:first-child { border-top: 2px solid var(--anthrazit); }
}
@media (max-width: 700px) {
  .standort-liste { grid-template-columns: 1fr; border-bottom: 1px solid var(--linie); }
  .standort-karte { border-top: 1px solid var(--linie); }
}

/* Das TIG-Raster legt die Kacheln auf eine weisse Flaeche und zeichnet die
   Fugen ueber 1 px Abstand. Mit eigenen Rahmen, Rundung und Abstand blieb
   davon nur ein weisser Block hinter den Kacheln uebrig, sichtbar dort, wo
   eine Reihe nicht voll ist. Jetzt ist nur die Kachel weiss. */
.spec-grid { background: none; border: 0; }
.spec { box-shadow: none; border: 1px solid var(--linie); }

/* Die ganze Kachel ist der Link, auch das Bild. Der Klickdeckel (h3 a::before)
   richtet sich am naechsten positionierten Vorfahren aus. Der Textblock war
   positioniert und hob sich beim Zeigen per transform an, beides machte ihn
   zum Bezugsrahmen: nur der Text war klickbar, das Bild nicht. */
.ref-tiles-zwei .ref-tile { position: relative; cursor: pointer; }
.ref-tiles-zwei .ref-tile-body { position: static; }
.ref-tiles-zwei .ref-tile:hover .ref-tile-body { transform: none; }
.ref-tiles-zwei .ref-tile h3 a::before { z-index: 1; }
.ref-tiles-zwei .ref-tile img { transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1); }
.ref-tiles-zwei .ref-tile:has(a):hover img { transform: scale(1.03); }
.ref-featured-media a { display: block; height: 100%; }
.ref-featured-media img { transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1); }
.ref-featured-media a:hover img { transform: scale(1.02); }
.ref-featured-media { overflow: hidden; border-radius: var(--radius); }

/* ---------- Stellenkacheln ----------
   Das TIG-Raster setzt die Kacheln Kante an Kante auf eine weisse Flaeche.
   Hier stehen sie wie die uebrigen Karten frei, mit Abstand und Rundung. Die
   ganze Kachel ist der Link (h2 a::after aus dem TIG-Blatt). */
.job-grid { gap: clamp(14px, 1.4vw, 24px); background: none; border: 0; }
.job-card {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.25s ease;
}
.job-card:hover { border-color: var(--rot); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(24, 24, 24, 0.08); }
.job-card .job-card-type { color: var(--rot-dunkel); }
.job-card h2 a { color: var(--anthrazit); }
.job-card-link::after { content: " →"; }
@media (prefers-reduced-motion: reduce) { .job-card:hover { transform: none; } }
@media (max-width: 900px) { .job-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Lightbox (main.js, natives <dialog>)
   ============================================================ */
.lb-ausloeser { display: block; cursor: zoom-in; }
.gallery-item .lb-ausloeser { overflow: hidden; border-radius: var(--radius); }
.gallery-item .lb-ausloeser img { transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); }
.gallery-item .lb-ausloeser:hover img { transform: scale(1.04); }
.lb-ausloeser:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }

html.lb-offen { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-invert);
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(18, 18, 18, 0.94); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lb-auf 0.22s ease-out; }
@keyframes lb-auf { from { opacity: 0; } to { opacity: 1; } }

.lb-buehne {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: clamp(56px, 6vw, 88px) clamp(16px, 6vw, 96px) 12px;
  overscroll-behavior: contain;
}
.lb-bild {
  max-width: 100%;
  max-height: calc(100dvh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: var(--weiss);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s ease;
}
.lightbox.laedt .lb-bild { opacity: 0.25; }
.lightbox.zoombar .lb-bild { cursor: zoom-in; }
/* Originalgroesse: das Bild darf ueberstehen, die Buehne scrollt. */
.lightbox.gross .lb-buehne { place-items: start; }
.lightbox.gross .lb-bild { max-width: none; max-height: none; cursor: zoom-out; border-radius: 0; }

.lb-text {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: baseline;
  padding: 10px clamp(16px, 6vw, 96px) clamp(16px, 3vw, 28px);
  font-size: var(--t-sm);
  color: var(--grau-invert);
  text-align: center;
}
.lb-zaehler { font-family: var(--font-head); font-weight: 700; color: var(--ocker); white-space: nowrap; }

.lb-knopf {
  position: fixed;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(24, 24, 24, 0.6);
  color: var(--weiss);
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lb-knopf:hover { background: var(--rot); border-color: var(--rot); }
.lb-knopf:focus-visible { outline: 3px solid var(--ocker); outline-offset: 2px; }
.lb-zu { top: 16px; right: 16px; }
.lb-zurueck, .lb-vor { top: 50%; transform: translateY(-50%); font-size: 34px; padding-bottom: 4px; }
.lb-zurueck { left: 16px; }
.lb-vor { right: 16px; }
.lightbox.einzeln .lb-zurueck, .lightbox.einzeln .lb-vor { display: none; }
.lightbox.gross .lb-zurueck, .lightbox.gross .lb-vor { display: none; }

@media (max-width: 700px) {
  .lb-zurueck, .lb-vor { top: auto; bottom: 14px; transform: none; }
  .lb-text { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
  .gallery-item .lb-ausloeser:hover img { transform: none; }
}
/* Im TIG-Raster liegt das Bild absolut in der quadratischen Kachel. Der Link
   darum muss die Kachel deshalb selbst ausfuellen, sonst ist er 0 px hoch. */
.gallery-item .lb-ausloeser { position: absolute; inset: 0; z-index: 0; }

/* ============================================================
   TerraTec und TIG: Kachelansicht (ersetzt das rote Partnerband)
   ============================================================ */
.pk-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}
.pk-kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.25s ease;
}
.pk-kachel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pk-text { padding: clamp(18px, 1.6vw, 28px); display: flex; flex-direction: column; gap: 8px; }
.pk-wer {
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rot-dunkel);
}
/* TIG-Kacheln mit Ocker-Strich statt Rot: zweites Haus, gleiche Familie. */
.pk-tig .pk-wer { color: var(--anthrazit-2); }
.pk-tig .pk-wer::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--ocker);
  border-radius: 2px;
}
.pk-kachel h3 { font-size: clamp(22px, 1.7vw, 30px); line-height: 1.15; }
.pk-kachel h3 a { color: var(--anthrazit); text-decoration: none; }
.pk-kachel h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.pk-kachel p:not(.pk-wer) { font-size: var(--t-sm); line-height: 1.55; color: var(--grau); }
.pk-kachel:hover { border-color: var(--rot); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(24, 24, 24, 0.1); }
.pk-kachel:hover img { transform: scale(1.04); }
.pk-kachel:hover h3 a { color: var(--rot); }
.pk-kachel:has(a:focus-visible) { outline: 3px solid var(--rot); outline-offset: 2px; }
.pk-kachel a:focus-visible { outline: none; }
.partner-kacheln .section-intro a { color: var(--anthrazit); text-decoration-color: var(--ocker); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 1180px) { .pk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk-kachel img { aspect-ratio: 3 / 2; } }
@media (max-width: 640px) { .pk-raster { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pk-kachel:hover, .pk-kachel:hover img { transform: none; } }

/* ---------- Verfahrensgruppen: Ueberschrift gross ueber den Karten ----------
   Auf Wunsch rund fuenfmal so gross wie das Label vorher (12,5 px). Damit
   passt sie nicht mehr in die schmale Spalte daneben und steht ueber den
   Karten, der kurze Text daneben. */
.verfahren-gruppe { grid-template-columns: 1fr; gap: clamp(18px, 2vw, 28px); }
.verfahren-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: 6px;
}
.verfahren-kopf .label,
.verfahren-kopf h2.label,
.verfahren-kopf h3.label {
  font-family: var(--font-head);
  font-size: clamp(34px, 3.6vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--rot);
  margin: 0;
}
.verfahren-kopf .label::after { display: none; }
.verfahren-kopf p { font-size: var(--t-md); color: var(--grau); }

/* ---------- Feldnotiz: Bild waechst mit grossen Bildschirmen ----------
   Mit den Standbildern aus dem Imagefilm (2400 px) traegt das Bild auch auf
   4K-Schirmen eine grosse Darstellung. */
@media (min-width: 1500px) {
  .feldnotiz-grid { grid-template-columns: minmax(320px, 46%) minmax(0, 1fr); max-width: 1480px; }
}
@media (min-width: 2200px) {
  .feldnotiz-grid { grid-template-columns: minmax(320px, 52%) minmax(0, 1fr); max-width: 1900px; }
}

/* Bewerbungsformular: Vorfuehrmodus, solange BEWERBUNG_ENDPUNKT leer ist */
.bewerbung-vorschau button[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.bewerbung-fehler { border-left: 3px solid var(--rot); }
.bewerbung-aside .job-contact p + p { margin-top: 12px; }
/* Die Mailadresse ist 39 Zeichen lang und ohne Umbruchstelle: auf dem Handy
   drueckte sie das Formular 155 px ueber den Rand. */
.bewerbung-form { min-width: 0; }
.bewerbung-form a, .bewerbung-aside a { overflow-wrap: anywhere; }

/* ============================================================
   Referenzseiten: Bauwerke als Balken, Einsatz als Monatsleiste
   ============================================================ */

/* Zahl links, Name rechts, darunter der Balken. Die Balkenlaenge kommt als
   --anteil aus main.js. Ohne Skript fehlt nur der Balken, Zahl und Name
   stehen trotzdem da. */
.ref-detail-body ol.bauwerke {
  list-style: none;
  padding: 0;
  margin: 1.2em 0 2em;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--linie);
  padding-top: 18px;
}
.ref-detail-body .bauwerke li {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  column-gap: 16px;
  row-gap: 6px;
  align-items: baseline;
  padding: 0;
}
.ref-detail-body .bauwerke li::before { content: none; }
.bw-zahl {
  grid-row: span 2;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--anthrazit);
}
.bw-name { font-size: var(--t-sm); color: var(--text); line-height: 1.3; }
.bw-balken {
  display: block;
  height: 6px;
  width: max(6px, calc(var(--anteil, 0) * 100%));
  border-radius: 3px;
  background: var(--rot);
  transform-origin: left center;
}
/* Ohne --anteil (kein Skript) gar kein Balken statt eines Stummels */
.bauwerke:not(.bemessen) .bw-balken { display: none; }
/* Kleine Posten in Ocker, damit die zwei grossen nicht alles ueberstrahlen */
.bauwerke li.klein .bw-balken { background: var(--ocker); }

.js .bauwerke .bw-balken {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.js .bauwerke.in .bw-balken { transform: none; }

/* Monatsleiste in der Seitenspalte */
.monatsleiste { margin: 4px 0 24px; }
.monatsleiste .label { color: var(--grau); margin-bottom: 10px; }
.monatsleiste ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.monatsleiste li {
  position: relative;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--grau);
  padding-top: 14px;
}
.monatsleiste li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  border-radius: 2px;
  background: var(--linie);
}
.monatsleiste li.aktiv { color: var(--anthrazit); font-weight: 600; }
.monatsleiste li.aktiv::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  border-radius: 2px;
  background: var(--rot);
  transform-origin: left center;
}
.js .monatsleiste li.aktiv::after {
  transform: scaleX(0);
  transition: transform 0.35s linear;
  transition-delay: calc(var(--i, 0) * 0.35s + 0.3s);
}
.js .monatsleiste.in li.aktiv::after { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .bauwerke .bw-balken,
  .js .monatsleiste li.aktiv::after { transform: none; transition: none; }
}
/* Fieldsets haben von Haus aus min-inline-size: min-content und werden nie
   schmaler als ihre laengste Auswahl. */
.bewerbung-form fieldset { min-width: 0; min-inline-size: 0; }
.bewerbung-form select { width: 100%; max-width: 100%; text-overflow: ellipsis; }

/* ---------- Ansprechpartnerin Personal ----------
   Helle Fassung von .contact-person (TIG, dort auf dunklem Grund) fuer die
   Seitenspalten der Stellen- und Bewerbungsseiten. */
.personal-karte { display: flex; gap: 14px; align-items: center; margin: 4px 0 6px; }
.personal-karte img { width: 88px; height: 88px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.personal-karte p { margin: 0; }
.personal-name { font-weight: 600; color: var(--anthrazit); }
.personal-karte .personal-rolle { font-size: var(--t-xs); color: var(--grau); margin-bottom: 4px; }
.personal-karte a { font-size: var(--t-sm); font-weight: 500; color: var(--rot); text-decoration: none; overflow-wrap: anywhere; }
.personal-karte a:hover { color: var(--rot-dunkel); text-decoration: underline; }

/* ---------- Referenzen: Projekte mit der TIG und eigene ----------
   Zwei Gruppen im selben dunklen Abschnitt, getrennt durch ein Label. */
.ref-gruppe { color: var(--ocker); margin: 0 0 clamp(14px, 1.4vw, 22px); }
.ref-tiles-tig { margin-bottom: clamp(44px, 5vw, 80px); }
.ref-tile-quelle { font-size: var(--t-2xs); letter-spacing: 0.04em; color: var(--grau-hell); margin-top: 2px; }
.ref-featured + .ref-tiles-tig { margin-top: clamp(14px, 1.4vw, 24px); }
.section-dark-folge { padding-top: 0; }