/* ================================================================
   JOEL BRAUN · DREHBUCH · PREMIUM
   Konzept: Ein Drehbuch, das sich beim Lesen verfilmt.
   Zwei Stimmen: Courier Prime (Skript) + Fraunces (Film).
   Eine Lichtquelle: Tungsten. Ein Tempo: langsam, deliberate.
   ================================================================ */

/* ---------- 1 · Token-System ---------- */

:root {
  /* Elevation-Palette mit Farbtemperatur (nie reines Schwarz/Weiss) */
  --bg-0: #0a0a0c;
  --bg-1: #111014;
  --bg-2: #17151b;
  --bg-3: #211e26;
  --black: #050407;          /* Schwarzbild / Letterbox */
  --ink: #e9e6df;            /* warmes Off-White */
  --muted: #a49e92;
  --hair: rgba(233, 230, 223, 0.13);
  --hair-soft: rgba(233, 230, 223, 0.07);
  --tung: #e2a55c;           /* Tungsten: die eine Lichtquelle */
  --tung-hot: #f4c98a;
  --tung-dim: rgba(226, 165, 92, 0.14);
  --paper: #f0ead9;
  --paper-ink: #191712;
  --rec: #d05548;

  --mono: "Courier Prime", "Courier New", monospace;
  --disp: "Fraunces", "Iowan Old Style", Georgia, serif;

  /* Motion-Tokens: ALLE Effekte konsumieren nur diese */
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-scene: 550ms;
  --dur-act: 900ms;
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-line: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: linear(0, 0.102 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.991 45.7%, 1.015 55%, 1.017 63.9%, 1.004 80%, 1);
  --stagger: 40ms;

  --measure: 41rem;
  --pagew: 78rem;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--bg-0);
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background:
    radial-gradient(120rem 60rem at 78% -10%, rgba(226, 165, 92, 0.05), transparent 55%),
    var(--bg-0);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

::selection { background: var(--tung); color: #171004; }

a { color: var(--ink); text-decoration-color: var(--tung); text-underline-offset: 3px; }
a:hover { color: var(--tung-hot); }

:focus-visible {
  outline: 2px solid var(--tung);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: fixed;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--tung);
  color: #171004;
  font-family: var(--mono);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 3px;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-enter);
}
.skip:focus-visible { top: 1rem; }

/* ---------- 2 · Atmosphäre: Korn, Vignette, Perforation ---------- */

/* Statisches Filmkorn als feTurbulence-Data-URI-Tile; Bewegung nur als
   steps()-Versatz des 300%-Tiles (nie Filter-Parameter animieren). */
.grain {
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .grain {
    will-change: transform;
    animation: grain-jitter 1100ms steps(1, end) infinite;
  }
  @keyframes grain-jitter {
    0%   { transform: translate3d(0, 0, 0); }
    14%  { transform: translate3d(-2.2%, 1.4%, 0); }
    28%  { transform: translate3d(1.6%, -2.4%, 0); }
    42%  { transform: translate3d(-1.2%, -1.6%, 0); }
    56%  { transform: translate3d(2.4%, 1.8%, 0); }
    70%  { transform: translate3d(-2.6%, 0.6%, 0); }
    84%  { transform: translate3d(1.2%, 2.2%, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(4, 3, 6, 0.5) 100%);
}

/* ---------- 3 · Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.5rem 1.25rem;
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--hair-soft);
}
.topbar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-name {
  font-weight: 700;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
}
.brand-sub {
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.scene-nav {
  display: flex;
  gap: 0.1rem;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.scene-nav::-webkit-scrollbar { display: none; }
.scene-nav a {
  position: relative;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 0 0.65rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  border-radius: 3px;
}
.scene-nav a b { color: var(--tung); font-weight: 700; }
.scene-nav a:hover { color: var(--ink); }
.scene-nav a::after {
  content: "";
  position: absolute;
  left: 0.65rem; right: 0.65rem; bottom: 6px;
  height: 1px;
  background: var(--tung);
  transform: scaleX(0);
  transform-origin: left;
}
.scene-nav a.active { color: var(--ink); }
.scene-nav a.active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .scene-nav a::after { transition: transform var(--dur-base) var(--spring); }
}
.timecode {
  font-size: 0.76rem;
  color: var(--tung);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Filmtransport: 1px-Fortschrittslinie unter der Topbar */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topbar::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 1px;
      background: var(--tung);
      transform: scaleX(0);
      transform-origin: left;
      animation: transport linear both;
      animation-timeline: scroll(root);
    }
    @keyframes transport { to { transform: scaleX(1); } }
  }
}

/* ---------- 4 · Skript-Grundgerüst ---------- */

#script { position: relative; }

.scene {
  position: relative;
  max-width: var(--pagew);
  margin: 0 auto;
  padding: 6.5rem 3rem 4.5rem 4.5rem;
}

/* Riesige Ghost-Folio-Nummer (Obys-Anker) */
.scene::before {
  content: attr(data-folio);
  position: absolute;
  top: 2.5rem;
  right: 1.5rem;
  z-index: -1;
  font-family: var(--disp);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: clamp(9rem, 22vw, 19rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(233, 230, 223, 0.075);
  pointer-events: none;
  user-select: none;
}

.slugline {
  position: relative;
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
}
.slugline h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  flex: 1;
  position: relative;
  white-space: nowrap;
}
.slugline h2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--tung) 0, var(--hair) 30%, var(--hair) 100%);
}
.scene-no {
  position: absolute;
  left: -3.4rem;
  top: 0.1em;
  font-weight: 700;
  font-size: 1rem;
  color: var(--tung);
}

/* Typewriter: der diegetische Signature-Effekt. JS setzt --ch + steps(n). */
.type { overflow: clip; }
.type .type-in, .fade-in-line .type-in {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
}
.slugline .type-in { --lsp: 0.07em; }
.fade-in-line .type-in { --lsp: 0.12em; }
@media (prefers-reduced-motion: no-preference) {
  .js .type .type-in,
  .js .fade-in-line .type-in {
    max-width: 0;
    overflow: clip;
    border-right: 1px solid transparent;
  }
  .js .on-screen .type .type-in,
  .js .on-screen .fade-in-line .type-in {
    animation:
      type-w calc(var(--ch, 24) * 68ms) var(--tf-type, steps(24, end)) both,
      caret-hold calc(var(--ch, 24) * 68ms) step-end both,
      caret-blink 640ms step-end calc(var(--ch, 24) * 68ms) 3 forwards;
  }
  /* Breite pro Zeichen = 1ch + letter-spacing, sonst clippt die Slugline */
  @keyframes type-w { from { max-width: 0; } to { max-width: calc(var(--ch, 24) * (1ch + var(--lsp, 0em)) + 3px); } }
  @keyframes caret-hold { from { border-right-color: var(--tung); } to { border-right-color: var(--tung); } }
  @keyframes caret-blink {
    0% { border-right-color: var(--tung); }
    50% { border-right-color: transparent; }
    100% { border-right-color: transparent; }
  }
}

.action {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: var(--measure);
  margin-bottom: 3rem;
}
.parenthetical {
  font-size: 0.85rem;
  color: var(--muted);
  margin: -2rem 0 2.4rem;
}

.transition {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-align: right;
  color: var(--muted);
  max-width: var(--pagew);
  margin: 0 auto;
  padding: 0 3rem 0 4.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .js .transition { opacity: 0; }
  .js .transition.cut { animation: hard-cut 320ms steps(3, jump-none) forwards; }
  @keyframes hard-cut {
    0% { opacity: 0; color: var(--tung); }
    60% { opacity: 1; color: var(--ink); }
    100% { opacity: 1; color: var(--muted); }
  }
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--tung);
  margin-bottom: 1rem;
}

.body-text {
  max-width: var(--measure);
  font-size: 0.98rem;
}
.body-text + .body-text { margin-top: 1.1rem; }

/* Beat: Filmstimme (Fraunces), schliesst jede Szene */
.beat {
  margin-top: 3.6rem;
  font-family: var(--disp);
  font-weight: 480;
  font-variation-settings: "opsz" 60, "SOFT" 30, "WONK" 1;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  max-width: 46rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--tung);
  text-wrap: balance;
}

/* ---------- 5 · Reveals (IntersectionObserver-Klassen, alle Browser) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .rv {
    opacity: 0;
    transform: translateY(18px);
  }
  .js .on-screen .rv {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-scene) var(--ease-enter) calc(var(--i, 0) * var(--stagger) * 2),
      transform var(--dur-scene) var(--ease-enter) calc(var(--i, 0) * var(--stagger) * 2);
  }
  /* Line-Mask: Standard-Textauftritt */
  .js .lm { overflow: clip; display: block; }
  .js .lm .lm-in { display: block; transform: translateY(112%); }
  .js .on-screen .lm .lm-in {
    transform: none;
    transition: transform calc(var(--dur-scene) + 150ms) var(--ease-line) calc(var(--i, 0) * var(--stagger) * 2);
  }
}
.lm { display: block; }
.lm-in { display: block; }

/* ---------- 6 · Szene 1 · Hero (Sticky-Bühne + Vorhang) ---------- */

.hero-track { height: 280vh; height: 280svh; }

.scene-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  max-width: none;
  margin: 0;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 4.5rem 3rem 3.6rem 4.5rem;
  background:
    radial-gradient(85rem 50rem at 12% 105%, rgba(226, 165, 92, 0.13), transparent 60%),
    radial-gradient(70rem 45rem at 95% -20%, rgba(120, 140, 190, 0.07), transparent 60%),
    var(--bg-1);
}
.scene-hero::before { content: none; }

/* Letterbox-Balken: öffnen sich beim Andrehen der Szene */
.bar {
  position: absolute;
  left: 0; right: 0;
  height: 9vh;
  background: var(--black);
  z-index: 5;
}
.bar-top { top: 0; }
.bar-bot { bottom: 0; }

.hero-inner { position: relative; z-index: 2; max-width: var(--pagew); width: 100%; }

.fade-in-line {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--tung);
  margin-bottom: 1.1rem;
}
.scene-hero .slugline { margin-bottom: 0.7rem; }
.scene-hero .action { margin-bottom: 1.7rem; }

.hero-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.hero-title {
  font-family: var(--disp);
  font-weight: 560;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: clamp(3.6rem, 11.5vw, 9rem);
  line-height: 0.93;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 1.2rem -0.04em;
  contain: layout paint;
}
.hero-title .lm { display: block; }
.hero-tagline {
  max-width: 37rem;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
}
.hero-tagline strong { color: var(--tung); font-weight: 700; letter-spacing: 0.05em; }

.hero-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.hero-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair-soft);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.hero-foot p { white-space: nowrap; }
.hero-handle a { color: var(--muted); text-decoration: none; }
.hero-handle a:hover { color: var(--tung); }
.hero-hint { color: rgba(164, 158, 146, 0.75); }
@media (prefers-reduced-motion: no-preference) {
  .hero-hint { animation: hint-pulse 2600ms var(--ease-enter) infinite; }
  @keyframes hint-pulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
  }
}

.frame-mark {
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid rgba(233, 230, 223, 0.35);
  z-index: 6;
}
.frame-mark.tl { top: calc(9vh + 14px); left: 14px; border-right: 0; border-bottom: 0; }
.frame-mark.br { bottom: calc(9vh + 14px); right: 14px; border-left: 0; border-top: 0; }
.frame-ratio {
  position: absolute;
  top: calc(9vh + 16px);
  right: 16px;
  z-index: 6;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.hero-side {
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  writing-mode: vertical-rl;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  color: rgba(164, 158, 146, 0.6);
  white-space: nowrap;
}

/* Vorhang: die Reel legt sich über die pinned Titel-Szene */
.reel {
  position: relative;
  z-index: 10;
  margin-top: -100vh;
  margin-top: -100svh;
  background: var(--bg-0);
  border-top: 1px solid var(--hair-soft);
  box-shadow: 0 -40px 90px rgba(4, 3, 7, 0.85);
  padding-top: 4rem;
}

/* ---------- 7 · Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.5rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:
      background-color var(--dur-fast) var(--ease-enter),
      color var(--dur-fast) var(--ease-enter),
      border-color var(--dur-fast) var(--ease-enter),
      box-shadow var(--dur-fast) var(--ease-enter);
  }
  .btn:active { transform: translateY(1px); }
}
.btn-solid { background: var(--tung); color: #171004; }
.btn-solid:hover { background: var(--tung-hot); color: #171004; box-shadow: 0 0 0 3px rgba(226, 165, 92, 0.25); }
.btn-ghost { border: 1px solid rgba(233, 230, 223, 0.35); color: var(--ink); }
.btn-ghost:hover { border-color: var(--tung); color: var(--tung-hot); }
.btn-lg { min-height: 56px; padding: 0 2rem; font-size: 0.95rem; }

/* ---------- 8 · Szene 2 · Logline + Character Still ---------- */

.logline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.logline-text {
  font-family: var(--disp);
  font-weight: 470;
  font-variation-settings: "opsz" 80, "SOFT" 20, "WONK" 1;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.28;
  margin-bottom: 1.6rem;
}
.logline-copy .body-text { font-size: 0.95rem; color: var(--muted); }
.logline-copy .body-text strong { color: var(--ink); }

.paper-page {
  margin-top: 2.4rem;
  background: var(--paper);
  color: var(--paper-ink);
  padding: 2rem 2.2rem 2.2rem;
  max-width: 30rem;
  box-shadow: 0 16px 44px rgba(3, 2, 5, 0.6);
  transform: rotate(-0.7deg);
  border-left: 4px solid var(--tung);
}
@media (prefers-reduced-motion: no-preference) {
  .paper-page { transition: transform var(--dur-base) var(--spring), box-shadow var(--dur-base) var(--ease-enter); }
  .paper-page:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 22px 52px rgba(3, 2, 5, 0.66); }
}
.paper-slug { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-align: center; }
.paper-paren { font-size: 0.8rem; text-align: center; color: rgba(25, 23, 18, 0.72); margin-bottom: 0.6rem; }
.paper-page blockquote p {
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  max-width: 22rem;
  margin: 0 auto;
}

.character-still { min-width: 0; position: sticky; top: 5.5rem; }
.still-frame {
  aspect-ratio: 16 / 9;
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  outline: 1px solid var(--hair);
  overflow: hidden;
  position: relative;
  background: var(--bg-2);
}
.still-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.still-tag {
  position: absolute;
  top: 10px; left: 12px;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.still-tag em { font-style: normal; color: var(--tung); }
.still-caption {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-top: 0.8rem;
  text-align: center;
}

/* ---------- 9 · Akt-Karten (Schwarzbild, gehaltener Beat) ---------- */

.act-track { height: 165vh; height: 165svh; margin: 3rem 0; }
.act-card {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  background: var(--black);
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
}
.act-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: var(--muted);
}
.act-no {
  font-family: var(--disp);
  font-weight: 340;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(7rem, 24vw, 17rem);
  line-height: 0.95;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(226, 165, 92, 0.75);
}
.act-title {
  font-family: var(--disp);
  font-weight: 500;
  font-variation-settings: "opsz" 90, "SOFT" 40, "WONK" 1;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--ink);
  margin-top: 0.6rem;
}
.act-sub {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-top: 0.9rem;
}

/* ---------- 10 · Szene 3 · True Fiction ---------- */

.scene-feature {
  background:
    linear-gradient(180deg, transparent, rgba(226, 165, 92, 0.05) 10%, rgba(226, 165, 92, 0.05) 90%, transparent),
    var(--bg-0);
}
.feature-head { max-width: 48rem; }
.feature-title {
  font-family: var(--disp);
  font-weight: 620;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: clamp(3rem, 8.5vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--tung);
  margin: 0.6rem 0 0.7rem -0.04em;
}
.feature-title .lm { display: block; }
.feature-role { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.6rem; }
.feature-role a { color: var(--muted); }
.feature-role a:hover { color: var(--tung-hot); }

.tf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 4rem;
  align-items: start;
  margin-top: 3.4rem;
}
.duty-steps {
  list-style: none;
  max-width: 36rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.duty-step {
  padding: 1.9rem 0 2rem 1.4rem;
  border-left: 1px solid var(--hair);
  position: relative;
}
.duty-step::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 100%;
  background: var(--tung);
  transform: scaleY(0);
  transform-origin: top;
}
.duty-step.active::before { transform: scaleY(1); }
@media (prefers-reduced-motion: no-preference) {
  .duty-step::before { transition: transform var(--dur-scene) var(--ease-enter); }
}
.shot-code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--tung);
  margin-bottom: 0.5rem;
}
.duty-step h4 {
  font-family: var(--disp);
  font-weight: 540;
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 0;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}
.duty-step p { font-size: 0.92rem; color: var(--muted); max-width: 30rem; }
.duty-step .shot-code + h4 + p { margin-top: 0; }

/* Monitor: sticky Video-Assist (Pudding-Muster) */
.monitor { position: sticky; top: 16vh; }
.mon-frame {
  position: relative;
  aspect-ratio: 2.39 / 1;
  background:
    radial-gradient(80% 120% at 50% 50%, var(--bg-2) 0%, var(--bg-1) 85%),
    var(--bg-1);
  border-top: 3px solid var(--black);
  border-bottom: 3px solid var(--black);
  outline: 1px solid var(--hair);
  overflow: clip;
}
.mon-take {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mon-take {
    transition: opacity var(--dur-scene) var(--ease-enter), transform var(--dur-scene) var(--ease-enter);
    transform: scale(0.985);
  }
}
.monitor[data-shot="a"] .mon-take[data-take="a"],
.monitor[data-shot="b"] .mon-take[data-take="b"],
.monitor[data-shot="c"] .mon-take[data-take="c"],
.monitor[data-shot="d"] .mon-take[data-take="d"],
.monitor[data-shot="e"] .mon-take[data-take="e"],
.monitor[data-shot="f"] .mon-take[data-take="f"] { opacity: 1; transform: none; }
.mon-code {
  font-family: var(--disp);
  font-weight: 380;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: clamp(4rem, 8vw, 7.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(226, 165, 92, 0.8);
}
.mon-word {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--muted);
}
.mon-rec {
  position: absolute;
  top: 12px; left: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.mon-rec i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rec);
}
@media (prefers-reduced-motion: no-preference) {
  .mon-rec i { animation: rec-blink 1600ms steps(2, jump-none) infinite; }
  @keyframes rec-blink { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
}
.mon-tc {
  position: absolute;
  top: 12px; right: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mon-corner { position: absolute; width: 18px; height: 18px; border: 1px solid rgba(233, 230, 223, 0.3); }
.mon-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; display: none; }
.mon-corner.tr { top: 34px; right: 10px; border-left: 0; border-bottom: 0; }
.mon-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.mon-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.mon-caption {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  color: var(--muted);
}

.kpi-eyebrow { margin-top: 4rem; }
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--hair);
  padding-top: 1.8rem;
}
.kpi { display: flex; flex-direction: column-reverse; }
.kpi dd {
  font-family: var(--disp);
  font-weight: 540;
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 0;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--tung);
}
.kpi dt {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
}

.channel-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2.6rem; }
.channel {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid rgba(233, 230, 223, 0.3);
  border-radius: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.2rem;
}
.channel::after { content: "↗"; margin-left: 0.55rem; color: var(--muted); }
.channel:hover { border-color: var(--tung); color: var(--tung-hot); }
.channel:hover::after { color: var(--tung); }
@media (prefers-reduced-motion: no-preference) {
  .channel { transition: border-color var(--dur-fast) var(--ease-enter), color var(--dur-fast) var(--ease-enter); }
  .channel::after { transition: transform var(--dur-fast) var(--ease-enter), color var(--dur-fast) var(--ease-enter); }
  .channel:hover::after { transform: translate(2px, -2px); }
}

/* ---------- 11 · Szene 4 · Credits ---------- */

.credits {
  max-width: 50rem;
  margin: 0 auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
.credit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 2.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--hair-soft);
  align-items: baseline;
}
.credit:first-child { border-top: 1px solid var(--hair-soft); }
.credit dt {
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.credit dd {
  font-family: var(--disp);
  font-weight: 500;
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 0;
  font-size: 1.2rem;
}
@media (prefers-reduced-motion: no-preference) {
  .credit dt { transition: color var(--dur-fast) var(--ease-enter); }
}
.credit:hover dt { color: var(--tung); }
.scene-credits .beat { margin-left: auto; margin-right: auto; max-width: 50rem; }
.scene-credits .credits + .beat { margin-top: 3.2rem; }

/* ---------- 12 · Szene 5 · Werdegang (Spotlight im Halbdunkel) ---------- */

.scene-spot { background: var(--bg-1); overflow: clip; }
.spot-inner { position: relative; z-index: 2; }

/* Maus-Spotlight: nur Hover-Geräte. Die Szene liegt im Halbdunkel,
   der Cursor führt das Licht (dramaturgisch: Rückblende). */
.spot-veil { display: none; }
@media (hover: hover) and (pointer: fine) {
  .spot-veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(
      52rem circle at var(--mx, 60%) var(--my, 35%),
      rgba(244, 201, 138, 0.05) 0%,
      transparent 42%,
      rgba(4, 3, 6, 0.44) 92%
    );
  }
}

.spot-hint {
  display: none;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--tung);
  margin: -1.8rem 0 2.6rem;
}
@media (hover: hover) and (pointer: fine) {
  .spot-hint { display: block; }
}

.montage {
  list-style: none;
  max-width: 48rem;
  border-top: 1px solid var(--hair);
}
.montage li {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.5rem 0 1.65rem;
  border-bottom: 1px solid var(--hair);
}
.mont-code {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--tung);
  padding-top: 0.35rem;
}
.mont-slug {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.mont-now {
  display: inline-block;
  color: var(--tung);
  border: 1px solid rgba(226, 165, 92, 0.5);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  margin-left: 0.6rem;
  letter-spacing: 0.14em;
}
.montage h4 {
  font-family: var(--disp);
  font-weight: 530;
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 0;
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  text-wrap: balance;
}
.montage p { font-size: 0.92rem; color: #b3ada1; max-width: 34rem; }

.takeaway-block { margin-top: 3rem; max-width: 48rem; }
.lead-takeaways { list-style: none; max-width: var(--measure); }
.lead-takeaways li {
  padding: 0.6rem 0 0.6rem 1.6rem;
  position: relative;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 0.95rem;
}
.lead-takeaways li::before {
  content: "▸";
  position: absolute;
  left: 0.1rem;
  color: var(--tung);
}

/* ---------- 13 · Szene 6 · Sprachen (Tag-Grading) ---------- */

.scene-day {
  background:
    radial-gradient(90rem 40rem at 50% -15%, rgba(244, 201, 138, 0.1), transparent 60%),
    var(--bg-2);
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
}
.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.5rem;
  max-width: 56rem;
}
.plain-list { list-style: none; }
.plain-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair);
}
.plain-list strong {
  font-family: var(--disp);
  font-weight: 530;
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 0;
  font-size: 1.15rem;
}
.plain-list span { color: var(--muted); font-size: 0.88rem; text-align: right; }
.trait-list { list-style: none; }
.trait-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}
.trait-list strong {
  display: block;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

/* ---------- 14 · Szene 7 · Kontakt + Endcard ---------- */

.scene-final { padding-bottom: 2.5rem; }
.contact-block { max-width: 52rem; }
.contact-title {
  font-family: var(--disp);
  font-weight: 520;
  font-variation-settings: "opsz" 120, "SOFT" 30, "WONK" 1;
  font-size: clamp(2.3rem, 5.8vw, 4.6rem);
  line-height: 1.06;
  margin-bottom: 2.2rem;
  letter-spacing: 0.002em;
}
.contact-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.contact-note { font-size: 0.82rem; color: var(--muted); margin-top: 1.2rem; }
.contact-social {
  list-style: none;
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.contact-social a {
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.contact-social a:hover { color: var(--tung-hot); }

.fade-out-line {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--tung);
  text-align: right;
  margin-top: 5rem;
}

.endcard {
  border-top: 1px solid var(--hair-soft);
  text-align: center;
  padding: 4.5rem 1.5rem 5rem;
  background: var(--black);
}
.end-mark {
  font-family: var(--disp);
  font-weight: 480;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.end-legal { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.06em; }
.end-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.end-credit span { opacity: 0.85; }
.end-credit__logo {
  height: 1.45em;
  width: auto;
  display: block;
  color: var(--ink);
}
.end-credit:hover { color: var(--tung); }
.end-credit:hover .end-credit__logo { color: var(--tung); }
@media (prefers-reduced-motion: no-preference) {
  .end-credit, .end-credit__logo { transition: color var(--dur-fast) var(--ease-enter); }
}

/* ---------- 15 · Scroll-Driven Choreografie (progressive enhancement) ---------- */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Signature: der Hero-Titel baut seine Achsen beim Andrehen auf */
    .hero-title {
      will-change: font-variation-settings;
      animation: title-build linear both;
      animation-timeline: scroll(root);
      animation-range: 0vh 120vh;
    }
    @keyframes title-build {
      from { font-variation-settings: "opsz" 44, "SOFT" 65, "WONK" 0; font-weight: 470; }
      to { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; font-weight: 560; }
    }

    /* Letterbox öffnet sich: die Blende geht auf */
    .bar-top { animation: bar-up linear both; animation-timeline: scroll(root); animation-range: 0vh 110vh; }
    .bar-bot { animation: bar-down linear both; animation-timeline: scroll(root); animation-range: 0vh 110vh; }
    @keyframes bar-up { to { transform: translateY(-100%); } }
    @keyframes bar-down { to { transform: translateY(100%); } }
    .frame-mark, .frame-ratio {
      animation: marks-off linear both;
      animation-timeline: scroll(root);
      animation-range: 0vh 110vh;
    }
    @keyframes marks-off { to { opacity: 0; } }

    /* Der Vorhang deckt zu: Hero sinkt ab und verdunkelt */
    .hero-inner, .hero-foot {
      animation: hero-sink linear both;
      animation-timeline: scroll(root);
      animation-range: 90vh 185vh;
    }
    @keyframes hero-sink {
      to { transform: translateY(-6vh) scale(0.965); opacity: 0.28; }
    }

    /* Szenen-Exit: jede Szene sinkt unter den nächsten Schnitt */
    .reel .scene {
      animation: scene-exit linear both;
      animation-timeline: view();
      animation-range: exit 10% exit 100%;
    }
    @keyframes scene-exit {
      to { transform: scale(0.975); opacity: 0.4; }
    }

    /* Akt-Karten: Nummer zieht auf, Karte blendet am Ende ab */
    .act-track { view-timeline: --act block; }
    .act-no {
      animation: act-open linear both;
      animation-timeline: --act;
      animation-range: entry 60% cover 45%;
    }
    @keyframes act-open {
      from { transform: translateY(0.25em) scale(0.96); opacity: 0; }
      to { transform: none; opacity: 1; }
    }
    .act-title, .act-sub, .act-kicker {
      animation: act-open linear both;
      animation-timeline: --act;
      animation-range: entry 70% cover 50%;
    }
    .act-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--black);
      opacity: 0;
      pointer-events: none;
      animation: act-close linear both;
      animation-timeline: --act;
      animation-range: exit 40% exit 95%;
    }
    @keyframes act-close { to { opacity: 1; } }

    /* Ghost-Folio parallax: Nummern ziehen langsamer als der Text */
    .reel .scene::before {
      animation: folio-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes folio-drift {
      from { transform: translateY(3.5rem); }
      to { transform: translateY(-3.5rem); }
    }
  }
}

/* ---------- 16 · View-Transitions: Schnitt-Vokabular ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; } }
  @keyframes vt-wipe-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
  @keyframes vt-wipe-back { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  html[data-cut="dissolve"]::view-transition-old(root) { animation: vt-fade-out var(--dur-scene) var(--ease-exit) both; }
  html[data-cut="dissolve"]::view-transition-new(root) { animation: vt-fade-in var(--dur-scene) var(--ease-enter) both; }

  html[data-cut="wipe"]::view-transition-old(root) { animation: none; }
  html[data-cut="wipe"]::view-transition-new(root) { animation: vt-wipe-in var(--dur-scene) var(--ease-enter) both; }
  html[data-cut="wipe-back"]::view-transition-old(root) { animation: none; }
  html[data-cut="wipe-back"]::view-transition-new(root) { animation: vt-wipe-back var(--dur-scene) var(--ease-enter) both; }

  /* Fade-to-Black: nur an Akt-Grenzen, mit Pause auf Schwarz */
  html[data-cut="fade"]::view-transition { background-color: var(--black); }
  html[data-cut="fade"]::view-transition-old(root) { animation: vt-fade-out var(--dur-base) var(--ease-exit) both; }
  html[data-cut="fade"]::view-transition-new(root) { animation: vt-fade-in var(--dur-scene) var(--ease-enter) 500ms both; }

  /* Iris: Kreisblende ab Klickpunkt, per WAAPI auf ::view-transition-new */
  html[data-cut="iris"]::view-transition-old(root) { animation: none; }
  html[data-cut="iris"]::view-transition-new(root) { animation: none; }

  /* Chromatic Aberration: nur als kurzer Blitz während des Schnitts */
  html.ca-flash h1, html.ca-flash h2, html.ca-flash .beat,
  html.ca-flash .feature-title, html.ca-flash .contact-title, html.ca-flash .act-no {
    text-shadow: -2px 0 rgba(255, 70, 70, 0.5), 2px 0 rgba(70, 220, 255, 0.45);
  }
}

/* ---------- 17 · Reduced Motion: Atmosphäre bleibt, Bewegung geht ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-track { height: auto; }
  .scene-hero { position: relative; height: auto; min-height: 100svh; }
  .reel { margin-top: 0; box-shadow: none; }
  .bar { height: 4vh; }
  .frame-mark.tl { top: calc(4vh + 14px); }
  .frame-mark.br { bottom: calc(4vh + 14px); }
  .frame-ratio { top: calc(4vh + 16px); }
  .act-track { height: auto; }
  .act-card { position: relative; min-height: 60svh; height: auto; padding: 5rem 1.5rem; }
  .character-still { position: static; }
  .monitor { position: static; }
}

/* ---------- 18 · Responsive ---------- */

@media (max-width: 1180px) {
  .scene { padding-left: 3rem; }
  .scene-hero { padding-left: 3rem; }
  .transition { padding-left: 3rem; }
  .scene-no { left: -2.2rem; font-size: 0.85rem; }
  .tf-stage { gap: 2.5rem; }
}

@media (max-width: 920px) {
  .timecode { display: none; }
  .topbar { padding: 0.4rem 0.9rem; gap: 0.9rem; }
  .brand-sub { display: none; }

  .scene { padding: 4.5rem 1.25rem 3.5rem; }
  .scene::before { font-size: clamp(7rem, 30vw, 11rem); top: 1.6rem; right: 0.9rem; }
  .transition { padding: 0 1.25rem; }
  .scene-no { position: static; margin-right: 0.9rem; }
  .slugline h2 { white-space: normal; }

  .hero-track { height: 220vh; height: 220svh; }
  .scene-hero { padding: 4.5rem 1.25rem 3.5rem; }
  .bar { height: 5.5vh; }
  .frame-mark.tl { top: calc(5.5vh + 10px); }
  .frame-mark.br { bottom: calc(5.5vh + 10px); }
  .frame-ratio { top: calc(5.5vh + 12px); }
  .hero-title { font-size: clamp(3.4rem, 16.5vw, 6rem); }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-foot { flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 1.8rem; font-size: 0.64rem; }
  .hero-hint { display: none; }
  .hero-side { display: none; }
  /* Platz auf kleinen Bühnen: die Action-Zeile weicht der Titelkarte */
  .scene-hero .action { display: none; }
  .scene-hero .fade-in-line { margin-bottom: 1rem; }
  .scene-hero .slugline { margin-bottom: 1.6rem; }

  .logline-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .character-still { order: -1; position: static; }

  .act-track { height: 150vh; height: 150svh; }

  .tf-stage { grid-template-columns: 1fr; gap: 0; margin-top: 2.6rem; }
  .monitor { display: none; }
  .duty-steps { contain-intrinsic-size: auto 1100px; }
  .duty-step { padding: 1.5rem 0 1.6rem 1.1rem; }

  .kpi-eyebrow { margin-top: 3rem; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }

  .credit { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.9rem 0; }
  .credit dt { text-align: left; }

  .split-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .paper-page { padding: 1.6rem 1.4rem 1.8rem; }
  .contact-actions .btn { flex: 1 1 100%; }
  .montage li { grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0 0.8rem; }
  .contact-social { flex-direction: column; gap: 0.1rem; margin-top: 1.4rem; }
}