@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-variable.woff2") format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"Space Mono";src:url("fonts/space-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --canvas:#12110f;
  --panel:#1c1a16;
  --edge:#2b2721;
  --accent:#4a9e6a;
  --accent-hover:#3d8a5a;
  --accent-muted:rgba(74,158,106,.14);
  --amber:#d4943a;
  --text-primary:#f4efe4;
  --text-secondary:#9a9081;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.4,.14,.3,1);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --wrap:1180px;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.01em;margin:0}
p{margin:0}
img,svg{max-width:100%}
.num{font-variant-numeric:tabular-nums}

/* Frueher stand der Sprunglink auf left:-9999px. Linkslaeufig faellt das nicht auf,
 * rechtslaeufig zieht es den Scrollbereich um 9999 Pixel auf und die Seite laesst
 * sich seitwaerts ziehen. Dasselbe Wegsperren wie bei .sr erzeugt keinen Ueberstand.
 * inset-inline-start statt left, damit er auf Arabisch an der richtigen Seite auftaucht. */
.skip{position:absolute;top:0;inset-inline-start:0;z-index:100;background:var(--accent);color:#0d0c0a;
  padding:.7rem 1.1rem;border-radius:4px;font-weight:700;
  width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;inset-inline-start:1rem;top:1rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Umgebung: eine feste Ebene hinter allem ---------- */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 20% 0%,rgba(74,158,106,.055),transparent 60%),
             radial-gradient(ellipse 70% 60% at 90% 100%,rgba(212,148,58,.035),transparent 60%);
  animation:worlddrift 90s ease-in-out -20s infinite alternate}
@keyframes worlddrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2.5%,0) scale(1.06)}}
.dust{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
.dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent-muted);
  animation:motes 62s linear -12s infinite}
@keyframes motes{from{transform:translate3d(0,110vh,0)}to{transform:translate3d(6vw,-12vh,0)}}

/* ---------- Kopfleiste ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.85rem clamp(1.1rem,4vw,2.4rem);
  /* Kein backdrop-filter: Die Leiste ist fest und ueber die volle Breite, ein
     Weichzeichner haette den Hintergrund bei JEDEM Scrollbild neu gerechnet.
     Der Verlauf oben deckt ohnehin zu 90 %, sichtbar war der Weichzeichner
     nur im unteren, fast durchsichtigen Rand. */
  background:linear-gradient(to bottom,rgba(18,17,15,.92),rgba(18,17,15,0))}
.mark{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text-primary);
  font-family:var(--display);font-size:1.3rem}
.mark svg{width:30px;height:30px;flex:0 0 auto}
.nav-r{display:flex;align-items:center;gap:1.4rem}

/* Sprachauswahl mit Fahne, aufklappbar */
.langpick{position:relative}
.langbtn{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .6rem;border:1px solid transparent;
  border-radius:999px;background:transparent;color:var(--text-primary);font-family:var(--body);
  font-size:.86rem;cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.langbtn .flag{font-size:1.05rem;line-height:1}
.langbtn .lcode{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.langbtn svg{width:11px;height:11px;transition:transform .25s var(--ease)}
.langpick.offen .langbtn{border-color:var(--edge);background:rgba(28,26,22,.85)}
.langpick.offen .langbtn svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.langbtn:hover{border-color:var(--edge)}}
.langlist{position:absolute;top:calc(100% + .5rem);inset-inline-end:0;min-width:170px;margin:0;padding:.35rem;
  list-style:none;background:var(--panel);border:1px solid var(--edge);border-radius:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:50}
.langlist li{margin:0}
.langlist button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem .6rem;border:0;
  border-radius:5px;background:transparent;color:var(--text-primary);font-family:var(--body);
  font-size:.9rem;text-align:start;cursor:pointer;transition:background-color .16s var(--ease)}
.langlist button[aria-selected="true"]{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.langlist button:hover{background:rgba(74,158,106,.12)}}

/* Rechts nach links: der ruhige Bildteil bleibt rechts, der Text richtet sich dorthin aus */
[dir="rtl"] .band,[dir="rtl"] .still,[dir="rtl"] .still-in{text-align:right}
/* Offen: In der eingebetteten Browser-Aufnahme bleibt die arabische Fassung
   schwarz, während DOM, Geometrie, Text und Richtung nachweislich stimmen.
   Weder overflow, noch die Platzierung von dir, noch die Zeichenebene des
   Videos waren die Ursache. Vor dem Veröffentlichen in einem echten
   Browserfenster ansehen. */
[dir="rtl"] .row{grid-template-columns:5.6rem auto minmax(0,1fr)}
[dir="rtl"] .row .s{text-align:left}
[dir="rtl"] .kpi{flex-direction:row-reverse;justify-content:flex-end}
.login{color:var(--text-primary);text-decoration:none;font-size:.92rem;font-weight:500;
  padding-bottom:2px;background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.login:hover{background-size:100% 1px}}
.login:focus-visible{background-size:100% 1px}
@media (max-width:560px){.login{display:none}}

/* Das Zitat, echtes Foto, kein erzeugtes Bild */
.zitat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center}
.zitat-foto{border-radius:6px;overflow:hidden;border:1px solid var(--edge);background:var(--panel)}
.zitat-foto img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  filter:grayscale(.15) contrast(1.04)}
.zitat blockquote{margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.9vw,2.3rem);
  line-height:1.16;color:var(--text-primary)}
.zitat .sig{display:block;margin-top:1.4rem;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:900px){.zitat{grid-template-columns:minmax(0,1fr)}
  .zitat-foto img{aspect-ratio:16/9}}

/* ---------- Der Handlungsaufruf, eigenes Bauteil ---------- */
.cta{--pan:0;display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.3rem;border:0;border-radius:999px;
  background:var(--accent);color:#0d0c0a;font-family:var(--body);font-weight:700;font-size:.95rem;
  text-decoration:none;cursor:pointer;transition:background-color .17s var(--ease);text-shadow:none}
.cta svg{width:18px;height:18px;overflow:visible}
.cta svg .beam{transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--pan)*-14deg));
  transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.cta:hover{background:var(--accent-hover);--pan:1}}
.cta:focus-visible{--pan:1}

/* ---------- Hero ---------- */
.hero{position:relative;height:700vh}
.stage{position:sticky;top:0;height:100dvh;overflow:hidden;background:#0b0a09}
.poster,#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.poster{background-size:cover;background-position:50% 50%}
#hero{opacity:0;transition:opacity .5s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}

/* Ebene 1 des Lesbarkeitssystems: der Grundschleier, immer an */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 34% 55%,rgba(10,10,18,0) 30%,rgba(10,10,18,.66) 100%)}

.ringwrap{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:44px;height:44px;color:var(--accent)}
.ring{width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .18s linear}
.chev{width:26px;height:26px;color:var(--accent);animation:chev 2.6s ease-in-out infinite}
@keyframes chev{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(7px);opacity:1}}

/* Die Textbänder, rechts im ruhigen Bildteil */
.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;top:50%;left:52%;width:min(41%,560px);transform:translateY(-50%);
  opacity:0;text-shadow:var(--tshadow)}
/* Ebene 2: der Schleier je Band, folgt dem Fortschritt des Bandes */
.band::before{content:"";position:absolute;inset:-24% -18%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,.68) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%)}
.band h2{font-size:clamp(2rem,4.4vw,3.5rem);margin-bottom:1rem}
.band p{color:#e4dccd;font-size:clamp(1rem,1.35vw,1.16rem);max-width:34ch}
/* Ebene 4: Kleinschrift bekommt ein Plättchen, nicht den großen Schleier */
.chip{display:inline-block;margin-bottom:1.1rem;padding:.32rem .7rem;border-radius:10px;
  background:rgba(8,8,15,.55);border:1px solid rgba(120,116,104,.3);backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.band .cta{margin-top:1.6rem;text-shadow:none}

/* ---------- Der Beleg ----------
 * Die Zahl stand bisher erst in Band 4, also nach 61 Prozent des Heros und
 * rund 366vh Scrollweg. Dieses Plaettchen zeigt sie ab dem ersten Bildschirm
 * und laeuft die ganze Fahrt mit. Es benutzt ausschliesslich Saetze, die im
 * Woerterbuch schon stehen, damit alle sechs Sprachen ohne neue Uebersetzung
 * stimmen. Im Standbild wandert es in den Textblock, siehe unten. */
.beleg{position:absolute;left:clamp(1.2rem,4vw,3rem);bottom:clamp(2rem,7vh,3.4rem);z-index:2;
  display:flex;flex-direction:column;gap:.22rem;padding:.55rem .8rem;border-radius:10px;
  background:rgba(8,8,15,.55);border:1px solid rgba(120,116,104,.3);backdrop-filter:blur(10px);
  font-family:var(--mono);text-shadow:0 1px 3px rgba(5,5,10,.85);max-width:min(76vw,22rem)}
.beleg-t{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}
.beleg-z{font-size:1.04rem;color:var(--text-primary)}
.beleg-q{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.beleg-q b{font-weight:400;color:var(--text-primary);margin-left:.5rem}
/* Arabisch laeuft rechtslaeufig, dann gehoert das Plaettchen an die andere Seite. */
[dir="rtl"] .beleg{left:auto;right:clamp(1.2rem,4vw,3rem)}
/* Im Standbild steht es im Textfluss ueber der Ueberschrift statt frei in der Ecke. */
.still .beleg{position:static;width:max-content;max-width:100%;margin-bottom:1.2rem}

/* Zeichen- und Wortspannen für die Auftritte */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) Streuung, echot den treibenden Staub.
   Bei rechtsläufiger Schrift streut das Band ganze Wörter statt Zeichen,
   deshalb die zweite Regel: sie greift nur mit der Klasse .by-word. */
.e-scatter.by-word .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* (f) Fallen von oben, echot die einfallenden Zutaten */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
/* (c) Unschärfe zu Schärfe, echot die frei werdende Linse */
/* Frueher stand hier .e-blur{position:relative}. Das kam NACH .band{position:absolute}
 * und hat es aufgehoben, wodurch Band 3 aus dem Fluss rutschte. Linkslaeufig fiel das
 * nicht auf, rechtslaeufig landete es bei 1629 und damit ausserhalb des Bildes: die
 * dritte von fuenf Aussagen war auf Arabisch unsichtbar. Die Regel war ueberfluessig,
 * denn .band ist bereits absolut positioniert und damit der Bezugsrahmen fuer .soft. */
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));pointer-events:none}
.e-blur .sharp{opacity:var(--k,0)}
/* (d) Wortaufschlag mit Überschwingen, echot das Auspendeln */
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) Wort für Wort aufsteigend, dann Unterzeile, dann Knopf */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px))}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise .cta{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*12px))}

/* ---------- Das Standbild für Telefone und ruhige Bewegung ---------- */
.still{position:absolute;inset:0;display:none;align-items:flex-end;padding:0 clamp(1.2rem,6vw,3rem) clamp(3rem,10vh,5rem);
  text-align:left}
/* Derselbe Schutz wie bei den Bändern: der Text steht sonst auf hellem Salz */
.still::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,10,.9) 0%,rgba(6,6,10,.72) 38%,rgba(6,6,10,.3) 66%,rgba(6,6,10,.12) 100%)}
.still-in{position:relative}
.still-in{max-width:22ch;text-shadow:var(--tshadow)}
.still h1{font-size:clamp(2.1rem,8.5vw,3.2rem);margin-bottom:1rem}
.still p{color:#e4dccd;margin-bottom:1.5rem;max-width:30ch}

/* ---------- Die Waagelinie, das Signaturelement ---------- */
.beamline{position:relative;height:1px;margin:0 auto;width:min(var(--wrap),calc(100% - 2.6rem));
  overflow:visible}
.beamline svg{position:absolute;left:0;top:-16px;width:100%;height:32px;overflow:visible}
.beamline .bar{stroke:var(--edge);stroke-width:1;
  transform-box:view-box;transform-origin:50% 50%;
  transform:rotate(calc(var(--tilt,1) * 1.1deg));
  transition:transform .9s var(--ease-soft)}
.beamline .piv{fill:var(--accent);opacity:.6}

/* ---------- Abschnitte ---------- */
main{position:relative;z-index:1}
.band-sec{padding:clamp(4.5rem,11vw,8rem) 0}
.wrap{width:min(var(--wrap),calc(100% - 2.6rem));margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem}
.band-sec h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:1.1rem}
.lede{color:var(--text-secondary);max-width:52ch;font-size:1.03rem}

/* Auftritte: nur Verschiebung, nie Deckkraft auf null.
   Ein Vollbild-Screenshot muss jeden Abschnitt zeigen. */
.rev{transform:translateY(20px);transition:transform .75s var(--ease)}
.rev.in{transform:none}
.rev:nth-child(2){transition-delay:.07s}
.rev:nth-child(3){transition-delay:.14s}
.rev:nth-child(4){transition-delay:.21s}
.in .rev:nth-child(2),.in .rev:nth-child(3),.in .rev:nth-child(4){transition-delay:0s}

/* 1. Die Kalkulation */
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.ledger{border-top:1px solid var(--edge)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto 5.6rem;gap:1rem;align-items:baseline;
  padding:.82rem 0;border-bottom:1px solid var(--edge);font-size:.95rem}
.row .q,.row .s{font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.row .s{text-align:right;color:var(--text-primary)}
.row.sum{border-bottom:0;padding-top:1.3rem;font-family:var(--display);font-size:1.5rem}
.row.sum .s{color:var(--accent);font-size:1.85rem}
.kpi{display:flex;gap:2.2rem;margin-top:1.6rem;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.06em;color:var(--text-secondary)}
.kpi b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--text-primary);letter-spacing:0}

/* 2. Der Mitmach-Moment */
.hold{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.scalebox{background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:2rem 1.5rem 1.5rem;text-align:center}
.scalebox svg{width:100%;max-width:320px;height:auto}
.scalebox .beam2{transform-box:fill-box;transform-origin:center;
  transform:rotate(calc(var(--h,0)*13deg - var(--done,0)*13deg))}
.scalebox .payload{opacity:var(--h,0);transform:translateY(calc((1 - var(--h,0))*-18px));transform-box:fill-box}
.holdbtn{margin-top:1.4rem;padding:.7rem 1.4rem;border:1px solid var(--accent);border-radius:4px;
  background:var(--accent-muted);color:var(--text-primary);font-family:var(--body);font-weight:700;
  font-size:.92rem;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:background-color .2s var(--ease)}
.holdbtn[data-done="1"]{background:var(--accent);color:#0d0c0a}
.posten{list-style:none;margin:1.6rem 0 0;padding:0}
.posten li{display:flex;align-items:baseline;gap:.8rem;padding:.6rem 0;border-bottom:1px solid var(--edge);
  color:var(--text-secondary);transform:translateX(-6px);transition:color .4s var(--ease),transform .4s var(--ease)}
.posten li.lit{color:var(--text-primary);transform:none}
.posten li i{width:7px;height:7px;border-radius:50%;background:var(--edge);flex:0 0 auto;
  transition:background-color .4s var(--ease)}
.posten li.lit i{background:var(--accent)}

/* 3 bis 5. Die Module */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.mod{padding:1.7rem 1.6rem;border:1px solid var(--edge);border-radius:4px;background:var(--panel);
  transition:border-color .3s var(--ease)}
.mod h3{font-size:1.35rem;margin-bottom:.6rem}
.mod p{color:var(--text-secondary);font-size:.93rem}
@media (hover:hover) and (pointer:fine){.mod:hover{border-color:var(--accent-hover)}}

/* 6. Fragen */
.faq{max-width:62ch}
.q-item{border-bottom:1px solid var(--edge);padding:1.4rem 0}
.q-item h3{font-size:1.25rem;margin-bottom:.7rem}
.q-item p{color:var(--text-secondary);font-size:.98rem}

/* 7. Abschluss */
.close{max-width:560px;margin-inline:auto;text-align:center}
.form{margin-top:2rem;text-align:left;background:var(--panel);border:1px solid var(--edge);
  border-radius:6px;padding:clamp(1.5rem,4vw,2.4rem)}
.f{margin-bottom:1rem}
.f label{display:block;margin-bottom:.35rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.f input,.f textarea{width:100%;padding:.72rem .85rem;border:1px solid #6b6252;border-radius:4px;
  background:#151410;color:var(--text-primary);font-family:var(--body);font-size:1rem;
  transition:border-color .18s var(--ease)}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--accent)}
.send{position:relative;display:block;width:100%;padding:.95rem 1.5rem;border:1px solid var(--accent);
  border-radius:4px;background:var(--accent-muted);color:var(--text-primary);font-family:var(--body);
  font-weight:700;font-size:1rem;letter-spacing:.02em;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.send .done,.send .wird,.send .fehl{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .2s var(--ease)}
.send .idle{transition:opacity .2s var(--ease)}
.send[data-state="sendet"]{opacity:.7}
.send[data-state="sendet"] .idle{opacity:0}
.send[data-state="sendet"] .wird{opacity:1}
.send[data-state="done"]{background:var(--accent);color:#0d0c0a}
.send[data-state="done"] .idle{opacity:0}
.send[data-state="done"] .done{opacity:1}
.send[data-state="fehl"]{border-color:var(--amber);color:var(--amber)}
.send[data-state="fehl"] .idle{opacity:0}
.send[data-state="fehl"] .fehl{opacity:1}
.fehlnote{margin:.7rem 0 0;font-size:.86rem;color:var(--amber)}
.fehlnote a{color:inherit}
/* Der Honeypot ist für Menschen unsichtbar und für Vorleseprogramme nicht im Weg. */
/* Auch der Honigtopf lag auf left:-9999px, mit derselben Wirkung rechtslaeufig. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.note{margin-top:.9rem;color:var(--text-secondary);font-size:.82rem}
/* Ohne diese Regel fallen die Rechtslinks auf das Browser-Blau zurueck: 2,01 zu 1
 * auf dem dunklen Grund, besucht sogar 1,71. Geerbt sind es 6,00 zu 1.
 * Die Unterstreichung bleibt stehen, damit der Link nicht nur an der Farbe haengt. */
.note a,footer a{color:inherit}
.note a:hover,footer a:hover{color:var(--text-primary)}

footer{border-top:1px solid var(--edge);padding:2.4rem 0 3.4rem;color:var(--text-secondary);font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}

/* ---------- Die fünf Weichen zum Standbild ----------
   Diese fünf Bedingungen stehen zeichengleich auch im JavaScript. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:88dvh}
  .bands,.ringwrap,.stage>.beleg{display:none}
  .still{display:flex}
}

@media (max-width:900px){
  .calc,.hold{grid-template-columns:minmax(0,1fr)}
}
@media (max-height:560px){.ringwrap,.stage>.beleg{display:none}}
@media (pointer:coarse){
  .cta,.holdbtn,.send{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .send{display:flex;width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rev{transform:none}
  .beamline .bar{transform:rotate(0deg)}
  .posten li{transform:none;color:var(--text-primary)}
  .posten li i{background:var(--accent)}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}/* =====================================================================
   Ausbau 2026: der Sturz, die mittige Aktion, die Ergebnisse
   ===================================================================== */

/* Der Film ist jetzt 12,8 statt 6 Sekunden lang. Jedes Band braucht Weg. */
.hero{height:1000vh}

/* Ebene 1 neu: die Aktion liegt jetzt in der Bildmitte, also sitzt auch
   der Grundschleier mittig und lässt die Mitte hell. */
.scrim{background:
  radial-gradient(ellipse 118% 92% at 50% 48%,rgba(10,10,18,0) 26%,rgba(10,10,18,.60) 100%)}

/* ---------- Die Bänder flankieren die mittige Aktion ----------
   Der Topf fällt in der Bildmitte. Der Text steht abwechselnd links und
   rechts daneben, damit die Fallbahn frei bleibt. Deshalb bekommt jede
   Seite ihren EIGENEN Schleier: ein einziger quer über die Mitte würde
   genau das abdunkeln, was man sehen soll. */
.band{top:50%;left:auto;right:auto;width:auto}
.band.pos-l{left:clamp(1.2rem,5vw,4.5rem);width:min(34%,470px)}
.band.pos-r{right:clamp(1.2rem,5vw,4.5rem);width:min(34%,470px);text-align:right}
.band.pos-c{left:50%;width:min(58%,760px);transform:translate(-50%,-50%);text-align:center}
/* Das Schlussbild ist oben hell und unten dunkel. Gemessen: oben 102,
   unten 18 von 255. Also steht die Schlusszeile in der unteren Hälfte. */
.band.pos-s{left:50%;top:63%;width:min(56%,720px);transform:translate(-50%,-50%);text-align:center}

.band.pos-l::before{inset:-30% -26% -30% -34%;
  background:radial-gradient(ellipse 72% 60% at 44% 50%,rgba(5,5,10,.70) 0%,rgba(5,5,10,.46) 46%,rgba(5,5,10,0) 76%)}
.band.pos-r::before{inset:-30% -34% -30% -26%;
  background:radial-gradient(ellipse 72% 60% at 56% 50%,rgba(5,5,10,.70) 0%,rgba(5,5,10,.46) 46%,rgba(5,5,10,0) 76%)}
.band.pos-c::before{inset:-34% -16%;
  background:radial-gradient(ellipse 70% 62% at 50% 50%,rgba(5,5,10,.72) 0%,rgba(5,5,10,.48) 46%,rgba(5,5,10,0) 78%)}
.band.pos-s::before{inset:-40% -18%;
  background:radial-gradient(ellipse 72% 66% at 50% 46%,rgba(5,5,10,.74) 0%,rgba(5,5,10,.50) 46%,rgba(5,5,10,0) 78%)}

.band.pos-r p{margin-left:auto}
.band.pos-c p,.band.pos-s p{margin-inline:auto}
.band p{max-width:32ch}

/* ---------- Die Fallinie: das Signaturelement, unter dem Hero ----------
   Der Sturz hört am Hero nicht auf. Eine feine Linie zeichnet sich beim
   Scrollen weiter nach unten und trägt einen Punkt an der Spitze. */
.fallline{position:fixed;left:clamp(.9rem,2.2vw,2.4rem);top:0;width:1px;height:100dvh;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .7s var(--ease)}
body.past-hero .fallline{opacity:1}
.fl-bar{position:absolute;inset:0;transform:scaleY(var(--p,0));transform-origin:top;
  background:linear-gradient(to bottom,rgba(74,158,106,0),rgba(74,158,106,.42) 22%,rgba(74,158,106,.42) 78%,rgba(74,158,106,0))}
.fl-dot{position:absolute;left:-2px;top:calc(var(--p,0)*100%);width:5px;height:5px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 10px rgba(212,148,58,.55)}
@media (max-width:1100px){.fallline{display:none}}

/* ---------- Bilder in den Abschnitten ---------- */
.mod-bild,.rolle-bild{position:relative;margin:-1.7rem -1.6rem 1.4rem;overflow:hidden;
  border-radius:4px 4px 0 0;aspect-ratio:16/9;background:#0f0e0c}
.mod-bild img,.rolle-bild img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.1s var(--ease)}
/* Ein weicher Verlauf am Fuß, damit Bild und Karte eine Fläche werden
   statt zweier gestapelter Kacheln. */
.mod-bild::after,.rolle-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,17,15,.12),rgba(28,26,22,.9))}
@media (hover:hover) and (pointer:fine){
  .mod:hover .mod-bild img,.rolle:hover .rolle-bild img{transform:scale(1)}
}

.shot{margin:2rem 0 0}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--edge);border-radius:4px}
.shot figcaption,.bildnote{margin-top:.7rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;color:var(--text-secondary)}

/* ---------- Wer was macht ---------- */
.rollen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.rolle{padding:1.7rem 1.6rem;border:1px solid var(--edge);border-radius:4px;background:var(--panel);
  transition:border-color .3s var(--ease)}
.rolle h3{font-size:1.35rem;margin-bottom:.6rem}
.rolle p{color:var(--text-secondary);font-size:.93rem}
@media (hover:hover) and (pointer:fine){.rolle:hover{border-color:var(--accent-hover)}}

/* ---------- Das Ergebnis: die Bestellliste, gebaut statt fotografiert ----------
   Zwei Quellen wandern beim Scrollen in eine Liste, die Liste wird
   freigegeben, die Mail geht raus. Alles hängt an --f, 0 bis 1. */
.fluss{--f:0;margin-top:2.4rem;border:1px solid var(--edge);border-radius:6px;background:var(--panel);
  padding:clamp(1.2rem,3vw,2rem);overflow:hidden}
.quellen{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap}
.quelle{flex:1 1 180px;border:1px dashed var(--edge);border-radius:4px;padding:.7rem .9rem;
  transition:border-color .5s var(--ease),opacity .5s var(--ease);
  opacity:calc(1 - .55*clamp(0,(var(--f) - .5)*2.4,1))}
.qtag{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.q-auto .qtag{color:var(--amber)}
.qtxt{font-size:.95rem}
.liste{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--edge)}
.liste li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--edge);font-size:.95rem;
  opacity:var(--kc,0);transform:translateX(calc((1 - var(--kc,0))*var(--dir,-28px)))}
.liste li[data-von="auto"]{--dir:28px}
.liste li:nth-child(1){--kc:clamp(0,(var(--f) - .02)*6,1)}
.liste li:nth-child(2){--kc:clamp(0,(var(--f) - .10)*6,1)}
.liste li:nth-child(3){--kc:clamp(0,(var(--f) - .18)*6,1)}
.liste li:nth-child(4){--kc:clamp(0,(var(--f) - .26)*6,1)}
.liste .geb{font-family:var(--mono);font-size:.78rem;color:var(--text-secondary);white-space:nowrap}
.freigabe{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.3rem}
.stempel{--ks:clamp(0,(var(--f) - .52)*4,1);
  display:inline-block;padding:.4rem .9rem;border:1px solid var(--accent);border-radius:4px;
  background:var(--accent-muted);color:var(--text-primary);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  opacity:var(--ks);transform:scale(calc(.86 + .14*var(--ks))) rotate(calc((1 - var(--ks))*-4deg))}
.mail{--km:clamp(0,(var(--f) - .74)*4,1);color:var(--text-secondary);font-size:.9rem;
  opacity:var(--km);transform:translateX(calc((1 - var(--km))*-14px))}

/* ---------- Die Rechnung baut sich selbst auf ---------- */
.ledger{--l:0}
.ledger .row{opacity:var(--kr,0);transform:translateY(calc((1 - var(--kr,0))*10px))}
.ledger .row:nth-child(1){--kr:clamp(0,(var(--l) - .00)*7,1)}
.ledger .row:nth-child(2){--kr:clamp(0,(var(--l) - .07)*7,1)}
.ledger .row:nth-child(3){--kr:clamp(0,(var(--l) - .14)*7,1)}
.ledger .row:nth-child(4){--kr:clamp(0,(var(--l) - .21)*7,1)}
.ledger .row:nth-child(5){--kr:clamp(0,(var(--l) - .28)*7,1)}
.ledger .row:nth-child(6){--kr:clamp(0,(var(--l) - .38)*7,1)}
.ledger .row.sum{--kr:clamp(0,(var(--l) - .50)*6,1)}
.ledger .kpi{opacity:clamp(0,(var(--l) - .66)*5,1);
  transform:translateY(calc((1 - clamp(0,(var(--l) - .66)*5,1))*10px))}
/* Die letzte Zahl bekommt ihren eigenen Nachdruck, wenn sie landet. */
.ledger .row.sum .s{text-shadow:0 0 calc(clamp(0,(var(--l) - .58)*4,1)*22px) rgba(74,158,106,.45)}

/* ---------- Die Waagelinie zeichnet sich jetzt selbst ---------- */
.beamline .bar{stroke-dasharray:1200;stroke-dashoffset:calc(1200 - var(--draw,0)*1200);
  transition:stroke-dashoffset 1.1s var(--ease-soft),transform .9s var(--ease-soft)}
.beamline .piv{opacity:calc(var(--draw,0)*.6);transition:opacity .6s var(--ease-soft) .5s}

/* =====================================================================
   Telefone bekommen jetzt die Reise, nicht mehr das Standbild
   Diese drei Bedingungen stehen zeichengleich auch im JavaScript.
   ===================================================================== */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse){
  .hero{height:760vh}
  .stage{position:sticky;height:100dvh}
  .bands{display:block}
  .still{display:none}
  .ringwrap{display:block;bottom:5%}

  /* Im Hochformat liegt der Topf in der Bildmitte. Der Text steht darunter,
     wo die Hand ohnehin ist, und bekommt einen Verlauf von unten. */
  .band,.band.pos-l,.band.pos-r,.band.pos-c,.band.pos-s{
    left:clamp(1.1rem,5vw,2rem);right:clamp(1.1rem,5vw,2rem);width:auto;
    top:auto;bottom:clamp(4.5rem,13vh,8rem);transform:none;text-align:left}
  .band.pos-r p,.band.pos-c p,.band.pos-s p{margin-inline:0}
  .band p{max-width:30ch}
  .band h2{font-size:clamp(1.9rem,7.6vw,2.8rem)}
  .band::before,.band.pos-l::before,.band.pos-r::before,
  .band.pos-c::before,.band.pos-s::before{
    inset:-42% -30% -60% -30%;
    background:linear-gradient(to top,rgba(5,5,10,.90) 0%,rgba(5,5,10,.74) 42%,rgba(5,5,10,.34) 72%,rgba(5,5,10,0) 100%)}
  .scrim{background:linear-gradient(to top,rgba(10,10,18,.55),rgba(10,10,18,0) 46%),
                   radial-gradient(ellipse 130% 60% at 50% 42%,rgba(10,10,18,0) 34%,rgba(10,10,18,.42) 100%)}
  .mod-bild,.rolle-bild{margin:-1.7rem -1.6rem 1.2rem}
}

/* =====================================================================
   Das Standbild gewinnt IMMER, wenn eine seiner zwei Bedingungen greift.
   Deshalb steht dieser Block als letzter: gleiche Spezifität, spätere
   Regel setzt sich durch. Genau diese Rangfolge prüft auch das Skript.
   ===================================================================== */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:88dvh}
  .bands,.ringwrap{display:none}
  .still{display:flex}
}

@media (prefers-reduced-motion:reduce){
  /* Alles, was am Scrollfortschritt hängt, steht im Endzustand da. */
  .ledger{--l:1}
  .fluss{--f:1}
  .fl-bar{transform:scaleY(1)}
  .beamline .bar{stroke-dashoffset:0}
  .beamline .piv{opacity:.6}
  .mod-bild img,.rolle-bild img{transform:none}
  .fallline{display:none}
}

/* ---------- Nachgemessene Schleier für die späten Bänder ----------
   Gemessen, nicht geschätzt: Band 3 kam auf 2,60 zu 1, Band 4 auf 2,67,
   der Anfang von Band 5 auf 2,50. Die Grenze ist 3,5.
   Grund: Der Topf wächst im Lauf des Films, bis er das ganze Bild füllt.
   Die ruhige Zone am Bildrand, auf die diese Bänder gesetzt waren, gibt es
   ab der Mitte des Films nicht mehr. Also brauchen genau diese drei einen
   tieferen und weiter auslaufenden Schleier. Die frühen Bänder bleiben,
   wie sie sind, sonst verliert der dunkle Anfang seine Tiefe. */
.band:nth-child(3)::before{inset:-36% -32% -36% -40%;
  background:radial-gradient(ellipse 80% 68% at 44% 50%,rgba(5,5,10,.88) 0%,rgba(5,5,10,.68) 44%,rgba(5,5,10,0) 84%)}
.band:nth-child(4)::before{inset:-40% -22%;
  background:radial-gradient(ellipse 78% 70% at 50% 50%,rgba(5,5,10,.90) 0%,rgba(5,5,10,.70) 44%,rgba(5,5,10,0) 84%)}
.band:nth-child(5)::before{inset:-46% -24%;
  background:radial-gradient(ellipse 80% 74% at 50% 46%,rgba(5,5,10,.90) 0%,rgba(5,5,10,.70) 44%,rgba(5,5,10,0) 84%)}
/* Band 2 lag mit 3,69 zu 1 nur knapp über der Grenze. Etwas mehr Luft. */
.band:nth-child(2)::before{inset:-32% -30% -32% -26%;
  background:radial-gradient(ellipse 76% 64% at 56% 50%,rgba(5,5,10,.80) 0%,rgba(5,5,10,.56) 46%,rgba(5,5,10,0) 80%)}

/* ---------- Kopfleiste auf schmalen Geräten ----------
   Bei 375 Pixeln brach "Rezept mitbringen" auf zwei Zeilen um und die
   Leiste wirkte gedrängt. Der Knopf bleibt jetzt einzeilig, das Zeichen
   daneben entfällt oben, und Marke und Abstände rücken zusammen. */
@media (max-width:560px){
  .mark{font-size:1.12rem}
  .mark svg{width:26px;height:26px}
  .nav-r{gap:.55rem}
  .nav .cta{padding:.6rem 1rem;font-size:.85rem;white-space:nowrap}
  .nav .cta svg{display:none}
  .langbtn{padding:.35rem .4rem}
}
@media (max-width:390px){
  .mark{font-size:1rem}
  .nav .cta{padding:.55rem .8rem;font-size:.8rem}
}
.cta{white-space:nowrap}

/* ---------- Karten-Bilder waren zu dunkel ----------
   Der Verlauf über den Bildern deckte unten mit 90 Prozent zu und hat die
   Motive fast aufgefressen. Er soll das Bild mit der Karte verbinden, nicht
   ersetzen. Weniger Deckung, dafür etwas mehr Licht im Bild selbst. */
.mod-bild::after,.rolle-bild::after{
  background:linear-gradient(to bottom,rgba(18,17,15,.04) 0%,rgba(24,22,19,.34) 58%,rgba(28,26,22,.74) 100%)}
.mod-bild img,.rolle-bild img{filter:brightness(1.16) saturate(1.05)}

/* ---------- Nachgemessene Lesbarkeit im Hochformat ----------
   Gemessen auf 390x844: Band 3 kam auf 1,03 zu 1, Band 4 auf 2,27.
   Grund: Im Hochformat steht der Text unten, und genau dort treiben in der
   Mitte des Films helle Gemüsestücke durchs Bild. Der Verlauf von unten war
   an dieser Stelle zu dünn. Er deckt jetzt den Textbereich wirklich ab und
   läuft erst darüber aus, damit der Topf hell bleibt. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse){
  .scrim{background:
    linear-gradient(to top,rgba(10,10,18,.88) 0%,rgba(10,10,18,.70) 26%,rgba(10,10,18,.22) 54%,rgba(10,10,18,0) 76%),
    radial-gradient(ellipse 130% 60% at 50% 40%,rgba(10,10,18,0) 32%,rgba(10,10,18,.40) 100%)}
  .band::before,.band.pos-l::before,.band.pos-r::before,
  .band.pos-c::before,.band.pos-s::before{
    inset:-34% -32% -70% -32%;
    background:linear-gradient(to top,
      rgba(5,5,10,.94) 0%,
      rgba(5,5,10,.94) 62%,
      rgba(5,5,10,.80) 76%,
      rgba(5,5,10,.42) 89%,
      rgba(5,5,10,0) 100%)}
}
/* Das Standbild gewinnt weiterhin zuletzt. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:88dvh}
  .bands,.ringwrap{display:none}
  .still{display:flex}
}

/* ---------- Band 3 stand nicht, wo es sollte ----------
   Unabhaengig gemessen und im Hochformat bestaetigt: Band 3 lag 110 Pixel
   ueber dem Bildrand. Die Ursache, .e-blur{position:relative} nach
   .band{position:absolute}, ist auf GitHub bereits entfernt worden. Der
   Stand hier baut darauf auf, deshalb steht an dieser Stelle keine eigene
   Regel mehr. Nachgemessen wurde trotzdem, siehe Bandpositionen. */

/* ---------- Die Schleier laufen jetzt weich aus ----------
   Vorher endete der Verlauf noch mit sichtbarer Deckung genau dort, wo die
   Fläche des Elements aufhörte. Das ergibt eine harte Kante, und bei den
   tiefen Werten der späten Bänder las sich das als schwarzer Kasten.
   Die Regel dahinter: Bei "ellipse R% R%" liegt der letzte Farbstopp bei
   R% mal Stoppwert vom Mittelpunkt. Damit er die Kante nie erreicht, muss
   Radius mal letzter Stopp höchstens 50 Prozent ergeben. Also Radius 50 und
   letzter Stopp 100. Außerhalb der Ellipse gilt ohnehin der letzte Wert,
   und der ist durchsichtig. Die Deckung steuert jetzt allein die Fläche. */
.band::before{
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5,5,10,.70) 0%,rgba(5,5,10,.58) 34%,rgba(5,5,10,.32) 62%,rgba(5,5,10,.10) 82%,rgba(5,5,10,0) 100%)}

.band:nth-child(1)::before{inset:-48% -36% -48% -46%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5,5,10,.72) 0%,rgba(5,5,10,.60) 34%,rgba(5,5,10,.34) 62%,rgba(5,5,10,.11) 82%,rgba(5,5,10,0) 100%)}
.band:nth-child(2)::before{inset:-48% -46% -48% -36%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5,5,10,.82) 0%,rgba(5,5,10,.68) 34%,rgba(5,5,10,.38) 62%,rgba(5,5,10,.12) 82%,rgba(5,5,10,0) 100%)}
.band:nth-child(3)::before{inset:-54% -40% -54% -50%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5,5,10,.92) 0%,rgba(5,5,10,.78) 34%,rgba(5,5,10,.44) 62%,rgba(5,5,10,.14) 82%,rgba(5,5,10,0) 100%)}
.band:nth-child(4)::before{inset:-62% -34%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5,5,10,.94) 0%,rgba(5,5,10,.80) 34%,rgba(5,5,10,.46) 62%,rgba(5,5,10,.15) 82%,rgba(5,5,10,0) 100%)}
.band:nth-child(5)::before{inset:-66% -36%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5,5,10,.94) 0%,rgba(5,5,10,.80) 34%,rgba(5,5,10,.46) 62%,rgba(5,5,10,.15) 82%,rgba(5,5,10,0) 100%)}

/* Im Hochformat bleibt der Verlauf von unten: er hat links und rechts keine
   Kante im Bild, weil die Fläche dort weit über den Bildrand hinausreicht. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse){
  .band::before,
  .band:nth-child(1)::before,.band:nth-child(2)::before,.band:nth-child(3)::before,
  .band:nth-child(4)::before,.band:nth-child(5)::before{
    inset:-34% -60% -70% -60%;
    background:linear-gradient(to top,
      rgba(5,5,10,.94) 0%,rgba(5,5,10,.94) 62%,rgba(5,5,10,.80) 76%,
      rgba(5,5,10,.42) 89%,rgba(5,5,10,0) 100%)}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:88dvh}
  .bands,.ringwrap{display:none}
  .still{display:flex}
}
/* Band 5 fiel am Anfang mit 2,99 durch: direkt nach dem Sprung wandert die
   helle Wasserlinie durch die Textzone. Größere Fläche, gleiche Weichheit. */
.band:nth-child(5)::before{inset:-96% -46%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(5,5,10,.95) 0%,rgba(5,5,10,.86) 38%,rgba(5,5,10,.52) 66%,rgba(5,5,10,.16) 84%,rgba(5,5,10,0) 100%)}

/* ---------- Der Beleg im Hochformat ----------
   Auf dem Telefon stehen die Textbänder unten, und dort sass bisher auch der
   Beleg: gemessen ueberlappten sie sich. Der Beleg wandert deshalb im
   Hochformat nach oben unter die Kopfleiste, wo er frei steht und trotzdem
   ab dem ersten Bildschirm zu sehen ist. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse){
  .stage>.beleg{top:clamp(4.2rem,9vh,5.6rem);bottom:auto}
}
/* Das Standbild gewinnt zuletzt, wie ueberall. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:88dvh}
  .bands,.ringwrap,.stage>.beleg{display:none}
  .still{display:flex}
}