/* ib-maut.de — Gestaltung „Netz“: das Straßen- und Gewässernetz der Region als Leitmotiv.
   Dunkle Bühnen, helle Blätter, die darübergleiten, große Schrift, Bewegung nur mit Zweck.
   Farben und Kontraste: doku/gestaltung.md, geprüft mit skripte/kontraste.py.
   Keine style-Attribute im HTML: die Sicherheitsrichtlinie (CSP) blockiert sie. */

@import url("/schriften/schriften.css");

@view-transition { navigation: auto; types: seitenwechsel; }

:root {
  --tinte: #16201B;          /* Text */
  --tinte-weich: #3A4640;    /* Einleitungen, Kartentexte */
  --grau: #5A665F;           /* Nebentext */
  --grau-hell: #7D8781;      /* nur Umrisse von Bedienelementen */
  --linie: #DDE3DC;          /* Trennlinien */
  --grund: #F4F5F0;          /* Blatt */
  --weiss: #FFFFFF;
  --gruen: #1F7F00;          /* Marke */
  --gruen-tief: #175F00;     /* Überfahren, Text auf Hellgrün */
  --nacht: #0B1B0C;          /* Bühnen, Fuß */
  --nacht-2: #122A13;        /* Flächen auf der Bühne */
  --nacht-text: #C6D6C2;     /* Nebentext auf dunklem Grund */
  --licht: #A9EC86;          /* Akzent auf dunklem Grund */

  --r-gross: clamp(22px, 3vw, 40px);
  --r: 20px;
  --r-klein: 12px;
  --pille: 999px;
  --breite: 88rem;
  --rand: clamp(1.1rem, 4.5vw, 4rem);
  --abstand: clamp(4.5rem, 10vw, 9rem);
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --marke: "Archivo", "Arial Black", Arial, sans-serif;
  --zuegig: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; background: var(--nacht); }
body { margin: 0; color: var(--tinte); font: 400 1.0625rem/1.65 var(--sans); overflow-wrap: break-word; background: var(--nacht); }
img { max-width: 100%; height: auto; display: block; -webkit-touch-callout: none; }
a { color: var(--gruen); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--gruen-tief); }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 6px; }
.buehne :focus-visible, .kopf-band :focus-visible, .fuss :focus-visible, .ablauf :focus-visible,
.kontaktband :focus-visible, .kopf:not(.ist-gescrollt) :focus-visible, .karte-feld :focus-visible { outline-color: var(--weiss); }

h1, h2, h3 { font-weight: 800; hyphens: manual; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 7rem); line-height: .98; letter-spacing: -.045em; }
h2 { font-size: clamp(2.1rem, 5vw, 4.75rem); line-height: 1.02; letter-spacing: -.04em; }
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.02em; }
/* Nur lange Wörter trennen, und nie nach weniger als vier Buchstaben („Stra-ßen“). */
@media (max-width: 40rem) { h1, h2, h3 { hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; } }
p { margin: 0 0 1rem; }

.mitte { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.visuell-versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprungmarke { position: fixed; left: 1rem; top: -5rem; z-index: 90; background: var(--weiss); color: var(--tinte); padding: .7rem 1.1rem; border-radius: var(--pille); font-weight: 700; }
.sprungmarke:focus { top: 1rem; }
.liste-roh { list-style: none; margin: 0; padding: 0; }
.kennung { margin: 0 0 1.25rem; font-size: .9375rem; font-weight: 700; letter-spacing: -.005em; color: var(--gruen); }
.einleitung { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--tinte-weich); max-width: 42rem; margin: 0; }
.tabellenziffern { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Einblenden */
.js .auf { opacity: 0; transform: translateY(1.75rem); }
.js .auf.ist-da { opacity: 1; transform: none; transition: opacity .8s var(--zuegig), transform .9s var(--zuegig); }

/* ------------------------------------------------------------------ Knöpfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: .625rem; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: 0 1.6rem;
  background: var(--gruen); color: var(--weiss); border: 0; border-radius: var(--pille);
  font-weight: 700; text-decoration: none; line-height: 1.2; transition: background-color .2s, color .2s, transform .35s var(--zuegig);
}
.knopf:hover { background: var(--gruen-tief); color: var(--weiss); }
.knopf:active { transform: scale(.98); }
.knopf-glas { background: rgba(255, 255, 255, .1); color: var(--weiss); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); backdrop-filter: blur(10px); }
.knopf-glas:hover { background: var(--weiss); color: var(--nacht); }
.knopf-weiss { background: var(--weiss); color: var(--gruen-tief); }
.knopf-weiss:hover { background: var(--nacht); color: var(--weiss); }
.knopf-linie { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--tinte); }
.knopf-linie:hover { background: var(--tinte); color: var(--weiss); }
.pfeil { display: inline-block; transition: transform .35s var(--zuegig); }
a:hover > .pfeil { transform: translateX(.3em); }
.weiter { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 700; text-decoration: none; color: var(--tinte); }
.weiter:hover { color: var(--gruen); }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 60; padding: .75rem clamp(.5rem, 2vw, 1.5rem) 0;
  color: var(--weiss); view-transition-name: kopf; transition: transform .45s var(--zuegig);
}
.kopf.ist-weg { transform: translateY(-110%); }
.kopf-innen {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: calc(var(--breite) + 1rem);
  margin: 0 auto; min-height: 4rem; padding: .375rem .5rem .375rem 1.1rem; border-radius: var(--pille);
  transition: background-color .35s, box-shadow .35s, color .35s;
}
.ist-gescrollt .kopf-innen { background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(1.4); color: var(--tinte); box-shadow: 0 1px 0 rgba(22, 32, 27, .06), 0 12px 32px rgba(22, 32, 27, .1); }
.marke { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; flex: none; }
.marke:hover { color: inherit; }
.signet { flex: none; color: var(--weiss); transition: color .35s; }
.ist-gescrollt .signet { color: var(--gruen); }
.marke-text { display: flex; flex-direction: column; font-family: var(--marke); line-height: 1.02; }
.marke-name { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.marke-zusatz { font-weight: 400; font-size: .65rem; margin-top: .2rem; }
.hauptmenue { display: flex; align-items: center; gap: .5rem; }
.hauptmenue ul { display: flex; gap: .125rem; list-style: none; margin: 0; padding: 0; }
.hauptmenue a { color: inherit; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.hauptmenue ul a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .95rem; border-radius: var(--pille); transition: background-color .2s; }
.hauptmenue ul a:hover { background: rgba(127, 127, 127, .16); }
.hauptmenue ul a[aria-current="page"], .hauptmenue ul a.aktiv { box-shadow: inset 0 0 0 1px currentColor; }
.kopf-telefon {
  display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 1.25rem; margin-left: .35rem;
  border-radius: var(--pille); background: var(--weiss); color: var(--nacht) !important; white-space: nowrap; font-weight: 700 !important;
  transition: background-color .25s, color .25s;
}
.ist-gescrollt .kopf-telefon { background: var(--gruen); color: var(--weiss) !important; }
.kopf-telefon:hover { background: var(--licht); }
.ist-gescrollt .kopf-telefon:hover { background: var(--gruen-tief); }
.menue-schalter {
  display: none; align-items: center; gap: .6rem; min-height: 2.875rem; padding: 0 1.1rem;
  background: var(--weiss); color: var(--nacht); border: 0; border-radius: var(--pille); font: 700 .9375rem var(--sans); cursor: pointer;
}
.ist-gescrollt .menue-schalter { background: var(--gruen); color: var(--weiss); }
.menue-striche { display: grid; gap: 5px; width: 18px; }
.menue-striche i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--zuegig); }
.menue-offen .menue-striche i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menue-offen .menue-striche i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 62rem) {
  .menue-schalter { display: inline-flex; position: relative; z-index: 2; }
  .marke { position: relative; z-index: 2; }
  /* Ohne JavaScript steht das Menü einfach unter dem Kopf */
  html:not(.js) .kopf-innen { flex-wrap: wrap; border-radius: var(--r); background: var(--nacht); }
  html:not(.js) .menue-schalter { display: none; }
  html:not(.js) .hauptmenue { flex-wrap: wrap; }
  html:not(.js) .hauptmenue ul { flex-wrap: wrap; }
  .js .hauptmenue {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: stretch; justify-content: center; gap: 1.5rem;
    padding: 6rem var(--rand) 3rem; background: var(--nacht); color: var(--weiss);
    visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s;
  }
  .js.menue-offen .hauptmenue { visibility: visible; opacity: 1; }
  .js.menue-offen { overflow: hidden; }
  .js.menue-offen .kopf-innen { background: transparent; box-shadow: none; backdrop-filter: none; color: var(--weiss); }
  .js.menue-offen .signet { color: var(--weiss); }
  .js.menue-offen .menue-schalter { background: var(--weiss); color: var(--nacht); }
  .js .hauptmenue ul { flex-direction: column; gap: .25rem; }
  .js .hauptmenue ul a { font-size: clamp(2rem, 9vw, 3.25rem); font-weight: 800; letter-spacing: -.035em; min-height: 3.5rem; padding: 0; box-shadow: none; }
  .js .hauptmenue ul a[aria-current="page"], .js .hauptmenue ul a.aktiv { color: var(--licht); }
  .js .kopf-telefon { align-self: flex-start; margin: 0; min-height: 3.25rem; font-size: 1.125rem; background: var(--weiss); color: var(--nacht) !important; }
}
@media (max-width: 26rem) { .marke-zusatz { display: none; } .signet { width: 36px; height: 36px; } }
@media (max-width: 23.5rem) {
  .menue-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menue-schalter { padding: 0 .9rem; }
  .kopf-innen { padding-left: .6rem; gap: .5rem; }
  .marke { gap: .5rem; }
  .marke-name { font-size: .9375rem; }
}

/* ------------------------------------------------------------------ Das Netz */
.netz { position: absolute; inset: 0; overflow: hidden; }
.netz canvas, .netz-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.netz-bild { object-fit: cover; opacity: .75; }
.netz-basis { opacity: 0; transition: opacity .6s; }
.netz-hell { opacity: 0; }
.ist-bereit .netz-basis { opacity: var(--deckkraft, .5); }
/* Wachsen: von der Zentrale aus wird das Netz freigelegt, am Rand läuft eine helle Front. */
.ist-wachsend .netz-basis {
  transition: none;
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--r, 0px) - 80px), transparent var(--r, 0px));
  mask-image: radial-gradient(circle at var(--ox) var(--oy), #000 calc(var(--r, 0px) - 80px), transparent var(--r, 0px));
}
.ist-wachsend .netz-hell {
  opacity: 1;
  -webkit-mask-image: radial-gradient(circle at var(--ox) var(--oy), transparent calc(var(--r, 0px) - 300px), #000 calc(var(--r, 0px) - 50px), transparent var(--r, 0px));
  mask-image: radial-gradient(circle at var(--ox) var(--oy), transparent calc(var(--r, 0px) - 300px), #000 calc(var(--r, 0px) - 50px), transparent var(--r, 0px));
}
/* Lichtkegel unter dem Mauszeiger */
.ist-fertig .netz-hell {
  transition: opacity .5s;
  -webkit-mask-image: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0, transparent 100%);
  mask-image: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0, transparent 100%);
}
.ist-fertig.ist-beleuchtet .netz-hell { opacity: 1; }
/* Eigene Lage auf der Karte: kleiner Punkt, Name daneben */
.netz-punkt {
  position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .6s; pointer-events: none;
  color: var(--weiss); font-size: .8125rem; font-weight: 700; letter-spacing: -.005em; white-space: nowrap; line-height: 1;
}
.netz-punkt.ist-da { opacity: 1; }
.netz-punkt i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--licht); box-shadow: 0 0 0 4px rgba(169, 236, 134, .22); }
.netz-punkt.ist-buero i { border-radius: 2px; background: var(--weiss); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.netz-punkt span { position: absolute; left: 14px; top: -6.5px; text-shadow: 0 0 6px var(--nacht), 0 0 12px var(--nacht); }

/* ------------------------------------------------------------------ Bühne der Startseite */
.buehne { position: relative; min-height: 100vh; min-height: 100svh; background: var(--nacht); color: var(--weiss); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
@media (min-height: 40rem) { .buehne { position: sticky; top: 0; height: 100vh; height: 100svh; } }
.buehne .netz { transform: scale(calc(1 + var(--v, 0) * .14)); transform-origin: 66% 46%; --deckkraft: .62; }
.buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 27, 12, .5) 0, rgba(11, 27, 12, 0) 22%, rgba(11, 27, 12, 0) 38%, rgba(11, 27, 12, .78) 72%, var(--nacht) 100%); }
.buehne-text { position: relative; z-index: 2; width: 100%; padding-block: 7rem clamp(4.5rem, 8vh, 6.5rem); transform: translateY(calc(var(--v, 0) * -3rem)); opacity: calc(1 - var(--v, 0) * 1.3); }
.buehne-ort { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 clamp(1rem, 2.5vh, 1.75rem); color: var(--licht); font-size: .9688rem; font-weight: 700; letter-spacing: -.005em; }
.buehne h1 { font-size: clamp(2.75rem, min(8.2vw, 14vh), 8.25rem); line-height: .96; letter-spacing: -.05em; max-width: none; text-wrap: initial; }
.zeile { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.zeile > span { display: block; }
.js:not(.ruhig) .zeile > span { animation: zeile-rein 1.1s var(--zuegig) both; }
.js:not(.ruhig) .zeile:nth-child(2) > span { animation-delay: .09s; }
.js:not(.ruhig) .zeile:nth-child(3) > span { animation-delay: .18s; }
@keyframes zeile-rein { from { transform: translateY(105%); } to { transform: none; } }
.js:not(.ruhig) .buehne-unten, .js:not(.ruhig) .buehne-ort { animation: blenden 1.2s .45s var(--zuegig) both; }
@keyframes blenden { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
.buehne-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; margin-top: clamp(1.5rem, 4vh, 3rem); }
.buehne-unten p { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.5; max-width: 36rem; margin: 0; color: #E4EEE0; }

/* ------------------------------------------------------------------ Das Blatt gleitet über die Bühne */
.blatt { position: relative; z-index: 2; background: var(--grund); border-radius: var(--r-gross) var(--r-gross) 0 0; margin-top: calc(var(--r-gross) * -1); }
.kopf-band + .blatt { padding-top: .25rem; }
.abschnitt { padding-block: var(--abstand); }
.abschnitt-eng { padding-block: clamp(2.5rem, 5vw, 4rem); }
.abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 3rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.abschnitt-kopf .kennung { grid-column: 1 / -1; margin: 0; }
.abschnitt-rechts { justify-self: end; }
@media (max-width: 52rem) { .abschnitt-kopf { grid-template-columns: 1fr; } .abschnitt-rechts { justify-self: start; } }

/* Seitenkopf der Unterseiten */
.kopf-band { position: relative; background: var(--nacht); color: var(--weiss); overflow: hidden; }
.kopf-band .netz { --deckkraft: .5; }
.kopf-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 27, 12, .78) 0, rgba(11, 27, 12, .25) 62%, rgba(11, 27, 12, .05) 100%); }
.kopf-band-text { position: relative; z-index: 2; padding-block: clamp(9rem, 19vh, 12rem) calc(clamp(3.5rem, 8vw, 6rem) + var(--r-gross)); }
.kopf-band .kennung { color: var(--licht); }
.kopf-band h1 { max-width: 16ch; }
.kopf-band .einleitung { color: #E4EEE0; margin-top: 1.5rem; }
.kopf-band-ref .kopf-band-text { padding-bottom: calc(clamp(6rem, 11vw, 10rem) + var(--r-gross)); }
.kopf-band-ref h1 { max-width: 20ch; font-size: clamp(2.4rem, 5.6vw, 5.75rem); }
.kopf-band-schlicht { padding-bottom: 0; }
.kopf-band-schlicht .kopf-band-text { padding-block: clamp(8rem, 16vh, 10rem) calc(2.5rem + var(--r-gross)); }
.kopf-band-schlicht h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }

.krumen { font-size: .875rem; margin-bottom: 1.25rem; }
.krumen ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: .35rem; color: var(--nacht-text); }
.krumen li + li::before { content: "/"; margin-right: .35rem; }
.krumen a { color: var(--weiss); }

/* ------------------------------------------------------------------ Was wir planen
   Eine Kachel ist immer offen. seite.js setzt ist-offen und lässt sie auch offen, wenn der Zeiger
   in einer Lücke steht oder den Bereich verlässt; so zieht sich nie alles kurz zusammen.
   Damit die Bewegung ruhig bleibt, ändert sich beim Öffnen nur der sichtbare Ausschnitt:
   Das Bild behält seine Größe (cqw = Breite des ganzen Bereichs), die Überschrift ihre Umbrüche. */
.felder { display: flex; gap: .75rem; list-style: none; margin: 0; padding: 0; height: clamp(26rem, 62vh, 38rem); container-type: inline-size; }
.feld { flex: 1 1 0; min-width: 0; transition: flex-grow .7s var(--zuegig); }
.feld.ist-offen { flex-grow: 2.3; }
.feld a { position: relative; display: block; height: 100%; border-radius: var(--r); overflow: hidden; contain: paint; background: var(--nacht); color: var(--weiss); text-decoration: none; }
.feld img { position: absolute; top: 0; left: 50%; width: 46cqw; max-width: none; height: 100%; object-fit: cover; transform: translateX(-50%); opacity: .85; transition: opacity .6s; }
.feld.ist-offen img { opacity: 1; }
.feld a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 27, 12, .08) 30%, rgba(11, 27, 12, .88) 100%); }
.feld-text { position: absolute; z-index: 1; left: 0; bottom: 0; padding: clamp(1rem, 1.5vw, 1.5rem); }
.feld-text h3 { width: calc(18cqw - 2 * clamp(1rem, 1.5vw, 1.5rem)); font-size: clamp(1.25rem, 1.65vw, 1.625rem); letter-spacing: -.03em; line-height: 1.08; overflow-wrap: normal; text-wrap: wrap; }
.feld-text p { margin: .55rem 0 0; font-size: 1rem; line-height: 1.45; color: #E4EEE0; width: min(24rem, 30cqw); opacity: 0; transform: translateY(.5rem); transition: opacity .25s, transform .5s var(--zuegig); }
.feld.ist-offen p { opacity: 1; transform: none; transition-delay: .18s; }
.feld-pfeil { position: absolute; z-index: 1; top: clamp(1rem, 1.6vw, 1.5rem); right: clamp(1rem, 1.6vw, 1.5rem); width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--weiss); color: var(--nacht); font-weight: 800; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .5s var(--zuegig); }
.feld.ist-offen .feld-pfeil { opacity: 1; transform: none; }
/* Ohne JavaScript übernimmt :hover */
html:not(.js) .felder:hover .feld.ist-offen:not(:hover) { flex-grow: 1; }
html:not(.js) .feld:hover, html:not(.js) .feld:focus-within { flex-grow: 2.3; }
html:not(.js) .feld:hover p, html:not(.js) .feld:focus-within p { opacity: 1; transform: none; }
html:not(.js) .feld:hover .feld-pfeil, html:not(.js) .feld:focus-within .feld-pfeil { opacity: 1; transform: none; }
/* Touch und schmale Bildschirme: alles offen übereinander */
@media (max-width: 75rem), (hover: none) {
  .felder { flex-direction: column; height: auto; }
  .feld, .feld.ist-offen { flex: none; }
  .feld a { height: clamp(15rem, 50vw, 22rem); }
  .feld img { left: 0; width: 100%; transform: none; opacity: 1; }
  .feld-text h3 { width: auto; font-size: clamp(1.25rem, 3vw, 1.75rem); }
  .feld-text p { opacity: 1; transform: none; width: auto; }
  .feld-pfeil { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Vom Plan auf die Baustelle */
.ablauf { position: relative; background: var(--nacht); color: var(--weiss); border-radius: var(--r-gross); margin-inline: clamp(.4rem, 1vw, .75rem); }
.ablauf .kennung { color: var(--licht); }
.ablauf-kopf { padding-block: var(--abstand) 2.5rem; }
.ablauf-kopf h2 { max-width: 14ch; }
.ablauf-schritte { list-style: none; margin-block: 0; padding-block: 0 var(--abstand); display: grid; gap: 3rem; }
.ablauf-schritt h3 { font-size: clamp(1.625rem, 3vw, 2.75rem); letter-spacing: -.035em; line-height: 1.05; margin: .4rem 0 .75rem; }
.ablauf-schritt p { color: var(--nacht-text); margin: 0; max-width: 34rem; }
.ablauf-lph { font-size: .9375rem; font-weight: 700; color: var(--licht); font-variant-numeric: tabular-nums; }
.ablauf-bild { margin: 1.5rem 0 0; }
.ablauf-bild img { width: 100%; border-radius: var(--r); background: var(--weiss); aspect-ratio: 4 / 3; object-fit: cover; }
.ablauf-bild.ist-plan img { object-fit: contain; }
.ablauf-bild figcaption { font-size: .875rem; color: var(--nacht-text); margin-top: .6rem; }
.ablauf-spur { display: none; }

/* Mitlaufend: nur wenn seite.js die Klasse setzt (große Bildschirme, keine reduzierte Bewegung).
   Das Fenster ist immer genau 4:3: In diesem Ausschnitt sitzt das Wasserzeichen (skripte/bilder.py). */
.ablauf.ist-gekoppelt { --pad-o: clamp(4.5rem, 10vh, 6.5rem); --pad-u: clamp(4.5rem, 10vh, 5.75rem); height: 280vh; }
.ist-gekoppelt .ablauf-buehne { position: sticky; top: 0; height: 100vh; overflow: hidden; border-radius: var(--r-gross); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); padding: var(--pad-o) clamp(1.5rem, 4vw, 4rem) var(--pad-u); }
.ist-gekoppelt .ablauf-kopf { padding: 0 0 clamp(1rem, 3vh, 2rem); margin: 0; max-width: none; grid-column: 1; grid-row: 2; }
.ist-gekoppelt .ablauf-kopf h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); }
.ist-gekoppelt .ablauf-kopf .kennung { margin-bottom: .75rem; }
.ist-gekoppelt .ablauf-schritte { grid-column: 1; grid-row: 3; display: block; position: relative; padding: 0; margin: 0; max-width: none; height: 14.5rem; }
.ist-gekoppelt .ablauf-schritt { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(.75rem); transition: opacity .3s, transform .5s var(--zuegig); pointer-events: none; }
.ist-gekoppelt .ablauf-schritt.ist-aktiv { opacity: 1; transform: none; pointer-events: auto; }
.ist-gekoppelt .ablauf-schritt .ablauf-bild { display: none; }
.ablauf-stapel { display: none; }
.ist-gekoppelt .ablauf-stapel { display: block; position: relative; grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: end; width: min(100%, calc((100vh - var(--pad-o) - var(--pad-u)) * 4 / 3)); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); }
/* Jedes Bild ist ein Blatt, das sich von unten auf das vorige legt; das vorige weicht zurück und dunkelt ab */
.ablauf-stapel .ablauf-bild { position: absolute; inset: 0; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--weiss); box-shadow: 0 -1.25rem 3rem rgba(11, 27, 12, calc(min(var(--w, 0) * 8, 1) * .45)); transform-origin: 50% 0; transform: translateY(calc((1 - var(--w, 0)) * 100%)) scale(calc(1 - var(--u, 0) * .05)); will-change: transform; }
.ablauf-stapel .ablauf-bild::after { content: ""; position: absolute; inset: 0; background: var(--nacht); opacity: calc(var(--u, 0) * .6); pointer-events: none; }
/* Der Zoom läuft zur Ecke unten rechts hin, das Wasserzeichen dort bleibt deshalb immer im Bild */
.ablauf-stapel .ablauf-bild img, .ablauf-stapel .ablauf-bild.ist-plan img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; transform-origin: 100% 100%; transform: scale(calc(1.07 - var(--z, 0) * .07)); }
.ablauf-stapel .ablauf-bild figcaption { position: absolute; z-index: 1; left: .875rem; bottom: .875rem; margin: 0; padding: .4rem .8rem; border-radius: var(--pille); background: rgba(11, 27, 12, .78); color: var(--weiss); backdrop-filter: blur(8px); }
.ist-gekoppelt .ablauf-spur { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, 1rem); list-style: none; margin: 0; padding: 0; position: absolute; left: clamp(1.5rem, 4vw, 4rem); right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(.75rem, 2.5vh, 1.5rem); }
.ablauf-station { position: relative; display: block; width: 100%; padding: .7rem 0 .25rem; border: 0; background: none; color: var(--nacht-text); font: inherit; font-size: .8125rem; line-height: 1.3; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color .25s; }
.ablauf-station span { font-weight: 800; font-variant-numeric: tabular-nums; }
.ablauf-station b { font-weight: 500; }
.ablauf-station::before, .ablauf-station i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.ablauf-station i { background: var(--licht); transform-origin: left; transform: scaleX(var(--f, 0)); }
.ablauf-station:hover, .ablauf-station[aria-current] { color: var(--weiss); }
.ablauf-station[aria-current] span { color: var(--licht); }
@media (max-width: 80rem) { .ablauf-station b { display: none; } }

/* ------------------------------------------------------------------ Projektindex */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tinte); }
.index-zeile a {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 3rem; gap: 2rem; align-items: center;
  padding-block: clamp(1.1rem, 2vw, 1.75rem); border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; transition: padding-left .55s var(--zuegig), color .2s, border-color .2s;
}
.index-zeile h3 { font-size: clamp(1.375rem, 3vw, 2.875rem); letter-spacing: -.035em; line-height: 1.08; font-weight: 700; }
.index-meta { font-size: .9375rem; line-height: 1.45; color: var(--grau); }
.index-meta b { display: block; color: var(--tinte); font-weight: 700; }
.index-pfeil { justify-self: end; font-size: 1.5rem; font-weight: 700; transition: transform .55s var(--zuegig); }
.index-zeile img { display: none; }
.index-zeile a:hover { color: var(--gruen); padding-left: clamp(.5rem, 1.5vw, 1.5rem); border-bottom-color: var(--gruen); }
.index-zeile a:hover .index-pfeil { transform: translateX(.35rem); }
/* Vorschaubilder inline, wenn kein Zeiger folgen kann (Touch, ohne JavaScript) */
.index:not(.mit-schwebe) .index-zeile a { grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 13rem); }
.index:not(.mit-schwebe) .index-zeile img { display: block; width: 6.5rem; height: 5rem; object-fit: cover; border-radius: var(--r-klein); background: var(--weiss); }
.index:not(.mit-schwebe) .index-pfeil { display: none; }
@media (max-width: 52rem) {
  .index:not(.mit-schwebe) .index-zeile a, .index-zeile a { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; }
  .index-zeile img { display: block !important; width: 4.5rem !important; height: 4.5rem !important; object-fit: cover; border-radius: var(--r-klein); }
  .index-meta { grid-column: 2; margin-top: -.6rem; }
  .index-pfeil { display: none; }
}
.index-schwebe { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(16rem, 24vw, 24rem); pointer-events: none; opacity: 0; transition: opacity .25s; margin: 1.25rem 0 0 1.25rem; }
.index-schwebe.ist-da { opacity: 1; }
.index-schwebe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--weiss); box-shadow: 0 24px 60px rgba(11, 27, 12, .3); transform: scale(.94); transition: transform .5s var(--zuegig); }
.index-schwebe.ist-da img { transform: none; }

/* ------------------------------------------------------------------ Aussage und Geschichte */
.aussage { font-size: clamp(1.75rem, 4.2vw, 4rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 700; margin: 0; max-width: 24ch; max-width: 30ch; }
.aussage.ist-geteilt span { color: #B4BDB1; transition: color .4s; }
.aussage.ist-geteilt span.ist-hell { color: var(--tinte); }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 6rem); }
.raster-2-eng { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 52rem) { .raster-2, .raster-2-eng { grid-template-columns: 1fr; } }
.zwischentitel { font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1.75rem; }
.zeitstrahl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.zeitstrahl li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--linie); }
.zeitstrahl b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--gruen); font-variant-numeric: tabular-nums; line-height: 1.25; }
.tabelle-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.tabelle-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: .15rem 1.5rem; padding-block: 1.25rem; border-bottom: 1px solid var(--linie); font-weight: 600; }
.tabelle-art { color: var(--grau); font-weight: 400; font-size: .9375rem; flex: none; }
@media (max-width: 40rem) { .tabelle-liste li { flex-wrap: wrap; } .tabelle-art { flex: 0 1 auto; } }

/* ------------------------------------------------------------------ Leistungen */
.phasen { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; font-size: .8125rem; line-height: 1.3; }
.phasen li { padding: .75rem .1rem .25rem 0; border-top: 3px solid var(--gruen); }
.phasen b { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }
.phasen span { color: var(--grau); hyphens: auto; }
.phasen-kompakt li { padding-top: .5rem; }
.phasen-kompakt .aus { border-top-color: var(--linie); color: var(--grau); }
.phasen-kompakt .an b { color: var(--gruen-tief); }
@media (max-width: 48rem) { .phasen:not(.phasen-kompakt) { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .75rem; } }
@media (max-width: 40rem) { .phasen-kompakt .lph-wort { display: none; } }
.leistung-zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--tinte); scroll-margin-top: 5rem; }
.leistung-kopf { align-self: start; position: sticky; top: 6rem; }
.leistung-kopf h2 { font-size: clamp(1.875rem, 3.4vw, 3.25rem); margin: .35rem 0 1rem; }
.leistung-lph { font-weight: 700; color: var(--gruen); font-size: .9375rem; }
.leistung-kopf p { color: var(--tinte-weich); margin: 0; max-width: 28rem; }
.leistung-punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; align-self: start; }
.leistung-punkte li { padding-block: .85rem; border-bottom: 1px solid var(--linie); font-weight: 600; hyphens: auto; }
@media (max-width: 52rem) { .leistung-zeile { grid-template-columns: 1fr; } .leistung-kopf { position: static; } }
@media (max-width: 34rem) { .leistung-punkte { grid-template-columns: 1fr; } }
.marken { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.marken a { display: inline-flex; align-items: center; min-height: 2.875rem; padding: 0 1.2rem; border-radius: var(--pille); box-shadow: inset 0 0 0 1px var(--grau-hell); color: var(--tinte); text-decoration: none; font-weight: 600; font-size: .9688rem; transition: background-color .2s, color .2s, box-shadow .2s; }
.marken a:hover { background: var(--gruen); color: var(--weiss); box-shadow: none; }

/* ------------------------------------------------------------------ Referenzen */
.karte-feld { position: relative; background: var(--nacht); color: var(--weiss); overflow: hidden; }
.karte-flaeche { position: relative; width: 100%; --deckkraft: .6; max-height: 100vh; }
.karte-flaeche .netz { position: absolute; inset: 0; }
.karte-feld .kopf-band-text { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--r-gross) + clamp(1.5rem, 4vw, 3.5rem)); padding-block: 0; pointer-events: none; }
.karte-feld .kopf-band-text > * { pointer-events: auto; }
.karte-feld h1 { max-width: 12ch; font-size: clamp(2.6rem, 6vw, 6rem); }
.karte-feld .einleitung { color: #E4EEE0; margin-top: 1rem; max-width: 26rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.karte-feld .kennung { color: var(--licht); }
.karte-feld::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(11, 27, 12, .85) 0, rgba(11, 27, 12, .25) 45%, rgba(11, 27, 12, 0) 70%); }
.karte-punkt {
  position: absolute; z-index: 2; width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; border-radius: 50%; display: grid; place-items: center; text-decoration: none;
}
.karte-punkt::before { content: ""; width: .875rem; height: .875rem; border-radius: 50%; background: var(--feld, var(--licht)); box-shadow: 0 0 0 2.5px var(--weiss), 0 2px 10px rgba(0, 0, 0, .5); transition: transform .35s var(--zuegig); }
.karte-punkt:hover::before, .karte-punkt:focus-visible::before, .karte-punkt.ist-hell::before { transform: scale(1.5); }
.karte-punkt.ist-aus { opacity: .18; pointer-events: none; }
.karte-punkt span { position: absolute; left: 1.75rem; top: 50%; transform: translateY(-50%); padding: .35rem .7rem; border-radius: var(--pille); background: var(--weiss); color: var(--nacht); font-size: .875rem; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.karte-punkt:hover, .karte-punkt:focus-visible, .karte-punkt.ist-hell { z-index: 4; }
.karte-punkt:hover span, .karte-punkt:focus-visible span, .karte-punkt.ist-hell span { opacity: 1; }
.karte-punkt.nach-links span { left: auto; right: 1.75rem; }
.karte-ort { position: absolute; z-index: 2; transform: translate(.75rem, -50%); font-size: .8125rem; font-weight: 700; color: var(--nacht-text); text-shadow: 0 0 6px var(--nacht), 0 0 12px var(--nacht); pointer-events: none; }
.karte-ort.links { transform: translate(calc(-100% - .75rem), -50%); }
.karte-buero { position: absolute; z-index: 2; width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: 2px; background: var(--weiss); box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.karte-unter { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--r-gross) + 1rem); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1.5rem; font-size: .8125rem; color: var(--nacht-text); pointer-events: none; }
.karte-unter > * { pointer-events: auto; }
.karte-unter a { color: var(--weiss); }
@media (max-width: 52rem) {
  /* Zu klein zum Treffen: auf dem Handy bleibt das Netz als Bild, die Punkte entfallen */
  .karte-punkt, .karte-ort, .karte-buero { display: none; }
  .karte-feld { min-height: 26rem; }
  .karte-flaeche { position: absolute; inset: 0; aspect-ratio: auto !important; height: 100%; }
  .karte-feld .kopf-band-text { position: relative; padding-block: clamp(7rem, 16vh, 9rem) calc(4rem + var(--r-gross)); }
  .karte-unter { position: absolute; justify-content: flex-start; padding-inline: var(--rand); }
}
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.filter[hidden] { display: none; }
.filter button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.875rem; padding: 0 1.15rem; background: transparent; color: var(--tinte); border: 0; border-radius: var(--pille); box-shadow: inset 0 0 0 1px var(--grau-hell); font: 600 .9375rem var(--sans); cursor: pointer; scroll-margin-top: 7rem; transition: background-color .2s, color .2s, box-shadow .2s; }
.filter button:hover { box-shadow: inset 0 0 0 1.5px var(--tinte); }
.filter button[aria-pressed="true"] { background: var(--tinte); color: var(--weiss); box-shadow: none; }
.filter .zahl { font-size: .8125rem; opacity: .7; font-variant-numeric: tabular-nums; }
.punktmarke { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; flex: none; }

.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.referenz-eintrag[hidden] { display: none; }
@media (max-width: 62rem) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .karten { grid-template-columns: 1fr; } }
.referenz { display: block; color: var(--tinte); text-decoration: none; }
.referenz:hover { color: var(--tinte); }
.referenz-bild { display: block; border-radius: var(--r); overflow: hidden; background: var(--weiss); }
.referenz-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--zuegig); }
.referenz:hover img, .referenz-eintrag.ist-hell img { transform: scale(1.04); }
.referenz-feld { display: block; margin-top: 1rem; font-size: .875rem; font-weight: 700; color: var(--gruen); }
.referenz h3 { font-size: clamp(1.1875rem, 1.7vw, 1.5rem); letter-spacing: -.025em; line-height: 1.18; margin: .3rem 0 .5rem; }
.referenz:hover h3 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .15em; }
.referenz-meta { font-size: .9375rem; line-height: 1.45; color: var(--grau); margin: 0; }

/* ------------------------------------------------------------------ Referenz-Detailseite */
.ref-titelbild { position: relative; z-index: 3; margin-top: clamp(-7rem, -8vw, -3rem); }
.ref-titelbild a { display: block; border-radius: var(--r-gross); overflow: hidden; background: var(--weiss); box-shadow: 0 30px 70px rgba(11, 27, 12, .2); }
.ref-titelbild img { width: 100%; max-height: min(72vh, 46rem); object-fit: cover; }
.ref-titelbild .plan img { object-fit: contain; padding: clamp(.5rem, 2vw, 1.5rem); }
.ref-zwei { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding-block: clamp(3rem, 6vw, 5.5rem); }
@media (max-width: 62rem) { .ref-zwei { grid-template-columns: 1fr; } }
.fliess { max-width: 44rem; }
.fliess h2 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -.03em; margin: 3rem 0 1rem; line-height: 1.1; }
.fliess h2:first-child { margin-top: 0; }
.fliess h3 { margin: 2rem 0 .6rem; }
.fliess ul { padding-left: 1.2rem; }
.fliess li { margin-bottom: .35rem; }
.fliess > p:first-of-type:not(.einleitung) { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; }
.rechtstext p:first-of-type { font-size: inherit !important; line-height: inherit !important; }
.steckbrief { position: sticky; top: 6rem; }
.steckbrief h2 { margin: 0 0 .75rem; font-size: 1rem; letter-spacing: -.005em; font-weight: 700; color: var(--grau); }
.steckbrief dl { margin: 0; border-top: 1px solid var(--tinte); }
.steckbrief dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding-block: .85rem; border-bottom: 1px solid var(--linie); }
.steckbrief dt { font-size: .875rem; color: var(--grau); padding-top: .1rem; }
.steckbrief dd { margin: 0; font-weight: 600; line-height: 1.45; }
.steckbrief ul { margin: 0; padding: 0; list-style: none; }
@media (max-width: 62rem) { .steckbrief { position: static; } }
.galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, 1rem); margin: 0; padding: 0 0 var(--abstand); list-style: none; }
.galerie li { grid-column: span 6; }
.galerie li:nth-child(3n) { grid-column: span 12; }
.galerie a { display: block; border-radius: var(--r); overflow: hidden; background: var(--weiss); cursor: zoom-in; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1s var(--zuegig); }
.galerie li:nth-child(3n) img { aspect-ratio: 21 / 9; }
.galerie .plan img { object-fit: contain; padding: .5rem; }
.galerie li:nth-child(3n).plan img { aspect-ratio: 16 / 9; }
.galerie a:hover img { transform: scale(1.025); }
@media (max-width: 40rem) { .galerie li, .galerie li:nth-child(3n) { grid-column: span 12; } .galerie li:nth-child(3n) img { aspect-ratio: 3 / 2; } }
.naechstes { display: block; position: relative; overflow: hidden; background: var(--nacht); color: var(--weiss); text-decoration: none; padding-block: clamp(4rem, 9vw, 8rem); }
.naechstes:hover { color: var(--weiss); }
.naechstes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; transition: opacity .7s, transform 1.4s var(--zuegig); }
.naechstes:hover img { opacity: .6; transform: scale(1.04); }
.naechstes-text { position: relative; z-index: 1; display: block; }
.naechstes .kennung { color: var(--licht); display: block; }
.naechstes b { display: block; font-size: clamp(2rem, 5.5vw, 5.25rem); line-height: 1.03; letter-spacing: -.04em; font-weight: 800; max-width: 18ch; text-wrap: balance; }

.bildbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(11, 27, 12, .96); color: var(--weiss); }
.bildbox[open] { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; align-items: center; }
.bildbox::backdrop { background: rgba(11, 27, 12, .96); }
.bildbox figure { grid-column: 2; margin: 0; display: grid; gap: .75rem; justify-items: center; height: 100dvh; padding-block: 1.5rem; grid-template-rows: minmax(0, 1fr) auto; }
.bildbox img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: var(--r-klein); background: var(--weiss); }
.bildbox figcaption { font-size: .9375rem; color: var(--nacht-text); text-align: center; }
.bildbox button { width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--weiss); font: 700 1.25rem var(--sans); cursor: pointer; justify-self: center; }
.bildbox button:hover { background: var(--weiss); color: var(--nacht); }
.bildbox-zurueck { grid-column: 1; grid-row: 1; }
.bildbox-weiter { grid-column: 3; grid-row: 1; }
.bildbox-zu { position: absolute; top: 1rem; right: .5rem; z-index: 1; }
.bildbox figure { grid-row: 1; }
@media (max-width: 40rem) { .bildbox[open] { grid-template-columns: 0 minmax(0, 1fr) 0; padding-inline: .5rem; } .bildbox-zurueck, .bildbox-weiter { position: absolute; bottom: 3.5rem; } .bildbox-zurueck { left: .75rem; } .bildbox-weiter { right: .75rem; } }

/* ------------------------------------------------------------------ Standorte und Kontakt */
.standort { background: var(--weiss); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.25rem); }
.standort h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.03em; margin-bottom: .75rem; }
.standort p { margin-bottom: 1.25rem; }
.kontakt-gross { display: grid; gap: .25rem; }
.kontakt-gross a { font-size: clamp(2rem, 6vw, 5.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; color: var(--tinte); text-decoration: none; width: fit-content; max-width: 100%; }
.kontakt-gross a:hover { color: var(--gruen); }

/* ------------------------------------------------------------------ Kontaktband und Fuß */
.kontaktband { position: relative; overflow: hidden; background: var(--gruen); color: var(--weiss); --deckkraft: .34; }
/* Die Netzlinien stehen hier einheitlich in Weiß: Grüne Bäche gingen auf dem Grün unter. */
.kontaktband canvas, .kontaktband .netz-bild { filter: brightness(0) invert(1); }
.kontaktband .netz-bild { opacity: .75; }
.kontaktband::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--gruen) 0, rgba(31, 127, 0, .82) 34%, rgba(31, 127, 0, 0) 72%); }
.kontaktband-innen { position: relative; z-index: 2; padding-block: clamp(4rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.kontaktband h2 { max-width: 11em; font-size: clamp(2.75rem, 7vw, 6.5rem); line-height: .98; letter-spacing: -.045em; }
.kontaktband-wege { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; margin-top: clamp(2rem, 4vw, 3.5rem); font-size: clamp(1.5rem, 3vw, 2.625rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.kontaktband-wege a { color: var(--weiss); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-underline-offset .3s var(--zuegig); }
.kontaktband-wege a:hover { color: var(--weiss); text-underline-offset: .3em; }
.kontaktband-orte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: clamp(3rem, 6vw, 5.5rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .55); font-size: 1rem; line-height: 1.55; }
.kontaktband-orte b { display: block; font-weight: 800; }
@media (max-width: 47.5rem) {
  .kontaktband::after { background: linear-gradient(180deg, rgba(31, 127, 0, .75) 0, rgba(31, 127, 0, .85) 100%); }
  .kontaktband-orte { grid-template-columns: 1fr; gap: 1.25rem; }
}

.fuss { position: relative; z-index: 2; background: var(--nacht); color: var(--nacht-text); font-size: .9375rem; }
.fuss a { color: var(--weiss); text-decoration: none; }
.fuss a:hover { color: var(--licht); text-decoration: underline; }
.fuss h2 { font-size: 1rem; color: var(--weiss); margin: 0 0 .85rem; letter-spacing: -.01em; line-height: 1.3; font-weight: 700; }
.fuss p { margin-bottom: .75rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { display: inline-block; padding: .22rem 0; }
.fuss-spalten { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 1.25rem 1.5rem; font-size: .875rem; }
.fuss-unten p { margin: 0; }
.fuss-unten a { text-decoration: underline; }
@media (max-width: 52rem) { .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .fuss-spalten { grid-template-columns: 1fr; } }
.seitenliste { padding-left: 1.2rem; }

/* ------------------------------------------------------------------ Seitenwechsel */
@media (prefers-reduced-motion: no-preference) {
  html:active-view-transition-type(seitenwechsel)::view-transition-old(root) { animation: 180ms ease both seite-raus; }
  html:active-view-transition-type(seitenwechsel)::view-transition-new(root) { animation: 420ms var(--zuegig) both seite-rein; }
  @keyframes seite-raus { to { opacity: 0; } }
  @keyframes seite-rein { from { opacity: 0; transform: translateY(14px); } }
  ::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--zuegig); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media print {
  .kopf, .fuss, .kontaktband, .filter, .sprungmarke, .krumen, .netz, .naechstes { display: none !important; }
  html, body, .blatt { background: #fff; }
  .kopf-band { background: #fff; color: #000; }
  .kopf-band::after { display: none; }
  .js .auf { opacity: 1; transform: none; }
}

/* Schmale Bildschirme: Das Netz liegt hinter der Überschrift, also ruhiger und ohne Namen. */
@media (max-width: 40rem) {
  .buehne .netz { --deckkraft: .4; }
  .buehne .netz-punkt span { display: none; }
  .buehne::after { background: linear-gradient(180deg, rgba(11, 27, 12, .55) 0, rgba(11, 27, 12, .1) 20%, rgba(11, 27, 12, .72) 45%, rgba(11, 27, 12, .92) 75%, var(--nacht) 100%); }
}
/* Ohne Mitlaufen (reduzierte Bewegung, ohne JavaScript): Text und Bild nebeneinander */
@media (min-width: 62rem) {
  .ablauf:not(.ist-gekoppelt) .ablauf-schritt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 4rem); }
  .ablauf:not(.ist-gekoppelt) .ablauf-schritt > * { grid-column: 1; }
  .ablauf:not(.ist-gekoppelt) .ablauf-bild { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}

/* Ohne JavaScript blendet sich der Kopf nicht weg und darf deshalb nicht über dem Inhalt mitlaufen. */
html:not(.js) .kopf { position: absolute; }

/* --- erzeugt von bauen.py aus quelle/daten/ --- */
.feld-strasse { --feld: #1F7F00; }
.feld-erschliessung { --feld: #1C2321; }
.feld-wasser { --feld: #1F5E8C; }
.feld-ingenieurbau { --feld: #7A4E12; }
.feld-freianlagen { --feld: #5A6B1E; }
.feld-konzepte { --feld: #6B3E7A; }
.feld-zeichnungen { --feld: #56605B; }
.punktmarke { background: var(--feld); }
.karte-flaeche { aspect-ratio: 5592 / 2971; }
.vt-pr-platz-potschappel { view-transition-name: ref-pr-platz-potschappel; }
.pos-pr-platz-potschappel { left: 46.02%; top: 88.10%; }
.vt-huettengrundbach-freital { view-transition-name: ref-huettengrundbach-freital; }
.pos-huettengrundbach-freital { left: 44.91%; top: 92.27%; }
.vt-loeschwasserzisterne-steinbach { view-transition-name: ref-loeschwasserzisterne-steinbach; }
.pos-loeschwasserzisterne-steinbach { left: 42.04%; top: 29.67%; }
.vt-niederauer-strasse-meissen { view-transition-name: ref-niederauer-strasse-meissen; }
.pos-niederauer-strasse-meissen { left: 28.75%; top: 40.02%; }
.vt-schlossallee-moritzburg { view-transition-name: ref-schlossallee-moritzburg; }
.pos-schlossallee-moritzburg { left: 47.97%; top: 43.55%; }
.vt-bindebach-steinbach { view-transition-name: ref-bindebach-steinbach; }
.pos-bindebach-steinbach { left: 42.71%; top: 27.88%; }
.vt-radverkehrskonzeption-freital { view-transition-name: ref-radverkehrskonzeption-freital; }
.pos-radverkehrskonzeption-freital { left: 43.96%; top: 91.90%; }
.vt-hampton-hallbergmoos { view-transition-name: ref-hampton-hallbergmoos; }
.pos-hampton-hallbergmoos { left: -153.70%; top: 904.86%; }
.vt-hecht-living-dresden { view-transition-name: ref-hecht-living-dresden; }
.pos-hecht-living-dresden { left: 54.99%; top: 68.57%; }
.pos-buero-freital { left: 46.05%; top: 88.38%; }
.pos-buero-kamenz { left: 90.66%; top: 8.12%; }
.pos-ort-meissen { left: 26.46%; top: 41.15%; }
.pos-ort-moritzburg { left: 47.92%; top: 40.71%; }
.pos-ort-radebeul { left: 45.83%; top: 58.83%; }
.pos-ort-dresden { left: 53.96%; top: 76.62%; }
.pos-ort-freital { left: 42.92%; top: 95.64%; }
.pos-ort-kamenz { left: 90.66%; top: 8.12%; }