/* PypeCloud — Bewegung (Stufen A bis C). Alles hier hängt an html[data-bewegung="a|b|c"] bzw. html[data-bw] (gesetzt von js/bewegung-start.js);
   ohne die Attribute (Stufe „aus“, Skripte gesperrt) bleibt die Seite in ihrer ruhigen Fassung.
   Regeln, die hier gelten:
   - Nur transform und opacity bewegen sich (dazu die einzelnen Eigenschaften translate/scale/rotate, die sich mit transform vertragen).
   - Jede Szene hat eine Ruhefassung: Ohne Skript, bei „aus“ und bei „weniger Bewegung“ steht der fertige Endzustand da; die Anfangszustände
     gibt es nur, solange das Skript die Szene bewacht (Klasse .bereit am Wurzelelement der Szene).
   - Bei „weniger Bewegung“ schaltet base.css alle Animationen und Übergänge ab (!important); hier bleibt nur das Einblenden der Deckkraft. */

/* ─────────── Stufen: Stärke der Bewegung ─────────── */
html[data-bewegung="a"]{--bw-y:12px;--bw-skala:.995;--bw-dauer:1s;--bw-versatz:70ms;--bw-amp:.5;--bw-wdauer:.7s}
html[data-bewegung="b"]{--bw-y:26px;--bw-skala:.975;--bw-dauer:.9s;--bw-versatz:85ms;--bw-amp:1;--bw-wdauer:.75s}
html[data-bewegung="c"]{--bw-y:38px;--bw-skala:.95;--bw-dauer:.85s;--bw-versatz:95ms;--bw-amp:1.5;--bw-wdauer:.8s}

/* ─────────── Umschalter (nur mit ?bewegung=… in der Adresse; Links, kein Speicher) ─────────── */
.bw-um{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:60;display:flex;align-items:center;gap:3px;
  padding:4px 5px 4px 15px;border:1px solid var(--linie);border-radius:999px;background:#fff;
  box-shadow:0 12px 30px -10px rgba(11,27,63,.38),0 2px 6px rgba(11,27,63,.08);font:500 13px/1 var(--font);color:var(--slate);white-space:nowrap}
.bw-um span{margin-right:7px}
.bw-um a{display:grid;place-items:center;min-width:38px;height:38px;padding:0 11px;border-radius:999px;color:var(--ink);font-weight:600;transition:background .2s,color .2s}
.bw-um a:hover{background:var(--mist)}
.bw-um a[aria-current="true"]{background:var(--blau-text);color:#fff}

/* ─────────── Einblenden beim Scrollen (ersetzt die Werte aus start.css) ─────────── */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html[data-bw] .rv{opacity:0;transform:translate3d(0,var(--bw-y),0) scale(var(--bw-skala));
    transition:opacity var(--bw-dauer) var(--ease),transform var(--bw-dauer) var(--ease);transition-delay:calc(var(--i,0)*var(--bw-versatz))}
  html[data-bw] .rv.da{opacity:1;transform:none}
  /* Kinder nacheinander: der Behälter blendet nicht selbst ein, seine Kinder folgen im Takt */
  html[data-bw] .rv.stapel{opacity:1;transform:none;transition:none}
  html[data-bw] .rv.stapel>*{opacity:0;transform:translate3d(0,calc(var(--bw-y) * .7),0);
    transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--k,0) * var(--bw-versatz) + 60ms)}
  html[data-bw] .rv.stapel.da>*{opacity:1;transform:none}
}
/* „weniger Bewegung“: nur Einblenden, ohne Verschiebung (die Übergänge sind in base.css abgeschaltet, deshalb !important) */
@media (scripting:enabled) and (prefers-reduced-motion:reduce){
  html[data-bw] .rv{opacity:0;transition:opacity .6s ease !important}
  html[data-bw] .rv.da{opacity:1}
}
.stapel>:nth-child(1){--k:0}.stapel>:nth-child(2){--k:1}.stapel>:nth-child(3){--k:2}.stapel>:nth-child(4){--k:3}
.stapel>:nth-child(5){--k:4}.stapel>:nth-child(6){--k:5}.stapel>:nth-child(7){--k:6}.stapel>:nth-child(8){--k:7}

/* ─────────── Kopfzeile: Fortschritt und aktueller Abschnitt ─────────── */
html[data-bw] .menue a{position:relative}
html[data-bw] .menue a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--blau-text);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
html[data-bw] .menue a[aria-current="true"]::after{transform:scaleX(1)}
.bw-fort{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.bw-fort i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--blau),var(--violett) 60%,var(--rosa))}

/* ─────────── Hero: die Geschichte der Karten ───────────
   Mail kommt an → Zeile „Auftrag angelegt“ → die Linie läuft vom Chip zur Karte → die Auftragskarte fährt heraus und füllt ihre Felder →
   der Anruf wird angenommen und der Rückruf eingetragen. Ab Stufe B läuft danach alle 6 Sekunden ein Paket die Linie entlang. */
@keyframes bw-zeichne{to{stroke-dashoffset:0}}
@keyframes bw-pop{from{opacity:0;transform:scale(.6)}}
@keyframes bw-ein{from{opacity:0}}
.verb-k{display:none}
.vk{opacity:0;fill:#fff;stroke:var(--blau-text);stroke-width:1.5}
html[data-bewegung="b"] .verb-k,html[data-bewegung="c"] .verb-k{display:block}
.kk-auf .feld:nth-child(1){--n:0}.kk-auf .feld:nth-child(2){--n:1}.kk-auf .feld:nth-child(3){--n:2}.kk-auf .feld:nth-child(4){--n:3}
@media (prefers-reduced-motion:no-preference){
  html[data-bw] .kk-auf .karte{animation-delay:2.15s}
  html[data-bw] .kk-anruf .karte{animation-delay:3.3s}
  html[data-bw] .kk-auf .feld{animation:zeile .6s var(--ease) both;animation-delay:calc(2.55s + var(--n,0) * .22s)}
  html[data-bw] .kk-auf .k-titel .chip{animation:bw-pop .5s var(--ease) both;animation-delay:2.4s}
  html[data-bw] .kk-anruf .anruf-f{animation:zeile .6s var(--ease) both;animation-delay:4.2s}
  html[data-bw] .vb{stroke-dasharray:1 2;stroke-dashoffset:1;animation:bw-zeichne .9s var(--ease) both;animation-delay:1.2s}
  html[data-bw] .vp{animation:bw-ein .3s linear both;animation-delay:2.0s}
  html[data-bw] .vs{animation:bw-pop .4s var(--ease) both;animation-delay:1.1s;transform-box:fill-box;transform-origin:center}
  html[data-bw] .kk-post .k-zeilen li:first-child{animation:zeile .6s var(--ease) both,bw-balken .5s ease-out both;animation-delay:.5s,.55s}
}
@keyframes bw-balken{from{box-shadow:inset 0 0 0 var(--blau)}}

/* ─────────── Leistungen: drei kleine Szenen, die zeigen, was die Software tut ───────────
   Alle drei laufen erst, wenn die Karte im Bild ist (Klasse .bereit setzt das Skript, Flags wie .neu, .zeiger schalten die Schritte). */
.tab-neu,.s-paket,.s-zeiger,.s-ring{display:none}
.tab-liste{position:relative}

/* (1) Software und Apps: eine neue Anfrage kommt an, die Zahlen zählen mit */
html[data-bw] .app.bereit .tab-neu{display:grid;position:absolute;left:0;right:0;top:0;border-top:0;opacity:0;transform:translate3d(0,-12px,0)}
html[data-bw] .app.bereit .tab-liste>.tab-z:not(.tab-neu){transition:transform .7s var(--ease)}
html[data-bw] .app.bereit.neu .tab-neu{opacity:1;transform:none;transition:opacity .5s .15s,transform .7s var(--ease)}
html[data-bw] .app.bereit.neu .tab-liste>.tab-z:not(.tab-neu){transform:translate3d(0,var(--zh,46px),0)}
html[data-bw] .app.bereit.weg .tab-neu{opacity:0;transition:opacity .5s}
html[data-bw] .app.bereit.neu.weg .tab-liste>.tab-z:not(.tab-neu){transform:none}
html[data-bw] .app.bereit .kpis b{display:inline-block;font-variant-numeric:tabular-nums;transition:transform .4s var(--ease),color .4s}
html[data-bw] .app.bereit .kpis b.tick{transform:scale(1.22);color:var(--blau-text)}
html[data-bw] .app.bereit.neu .tab-neu .chip{animation:bw-puls .9s ease-out 1.1s 2}
@keyframes bw-puls{0%{box-shadow:0 0 0 0 rgba(62,118,246,.5)}100%{box-shadow:0 0 0 8px rgba(62,118,246,0)}}

/* (2) Automatisierung mit KI: bei Stufe A atmet der Baustein, ab Stufe B laufen Pakete (js: paketlauf) */
@keyframes bw-atmen{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
html[data-bewegung="a"] .pl-hub{animation:bw-atmen 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.pl-funke{transform-box:fill-box;transform-origin:center}

/* (3) Websites, die mitarbeiten: ein Zeiger tippt „Anfrage senden“, die Anfrage wandert nach unten, der Vorgang fährt herein, der Haken zeichnet sich */
.site{position:relative}
.s-b{position:relative;transition:transform .15s var(--ease),background .2s}
html[data-bw] .site .s-zeiger{display:block;position:absolute;left:0;top:0;width:22px;height:26px;z-index:6;fill:var(--ink);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(11,27,63,.35));pointer-events:none;opacity:0;translate:var(--zx0,0px) var(--zy0,0px)}
html[data-bw] .site .s-paket{display:grid;place-items:center;position:absolute;left:0;top:0;width:30px;height:30px;z-index:5;border-radius:10px;background:#fff;border:1px solid #D5E2FB;
  box-shadow:0 10px 20px -8px rgba(31,63,184,.55);color:var(--blau-text);pointer-events:none;opacity:0;scale:.5;translate:var(--px0,0px) var(--py0,0px)}
html[data-bw] .site .s-paket svg.i{width:16px;height:16px;stroke-width:2}
html[data-bw] .site .s-ring{display:block;position:absolute;inset:-5px;border-radius:12px;border:2px solid var(--blau);opacity:0;pointer-events:none}
html[data-bw] .site.bereit.zeiger .s-zeiger{opacity:1;translate:var(--zx1,0px) var(--zy1,0px);transition:opacity .35s,translate 1.05s cubic-bezier(.4,0,.2,1)}
html[data-bw] .site.bereit .s-zeiger{transition:opacity .35s,translate .6s ease-in}
html[data-bw] .site.bereit.druck .s-b{transform:scale(.92);background:var(--blau-tief)}
html[data-bw] .site.bereit.druck .s-ring{animation:bw-ring .65s ease-out}
@keyframes bw-ring{from{opacity:.8;transform:scale(.85)}to{opacity:0;transform:scale(1.45)}}
html[data-bw] .site.bereit.paket .s-paket{opacity:1;scale:1;translate:var(--px1,0px) var(--py1,0px);transition:opacity .25s,scale .45s var(--ease),translate .95s cubic-bezier(.5,0,.25,1)}
html[data-bw] .site.bereit.vorgang .s-paket{opacity:0;scale:.4;transition:opacity .3s,scale .3s}
html[data-bw] .site.bereit .site-neu{transform:translate3d(0,120%,0);opacity:0}
html[data-bw] .site.bereit.vorgang .site-neu{transform:none;opacity:1;transition:transform .65s var(--ease),opacity .35s}
/* Strichmuster „1 2“ statt „1“: mit „1“ steht bei dashoffset 1 genau am Pfadende ein Strich der Länge 0, und die runde Kappe malt dort einen Punkt */
.haken{stroke-dasharray:1 2}
html[data-bw] .site.bereit .haken{stroke-dashoffset:1}
html[data-bw] .site.bereit.hk .haken{stroke-dashoffset:0;transition:stroke-dashoffset .55s ease-out}
html[data-bw] .site.bereit.hk .site-neu .k-ic{animation:bw-pop .5s var(--ease) both}
html[data-bw] .site.bereit.weg .site-neu{opacity:0;transform:translate3d(0,35%,0);transition:opacity .5s,transform .5s}
html[data-bw] .site.bereit.weg .s-zeiger,html[data-bw] .site.bereit.weg .s-paket{opacity:0;transition:opacity .4s}
.site.ohne *,.app.ohne *{transition:none !important}

/* Paketlauf: die einfachen Punkte weichen den Paketen */
.pk-an .f-pakete,.pk-an .pl-punkte{display:none}
@keyframes bw-funkeln{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(1.12)}}

/* ─────────── Überschriften: Wort für Wort (ab Stufe B) ─────────── */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:is([data-bewegung="b"],[data-bewegung="c"]) .rv.rv-wort{opacity:1;transform:none;transition:none}
  html:is([data-bewegung="b"],[data-bewegung="c"]) .wort .w{display:inline-block;opacity:0;transform:translate3d(0,.5em,0);
    transition:opacity .7s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--w,0) * 40ms + 60ms)}
  html:is([data-bewegung="b"],[data-bewegung="c"]) .da .wort .w{opacity:1;transform:none}
}

/* ─────────── Einstieg: Prüfliste hakt sich ab, Zahlen zählen, das Farbband läuft mit ─────────── */
html[data-bw] .zahl,html[data-bw] .preis b{font-variant-numeric:tabular-nums}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html[data-bw] .stapel .haken{stroke-dashoffset:1}
  html[data-bw] .stapel.da .haken{stroke-dashoffset:0;transition:stroke-dashoffset .6s ease-out;transition-delay:calc(var(--k,0) * var(--bw-versatz) + .5s)}
}
html[data-bw] .einstieg::before{translate:calc((var(--bw-p,.5) - .5) * -150px * var(--bw-amp,1)) 0}

/* ─────────── Beispiele: beim Aufklappen laufen die Zeilen der Oberfläche ein ─────────── */
.v-liste li:nth-child(1),.felder .feld:nth-child(1){--n:0}.v-liste li:nth-child(2),.felder .feld:nth-child(2){--n:1}
.v-liste li:nth-child(3),.felder .feld:nth-child(3){--n:2}.v-liste li:nth-child(4),.felder .feld:nth-child(4){--n:3}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html[data-bw] .faelle.da .fall.offen .v-liste li,html[data-bw] .faelle.da .fall.offen .vorschau .feld{animation:zeile .6s var(--ease) both;animation-delay:calc(.5s + var(--n,0) * .14s)}
  html[data-bw] .faelle.da .fall.offen .mail-faden,html[data-bw] .faelle.da .fall.offen .vn-vor{animation:zeile .6s var(--ease) both;animation-delay:.4s}
  html[data-bw] .faelle.da .fall.offen .vn-nach{animation:zeile .6s var(--ease) both;animation-delay:.6s}
  html[data-bw] .faelle.da .fall.offen .vorschau .aufgabe{animation:zeile .6s var(--ease) both;animation-delay:1.15s}
  html[data-bw] .faelle.da .fall.offen .fall-grid ul li{animation:zeile .6s var(--ease) both;animation-delay:calc(.7s + var(--n,0) * .12s)}
}
.fall-grid ul li:nth-child(1){--n:0}.fall-grid ul li:nth-child(2){--n:1}.fall-grid ul li:nth-child(3){--n:2}

/* ─────────── Ablauf: ein Schritt nach dem anderen rastet ein ─────────── */
@keyframes bw-nr{0%{transform:scale(.8)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html[data-bw] .schritt.an .nr{animation:bw-nr .6s var(--ease)}
  /* Der Text wartet lesbar: nur die Überschrift (Tinte, 15,9:1) darf zurückfallen, und nur so weit, dass sie über 4,5:1 bleibt (.65 gibt 5,2:1);
     Absatz (Schiefer, 5,25:1) und Chip haben keinen Spielraum und rutschen nur ein Stück. Lighthouse und Menschen mit schwacher Sicht sehen den Wartezustand. */
  html[data-bw] .schritte .schritt>*:not(.nr){transform:translate3d(0,8px,0);transition:opacity .6s,transform .7s var(--ease)}
  html[data-bw] .schritte .schritt>h3{opacity:.65}
  html[data-bw] .schritte .schritt.an>*:not(.nr){opacity:1;transform:none}
}
html[data-bw] .schritt:last-child .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gruen);flex:none}
html[data-bw] .schritt.an:last-child .chip::before{animation:puls 2.6s ease-out infinite}

/* ─────────── Warum: Leuchten am Server, Ping am Symbol ─────────── */
.ik{position:relative}
html[data-bw] .led{stroke-width:2.8}
@keyframes bw-led{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes bw-ping{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
@keyframes bw-blitz{0%,70%,100%{transform:none}78%{transform:scale(1.18) rotate(-6deg)}86%{transform:scale(.94)}}
html[data-bw] .ik .led{stroke:var(--gruen)}
html[data-bw] .led.l1{animation:bw-led 2.2s ease-in-out infinite}
html[data-bw] .led.l2{animation:bw-led 2.2s ease-in-out 1.1s infinite}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html[data-bw] .rv.da .ik::after{content:"";position:absolute;inset:0;border-radius:12px;border:1.5px solid var(--blau);animation:bw-ping 1.5s ease-out .6s 1 both;pointer-events:none}
  html[data-bw] .drei>div:nth-child(3) .ik svg{animation:bw-blitz 3.6s ease-in-out 1.2s infinite}
}

/* Der Farbverlauf im Kontakt bewegt sich (A bis C) und zieht dabei helle Flecken (Cyan, Rosa, Pfirsich) hinter den Text: mit der festen Unterlage der ruhigen Fassung fiel der Text in
   einzelnen Phasen auf 3,1:1. Die dunkle Unterlage reicht deshalb in Pixeln bis hinter das Ende der Textspalte (34 em, höchstens 780 px von links) und trägt dort mindestens .64
   (weißer Text auf Pfirsich unter .64 Marine: 6:1); erst dahinter blüht der Verlauf auf. Am Handy gilt die durchgehende Unterlage aus start.css, etwas dunkler (.68 bis .78). Die Prüfung „kontaktphasen“ misst den Kontakt in 16 Phasen. */
@media (min-width:721px){
  html[data-bw] .k-karte::before{background:linear-gradient(0deg,rgba(11,24,100,.58) 0%,rgba(11,24,100,0) 40%),
    linear-gradient(100deg,rgba(11,24,100,.78) 0%,rgba(11,24,100,.64) 840px,rgba(11,24,100,.1) 1120px,rgba(11,24,100,0) 1250px)}
}
@media (max-width:720px){
  html[data-bw] .k-karte::before{background:linear-gradient(180deg,rgba(11,24,100,.68) 0%,rgba(11,24,100,.72) 55%,rgba(11,24,100,.78) 100%)}
}

/* ─────────── Beispiele: die Karten stapeln sich oben (Stufe B und C), wie die Kundengeschichten bei Stripe ───────────
   Läuft eine Karte nach oben aus dem Bild, bleibt ihre Kopfzeile als schmale Zeile unter der Kopfzeile der Seite stehen; die nächste Karte schiebt
   sich darunter, die geöffnete läuft mit ihrem Inhalt weiter. Die Zeilen sind ein eigener, ausgeblendeter Stapel (js: stapel), die Karten und der
   Aufklapper (immer nur eine offen) bleiben unverändert. Antippen einer Zeile öffnet die Karte und holt sie an ihren Platz im Stapel. */
.faelle-huelle{--st-z:44px;--st-r:20px;--st-h:calc(var(--st-z) * 6 + var(--st-r));position:relative}
@media (max-width:720px){.faelle-huelle{--st-z:38px;--st-r:18px}}
.fstapel,.fstapel-halter{display:none}
.fall-ic,.fall-branche{transition:opacity .16s}
.plus{transition:background .2s,opacity .16s}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:is([data-bewegung="b"],[data-bewegung="c"]) .fstapel-halter{display:block;position:absolute;inset:0;pointer-events:none}
  html:is([data-bewegung="b"],[data-bewegung="c"]) .fstapel{display:block;position:sticky;top:calc(68px + var(--sicher-oben));height:var(--st-h);z-index:30;pointer-events:none}
  /* Niedrige Fenster (Handy quer, 844 x 390): der Stapel nähme 296 px von 390; dort bleibt es ein gewöhnlicher Aufklapper */
  @media (max-height:540px){html:is([data-bewegung="b"],[data-bewegung="c"]) .fstapel-halter{display:none}}
  html[data-bw] .fall.klebt .fall-ic,html[data-bw] .fall.klebt .fall-branche,html[data-bw] .fall.klebt .plus{opacity:0}
}
.stapel-z{position:absolute;left:0;right:0;top:calc(var(--i) * var(--st-z));height:calc(var(--st-z) + var(--st-r));z-index:calc(var(--i) + 1);
  border:1px solid var(--linie);border-bottom:0;border-radius:var(--st-r) var(--st-r) 0 0;background:#fff;box-shadow:0 -8px 16px -12px rgba(11,27,63,.35);
  opacity:0;transform:translate3d(0,8px,0);transition:opacity .16s,transform .3s var(--ease);pointer-events:none;cursor:pointer}
.stapel-z.an{opacity:1;transform:none;pointer-events:auto}
.stapel-z.vorn{height:var(--st-z);box-shadow:0 -8px 16px -12px rgba(11,27,63,.35),0 14px 14px -11px rgba(11,27,63,.24)}   /* nur die letzte Zeile endet hier (mit weichem Schatten nach unten); die übrigen laufen unter der nächsten weiter, damit deren runde Ecken nichts durchlassen */
.stapel-z.vorn::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;pointer-events:none;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.88) 32%,rgba(255,255,255,0) 100%)}   /* weicher Übergang unter der vorderen Zeile: der Inhalt der Karte läuft nicht an einer harten Kante weg (Armin 6585) */
.stapel-z.offen{border-color:#C6D5F5}
.stapel-z.fokus{outline:2px solid var(--blau);outline-offset:-3px}
.stapel-in{display:flex;align-items:center;gap:12px;height:var(--st-z);padding:0 22px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--blau-text)}
.stapel-in .stapel-ic{width:30px;height:30px;border-radius:9px;border:1px solid var(--linie);display:grid;place-items:center;background:#fff;flex:none}
.stapel-in .stapel-ic svg.i{width:17px;height:17px}
.stapel-in .stapel-n{margin-left:auto;font:500 12px/1 var(--mono);color:var(--leise)}
@media (max-width:720px){.stapel-in{padding:0 16px;gap:10px;font-size:14px}.stapel-in .stapel-ic{width:26px;height:26px}}

/* ─────────── Umkreis: die Karte aus Schwandorf (früher der Globus; Armin 6587/6598: Globus „zu übertrieben“, 6662: Umkreis gewählt, „wie bei S3, aber mit diesen Punkten“) ───────────
   Der Globus passte nicht (Afrika groß, die Oberpfalz ein Punkt, Datenflüsse um die Welt). Der Abschnitt zeigt, wie nah wir sind; den Fluss weiter unten wiederholt er nicht.
   Ruhefassung: ohne Skript, bei „aus“ und bei „weniger Bewegung“ steht die Karte fertig da (alle Straßen, Namen, Schilder); die Anfangszustände gibt es nur mit der Klasse
   .bereit, die js/ersatz.js an die Karte setzt. Es bewegen sich nur transform und opacity (dazu translate/scale/rotate) und Canvas. */
.bw-ersatz{--sek-pad:96px;overflow:clip}
.ers-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px 48px;align-items:center}
.ers-links,.ers-bild{min-width:0}
.ers-kopf h2{max-width:14em}
.ers-bild{position:relative;isolation:isolate}
.ers-bild::before{content:"";position:absolute;inset:-7% -5%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 62% 28%,rgba(108,213,255,.17),transparent 100%),radial-gradient(38% 34% at 38% 66%,rgba(255,163,200,.16),transparent 100%),radial-gradient(50% 46% at 50% 50%,rgba(138,120,255,.09),transparent 100%)}
@media (max-width:860px){.bw-ersatz{--sek-pad:72px}.ers-grid{grid-template-columns:1fr;gap:28px}}

/* Die Karte: Zeichnung (SVG: Gebiet, Straßen), darüber die Leinwand mit dem Punktfeld (js/ersatz.js), darüber Punkte, Namen und Schilder als HTML. Die Orte und Straßen stehen in
   index.html (erzeugt von werkzeug/karte_bauen.py aus werkzeug/karte/karte-skizze.json, einer Kopie der S3-Daten; © OpenStreetMap-Mitwirkende). Alles läuft in Prozent der Ansicht,
   Schrift und Punkte haben feste Größen. Die Lage der Namen und Schilder rechnet das Skript bei jeder Breite aus den echten Maßen (translate); ohne Skript gelten die Grundlagen
   .l-r, .l-l, … und die Karte steht fertig da. Farben nur aus den Tokens von base.css. */
.ers-buehne{margin:0}
.uk-feld{position:relative;isolation:isolate;width:100%;max-width:540px;margin-inline:auto;aspect-ratio:600/900}
.uk-karte{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.uk-leinwand{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
/* das Gebiet: ohne Skript eine zarte Fläche, mit Skript trägt es das Punktfeld; der Umriss bleibt */
.uk-gebiet{fill:var(--violett);fill-opacity:.1;stroke:var(--violett);stroke-opacity:.5;stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.uk-feld.punkte .uk-gebiet{fill-opacity:0}
.uk-strassen path{fill:none;stroke:var(--blau);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.uk-b{stroke-opacity:.62;stroke-width:1.3}
.uk-a{stroke-width:2.2}
.uk-schleier{fill:var(--weiss);fill-opacity:.55;stroke:none}                /* außerhalb des Gebiets liegt ein heller Schleier über den Straßen */
/* Orte: weißer Punkt mit blauem Ring, Schwandorf größer und mit Hof */
.uk-pkt{position:absolute;left:var(--x);top:var(--y);z-index:3;translate:-50% -50%;box-sizing:border-box;border-radius:50%;background:var(--weiss);border:3px solid var(--blau);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blau) 16%,transparent);transition:opacity .35s,scale .55s var(--ease)}
.uk-pkt.uk-gross{width:16px;height:16px}
.uk-pkt.uk-mittel{width:11px;height:11px;border-width:2.5px;box-shadow:0 0 0 3px color-mix(in srgb,var(--blau) 14%,transparent)}
.uk-pkt.uk-heim{width:22px;height:22px;border-width:4px;border-color:var(--blau-text);box-shadow:0 0 0 7px color-mix(in srgb,var(--blau) 20%,transparent)}
/* Namen: große Städte als weiße Karte mit Fahrzeit (wie die Chips im Hero), Schwandorf dunkel, die vier übrigen Orte (Burglengenfeld, Nabburg, Neunburg, Regenstauf) als kleine helle Schilder */
.uk-ort{position:absolute;left:var(--x);top:var(--y);z-index:4;white-space:nowrap;line-height:1.15;color:var(--ink);transition:opacity .35s,scale .5s var(--ease)}
.uk-ort.uk-mittel{padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.93);border:1px solid rgba(11,27,63,.07);font:600 12px/1.2 var(--font);letter-spacing:-.005em}
.uk-ort.uk-gross{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 11px 6px 10px;border-radius:12px;background:var(--weiss);border:1px solid rgba(11,27,63,.08);
  box-shadow:0 16px 30px -14px rgba(31,63,184,.5),0 2px 6px rgba(11,27,63,.06)}
.uk-ort.uk-gross b{font:600 14px/1.15 var(--font);letter-spacing:-.01em}
.uk-ort.uk-gross small{font:500 11.5px/1.2 var(--mono);color:var(--leise)}
.uk-ort.uk-heim{padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--weiss);font:600 13px/1 var(--font);letter-spacing:-.005em;box-shadow:0 12px 24px -12px rgba(11,27,63,.7)}
.uk-ort.weg,.uk-schild.weg,.uk-pkt.weg{display:none}
/* ohne Skript: die Grundlage der Lage (js/ersatz.js überschreibt sie mit der gerechneten) */
.l-r{translate:14px -50%}.l-l{translate:calc(-100% - 14px) -50%}.l-o{translate:-50% calc(-100% - 12px)}.l-u{translate:-50% 12px}
.l-or{translate:10px calc(-100% - 8px)}.l-ol{translate:calc(-100% - 10px) calc(-100% - 8px)}.l-ur{translate:10px 8px}.l-ul{translate:calc(-100% - 10px) 8px}
.l-rh{translate:12px -95%}.l-lh{translate:calc(-100% - 12px) -95%}.l-rt{translate:12px -5%}.l-lt{translate:calc(-100% - 12px) -5%}
/* Schilder: nur die drei Autobahnen, blau wie die Schilder an der Straße; die Bundesstraßen sind feine Linien ohne Schild (Armin 6760: „ohne die gelben Schilder“) */
.uk-schild{position:absolute;left:var(--x);top:var(--y);z-index:4;translate:-50% -50%;white-space:nowrap;padding:3px 6px;border-radius:5px;font:700 11px/1 var(--font);letter-spacing:.01em;
  box-shadow:0 0 0 1.5px var(--weiss),0 6px 12px -6px rgba(11,27,63,.45);transition:opacity .35s,scale .5s var(--ease)}
.uk-schild.uk-a{background:var(--blau-text);color:var(--weiss)}
/* Legende und Zuschreibung unter der Karte */
.uk-legende{width:100%;max-width:540px;margin:20px auto 0;display:grid;gap:7px;font-size:13px;line-height:1.45;color:var(--leise)}
.uk-leg-z{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--slate)}
.uk-leg-pkt{flex:none;width:30px;height:18px;margin-top:3px;border-radius:5px;border:1px solid var(--linie);
  background:radial-gradient(circle,var(--violett) 1.4px,transparent 1.9px) 0 0/6px 6px,var(--mist)}
.uk-leg-q{padding-left:40px}
.uk-nb{white-space:nowrap}
@media (max-width:720px){
  .uk-ort.uk-gross{padding:5px 9px 5px 8px;border-radius:10px}
  .uk-ort.uk-gross b{font-size:13px}
  .uk-ort.uk-gross small{font-size:11px}
  .uk-ort.uk-heim{padding:6px 11px;font-size:12.5px}
}
/* Aufbau (nur mit Skript und Bewegung: js/ersatz.js setzt .bereit; der Ruhezustand ist der fertige Stand) */
.uk-feld.bereit :is(.uk-gebiet,.uk-strassen path){opacity:0}
.uk-feld.bereit.an-str :is(.uk-gebiet,.uk-strassen path){opacity:1;transition:opacity 1.2s var(--ease) .2s}
.uk-feld.bereit.an-str path[data-ref="A93"]{transition-delay:.35s}.uk-feld.bereit.an-str path[data-ref="A6"]{transition-delay:.55s}.uk-feld.bereit.an-str path[data-ref="A3"]{transition-delay:.75s}
.uk-feld.bereit.an-str .uk-b{transition-delay:1s}
.uk-feld.bereit .uk-pkt{opacity:0;scale:.3}
.uk-feld.bereit .uk-pkt.an{opacity:1;scale:1}
.uk-feld.bereit :is(.uk-ort,.uk-schild){opacity:0;scale:.88}
.uk-feld.bereit :is(.uk-ort,.uk-schild).an{opacity:1;scale:1}

/* ─────────── Fluss: die Fächer erscheinen nacheinander (alle Stufen) ─────────── */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html[data-bw] .fluss .f-chips>g{opacity:0;transform:translate3d(0,12px,0);transition:opacity .7s var(--ease),transform .8s var(--ease)}
  html[data-bw] .fluss.da .f-chips>g{opacity:1;transform:none}
  html[data-bw] .fluss .f-chips>g:nth-child(1){transition-delay:.05s}html[data-bw] .fluss .f-chips>g:nth-child(2){transition-delay:.15s}
  html[data-bw] .fluss .f-chips>g:nth-child(3){transition-delay:.25s}html[data-bw] .fluss .f-chips>g:nth-child(4){transition-delay:.35s}
  html[data-bw] .fluss .f-chips>g:nth-child(5){transition-delay:.9s}html[data-bw] .fluss .f-chips>g:nth-child(6){transition-delay:1s}
  html[data-bw] .fluss .f-chips>g:nth-child(7){transition-delay:1.1s}html[data-bw] .fluss .f-chips>g:nth-child(8){transition-delay:1.2s}
  html[data-bw] .fluss .f-hub{opacity:0;transform:scale(.94);transform-box:fill-box;transform-origin:center;transition:opacity .8s var(--ease) .5s,transform .9s var(--ease) .5s}
  html[data-bw] .fluss.da .f-hub{opacity:1;transform:none}
}

/* Deckkraft der Flecken so klein, dass auch --leise (#5F6C91) auf dem stärksten Fleck noch 4,5:1 hält (violett .10: 4,67:1, rosa .15: 4,6:1; gerechnet am 16.10.2026,
   die Prüfung kontrast misst C nur mit „weniger Bewegung“, also ohne Flecken). */
/* ─────────── Stufe C: Verlauf im Hintergrund folgt dem Scrollen, Abschnitte schieben sich wie Blätter übereinander, Oberflächen haben Tiefe ─────────── */
.bw-hg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bw-hg i{position:absolute;display:block;width:80vmax;height:80vmax;border-radius:50%;opacity:0;will-change:transform,opacity}
.bw-hg .hg1{left:-30vmax;top:-20vmax;background:radial-gradient(closest-side,rgba(138,120,255,.10),rgba(138,120,255,0))}
.bw-hg .hg2{right:-40vmax;top:10vh;background:radial-gradient(closest-side,rgba(108,213,255,.13),rgba(108,213,255,0))}
.bw-hg .hg3{left:-10vmax;bottom:-45vmax;background:radial-gradient(closest-side,rgba(255,163,200,.15),rgba(255,163,200,0))}
html[data-bewegung="c"] body{background:transparent}
html[data-bewegung="c"] .fluss-sek,html[data-bewegung="c"] .einstieg,html[data-bewegung="c"] .ablauf-sek,html[data-bewegung="c"] .warum{
  position:relative;margin-top:-40px;border-radius:40px 40px 0 0;box-shadow:0 -26px 50px -38px rgba(11,27,63,.3)}
html[data-bewegung="c"] .warum{background:#fff}
html[data-bewegung="c"] .b{perspective:1100px}
html[data-bewegung="c"] .b-ui{transform-origin:50% 100%}
html[data-bewegung="c"] .hb{perspective:1500px}
@media (max-width:720px){
  html[data-bewegung="c"] .fluss-sek,html[data-bewegung="c"] .einstieg,html[data-bewegung="c"] .ablauf-sek,html[data-bewegung="c"] .warum{margin-top:-28px;border-radius:28px 28px 0 0}
}