/* ══════════════════════════════════════════════════════════════
   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}
.entwurfs-leiste{position:sticky;top:0}

/* ── 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.
   Die Nav nimmt im Handy-Opener dieselbe zustandsgefuehrte Farbe wie
   die Worte. */
.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;
  color:var(--opener-schrift,#0E0E0E);
  transition:color .22s linear,background-color .22s linear;
  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). */
.kabine{position:absolute;inset:0}
.kabine-leiste{display:none}
.buehne-zoom{position:absolute;inset:0;will-change:transform}
.ebene{
  position:absolute;inset:0;
  background-size:cover;background-position:50% 12%;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: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;
}
.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;
}

/* ── 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}
  .wort-marke .akzent,.wort-gross .akzent{color:#E8203F}
  .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}

  .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 ─────── */
@media (prefers-reduced-motion:reduce){
  .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}
}

@media (max-width:560px){
  /* Gemessen 14.09.: Marke + drei Links + Pille passen bei 390 px nicht
     nebeneinander — die Pille wurde rechts abgeschnitten. */
  .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)}
}