/* menzel.works — Showreel
 *
 * Schichten: Ohne .bewegt (kein JS, reduzierte Bewegung) steht alles ruhig
 * untereinander. Mit .bewegt bekommt jedes Kapitel eine eigene Scrollstrecke
 * und eine klebende Szene, deren Inhalt aus drei Werten rechnet, die
 * showreel.js setzt:
 *   --ein  0..1  das Kapitel faehrt in den Bildschirm
 *   --p    0..1  Fortschritt durch die klebende Strecke
 *   --v   -1..1  Scrollgeschwindigkeit (an html), --mx/--my Zeigerlage
 */

*{box-sizing:border-box}
html{color-scheme:dark;--fort:0;--v:0;--mx:0;--my:0;
  --nacht:#05080F;--papier:#F3F1EC;--tinte:#10131A;--start:#F1EFEA;
  --takt:cubic-bezier(.22,1,.36,1)}
html,body{margin:0;background:var(--nacht);color:#fff}
body{font-family:Geist,Helvetica,Arial,sans-serif;font-weight:420;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
/* Sprunglink fuer Tastatur und Screenreader — erscheint erst beim Fokus. */
.sprung{position:fixed;z-index:100;left:16px;top:16px;padding:12px 18px;border-radius:99px;background:#fff;color:#05080F;
  font-weight:560;text-decoration:none;transform:translateY(-200%);transition:transform .3s}
.sprung:focus{transform:none;outline:2px solid #1A73FF;outline-offset:3px}
a{color:inherit}

/* ================= Vorspann: das Portrait ================= */

.vorspann{position:relative;z-index:1}
/* Der Raum: die Portraitseite ist ein Fenster unter vielen. Ohne
   .raumflug (kein JS, Ruhebitte) ist sie einfach die Seite. */
.welt{position:relative;height:100svh;overflow:hidden;background:var(--start);perspective:1200px}
html.raumflug .vorspann{height:200svh}
html.raumflug .welt{position:sticky;top:0}
.raum{position:absolute;inset:0;transform-style:preserve-3d}
.akt1{position:absolute;inset:0;overflow:hidden;background:var(--start);color:var(--tinte);
  border-radius:calc(var(--chrom,0) * 1.4vw);
  box-shadow:0 0 0 calc(var(--chrom,0) * 1px) rgba(16,19,26,.1),0 calc(var(--chrom,0) * 60px) calc(var(--chrom,0) * 160px) rgba(16,19,26,.28)}

.chrom{display:flex;align-items:center;gap:6px;padding:0 12px;height:26px;
  background:rgba(22,26,36,.92);border-bottom:1px solid rgba(255,255,255,.08)}
.chrom i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.chrom span{margin:0 auto;padding:2px 14px;border-radius:6px;background:rgba(255,255,255,.07);
  font-size:11px;letter-spacing:.01em;color:rgba(255,255,255,.62);white-space:nowrap}
/* Die Adresszeile der Portraitseite ist groesser — sie wird mitverkleinert. */
.akt1 .chrom{position:absolute;z-index:6;inset:0 0 auto 0;height:3.4vw;gap:.7vw;padding:0 1.4vw;
  background:rgba(255,255,255,.82);border-bottom-color:rgba(16,19,26,.08);
  opacity:var(--chrom,0);transform:translateY(calc((1 - var(--chrom,0)) * -100%))}
.akt1 .chrom i{background:rgba(16,19,26,.18)}
.akt1 .chrom span{background:rgba(16,19,26,.05);color:rgba(16,19,26,.5)}
.akt1 .chrom i{width:1vw;height:1vw}
.akt1 .chrom span{font-size:1.25vw;padding:.3vw 2vw;border-radius:.6vw}
@media (max-aspect-ratio:1/1){
  .akt1 .chrom{height:7vw}.akt1 .chrom i{width:2.2vw;height:2.2vw}.akt1 .chrom span{font-size:3vw}
}

/* Waehrend des Flugs: das Portraitfenster als eigene Ebene, die der
   Compositor nur verschiebt, und keine laufenden Lichtanimationen darin —
   sonst muss der weichgezeichnete Hintergrund in jedem Bild neu gerastert
   werden, und das ruckelt. */
.fenster.ich{will-change:transform,opacity}
html.fliegt .fleck{animation-play-state:paused}
html.fliegt .akt1 h1,html.fliegt .akt1 .portrait{translate:none}
.werk{position:absolute;left:50%;top:50%;margin:0;display:none;width:420px;
  backface-visibility:hidden;will-change:transform,opacity}
html.raumflug .werk{display:block}
/* Das Licht am Ende des Flugs: ein Schein in der Farbe des ersten Kapitels,
   der aus der Mitte waechst, bis er den Raum fuellt. */
.ausgang{position:absolute;left:50%;top:50%;width:80vmax;height:80vmax;border-radius:50%;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.15);z-index:7;
  background:radial-gradient(closest-side,var(--ankunft,#fff) 0%,var(--ankunft,#fff) 55%,transparent 100%)}
.werk .chrom{border-radius:10px 10px 0 0}
.werk img{width:100%;height:auto;border-radius:0 0 10px 10px;background:#0B0F18;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.werk figcaption{position:absolute;left:2px;top:calc(100% + 14px);white-space:nowrap;
  font-size:14px;font-weight:520;letter-spacing:-.01em;color:rgba(255,255,255,.75)}
.werk figcaption b{font-weight:520;color:#6EA2FF;margin-right:6px}

/* Das Licht hinter Name und Portrait: fuenf weiche Flecken, die von selbst
   treiben und dem Zeiger folgen — das Blau bleibt dabei hinter dem Kopf
   (gemessen: dort deckt die Silhouette zu 0,98-1,00), die anderen weichen
   gegenlaeufig aus. --mx/--my setzt showreel.js gedaempft. */
.akt1 .licht{position:absolute;inset:-10%;z-index:0;pointer-events:none;filter:blur(70px)}
/* Auf hellem Grund wird nicht aufgehellt, sondern multipliziert — sonst
   ist nichts zu sehen. Und viel leiser als zuvor: ein Hauch Farbe im
   Papier, kein Lichtspiel. */
.fleck{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.fleck.blau{left:50%;top:33%;width:64vmax;height:56vmax;margin:-28vmax 0 0 -32vmax;
  background:radial-gradient(closest-side,rgba(178,196,224,.5),rgba(196,208,228,.2) 55%,transparent);
  translate:calc(var(--mx) * 3vw) calc(var(--my) * 2.4vh);animation:atmen 14s ease-in-out infinite alternate}
.fleck.zyan{left:13%;top:24%;width:40vmax;height:36vmax;margin:-18vmax 0 0 -20vmax;
  background:radial-gradient(closest-side,rgba(192,210,222,.34),transparent);
  translate:calc(var(--mx) * -6vw) calc(var(--my) * -4vh);animation:kreisen 40s linear infinite}
.fleck.warm{left:86%;top:20%;width:38vmax;height:34vmax;margin:-17vmax 0 0 -19vmax;
  background:radial-gradient(closest-side,rgba(226,210,194,.34),transparent);
  translate:calc(var(--mx) * -7vw) calc(var(--my) * -5vh);animation:kreisen 48s linear infinite reverse}
.fleck.violett{display:none}
/* Ein Schein, der direkt dem Zeiger folgt — hinter dem Portrait. */
.fleck.zeiger{left:calc(50% + var(--mx) * 46%);top:calc(50% + var(--my) * 46%);width:30vmax;height:30vmax;margin:-15vmax 0 0 -15vmax;
  background:radial-gradient(closest-side,rgba(186,200,220,.34),transparent);opacity:var(--zeiger,0);transition:opacity .8s}
html.zeiger-aktiv .fleck.zeiger{--zeiger:1}
@keyframes atmen{from{transform:scale(.92)}to{transform:scale(1.1)}}
@keyframes kreisen{from{transform:rotate(0) translateX(3vmax) rotate(0)}to{transform:rotate(360deg) translateX(3vmax) rotate(-360deg)}}
/* Tiefe: der Name weicht dem Zeiger leicht aus, das Portrait folgt ihm. */
.akt1 h1{translate:calc(var(--mx) * -1.1vw) calc(var(--my) * -.7vh)}
.akt1 .portrait{translate:calc(var(--mx) * .5vw) calc(var(--my) * .3vh)}

/* Der Name steht unten links und wird vom Portrait teilweise verdeckt:
   zwei eng gesetzte Zeilen in Versalien, so gross, dass sie die Flaeche
   tragen. Er bleibt hinter dem Bild (z-index 0). */
.akt1 h1{position:absolute;z-index:0;margin:0;left:clamp(18px,3.6vw,66px);bottom:clamp(10px,3.4svh,44px);top:auto;
  transform:none;
  font-weight:760;font-size:min(13.4vw,205px);line-height:.8;letter-spacing:-.045em;
  color:var(--tinte);text-align:left;text-transform:uppercase;user-select:none}
.akt1 h1 span{display:block}
/* Auf dunklem Grund liess eine weiche Maske die Jacke in die Nacht
   laufen. Auf hellem Papier wirkte dieselbe Maske wie ein weisser
   Schleier um das Bild — das Portrait steht jetzt frei. */
.akt1 .portrait{position:absolute;z-index:1;bottom:0;left:79%;transform:translateX(-50%);
  max-width:100vw;max-height:86svh;width:auto;height:auto}
/* Auf hellem Grund laeuft das Portrait schon durch seine eigene Maske
   aus. Der Sockel ist nur noch ein Hauch — sonst frisst er den Namen an. */
.akt1 .sockel{position:absolute;z-index:0;inset:auto 0 0 0;height:clamp(60px,10vh,120px);pointer-events:none;
  background:linear-gradient(to top,rgba(241,239,234,.5),rgba(241,239,234,0))}
.weiterunten{position:absolute;z-index:8;left:auto;right:clamp(18px,3.6vw,66px);bottom:clamp(18px,3.4vh,34px);margin:0;transform:none;
  opacity:calc(.55 - var(--fort) * 4);pointer-events:none}
/* Eine Maus-Silhouette, in der ein Punkt nach unten wandert. Kein Text. */
.weiterunten .maus{display:block;width:22px;height:34px;border:1.5px solid rgba(16,19,26,.32);border-radius:12px;position:relative}
.weiterunten .maus i{position:absolute;left:50%;top:7px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;
  background:rgba(16,19,26,.55);animation:rad 2.2s var(--takt) infinite}
@keyframes rad{0%{transform:translateY(0);opacity:0}20%{opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}

/* ================= Startbild im Papier-Stil =================
   Vorlage: Collage aus gerissenem Foto, Rasterpunkten und ASCII-Wolken auf
   altem Papier. Alles leicht beweglich ueber --mx/--my. */
.akt1.papier{background:#E7E0D1;color:#24211D;--tinte:#24211D;--rot:#C8372D}
.papier-grund{position:absolute;inset:0;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(38% 30% at 18% 30%,rgba(150,120,80,.10),transparent 70%),
    radial-gradient(30% 26% at 80% 76%,rgba(120,95,60,.12),transparent 70%),
    radial-gradient(60% 50% at 50% 50%,rgba(255,250,240,.35),transparent 75%),
    linear-gradient(96deg,transparent 47.6%,rgba(90,70,40,.08) 48%,rgba(255,255,255,.25) 48.4%,transparent 49%),
    radial-gradient(120% 100% at 50% 50%,transparent 60%,rgba(80,60,35,.22) 100%)}

.papier .kreuz{position:absolute;z-index:3;width:30px;height:30px;pointer-events:none}
.papier .kreuz::before,.papier .kreuz::after{content:"";position:absolute;background:var(--tinte);opacity:.75}
.papier .kreuz::before{left:0;right:0;top:50%;height:1.2px;margin-top:-.6px}
.papier .kreuz::after{top:0;bottom:0;left:50%;width:1.2px;margin-left:-.6px}
.papier .k-lo{left:3vw;top:calc(3.4vw + var(--chrom,0) * 3.4vw)}.papier .k-ro{right:3vw;top:calc(3.4vw + var(--chrom,0) * 3.4vw)}
.papier .k-lu{left:3vw;bottom:3.4vw}.papier .k-ru{right:3vw;bottom:3.4vw}

.papier .riss{position:absolute;z-index:1;bottom:0;left:50%;height:88svh;aspect-ratio:1448/1086;
  transform:translateX(-42%)}
.papier .raster{position:absolute;inset:-6% -16% -4% -16%;pointer-events:none;opacity:.8;
  background-image:radial-gradient(circle,#1C1A17 1.25px,transparent 1.55px);background-size:8px 8px;
  -webkit-mask-image:radial-gradient(52% 50% at 50% 58%,#000 34%,rgba(0,0,0,.55) 52%,transparent 74%),radial-gradient(22% 26% at 22% 34%,rgba(0,0,0,.7),transparent 70%),radial-gradient(20% 24% at 84% 62%,rgba(0,0,0,.6),transparent 70%);
          mask-image:radial-gradient(52% 50% at 50% 58%,#000 34%,rgba(0,0,0,.55) 52%,transparent 74%),radial-gradient(22% 26% at 22% 34%,rgba(0,0,0,.7),transparent 70%),radial-gradient(20% 24% at 84% 62%,rgba(0,0,0,.6),transparent 70%);
  translate:calc(var(--mx) * -1.2vw) calc(var(--my) * -.8vh)}
.papier .ascii{position:absolute;margin:0;pointer-events:none;white-space:pre;color:var(--tinte);
  font:400 clamp(9px,.82vw,13px)/1.08 "Courier Prime",ui-monospace,Menlo,monospace;letter-spacing:.06em}
.papier .a1{left:-4%;top:34%;translate:calc(var(--mx) * -2vw) calc(var(--my) * -1.2vh)}
.papier .a2{right:-2%;top:58%;translate:calc(var(--mx) * -2.4vw) calc(var(--my) * -1.4vh)}
.papier .a3{left:14%;bottom:1.5%;translate:calc(var(--mx) * -1.6vw) 0}
.papier .fetzen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Die Streifen der zerrissenen Figur: Ruhelage leicht verrutscht, dazu
   schiebt papier.js die Streifen nahe am Zeiger zur Seite (--dx) und
   oeffnet die Risskanten dort (--auf). */
.papier .streifen{transform:translateX(calc(var(--ruhe,0px) + var(--dx,0px) + var(--mx) * var(--ruhe,0px) * .6))}
.papier .kante{transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(calc(1 + var(--auf,0) * 1.9))}
.papier .hof{translate:calc(var(--mx) * -10px) calc(var(--my) * -6px)}
.papier .b{display:inline-block;white-space:pre;will-change:transform}

.papier .rot{position:absolute;z-index:3;right:5.2vw;top:24%;display:flex;flex-direction:column;align-items:center;gap:14px}
.papier .rot i{display:block;width:14px;height:26svh;background:var(--rot);
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 5px);opacity:.92}
.papier .rot span{position:absolute;left:22px;top:0;writing-mode:vertical-rl;white-space:nowrap;
  font:400 8.5px/1 "Courier Prime",ui-monospace,monospace;letter-spacing:.32em;color:var(--rot);opacity:.85}
.papier .rot .kreuz{position:relative;width:18px;height:18px}
.papier .rot .kreuz::before,.papier .rot .kreuz::after{background:var(--rot)}

.papier .etikett{position:absolute;z-index:3;left:3.6vw;top:calc(9svh + var(--chrom,0) * 3.4vw);max-width:30ch;font-family:"Courier Prime",ui-monospace,Menlo,monospace;color:var(--tinte)}
.papier .etikett h1{position:static;transform:none!important;translate:none!important;opacity:1!important;color:#0E0D0C;font-weight:700;white-space:normal;text-align:left;user-select:text;margin:0;font-weight:400;text-transform:uppercase;letter-spacing:.05em;line-height:1.12;font-size:clamp(1.6rem,2.7vw,2.9rem)}
.papier .etikett h1 > span{display:block}
.papier .etikett p{margin:0}
.papier .strich{margin:.5em 0 .7em!important;letter-spacing:.12em;font-size:clamp(.9rem,1.2vw,1.2rem);opacity:.8}
.papier .nr{margin-top:1.1em!important;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.74rem,.88vw,.9rem);color:var(--rot)}
.papier .nr::after{content:"";display:block;width:62%;height:7px;margin-top:.5em;background:var(--rot);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 5px)}
.papier .satz{margin-top:1.4em!important;font-size:clamp(.85rem,1.05vw,1.05rem);line-height:1.38}
.welt:has(.papier) .weiterunten .maus{border-color:rgba(36,33,29,.55)}
.welt:has(.papier) .weiterunten .maus i{background:rgba(36,33,29,.75)}

@media (max-aspect-ratio:1/1){
  .papier .riss{height:64svh;transform:translateX(-50%)}
  .papier .a1{left:-6%;top:-12%}.papier .a2{right:-4%;top:40%}
  .papier .etikett{left:6vw;top:calc(8svh + var(--chrom,0) * 7vw);bottom:auto}
  .papier .etikett h1{font-size:7.4vw}.papier .strich,.papier .nr{font-size:3.4vw}.papier .satz{font-size:3.6vw}
  .papier .rot{right:6vw;top:9svh}.papier .rot i{height:16svh;width:10px}
}

@media (max-aspect-ratio:1/1){
  .akt1 .portrait{max-width:none;max-height:none;height:75svh;left:50%}
  /* Im Hochformat steht das Portrait unten — der Name geht nach oben,
     bleibt aber linksbuendig und so gross, dass er gerade noch passt. */
  .akt1 h1{top:11svh;bottom:auto;font-size:min(19.5vw,150px);letter-spacing:-.042em;white-space:normal}
  .akt1 h1 span{display:block}
}

/* ================= Kapitel: Grundform (ruhig) ================= */

.reel{position:relative;z-index:2;background:var(--nacht)}
.kapitel{position:relative;--grund:var(--nacht);--farbe:#fff;--leise:rgba(255,255,255,.62);--linie:rgba(255,255,255,.14);
  background:var(--grund);color:var(--farbe)}
.kapitel.hell{--grund:color-mix(in srgb,var(--akzent) 5%,var(--papier));--farbe:var(--tinte);
  --leise:rgba(16,19,26,.62);--linie:rgba(16,19,26,.14);color-scheme:light}


.szene{position:relative;padding:clamp(72px,14vh,140px) clamp(20px,6vw,88px);overflow:hidden}
.schein{position:absolute;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(40% 46% at 72% 46%,color-mix(in srgb,var(--akzent) 34%,transparent),transparent 72%);
  filter:blur(20px)}
.hell .schein{background:radial-gradient(40% 46% at 72% 46%,color-mix(in srgb,var(--akzent) 16%,transparent),transparent 72%)}
.riese{display:none}

.text{position:relative;z-index:3;max-width:min(46rem,100%)}
.kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 clamp(14px,2.4vh,26px);
  font-size:.72rem;font-weight:520;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);
  font-variant-numeric:tabular-nums}
.kopf .nr{color:var(--akzent);font-size:.9rem;letter-spacing:.04em}
.hell .kopf .nr{color:color-mix(in srgb,var(--akzent) 80%,#000)}
.kopf .status{padding:4px 10px;border-radius:99px;border:1px solid var(--linie);letter-spacing:.1em}
.kopf .status.live{border-color:color-mix(in srgb,#19D27A 50%,transparent);color:#2BE08A}
.hell .kopf .status.live{color:#0B8A4B;border-color:rgba(11,138,75,.35)}
.kopf .status.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:7px;vertical-align:1px;box-shadow:0 0 0 0 currentColor;animation:puls 2.2s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 60%,transparent)}80%,100%{box-shadow:0 0 0 7px transparent}}

.titel{margin:0;font-weight:580;letter-spacing:-.032em;line-height:.94;
  /* Das laengste Wort bestimmt die Obergrenze — so passt „Frühjahrsputz“
     in die Spalte, ohne mitten im Wort zu brechen. */
  font-size:min(clamp(3.1rem,8.6vw,10.5rem),calc(78vw / var(--wort,8)))}
.marke-logo{display:inline-block;margin:0 0 clamp(16px,2.6vh,26px)}
.marke-logo img{display:block;height:clamp(16px,1.7vw,24px);width:auto;max-width:100%}
a.marke-logo{transition:opacity .3s}
a.marke-logo:hover,a.marke-logo:focus-visible{opacity:.75;outline:none}
.wort{display:inline-block;overflow:clip;padding-bottom:.09em;margin-bottom:-.09em;vertical-align:top}
.wort>span{display:inline-block}
/* Die Großzeile ist eine Unterzeile, kein zweiter Titel: leichter als
   der Name darüber, mit Raum zum Atmen. */
.zeile{margin:clamp(16px,2.8vh,30px) 0 0;max-width:26ch;font-weight:430;letter-spacing:-.021em;line-height:1.22;
  font-size:clamp(1.3rem,2.05vw,2rem);color:color-mix(in srgb,var(--farbe) 88%,transparent)}

/* Der Fließtext trägt die Aussage. Keine Listen mehr: ein Absatz, groß
   genug zum Lesen, mit ruhigem Zeilenfall. */
.lauf{margin:clamp(18px,3vh,30px) 0 0;max-width:42ch;
  font-size:clamp(1.02rem,1.18vw,1.16rem);line-height:1.6;letter-spacing:-.008em;
  color:color-mix(in srgb,var(--farbe) 74%,transparent)}

/* Aufzählungen sind abgeschafft. Das Feld bleibt, falls eine Arbeit sie
   doch wieder braucht — angezeigt wird es nicht. */
.punkte{display:none}
.los{display:inline-block;position:relative;margin-top:clamp(18px,3vh,30px);padding:14px 0 6px;
  font-size:clamp(1rem,1.25vw,1.18rem);font-weight:520;letter-spacing:-.015em;text-decoration:none}
.los::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--akzent);
  transform-origin:left center;transition:transform .55s var(--takt)}
.los:hover::after,.los:focus-visible::after{transform:scaleX(1.12)}
.los:focus-visible{outline:2px solid var(--akzent);outline-offset:6px}

.galerie{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:clamp(14px,2vw,28px);margin-top:clamp(40px,7vh,80px);align-items:start}
.zug,.spalte{display:contents}
.bild{margin:0;border-radius:clamp(10px,1vw,16px);overflow:hidden;background:rgba(127,127,127,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 70px -30px rgba(0,0,0,.6)}
/* Viele Screenshots sind selbst fast weiss (gemessen: 246 von 255). Auf
   hellem Kapitelgrund verschwinden sie ohne Kante — darum eine feine
   Linie und ein Schatten, der sie abheben laesst. */
.hell .bild{box-shadow:0 0 0 1px rgba(16,19,26,.14),0 2px 8px rgba(16,19,26,.07),0 26px 64px -26px rgba(16,19,26,.45)}
.bild img{width:100%;height:auto}
.kopie{display:none}

/* ================= Abspann, Kontakt, Spiel ================= */

.abspann{position:relative;padding:clamp(100px,18vh,200px) clamp(20px,6vw,88px) clamp(80px,14vh,160px);
  background:var(--nacht);overflow:hidden}
.abspann::before{content:"";position:absolute;inset:-20% -10% auto;height:90%;pointer-events:none;
  background:radial-gradient(40% 40% at 30% 40%,rgba(26,115,255,.32),transparent 70%);filter:blur(30px)}
.abspann .gross{position:relative;margin:0;font-weight:540;letter-spacing:-.055em;line-height:.9;
  font-size:clamp(3rem,10vw,11rem)}
.abspann .unterzeile{position:relative;margin:clamp(18px,3vh,30px) 0 0;color:rgba(255,255,255,.6);font-size:clamp(1rem,1.3vw,1.2rem)}

.kontakt{position:relative;display:grid;gap:clamp(36px,5vw,90px)}
@media (min-width:900px){.kontakt{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.kontakt-text h2{margin:0;font-weight:540;letter-spacing:-.05em;line-height:.92;font-size:clamp(2.6rem,6vw,6rem)}
.kontakt-text p{margin:clamp(16px,2.4vh,24px) 0 0;max-width:30ch;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.45;color:rgba(255,255,255,.66)}

/* Das Formular: eine Glasplatte, ueber die ein Lichtfleck dem Zeiger folgt. */
.formular{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vh,34px) clamp(18px,2vw,28px);
  padding:clamp(22px,3.4vw,48px);border-radius:clamp(18px,2vw,28px);isolation:isolate;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.8)}
.formular::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,30%) var(--gy,0%),rgba(26,115,255,.22),transparent 60%);
  opacity:var(--glanz,.6);transition:opacity .5s var(--takt)}
.formular::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(300px circle at var(--gx,30%) var(--gy,0%),rgba(110,162,255,.9),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.themen{grid-column:1 / -1;margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:10px}
.themen legend{width:100%;margin-bottom:12px;font-size:.72rem;font-weight:520;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:11px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.18);
  font-size:.95rem;color:rgba(255,255,255,.78);transition:background .35s var(--takt),color .35s,border-color .35s,transform .35s var(--takt)}
.chip:hover span{border-color:rgba(255,255,255,.45);transform:translateY(-1px)}
.chip input:checked+span{background:#1A73FF;border-color:#1A73FF;color:#fff;box-shadow:0 10px 30px -10px rgba(26,115,255,.8)}
.chip input:focus-visible+span{outline:2px solid #6EA2FF;outline-offset:3px}

.feld{position:relative}
.feld.breit{grid-column:1 / -1}
.feld input,.feld textarea{width:100%;padding:26px 0 12px;border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;
  background:transparent;color:#fff;font:inherit;font-size:clamp(1.05rem,1.3vw,1.25rem);outline:none;resize:vertical}
.feld textarea{min-height:130px;line-height:1.5}
.feld label{position:absolute;left:0;top:26px;font-size:clamp(1.05rem,1.3vw,1.25rem);color:rgba(255,255,255,.45);pointer-events:none;
  transform-origin:left top;transition:transform .45s var(--takt),color .3s}
.feld input:focus+label,.feld input:not(:placeholder-shown)+label,
.feld textarea:focus+label,.feld textarea:not(:placeholder-shown)+label{transform:translateY(-24px) scale(.72);color:rgba(255,255,255,.7)}
/* Die Linie fuellt sich beim Fokus von links mit Blau. */
.feld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#1A73FF,#6EA2FF,#19C8FF);transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--takt)}
.feld:focus-within::after{transform:scaleX(1)}
.feld.falsch::after{transform:scaleX(1);background:#FF5A6E}

.absenden{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:6px}
.absenden button{position:relative;overflow:hidden;border:0;cursor:pointer;padding:20px 40px;border-radius:99px;
  background:#fff;color:var(--nacht);font:inherit;font-size:1.1rem;font-weight:560;letter-spacing:-.01em;
  transition:transform .4s var(--takt),box-shadow .4s var(--takt)}
.absenden button::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1A73FF,#19C8FF);
  transform:translateX(-101%);transition:transform .6s var(--takt)}
.absenden button span{position:relative;transition:color .4s}
.absenden button:hover,.absenden button:focus-visible{transform:translateY(-2px);box-shadow:0 18px 50px -14px rgba(26,115,255,.9);outline:none}
.absenden button:hover::before,.absenden button:focus-visible::before{transform:none}
.absenden button:hover span,.absenden button:focus-visible span{color:#fff}
.formular.sendet button::before{transform:translateX(-30%);animation:laden 1.1s linear infinite}
.formular.sendet button span{color:#fff}
@keyframes laden{to{transform:translateX(30%)}}
.formular.gesendet button{pointer-events:none;background:#19D27A}
.formular.gesendet button::before{display:none}
.hinweis{margin:0;max-width:36ch;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.45)}
.hinweis a{color:rgba(255,255,255,.7)}
.meldung{grid-column:1 / -1;margin:0;min-height:1.4em;font-size:1rem}
.meldung[data-zustand="ok"]{color:#2BE08A}
.meldung[data-zustand="fehler"]{color:#FF7A8A}
@media (max-width:640px){.formular{grid-template-columns:1fr}}

/* Das Spiel ganz am Ende — kein Fenster, sondern eine Landschaft ueber die
   ganze Breite: oben Nachthimmel in der Farbe der Seite, darunter der Hang,
   unten blendet der Schnee wieder in die Nacht aus. */
.spiel{position:relative;padding:0;background:var(--nacht)}
.piste{position:relative;width:100%;height:max(620px,100svh);background:#F4F7FC}
#ski{display:block;width:100%;height:100%;touch-action:none;outline:none}
/* Beim Tippen zum Lenken darf auf dem Handy nichts markiert werden. */
.piste,.piste *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#ski:focus-visible{box-shadow:inset 0 0 0 2px rgba(110,162,255,.6)}
.spiel-kopf{position:absolute;z-index:2;left:clamp(20px,6vw,88px);right:clamp(20px,6vw,88px);top:clamp(26px,5svh,56px);pointer-events:none}
.spiel-kopf h2{margin:0;font-weight:540;letter-spacing:-.05em;line-height:.95;font-size:clamp(1.9rem,3.6vw,3.4rem)}
.spiel-kopf p{margin:10px 0 0;color:rgba(255,255,255,.6);font-size:clamp(.92rem,1.1vw,1.05rem)}
.piste-ui{position:absolute;z-index:2;right:clamp(54px,7vw,110px);top:clamp(28px,5.4svh,60px);display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  pointer-events:none;font-size:.82rem;font-weight:520;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.piste-ui b{font-weight:600;letter-spacing:-.03em;color:#fff}
.piste-ui .punkte-anzeige b{font-size:clamp(1.8rem,3vw,2.6rem)}
.piste-ui .rekord-anzeige b{font-size:1rem}
@media (max-width:640px){.piste-ui{top:auto;bottom:16%;right:20px}.piste-ui,.piste-ui b{color:#10131A}.piste-ui{color:rgba(16,19,26,.55)}}
.piste-start{position:absolute;z-index:3;left:50%;top:58%;transform:translate(-50%,-50%);border:0;cursor:pointer;
  padding:20px 38px;border-radius:99px;background:#10131A;color:#fff;font:inherit;font-size:1.1rem;font-weight:560;white-space:nowrap;
  box-shadow:0 20px 60px -20px rgba(16,19,26,.7);transition:transform .4s var(--takt),background .3s}
.piste-start:hover,.piste-start:focus-visible{transform:translate(-50%,-50%) scale(1.04);outline:none;background:#1A73FF}
.piste-start[hidden]{display:none}
/* Der Fuss ist Schnee: der Hang laeuft ohne Kante in ihn aus. */
.fuss{background:#F4F7FC;color:#10131A;padding:clamp(30px,6vh,70px) clamp(20px,6vw,88px) clamp(30px,5vh,50px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:20px 40px}
.fuss-name{margin:0;font-weight:540;letter-spacing:-.04em;font-size:clamp(1.4rem,2.2vw,2rem)}
.fuss .rechtliches{border-top:0;padding-top:0}
.fuss .rechtliches a{color:rgba(16,19,26,.6)}
.fuss .rechtliches a:hover,.fuss .rechtliches a:focus-visible{color:#10131A}
html.im-reel.spielt .leiste,html.spielt .leiste{opacity:0;pointer-events:none}
.rechtliches{display:flex;flex-wrap:wrap;gap:10px clamp(22px,3vw,40px);
  padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.rechtliches a{position:relative;padding:12px 0 6px;font-size:.92rem;color:rgba(255,255,255,.6);text-decoration:none;transition:color .4s var(--takt)}
.rechtliches a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .5s var(--takt)}
.rechtliches a:hover,.rechtliches a:focus-visible{color:#fff;outline:none}
.rechtliches a:hover::after,.rechtliches a:focus-visible::after{right:0}

.wege{display:flex;flex-wrap:wrap;gap:4px clamp(20px,2.4vw,34px);margin:0}
/* Eine Zeile unter den Knoepfen, fuer das, was kein Knopf ist —
   etwa eine Fassung, die es nur ueber TestFlight gibt. */
/* Die Fußnote unter den Knöpfen: klein, aber lesbar. */
.hinweis{margin:clamp(12px,1.6vh,20px) 0 0;font-size:clamp(.84rem,.98vw,.92rem);
  line-height:1.5;letter-spacing:0;opacity:.72}
.bewegt .hinweis{--t:clamp(0,calc((var(--ein,0) - .8) * 6),1);opacity:calc(var(--t) * .72);
  transform:translateY(calc((1 - var(--t)) * 16px))}
.k-bahn .text .hinweis{grid-column:2;justify-self:start}
.bewegt .wege{--t:clamp(0,calc((var(--ein,0) - .76) * 6),1);opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 22px))}
.bewegt .wege .los{opacity:1;transform:none}
.bewegt .k-bahn .text .wege{grid-column:2;grid-row:5;justify-self:start}

/* ================= Leiste: die Kapitelpunkte ================= */

.leiste{position:fixed;z-index:20;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  opacity:0;pointer-events:none;transition:opacity .5s var(--takt);--fg:255,255,255}
html.im-reel .leiste{opacity:1;pointer-events:auto}
.leiste.auf-hell{--fg:16,19,26}
.leiste a{display:flex;align-items:center;gap:10px;padding:6px 0;text-decoration:none;color:rgb(var(--fg))}
.leiste .name{font-size:.74rem;font-weight:520;letter-spacing:.02em;white-space:nowrap;
  opacity:0;transform:translateX(8px);transition:opacity .35s var(--takt),transform .45s var(--takt);
  padding:5px 10px;border-radius:99px;background:rgba(var(--fg),.08);backdrop-filter:blur(8px)}
.leiste .name b{font-weight:520;color:var(--akzent);margin-right:4px}
.leiste .punkt{display:grid;place-items:center;width:22px;height:22px}
.leiste .punkt i{display:block;width:6px;height:6px;border-radius:6px;background:rgba(var(--fg),.4);
  transition:height .5s var(--takt),width .5s var(--takt),background .4s;position:relative;overflow:hidden}
.leiste a:hover .name,.leiste a:focus-visible .name,.leiste a[aria-current] .name{opacity:1;transform:none}
.leiste a:focus-visible{outline:none}
.leiste a:focus-visible .punkt i{outline:2px solid var(--akzent);outline-offset:3px}
.leiste a[aria-current] .punkt i{width:3px;height:44px;background:rgba(var(--fg),.2)}
.leiste a[aria-current] .punkt i::after{content:"";position:absolute;inset:0;background:var(--akzent);
  transform-origin:top center;transform:scaleY(var(--lp,0))}
@media (max-width:899px){
  .leiste{right:4px;gap:0}
  .leiste .name{display:none}
  .leiste a[aria-current] .punkt i{height:28px}
}

/* =================================================================
 * Ab hier: Bewegung. Nur mit .bewegt (Skript laeuft, keine Ruhebitte).
 * ================================================================= */

.bewegt .spur{height:calc(var(--strecke,3) * 100svh)}
.bewegt .szene{position:sticky;top:0;height:100svh;padding:0;overflow:clip}
.bewegt .galerie{margin:0;display:block;position:absolute}
.bewegt .zug{display:flex}
.bewegt .spalte{display:flex}
.bewegt .kopie{display:block}
.bewegt .bild img{height:100%;object-fit:cover;object-position:top center}

/* Der Text: links, senkrecht mittig. Woerter steigen aus ihrer Zeile. */
.bewegt .text{position:absolute;left:clamp(20px,6vw,96px);top:50%;transform:translateY(-50%);
  width:min(44vw,46rem);max-width:none}
.bewegt .wort>span{--t:clamp(0,calc((var(--ein,0) - .42 - var(--w) * .07) * 4),1);
  transform:translateY(calc((1 - var(--t)) * 108%)) rotate(calc((1 - var(--t)) * 6deg));transform-origin:left bottom}
.bewegt .marke-logo,.bewegt .kopf,.bewegt .zeile,.bewegt .lauf,.bewegt .los{--t:clamp(0,calc((var(--ein,0) - var(--d,.62)) * 6),1);
  opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 22px))}
.bewegt .marke-logo{--d:.46}.bewegt .kopf{--d:.5}.bewegt .zeile{--d:.62}.bewegt .lauf{--d:.68}.bewegt .los{--d:.76}
.bewegt .punkte li{--t:clamp(0,calc((var(--ein,0) - .66 - min(var(--j),4) * .04) * 7),1);
  opacity:var(--t);transform:translateX(calc((1 - var(--t)) * -18px))}
.bewegt .punkte li::before{transform:scaleX(var(--t));transform-origin:left center}
/* Tastatur schlaegt Choreografie: Fokus zeigt immer den Endzustand. */
.bewegt .text:focus-within .kopf,.bewegt .text:focus-within .zeile,.bewegt .text:focus-within .lauf,
.bewegt .text:focus-within .los,.bewegt .text:focus-within .punkte li,.bewegt .text:focus-within .wort>span{opacity:1;transform:none}

/* Der Akzentschein wandert mit. */
.bewegt .schein{transform:translate3d(calc(var(--p,0) * -14%),calc(var(--p,0) * 8% - 4%),0) scale(calc(.9 + var(--ein,0) * .2));
  opacity:var(--ein,0)}

/* ---------- 1  KIPPEN ----------
   Ein Bild steht auf, dreht sich in den Raum, die anderen faechern dahinter aus. */
.bewegt .k-kippen .galerie{right:clamp(16px,4vw,64px);top:0;bottom:0;width:min(54vw,980px);perspective:1500px;
  transform-style:preserve-3d}
.bewegt .k-kippen .bild{position:absolute;left:50%;top:50%;width:100%;
  --auf:clamp(0,calc(var(--ein,0) * 1.5 - .35),1);
  --k:clamp(0,calc((var(--p,0) - .1) * 2),1);
  transform-style:preserve-3d;will-change:transform}
.bewegt .k-kippen .bild:nth-child(1){z-index:3;
  transform:translate(-50%,-50%)
    rotateX(calc((1 - var(--auf)) * 62deg - var(--my) * 4deg))
    rotateY(calc(-18deg + var(--p,0) * 26deg + var(--mx) * 7deg))
    translateZ(calc(var(--k) * 60px)) scale(calc(.78 + var(--auf) * .22));
  opacity:calc(var(--auf) * 1.4)}
.bewegt .k-kippen .bild:nth-child(n+2){width:78%;z-index:2;
  --sx:calc((var(--r) - .5) * 2);
  transform:translate(-50%,-50%)
    translate(calc(var(--k) * (var(--i) - 1.5) * 80%), calc(var(--k) * (var(--i) - 1.5) * 120%))
    rotateY(calc(-18deg + var(--p,0) * 26deg + var(--mx) * 4deg))
    rotateZ(calc(var(--k) * var(--sx) * 8deg))
    translateZ(calc(var(--k) * (var(--i) - 1.5) * 220px - 60px));
  opacity:calc(var(--k) * 1.6)}
/* Ein Lichtstreif zieht ueber das Hauptbild, wenn es sich dreht. */
.bewegt .k-kippen .bild:nth-child(1)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%);
  transform:translateX(calc(var(--p,0) * 260% - 130%));mix-blend-mode:overlay}

/* ---------- 2  BAHN ----------
   Die Galerie faehrt seitwaerts vorbei, dahinter laeuft der Name gegenlaeufig. */
.bewegt .k-bahn .text{top:clamp(70px,13vh,130px);transform:none;width:auto;right:clamp(150px,15vw,250px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,4vw,72px);align-items:start}
.bewegt .k-bahn .text>*{grid-column:1}
.bewegt .k-bahn .text .lauf,.bewegt .k-bahn .text .punkte,.bewegt .k-bahn .text .los{grid-column:2;max-width:none}
.bewegt .k-bahn .text .lauf{grid-row:1 / span 2;align-self:end;margin:0 0 clamp(4px,.8vh,10px)}
.bewegt .k-bahn .text .punkte{grid-row:3 / span 2;align-self:start;margin:clamp(14px,2.4vh,26px) 0 0}
.bewegt .k-bahn .text .los{grid-row:5;justify-self:start}
.bewegt .k-bahn .titel{font-size:min(6.6vw,calc(96vw / var(--zeichen,12)),12svh,9rem);white-space:nowrap}
/* Kippen faechert hoechstens drei Bilder auf — mehr laufen aus dem Bild. */
.bewegt .k-kippen .bild:nth-child(n+4){display:none}
.bewegt .k-bahn .zeile{max-width:none}
.bewegt .k-bahn .galerie{left:0;right:0;bottom:clamp(30px,6vh,64px);height:min(48svh,560px)}
.bewegt .k-bahn .zug{height:100%;align-items:center;gap:clamp(18px,2.6vw,44px);padding:0 clamp(20px,6vw,96px);width:max-content;
  transform:translate3d(calc(var(--p,0) * var(--weg,0) * -1px + (1 - var(--ein,0)) * 30vw),0,0)}
.bewegt .k-bahn .bild{flex:none;height:78%;aspect-ratio:auto;
  transform:translateY(calc((var(--r) - .5) * 22%)) skewX(calc(var(--v) * -7deg)) rotate(calc((var(--q) - .5) * 3deg));
  transition:transform .5s var(--takt)}
.bewegt .k-bahn .bild.hoch{height:100%}
.bewegt .k-bahn .bild img{width:auto;height:100%}
.bewegt .k-bahn .riese{display:block;position:absolute;z-index:1;left:0;bottom:2vh;margin:0;white-space:nowrap;
  font-weight:600;letter-spacing:-.07em;line-height:.8;font-size:min(40vw,62svh);color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--akzent) 45%,transparent);
  transform:translate3d(calc(var(--p,0) * 34vw - 18vw),0,0);opacity:var(--ein,0)}

/* ---------- 3  TIEFE ----------
   Die Bilder kommen aus der Tiefe des Raums und fliegen an der Kamera vorbei. */
.bewegt .k-tiefe .text{top:auto;bottom:clamp(30px,8vh,90px);transform:none;width:min(40vw,40rem)}
.bewegt .k-tiefe .titel{font-size:clamp(3rem,7vw,8rem)}
.bewegt .k-tiefe .riese{display:block;position:absolute;z-index:1;left:50%;top:44%;margin:0;white-space:nowrap;
  font-weight:600;letter-spacing:-.07em;line-height:.8;font-size:clamp(5rem,22vw,26rem);
  color:color-mix(in srgb,var(--akzent) 16%,transparent);
  transform:translate(-50%,-50%) scale(calc(.8 + var(--p,0) * .6));filter:blur(calc(var(--p,0) * 6px))}
.bewegt .k-tiefe .galerie{inset:0;perspective:900px;perspective-origin:60% 46%;transform-style:preserve-3d}
.bewegt .k-tiefe .bild{position:absolute;left:60%;top:46%;width:min(38vw,620px);
  /* Abstand in der Tiefe: eng genug, dass immer drei, vier Bilder im Raum
     stehen — vorne scharf und hell, hinten im Dunst. */
  --z:calc(var(--p,0) * (var(--n) + 2.2) * .62 - var(--i) * .62 - .25);
  --dx:calc((var(--r) - .5) * 46vw);--dy:calc((var(--q) - .5) * 40svh);
  transform:translate(-50%,-50%) translate3d(var(--dx),var(--dy),calc(var(--z) * 1000px))
    rotateY(calc((var(--r) - .5) * -28deg + var(--mx) * 6deg)) rotateX(calc(var(--my) * -5deg));
  opacity:calc(clamp(0,(var(--z) + 3.2) * .7,1) * clamp(0,(.7 - var(--z)) * 3.5,1));
  filter:brightness(calc(.35 + clamp(0,(var(--z) + 2.6) / 2.6,1) * .65))}
.bewegt .k-tiefe .bild.hoch{width:min(19vw,320px)}

/* ---------- 4  RASTER ----------
   Eine schraege Wand aus Screenshots, die Spalten laufen gegeneinander. */
.bewegt .k-raster .galerie{top:-34%;bottom:-34%;right:-14vw;width:68vw;display:flex;gap:clamp(14px,1.8vw,28px);
  transform:perspective(1800px) rotateX(calc(26deg + var(--my) * 3deg)) rotateY(calc(-10deg + var(--mx) * 4deg)) rotateZ(-14deg);
  opacity:clamp(0,calc(var(--ein,0) * 2 - .6),1)}
.bewegt .k-raster .spalte{flex:1;flex-direction:column;gap:clamp(14px,1.8vw,28px);justify-content:center}
.bewegt .k-raster .spalte:nth-child(1){transform:translateY(calc((.5 - var(--p,0)) * 46%))}
.bewegt .k-raster .spalte:nth-child(2){transform:translateY(calc((var(--p,0) - .5) * 38% + 6%))}
.bewegt .k-raster .spalte:nth-child(3){transform:translateY(calc((.5 - var(--p,0)) * 64% - 4%))}
.bewegt .k-raster .bild img{height:auto}
.bewegt .k-raster .text{z-index:4}
.bewegt .k-raster .szene::after{content:"";position:absolute;inset:0 auto 0 0;width:58%;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,var(--grund) 52%,color-mix(in srgb,var(--grund) 0%,transparent))}

/* ---------- 5  STAPEL ----------
   Ein Kartenstapel; beim Scrollen hebt Karte um Karte ab. */
.bewegt .k-stapel .galerie{right:clamp(20px,7vw,120px);top:50%;width:min(44vw,760px);height:min(62svh,620px);transform:translateY(-50%)}
.bewegt .k-stapel .bild{position:absolute;left:50%;top:50%;width:100%;height:auto;
  --h:calc(var(--p,0) * 1.2 * (var(--n) - 1));
  --k:clamp(0,calc(var(--h) - var(--i)),1);
  --rest:max(0,calc(var(--i) - var(--h)));
  z-index:calc(50 - var(--i));
  transform:translate(-50%,-50%)
    translate(calc(var(--k) * (var(--r) - .5) * 50vw), calc(var(--k) * -118svh + var(--rest) * 22px + (1 - var(--ein,0)) * 40svh))
    rotate(calc((var(--r) - .5) * 9deg * (1 - var(--k)) + var(--k) * (var(--r) - .5) * 60deg))
    scale(calc(1 - var(--rest) * .05));
  filter:brightness(calc(1 - min(var(--rest),3) * .14))}
.bewegt .k-stapel .bild:last-child{--k:0}
.bewegt .k-stapel .bild img{height:auto}

/* ---------- 6  KARTEN ----------
   Die Mechanik des Card-Holder-Plugins: erst ein Stapel, dann faechert er
   auf; beim Scrollen hebt sich eine Karte nach der anderen, die Nachbarn
   weichen aus — wie beim Ueberfahren mit der Maus im Plugin. */
.bewegt .k-karten .galerie{right:clamp(20px,4vw,80px);top:50%;width:min(44vw,760px);height:min(66svh,620px);
  transform:translateY(-50%);transform-style:preserve-3d;perspective:1400px}
.bewegt .k-karten .bild{position:absolute;left:50%;top:50%;width:min(15vw,240px);aspect-ratio:3/4;border-radius:18px;background:#fff;
  transform-origin:50% 100%;
  --mitte:calc((var(--n) - 1) / 2);--ab:calc(var(--i) - var(--mitte));
  --fan:clamp(0,calc((var(--ein,0) - .45) * 3),1);
  --a:calc((var(--p,0) - .1) / .8 * (var(--n) - 1));
  --d:calc(var(--i) - var(--a));
  --akt:clamp(0,calc(1 - max(var(--d),calc(var(--d) * -1)) * 1.25),1);
  --weg:clamp(-1,calc(var(--d) * 3),1);
  --spalt:min(4.6vw,80px);
  transform:translate(-50%,-50%)
    rotate(calc((var(--ab) * 7deg + var(--weg) * 7deg * (1 - var(--akt))) * var(--fan)))
    translateX(calc((var(--ab) * var(--spalt) + var(--weg) * 46px * (1 - var(--akt))) * var(--fan)))
    translateY(calc(var(--akt) * -46px))
    translateZ(calc(var(--akt) * 90px - var(--i) * 2px))
    scale(calc(1 + var(--akt) * .13));
  filter:brightness(calc(1 - var(--fan) * (1 - var(--akt)) * .22));
  box-shadow:0 8px 30px rgba(16,19,26,.15),0 calc(var(--akt) * 40px) calc(var(--akt) * 80px) rgba(16,19,26,calc(var(--akt) * .3))}
.bewegt .k-karten .bild img{height:100%;object-fit:cover}

/* ---------- 7  FALTEN ----------
   Ein MacBook aus HTML fuer DuoFold: Der Deckel klappt beim Scrollen zu und
   wieder auf, zur freien Kante hin wird das Bild zu Milchglas, kurz vor dem
   Schliessen dunkelt es ab. */
.bewegt .k-falten .galerie{right:clamp(30px,6vw,110px);top:0;bottom:0;width:min(40vw,660px);display:flex;align-items:center;justify-content:center;perspective:1700px}
.mac{position:relative;width:100%;max-width:560px;margin:60px auto 160px;--zu:0;perspective:1000px;perspective-origin:50% -110%}
.bewegt .mac{max-width:none;margin:0;
  --zu-ein:clamp(0,calc((.8 - var(--ein,0)) * 3.2),1);
  --zu-weg:clamp(0,calc((.3 - max(calc(var(--p,0) - .5),calc(.5 - var(--p,0)))) / .3),1);
  --zu:max(var(--zu-ein),var(--zu-weg));
  width:76%;transform:translateY(-10%) rotateY(calc(-8deg + var(--mx) * 7deg)) rotateX(calc(var(--my) * -3deg))}
.mac-deckel{position:relative;z-index:2;width:100%;aspect-ratio:16/10.4;padding:2.1%;border-radius:2.2% 2.2% .8% .8% / 3.4% 3.4% 1.2% 1.2%;
  background:#0C0E13;box-shadow:inset 0 0 0 1.5px #3A3F4A,0 30px 80px -30px rgba(0,0,0,.7);
  transform-origin:50% 100%;transform:rotateX(calc(var(--zu) * -84deg));transform-style:preserve-3d}
/* Vorn das Display, hinten der Aluminiumdeckel: liegt der Deckel auf der
   Tastatur, sieht man von oben seine Rueckseite. */
.mac-schirm{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.mac-ruecken{position:absolute;inset:0;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  transform:rotateY(180deg) translateZ(1px);
  background:radial-gradient(60% 50% at 50% 45%,rgba(255,255,255,.35),transparent 70%),linear-gradient(180deg,#C7CCD4,#9CA2AC)}
.mac-schirm{position:relative;width:100%;height:100%;border-radius:1.2%;overflow:hidden}
.mac-desktop{position:absolute;inset:0;
  background:
    radial-gradient(140% 90% at 8% 118%,#F2D3A6 0 36%,transparent 36.4%),
    radial-gradient(130% 82% at 0% 104%,#2F7BD8 0 52%,transparent 52.4%),
    radial-gradient(120% 92% at 34% 124%,#1A9BB8 0 61%,transparent 61.4%),
    linear-gradient(160deg,#0B2B5C,#1B4F9C)}
.mac-leiste{position:absolute;inset:0 0 auto;height:3.4%;background:rgba(255,255,255,.3)}
.mac-fenster{position:absolute;border-radius:1.2% / 1.8%;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.mac-fenster i{display:block;height:5.5%;min-height:6px;background:#E8EBF0}
.mac-fenster img{display:block;width:100%;height:auto}
.mac-fenster.f0{left:6%;top:11%;width:56%}
.mac-fenster.f1{left:40%;top:34%;width:52%}
.milchglas{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--zu) * 55%),transparent calc(var(--zu) * 55% + 45%));
          mask-image:linear-gradient(to bottom,#000 calc(var(--zu) * 55%),transparent calc(var(--zu) * 55% + 45%))}
/* Kein backdrop-filter: Safari zeichnet ihn in 3D-Ebenen neben statt auf die
   Flaeche. Stattdessen liegt eine weichgezeichnete Kopie des Desktops oben. */
.milchglas .mac-desktop{inset:0;filter:blur(calc(var(--zu) * var(--zu) * 22px)) saturate(1.3) brightness(1.06)}
.milchglas::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,calc(var(--zu) * .1))}
.mac-dunkel{position:absolute;inset:0;background:#000;pointer-events:none;opacity:calc(max(0,var(--zu) - .72) * 3.2)}
/* Das Unterteil ist genau so gross wie der Deckel und liegt in derselben
   Perspektive flach vor dem Scharnier (rotateX 90° um die Oberkante) —
   so stimmen die Proportionen, und der zugeklappte Deckel deckt es exakt.
   Kein preserve-3d: beide Flaechen nutzen nur die perspective von .mac,
   das zeichnet auch Safari zuverlaessig. */
.mac-basis{position:absolute;z-index:1;left:0;right:0;top:100%;aspect-ratio:16/10.4;
  transform-origin:50% 0;transform:rotateX(90deg);border-radius:0 0 3% 3% / 0 0 4.5% 4.5%;
  background:
    linear-gradient(#16181E,#16181E) 50% 9% / 86% 50% no-repeat,
    linear-gradient(#262A32,#262A32) 50% 82% / 40% 26% no-repeat,
    linear-gradient(180deg,#B9BFC8 0%,#D5DAE1 30%,#C3C9D2 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* ---------- 8  NOTIZEN ----------
   Die Demo des Post-it-Plugins: vier beschreibbare Zettel fliegen ein. */
.notizen{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.zettel{position:relative;width:min(15vw,230px);min-width:170px;aspect-ratio:1;padding:22px 20px;outline:none;
  font:500 clamp(1rem,1.25vw,1.2rem)/1.35 Geist,Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#2A2410;
  background:linear-gradient(170deg,#FFF1A1,#FFE066 70%,#F5D24E);border-radius:2px 2px 18px 2px / 2px 2px 26px 2px;
  box-shadow:0 2px 0 rgba(0,0,0,.04),0 18px 30px -12px rgba(0,0,0,.45);cursor:text;overflow:hidden;
  transition:box-shadow .4s var(--takt),scale .4s var(--takt),rotate .4s var(--takt)}
.zettel:nth-child(2){background:linear-gradient(170deg,#FFD6E4,#FFB3CC 70%,#F59CBA)}
.zettel:nth-child(3){background:linear-gradient(170deg,#D7F7E4,#AEEBC7 70%,#94DDB3)}
.zettel:nth-child(4){background:linear-gradient(170deg,#DCE9FF,#B9D2FF 70%,#9EBEF7)}
.zettel::before{content:"";position:absolute;left:50%;top:-6px;width:70px;height:18px;margin-left:-35px;
  background:rgba(255,255,255,.45);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.zettel:hover{box-shadow:0 2px 0 rgba(0,0,0,.04),0 26px 40px -14px rgba(0,0,0,.5)}
.zettel:focus{scale:1.06;rotate:0deg!important;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 30px 50px -16px rgba(0,0,0,.55)}
.zettel.gespeichert::after{content:"gespeichert";position:absolute;right:12px;bottom:10px;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(42,36,16,.55)}
.zettel-hinweis{flex-basis:100%;margin:6px 0 0;font-size:.85rem;color:var(--leise)}
.bewegt .k-notizen .galerie{right:clamp(30px,6vw,110px);top:50%;width:min(44vw,640px);height:min(70svh,640px);transform:translateY(-50%);
  display:block}
.bewegt .k-notizen .zettel{position:absolute;width:min(17vw,250px);
  left:calc(var(--sx) * 1%);top:calc(var(--sy) * 1%);
  --t:clamp(0,calc((var(--ein,0) - .35 - var(--i) * .07) * 3.2),1);
  rotate:calc((var(--rot) + (1 - var(--t)) * 24) * 1deg);
  translate:calc(var(--mx) * (var(--i) + 1) * 4px) calc((1 - var(--t)) * 55svh + var(--p,0) * (var(--i) - 1.5) * -40px);
  opacity:var(--t)}
.bewegt .k-notizen .zettel:nth-child(1){--sx:2;--sy:4;--rot:-5}
.bewegt .k-notizen .zettel:nth-child(2){--sx:50;--sy:0;--rot:4}
.bewegt .k-notizen .zettel:nth-child(3){--sx:8;--sy:48;--rot:3}
.bewegt .k-notizen .zettel:nth-child(4){--sx:54;--sy:44;--rot:-4}
.bewegt .k-notizen .zettel-hinweis{position:absolute;left:2%;bottom:-6%;opacity:var(--ein,0)}

/* ---------- 9  TAGS ----------
   Die Demo von Titel & Tags: Sticker-Tags klatschen beim Hereinscrollen
   auf einen grossen Titel, drehen sich leicht mit dem Zeiger. */
.tt-demo{position:relative;padding:48px 40px 80px;border-radius:16px;background:#F5F3EA;color:#111}
.tt-titel{margin:0;font-weight:900;letter-spacing:-.04em;line-height:1.02;font-size:clamp(2.6rem,5.4vw,5.6rem)}
.tt-tag{display:inline-block;margin:10px 8px 0 0;padding:.4em .75em;border-radius:4px;background:var(--f);color:var(--t);
  font-weight:800;font-size:clamp(.85rem,1.2vw,1.15rem);letter-spacing:.02em;line-height:1.1;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.18);transform:rotate(var(--r));transition:filter .2s,box-shadow .3s}
.tt-tag:hover,.tt-tag:focus-visible{filter:brightness(1.08);box-shadow:0 12px 26px rgba(0,0,0,.28);outline:none}
.bewegt .k-tags .galerie{right:clamp(30px,6vw,110px);top:50%;width:min(40vw,660px);transform:translateY(-50%);display:block}
.bewegt .k-tags .tt-demo{aspect-ratio:4/3;display:flex;align-items:center;padding:6% 7%;
  transform:rotate(calc(-1deg + var(--mx) * 1.5deg)) translateY(calc((1 - var(--ein,0)) * 12svh));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.bewegt .k-tags .tt-tag{position:absolute;margin:0;left:var(--x);top:var(--y);
  --k:clamp(0,calc((var(--ein,0) - .5 - var(--i) * .06) * 5),1);
  transform:translate(-50%,-50%) rotate(calc(var(--r) * (2 - var(--k)) + var(--mx) * (var(--i) - 2.5) * 1.6deg)) scale(calc(1 + (1 - var(--k)) * 1.6));
  opacity:var(--k);transition:filter .2s,box-shadow .3s,scale .3s}
.bewegt .k-tags .tt-tag:hover,.bewegt .k-tags .tt-tag:focus-visible{scale:1.12;opacity:1}

/* ================= Schmal: Text oben, Bilder unten ================= */
@media (max-width:899px){
  .bewegt .text,.bewegt .k-bahn .text,.bewegt .k-tiefe .text{left:20px;right:44px;top:clamp(60px,9svh,90px);bottom:auto;transform:none;width:auto;display:block}
  .bewegt .titel,.bewegt .k-bahn .titel,.bewegt .k-tiefe .titel{font-size:min(clamp(2.6rem,13vw,4.6rem),calc(138vw / var(--wort,8)));white-space:normal}
  .bewegt .zeile,.bewegt .punkte li,.bewegt .lauf{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .marke-logo img{height:18px}
  .bewegt .k-bahn .galerie{height:30svh;bottom:3svh}
  .bewegt .k-raster .galerie{top:56%}
  .bewegt .k-raster .szene::after{height:64%}
  .bewegt .zeile{font-size:1.2rem}
  .bewegt .lauf{max-width:none;font-size:1.02rem;line-height:1.58;margin-top:18px}
  .bewegt .los{margin-top:10px}
  .bewegt .k-kippen .galerie{left:20px;right:20px;width:auto;top:52%;bottom:3%}
  .bewegt .k-bahn .galerie{height:38svh;bottom:4svh}
  .bewegt .k-tiefe .galerie{perspective-origin:50% 72%}
  .bewegt .k-tiefe .bild{left:50%;top:72%;width:70vw}
  .bewegt .k-tiefe .bild.hoch{width:36vw}
  .bewegt .k-raster .galerie{top:30%;bottom:-60%;right:-30vw;left:-10vw;width:auto}
  .bewegt .k-raster .szene::after{width:100%;height:56%;inset:0 0 auto 0;background:linear-gradient(180deg,var(--grund) 70%,transparent)}
  .bewegt .k-stapel .galerie{left:20px;right:20px;width:auto;top:72%;height:34svh}
  .bewegt .k-karten .galerie{left:20px;right:20px;width:auto;top:74%;height:34svh}
  .bewegt .k-notizen .galerie{left:20px;right:20px;width:auto;top:73%;height:42svh}
  .bewegt .k-tags .galerie{left:20px;right:20px;width:auto;top:72%}
  .bewegt .k-tags .tt-titel{font-size:9vw}
  .bewegt .k-notizen .zettel{width:40vw;min-width:0;font-size:.9rem;padding:16px}
  .bewegt .k-karten .bild{width:28vw;border-radius:12px;--spalt:7vw}
  .bewegt .k-falten .galerie{left:12%;right:12%;width:auto;top:52%;bottom:2%}
}

/* Die Bahn braucht unten Platz fuer die Bilder: dort weicht der Lauftext
   schon frueher, und die Bildreihe wird etwas flacher. */
@media (min-width:900px) and (max-height:1000px){
  .bewegt .k-bahn .text .lauf{align-self:center}
  .bewegt .k-bahn .galerie{height:min(44svh,520px)}
}
/* Niedrige Querformate: der Fließtext rückt enger zusammen, statt zu
   verschwinden — er trägt jetzt die Aussage. */
@media (min-width:900px) and (max-height:760px){
  .bewegt .lauf{margin-top:14px;font-size:1rem;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  .fleck,.weiterunten .maus i,.kopf .status.live::before{animation:none}
}

/* ------------------------------------------------------------------
 * Bewegung „token“ — die Geräte der App
 * Hinten das Fenster, davor das Widget, rechts das iPhone aus der
 * iOS-Fassung, oben die Menüleiste. Alles kommt beim Scrollen gestaffelt
 * aus der Tiefe und folgt leicht dem Zeiger. Animiert wird nur transform
 * und opacity.
 * ------------------------------------------------------------------ */
/* Die Flaeche steht rechts neben dem Text. Ohne diese Regel bleibt die
   Galerie oben links im Fluss und die Buehne misst null. */
.bewegt .k-token .galerie{right:clamp(20px,4vw,80px);top:50%;
  width:min(46vw,620px);transform:translateY(-50%);display:block}
.tokenbuehne{position:relative;display:block;aspect-ratio:5/4}
.tk-stueck{position:absolute;margin:0;border-radius:clamp(8px,.9vw,14px);overflow:hidden;
  background:rgba(127,127,127,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 34px 80px -30px rgba(0,0,0,.85);
  opacity:var(--t,0);
  transform:translate3d(calc(var(--mx,0) * var(--w,6px)),
                        calc((1 - var(--t,0)) * 46px + var(--my,0) * var(--w,6px)),0)
            scale(calc(.9 + var(--t,0) * .1))}
.tk-stueck img{display:block;width:100%;height:auto}
/* Jedes Stück kommt etwas später als das davor. */
.bewegt .k-token .tk-stueck{--t:clamp(0,calc((var(--ein,0) - .12 - var(--i) * .09) * 4),1)}

/* Das Hauptfenster trägt die Szene. */
.tk-fenster{left:0;top:50%;width:84%;transform-origin:50% 50%;
  margin-top:-26%;--w:7px}
/* Das Widget schiebt sich rechts unten davor. */
.tk-widget{right:0;bottom:4%;width:46%;z-index:3;--w:14px}
/* Das iPhone steht rechts, hochkant, und ragt oben heraus. */
.tk-phone{right:13%;top:-3%;width:19%;z-index:4;border-radius:clamp(12px,1.4vw,22px);--w:20px}
/* Die Menüleiste ist nur ein Streifen, oben links. */
.tk-leiste{left:2%;top:2%;width:24%;z-index:5;--w:26px;
  border-radius:7px;box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}

@media (max-width:899px){
  .tokenbuehne{aspect-ratio:4/3}
  .tk-fenster{width:92%;margin-top:-30%}
  .tk-widget{width:52%;bottom:2%}
  .tk-phone{width:22%;top:-2%;right:3%}
  .tk-leiste{width:30%;top:0;left:2%}
}
@media (prefers-reduced-motion: reduce){
  .tk-stueck{opacity:1!important;transform:none!important;position:relative;
    width:100%!important;margin:0 0 12px!important;inset:auto!important}
  .tokenbuehne{height:auto;min-height:0}
}

/* Bei Token ist der Download die Hauptsache, der Spendenhinweis das Beiwerk —
   im Markup steht der Link aber vor den Downloads. Hier gedreht, ohne die
   Reihenfolge in allen anderen Kapiteln anzufassen. */
.k-token .wege{align-items:baseline}
.k-token .wege .los{order:1}
.k-token .wege .los:not(.laden){order:2;opacity:.72;font-size:.94em}

/* ================= Lesbarkeit: der Grund kommt zurueck =================
 * Die Bilder laufen hinter dem Text hindurch und machen ihn stellenweise
 * unlesbar. Dagegen legt sich eine Schicht aus der Grundfarbe zwischen
 * beide — auf breiten Schirmen von links her, auf schmalen von oben, weil
 * dort Text oben und Bilder unten stehen. Sie liegt ueber der Galerie und
 * unter dem Text, ist also kein Kasten, sondern ein Verlauf ins Nichts.
 */
.bewegt .galerie{z-index:1}
.bewegt .szene::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    var(--grund) 0 14%,
    color-mix(in srgb,var(--grund) 66%,transparent) 32%,
    color-mix(in srgb,var(--grund) 22%,transparent) 46%,
    transparent 56%)}
/* Das Raster bringt seinen eigenen Verlauf schon mit. Und bei der Bahn
   steht der Text oben, die Bilder laufen unten durch — dort gibt es
   nichts zu schuetzen, der Verlauf wuerde nur die ersten Bilder
   auswaschen. */
.bewegt .k-raster .szene::before,
.bewegt .k-bahn .szene::before{display:none}

@media (max-width:899px){
  .bewegt .k-bahn .szene::before{display:block}
  .bewegt .szene::before{
    background:linear-gradient(180deg,
      var(--grund) 0 38%,
      color-mix(in srgb,var(--grund) 88%,transparent) 48%,
      color-mix(in srgb,var(--grund) 44%,transparent) 57%,
      transparent 68%)}
}

/* ================= Token auf schmalen Schirmen =================
 * Das Kapitel hat den längsten Text der Seite: Titel, Zeile, drei Punkte,
 * zwei Knöpfe und eine Hinweiszeile. Die Gerätebühne stand mittig und lag
 * damit mitten in den Knöpfen. Sie hängt jetzt unten am Rand und wird
 * flacher; der Verlauf darüber reicht entsprechend tiefer, damit auch auf
 * kurzen Schirmen der Text gewinnt.
 * Dieser Block steht bewusst hinter der Lesbarkeitsschicht — sonst
 * gewönne deren allgemeine Regel.
 */
@media (max-width:899px){
  /* Die Buehne nimmt den Raum unter dem Text — nicht ein festes
     Seitenverhaeltnis, sondern was uebrig bleibt. */
  .bewegt .k-token .galerie{left:20px;right:20px;width:auto;
    top:auto;bottom:0;height:min(40svh,340px);transform:none}
  .tokenbuehne{aspect-ratio:auto;height:100%}
  .tk-fenster{width:88%;margin-top:-28%}
  .tk-widget{width:48%;bottom:4%}
  .tk-phone{width:19%;top:0;right:4%}
  .bewegt .k-token .szene::before{
    background:linear-gradient(180deg,
      var(--grund) 0 50%,
      color-mix(in srgb,var(--grund) 88%,transparent) 62%,
      color-mix(in srgb,var(--grund) 42%,transparent) 71%,
      transparent 80%)}
}

/* ================= Der Text traegt seinen Grund mit =================
 * Feste Prozente im Szenenverlauf gehen bei langen Texten oder kurzen
 * Schirmen daneben. Darum bekommt der Textblock auf schmalen Schirmen
 * seinen eigenen Rücken: Er reicht immer genau so weit wie der Text und
 * läuft an dessen Unterkante aus — gleich, wie lang er ist.
 */
@media (max-width:899px){
  .bewegt .text{
    padding:14px 20px 56px;
    margin:-14px -20px 0;
    background:linear-gradient(180deg,
      var(--grund) 0 calc(100% - 56px),
      color-mix(in srgb,var(--grund) 58%,transparent) calc(100% - 24px),
      transparent)}
}

/* ================= Schmal: zwei Takte statt Standbild =================
 * Bisher teilten sich Text und Bilder die Fläche starr: oben las man,
 * unten stand ein Streifen Bild, und beim Scrollen passierte nichts.
 * Die Scrollstrecke eines Kapitels ist aber zwei bis drei Bildschirme
 * lang — die wird jetzt genutzt.
 *
 *   Takt 1 (--p bis etwa .2)   Der Text steht, die Bilder warten dahinter.
 *   Takt 2 (ab --p .2)         Der Text zieht sich nach oben zurück, die
 *                              Bilder bekommen die ganze Bühne.
 *
 * --takt ist dabei der gemeinsame Regler. Animiert werden nur opacity
 * und transform; die Flächen selbst stehen fest.
 */
@media (max-width:899px){
  /* Zwei Regler, die sich nicht überschneiden: erst ist der Text weg,
     dann kommen die Bilder. Sonst liegt beides halbdurchsichtig
     übereinander und man sieht nichts von beidem. */
  /* Achtung: --weg ist schon vergeben (Laufweite der Bahn, Fächerung
     der Karten). Der Textregler heißt deshalb --textab. */
  .bewegt .szene{
    --textab:clamp(0,calc((var(--p,0) - .22) * 5),1);
    --takt:clamp(0,calc((var(--p,0) - .42) * 2.6),1)}

  /* Der Text samt seinem Rücken weicht nach oben — zügig und ganz. Er
     fährt dabei über die Kapiteloberkante hinaus, nicht nur in die
     Durchsichtigkeit: Sonst lägen unsichtbare Download-Knöpfe über den
     Bildern und man träfe sie beim Tippen. */
  .bewegt .text{
    opacity:calc(1 - var(--textab) * 1.15);
    transform:translateY(calc(var(--textab) * -112%))}
  .bewegt .szene::before{opacity:calc(1 - var(--textab))}

  /* Die Bilder bekommen von Anfang an mehr Fläche als bisher und rücken
     im zweiten Takt in die Mitte. */
  .bewegt .k-kippen .galerie{left:12px;right:12px;width:auto;
    top:calc(46svh - var(--takt) * 34svh);bottom:4svh}
  .bewegt .k-kippen .bild{width:100%}

  .bewegt .k-bahn .galerie{height:calc(38svh + var(--takt) * 38svh);
    bottom:calc(5svh + var(--takt) * 6svh)}

  .bewegt .k-tiefe .galerie{perspective-origin:50% calc(70% - var(--takt) * 24%)}
  .bewegt .k-tiefe .bild{top:calc(72% - var(--takt) * 26%);width:calc(70vw + var(--takt) * 14vw)}
  .bewegt .k-tiefe .bild.hoch{width:calc(36vw + var(--takt) * 10vw)}

  /* Diese vier Bühnen hängen an ihrer Mitte (translateY(-50%)) — die
     Angabe ist also der Mittelpunkt, nicht die Oberkante. */
  .bewegt .k-stapel .galerie{left:14px;right:14px;width:auto;
    top:calc(72% - var(--takt) * 22%);height:calc(34svh + var(--takt) * 22svh)}

  .bewegt .k-karten .galerie{left:14px;right:14px;width:auto;
    top:calc(74% - var(--takt) * 24%);height:calc(34svh + var(--takt) * 22svh)}
  .bewegt .k-karten .bild{width:calc(28vw + var(--takt) * 10vw)}

  .bewegt .k-notizen .galerie{left:14px;right:14px;width:auto;
    top:calc(73% - var(--takt) * 23%);height:calc(42svh + var(--takt) * 16svh)}
  .bewegt .k-notizen .zettel{width:calc(40vw + var(--takt) * 7vw)}

  .bewegt .k-tags .galerie{left:14px;right:14px;width:auto;
    top:calc(72% - var(--takt) * 22%)}
  .bewegt .k-tags .tt-titel{font-size:calc(9vw + var(--takt) * 2.4vw)}

  .bewegt .k-falten .galerie{left:6%;right:6%;width:auto;
    top:calc(48svh - var(--takt) * 30svh);bottom:3svh}

  .bewegt .k-raster .galerie{top:calc(26% - var(--takt) * 22%)}

  .bewegt .k-token .galerie{
    height:calc(min(40svh,340px) + var(--takt) * 26svh)}
}

/* Ohne Bewegung bleibt alles, wie es ist: Text oben, Bilder darunter. */
@media (max-width:899px) and (prefers-reduced-motion:reduce){
  .bewegt .text{opacity:1;transform:none}
  .bewegt .szene::before{opacity:1}
}