/* ══════════════════════════════════════════════════════════════
   CLAUDIS — Kino-Schicht.
   Scroll-Transformation nach elypt-cinematic: ein ZUSTANDSWECHSEL
   des Inhalts, nicht Licht oder Zoom. Beim Scrollen zieht sie die
   nächste Farbe an — das ist inhaltlich wahr, so läuft ein Live.
   ══════════════════════════════════════════════════════════════ */

/* In der Kundenfassung sitzt oben die Entwurfsleiste — die fixe Kino-Nav
   rutscht darunter. Die Leiste bleibt dafür oben STEHEN: vorher scrollte sie
   weg, die Nav hing weiter 46 px darunter, und dazwischen lief der Inhalt
   durch. */
:root{--leiste-hoehe:46px;--nav-hoehe:76px}
.entwurfs-leiste{position:sticky;top:0}
/* Öffentliche Fassung (?katalog, Eintrag im X-Sale-Katalog): keine Entwurfsleiste, kein Entwurfshinweis,
   Kopf und Bühne rücken bündig nach oben. html.oeffentlich (0,1,1) schlägt :root (0,1,0). */
html.oeffentlich{--leiste-hoehe:0px}
html.oeffentlich .entwurfs-leiste,html.oeffentlich .entwurf-hinweis{display:none}
/* Öffentlich: statt des Porträt-Platzhalters (interne Notiz „erster Termin nach der Freigabe“) ihr Logo;
   das Newsletter-Formular hat kein Ziel (onsubmit return false) — öffentlich ausgeblendet, statt Adressen ins Leere zu nehmen. */
html.oeffentlich .claudi-platz{border:0;background:#0E0E0E url(bilder/logo.webp) center/58% no-repeat}
html.oeffentlich .claudi-platz-innen,html.oeffentlich .sektion-brief{display:none}

/* ══ INTRO — der Umkleide-Vorhang ════════════════════════════════
   Max am 15.09.: „da ist kein cooles Intro". Bis dahin passierte beim
   Ankommen nichts — die Verwandlung begann erst beim Scrollen, wer nur
   hinsah, sah ein Standbild.
   Alles hier ist Fläche, Verlauf und Schrift: nichts wird vergrößert,
   also bleibt der Vorhang auf jedem Bildschirm scharf. */
.intro{display:none}
html.intro-an{overflow:hidden}
html.intro-an .intro{display:block;position:fixed;inset:0;z-index:200}

.vorhang{
  position:absolute;top:0;bottom:0;width:50.6%;overflow:hidden;
  background:#B5122E;will-change:transform;
  transition:transform 1.25s cubic-bezier(.77,0,.18,1);
}
.vorhang-links{left:0;transform-origin:0 50%}
.vorhang-rechts{right:0;transform-origin:100% 50%}
/* Beim Öffnen rafft sich der Stoff zur Seite: verschieben UND stauchen */
.intro.auf .vorhang-links{transform:translateX(-100%) scaleX(.5)}
.intro.auf .vorhang-rechts{transform:translateX(100%) scaleX(.5)}
.intro.schnell .vorhang{transition-duration:.45s}

/* Stofffalten: nur Verläufe — auflösungsunabhängig */
.vorhang-stoff{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 76%,rgba(0,0,0,.36) 100%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0px,rgba(0,0,0,.13) 22px,rgba(0,0,0,.26) 34px,
      rgba(255,255,255,.07) 47px,rgba(0,0,0,0) 60px);
}
.vorhang-links .vorhang-stoff{box-shadow:inset -44px 0 60px -34px rgba(0,0,0,.5)}
.vorhang-rechts .vorhang-stoff{box-shadow:inset 44px 0 60px -34px rgba(0,0,0,.5)}

/* Die Wortmarke steht in BEIDEN Hälften, jeweils über die volle Fensterbreite
   ausgerichtet — jede Hälfte zeigt nur ihren Teil. Geht der Vorhang auf,
   reißt das Wort in der Mitte auseinander. */
.vorhang-marke{
  position:absolute;top:50%;width:100vw;margin:0;
  transform:translateY(-58%);text-align:center;white-space:nowrap;
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:125%;
  font-size:clamp(3.2rem,15vw,13rem);line-height:.9;letter-spacing:-.05em;
  color:#F4EFE7;text-transform:uppercase;
}
.vorhang-links .vorhang-marke{left:0}
.vorhang-rechts .vorhang-marke{right:0}
.vorhang-marke .maske{display:inline-block;overflow:hidden;padding:.08em .08em .02em;vertical-align:top}
.vorhang-marke .maske span{
  display:inline-block;transform:translateY(108%);
  transition:transform .85s cubic-bezier(.16,1,.3,1) calc(var(--i) * 70ms + 60ms);
}
.intro.steigt .vorhang-marke .maske span{transform:none}

.vorhang-stange{
  position:absolute;left:0;right:0;top:0;height:12px;z-index:2;
  background:
    radial-gradient(circle at 50% 70%,#CFC3AE 0 2.6px,rgba(0,0,0,0) 3.2px) 0 0 / 46px 12px repeat-x,
    linear-gradient(#1B0A0F,#2A1116);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  transition:opacity .5s ease .5s;
}
.intro.auf .vorhang-stange{opacity:0}

.intro-zeile{
  position:absolute;left:0;right:0;bottom:15vh;z-index:3;margin:0;padding:0 24px;text-align:center;
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(1.2rem,2.3vw,2rem);line-height:1.2;color:#F4EFE7;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.intro.spricht .intro-zeile{opacity:1;transform:none}
.intro.auf .intro-zeile{opacity:0;transition:opacity .25s ease}

.intro-weiter{
  position:absolute;right:18px;bottom:18px;z-index:4;
  font-family:Inter,system-ui,sans-serif;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:#F4EFE7;background:rgba(14,14,14,.22);
  border:1px solid rgba(244,239,231,.5);border-radius:999px;
  padding:0 16px;min-height:44px;cursor:pointer;
  transition:opacity .3s ease,border-color .2s ease;
}
.intro-weiter:hover{border-color:#F4EFE7}
.intro-weiter:focus-visible{outline:2px solid #F4EFE7;outline-offset:3px}
.intro.auf .intro-weiter{opacity:0;pointer-events:none}

/* ── Mini-Nav ──────────────────────────────────────────────────
   difference war hier falsch: auf MITTELHELLEM Grund wird Weiss zu
   Grau — an der Live-Seite gemessen war "IN DIE GRUPPE" halb
   verschluckt, und das ist die einzige Handlungsflaeche im Opener.
   Seit 15.09. hat sie überall eine feste Fläche — siehe unten. */
.kino-nav{
  position:fixed;top:var(--leiste-hoehe,0px);left:0;right:0;z-index:70;
  display:flex;align-items:center;gap:18px;
  padding:16px 20px;
  /* Feste Fläche auf JEDER Breite, Schrift immer creme. Am 15.09. gemessen: die
     zustandsgeführte Farbe ist für die Bildmitte berechnet, die Kopfzeile liegt
     aber über Wand und Haar — Pille 3,5:1, Marke beim schwarzen Frame 1,27:1. */
  background:rgba(14,14,14,.92);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  color:#F4EFE7;border-bottom:1px solid rgba(244,239,231,.1);
  pointer-events:none;
}
.kino-nav > *{pointer-events:auto}
/* Nach dem Opener eine feste Flaeche. Ohne sie stand dunkle Schrift auf den
   schwarzen Sektionen — im Screenshot vom 14.09. war die Nav ueber dem Fuss
   schlicht nicht mehr da; ueber dem Manifest gemessen 3,11:1. */
.kino-nav.fest{
  background:rgba(14,14,14,.92);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  color:#F4EFE7;border-bottom:1px solid rgba(244,239,231,.1);
}
/* Tippziele: gemessen 14.09. waren Marke 24 px und Pille 38 px hoch. */
.kino-nav-marke{
  font-family:Archivo,sans-serif;font-weight:900;font-size:.94rem;
  letter-spacing:.02em;text-decoration:none;color:currentColor;
  font-stretch:112%;
  min-height:44px;display:inline-flex;align-items:center;
}
.kino-nav-links{display:flex;gap:2px;margin-left:auto}
.kino-nav-links a{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:currentColor;text-decoration:none;opacity:.78;
  padding:12px 9px;min-height:44px;display:inline-flex;align-items:center;
}
.kino-nav-links a:hover,.kino-nav-links a:focus-visible{opacity:1}
.kino-pille{
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:currentColor;text-decoration:none;border:1.5px solid currentColor;border-radius:999px;
  padding:0 15px;min-height:44px;display:inline-flex;align-items:center;
  margin-left:6px;white-space:nowrap;
}

/* ── OPENER: hohe Strecke, sticky Bühne ──────────────────────── */
.opener{height:440vh;position:relative;background:#0A0A0A}
/* Die Bühne klebt UNTER der Entwurfsleiste und ist um deren Höhe kürzer.
   Vorher top:0 und 100vh — die Leiste steht aber im Fluss davor, also lag
   die Bühne bei Scrollstand 0 um 46 px zu tief: gemessen reichte sie bis
   846 px bei 800 px Fensterhöhe, Farbanzeige und Bildunterkante waren weg. */
.buehne{
  position:sticky;top:var(--leiste-hoehe,0px);
  height:calc(100vh - var(--leiste-hoehe,0px));
  height:calc(100dvh - var(--leiste-hoehe,0px));
  overflow:hidden;background:#0A0A0A;display:block;
}
/* Umkleide: auf dem Handy nur die Huelle um die Buehne (volle Flaeche). */
/* Das Bild beginnt UNTER der Nav-Leiste, sonst läge sie über dem Kopf des Models. */
.kabine{position:absolute;inset:var(--nav-hoehe,76px) 0 0 0}
.kabine-leiste{display:none}
/* Zoom und Bildlage oben verankert (15.09.): Aus der Mitte gezoomt schob sich die Oberkante beim Ankommen
   unter die Kopfleiste - Haarknoten gemessen 24 px (Handy) bis 98 px (Tablet) abgeschnitten. */
.buehne-zoom{position:absolute;inset:0;will-change:transform;transform-origin:50% 0}
.ebene{
  position:absolute;inset:0;
  background-size:cover;background-position:50% 0;background-repeat:no-repeat;
  opacity:0;will-change:opacity;
}
.ebene.erste{opacity:1}

.schleier{
  position:absolute;inset:0;pointer-events:none;
  /* Nur unten: die Farbleiste braucht dunklen Grund. */
  background:linear-gradient(to top,rgba(10,10,10,.9) 0%,rgba(10,10,10,.45) 14%,rgba(10,10,10,0) 30%);
}

/* ── Wort-Reveals ────────────────────────────────────────────── */
/* Die Wort-Kaesten spannen selbst auf die volle Breite und werden fest
   positioniert. Vorher trugen sie max-width:15em (=245 px) — gemessen am
   14.09. lief das "S" der 66-px-Wortmarke damit bis 438 px aus dem Bild. */
.worte{position:absolute;inset:var(--nav-hoehe,76px) 0 0 0;pointer-events:none}
.wort{
  position:absolute;left:22px;right:22px;top:50%;text-align:center;
  opacity:0;transform:translateY(-50%) translateY(24px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}
.wort.an{opacity:1;transform:translateY(-50%)}
/* Schriftfarbe FOLGT dem Zustand — je Frame gemessen (14.09., Textzone):
     weiss .493  rose .353  pink .312  orange .357  gruen .402  schwarz .125
   Daraus: schwarze Schrift traegt auf fuenf Frames mit 6,5:1 bis 9,7:1,
   creme nur auf dem schwarzen (5,2:1). Also schaltet das JS die Farbe um.
   mix-blend-mode:difference greift hier NICHT — .wort bildet durch opacity
   und transform einen eigenen Stapelkontext (gemessen: Text heller als Grund). */
.wort-gross{
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:104%;
  font-size:clamp(2rem,9.6vw,5.2rem);line-height:.9;letter-spacing:-.035em;
  color:var(--opener-schrift,#0E0E0E);margin:0;text-transform:uppercase;
  transition:color .22s linear;
  max-width:100%;overflow-wrap:break-word;hyphens:auto;
}
.wort-gross .akzent{color:var(--opener-akzent,#96091F);transition:color .22s linear}
.wort-klein{
  font-size:.96rem;line-height:1.5;color:var(--opener-schrift,#0E0E0E);opacity:.86;
  transition:color .22s linear;
  margin:16px auto 0;max-width:24em;
}
.wort-marke{
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:125%;
  font-size:clamp(2.7rem,16vw,7rem);line-height:.82;letter-spacing:-.05em;max-width:100%;
  color:var(--opener-schrift,#0E0E0E);margin:0;text-transform:uppercase;
  transition:color .22s linear,
             opacity .9s cubic-bezier(.16,1,.3,1) .5s,
             transform 1s cubic-bezier(.16,1,.3,1) .5s,
             letter-spacing 1.3s cubic-bezier(.16,1,.3,1) .5s;
}
.wort-marke .akzent{color:var(--opener-akzent,#96091F);transition:color .22s linear}
.wort-zusatz{
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--opener-schrift,#0E0E0E);margin:16px 0 0;font-weight:600;opacity:.78;
  transition:color .22s linear,opacity .8s ease 1s,transform .9s cubic-bezier(.16,1,.3,1) 1s;
}
/* Solange der Vorhang zu ist, wartet die Wortmarke der Bühne — sie zieht
   sich beim Öffnen zusammen und landet. */
html.intro-an:not(.vorhang-auf) .wort.leit .wort-marke{opacity:0;transform:translateY(40px);letter-spacing:.03em}
html.intro-an:not(.vorhang-auf) .wort.leit .wort-zusatz{opacity:0;transform:translateY(16px)}

/* ── Farbanzeige unten: was gerade an ist ────────────────────── */
.farbleiste{
  position:absolute;left:0;right:0;bottom:0;padding:0 22px 26px;
  display:flex;align-items:center;gap:13px;pointer-events:none;
}
.farbpunkte{display:flex;gap:7px}
.farbpunkt{
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid rgba(244,239,231,.45);background:transparent;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s;
}
.farbpunkt.an{transform:scale(1.5);border-color:transparent}
.farbname{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:rgba(244,239,231,.8);min-width:7em;
}
.scrollhinweis{
  margin-left:auto;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,239,231,.75);font-weight:600;
  animation:sinken 2.6s ease-in-out infinite;
}
@keyframes sinken{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:.85;transform:translateY(4px)}}

/* ── MANIFEST ────────────────────────────────────────────────── */
.manifest{background:var(--creme);padding:90px 0 84px}
.manifest-satz{
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:108%;
  font-size:clamp(1.85rem,7.6vw,3rem);line-height:1.02;letter-spacing:-.03em;
  margin:0 0 26px;text-wrap:balance;color:var(--schwarz);
}
.manifest-satz .still{color:var(--grau-hell,#8B8174)}
/* NUR die Fliesstexte — nicht "p". Der Satz oben ist selbst ein <p>, und
   `.manifest p` (Klasse + Element) schlug `.manifest-satz` (nur Klasse):
   gemessen 17 px und grau statt gross und schwarz, auf Handy UND Computer. */
.manifest .body{font-size:1.06rem;line-height:1.62;color:var(--grau)}

/* ── DIE ZAHL ────────────────────────────────────────────────── */
.zahlwerk{background:var(--schwarz);color:var(--creme);padding:96px 0;overflow:hidden}
/* 19vw statt 23vw: sobald die Zahl wirklich gross ist, lief sie bei 390 px
   rechts aus — .zahlwerk schneidet mit overflow:hidden still ab. */
.zahlwerk-zahl{
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:125%;
  font-size:clamp(3.6rem,19vw,10rem);line-height:.8;letter-spacing:-.055em;
  margin:0 0 6px;color:var(--kirsche-hell);font-variant-numeric:tabular-nums;
}
.zahlwerk-unter{
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(244,239,231,.55);margin:0 0 30px;font-weight:600;
}
.zahlwerk-satz{
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:108%;
  font-size:clamp(1.55rem,6.6vw,2.4rem);line-height:1.04;letter-spacing:-.028em;
  margin:0 0 20px;color:var(--creme);text-transform:uppercase;text-wrap:balance;
}
/* Gleiche Falle wie im Manifest: `.zahlwerk p` machte die Zahl 17.538
   16 px klein. Der Kino-Moment hat bis 15.09. auf keinem Geraet existiert. */
.zahlwerk .body{color:rgba(244,239,231,.74);font-size:1.02rem;line-height:1.6}

/* ── Laufband: die Zusage, immer wieder ──────────────────────── */
.laufband{
  background:var(--kirsche);color:#fff;padding:15px 0;overflow:hidden;
  border-top:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18);
}
.laufband-spur{display:flex;width:max-content;animation:laufen 26s linear infinite}
.laufband-spur span{
  font-family:Archivo,sans-serif;font-weight:900;font-stretch:112%;
  font-size:1.04rem;letter-spacing:.02em;text-transform:uppercase;
  padding:0 26px;white-space:nowrap;
}
.laufband-spur span::after{content:"·";margin-left:26px;opacity:.5}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══ COMPUTER — ab 960 px ═══════════════════════════════════════
   Das Jackenbild ist eine Collage: jede Kachel hat nur 283 x 545 px, eine
   groessere Fassung gibt es nicht (am Shop-CDN geprueft, 14.09.). Auf 1440 px
   Breite gestreckt war der Frame 5,5-fach aufgeblasen — unscharf, und von der
   Jacke war nur noch das Gesicht zu sehen.
   Deshalb am Computer die Umkleide: links die Worte auf Schwarz, rechts der
   Spiegel etwa in Originalgroesse und daneben alle sechs Farben. */
@media (min-width:960px){
  :root{--kopf-hoehe:calc(var(--leiste-hoehe) + 76px)}

  /* Nav immer mit Flaeche — sie liegt ueber Schrift UND Bild */
  .kino-nav{
    background:rgba(14,14,14,.92);
    -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
    color:#F4EFE7;border-bottom:1px solid rgba(244,239,231,.1);
    padding:16px var(--rand);
  }

  /* Die Bühne klebt schon unter der Leiste — oben bleibt nur die Nav (76 px). */
  .buehne{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    align-items:center;column-gap:clamp(32px,4vw,80px);
    padding:76px var(--rand) 0;background:#0E0E0E;
  }
  .schleier{display:none}

  .worte{position:relative;inset:auto;grid-column:1;grid-row:1;height:100%}
  .wort{left:0;right:0;text-align:left}
  .wort-marke{font-size:clamp(4rem,8.4vw,10rem);color:#F4EFE7}
  .wort-zusatz{color:#F4EFE7;font-size:.74rem;opacity:.66;margin-top:22px}
  .wort-gross{font-size:clamp(3rem,5.4vw,7rem);line-height:.9;color:#F4EFE7}
  /* #F0344F statt #E8203F: auf Schwarz 4,9:1 statt 4,3:1 */
  .wort-marke .akzent,.wort-gross .akzent{color:#F0344F}
  .wort-klein{color:#F4EFE7;margin:24px 0 0;font-size:1.14rem;max-width:26em;opacity:.8}

  .kabine{
    position:relative;inset:auto;grid-column:2;grid-row:1;
    display:flex;gap:14px;align-items:center;justify-content:center;
    height:100%;
    --spiegel:min(calc(100vh - var(--kopf-hoehe) - 90px), 640px);
  }
  .kabine .buehne-zoom{
    position:relative;inset:auto;flex:none;
    height:var(--spiegel);aspect-ratio:620 / 1181;
    transform:none !important;
    border-radius:3px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
  }
  .ebene{background-position:50% 50%}
  .kabine-leiste{
    display:flex;flex-direction:column;gap:8px;flex:none;
    height:var(--spiegel);
    width:calc((var(--spiegel) - 40px) / 6 * 620 / 1181);
  }
  .kabine-daumen{
    display:block;width:100%;flex:1 1 0;min-height:0;
    background-size:cover;background-position:50% 20%;border-radius:2px;
    opacity:.38;outline:2px solid transparent;outline-offset:2px;
    transition:opacity .3s,outline-color .3s;
  }
  .kabine-daumen.an{opacity:1;outline-color:#E8203F}
  /* Nach dem Intro leuchten die Farben einmal nacheinander auf — zeigt,
     dass hier noch etwas passiert, wenn man scrollt. */
  @keyframes daumen-zeigen{0%{opacity:.38}40%{opacity:1}100%{opacity:.38}}
  html.gelandet .kabine-daumen:not(.an){animation:daumen-zeigen .8s ease calc(var(--d,0) * 80ms) 1 both}

  .farbleiste{left:var(--rand);right:auto;padding:0 0 34px}
  .farbpunkte{display:none}
  .farbname{color:#F4EFE7;font-size:.74rem;min-width:0}
  .scrollhinweis{margin-left:28px;color:rgba(244,239,231,.55)}

  /* Manifest: der Satz gross links, die Begruendung rechts */
  .manifest{padding:150px 0 140px}
  .manifest .rand{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    column-gap:clamp(48px,6vw,120px);align-items:end;
  }
  .manifest .eyebrow{grid-column:1 / -1}
  .manifest-satz{grid-column:1;grid-row:2 / span 2;font-size:clamp(3.2rem,5.2vw,5.6rem);line-height:.98;margin:0}
  .manifest .body{grid-column:2;font-size:1.14rem;max-width:32em}
  .manifest .body:last-child{margin-bottom:0}

  /* Die Zahl ueber die ganze Breite, darunter zwei Spalten */
  .zahlwerk{padding:150px 0}
  .zahlwerk .rand{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(48px,6vw,120px);align-items:start;
  }
  .zahlwerk-zahl{grid-column:1 / -1;font-size:clamp(7rem,15vw,15.5rem);line-height:.78;margin:0 0 12px}
  .zahlwerk-unter{grid-column:1 / -1;margin-bottom:64px;font-size:.78rem}
  .zahlwerk-satz{grid-column:1;grid-row:3 / span 2;font-size:clamp(2.2rem,3.6vw,3.6rem);margin:0}
  .zahlwerk .body{grid-column:2;grid-row:3;font-size:1.14rem;max-width:34em}
  .zahlwerk .knopf{grid-column:2;grid-row:4;justify-self:start;width:auto;padding:0 34px}

  .laufband{padding:20px 0}
  .laufband-spur span{font-size:clamp(1.1rem,1.5vw,1.6rem);padding:0 38px}
  .laufband-spur span::after{margin-left:38px}
}

/* ── Reduced Motion: alles sofort da, keine Scrollstrecke, kein Intro ─ */
@media (prefers-reduced-motion:reduce){
  .intro{display:none !important}
  html.intro-an{overflow:auto}
  html.intro-an .wort.leit .wort-marke,html.intro-an .wort.leit .wort-zusatz{opacity:1;transform:none}
  .opener{height:auto}
  .buehne{position:relative;top:auto;height:88vh}
  .ebene{opacity:0}
  .ebene.erste{opacity:1}
  .wort{position:relative;left:auto;right:auto;top:auto;opacity:1;transform:none;transition:none}
  .worte{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px 86px}
  .wort:not(.leit){display:none}
  .laufband-spur{animation:none}
  .scrollhinweis{animation:none}
}

/* ══ HANDY + TABLET: die Worte stehen auf Schildern ════════════════
   Die zustandsgeführte Schriftfarbe war für den Bildausschnitt des Handys
   berechnet. Schon beim Tablet liegt das Wort über einem anderen Streifen:
   gemessen 1,53:1 (creme Schrift über dem weißen Top), auf dem Handy 4,0:1.
   Eine Farbe, die vom Bild dahinter abhängt, hält nicht über sechs Frames
   UND jede Bildschirmform. Deshalb eigene Schilder — Schwarz mit Creme,
   das Akzentwort auf Kirschrot. Streetwear-Sprache, auf jedem Frame gleich. */
@media (max-width:959px){
  .wort-marke,.wort-zusatz,.wort-klein{
    display:block;width:-moz-fit-content;width:fit-content;margin-left:auto;margin-right:auto;
    background:#0E0E0E;color:#F4EFE7;opacity:1;
  }
  .wort-marke{font-size:clamp(2.4rem,14.5vw,7rem);line-height:1;padding:.07em .18em .03em}
  .wort-marke .akzent{color:#F0344F}
  .wort-zusatz{margin-top:10px;padding:.7em 1em;letter-spacing:.28em}
  .wort-gross{
    display:inline;background:#0E0E0E;color:#F4EFE7;
    font-size:clamp(1.9rem,9vw,5rem);line-height:1.18;padding:.04em .16em .06em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
  .wort-gross .akzent{background:#B5122E;color:#F4EFE7;padding:.04em .08em .06em}
  .wort-klein{margin-top:14px;padding:.55em .8em;font-size:.92rem;max-width:22em}
}

@media (max-width:560px){
  /* Gemessen 14.09.: Marke + drei Links + Pille passen bei 390 px nicht
     nebeneinander — die Pille wurde rechts abgeschnitten. */
  :root{--nav-hoehe:70px}
  .kino-nav{gap:10px;padding:13px 16px}
  .kino-nav-links{display:none}
  .kino-nav-marke{margin-right:auto}
  .kino-pille{padding:0 14px;letter-spacing:.12em;margin-left:0}
  .farbname{min-width:6em;font-size:.62rem}
}
@media (max-width:360px){
  .kino-pille{font-size:.58rem;padding:0 11px}
  .scrollhinweis{display:none}
  .wort-gross{font-size:clamp(1.95rem,10vw,5.4rem)}
}