/* ==========================================================================
   Erzählgrafiken und Motion Graphics
   Nur transform, opacity, stroke-dashoffset. Start über [data-an].an,
   Staffelung über --d (Millisekunden). Ruhezustand bei reduzierter Bewegung.
   ========================================================================== */

@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes auf{to{opacity:1;transform:none}}
@keyframes einblenden{to{opacity:1}}
@keyframes welle{0%{transform:scale(0);opacity:.9}80%{opacity:.35}100%{transform:scale(1);opacity:0}}
@keyframes wachsenX{to{transform:scaleX(1)}}
@keyframes wachsenY{to{transform:scaleY(1)}}
@keyframes dreh{to{transform:rotate(360deg)}}
@keyframes faechern{0%,8%{transform:none}30%,70%{transform:translateX(var(--x)) rotate(var(--r))}92%,100%{transform:none}}

/* ---------- 1 · Umkreiskarte ---------- */
.umkreis{margin:0;position:relative;width:100%;max-width:640px;margin-inline:auto}
.umkreis svg{width:100%;height:auto;overflow:visible}
.uk-land{fill:rgba(255,255,255,.018);stroke:none}
.uk-kreis{fill:rgba(143,193,172,0);stroke:rgba(255,255,255,.2);stroke-width:.2;stroke-dasharray:1;stroke-dashoffset:1;transition:fill .8s var(--ease-out),stroke .8s var(--ease-out)}
.uk-kreis.hervor{fill:rgba(143,193,172,.13);stroke:rgba(143,193,172,.85)}
.uk-fluss{fill:none;stroke:rgba(111,163,181,.55);stroke-width:.35;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.uk-rhein{stroke:rgba(111,163,181,.85);stroke-width:.9}
.uk-ring{fill:none;stroke:rgba(255,255,255,.3);stroke-width:.22;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg)}
.uk-ringtext{fill:rgba(255,255,255,.6);font:500 2.3px var(--mono);letter-spacing:.06em;opacity:0}
.uk-welle{fill:none;stroke:var(--sand-licht);stroke-width:.5;opacity:0;transform-box:view-box;transform-origin:0 0}
.uk-p{fill:var(--gruen-licht);opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.uk-p--ka{fill:#F1C7B4}
.uk-stadt{opacity:0}
.uk-stadt circle{fill:#fff}
.uk-stadt text{fill:rgba(255,255,255,.86);font:500 2.5px var(--sans);paint-order:stroke;stroke:rgba(17,26,24,.8);stroke-width:.55px}
.uk-stadt--2 text{fill:rgba(255,255,255,.62);font-size:2.05px}
.uk-mitte__ring{fill:none;stroke:#fff;stroke-width:.4}
.uk-mitte__punkt{fill:var(--sand-licht)}
.uk-mitte text{fill:#fff;font:600 3px var(--serif);paint-order:stroke;stroke:rgba(17,26,24,.85);stroke-width:.7px}
.umkreis__legende{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:10px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);min-height:1.4em;text-align:center}
.umkreis__punkt{width:9px;height:9px;border-radius:50%;background:var(--gruen-licht);flex:0 0 auto}

.an .uk-kreis{animation:zeichnen 2.2s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .uk-fluss{animation:zeichnen 2.8s var(--ease-out) .5s forwards}
.an .uk-ring{animation:zeichnen 1.8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .uk-ringtext{animation:einblenden .8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .uk-welle{animation:welle 2.4s cubic-bezier(.3,.6,.4,1) 1.35s forwards}
.an .uk-p{animation:auf .7s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .uk-stadt{animation:einblenden .9s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}

/* Startseiten-Kopf mit Karte */
.kopf--start .kopf__raster{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
.kopf--start h1{font-size:clamp(34px,3.9vw,56px)}
.kopf--start .suche{margin-top:28px}
.kopf--start .btn-reihe{margin-top:16px}
@media (max-width:900px){
  .kopf--start .kopf__raster{grid-template-columns:minmax(0,1fr)}
  .kopf--start .kopf__grafik{max-width:440px}
}

/* ---------- 2 · Gebietskarte ---------- */
.gebiet{margin:0;width:100%;max-width:560px;margin-inline:auto}
.gebiet svg{width:100%;height:auto;overflow:hidden}
.gk-umriss{fill:rgba(143,193,172,.07);stroke:rgba(255,255,255,.8);stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.gk-neben{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.gk-p{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center}
.gk-p circle{fill:var(--gruen-licht);stroke:rgba(17,26,24,.8);stroke-width:1px;vector-effect:non-scaling-stroke;transition:fill .25s}
.gk-p text{fill:var(--nacht);font-family:var(--sans);font-weight:700;text-anchor:middle;pointer-events:none}
.gk-p--hervor circle{fill:var(--sand-licht)}
.gk-p:hover circle,.gk-p:focus circle{fill:#fff}
.gk-ka{opacity:0}
.gk-ka circle{fill:var(--sand-licht);stroke:#fff;stroke-width:1.2px;vector-effect:non-scaling-stroke}
.gk-ka text,.gk-richtung text{fill:#fff;font-family:var(--mono);font-weight:500;letter-spacing:.04em;opacity:0}
.gk-richtung path{fill:none;stroke:var(--sand-licht);stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.gk-richtung .gk-richtung__kopf{fill:var(--sand-licht);stroke:none;opacity:0}
.an .gk-umriss{animation:zeichnen 2.4s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .gk-neben{animation:zeichnen 1.8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .gk-p{animation:auf .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .gk-ka,.an .gk-ka text{animation:einblenden .8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .gk-richtung path{animation:zeichnen 1.4s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .gk-richtung .gk-richtung__kopf,.an .gk-richtung text{animation:einblenden .6s var(--ease-out) forwards;animation-delay:calc((var(--d) + 1200) * 1ms)}
.gebiet--hell .gk-umriss{fill:rgba(45,90,77,.06);stroke:var(--gruen)}
.gebiet--hell .gk-neben{stroke:rgba(23,32,30,.2)}
.gebiet--hell .gk-p circle{stroke:#fff}

/* ---------- 3 · Umriss ---------- */
.umriss{margin:0;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1}
.umriss svg{width:100%;height:100%;overflow:visible}
.ug-raster{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1px;vector-effect:non-scaling-stroke}
.ug-flaeche{fill:rgba(143,193,172,.16);opacity:0}
.ug-linie,.ug-kreis{fill:none;stroke:var(--gruen-licht);stroke-width:2.2px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ug-kreis{stroke:rgba(255,255,255,.4);stroke-width:1.2px;stroke-dasharray:1}
.ug-mitte{fill:var(--sand-licht)}
.ug-mass path,.ug-nord path{stroke:rgba(255,255,255,.75);stroke-width:1.4px;vector-effect:non-scaling-stroke;fill:none}
.ug-nord path{fill:rgba(255,255,255,.75)}
.ug-mass text,.ug-nord text{fill:rgba(255,255,255,.8);font-family:var(--mono)}
.ug-mass,.ug-nord{opacity:0}
.an .ug-linie{animation:zeichnen 2.8s var(--ease-out) .2s forwards}
.an .ug-kreis{animation:zeichnen 1.6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .ug-flaeche{animation:einblenden 1.2s var(--ease-out) 2.2s forwards}
.an .ug-mass,.an .ug-nord{animation:einblenden .8s var(--ease-out) 1.6s forwards}

/* ---------- 4 · Szenen-Bühne ---------- */
.buehne-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
.buehne{position:sticky;top:calc(var(--nav-h) + 32px);height:min(70vh,560px);border-radius:26px;background-color:#0D1513;background-image:radial-gradient(90% 70% at 30% 20%,rgba(45,90,77,.45),transparent 65%);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.szene{position:absolute;inset:0;display:grid;place-items:center;padding:6%;opacity:0;transition:opacity .7s var(--ease-out)}
.szene.an{opacity:1}
.szene svg{width:100%;max-width:480px;height:auto;overflow:visible}
.buehne__zaehler{position:absolute;left:22px;bottom:18px;font:500 12px/1 var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.6)}
.schritte{list-style:none;margin:0;padding:0}
.schritt{min-height:62vh;display:flex;flex-direction:column;justify-content:center;margin:0;padding:24px 0}
.schritt:first-child{min-height:48vh;justify-content:flex-start;padding-top:8px}
.schritt:last-child{min-height:50vh}
.schritt__nr{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gruen-licht);margin:0 0 12px;opacity:.5;transition:opacity .5s}
.schritt h3{font-size:clamp(24px,2.4vw,32px);color:rgba(255,255,255,.34);transition:color .5s var(--ease-out)}
.schritt p{color:rgba(255,255,255,.44);transition:color .5s var(--ease-out);max-width:46ch}
.schritt.an h3{color:#fff}
.schritt.an p{color:rgba(255,255,255,.82)}
.schritt.an .schritt__nr{opacity:1}
.schritt__norm{font:500 12.5px/1.5 var(--mono);color:rgba(255,255,255,.5)!important}
.szene svg *{vector-effect:non-scaling-stroke}
.sz-blatt rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.5);stroke-width:1.6}
.sz-zug{fill:none;stroke:rgba(255,255,255,.7);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.sz-zug--sand{stroke:var(--sand-licht);stroke-width:7}
.sz-label{fill:rgba(255,255,255,.7);font:500 14px var(--mono);letter-spacing:.06em}
.sz-stempel{opacity:0;transform:scale(1.6) rotate(-14deg);transform-box:fill-box;transform-origin:center}
.sz-stempel circle,.sz-stempel path{fill:none;stroke:var(--sand-licht);stroke-width:3}
.sz-tage rect,.sz-tage4 rect{fill:var(--gruen-licht);opacity:.18;transform:scaleX(.2);transform-box:fill-box;transform-origin:left}
.sz-tage4 text{fill:rgba(255,255,255,.6);font:500 12px var(--mono)}
.sz-uhr__rand{fill:none;stroke:rgba(255,255,255,.14);stroke-width:12}
.sz-uhr__lauf{fill:none;stroke:var(--gruen-licht);stroke-width:12;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:200px 130px}
.sz-zeiger{stroke:#fff;stroke-width:4;stroke-linecap:round;transform-origin:200px 130px}
.sz-gross{fill:#fff;font:600 38px var(--serif)}
.sz-ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.sz-weg{fill:none;stroke:var(--sand-licht);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1}
.sz-heim{fill:var(--sand-licht)}
.sz-pin{opacity:0;transform:translateY(-12px);transform-box:fill-box}
.sz-pin circle{fill:var(--gruen-licht)}
.sz-pin path{stroke:var(--nacht);stroke-width:2.2;stroke-linecap:round}
.sz-jahre__rand{fill:rgba(255,255,255,.08)}
.sz-jahre__lauf{fill:var(--gruen-licht);transform:scaleX(0);transform-origin:50px 0}
.sz-jahre path{stroke:rgba(255,255,255,.5);stroke-width:1.5}
.sz-jahre text{fill:rgba(255,255,255,.66);font:500 13px var(--mono)}
.sz-marke{stroke:var(--sand-licht);stroke-width:3;opacity:0}
.sz-jahre .sz-label{fill:var(--sand-licht);opacity:0}
.szene.an .sz-zug,.szene.an .sz-ring,.szene.an .sz-weg{animation:zeichnen 1s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.szene.an .sz-stempel{animation:auf .5s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--d) * 1ms)}
.szene.an .sz-tage rect,.szene.an .sz-tage4 rect{animation:tagfuell .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes tagfuell{to{opacity:.85;transform:none}}
.szene.an .sz-uhr__lauf{animation:zeichnen 2s cubic-bezier(.4,0,.2,1) .3s forwards}
.szene.an .sz-zeiger{animation:dreh 2s cubic-bezier(.4,0,.2,1) .3s forwards}
.szene.an .sz-pin{animation:auf .5s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.szene.an .sz-jahre__lauf{animation:jahre 2.2s var(--ease-out) .3s forwards}
@keyframes jahre{to{transform:scaleX(1)}}
.szene.an .sz-marke,.szene.an .sz-jahre .sz-label{animation:einblenden .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@media (max-width:900px){
  .buehne-raster{grid-template-columns:minmax(0,1fr);gap:0}
  .buehne{top:calc(var(--nav-h) + 8px);height:min(40vh,320px);z-index:2}
  .schritt,.schritt:first-child,.schritt:last-child{min-height:52vh;justify-content:center;padding:24px 0}
}

/* ---------- 5 · Fristen ---------- */
.fristen{margin:0;overflow-x:auto}
.fristen svg{width:100%;min-width:620px;height:auto}
.fr-achse path{stroke:var(--linie);stroke-width:1.5}
.fr-achse text{fill:var(--leise);font:500 13px var(--mono)}
.fr-land{fill:var(--tinte);font:600 16px var(--sans)}
.fr-spur{fill:var(--papier-2)}
.fr-balken{transform:scaleX(0);transform-box:fill-box;transform-origin:left}
.fr-balken--bw{fill:var(--gruen)}
.fr-balken--rp{fill:var(--sand)}
.fr-pin{stroke:var(--tinte);stroke-width:2;opacity:0}
.fr-wert{fill:var(--tinte);font:600 15px var(--sans);opacity:0}
.fr-wert--innen{fill:#fff}
.an .fr-balken{animation:wachsenX 1.4s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .fr-pin,.an .fr-wert{animation:einblenden .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.flaeche-nacht .fr-achse text,.flaeche-nacht .fr-land{fill:rgba(255,255,255,.8)}
.flaeche-nacht .fr-spur{fill:rgba(255,255,255,.08)}
.flaeche-nacht .fr-achse path,.flaeche-nacht .fr-pin{stroke:rgba(255,255,255,.4)}
.flaeche-nacht .fr-wert{fill:#fff}
.flaeche-nacht .fr-balken--bw{fill:var(--gruen-licht)}
.flaeche-nacht .fr-balken--rp{fill:var(--sand-licht)}

/* ---------- 6 · Balken ---------- */
.balken{margin:0}
.balken__liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.balken__zeile{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) auto;gap:14px;align-items:center;margin:0}
.balken__label{font:500 15px/1.3 var(--sans);color:var(--tinte)}
.balken__label a{color:var(--tinte);text-decoration:none}
.balken__label a:hover{color:var(--gruen);text-decoration:underline}
.balken__label small{display:block;color:var(--leise);font:500 11.5px/1.4 var(--mono);margin-top:2px}
.balken__spur{height:16px;border-radius:999px;background:var(--papier-2);overflow:hidden}
.balken__fuell{display:block;height:100%;width:calc(var(--w) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--gruen) 0%,#4A8474 100%);transform:scaleX(0);transform-origin:left}
.balken__zeile--hervor .balken__fuell{background:linear-gradient(90deg,var(--sand) 0%,#C1704F 100%)}
.balken__wert{font:600 15.5px/1 var(--sans);color:var(--tinte);min-width:88px;text-align:right}
.an .balken__fuell{animation:wachsenX 1.3s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
@media (max-width:640px){
  .balken__zeile{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .balken__spur{grid-column:1 / -1;grid-row:2}
}

/* ---------- 7 · Rechtsräume ---------- */
.rechtsraeume{margin:0;max-width:520px;margin-inline:auto}
.rechtsraeume svg{width:100%;height:auto}
.rr-flaeche{opacity:0}
.rr-bw{fill:rgba(143,193,172,.34)}
.rr-rp{fill:rgba(227,162,134,.34)}
.rr-fr{fill:rgba(111,163,181,.34)}
.rr-kante{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1}
.rr-rand{fill:none;stroke:rgba(255,255,255,.5);stroke-width:.4;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg)}
.rr-label{opacity:0;transform:translateY(3px)}
.rr-zahl{fill:#fff;font:600 7px var(--serif)}
.rr-name{fill:rgba(255,255,255,.78);font:500 2.6px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.an .rr-flaeche{animation:einblenden 1.2s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .rr-kante,.an .rr-rand{animation:zeichnen 2s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .rr-label{animation:auf .8s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}

/* ---------- 8 · Strukturgrafiken (helle Köpfe) ---------- */
.strukturgrafik{margin:0;width:100%;max-width:480px;margin-left:auto}
.strukturgrafik svg{width:100%;height:auto;overflow:visible}
.gf-grab{fill:#fff;stroke:rgba(45,90,77,.55);stroke-width:1.5;opacity:0;transform:translateY(-14px);transform-box:fill-box}
.gf-urne{fill:var(--gruen-hell);stroke:var(--gruen);stroke-width:1.5;opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}
.gf-baum{fill:rgba(143,193,172,.28);stroke:var(--gruen);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.gf-weg{fill:none;stroke:rgba(154,75,50,.35);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.an .gf-grab,.an .gf-urne{animation:auf .7s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .gf-baum,.an .gf-weg{animation:zeichnen 1.6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.kg-tag{fill:#fff;stroke:var(--linie);stroke-width:1.5;opacity:0;transform:translateY(10px);transform-box:fill-box}
.kg-tag--bw{fill:var(--gruen-hell);stroke:var(--gruen)}
.strukturgrafik text{fill:var(--leise);font:500 14px var(--mono)}
.kg-bogen{fill:none;stroke:var(--sand);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1}
.an .kg-tag{animation:auf .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .kg-bogen{animation:zeichnen 1.4s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.mg-saeule{fill:var(--gruen);transform:scaleY(0);transform-box:fill-box;transform-origin:bottom}
.mg-saeule:nth-of-type(3n+2){fill:#4A8474}
.mg-saeule:nth-of-type(3n){fill:var(--sand)}
.mg-basis{stroke:var(--linie);stroke-width:2}
.strukturgrafik .mg-saeule + text{opacity:0}
.an .mg-saeule{animation:wachsenY 1.2s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.an .mg-saeule + text{animation:einblenden .6s var(--ease-out) forwards;animation-delay:calc(var(--d) * 1ms)}
.blaetter{height:300px;position:relative}
.deck{position:absolute;inset:0}
.deck i{position:absolute;left:50%;bottom:30px;width:200px;aspect-ratio:3/4;margin-left:-100px;border-radius:14px;background:#fff;border:1px solid var(--linie);box-shadow:0 18px 40px -24px rgba(23,32,30,.4);transform-origin:50% 120%;background-image:linear-gradient(var(--linie-2) 2px,transparent 2px);background-size:100% 22px;background-position:0 46px;background-clip:content-box;padding:22px}
.an .deck i{animation:faechern 8s cubic-bezier(.3,1.2,.5,1) infinite}
.deck i:nth-child(1){--r:-15deg;--x:-42%}.deck i:nth-child(2){--r:-5deg;--x:-14%}.deck i:nth-child(3){--r:5deg;--x:14%}.deck i:nth-child(4){--r:15deg;--x:42%}

/* ---------- Wortwelle ---------- */
.satz{font:400 clamp(26px,3.3vw,44px)/1.3 var(--serif);color:var(--tinte);letter-spacing:-.01em;max-width:30ch;text-wrap:balance}
.satz .w{color:rgba(23,32,30,.2);transition:color .5s var(--ease-out)}
.satz .w.hot{color:var(--tinte)}
.satz .w.hot.akzent{color:var(--sand)}

/* ---------- Zähler ---------- */
[data-zaehler]{font-variant-numeric:tabular-nums}

/* ---------- Suchdialog ---------- */
.suchdialog{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-start;justify-content:center;padding:calc(var(--nav-h) + 24px) var(--gutter) 24px}
.suchdialog__hinter{position:absolute;inset:0;background:rgba(12,19,17,.62)}
.suchdialog__box{position:relative;width:min(680px,100%);background:var(--papier);border-radius:24px;padding:22px;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.suchdialog .suche{max-width:none}
.suchdialog__hinweis{margin:14px 4px 0;color:var(--leise);font-size:14.5px}
.suchdialog .treffer{position:static;margin-top:10px;box-shadow:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .suchdialog__hinter{background:rgba(12,19,17,.48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
html.sparsam .suchdialog__hinter{background:rgba(12,19,17,.72)}

/* ---------- Sonstiges ---------- */
.kartenbox{background-color:var(--nacht);border-radius:24px;padding:clamp(16px,2.4vw,32px);color:#fff}
.nummernliste{counter-reset:nr;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.nummernliste > li{counter-increment:nr;margin:0}
.nummernliste .kachel{padding-left:64px}
.nummernliste .kachel::before{content:counter(nr);position:absolute;left:18px;top:22px;width:30px;height:30px;border-radius:50%;background:var(--gruen-hell);color:var(--gruen-dunkel);font:700 14px/30px var(--sans);text-align:center;z-index:1}
.region-kacheln .kachel svg{width:100%;height:auto;max-height:150px;margin-bottom:12px}
.mini-umriss path{fill:var(--gruen-hell);stroke:var(--gruen);stroke-width:1.2px;vector-effect:non-scaling-stroke;transition:fill .4s}
a.kachel:hover .mini-umriss path{fill:#C9DDD2}
.statistik{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--linie-2);border:1px solid var(--linie-2);border-radius:20px;overflow:hidden}
.statistik > div{background:#fff;padding:22px 24px}
.statistik b{display:block;font:600 clamp(30px,3.4vw,46px)/1 var(--serif);color:var(--tinte);font-variant-numeric:tabular-nums}
.statistik span{display:block;margin-top:8px;font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
@media (max-width:820px){.statistik{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Ruhezustand ---------- */
@media (prefers-reduced-motion:reduce){
  .uk-kreis,.uk-fluss,.uk-ring,.gk-umriss,.gk-neben,.gk-richtung path,.ug-linie,.ug-kreis,.sz-zug,.sz-ring,.sz-weg,.sz-uhr__lauf,.rr-kante,.rr-rand,.gf-baum,.gf-weg,.kg-bogen{stroke-dashoffset:0!important;animation:none!important}
  .uk-p,.uk-stadt,.uk-ringtext,.gk-p,.gk-ka,.gk-ka text,.gk-richtung text,.gk-richtung__kopf,.ug-flaeche,.ug-mass,.ug-nord,.sz-stempel,.sz-pin,.sz-marke,.sz-jahre .sz-label,.fr-pin,.fr-wert,.rr-flaeche,.rr-label,.gf-grab,.gf-urne,.kg-tag,.mg-saeule + text{opacity:1!important;transform:none!important;animation:none!important}
  .uk-welle{display:none}
  .fr-balken,.balken__fuell,.sz-jahre__lauf,.mg-saeule,.sz-tage rect,.sz-tage4 rect{transform:none!important;opacity:1!important;animation:none!important}
  .an .deck i{animation:none}
  .satz .w{color:inherit}
}

/* Verzeichnis: Regionen aufklappbar */
.region-block{border-top:1px solid var(--linie)}
.region-block > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:20px 4px;min-height:64px}
.region-block > summary::-webkit-details-marker{display:none}
.region-block > summary h2{margin:0;font-size:clamp(22px,2.2vw,28px)}
.region-block > summary span{font:500 12px/1.4 var(--mono);color:var(--leise);letter-spacing:.06em}
.region-block > summary::after{content:"";width:12px;height:12px;border-right:2px solid var(--gruen);border-bottom:2px solid var(--gruen);transform:rotate(45deg);transition:transform .3s var(--ease-out);margin-left:auto}
.region-block[open] > summary::after{transform:rotate(-135deg)}
.region-block[open] > summary{border-bottom:1px solid var(--linie-2)}
.region-block__in{padding:10px 0 30px}
.region-block.gruppe{margin:0}