/* kv-stadt.css — Städteseiten (Muster P67, Fabio 01.11.), alles ab Abschnitt 3.
   Lädt nach kv.css, kv-knopf.css, kv-netz.css, kv-ablauf.css, kv-stadt-hitze.css (--ts*, .wa-kenn)
   und kv-stadt-kosten.css (.k1-kopf/.k1-h2/.k1-z).

   Muster für alle Städte: nichts hier ist stadtspezifisch. Stadtabhängig steht nur im HTML (Texte, Links, Bilder, Quellen,
   Register-Einträge, Bezirks-Einträge 5–8, Karte: viewBox, Pfade, Nummern, Namensnennung). Farbe nur als Akzent
   (Teal = „was Sie gerade lesen“), keine neuen Flächen: Grund, Tafel (Ablauf) und die eine dunkle Fläche (Schluss).

   Reihenfolge der Seite: 1 Kopf (kv-stadt-hitze) → 2 Kosten (kv-stadt-kosten) → 3 Was gilt + Bezirke (.g2/.g3) → Ablauf
   (.al, Tafel) → Fragen (.bento) → Schluss (.final) → Artikel (.st-blatt) → Quellen (.kvq) → Fuß (kv.css).

   Bewegung (Fabio 01.11.: seriös, kein Text blendet ein): nur Hervorhebungen — Register „Wer mitredet“, Reiter-Stand,
   Bezirksfärbung (view-timeline, eigene Namen --g2-*/--g3-*, Scope je Block) und die Leitung im Ablauf (kv-ablauf.js).
   Kein kv-reveal. Klebeelemente nur in .g2-leib (Reiter, Register) und .g3 (Karte), Zeitachsen-Scope nur dort.
   Rückfall („Bewegung reduzieren“, ohne Scroll-Animation): /js/kv-stadt.js setzt .g2-einmal/.g3-einmal (ruhend). */

:root{--section-py:var(--s-24)}                       /* 96 — Fabio 29.10. (K1): 128 war zu viel Leerraum */
@media (max-width:640px){:root{--section-py:var(--s-16)}}

/* ══ Gemeinsam ══════════════════════════════════════════════════════════════ */

/* Lexikon-Begriff im Fließtext (Fabio 29.10.: Teal, ohne Unterstrich; Linie nur beim Überfahren). Je Begriff nur an der
   ersten passenden Stelle der Seite. Seitenverweise bleiben .kvn-a (Teal mit feiner Linie). Steht hier und nicht in
   kv-netz.css: dort gibt es .kvn-a--lex schon (gepunktet, Blogs) — die Regel dort zu ändern träfe alle Blogs. */
.kvn-a.kvn-a--lex{color:var(--teal-d);text-decoration:none;cursor:pointer}
.kvn-a.kvn-a--lex:hover{color:var(--teal-d);text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(45,107,92,.45)}
.kvn-a.kvn-a--lex:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}

/* Ende eines Grund-Abschnitts: Verlaufslinie statt Kante */
.g2::after,.section.flat::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(28,43,58,.14),transparent)}

/* Kennzeile „— TEXT“ der Startseiten-Bausteine (= .wa-kenn) */
.eyebrow{display:flex;align-items:baseline;margin:0 0 var(--s-6);font-size:var(--ts6);line-height:1.4;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)}
.eyebrow::before{content:"—";margin-right:.5em}

/* Versalienzeile S6 (gedämpft): Spaltenköpfe, Zeilenetiketten, Bezirks-Kennzeile */
.g2-reg-k,.g3-karte-k,.g2-z-l,.g3-e-k{font-size:var(--ts6);line-height:1.4;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
/* Zwischentitel S3 */
.g2-reiter,.g2-st-n,.g2-z-k,.g2-frage-t strong,.g3-h3,.g3-e-n{font-size:var(--ts3);line-height:1.35;font-weight:600;letter-spacing:-.012em}
/* Fließtext S4 */
.g2-blatt p,.g2-zeile dd,.g2-frage-t span,.g3-e-t{max-width:41em;font-size:var(--ts4);line-height:1.62;color:var(--body);text-wrap:pretty}

/* Fabio 01.11.: seriöser — kein Text blendet beim Scrollen ein. Bewegt wird nur noch, was etwas zeigt: Hitze-Reihe,
   Färbung der Bezirke, Hervorhebung im Register „Wer mitredet“, Reiter-Stand. Rückfall (ohne Scroll-Zeitachse /
   „Bewegung reduzieren“): Register und Bezirke ruhend (Klassen aus /js/kv-stadt.js). */
.g2-einmal,.g2-einmal *,.g3-einmal,.g3-einmal *{animation:none!important}

/* ══ 3 · Was in <Stadt> gilt (.g2: Stapel, Register, Steckbrief, Anfrage) ═══ */

@property --g2-l{syntax:'<number>';inherits:true;initial-value:1}
@property --g2-x{syntax:'<number>';inherits:true;initial-value:0}
@property --g2-y{syntax:'<number>';inherits:true;initial-value:0}
@property --g2-z{syntax:'<number>';inherits:true;initial-value:1}
@property --g2-f{syntax:'<number>';inherits:true;initial-value:1}
@property --g2-b1i{syntax:'<number>';inherits:true;initial-value:1}
@property --g2-b1o{syntax:'<number>';inherits:true;initial-value:0}
@property --g2-b2i{syntax:'<number>';inherits:true;initial-value:1}
@property --g2-b2o{syntax:'<number>';inherits:true;initial-value:0}
@property --g2-b3i{syntax:'<number>';inherits:true;initial-value:1}
@property --g2-u{syntax:'<number>';inherits:true;initial-value:1}
@property --g2-o{syntax:'<number>';inherits:true;initial-value:1}

.g2{position:relative;padding:var(--s-24) var(--section-px)}
.g2-in{max-width:var(--max-w);margin:0 auto}

.g2-kopf .k1-z{padding-bottom:.24em;margin-bottom:-.24em}

.g2-leib{
  --g2-r:64px;
  --g2-schritt:var(--g2-r);
  --g2-oben:var(--nav-h);
  --g2-lag:40px;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-rows:auto auto;column-gap:var(--s-16);
  timeline-scope:--g2-a0,--g2-a1,--g2-a2,--g2-e0,--g2-e1,--g2-sb}

.g2-stapel{grid-column:1;grid-row:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:var(--g2-r) auto var(--g2-r) auto var(--g2-r) auto}
.g2-halt{grid-column:1;grid-row-end:-1;position:relative;pointer-events:none;
  margin-bottom:calc((2 - var(--i)) * var(--g2-schritt))}
.g2-halt--1{grid-row-start:1;z-index:3}
.g2-halt--2{grid-row-start:3;z-index:4}
.g2-halt--3{grid-row-start:5;z-index:5}
.g2-anf,.g2-ende{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.g2-anf{top:var(--g2-r)}
.g2-ende{top:0;view-timeline-inset:calc(var(--g2-oben) + var(--i) * var(--g2-schritt)) 0px}
.g2-halt--1 .g2-anf{view-timeline-name:--g2-a0}
.g2-halt--2 .g2-anf{view-timeline-name:--g2-a1}
.g2-halt--3 .g2-anf{view-timeline-name:--g2-a2}
.g2-halt--2 .g2-ende{view-timeline-name:--g2-e0}
.g2-halt--3 .g2-ende{view-timeline-name:--g2-e1}

.g2-reiter{position:sticky;top:calc(var(--g2-oben) + var(--i) * var(--g2-schritt));z-index:1;pointer-events:auto;
  box-sizing:border-box;height:var(--g2-r);margin:0;display:flex;align-items:center;
  background:var(--bg);border-top:1px solid var(--border);
  color:color-mix(in srgb,var(--muted) calc(var(--g2-x) * 100%),var(--ink));
  transition:top .28s var(--ease-smooth)}
.g2-reiter::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--teal);
  transform-origin:0 50%;transform:scaleX(var(--g2-l));opacity:calc(1 - var(--g2-x))}
.g2-reiter::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--s-5);pointer-events:none;
  background:linear-gradient(to bottom,var(--bg),rgba(245,245,243,0))}
.g2-halt--2 .g2-reiter,.g2-halt--3 .g2-reiter{box-shadow:0 -8px 16px -12px rgba(28,43,58,.2)}
.g2-reiter a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease-smooth)}
.g2-reiter a::after{content:"";position:absolute;inset:0}
@media (hover:hover){.g2-reiter a:hover{color:var(--teal-d)}}
.g2-reiter a:focus-visible{outline:none}
.g2-reiter:has(a:focus-visible){outline:2px solid var(--teal);outline-offset:-2px;border-radius:var(--r-1)}

.g2-blatt{grid-column:1;position:relative;z-index:1;padding:var(--s-4) 0 var(--s-12);
  scroll-margin-top:calc(var(--g2-oben) + var(--i) * var(--g2-schritt) + var(--g2-r));
  opacity:calc(1 - .5 * var(--g2-y));transform:translateY(calc(var(--g2-y) * var(--g2-lag)))}
.g2-blatt--1{grid-row:2}
.g2-blatt--2{grid-row:4}
.g2-blatt--3{grid-row:6;padding-bottom:var(--s-8)}
.g2-blatt p{margin:0}
.g2-blatt p+p{margin-top:var(--s-6)}

.g2-reg{grid-column:2;grid-row:1 / span 2;position:relative;
  --c1:calc(var(--g2-b1i) * (1 - var(--g2-b1o)));
  --c2:calc(var(--g2-b2i) * (1 - var(--g2-b2o)));
  --c3:var(--g2-b3i)}
.g2-reg-in{position:sticky;top:var(--g2-oben);transition:top .28s var(--ease-smooth)}
.g2-reg-k{box-sizing:border-box;height:var(--g2-r);margin:0;display:flex;align-items:center;border-top:1px solid var(--border)}
.g2-reg-l{list-style:none;margin:0;padding:0}
.g2-st--1{--b:var(--g2-b1i)}
.g2-st--2{--b:var(--g2-b2i)}
.g2-st--3{--b:var(--g2-b3i)}
.g2-st{
  --nj:1;--st-w:.36;
  --st-s:calc((1 - var(--st-w)) / max(var(--nj) - 1, 1));
  --on:1;                                   /* Fabio 01.11.: Einträge stehen fest, nur die Hervorhebung (--akt) bewegt sich */
  --a:calc(min(var(--akt),var(--on)) * (1 - var(--g2-u)));
  --v:max(var(--a),var(--g2-u));
  position:relative;padding:var(--s-2) 0 var(--s-3)}
.g2-st::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--border);
  transform-origin:0 50%;transform:scaleX(var(--on));pointer-events:none}
.g2-st-n{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
  color:color-mix(in srgb,var(--teal-d) calc(var(--a) * 100%),color-mix(in srgb,var(--ink) calc(55% + var(--v) * 45%),var(--bg)))}
.g2-st-n>span{display:block;transform:translateY(calc((1 - var(--on)) * 110%))}
.g2-st-r{display:block;margin-top:2px;font-size:var(--ts5);line-height:1.45;
  color:color-mix(in srgb,var(--body) calc(var(--v) * 100%),var(--muted));
  opacity:clamp(0,calc((var(--on) - .7) / .3),1)}

.g2-brief{grid-column:1;grid-row:2;position:relative;margin:var(--s-12) 0 0;padding:0}
.g2-sbm{grid-column:1;grid-row:2;align-self:start;display:block;width:1px;height:1px;margin-top:var(--s-12);pointer-events:none;
  view-timeline-name:--g2-sb}
.g2-brief::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);
  transform-origin:0 50%;transform:scaleX(var(--g2-z))}
.g2-zeile{position:relative;padding:var(--s-6) 0}
.g2-zeile+.g2-zeile::before,.g2-zeile:last-child::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--border);
  transform-origin:0 50%;transform:scaleX(var(--g2-z))}
.g2-zeile+.g2-zeile::before{top:0}
.g2-zeile:last-child::after{bottom:0}
.g2-zeile dt{margin:0;opacity:clamp(0,calc((var(--g2-z) - .2) / .5),1);transform:translateY(calc((1 - clamp(0,calc((var(--g2-z) - .2) / .5),1)) * 12px))}
.g2-zeile dd{margin:var(--s-4) 0 0;opacity:clamp(0,calc((var(--g2-z) - .35) / .55),1);transform:translateY(calc((1 - clamp(0,calc((var(--g2-z) - .35) / .55),1)) * 12px))}
.g2-z-l{display:block}
.g2-z-k{display:block;margin-top:var(--s-2);color:var(--ink)}

.g2-frage{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-4) var(--s-16);align-items:start;
  margin-top:var(--s-16);
  opacity:var(--g2-f);transform:translateY(calc((1 - var(--g2-f)) * 30px))}
.g2-frage-t{display:contents}
.g2-frage-t strong{grid-column:1;color:var(--ink)}
.g2-frage-t span{grid-column:2}
.g2-frage .kv-knopf{grid-column:2;justify-self:start;margin-top:var(--s-2)}

@keyframes g2X{from{--g2-x:0}to{--g2-x:1}}
@keyframes g2B1i{from{--g2-b1i:0}to{--g2-b1i:1}}
@keyframes g2B1o{from{--g2-b1o:0}to{--g2-b1o:1}}
@keyframes g2B2i{from{--g2-b2i:0}to{--g2-b2i:1}}
@keyframes g2B2o{from{--g2-b2o:0}to{--g2-b2o:1}}
@keyframes g2B3i{from{--g2-b3i:0}to{--g2-b3i:1}}
@keyframes g2U{from{--g2-u:0}to{--g2-u:1}}
@supports (animation-timeline:view()) and (timeline-scope:none){
  /* Reiter: gelesenes Blatt wird grau (Stand), sonst ruhend */
  .g2-halt--1{animation:g2X linear both;animation-timeline:--g2-e0;animation-range:cover 80% cover 100%;animation-duration:auto!important}
  .g2-halt--2{animation:g2X linear both;animation-timeline:--g2-e1;animation-range:cover 80% cover 100%;animation-duration:auto!important}
  .g2-reg{animation:g2B1i linear both,g2B1o linear both,g2B2i linear both,g2B2o linear both,g2B3i linear both,g2U linear both;
    animation-timeline:--g2-a0,--g2-e0,--g2-a1,--g2-e1,--g2-a2,--g2-sb;
    animation-range:cover 30% cover 60%,cover 65% cover 80%,cover 45% cover 60%,cover 65% cover 80%,cover 45% cover 60%,cover 52% cover 66%;
    animation-duration:auto!important}
}
.g2-reg.g2-einmal{--g2-b1i:1;--g2-b1o:1;--g2-b2i:1;--g2-b2o:1;--g2-b3i:1;--g2-u:1}
@media (prefers-reduced-motion:reduce){
  .g2 *{animation:none!important}
  .g2-reg{--g2-u:1}
  .g2-reiter,.g2-reg-in{transition:none}
}

@media (min-width:901px) and (max-height:799px){
  .g2-st-r{display:none}
  .g2-st{padding:var(--s-2) 0}
}

/* ── Bezirke (.g3): Einträge links (7), Karte rechts (4, klebt) ─────────────
   Eintrag N ↔ Zeitachse --g3-tN ↔ Wert --g3-aN über :nth-child (bis 8). Leselinie = Band 40–41 % der Fensterhöhe.
   Karte: je Bezirk <path class="g3-f"> (mit Eintrag: g3-f--an + style="--g:var(--g3-aN)"), Nummern <span class="g3-nr">. */

@property --g3-a1{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-a2{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-a3{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-a4{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-a5{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-a6{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-a7{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-a8{syntax:'<number>';inherits:true;initial-value:0}
@property --g3-k{syntax:'<number>';inherits:true;initial-value:1}
@property --g3-l{syntax:'<number>';inherits:true;initial-value:1}

.g3{--g3-r:64px;--g3-oben:var(--nav-h);position:relative;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-rows:auto 1fr;column-gap:var(--s-16);
  margin-top:var(--s-16);scroll-margin-top:var(--nav-h);
  timeline-scope:--g3-t1,--g3-t2,--g3-t3,--g3-t4,--g3-t5,--g3-t6,--g3-t7,--g3-t8}
/* Überschrift: Zeile wie ein Reiter (Haarlinie oben, S3), aber ruhend */
.g3-h3{grid-column:1;grid-row:1;box-sizing:border-box;min-height:var(--g3-r);margin:0;display:flex;align-items:center;
  border-top:1px solid var(--border);color:var(--ink)}
.g3-l{grid-column:1;grid-row:2;margin:0;padding:var(--s-4) 0 0}
.g3-e{position:relative;padding:var(--s-6) 0 var(--s-10);view-timeline-inset:40% 59%;--g:0}
.g3-e:nth-child(1){view-timeline-name:--g3-t1;--g:var(--g3-a1)}
.g3-e:nth-child(2){view-timeline-name:--g3-t2;--g:var(--g3-a2)}
.g3-e:nth-child(3){view-timeline-name:--g3-t3;--g:var(--g3-a3)}
.g3-e:nth-child(4){view-timeline-name:--g3-t4;--g:var(--g3-a4)}
.g3-e:nth-child(5){view-timeline-name:--g3-t5;--g:var(--g3-a5)}
.g3-e:nth-child(6){view-timeline-name:--g3-t6;--g:var(--g3-a6)}
.g3-e:nth-child(7){view-timeline-name:--g3-t7;--g:var(--g3-a7)}
.g3-e:nth-child(8){view-timeline-name:--g3-t8;--g:var(--g3-a8)}
.g3-e-k{margin:0;font-variant-numeric:tabular-nums}
.g3-e-n{margin:var(--s-2) 0 0;color:color-mix(in srgb,var(--teal-d) calc(var(--g) * 100%),var(--ink))}
.g3-e-t{grid-column:1 / -1;margin:var(--s-3) 0 0}
.g3-ort{display:none}

.g3-karte{grid-column:2;grid-row:1 / span 2;position:relative}
.g3-karte-in{position:sticky;top:var(--g3-oben);transition:top .28s var(--ease-smooth)}
.g3-karte-k{box-sizing:border-box;height:var(--g3-r);margin:0;display:flex;align-items:center;border-top:1px solid var(--border)}
.g3-bild{position:relative;margin:var(--s-6) 0 0;
  opacity:var(--g3-k);transform:translateY(calc((1 - var(--g3-k)) * 24px))}
.g3-bild svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 18px 22px rgba(28,43,58,.10)) drop-shadow(0 2px 3px rgba(28,43,58,.06))}
.g3-f{fill:var(--stone);stroke:#FFFFFF;stroke-width:1.25;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.g3-f--an{fill:color-mix(in srgb,var(--teal) calc(var(--g,0) * 100%),#FFFFFF);stroke:color-mix(in srgb,var(--ink) 16%,#FFFFFF)}
.g3-nr{position:absolute;transform:translate(-50%,-50%);font-size:var(--ts6);line-height:1;font-weight:600;letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--muted);pointer-events:none}
.g3-nr--an{color:color-mix(in srgb,#FFFFFF calc(var(--g,0) * 100%),var(--ink))}
.g3-lz{margin:var(--s-4) 0 0;font-size:var(--ts6);line-height:1.5;color:var(--muted)}
.g3-lz a{color:inherit;text-decoration:underline;text-decoration-color:rgba(92,100,115,.4);text-underline-offset:2px}
.g3-lz a:hover{color:var(--teal-d);text-decoration-color:currentColor}

@keyframes g3A1{0%,100%{--g3-a1:0}16%,84%{--g3-a1:1}}
@keyframes g3A2{0%,100%{--g3-a2:0}16%,84%{--g3-a2:1}}
@keyframes g3A3{0%,100%{--g3-a3:0}16%,84%{--g3-a3:1}}
@keyframes g3A4{0%,100%{--g3-a4:0}16%,84%{--g3-a4:1}}
@keyframes g3A5{0%,100%{--g3-a5:0}16%,84%{--g3-a5:1}}
@keyframes g3A6{0%,100%{--g3-a6:0}16%,84%{--g3-a6:1}}
@keyframes g3A7{0%,100%{--g3-a7:0}16%,84%{--g3-a7:1}}
@keyframes g3A8{0%,100%{--g3-a8:0}16%,84%{--g3-a8:1}}
@keyframes g3L{from{--g3-l:0}to{--g3-l:1}}
@supports (animation-timeline:view()) and (timeline-scope:none){
  .g3{animation:g3A1 linear both,g3A2 linear both,g3A3 linear both,g3A4 linear both,g3A5 linear both,g3A6 linear both,g3A7 linear both,g3A8 linear both;
    animation-timeline:--g3-t1,--g3-t2,--g3-t3,--g3-t4,--g3-t5,--g3-t6,--g3-t7,--g3-t8;animation-duration:auto!important}
}
/* Rückfall: Karte ruhend; Zeiger/Fokus auf einem Eintrag färbt seine Bezirke (nur hier, sonst führt die Leselinie) */
.g3-einmal .g3-f--an,.g3-einmal .g3-nr--an,.g3-einmal .g3-e-n{transition:fill var(--dur-base) var(--ease-smooth),color var(--dur-base) var(--ease-smooth)}
.g3-einmal:has(.g3-e:nth-child(1):is(:hover,:focus-within)){--g3-a1:1}
.g3-einmal:has(.g3-e:nth-child(2):is(:hover,:focus-within)){--g3-a2:1}
.g3-einmal:has(.g3-e:nth-child(3):is(:hover,:focus-within)){--g3-a3:1}
.g3-einmal:has(.g3-e:nth-child(4):is(:hover,:focus-within)){--g3-a4:1}
.g3-einmal:has(.g3-e:nth-child(5):is(:hover,:focus-within)){--g3-a5:1}
.g3-einmal:has(.g3-e:nth-child(6):is(:hover,:focus-within)){--g3-a6:1}
.g3-einmal:has(.g3-e:nth-child(7):is(:hover,:focus-within)){--g3-a7:1}
.g3-einmal:has(.g3-e:nth-child(8):is(:hover,:focus-within)){--g3-a8:1}
@media (prefers-reduced-motion:reduce){
  .g3,.g3 *{animation:none!important}
  .g3-karte-in{transition:none}
}
/* Hohe Karten (viewBox höher als breit): .g3-bild.g3-bild--hoch. Alle Städte zeigen Flächen (Katastralgemeinden bzw.
   Bezirke), Punkt-Karte entfernt (Fabio 01.11., Richtung A). */
.g3-bild--hoch svg{width:auto;max-width:100%;max-height:calc(100vh - var(--nav-h) - 168px);margin:0 auto}

/* ══ Ablauf (kv-ablauf.css, Tafel) ══════════════════════════════════════════ */
/* Fabio 01.11.: seriöser — die Leitung wird weiter verlegt, aber alle Schritte stehen voll lesbar da (kein Abdunkeln
   noch nicht erreichter Schritte); das Angebot darf schweben (Fabio 01.11.) */
#ablauf.al-an .al-noch>*,#ablauf.al-an .al-feld .al-nach{opacity:1}
/* Fabio 30.10.: gleich breit wie die übrigen Abschnitte — Feld an der Kante 1320 statt mittig 1080. Leitung und Platte
   behalten ihre festen Maße (Bild 1:1), der Zugewinn bleibt rechts frei. Unter 1160 gilt kv-ablauf.css (Feld volle Breite). */
@media (min-width:1160px){.al-feld{max-width:var(--max-w)}}
.al-kopf .st-lede{font-size:var(--ts3)}
.al-antwort a{color:var(--teal-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(45,107,92,.45)}

/* ══ Startseiten-Bausteine (Klassennamen wie index.html, für ein späteres gemeinsames CSS) ══ */
.section{position:relative;z-index:2;padding:var(--section-py) var(--section-px);background:transparent;overflow:clip}
.section-in{max-width:var(--max-w);margin:0 auto;position:relative;z-index:2}
/* Tafel (= kv-b.css .kvb-flaeche) */
.section.highlight{background:var(--white);border:1px solid var(--border);border-radius:var(--r-5);margin:var(--s-8) var(--s-5);
  box-shadow:0 22px 44px -18px rgba(28,43,58,.12)}
/* H2 (S2, wie .k1-h2) */
.h-section{margin:0;font-size:clamp(28px,3.4vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.h-section .it{color:inherit;font-style:normal;font-weight:inherit}
/* Abschnittskopf: H2 links, Lead rechts unten bündig (5 : 6) */
.st-kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6) var(--s-16);align-items:end;margin-bottom:var(--s-12)}
.st-lede{margin:0;padding-bottom:4px;font-size:var(--ts3);line-height:1.55;color:var(--muted);max-width:52ch;text-wrap:pretty}
/* Variante gestapelt: Lead unter H2, linksbündig (FAQ, Fabio 01.11.) */
.st-kopf--stapel{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.st-kopf--stapel .st-lede{padding-bottom:0}
.st-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}

/* ── Fragen: Akkordeon .bento (Linie oben, Haarlinie je Frage) ── */
.bento{max-width:880px;border-top:1px solid var(--border)}
.bento-card{display:block;border-bottom:1px solid var(--border)}
.bento-card summary{cursor:pointer;display:grid;grid-template-columns:140px minmax(0,1fr) 28px;gap:var(--s-4);align-items:center;
  padding:var(--s-5) 0;list-style:none;-webkit-user-select:none;user-select:none}
.bento-card summary::-webkit-details-marker{display:none}
.bento-card summary::marker{content:""}
.bento-card summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:var(--r-1)}
.bento-tag{font-size:var(--ts6);line-height:1.4;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);
  overflow-wrap:break-word}
.bento-q{margin:0;font-size:var(--ts3);font-weight:500;line-height:1.35;letter-spacing:-.012em;color:var(--ink);
  transition:color var(--dur-base) var(--ease-smooth)}
.bento-chev{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--muted);
  transition:transform .3s var(--ease-smooth),color .3s var(--ease-smooth)}
.bento-card[open] .bento-chev{transform:rotate(180deg);color:var(--teal-d)}
@media (hover:hover){.bento-card summary:hover .bento-q{color:var(--teal-d)}}
.bento-a{margin:0;padding:0 var(--s-12) var(--s-6) calc(140px + var(--s-4));font-size:var(--ts4);line-height:1.62;color:var(--body);
  max-width:calc(140px + var(--s-4) + 40em);text-wrap:pretty}
.bento-a em{font-style:normal;font-weight:600;color:var(--ink);background:linear-gradient(to bottom,transparent 60%,var(--teal-lt2) 60%);padding:0 2px}
.bento-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-8);font-size:var(--ts5);color:var(--muted)}

/* ── Schluss: eine dunkle Fläche, mittig (Fabio 29.10.) ── */
.section--dark{background:var(--ink);color:var(--white)}
.final{position:relative;z-index:2;overflow:hidden;margin:var(--s-8) var(--s-5);padding:calc(var(--section-py) + var(--s-6)) var(--section-px);
  border-radius:var(--r-5);box-shadow:var(--sh-5);text-align:center}
.final::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(61,139,122,.12),transparent 70%),radial-gradient(ellipse 50% 50% at 50% 100%,rgba(46,64,87,.35),transparent 70%)}
.final-in{position:relative;z-index:1;max-width:720px;margin:0 auto}
.final-in>.eyebrow{justify-content:center;margin-bottom:var(--s-5);color:var(--auf-dunkel)}
.h-display{margin:0 0 var(--s-5);font-size:clamp(42px,5.2vw,68px);font-weight:400;line-height:1.05;letter-spacing:-.045em;color:var(--white);text-wrap:balance}
.h-display .it{color:var(--auf-dunkel);font-style:italic}
.final-sub{margin:0 0 var(--s-10);font-size:var(--fs-xl);line-height:1.6;color:rgba(255,255,255,.72)}
.final-sub strong{color:var(--white);font-weight:600}
.final-hint{margin:var(--s-6) 0 0;font-size:var(--ts5);line-height:1.5;color:rgba(255,255,255,.6)}
.final-hint strong{color:rgba(255,255,255,.86);font-weight:600;white-space:nowrap}

/* ── Artikel: Aufmacher mit Bild + Nebenliste (Startseite #wissen) ── */
.st-bild{position:relative;margin:0;overflow:hidden;border-radius:var(--r-3);background:#E6E5E0;isolation:isolate}
.st-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.st-bild--hell img{filter:brightness(1.14) saturate(1.04)}        /* Blog-Vorschaubilder sind abgedunkelt gespeichert */
@media (hover:hover){.st-blatt a:hover .st-bild img{transform:scale(1.04)}}
.st-tag{display:block;margin:0 0 6px;font-style:normal;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d)}
.st-blatt{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-12);align-items:start}
.st-auf{display:block;color:inherit;text-decoration:none}
.st-auf .st-bild{aspect-ratio:16/9;border-radius:var(--r-4);box-shadow:0 22px 44px -18px rgba(28,43,58,.16)}
.st-auf-txt{padding:var(--s-6) var(--s-2) 0 0}
.st-auf h3{margin:0;font-size:30px;font-weight:500;line-height:1.18;letter-spacing:-.028em;color:var(--ink);text-wrap:balance;max-width:24em;
  transition:color var(--dur-base) var(--ease-smooth)}
.st-auf p{margin:var(--s-3) 0 0;font-size:var(--fs-xl);line-height:1.6;color:var(--muted);max-width:52ch;text-wrap:pretty}
.st-neben{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.st-neben li+li{border-top:1px solid var(--border)}
.st-neben a{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--s-5);align-items:start;padding:var(--s-6) 0;color:inherit;text-decoration:none}
.st-neben li:first-child a{padding-top:0}
.st-neben .st-bild{aspect-ratio:4/3;box-shadow:0 14px 28px -16px rgba(28,43,58,.18)}
.st-neben b{display:block;font-size:var(--fs-2xl);font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty;
  transition:color var(--dur-base) var(--ease-smooth)}
.st-neben span{display:block;margin-top:6px;font-size:var(--fs-lg);line-height:1.55;color:var(--muted);text-wrap:pretty}
@media (hover:hover){.st-auf:hover h3,.st-neben a:hover b{color:var(--teal-d)}}
@media (prefers-reduced-motion:reduce){.st-bild img{transition:none}}

/* ══ Quellen am Seitenende ══════════════════════════════════════════════════
   Ruhige Kolophon-Zeile vor dem Fuß, kein Abschnitt mit Überschrift. Kopfzeile (Kennzeile + Stand) ist der Schalter
   (<details>). Fabio 30.10.: Desktop aufgeklappt, Handy zugeklappt (Skript direkt hinter dem Block, nach Breite).
   Gruppen fließen in Spalten, je Gruppe ein Absatz: Thema fett, Quellen mit „ · “ getrennt. S5 15, gedämpft. */
.kvq{position:relative;z-index:2;padding:var(--s-12) var(--section-px) var(--s-16)}
.kvq-d{max-width:var(--max-w);margin:0 auto;border-top:1px solid var(--border)}
.kvq-s{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-6);padding:var(--s-6) 40px var(--s-6) 0;position:relative;
  cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.kvq-s::-webkit-details-marker{display:none}
.kvq-s::marker{content:""}
.kvq-s:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:var(--r-1)}
.kvq-s .eyebrow{margin:0}
.kvq-stand{font-size:var(--ts5);line-height:1.5;color:var(--muted)}
.kvq-s .bento-chev{position:absolute;right:0;top:50%;margin-top:-14px}
.kvq-d[open] .kvq-s .bento-chev{transform:rotate(180deg);color:var(--teal-d)}
@media (hover:hover){.kvq-s:hover .kvq-stand{color:var(--ink)}}
.kvq-l{columns:3 300px;column-gap:var(--s-12);padding:var(--s-2) 0 0}
.kvq-g{break-inside:avoid;margin:0 0 var(--s-5);font-size:var(--ts5);line-height:1.6;color:var(--muted)}
.kvq-g b{font-weight:600;color:var(--ink)}
.kvq-g a{color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(92,100,115,.28);overflow-wrap:anywhere}
.kvq-g a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.kvq-g a[href^="/"]{color:var(--teal-d);text-decoration-color:rgba(45,107,92,.45)}

/* ══ Tablet / Handy ═════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .g2-leib{--g2-oben:calc(var(--nav-h) + 8px);column-gap:var(--s-10)}
  .g3{--g3-oben:calc(var(--nav-h) + 8px);column-gap:var(--s-10)}
  html:has(#mainNav.nav--hidden) .g2-leib{--g2-oben:0px}
  html:has(#mainNav.nav--hidden) .g3{--g3-oben:0px}
  .st-neben a{grid-template-columns:128px minmax(0,1fr);gap:var(--s-4)}
  .st-neben span{display:none}
}
@media (max-width:900px){
  /* 3 · Was gilt: Register als Liste über dem Stapel, nichts klebt außer den Reitern */
  .g2-leib{--g2-r:84px;--g2-schritt:6px;--g2-lag:0px;display:block}
  .g2-reiter{align-items:center}
  .g2-reg{margin-bottom:var(--s-10)}
  .g2-sbm{display:none}
  .g2-reg-in{position:static}
  .g2-reg-k{height:auto;border-top:0;margin-bottom:var(--s-3)}
  .g2-reg-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}
  .g2-st{--a:0;--v:1;padding:var(--s-2) 0}
  .g2-st-r{display:none}
  .g2-st-n{font-size:var(--ts4);line-height:1.4;font-weight:400;letter-spacing:0;color:var(--ink)}
  .g2-brief{margin-top:var(--s-4)}
  /* Ende Steckbrief: keine eigene Schlusslinie — die Kopflinie der Bezirke (.g3-h3) folgt direkt (sonst zwei Linien) */
  .g2-zeile:last-child::after{content:none}
  .g2-frage{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .g2-frage-t strong,.g2-frage-t span,.g2-frage .kv-knopf{grid-column:1}
  /* Bezirke: keine klebende Karte; jeder Eintrag trägt seine Lagekarte (<use> der großen Karte, die unsichtbar bleibt) */
  .g3{display:block;margin-top:var(--s-12);animation:none!important}
  .g3-h3{min-height:0;padding-top:var(--s-5)}
  .g3-l{padding-top:var(--s-2)}
  .g3-e{display:grid;grid-template-columns:minmax(0,1fr) 104px;column-gap:var(--s-4);align-items:start;padding:var(--s-5) 0 var(--s-6);--g:0}
  .g3-e+.g3-e{border-top:1px solid var(--border)}
  .g3-e-kopf{grid-column:1;grid-row:1;align-self:center}
  .g3-ort{display:block;grid-column:2;grid-row:1;width:104px;height:auto;overflow:visible;
    filter:drop-shadow(0 6px 8px rgba(28,43,58,.10))}
  .g3-e:nth-child(1) .g3-ort{--g3-a1:var(--g3-l)}
  .g3-e:nth-child(2) .g3-ort{--g3-a2:var(--g3-l)}
  .g3-e:nth-child(3) .g3-ort{--g3-a3:var(--g3-l)}
  .g3-e:nth-child(4) .g3-ort{--g3-a4:var(--g3-l)}
  .g3-e:nth-child(5) .g3-ort{--g3-a5:var(--g3-l)}
  .g3-e:nth-child(6) .g3-ort{--g3-a6:var(--g3-l)}
  .g3-e:nth-child(7) .g3-ort{--g3-a7:var(--g3-l)}
  .g3-e:nth-child(8) .g3-ort{--g3-a8:var(--g3-l)}
  .g3-e-t{margin-top:var(--s-3)}
  .g3-karte-in{position:static}
  .g3-karte-k{display:none}
  .g3-bild{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);opacity:1;transform:none}
  .g3-lz{margin-top:var(--s-2)}
  /* ab Ablauf */
  .st-kopf,.st-blatt{grid-template-columns:minmax(0,1fr)}
  .st-kopf{gap:var(--s-4);margin-bottom:var(--s-8)}
  .st-blatt{gap:var(--s-8)}
  .st-neben li:first-child{border-top:1px solid var(--border)}
  .st-neben li:first-child a{padding-top:var(--s-5)}
}
@supports (animation-timeline:view()){
  @media (max-width:900px){
    .g3-ort{animation:g3L linear both;animation-timeline:view();animation-range:entry 30% cover 40%;animation-duration:auto!important}
  }
}
@media (max-width:640px){
  .g2{padding:var(--s-16) var(--section-px)}
  .g2-kopf .wa-kenn{margin-bottom:var(--s-4)}
  .g2-blatt{padding:var(--s-2) 0 var(--s-8)}
  .g2-blatt p+p{margin-top:var(--s-5)}
  .g2-zeile{padding:var(--s-5) 0}
  .g2-zeile dd{margin-top:var(--s-3)}
  .g2-frage{margin-top:var(--s-10)}
  .g3{margin-top:var(--s-10)}
  .g3-e{grid-template-columns:minmax(0,1fr) 96px}
  .g3-ort{width:96px}
  .section.highlight{margin:var(--s-3);border-radius:var(--r-4)}
  .eyebrow{margin-bottom:var(--s-4)}
  .st-lede,.al-kopf .st-lede{font-size:var(--ts4)}
  .st-ctas{flex-direction:column;align-items:stretch;text-align:center}
  /* Fragen: Thema über der Frage statt eigener Spalte (12 px Versalien passen nicht in 104 px) */
  .bento-card summary{grid-template-columns:minmax(0,1fr) 28px;gap:var(--s-1) var(--s-3);padding:var(--s-4) 0}
  .bento-tag{grid-column:1;grid-row:1}
  .bento-q{grid-column:1;grid-row:2;font-size:var(--ts4);line-height:1.35}
  .bento-chev{grid-column:2;grid-row:1/3}
  .bento-a{padding:0 0 var(--s-5);font-size:16px;line-height:1.6;max-width:none}
  .bento-foot{flex-direction:column;align-items:flex-start}
  .final{margin:var(--s-3);border-radius:var(--r-4);padding:var(--s-16) var(--s-5)}
  .h-display{font-size:clamp(34px,8vw,48px)}
  .final-sub{font-size:var(--ts4);margin-bottom:var(--s-6)}
  .st-auf-txt{padding-top:var(--s-4)}
  .st-auf .st-bild{border-radius:var(--r-3);aspect-ratio:2/1}
  .st-auf h3{font-size:22px;line-height:1.25}
  .st-auf p{display:none}                     /* Handy: Titel reicht (wie Startseite) */
  .st-blatt{gap:var(--s-5)}
  .st-neben a{grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;align-items:center}
  .st-neben li:first-child a{padding-top:var(--s-4)}
  .st-neben .st-bild{border-radius:var(--r-2)}
  .st-neben b{font-size:var(--fs-lg);line-height:1.35}
  .kvq{padding:var(--s-8) var(--section-px) var(--s-10)}
  .kvq-s{padding:var(--s-5) 40px var(--s-5) 0;gap:var(--s-1) var(--s-4)}
  .kvq-l{columns:1}
}