/* ==========================================================================
   theshortsroom — THE ROOM
   Eine durchgehende Kamerafahrt. Jede Szene entsteht aus der vorherigen.
   Alle Bewegung ist eine reine Funktion des geglaetteten Scroll-Fortschritts;
   diese Datei liefert nur Material, Typografie und Ruhelage.
   ========================================================================== */

:root {
  --paper:      #d7e6e9;
  --field-blue: #c3d9de;
  --ink:        #111719;
  --room:       #0b1012;
  --chalk:      #eef4f5;
  --accent:     #5654c9;
  --warm:       #d9503f;

  /* Von der Engine gesetzt — treibt Text-, Linien- und Flaechenfarbe. */
  --fg:      #111719;
  --fg-soft: rgba(17, 23, 25, 0.62);
  --hair:    rgba(17, 23, 25, 0.16);
  --panel:   rgba(255, 255, 255, 0.55);

  --gut:  clamp(22px, 5vw, 104px);
  --lane: min(1560px, calc(100vw - var(--gut) * 2));

  --e-out: cubic-bezier(0.16, 0.84, 0.24, 1);
}

/* ── Basis ────────────────────────────────────────────────────────────── */

html {
  background: var(--room);
  scroll-behavior: auto;
}

body {
  /* Scroll-Anchoring verschiebt die Scrollposition eigenmaechtig, sobald sich
     Inhalt oberhalb veraendert. Auf einer scrollgetriebenen Buehne heisst das:
     derselbe Fortschritt landet nicht mehr auf derselben Geometrie. */
  overflow-anchor: none;
  margin: 0;
  background: transparent;
  color: var(--fg);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { display: block; }

img, video { display: block; max-width: 100%; }

::selection { background: var(--accent); color: #fff; }

/* ── Filmkorn + Vignette: bindet AI-Plates, Video und CSS zu einem Bild ── */

.grain,
.vignette {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.grain {
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.vignette {
  z-index: 89;
  opacity: var(--vig, 0);
  background: radial-gradient(120% 84% at 50% 46%, transparent 38%, rgba(0, 0, 0, 0.62) 100%);
}

/* ── Kopfzeile ────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 2.1vw, 30px) var(--gut);
  color: var(--fg);
  gap: 24px;
  mix-blend-mode: normal;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.028em;
  text-decoration: none;
}

.mark__glyph {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
}

.mark__glyph img,
.foot__mark img {
  width: 100%;
  height: 100%;
  /* Das Logo ist dunkel gezeichnet — im Raum kippt es per Filter auf hell. */
  filter: invert(var(--mark-invert, 0));
}

.topbar__nav {
  display: flex;
  margin-left: auto;
  gap: clamp(16px, 2.1vw, 34px);
}

.topbar__nav a {
  position: relative;
  padding: 4px 0;
  color: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  opacity: 0.72;
  text-decoration: none;
  transition: opacity 0.25s;
}

.topbar__nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--e-out);
}

.topbar__nav a:hover { opacity: 1; }
.topbar__nav a:hover::after { transform: scaleX(1); }

/* Standortanzeige: der Abschnitt, in dem man gerade steht, bleibt markiert. */
.topbar__nav a.is-current { opacity: 1; }
.topbar__nav a.is-current::after { transform: scaleX(1); }

.topbar__cta {
  padding: 10px 17px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--cta-bg, rgba(17, 23, 25, 0.94));
  color: var(--cta-fg, #fff);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.35s var(--e-out), background 0.4s;
}

.topbar__cta:hover { transform: translateY(-2px); }

/* Sobald die Buehne verlassen ist, scrollt normaler Fliesstext unter die
   Kopfzeile — dort braucht sie einen Traeger, im Raum stoert er nur. */
.topbar::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(215, 230, 233, 0.92), rgba(215, 230, 233, 0.66) 62%, transparent);
  content: "";
  opacity: 0;
  backdrop-filter: blur(10px);
  transition: opacity 0.4s var(--e-out);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
  mask-image: linear-gradient(180deg, #000 58%, transparent);
}

body.past-stage .topbar::before,
html.no-stage .topbar::before { opacity: 1; }

/* ── Bahn + Buehne ────────────────────────────────────────────────────── */

.runway {
  position: relative;
  height: var(--runway, 1200svh);
}

.stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1500px;
  perspective-origin: 50% 46%;
  transform-style: preserve-3d;
}

/* Jede Ebene ist ein bildschirmgrosser Anker; die Engine transformiert den
   Anker, das Innenleben wird per CSS gesetzt. So bleibt jede Drehung eine
   Kamerabewegung und keine Element-Verrenkung. */
.layer,
.field,
.frame-space,
.wall,
.ledger,
.gate,
.beat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* will-change nur dort, wo sich eine bildschirmgrosse Ebene als GANZES
   bewegt. Auf alles zu verteilen erzeugt dauerhaft belegte Compositor-Ebenen
   — die Transforms enthalten ohnehin translate3d und werden beim Animieren
   von selbst ausgelagert. */
.field,
.wall,
.ledger { will-change: transform; }

.sky {
  position: absolute;
  inset: -10%;
  background: var(--sky, linear-gradient(180deg, #cfe3e7, #b4ccd2));
}

/* Volumetrisches Raumlicht (i2v-Loop, additiv eingeblendet). */
.beam {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.beam__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

/* Die scroll-gescrubbte Durchfahrt. */
.scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  pointer-events: none;
}

/* Die Pausenleiste blendet genau in dem Moment aus, in dem der Videodecoder
   freigegeben und das Standbild auf Leinwand gezogen wird — stockt der
   Hauptthread dabei, ruckelt der Verlauf sichtbar. Eine eigene Ebene laesst
   ihn vom Compositor fahren, unabhaengig von dieser Last. */
.field .pause-chrome {
  will-change: opacity;
  transition-duration: 380ms;
}

/* ── DAS FELD (Hero-Animation, Richtung/Perspektive frei gesetzt) ──────── */

.field { z-index: 4; }

.field .hero {
  position: absolute;
  display: block;
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  inset: 0;
}

/* Die Original-Kopfzeile des Hero entfaellt — die Typo lebt jetzt in .type. */
.field .hero-copy { display: none; }

.field .visual-window {
  position: absolute;
  height: 100%;
  inset: 0;
  -webkit-mask-image: radial-gradient(126% 108% at 50% 44%, #000 42%, transparent 92%);
  mask-image: radial-gradient(126% 108% at 50% 44%, #000 42%, transparent 92%);
}

.field .visual-window::before { display: none; }

/* Feld frei im Raum: zentriert, skaliert, Blickachse ueber Variablen steuerbar. */
.field .scene {
  top: 50%;
  left: 50%;
  margin-top: -415px;
  margin-left: -550px;
  perspective: var(--field-persp, 1420px);
  perspective-origin: var(--field-po, 50% 42%);
  transform: translate3d(var(--field-tx, 0px), var(--field-ty, 0px), 0)
             scale(var(--field-scale, 1.62));
  transform-origin: 50% 46%;
}

.field .plane {
  transform: rotateX(var(--field-rx, 63deg))
             rotateY(var(--field-ry, -9deg))
             rotateZ(var(--field-rz, -13deg));
  transform-origin: 50% 46%;
}

/* ── TYPO ─────────────────────────────────────────────────────────────── */

.type {
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

/* Ein Beat ist eine einspaltige Grid-Bahn ueber die volle Bildbreite. Die
   Ausrichtung passiert ueber align-content und text-align, nie ueber
   justify-items — sonst schrumpfen die Zeilen auf min-content und die
   Schlagzeile bricht willkuerlich um. */
.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: stretch;
  padding: 0 var(--gut);
  opacity: 0;
  text-align: left;
}

.beat > * { pointer-events: auto; }

/* Ruhezone: ein weicher Verlauf gibt der Typo Kontrast, ohne als Kasten
   sichtbar zu werden. Er verblasst mit dem Beat, weil er dessen Kind ist. */
.beat::before {
  position: absolute;
  z-index: -1;
  inset: -10% -2%;
  background: var(--scrim, none);
  content: "";
  pointer-events: none;
}

[data-line] { /* bewusst ohne will-change: rund 40 Textbloecke als Dauerebenen sind teurer als der Nutzen */ }

.kicker,
.step {
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  color: var(--fg-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.155em;
  text-transform: uppercase;
}

.step i {
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--hair);
  font-style: normal;
  opacity: 0.75;
}

/* max-width muss ausdruecklich zurueckgesetzt werden: die uebernommene
   Hero-CSS setzt ein globales h1 { max-width: 540px }. */
.display {
  max-width: none;
  margin: 0;
  font-size: clamp(52px, 8.4vw, 152px);
  font-weight: 700;
  letter-spacing: -0.052em;
  line-height: 0.86;
}

.display--mid { font-size: clamp(40px, 5.6vw, 96px); letter-spacing: -0.044em; line-height: 0.92; }

.display__l {
  display: block;
  transform-origin: 0 50%;
}

.display__l.is-dim { opacity: 0.72; }

.head {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 78px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.lede {
  max-width: 46ch;
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  color: var(--fg-soft);
  font-size: clamp(15px, 1.18vw, 19px);
  line-height: 1.52;
}

.body {
  max-width: 44ch;
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  color: var(--fg-soft);
  font-size: clamp(14px, 1.02vw, 16.5px);
  line-height: 1.62;
}

.meta {
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  color: var(--fg-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
}

.hint {
  display: flex;
  align-items: center;
  margin: clamp(26px, 3vw, 44px) 0 0;
  color: var(--fg-soft);
  font-size: 10.5px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hint span {
  display: block;
  width: 34px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: hint 2.6s var(--e-out) infinite;
}

@keyframes hint {
  0%, 100% { transform: scaleX(0.25); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* Beat-Ausrichtung + Ruhezone je Szene. */

.beat--field {
  --scrim: linear-gradient(97deg,
      rgba(221, 235, 238, 0.97) 0%, rgba(221, 235, 238, 0.9) 24%,
      rgba(221, 235, 238, 0.52) 44%, transparent 64%);
}

/* Die helle Ruhezone des Einstiegs muss vor dem Text verschwinden — im
   dunklen Raum wuerde sie sonst als milchiger Fleck stehen bleiben. */
.beat--field::before { opacity: var(--field-scrim, 1); }

.beat--enter {
  text-align: center;
  --scrim: radial-gradient(58% 42% at 50% 50%, rgba(5, 9, 11, 0.82), transparent 78%);
}

.beat--intake,
.beat--lock,
.beat--cut {
  --scrim: linear-gradient(96deg,
      rgba(5, 9, 11, 0.9) 0%, rgba(5, 9, 11, 0.62) 26%, transparent 50%);
}

.beat--wall {
  align-content: end;
  /* Haelt die Textzone ueber der Zeitleiste frei. */
  padding-bottom: clamp(112px, 17vh, 178px);
  --scrim: linear-gradient(0deg,
      rgba(4, 8, 9, 0.96) 0%, rgba(4, 8, 9, 0.9) 14%,
      rgba(4, 8, 9, 0.42) 30%, transparent 46%);
}

.beat--ledger {
  align-content: start;
  padding-top: clamp(76px, 11vh, 138px);
  --scrim: linear-gradient(178deg,
      rgba(4, 8, 9, 0.93) 0%, rgba(4, 8, 9, 0.7) 26%, transparent 52%);
}

.beat--gate { text-align: center; }

/* Schmale Textspalte neben dem Frame — die Kopfzeile darf nie darunterlaufen. */
.beat--intake .head,
.beat--lock .head,
.beat--cut .head { max-width: min(12ch, 30vw); font-size: clamp(30px, 3.8vw, 62px); }

.beat--intake .step, .beat--lock .step, .beat--cut .step,
.beat--intake .body, .beat--lock .body, .beat--cut .body { max-width: min(32ch, 30vw); }

.beat--wall .head   { max-width: min(20ch, 52vw); font-size: clamp(30px, 4vw, 64px); }
.beat--wall .body   { max-width: min(46ch, 42vw); }

.beat--ledger .head { max-width: min(18ch, 42vw); font-size: clamp(28px, 3.5vw, 56px); }
.beat--ledger .body { max-width: min(42ch, 36vw); }

.beat--field .lede  { max-width: min(44ch, 34vw); }
.beat--field .meta  { max-width: min(64ch, 46vw); }
.beat--field .hint  { max-width: min(24ch, 20vw); }

.beat--gate .cta    { justify-self: center; }

.checks {
  display: grid;
  width: min(48ch, 44vw);
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
  gap: 1px;
  justify-self: center;
  list-style: none;
  text-align: left;
}

.beat--gate .body { max-width: min(46ch, 42vw); justify-self: center; }

.checks li {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--hair);
  color: var(--fg);
  font-size: clamp(14px, 1.05vw, 17px);
  gap: 18px;
}

.checks li:last-child { border-bottom: 1px solid var(--hair); }

.checks i {
  color: var(--fg-soft);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.cta {
  display: inline-block;
  justify-self: start;
  margin-top: clamp(26px, 3vw, 40px);
  padding: 15px 27px;
  border-radius: 999px;
  background: var(--cta-bg, #111719);
  color: var(--cta-fg, #fff);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  transition: transform 0.4s var(--e-out);
}

.cta:hover { transform: translateY(-3px); }

/* ── DER FRAME: ein Objekt, sechs Zustaende ───────────────────────────── */

.frame-space { z-index: 10; }

.frame {
  grid-area: 1 / 1;
  position: relative;
  width: min(50vw, 820px);
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.frame__plate {
  position: absolute;
  overflow: hidden;
  border-radius: 14px;
  background: #10171a;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.07) inset,
    0 40px 90px -30px rgba(0, 0, 0, 0.85),
    0 4px 14px rgba(0, 0, 0, 0.4);
  inset: 0;
}

.frame__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Scan: eine Lichtkante, die einmal ueber das Material laeuft. */
.frame__scan {
  position: absolute;
  top: 0;
  left: var(--scan, -20%);
  width: 26%;
  height: 100%;
  opacity: var(--scan-o, 0);
  background: linear-gradient(90deg, transparent, rgba(217, 231, 235, 0.5), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Die Schichten der Kanalsprache — im Ruhezustand deckungsgleich mit dem Plate. */
.frame__strata {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.stratum {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(206, 228, 234, 0.34);
  border-radius: 14px;
  background: rgba(9, 15, 17, 0.3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 36px 70px -34px rgba(0, 0, 0, 0.92);
  inset: 0;
  opacity: 0;
}

.stratum__tag {
  position: absolute;
  top: 12px;
  left: 14px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(238, 244, 245, 0.9);
  color: #10171a;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.stratum__art { position: absolute; inset: 0; }

.art-caption {
  display: grid;
  align-content: end;
  padding: 0 0 9% 0;
  color: #fff;
  font-size: clamp(15px, 1.9vw, 30px);
  font-weight: 600;
  justify-items: center;
  letter-spacing: -0.02em;
  line-height: 1.16;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.art-caption b { color: var(--warm); }

.art-graphic::before,
.art-graphic::after {
  position: absolute;
  border: 1.5px solid rgba(240, 248, 249, 0.92);
  box-shadow: 0 0 18px rgba(190, 220, 228, 0.35);
  content: "";
}

.art-graphic::before { top: 15%; right: 9%; width: 84px; height: 84px; border-radius: 50%; }
.art-graphic::after  { bottom: 19%; left: 8%; width: 136px; height: 32px; border-radius: 7px; }

.art-sound {
  background-image: repeating-linear-gradient(90deg,
      rgba(240, 248, 249, 0.95) 0 2px, transparent 2px 9px);
  /* Eine einzige Maske: zwei Masken mit mask-composite verhalten sich zwischen
     den Praefixen nicht verlaesslich und ergaben eine bildbreite Streifenwand. */
  -webkit-mask-image: radial-gradient(42% 13% at 50% 66%, #000 38%, transparent 100%);
  mask-image: radial-gradient(42% 13% at 50% 66%, #000 38%, transparent 100%);
}

.art-rhythm {
  background-image: repeating-linear-gradient(90deg,
      rgba(126, 124, 245, 0.98) 0 4px, transparent 4px 46px);
  -webkit-mask-image: linear-gradient(180deg, transparent 60%, #000 68%, #000 86%, transparent 94%);
  mask-image: linear-gradient(180deg, transparent 60%, #000 68%, #000 86%, transparent 94%);
}

/* Jede Schicht bekommt einen eigenen Grundton — im aufgefaecherten Stapel
   soll man vier Materialien sehen, nicht vier gleiche Glasplatten. */
[data-stratum="caption"] { background: rgba(9, 15, 17, 0.22); }
[data-stratum="graphic"] { background: rgba(12, 20, 24, 0.36); }
[data-stratum="sound"]   { background: rgba(10, 16, 20, 0.44); }
[data-stratum="rhythm"]  { background: rgba(11, 13, 26, 0.5); }

/* Das Siegel: fluessig wird fest (i2v), maskiert auf die Frame-Flaeche. */
.frame__seal {
  position: absolute;
  overflow: hidden;
  border-radius: 14px;
  opacity: 0;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.frame__seal-video { width: 100%; height: 100%; object-fit: cover; }

/* Der 9:16-Ausschnitt, der ueber das Material wandert.
   Zentrierung ueber inset+margin statt translate(-50%) — die Engine besitzt
   die transform-Eigenschaft allein. */
.crop {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 92%;
  aspect-ratio: 9 / 16;
  border: 1.5px solid var(--warm);
  border-radius: 9px;
  opacity: 0;
  /* Abdunklung ausserhalb des Ausschnitts. Der Radius ist bewusst begrenzt:
     100vmax malt bei jeder Bewegung eine bildschirmgrosse Flaeche neu. */
  box-shadow: 0 0 0 1400px rgba(8, 12, 14, var(--crop-dim, 0));
  will-change: transform, opacity;
}

.crop__label {
  position: absolute;
  top: -11px;
  left: 50%;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--warm);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  transform: translateX(-50%);
}

/* Der herausgehobene Short. Liegt als Grid-Item in derselben Zelle wie der
   Frame, damit beide dieselbe Bildmitte teilen. */
.lifted {
  grid-area: 1 / 1;
  position: relative;
  width: min(23vw, 300px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: #0f1618;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.09) inset,
    0 60px 110px -34px rgba(0, 0, 0, 0.9);
  opacity: 0;
  will-change: transform, opacity;
}

/* Der Bildausschnitt folgt exakt dem 9:16-Rahmen, der im Longform eingerastet
   ist — sonst zeigt der Short eine andere Stelle als der Schnitt versprochen hat. */
.lifted__video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; }

.lifted__cap {
  position: absolute;
  bottom: 13%;
  left: 50%;
  width: 84%;
  color: #fff;
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  transform: translateX(-50%);
}

.lifted__cap b { color: var(--warm); }

.lifted__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(10, 15, 17, 0.66);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ── DIE WAND ─────────────────────────────────────────────────────────── */

.wall {
  z-index: 12;
  place-items: center;
}

.tile {
  grid-area: 1 / 1;
  position: relative;
  width: min(16vw, 214px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 15px;
  background: #0f1618;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.08) inset,
    0 48px 90px -40px rgba(0, 0, 0, 0.9);
  opacity: 0;
  will-change: transform, opacity;
}

.tile__media { position: absolute; inset: 0; }

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop, 50%) 50%;
}

.tile__meta {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: grid;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(9, 14, 16, 0.62);
  color: #fff;
  font-size: 10px;
  gap: 3px;
  letter-spacing: 0.02em;
}

.tile__meta b { font-size: 13px; font-weight: 700; letter-spacing: -0.018em; }

/* ── DAS LEDGER ───────────────────────────────────────────────────────── */

.ledger { z-index: 14; }

.col {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  width: min(23vw, 320px);
  padding: 26px 24px 28px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: linear-gradient(168deg, rgba(31, 44, 49, 0.62), rgba(12, 19, 22, 0.55));
  color: var(--fg);
  opacity: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.11) inset,
    0 40px 90px -46px rgba(0, 0, 0, 0.95);
  justify-items: start;
  will-change: transform, opacity;
}

.col.is-mid { border-color: rgba(199, 222, 228, 0.42); }

/* Der Stapel: die Saeule ist buchstaeblich aus Short-Kacheln gebaut. */
.col__stack {
  display: flex;
  width: 100%;
  height: 46px;
  margin-bottom: 20px;
  gap: 3px;
}

.col__stack i {
  display: block;
  flex: 1;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.42;
  transform-origin: 50% 100%;
}

.col.is-mid .col__stack i { opacity: 0.62; }

.col__name {
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.col__count {
  margin-top: 5px;
  color: var(--fg-soft);
  font-size: 12.5px;
  font-weight: 500;
}

.col__price {
  margin-top: 18px;
  font-size: clamp(30px, 2.9vw, 46px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}

.col__line {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  color: var(--fg-soft);
  font-size: 11.5px;
  width: 100%;
}

/* ── DIE SCHWELLE ─────────────────────────────────────────────────────── */

.gate { z-index: 8; place-items: stretch; }

/* Zwei Wandhaelften. Die Innenkante traegt eine helle Lichtlinie — nur so
   liest man im dunklen Raum ueberhaupt, dass sich hier etwas oeffnet. */
.gate__leaf {
  position: absolute;
  top: -10%;
  height: 120%;
  width: 50.4%;
  background: linear-gradient(180deg, #0e1517, #06090a);
  box-shadow: 0 0 120px 20px rgba(0, 0, 0, 0.9);
  will-change: transform;
}

.gate__leaf::after {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(226, 241, 244, 0.85) 22%,
              rgba(226, 241, 244, 0.95) 50%, rgba(226, 241, 244, 0.85) 78%, transparent);
  box-shadow: 0 0 26px 4px rgba(200, 227, 233, 0.55);
  content: "";
}

.gate__leaf--l { left: 0;  }
.gate__leaf--l::after { right: 0; }
.gate__leaf--r { right: 0; }
.gate__leaf--r::after { left: 0; }

.gate__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(58% 74% at 50% 52%, rgba(216, 236, 240, 0.95), rgba(150, 186, 195, 0.32) 42%, transparent 76%);
}

/* ── DIE ZEITLEISTE ───────────────────────────────────────────────────────
   Das Navigationsbild eines Schnittprodukts ist eine Timeline. Sie steht
   fest am unteren Rand, rastet auf den Ruhelagen der Szenen ein und laesst
   sich ziehen wie ein Abspielkopf. Farbe und Traeger folgen der Lichtreise. */

.timeline {
  position: fixed;
  z-index: 95;
  bottom: clamp(18px, 3.2vh, 34px);
  left: 50%;
  display: grid;
  width: min(760px, 66vw);
  padding: 13px 22px 15px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--surface, rgba(120, 140, 145, 0.3));
  color: var(--fg);
  gap: 11px;
  justify-items: center;
  opacity: 0;
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.7);
  transform: translate3d(-50%, 14px, 0);
  transition: opacity 0.6s var(--e-out), transform 0.6s var(--e-out);
  will-change: opacity, transform;
}

.timeline.is-live { opacity: 1; transform: translate3d(-50%, 0, 0); }
body.past-stage .timeline { opacity: 0; transform: translate3d(-50%, 14px, 0); pointer-events: none; }

.timeline__label {
  display: flex;
  align-items: baseline;
  font-size: 11.5px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.timeline__label i {
  font-size: 10px;
  font-style: normal;
  opacity: 0.46;
}


.timeline__row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: clamp(10px, 1.3vw, 18px);
}

/* Transporttasten: ein Schritt zur naechsten Ruhelage. */
.timeline__nav {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  place-items: center;
  transition: opacity 0.25s, transform 0.35s var(--e-out), border-color 0.25s;
}

.timeline__nav svg { width: 15px; height: 15px; }

.timeline__nav:hover:not(:disabled) { opacity: 1; transform: scale(1.09); }
.timeline__nav:active:not(:disabled) { transform: scale(0.94); }
.timeline__nav:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; opacity: 1; }

.timeline__nav:disabled {
  cursor: default;
  opacity: 0.24;
  transform: none;
}

.timeline__rail {
  position: relative;
  min-width: 0;
  height: 26px;
  flex: 1;
  cursor: pointer;
  touch-action: none;
}

/* Die Bahn selbst — duenn, ruhig, ueber die volle Breite. */
.timeline__rail::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  opacity: 0.16;
  transform: translateY(-50%);
}

.timeline__fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
  transform: translateY(-50%) scaleX(var(--tp, 0));
  transform-origin: 0 50%;
}

/* Der Abspielkopf laeuft ueber eine volle Bahnbreite — so bleibt die
   Bewegung eine reine Transform ohne Layout. */
.timeline__travel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--tp, 0) * 100%), 0, 0);
}

.timeline__head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px var(--surface, rgba(120, 140, 145, 0.3));
  transform: translate(-50%, -50%);
}

.timeline__tick {
  position: absolute;
  top: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transform: translateX(-50%);
}

.timeline__tick::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  content: "";
  opacity: 0.46;
  transform: translate(-50%, -50%);
  transition: height 0.3s var(--e-out), opacity 0.3s;
}

.timeline__tick:hover::before,
.timeline__tick:focus-visible::before { height: 15px; opacity: 0.95; }

/* Der erreichte Abschnitt ist als Marke klar dicker und voll deckend —
   sonst waere er von einer blossen Hover-Hervorhebung nicht zu unterscheiden. */
.timeline__tick[aria-current="true"]::before {
  width: 3px;
  height: 17px;
  opacity: 1;
}
.timeline__tick:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 5px; }

/* Beschriftung erscheint erst bei Annaeherung — sonst waere die Bahn ein Zaun.
   Sie schwebt ueber dem Pult, damit sie das laufende Szenenlabel nie verdeckt. */
.timeline__tick span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 38px;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--fg);
  color: var(--cta-fg, #fff);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, 5px);
  transition: opacity 0.25s, transform 0.25s var(--e-out);
  white-space: nowrap;
}

.timeline__tick:hover span,
.timeline__tick:focus-visible span { opacity: 1; transform: translate(-50%, 0); }

.timeline__hint {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0.42;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .timeline { width: min(620px, 82vw); }
  .timeline__hint { display: none; }
}

html.no-stage .timeline { display: none; }

@media (prefers-reduced-motion: reduce) {
  .timeline { transition: none; }
}

/* ── AUSSERHALB DES RAUMS ─────────────────────────────────────────────── */

/* Draussen: derselbe Ort, nur wieder im Tageslicht. Der Uebergang von der
   Buehne darf keine Kante haben — deshalb liegt oben derselbe Lichtschein,
   mit dem der Raum sich geoeffnet hat. */
.outside {
  position: relative;
  z-index: 40;
  padding: clamp(96px, 15vh, 210px) var(--gut) clamp(40px, 6vh, 80px);
  background: var(--paper);
  color: var(--ink);
  isolation: isolate;
}

.outside__light {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: clamp(240px, 40vh, 520px);
  background:
    radial-gradient(64% 100% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 72%),
    linear-gradient(180deg, #cbdfe4 0%, rgba(215, 230, 233, 0) 100%);
  pointer-events: none;
}

.outside :is(.head, .closer__head) { color: var(--ink); }

.outside__grid {
  display: grid;
  max-width: 1560px;
  margin: 0 auto;
  gap: clamp(30px, 5vw, 90px);
  grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1.28fr);
}

.outside__grid--ledger { margin-top: clamp(70px, 11vh, 150px); }

.outside .step { color: rgba(17, 23, 25, 0.6); }
.outside .body { color: rgba(17, 23, 25, 0.66); }

.outside__head { position: sticky; top: clamp(80px, 12vh, 130px); align-self: start; }

.qa { counter-reset: qa; }

.qa details {
  padding: 20px 0;
  border-top: 1px solid rgba(17, 23, 25, 0.14);
  counter-increment: qa;
  transition: background 0.4s;
}

.qa details:last-child { border-bottom: 1px solid rgba(17, 23, 25, 0.14); }

.qa summary {
  display: flex;
  align-items: baseline;
  cursor: pointer;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 600;
  justify-content: flex-start;
  letter-spacing: -0.022em;
  list-style: none;
}

/* Nummerierung als Ordnungsraster — dieselbe Sprache wie die Schritte im Raum. */
.qa summary::before {
  flex: none;
  width: 3.6em;
  color: rgba(17, 23, 25, 0.42);
  content: "0" counter(qa);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.qa details p { margin-left: 3.6em; }

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  margin-left: auto;
  padding-left: 20px;
  color: rgba(17, 23, 25, 0.45);
  content: "+";
  font-size: 20px;
  font-weight: 400;
  transition: transform 0.35s var(--e-out);
}

.qa details[open] summary::after { transform: rotate(45deg); }

.qa p {
  max-width: 62ch;
  margin: 12px 0 0;
  color: rgba(17, 23, 25, 0.66);
  font-size: clamp(14px, 1.02vw, 16.5px);
  line-height: 1.62;
}

.ledger-detail { display: grid; gap: clamp(26px, 3.4vw, 46px); }

.ledger-detail h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ledger-detail p {
  max-width: 58ch;
  margin: 0;
  color: rgba(17, 23, 25, 0.66);
  font-size: clamp(14px, 1.02vw, 16.5px);
  line-height: 1.6;
}

.ledger-detail dl {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr auto;
}

.ledger-detail dt,
.ledger-detail dd {
  padding: 11px 0;
  border-top: 1px solid rgba(17, 23, 25, 0.12);
  margin: 0;
  font-size: 14px;
}

.ledger-detail dd { font-weight: 600; text-align: right; }

/* Der Abbinder: ein letzter grosser Satz statt eines verlaufenden Endes. */
.closer {
  max-width: 1560px;
  margin: clamp(80px, 13vh, 170px) auto 0;
  padding: clamp(44px, 6vw, 82px) 0 clamp(26px, 4vh, 54px);
  border-top: 1px solid rgba(17, 23, 25, 0.16);
  text-align: left;
}

.closer .step { color: rgba(17, 23, 25, 0.6); }

.closer__head {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(32px, 4.6vw, 76px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.closer .cta {
  --cta-bg: #111719;
  --cta-fg: #fff;
  margin-top: clamp(28px, 3.4vw, 46px);
  padding: 17px 30px;
  font-size: 14.5px;
}

.closer__note {
  margin: 18px 0 0;
  color: rgba(17, 23, 25, 0.58);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.foot {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 26px var(--gut) 34px;
  background: var(--paper);
  color: rgba(17, 23, 25, 0.7);
  border-top: 1px solid rgba(17, 23, 25, 0.13);
  font-size: 12.5px;
  gap: 26px;
  flex-wrap: wrap;
}

.foot__mark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-weight: 700;
  gap: 9px;
  letter-spacing: -0.025em;
}

.foot__mark img { width: 20px; height: 20px; }
.foot__line { margin-right: auto; }
.foot__nav { display: flex; gap: 20px; }
.foot__nav a { color: inherit; text-decoration: none; }
.foot__nav a:hover { color: var(--ink); }

/* ── Kleinere Viewports ───────────────────────────────────────────────── */

/* Zwischen 900 und 1200 px laeuft die Buehne weiter, nur enger: die
   Bahnkoordinaten skaliert die Engine, die Objektbreiten hier. */
@media (max-width: 1200px) {
  .frame  { width: min(52vw, 620px); }
  .lifted { width: min(21vw, 236px); }
  .tile   { width: min(17vw, 186px); }
  .col    { width: min(21vw, 244px); padding: 20px 18px 22px; }
  .beat--intake .head, .beat--lock .head, .beat--cut .head { max-width: min(11ch, 27vw); }
  .beat--intake .body, .beat--lock .body, .beat--cut .body,
  .beat--intake .step, .beat--lock .step, .beat--cut .step { max-width: min(28ch, 27vw); }
}

@media (max-width: 980px) {
  .topbar__nav { display: none; }
}

@media (max-width: 720px) {
  .outside__grid { grid-template-columns: 1fr; }
  .outside__head { position: static; }
  .qa summary::before { width: 2.8em; }
  .qa details p { margin-left: 0; }
}

/* ── Statischer Rueckfall ─────────────────────────────────────────────────
   Reduzierte Bewegung, fehlendes JS, schmaler oder flacher Viewport: dann
   wird aus der Buehne ein normal gesetztes Dokument. Es zeigt denselben
   Inhalt in derselben Reihenfolge — nur ohne Kamerafahrt. `display: contents`
   loest die Typo-Ebene auf, damit Text und Objekte sich verschraenken koennen. */

html.no-stage .runway { height: auto; }

html.no-stage .stage {
  position: relative;
  display: flex;
  height: auto;
  flex-direction: column;
  overflow: visible;
  padding: 0 0 clamp(50px, 8vh, 96px);
  perspective: none;
}

html.no-stage .sky { position: fixed; inset: 0; }
html.no-stage .type { display: contents; }
html.no-stage .beam,
html.no-stage .frame-space,
html.no-stage .gate,
html.no-stage .scrub { display: none; }

html.no-stage .field  { position: relative; height: min(74svh, 560px); order: 0; }
html.no-stage .beat--field  { order: 1; }
html.no-stage .beat--enter  { order: 2; }
html.no-stage .beat--intake { order: 3; }
html.no-stage .beat--lock   { order: 4; }
html.no-stage .beat--cut    { order: 5; }
html.no-stage .beat--wall   { order: 6; }
html.no-stage .wall         { order: 7; }
html.no-stage .beat--ledger { order: 8; }
html.no-stage .ledger       { order: 9; }
html.no-stage .beat--gate   { order: 10; }

html.no-stage .beat {
  position: relative;
  align-content: start;
  padding: clamp(40px, 7vh, 86px) var(--gut) 0;
  opacity: 1;
  text-align: left;
}

html.no-stage .beat::before { display: none; }
html.no-stage .beat [data-line] { opacity: 1 !important; transform: none !important; filter: none !important; }
html.no-stage .beat--enter,
html.no-stage .beat--gate { text-align: left; }
html.no-stage .checks,
html.no-stage .beat--gate .body,
html.no-stage .beat--gate .cta { justify-self: start; width: auto; max-width: 46ch; }
html.no-stage .hint { display: none; }
html.no-stage :is(.beat--intake, .beat--lock, .beat--cut, .beat--wall, .beat--ledger) :is(.head, .body) {
  max-width: 40ch;
}

html.no-stage .wall,
html.no-stage .ledger {
  position: relative;
  display: grid;
  padding: clamp(22px, 3.5vh, 40px) var(--gut) 0;
  gap: 12px;
  /* place-items: center aus der Buehnen-Ebene wuerde die Kacheln auf ihre
     Inhaltsbreite schrumpfen — und die ist null, weil alles darin absolut liegt. */
  place-items: stretch;
}

html.no-stage .wall   { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
html.no-stage .ledger { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

html.no-stage :is(.tile, .col) {
  /* Auf der Buehne liegen alle Kacheln in derselben Zelle uebereinander —
     im Dokument brauchen sie wieder eigene Rasterplaetze. */
  grid-area: auto;
  position: relative;
  width: auto;
  opacity: 1;
  transform: none !important;
}

html.no-stage .col__stack { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hint span { animation: none; }
  .topbar__cta, .cta { transition: none; }
}