/* =========================================================================
   Der Wettkampf meines Lebens — Design-System
   Statisch, ohne Build-Tools. Alle Maße in rem, Wurzel fluid skaliert.
   ========================================================================= */

/* --- 1. Fluide Wurzelgröße -------------------------------------------- */
html { font-size: calc(0.625rem + 0.4166666666666667vw); }
@media screen and (max-width: 1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width: 479px)  { html { font-size: calc(0.7497384937238494rem + 0.41841004184100417vw); } }

/* --- 2. Tokens --------------------------------------------------------- */
:root {
  /* Ostsee bei Nacht */
  --black:      #05080D;
  --deep:       #0A1018;
  --deeper:     #030509;
  --cream:      #F2EDE4;
  --muted:      rgba(242, 237, 228, .58);
  --faint:      rgba(242, 237, 228, .22);
  --hairline:   rgba(242, 237, 228, .14);

  /* Signalfarben: Amber = Freiheit/Ufer, Cold = Wasser */
  --amber:      #E0A23C;
  --cold:       #6FA8C7;

  --gutter:     6vw;
  --measure:    62ch;
  --bar:        5.6rem;   /* Höhe der unteren Navigationsleiste */

  --ease:       cubic-bezier(.25, .46, .45, .94);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
}

/* --- 3. Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--black);
  color: var(--cream);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: -.012em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
video { width: 100%; height: 100%; object-fit: cover; }
button { background: none; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--amber); color: var(--deeper); text-shadow: none; }

[visually-hidden], .visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: 1rem; left: 1rem; z-index: 200;
  transform: translateY(-200%);
  background: var(--cream); color: var(--deeper);
  padding: .8rem 1.6rem; font-weight: 800; font-size: 1.3rem;
}
.skip-link:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* --- 4. Typografie ------------------------------------------------------ */
.display, h1, h2 {
  overflow-wrap: break-word;      /* „ENTSCHEIDUNG." darf nicht über den Rand ragen */
  font-family: "Archivo", "Manrope", system-ui, sans-serif;
  font-weight: 900;
  font-stretch: 112%;
  line-height: .92;
  letter-spacing: -.038em;
  text-transform: uppercase;
  text-wrap: balance;
}

.h-xl  { font-size: clamp(2.9rem, 6.4vw, 8.4rem); }
.h-lg  { font-size: clamp(2.3rem, 4.6vw, 5.6rem); }
.h-md  { font-size: clamp(2rem, 3vw, 3.8rem); }

.lede {
  font-size: clamp(1.7rem, 1.75vw, 2.2rem);
  line-height: 1.45;
  letter-spacing: -.022em;
  color: var(--cream);
  max-width: 46ch;
}
.body-text { color: var(--muted); max-width: var(--measure); }
.body-text + .body-text { margin-top: 1.2em; }
.body-text strong { color: var(--cream); font-weight: 700; }

.label {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 1.15rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}
.label--cold { color: var(--cold); }

/* --- 5. Layout --------------------------------------------------------- */
.container { width: 100%; max-width: 168rem; margin-inline: auto; padding-inline: var(--gutter); }

/* Jeder Abschnitt liegt über dem Abdunkel-Schleier. Fehlt das, wirkt der
   Abschnitt grau und matt — genau das war bei Faktenbalken, Kacheln und
   dem Knopf darunter der Fall. */
main > section, main > div { position: relative; z-index: 2; }
.section { position: relative; z-index: 2; padding-block: clamp(9rem, 13vw, 18rem); }
.section--tight { padding-block: clamp(6rem, 8vw, 10rem); }
.section--flush { padding-bottom: 0; }
.section-head { display: grid; gap: 2.4rem; margin-bottom: clamp(4rem, 6vw, 8rem); }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* --- 6. WebGL-Hintergrund ---------------------------------------------- */
.c-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.c-bg canvas { width: 100%; height: 100%; display: block; }
/* Fallback, falls WebGL fehlt oder Bewegung reduziert ist */
.c-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(21, 58, 84, .55), transparent 70%),
    radial-gradient(70% 55% at 85% 25%, rgba(12, 34, 52, .5), transparent 70%),
    radial-gradient(90% 70% at 50% 100%, rgba(224, 162, 60, .10), transparent 70%);
  opacity: 1; transition: opacity .8s var(--ease);
}
.c-bg.is-live::after { opacity: 0; }

/* Schleier: hält den Hintergrund hinter der Schrift zurück */
.scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(5,8,13,.82) 0%, rgba(5,8,13,.56) 42%, rgba(5,8,13,.30) 100%),
    linear-gradient(to bottom, rgba(5,8,13,.55) 0%, rgba(5,8,13,0) 22%, rgba(5,8,13,0) 62%, rgba(5,8,13,.72) 100%);
}

/* Filmkorn */
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(4%, 3%); }
  100% { transform: translate(0, 0); }
}

/* --- 7. Navigationsleiste (unten verankert) ---------------------------- */
.header {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--bar);
  background: rgba(5, 8, 13, .72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-top: 1px solid var(--hairline);
}
.nav {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
}
.nav-group { display: flex; align-items: center; gap: clamp(1.6rem, 2.4vw, 3.4rem); min-width: 0; }
.nav-group--right { justify-content: flex-end; }

.nav-link {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  position: relative; padding-block: .6rem;
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--cream); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.brand {
  font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 112%;
  font-size: 1.2rem; letter-spacing: -.01em; text-transform: uppercase;
  line-height: 1; text-align: center; white-space: nowrap;
}
.brand span { display: block; font-family: "Space Mono", monospace; font-weight: 400;
  font-size: .95rem; letter-spacing: .22em; color: var(--muted); margin-top: .35rem; }

.nav-cta {
  flex: none;
  font-family: "Space Mono", monospace; font-size: 1.2rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--deeper); background: var(--amber);
  padding: .9rem 1.6rem; white-space: nowrap;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav-cta:hover { background: var(--cream); transform: translateY(-2px); }

@media (max-width: 1400px) {
  .brand span { display: none; }
}
@media (max-width: 1000px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav-group--left { display: none; }
  .nav-group--right { gap: 1.6rem; }
  .nav-group--right .nav-link { display: none; }
}

/* Telefon: Wortmarke links, zweizeilig; Knopf kurz */
@media (max-width: 700px) {
  :root { --bar: 6.4rem; --gutter: 5vw; }
  .brand {
    text-align: left; white-space: normal;
    font-size: 1.05rem; line-height: 1.15; max-width: 14ch;
  }
  .nav-cta { padding: .9rem 1.4rem; font-size: 1.05rem; letter-spacing: .12em; }
}
.cta-short { display: none; }
@media (max-width: 700px) {
  .cta-long  { display: none; }
  .cta-short { display: inline; }
}

/* --- 8. Hero ----------------------------------------------------------- */
.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: grid; align-content: center;
  padding-block: 3rem calc(var(--bar) + 8rem);
}
.hero-inner {
  display: grid; justify-items: start;
  gap: clamp(1.4rem, 1.8vw, 2.6rem);
}

/* Cinemascope-Balken */
.scope-bar {
  position: fixed; left: 0; right: 0; height: 6.5vh; z-index: 55;
  background: var(--deeper); pointer-events: none;
  transition: transform .9s var(--ease-out);
}
.scope-bar--top { top: 0; }
.scope-bar--bottom { bottom: 0; height: var(--bar); background: transparent; }
body.is-scrolled .scope-bar--top { transform: translateY(-100%); }

.hero-title { color: var(--cream); }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; }
.js .hero-title .line > span {
  animation: lineUp 1.1s cubic-bezier(.16, 1, .3, 1) both;
  will-change: transform;
}
.js .hero-title .line:nth-child(1) > span { animation-delay: .15s; }
.js .hero-title .line:nth-child(2) > span { animation-delay: .26s; }
.js .hero-title .line:nth-child(3) > span { animation-delay: .37s; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
.hero-sub {
  display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center;
}
.hero-sub .label { color: var(--muted); }
.hero-sub .dot { width: 4px; height: 4px; background: var(--amber); border-radius: 50%; }

.scroll-indicator {
  position: fixed; z-index: 50;
  left: 50%; bottom: calc(var(--bar) + 2.2rem);
  transform: translateX(-50%);
  transition: opacity .5s var(--ease);
  display: grid; gap: .8rem; justify-items: center;
  font-family: "Space Mono", monospace; font-size: 1.05rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  animation: scrollNudge 2.85s ease-in-out infinite;
}
.scroll-indicator svg { width: 1.4rem; stroke: var(--amber); }
/* Bei drei Knöpfen im Auftakt bricht die Reihe um; darunter fehlt
   dem Hinweis der Platz. */
@media (max-height: 820px) { .scroll-indicator { display: none; } }
body.is-scrolled .scroll-indicator { animation: none; opacity: 0; pointer-events: none; transform: translate(-50%, .8rem); }
@keyframes scrollNudge {
  0%, 100% { transform: translate(-50%, -.6rem); opacity: 1; }
  50%      { transform: translate(-50%,  .4rem); opacity: .72; }
}

/* --- 9. Zahlen-Raster --------------------------------------------------- */
/* Feste Stufen statt auto-fit — sonst bleibt bei mittleren Breiten eine
   Kachel allein in der zweiten Reihe stehen. */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hairline); border-block: 1px solid var(--hairline); }
@media (max-width: 1500px) { .figures { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .figures { grid-template-columns: 1fr; } }
.figure {
  background: var(--black); padding: clamp(3.4rem, 4.4vw, 6rem) clamp(2.4rem, 3vw, 4rem);
  display: grid; gap: 1.4rem; align-content: center; min-width: 0;
}
.figure-value {
  font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 100%;
  /* An die Spaltenbreite gekoppelt, nicht an die Fensterbreite — sonst
     ragen lange Werte wie 17.08.1969 in die Nachbarkachel. */
  font-size: clamp(2.6rem, 9cqi, 6.4rem);
  line-height: .92; letter-spacing: -.045em;
  color: var(--cream);
  min-width: 0; overflow-wrap: anywhere; hyphens: none;
}
.figures { container-type: inline-size; }
.figure { container-type: inline-size; }
.figure-value em { font-style: normal; color: var(--amber); }
.figure-key { font-family: "Space Mono", monospace; font-size: 1.2rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); line-height: 1.5; }

/* --- 10. Zwei-Spalten-Block -------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 9rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* --- 11. Trailer -------------------------------------------------------- */
.trailer {
  position: relative; aspect-ratio: 21 / 9; overflow: hidden;
  background: var(--deep); border: 1px solid var(--hairline);
}
.trailer img, .trailer video { width: 100%; height: 100%; object-fit: cover; opacity: .78;
  transition: opacity .6s var(--ease), transform .8s var(--ease); }
.trailer:hover img { opacity: .9; transform: scale(1.015); }
.trailer-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  align-content: center;
}
/* Die Beschriftung sitzt unten, nicht mitten auf der Schrift im Bild */
.trailer-play .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4rem clamp(2rem, 3vw, 3.4rem) clamp(1.8rem, 2.2vw, 2.6rem);
  text-align: center;
  background: linear-gradient(transparent, rgba(3, 5, 9, .78));
}
.trailer-play .disc {
  position: relative;
  width: clamp(8rem, 8.4vw, 11rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(242, 237, 228, .45);
  background: rgba(5, 8, 13, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  transition: border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease-out);
}
/* Ein zweiter, feiner Ring, der beim Zeigen aufgeht */
.trailer-play .disc::after {
  content: ""; position: absolute; inset: -1.1rem; border-radius: 50%;
  border: 1px solid rgba(242, 237, 228, .18);
  transform: scale(.94); opacity: 0;
  transition: transform .6s var(--ease-out), opacity .6s var(--ease);
}
.trailer-play .disc svg {
  width: clamp(2rem, 2.2vw, 2.8rem); fill: var(--cream);
  transform: translateX(6%);            /* optischer Ausgleich des Dreiecks */
  transition: fill .5s var(--ease);
}
.trailer-play:hover .disc, .trailer-play:focus-visible .disc {
  border-color: var(--cream); background: var(--cream); transform: scale(1.04);
}
.trailer-play:hover .disc::after, .trailer-play:focus-visible .disc::after { transform: scale(1); opacity: 1; }
.trailer-play:hover .disc svg, .trailer-play:focus-visible .disc svg { fill: var(--deeper); }
.trailer-play .caption {
  font-family: "Space Mono", monospace; font-size: 1.15rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
  opacity: .85; transition: opacity .4s var(--ease);
}
.trailer-play:hover .caption { opacity: 1; }

/* --- 12. Bogen-Karussell (Bildstrecke) --------------------------------- */
.gallery {
  position: relative; height: clamp(42rem, 56vh, 64rem);
  overflow: hidden; touch-action: pan-y;
  cursor: grab;
  --p-color: var(--amber);
}
.gallery.is-dragging { cursor: grabbing; }
.gallery-track { position: absolute; inset: 0; }

.slide {
  position: absolute; top: 50%; left: 50%;
  width: clamp(28rem, 34vw, 46rem);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  opacity: .35;
  will-change: transform, opacity;
}
.slide img, .slide video { width: 100%; height: 100%; object-fit: cover; }
.slide-media { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--deep); }
.slide.is-center { opacity: 1; z-index: 4; }

/* Eckwinkel — Sucherrahmen um das mittlere Bild */
.corners { position: absolute; inset: -1.4rem; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.slide.is-center .corners { opacity: 1; }
.corner { position: absolute; width: 2rem; height: 2rem; border: 2px solid var(--cream); }
.slide.is-center .corner { animation: cornerPulse 2.4s ease-in-out infinite; }
.corner.tl { top: 0; left: 0;  border-right: none; border-bottom: none; }
.corner.tr { top: 0; right: 0; border-left: none;  border-bottom: none; }
.corner.bl { bottom: 0; left: 0;  border-right: none; border-top: none; }
.corner.br { bottom: 0; right: 0; border-left: none;  border-top: none; }
@keyframes cornerPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.12); opacity: .75; }
}

.slide-caption {
  position: absolute; left: 0; right: 0; top: calc(100% + 1.8rem);
  text-align: center; opacity: 0; transform: translateY(.6rem);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.slide.is-center .slide-caption { opacity: 1; transform: none; }
.slide-caption .t {
  display: block;                       /* sonst laufen Titel und Zeile ineinander */
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -.02em; font-size: 1.8rem;
  line-height: 1.1;
}
.slide-caption .s {
  display: block;
  font-family: "Space Mono", monospace; font-size: 1.1rem;
  letter-spacing: .16em; color: var(--muted); margin-top: .5rem;
}

.gallery-nav { display: flex; gap: 1.2rem; justify-content: center; margin-top: clamp(4rem, 6vw, 7rem); }
.gallery-nav button {
  width: 4.4rem; aspect-ratio: 1; border: 1px solid var(--hairline);
  display: grid; place-items: center;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.gallery-nav button:hover { border-color: var(--cream); background: rgba(242,237,228,.06); }
.gallery-nav svg { width: 1.4rem; stroke: var(--cream); }

/* --- 13. Auszeichnungen ------------------------------------------------ */
.laurels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: clamp(2rem, 3vw, 4rem); }
.laurel {
  border: 1px solid var(--hairline); padding: clamp(2.6rem, 3vw, 4rem);
  display: grid; gap: 1.2rem; align-content: start;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.laurel:hover { border-color: var(--faint); background: rgba(242,237,228,.03); }
.laurel .year { font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .18em; color: var(--amber); }
.laurel .t { font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -.025em; font-size: clamp(2rem, 2.2vw, 2.8rem); line-height: 1.05; }
.laurel .s { color: var(--muted); font-size: 1.45rem; }

/* --- 14. Stimmen -------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr)); gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); }
.quote { background: var(--black); padding: clamp(3rem, 3.6vw, 4.8rem); display: grid; gap: 2rem; align-content: start; }
.quote blockquote { font-size: clamp(1.7rem, 1.9vw, 2.1rem); line-height: 1.5; letter-spacing: -.018em; }
.quote blockquote::before { content: "„"; color: var(--amber); }
.quote blockquote::after  { content: "“"; color: var(--amber); }
.quote figcaption { font-family: "Space Mono", monospace; font-size: 1.15rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }

/* --- 15. Regie ---------------------------------------------------------- */
.portrait { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--deep); border: 1px solid var(--hairline); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .6s var(--ease); }
.portrait:hover img { filter: grayscale(0) contrast(1); }

/* --- 16. Handlungsaufforderung ----------------------------------------- */
.cta-band { text-align: center; display: grid; gap: clamp(2.4rem, 3vw, 4rem); justify-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 1.2rem;
  max-width: 100%; text-align: center;
  font-family: "Space Mono", monospace; font-size: 1.3rem; letter-spacing: .16em; text-transform: uppercase;
  padding: 1.5rem 3rem; border: 1px solid var(--cream);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--cream); color: var(--deeper); transform: translateY(-2px); }
.btn--solid { background: var(--amber); border-color: var(--amber); color: var(--deeper); font-weight: 700; }
.btn--solid:hover { background: var(--cream); border-color: var(--cream); }
.btn svg { width: 1.3rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; }

/* --- 17. Fuß ------------------------------------------------------------ */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--hairline);
  padding-block: clamp(5rem, 7vw, 9rem) calc(var(--bar) + 4rem); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: clamp(3rem, 5vw, 7rem); }
.footer h3 { font-family: "Space Mono", monospace; font-size: 1.15rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.6rem; }
.footer li + li { margin-top: .8rem; }
.footer a { color: var(--muted); transition: color .3s var(--ease); }
.footer a:hover { color: var(--cream); }
.footer-legal { margin-top: clamp(4rem, 6vw, 7rem); padding-top: 3rem; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between;
  font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .1em; color: var(--muted); }

/* --- 18. Einblenden beim Scrollen -------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(2.4rem); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal-delay="1"].is-in { transition-delay: .09s; }
[data-reveal-delay="2"].is-in { transition-delay: .18s; }
[data-reveal-delay="3"].is-in { transition-delay: .27s; }
[data-reveal-delay="4"].is-in { transition-delay: .36s; }

/* --- 19. Bewegung reduzieren -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero-title .line > span { animation: none; }
  .grain { display: none; }
}

/* --- 20. Platzhalter, bis echtes Bildmaterial vorliegt ----------------- */
.ph {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(111,168,199,.16), rgba(5,8,13,.9) 60%),
    var(--deep);
  display: grid; place-items: center;
  font-family: "Space Mono", monospace; font-size: 1.1rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--hairline);
}

/* --- 21. Presse & Download --------------------------------------------- */
.dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(3rem, 5vw, 7rem); align-items: start; }
@media (max-width: 900px) { .dl { grid-template-columns: 1fr; } }

/* Eckdaten als Definitionsliste */
.facts { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.facts > div {
  display: grid; grid-template-columns: minmax(min(15rem, 40%), auto) minmax(0, 1fr); gap: 1rem 2.4rem;
  padding-block: 1.5rem; border-bottom: 1px solid var(--hairline);
}
@media (max-width: 560px) { .facts > div { grid-template-columns: 1fr; gap: .4rem; } }
.facts dt {
  font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.facts dd { margin: 0; font-size: 1.5rem; line-height: 1.45; }
.facts dd em { font-style: normal; color: var(--amber); }

/* Download-Karte */
.dl-card { border: 1px solid var(--hairline); background: rgba(242, 237, 228, .03); }
.dl-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.dl-cover img { width: 100%; height: 100%; object-fit: cover; }
.dl-body { padding: clamp(2.4rem, 3vw, 3.4rem); display: grid; gap: 1.6rem; }
.dl-body .t {
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -.025em; font-size: 2.2rem; line-height: 1.05;
}
.dl-meta {
  font-family: "Space Mono", monospace; font-size: 1.15rem; letter-spacing: .1em;
  color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
}
.dl-meta .sep { color: var(--faint); }
.dl-card .btn { justify-content: center; }

/* =========================================================================
   TEIL 2 — Mehrseitigkeit: Kopfleiste, Mega-Menü, Hero-Video, Unterseiten
   ========================================================================= */

/* --- 22. Sticky-Kopfleiste (erscheint beim Scrollen) -------------------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: 6.4rem;
  background: rgba(5, 8, 13, .82);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-101%);
  transition: transform .45s var(--ease-out);
}
body.is-scrolled .topbar,
body.is-sub .topbar { transform: none; }

.topbar .container { padding-inline: clamp(1.8rem, 3vw, 4rem); }
.topbar-inner { height: 100%; display: flex; align-items: center; gap: clamp(1.2rem, 1.8vw, 2.6rem); }
.topbar .brand { text-align: left; white-space: nowrap; margin-right: auto; font-size: 1.15rem; }
.topbar .brand span { display: none; }   /* Unterzeile trägt hier nichts, kostet aber Breite */
.topbar-nav { display: flex; align-items: center; gap: clamp(1.1rem, 1.6vw, 2.2rem); }
.topbar-nav .nav-link { font-size: 1.05rem; letter-spacing: .11em; }
/* Die volle Leiste erscheint erst, wenn sie wirklich hineinpasst —
   darunter übernimmt das Mega-Menü. Gemessen: Wortmarke + fünf Punkte +
   Knopf + Menü brauchen rund 1460 px bei 1440er Fenster, mehr bei breiteren. */
@media (max-width: 1620px) { .topbar-nav { display: none; } }

/* In der Kopfleiste immer die kurze Beschriftung — spart 90 px Breite */
.topbar .nav-cta .cta-long  { display: none; }
.topbar .nav-cta .cta-short { display: inline; }

/* Mega-Menü-Knopf */
.menu-btn {
  display: inline-flex; align-items: center; gap: 1rem; flex: none;
  font-family: "Space Mono", monospace; font-size: 1.15rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
  padding: 1rem 1.4rem; border: 1px solid var(--hairline);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.menu-btn:hover { border-color: var(--cream); background: rgba(242,237,228,.06); }
.menu-btn .bars { display: grid; gap: 4px; width: 1.8rem; }
.menu-btn .bars i { display: block; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
body.menu-open .menu-btn .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-btn .bars i:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 560px) { .menu-btn .lbl { display: none; } }

/* Die untere Leiste weicht, sobald die Kopfleiste da ist */
body.is-scrolled .header, body.is-sub .header { transform: translateY(101%); }
.header { transition: transform .45s var(--ease-out); }

/* --- 23. Mega-Menü ------------------------------------------------------ */
.mega {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3, 5, 9, .97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: grid; align-content: center;
  padding-block: 12rem 6rem;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
  overflow-y: auto;
}
body.menu-open { overflow: hidden; }
body.menu-open .mega { opacity: 1; visibility: visible; }

.mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: clamp(3rem, 5vw, 7rem); }
.mega h2 {
  font-family: "Space Mono", monospace; font-size: 1.15rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 2.4rem; text-transform: uppercase;
}
.mega-link {
  display: block; padding-block: 1.1rem;
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  font-size: clamp(2rem, 2.4vw, 3rem); line-height: 1.1;
  letter-spacing: -.03em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--hairline);
  transition: color .3s var(--ease), padding-left .3s var(--ease-out);
}
.mega-link:hover, .mega-link[aria-current="page"] { color: var(--cream); padding-left: 1rem; }
.mega-link small {
  display: block; font-family: "Manrope", sans-serif; font-weight: 400;
  font-size: 1.35rem; letter-spacing: -.01em; text-transform: none;
  color: var(--muted); margin-top: .4rem;
}
.mega-close { position: absolute; top: 0; left: 0; right: 0; height: 6.4rem; }

/* --- 24. Hero mit Hintergrundvideo -------------------------------------- */
.hero-video {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.hero-video.is-ready { opacity: .55; }
/* 16:9 formatfüllend halten, egal wie das Fenster steht */
.hero-video iframe, .hero-video video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;            /* 16:9 auf Breite */
  min-height: 100vh; min-width: 177.78vh;   /* 16:9 auf Höhe */
  border: 0; pointer-events: none;
}
/* Sobald gescrollt wird, tritt das Video zurück */
body.is-scrolled .hero-video.is-ready { opacity: .16; }

/* --- 25. Auszeichnungen und Plattformen im Auftakt ---------------------- */
.hero-badges {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.6rem, 2.4vw, 3.2rem);
  padding-top: .6rem;
}
.hero-badges img { height: clamp(5.4rem, 6.4vw, 8.4rem); width: auto; }
.hero-badges .laurel-img { filter: drop-shadow(0 2px 12px rgba(0,0,0,.6)); }

/* Plattform-Schild, in eigener Typografie gesetzt */
.platform {
  display: inline-flex; align-items: center; gap: .9rem;
  border: 1px solid var(--hairline); padding: .9rem 1.4rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.platform:hover { border-color: var(--cream); background: rgba(242,237,228,.06); }
.platform .k {
  font-family: "Space Mono", monospace; font-size: .95rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); display: block;
}
.platform .v {
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  font-size: 1.6rem; letter-spacing: -.02em; text-transform: uppercase;
  color: var(--cream); display: block; line-height: 1.1;
}
.platform .v em { font-style: normal; color: var(--cold); }

/* --- 26. Unterseiten: Seitenkopf ---------------------------------------- */
.page-head {
  position: relative; z-index: 2;
  padding-block: clamp(14rem, 18vw, 22rem) clamp(5rem, 7vw, 9rem);
  display: grid; gap: 2.4rem;
}
.page-head .lede { max-width: 56ch; }
.crumb {
  font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.crumb a { color: var(--amber); }
.crumb a:hover { color: var(--cream); }

/* --- 27. Akteure --------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr)); gap: clamp(2.4rem, 3.4vw, 4.4rem); }
.person { display: grid; gap: 2rem; align-content: start; }
.person-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--deep); border: 1px solid var(--hairline); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.person:hover .person-photo img { transform: scale(1.03); }
.person-role {
  font-family: "Space Mono", monospace; font-size: 1.05rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
}
.person h3 {
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.9rem, 2vw, 2.4rem); line-height: 1.05;
  letter-spacing: -.03em; text-transform: uppercase;
}
.person p { color: var(--muted); font-size: 1.45rem; line-height: 1.55; }

/* --- 28. Pressespiegel --------------------------------------------------- */
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); gap: clamp(2.4rem, 3vw, 4rem); }
.clip-card {
  display: grid; grid-template-rows: auto 1fr; gap: 0;
  border: 1px solid var(--hairline); background: rgba(242,237,228,.02);
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.clip-card:hover { border-color: var(--faint); transform: translateY(-3px); }
.clip-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border-bottom: 1px solid var(--hairline); }
.clip-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.clip-body { padding: clamp(2.2rem, 2.6vw, 3rem); display: grid; gap: 1.2rem; align-content: start; }
.clip-outlet {
  font-family: "Space Mono", monospace; font-size: 1.05rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
}
.clip-body h3 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1.3; letter-spacing: -.022em; text-transform: none; }
.clip-body p { color: var(--muted); font-size: 1.4rem; }

/* --- 29. Auszeichnungen im Detail --------------------------------------- */
.award {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(3rem, 5vw, 7rem); align-items: start;
  padding-block: clamp(4rem, 6vw, 8rem);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 760px) { .award { grid-template-columns: 1fr; } }
.award-mark { display: grid; place-items: center; padding: 2rem; background: rgba(242,237,228,.03); border: 1px solid var(--hairline); }
.award-mark img { width: 100%; height: auto; max-width: 20rem; }
.award-meta { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin-bottom: 2rem; }

/* --- 30. Video-Abschnitte (Trailer, Reels) ------------------------------ */
.video-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 7rem); align-items: center; }
.video-block--flip > .vb-media { order: 2; }
@media (max-width: 900px) {
  .video-block, .video-block--flip { grid-template-columns: 1fr; }
  .video-block--flip > .vb-media { order: 0; }
}
.vb-frame { position: relative; overflow: hidden; background: var(--deep); border: 1px solid var(--hairline); }
.vb-frame.is-wide     { aspect-ratio: 16 / 9; }
.vb-frame.is-vertical { aspect-ratio: 9 / 16; max-width: 38rem; }
.vb-frame img { width: 100%; height: 100%; object-fit: cover; opacity: .8;
  transition: opacity .6s var(--ease); }
.vb-frame:hover img { opacity: .95; }
.vb-frame .trailer-play { position: absolute; inset: 0; }
.vb-body { display: grid; gap: 1.8rem; align-content: center; }
.vb-body h3 {
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  font-size: clamp(2rem, 2.6vw, 3.2rem); line-height: 1.05;
  letter-spacing: -.03em; text-transform: uppercase;
}
.vb-body .runtime { font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .16em; color: var(--muted); }

/* --- 31. Akteure: ein Abschnitt je Person, im Wechsel gesetzt ----------- */
.person-section {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 9rem); align-items: center;
  padding-block: clamp(5rem, 8vw, 11rem);
  border-top: 1px solid var(--hairline);
}
.person-section:nth-child(even) > .ps-media { order: 2; }
@media (max-width: 900px) {
  .person-section { grid-template-columns: 1fr; gap: 3rem; }
  .person-section:nth-child(even) > .ps-media { order: 0; }
}

.ps-media { position: relative; }
.ps-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--deep); border: 1px solid var(--hairline); }
.ps-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.person-section:hover .ps-photo img { transform: scale(1.035); }

/* Abspielknopf über dem Porträt */
.ps-play {
  position: absolute; right: -1.6rem; bottom: -1.6rem; z-index: 3;
  display: grid; grid-auto-flow: column; align-items: center; gap: 1.2rem;
  background: var(--amber); color: var(--deeper);
  padding: 1.3rem 1.8rem;
  font-family: "Space Mono", monospace; font-size: 1.1rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.ps-play:hover { background: var(--cream); transform: translateY(-2px); }
.ps-play svg { width: 1.2rem; fill: currentColor; }
@media (max-width: 560px) { .ps-play { right: 0; bottom: -1.2rem; } }

.ps-body { display: grid; gap: 1.8rem; align-content: center; }
.ps-index {
  font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .2em;
  color: var(--faint);
}
.ps-role {
  font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
}
.ps-body h2 {
  font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 112%;
  font-size: clamp(2.6rem, 3.6vw, 4.6rem); line-height: .98;
  letter-spacing: -.035em; text-transform: uppercase;
}
.ps-body p { color: var(--muted); font-size: clamp(1.5rem, 1.6vw, 1.8rem); line-height: 1.6; max-width: 54ch; }
.ps-body p strong { color: var(--cream); font-weight: 700; }

/* --- 32. Lightbox -------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3, 5, 9, .94);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: grid; place-items: center; padding: clamp(2rem, 5vw, 6rem);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
body.lightbox-open { overflow: hidden; }
body.lightbox-open .lightbox { opacity: 1; visibility: visible; }

.lightbox-stage {
  position: relative; width: min(112rem, 100%);
  aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--hairline);
  transform: scale(.97); transition: transform .4s var(--ease-out);
}
body.lightbox-open .lightbox-stage { transform: none; }
.lightbox-stage.is-vertical { aspect-ratio: 9 / 16; width: min(46rem, 100%); }
.lightbox-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lightbox-close {
  position: absolute; top: -5.4rem; right: 0;
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: "Space Mono", monospace; font-size: 1.15rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
  padding: 1rem 1.4rem; border: 1px solid var(--hairline);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.lightbox-close:hover { border-color: var(--cream); background: rgba(242,237,228,.08); }
.lightbox-caption {
  position: absolute; left: 0; top: calc(100% + 1.6rem);
  font-family: "Space Mono", monospace; font-size: 1.15rem;
  letter-spacing: .12em; color: var(--muted);
}

/* =========================================================================
   TEIL 3 — Neustruktur nach Masterstruktur, Stand September 2026
   ========================================================================= */

/* --- 33. Bildschleife als ruhige Ebene ---------------------------------- */
.loop { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.loop-frame {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 2.4s var(--ease);
}
.loop-frame.is-on { opacity: 1; }
.loop-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Hinter den Zahlenkacheln: gedämpft, damit die Zahlen tragen */
.figures-wrap { position: relative; z-index: 2; isolation: isolate; }
.figures-wrap .loop { filter: grayscale(.2) contrast(1.02); }
.figures-wrap .loop::after {
  content: ""; position: absolute; inset: 0;
  /* gleiche Helligkeit wie der Award-Balken darüber */
  background: rgba(5, 8, 13, .62);
}
.figures-wrap .figures { position: relative; z-index: 1; background: transparent; }
.figures-wrap .figure { background: transparent; backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05); }

/* --- 34. Auftakt: Knopfhierarchie --------------------------------------- */
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; align-items: center; }
.btn--lg { padding: 1.8rem 3.4rem; font-size: 1.4rem; }
.btn--ghost { border-color: var(--hairline); color: var(--muted); }
.btn--ghost:hover { border-color: var(--cream); background: transparent; color: var(--cream); transform: translateY(-2px); }

/* Plattform-Knopf mit Emblem */
.btn--platform { gap: 1rem; padding: 1.2rem 2rem; }
.btn--platform img { height: 2.6rem; width: auto; }

/* --- 35. Vier Kacheln (Axel & Antonio) ---------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline);
  border-block: 1px solid var(--hairline); }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--deep); }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform 1.2s var(--ease); }
.tile:hover img { transform: scale(1.04); }

/* --- 36. Hochkant-Reel mittig ------------------------------------------- */
.reel { display: grid; justify-items: center; gap: 2.4rem; }
.reel .vb-frame { width: min(38rem, 100%); }

/* --- 37. Kartensegment (Fluchtroute) ------------------------------------ */
.map-band { position: relative; z-index: 2; border-block: 1px solid var(--hairline); background: var(--deeper); }
.map-band .frame { position: relative; aspect-ratio: 16 / 9; max-height: 78vh; overflow: hidden; }
.map-band iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-band .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: clamp(2rem, 4vw, 5rem);
  background: linear-gradient(transparent, rgba(3,5,9,.82));
}

/* --- 38. Auszeichnung: Bild links, Text rechts -------------------------- */
.award-feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 8rem); align-items: center; }
@media (max-width: 900px) { .award-feature { grid-template-columns: 1fr; } }
.award-feature .shot { border: 1px solid var(--hairline); overflow: hidden; background: var(--deep); }
.award-feature .shot img { width: 100%; height: auto; display: block; }

/* --- 39. Regisseur: großes Porträt -------------------------------------- */
.director { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 8rem); align-items: center; }
@media (max-width: 900px) { .director { grid-template-columns: 1fr; } }
.director-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--deep); border: 1px solid var(--hairline); }
.director-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
@media (min-width: 901px) { .director-photo { aspect-ratio: 4 / 5; } }


/* --- 40. Band mit den Auszeichnungen, direkt unter dem Auftakt ---------- */
.laurel-band {
  position: relative; z-index: 2;
  border-block: 1px solid var(--hairline);
  background: rgba(5, 8, 13, .62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding-block: clamp(2.6rem, 3.4vw, 4.4rem);
}
.laurel-band-inner { display: grid; gap: clamp(2rem, 2.6vw, 3.4rem); }
.laurel-awards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap: clamp(2.4rem, 4vw, 6rem); align-items: center;
}
.laurel-award { display: flex; align-items: center; gap: clamp(1.6rem, 2vw, 2.6rem); }
.laurel-award img { height: clamp(8rem, 9vw, 12.5rem); width: auto; flex: none;
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.65)); }
.laurel-award .t {
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.5rem, 1.5vw, 1.9rem); line-height: 1.15;
  letter-spacing: -.02em; text-transform: uppercase;
}
.laurel-award .s {
  display: block; font-family: "Space Mono", monospace; font-weight: 400;
  font-size: 1.1rem; letter-spacing: .14em; color: var(--amber); margin-top: .5rem;
}
@media (max-width: 560px) { .laurel-award img { height: 7.4rem; } }

/* =========================================================================
   TEIL 4 — Dichter, größer, emotionaler (Briefing 04.09.2026)
   ========================================================================= */

/* --- 41. Weniger Leerraum im oberen Drittel ---------------------------- */
.section--dense { padding-block: clamp(5rem, 7vw, 9rem); }
.section--top   { padding-top: clamp(4rem, 5vw, 6.5rem); }
.section-head--tight { margin-bottom: clamp(2.6rem, 3.4vw, 4.4rem); }

/* Auf den Auftakt folgt der Award-Streifen ohne Zwischenraum */
.hero + .laurel-band { margin-top: 0; }

/* --- 42. Prime-Video-Knopf --------------------------------------------- */
.btn--prime {
  gap: 1.4rem; padding: 1rem 1.6rem 1rem 1rem;
  border-color: var(--hairline);
}
.btn--prime:hover { border-color: var(--cream); background: transparent; transform: translateY(-2px); }
.prime-chip {
  display: grid; place-items: center;
  background: #fff; padding: .7rem 1.1rem;
  flex: none;
}
.prime-chip img { height: clamp(2.4rem, 2.6vw, 3.2rem); width: auto; display: block; }
.btn--prime .lbl { font-size: 1.25rem; letter-spacing: .14em; }
@media (max-width: 560px) {
  .btn--prime { width: 100%; justify-content: flex-start; }
  .prime-chip img { height: 2.6rem; }
}

/* --- 43. Axel & Antonio: große Bilder, wenig Rand ----------------------- */
.tiles--big { grid-template-columns: repeat(4, 1fr); }
.tiles--big .tile { aspect-ratio: 4 / 5; }
@media (max-width: 1100px) { .tiles--big { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tiles--big .tile { aspect-ratio: 4 / 5; } }

/* Der Textblock rückt dicht an die Bilder */
.duo-text {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.4rem, 4vw, 6rem); align-items: start;
  margin-top: clamp(3rem, 4vw, 5rem);
}
@media (max-width: 900px) { .duo-text { grid-template-columns: 1fr; } }
.duo-text .body-text { font-size: clamp(1.6rem, 1.7vw, 2rem); line-height: 1.55; color: var(--cream); }
.duo-text .body-text + .body-text { color: var(--muted); }

/* --- 44. Live-Vorführungen als eigene, große Sektion -------------------- */
.live-band { position: relative; z-index: 2; border-block: 1px solid var(--hairline); }
.live-head { display: grid; gap: 2rem; margin-bottom: clamp(3rem, 4vw, 5rem); }

/* Bildraster: ein großes Bild, daneben vier kleinere */
.live-grid {
  display: grid; gap: 1px; background: var(--hairline);
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--hairline);
}
.live-grid figure { position: relative; overflow: hidden; background: var(--deep); aspect-ratio: 4 / 3; }
.live-grid figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* Die Bilder liegen bereits im 4:3 der Zellen vor — kein Nachbeschnitt mehr */
.live-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 1.2s var(--ease); }
.live-grid figure:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
  .live-grid { grid-template-columns: repeat(2, 1fr); }
  .live-grid figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}

/* --- 45. Bildstrecken: größere Kacheln --------------------------------- */
.gallery--big { height: clamp(44rem, 58vh, 68rem); }
.gallery--big .slide { width: clamp(30rem, 38vw, 54rem); }

/* --- 46. Madrid: Bild dominant ----------------------------------------- */
.award-feature--big { align-items: center; }
.award-feature--big .shot { border: none; background: transparent; }
.award-feature--big .shot img { width: 100%; }

/* --- 47. Abstand unter Seitenüberschriften ----------------------------- */
.page-head h1 { margin-bottom: .6rem; }
.page-head .lede { margin-top: clamp(1.2rem, 1.6vw, 2rem); }

/* --- 48. Handlungsaufforderung als eigenes, mittiges Band --------------- */
.cta-strip {
  position: relative; z-index: 2;
  display: grid; place-items: center;
  padding-block: clamp(3.4rem, 5vw, 6rem);
}
.cta-strip .btn { text-align: center; }

/* --- 49. Begleittext bei Axel & Antonio, mittig gesetzt ---------------- */
.duo-copy {
  max-width: 92rem; margin-inline: auto; text-align: center;
  padding-top: clamp(3.4rem, 4.6vw, 6rem);
  display: grid; gap: 1.8rem;
}
.duo-copy .body-text {
  max-width: none; margin-inline: auto;
  font-size: clamp(1.7rem, 1.9vw, 2.2rem); line-height: 1.55;
  color: var(--cream);
}
.duo-copy .body-text + .body-text { color: var(--muted); }

/* --- 50. Freigestelltes Porträt: nichts anschneiden -------------------- */
.director-photo--cutout {
  background: transparent; border: none;
  aspect-ratio: auto; display: block;
}
.director-photo--cutout img {
  display: block; width: 100%; height: auto;
  margin-bottom: 0;                 /* schließt bündig mit der Abschnittskante ab */
}

/* Der Regisseur-Abschnitt endet dort, wo das Porträt endet — das Bild
   blendet selbst nach Schwarz aus und geht in den Grund über. */
.section--director { padding-bottom: 0; }
.section--director .director { align-items: end; }
@media (max-width: 900px) {
  .section--director .director { align-items: stretch; }
  .section--director .director-photo--cutout { order: 2; margin-top: clamp(3rem, 5vw, 5rem); }
}

/* Menü-Gruppentitel: sehen aus wie zuvor, zählen aber nicht zur Gliederung */
.mega .mega-h {
  font-family: "Space Mono", monospace; font-size: 1.15rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
  margin: 0 0 2.4rem;
}

/* --- 51. Häufige Fragen ------------------------------------------------- */
.faq { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: clamp(2rem, 2.4vw, 2.8rem);
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.7rem, 1.9vw, 2.2rem); line-height: 1.25;
  letter-spacing: -.025em;
  transition: color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--amber); }
/* Plus, das beim Öffnen zum Minus wird */
.faq-item summary i {
  position: relative; flex: none; width: 1.8rem; height: 1.8rem;
}
.faq-item summary i::before, .faq-item summary i::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: var(--amber); transform: translateY(-50%);
  transition: transform .35s var(--ease-out), opacity .35s var(--ease);
}
.faq-item summary i::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] summary i::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq-a { padding-bottom: clamp(2rem, 2.4vw, 2.8rem); }
.faq-a p { color: var(--muted); font-size: clamp(1.5rem, 1.6vw, 1.8rem);
  line-height: 1.6; max-width: 72ch; margin: 0; }

/* =========================================================================
   TEIL 5 — Telefon: nichts ragt über den Rand
   Gemessen bei 375 px: der Inhalt war 454 px breit und wurde von
   overflow-x:hidden abgeschnitten statt scrollbar zu sein.
   ========================================================================= */
@media (max-width: 620px) {
  :root { --gutter: 5vw; }

  /* Kopfleiste: Wortmarke schrumpft, Knopf und Menü behalten ihren Platz */
  .topbar .container { padding-inline: 4vw; }
  .topbar-inner { gap: 1rem; }
  .topbar .brand { font-size: 1rem; max-width: 15ch; white-space: normal; line-height: 1.15; }
  .topbar .nav-cta { padding: .9rem 1.2rem; font-size: 1rem; letter-spacing: .1em; }
  .menu-btn { padding: .9rem 1rem; }
  .menu-btn .bars { width: 1.6rem; }

  /* Auszeichnungen untereinander, Text darf umbrechen */
  .laurel-awards { grid-template-columns: 1fr; gap: 1.8rem; }
  .laurel-award { gap: 1.4rem; }
  .laurel-award img { height: 6.4rem; }
  .laurel-award .t { font-size: 1.4rem; }
  .laurel-award .s { font-size: 1rem; }

  /* Zitate, Karten, Menü: je eine Spalte */
  .quotes, .laurels, .clips, .people, .mega-grid, .footer-grid { grid-template-columns: 1fr; }

  /* Handlungsaufforderungen über die volle Breite */
  .hero-ctas { gap: 1rem; }
  .hero-ctas .btn, .btn-row .btn, .cta-strip .btn { width: 100%; justify-content: center; }
  .btn--lg { padding: 1.6rem 2rem; font-size: 1.2rem; }
  .btn { letter-spacing: .1em; }

  /* Datenliste einspaltig */
  .facts > div { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .topbar .brand span { display: none; }
  .hero-ctas .btn { font-size: 1.15rem; padding-inline: 1.4rem; }
  .laurel-award img { height: 5.6rem; }
}

/* Letzte Sicherung: nichts im Fluss darf breiter sein als sein Platz */
img, svg, video, iframe, table, pre { max-width: 100%; }

/* --- 52. Rechtstexte ---------------------------------------------------- */
.legal { max-width: 82rem; }
.legal h2 {
  font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 112%;
  font-size: clamp(1.9rem, 2.2vw, 2.6rem); line-height: 1.15;
  letter-spacing: -.03em; text-transform: uppercase;
  margin-top: clamp(4rem, 5vw, 6rem); margin-bottom: 1.6rem;
  padding-top: clamp(2.4rem, 3vw, 3.4rem); border-top: 1px solid var(--hairline);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p, .legal li { color: var(--muted); font-size: 1.6rem; line-height: 1.65; max-width: 72ch; }
.legal p + p { margin-top: 1.2em; }
.legal ul { margin: 1.4em 0; display: grid; gap: 1em; }
.legal li { padding-left: 2rem; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: .8em; width: .8rem; height: 1px; background: var(--amber); }
.legal a { color: var(--amber); text-decoration: underline; text-underline-offset: .25em; }
.legal a:hover { color: var(--cream); }
.legal strong { color: var(--cream); }
.legal code { font-family: "Space Mono", monospace; font-size: .92em; color: var(--cold); }
.legal .lede { color: var(--cream); max-width: 62ch; }
.legal-note { font-family: "Space Mono", monospace; font-size: 1.15rem; letter-spacing: .12em;
  color: var(--faint); margin-top: clamp(4rem, 5vw, 6rem); }

.legal-dl { display: grid; border-top: 1px solid var(--hairline); }
.legal-dl > div {
  display: grid; grid-template-columns: minmax(min(20rem, 40%), auto) minmax(0, 1fr);
  gap: .6rem 2.4rem; padding-block: 1.4rem; border-bottom: 1px solid var(--hairline);
}
@media (max-width: 620px) { .legal-dl > div { grid-template-columns: 1fr; gap: .3rem; } }
.legal-dl dt { font-family: "Space Mono", monospace; font-size: 1.1rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.legal-dl dd { margin: 0; font-size: 1.55rem; color: var(--cream); }

/* Letzte Absicherung: mehrspaltige Blöcke werden auf dem Telefon einspaltig,
   unabhängig davon, in welcher Reihenfolge die Regeln oben stehen. */
@media (max-width: 900px) {
  .award-feature, .award-feature--big, .director, .split, .dl,
  .video-block, .video-block--flip, .duo-text, .person-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   TEIL 6 — Rasterspalten dürfen nie breiter werden als ihr Platz
   Eine Spalte mit der Vorgabe `auto` wächst auf die Mindestbreite ihres
   Inhalts. Ein langes Wort wie „überschreitet." in Schaugröße zwingt die
   Spalte damit über den Bildschirmrand — gemessen 311 px in einem 288 px
   breiten Container. minmax(0, 1fr) deckelt das.
   ========================================================================= */
.section-head, .live-head, .duo-copy, .page-head, .cta-band, .figure,
.mega > .container > .mega-grid > div, .ps-body, .vb-body, .dl-body {
  grid-template-columns: minmax(0, 1fr);
}

/* Schaugrößen dürfen im Notfall im Wort umbrechen, statt hinauszuragen */
@media (max-width: 620px) {
  .display, h1, h2 { overflow-wrap: anywhere; }
}

/* Das Mega-Menü soll waagrecht nichts beisteuern */
.mega { overflow-x: hidden; }