/* =========================================================
   AV Dokumenta — Hauptstylesheet
   Aufbau: Tokens → Basis → Header → Hero → Sektionen → Detail → Footer
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Dunkelkammer: warmes Schwarz, kein Blaustich */
  --void:#0C0B0A;
  --dark:#141210;
  --dark-2:#1D1A17;
  --line-d:rgba(255,255,255,.10);

  /* Fotopapier */
  --paper:#E9E3D7;
  --paper-2:#F4F0E7;
  --line-l:rgba(20,18,16,.14);

  --on-dark:#F2EDE5;
  --on-dark-mute:#9A9188;
  --on-light:#171412;
  --on-light-mute:#5F584F;

  --gold:#C9A227;          /* Emmy, Gold Camera, Gold Medal */
  --gold-soft:#E3C463;
  --beam:#A8CBD6;          /* Mikroskoplicht */

  --display:'Newsreader','Bodoni Moda',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1240px;
  --gut:clamp(20px,5vw,56px);
  --sec:clamp(72px,10vw,140px);
}

/* ---------- 2. Basis ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Der Header ist fixiert. Ohne Abstand springt der Browser exakt auf die
   Sektionskante, und die liegt dann unter dem Header. */
section[id],[id]{scroll-margin-top:96px}
@media (max-width:900px){section[id],[id]{scroll-margin-top:78px}}
body{
  font-family:var(--sans);font-weight:300;line-height:1.65;
  background:var(--void);color:var(--on-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* niemals hidden: bricht position:sticky */
}
img{display:block;max-width:100%;height:auto}

/* Optische Größe automatisch: große Titel bekommen den Display-Schnitt,
   kleine Zeilen den Textschnitt. Genau dafür gibt es die opsz-Achse. */
h1,h2,h3,.h2,.film__title,.detail__title,.award-band__h,.fact__n,.brand__mark{
  font-optical-sizing:auto
}

/* Auf hellem Grund brechen dünne Striche weg, auf dunklem laufen sie zu.
   Deshalb auf Papier ein Schnitt kräftiger. */
.sec--paper .h2,
.sec--paper h2,
.sec--paper .film__title{font-weight:500}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.av-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--gold);color:#171412}
.av-skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--flush{padding-inline:0}
.sec{padding-block:var(--sec)}
.sec--tight{padding-top:0}
.sec--dark{background:var(--dark)}
.sec--void{background:var(--void)}
.sec--paper{background:var(--paper);color:var(--on-light)}

.h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.1;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:62ch;color:var(--on-dark-mute);margin-top:20px}
.lead--strong{color:var(--on-dark);font-size:1.2rem}
.sec--paper .lead{color:var(--on-light-mute)}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:12px;margin-bottom:22px;font-weight:400;
}
.eyebrow::before{content:"";width:36px;height:1px;background:currentColor;flex:none}
.sec--paper .eyebrow{color:#8A6D12}

.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.is-in{opacity:1;transform:none}

.link-out{
  display:inline-flex;align-items:center;gap:9px;color:var(--beam);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  border-bottom:1px solid rgba(168,203,214,.4);padding-bottom:3px
}
.link-out:hover{color:var(--gold);border-color:var(--gold)}

.av-emmy{width:auto;flex:none;color:var(--gold)}
.emmy--hero{filter:drop-shadow(0 3px 12px rgba(0,0,0,.7))}
.emmy--card{margin-right:1px}
.emmy--detail{margin-bottom:16px}

/* ---------- 3. Header ---------- */
/* ACHTUNG: backdrop-filter darf NICHT auf .hdr liegen.
   Ein Element mit backdrop-filter wird zum Containing Block für seine
   position:fixed-Nachfahren. Das mobile Menü (fixed, inset:0) bezöge sich
   dann auf den Header statt auf den Viewport und würde in einen schmalen
   Streifen gequetscht. Der Filter sitzt deshalb auf einem Pseudo-Element
   hinter dem Header, das Menü ist kein Nachfahre davon. */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:24px;padding:18px var(--gut);
  border-bottom:1px solid transparent;
  transition:border-color .35s ease,padding .35s ease;
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(12,11,10,.88);opacity:0;transition:opacity .35s ease
}
@supports (backdrop-filter:blur(8px)){.hdr::before{backdrop-filter:blur(10px)}}
.hdr.is-stuck::before{opacity:1}
.hdr.is-stuck{border-bottom-color:var(--line-d);padding-block:12px}

/* Marke im Kopf. Die Datei kommt aus dem Branding-Plugin (oder aus dem
   Customizer), die Größe bestimmt das Theme: das Logo bringt kein festes
   width/height mit, genau dafür. */
.brand{display:flex;align-items:center;gap:10px;flex:none;line-height:0}
.brand .av-logo--header{width:auto;height:clamp(26px,3vw,34px)}
.brand svg.av-logo--header{height:clamp(26px,3vw,34px);width:auto}

/* Rückfall, falls weder Upload noch Plugin da sind. */
.brand__mark{font-family:var(--display);font-size:1.6rem;letter-spacing:.02em;line-height:1}
.brand__sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-mute);line-height:1}

.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-mute);position:relative;padding-block:6px;transition:color .25s ease
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s ease}
.nav a:hover{color:var(--on-dark)}
.nav a:hover::after{width:100%}

.lang{display:flex;gap:2px;border:1px solid var(--line-d);padding:3px;flex:none}
.lang a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;padding:5px 9px;color:var(--on-dark-mute);
  transition:background .2s ease,color .2s ease
}
.lang a.is-active{background:var(--gold);color:#0C0B0A}

.burger{display:none;flex:none;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:9px;width:22px;height:1px;background:var(--on-dark);transition:transform .3s ease,opacity .3s ease}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .burger{display:block;order:3;position:relative;z-index:70}
  .lang{order:2;margin-left:auto;position:relative;z-index:70}
  .brand{position:relative;z-index:70}

  .nav{
    position:fixed;inset:0;margin:0;z-index:65;
    background:var(--void);            /* deckend, nicht durchscheinend */
    flex-direction:column;justify-content:center;gap:26px;
    padding:96px var(--gut) 40px;
    transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)
  }
  .nav.is-open{transform:none}
  .nav a{font-size:1.05rem;letter-spacing:.18em;color:var(--on-dark)}
  .nav a::after{display:none}

  /* Bei offenem Menü scrollt die Seite darunter nicht mit. */
  body.nav-open{overflow:hidden}
}

/* ---------- 4. Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#000}

/* Der Zeiger sagt nur dort etwas an, wo er auch etwas kann.
   Auf der freien Fläche bleibt der normale Zeiger: ein Fadenkreuz über der
   ganzen Bühne verspricht eine Bedienung, die es dort nicht gibt.
   Im Anflug auf das Objektiv wird er zum Fadenkreuz, eingerastet verschwindet
   er ganz, denn dann IST das Objektiv der Zeiger. */
.hero__stage{position:absolute;inset:0;contain:paint;cursor:default}
.hero__stage.is-near{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230C0B0A%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M15%202.5V6M15%2024v3.5M2.5%2015H6M24%2015h3.5%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E3C463%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M15%202.5V6M15%2024v3.5M2.5%2015H6M24%2015h3.5%22%2F%3E%3Cpath%20d%3D%22M15%2011.6v6.8M11.6%2015h6.8%22%20stroke%3D%22%23A8CBD6%22%20stroke-width%3D%221%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%221.1%22%20fill%3D%22%23E3C463%22%2F%3E%3C%2Fsvg%3E") 15 15, crosshair}
.hero__stage.is-locked{cursor:none}

/* Basisebene mit Überstand: der Weichzeichner läuft außerhalb der Bühne aus.
   Der Überstand steckt in --bleed und wird im Skript exakt eingerechnet. */
.hero__stage{--bleed:28px}
.hero__media{
  position:absolute;
  top:calc(-1 * var(--bleed));left:calc(-1 * var(--bleed));
  width:calc(100% + 2 * var(--bleed));height:calc(100% + 2 * var(--bleed));
  object-fit:cover;
  filter:grayscale(1) brightness(.48) contrast(1.14) blur(var(--hero-blur,0px));
  transform:translateZ(0); /* eigene Ebene, damit der Filter einmal gerastert wird */
}

/* Das Objektiv: ein Canvas, das nur seinen Kreis zeichnet. Bewegt wird
   ausschließlich per transform, also auf dem Compositor. Kein Blend-Mode,
   der zwingt den Browser sonst zum Neurastern des Hintergrunds. */
.hero__lens{
  position:absolute;top:0;left:0;pointer-events:none;border-radius:50%;
  will-change:transform;transform:translate3d(-9999px,0,0);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,rgba(0,0,0,.45) 78%,transparent 99%);
  mask-image:radial-gradient(circle at 50% 50%,#000 55%,rgba(0,0,0,.45) 78%,transparent 99%);
}
/* Das Objektiv. Fassung, Blende, Strichplatte, Ableseskala.
   Alles nur transform-bewegt, kein Blend-Mode, kein Layout im Frame. */
.hero__ring{
  position:absolute;top:0;left:0;pointer-events:none;border-radius:50%;
  border:1px solid rgba(232,196,99,.5);
  will-change:transform;transform:translate3d(-9999px,0,0);
  transition:border-color .35s ease
}
/* Eingerastet: die Fassung zieht an, die Strichplatte wird deutlicher. */
.hero__ring.is-locked{border-color:rgba(232,196,99,.95)}
.hero__ring.is-locked .ring__reticle path{stroke:rgba(232,196,99,.8)}
.hero__ring.is-locked .ring__ticks line{stroke:rgba(232,196,99,.55)}
/* Fassung: zweiter Ring plus feiner Lichtsaum am Rand */
.hero__ring::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(168,203,214,.18);
  box-shadow:inset 0 0 22px rgba(168,203,214,.10)
}
.ring__optics{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring__iris{transform-origin:50% 50%;animation:av-iris 60s linear infinite}
.ring__iris path{stroke:rgba(232,196,99,.16);stroke-width:.8;fill:none}
.ring__iris circle{stroke:rgba(232,196,99,.10);stroke-width:.6;fill:none}
@keyframes av-iris{to{transform:rotate(360deg)}}

.ring__reticle path{stroke:rgba(168,203,214,.5);stroke-width:.9}
.ring__ticks line{stroke:rgba(168,203,214,.35);stroke-width:.8}
.ring__dot{fill:rgba(232,196,99,.9);stroke:none}

/* Ableseskala: Länge fest, der Wert ändert sich mit der Vergrößerung.
   So funktioniert ein Maßstabsbalken auch in einer echten Aufnahme. */
.hero__scale{
  position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--beam);
  white-space:nowrap;text-align:center
}
.hero__scale i{display:block;height:1px;width:54px;background:var(--beam);margin:0 auto 5px}
.hero__scale i::before,.hero__scale i::after{
  content:"";position:absolute;width:1px;height:5px;background:var(--beam);margin-top:-2px
}
.hero__scale i::before{margin-left:-27px}
.hero__scale i::after{margin-left:26px}

/* Ablesewerte über dem Objektiv */
.ring__hud{
  position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  display:flex;gap:14px;white-space:nowrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em
}
.hud__obj{color:var(--gold);font-weight:500}
.hud__xy{color:rgba(168,203,214,.75)}

/* Fokusanzeige rechts an der Fassung: fünf Balken, wie am Okular */
.ring__focus{
  position:absolute;left:calc(100% + 16px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:3px
}
.ring__focus i{
  display:block;width:12px;height:2px;background:rgba(168,203,214,.2);
  transition:background .18s ease,width .18s ease
}
.ring__focus i.on{background:var(--beam);width:18px}
.ring__focus b{
  margin-top:5px;font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;
  color:rgba(168,203,214,.45);font-weight:400;transition:color .3s ease
}
.ring__focus b.lock{color:var(--gold)}

@media (max-width:640px){
  .ring__hud{font-size:.52rem;gap:9px;top:-28px}
  .ring__focus{display:none}
}

.hero__grad{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,10,.74) 0%,rgba(12,11,10,0) 32%,rgba(12,11,10,.5) 66%,var(--void) 100%)
}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,9vh,110px)}

.hero__laurel{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;padding:7px 14px;
  border:1px solid rgba(201,162,39,.4);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)
}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.7rem,7.4vw,6.2rem);line-height:.98;letter-spacing:-.015em;max-width:16ch
}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero__sub{margin-top:24px;max-width:46ch;color:var(--on-dark-mute);font-size:clamp(1rem,1.5vw,1.15rem)}
.hero__hint{
  margin-top:34px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mute)
}
.hero__hint i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

.hero__ctrls{position:absolute;right:var(--gut);bottom:clamp(48px,9vh,110px);z-index:3;display:flex;gap:8px;align-items:center}
.hero__ctrls button{
  display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-d);
  background:rgba(12,11,10,.5);color:var(--on-dark-mute);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  transition:color .25s ease,border-color .25s ease
}
.hero__ctrls button:hover{color:var(--gold);border-color:var(--gold)}

/* Auf schmalen Geräten waren Ton und Lautstärke komplett ausgeblendet. Es gibt
   dort keinen zweiten Weg zum Ton, also war er schlicht nicht erreichbar. Jetzt
   kompakt, aber da. */
@media (max-width:640px){
  .hero__ctrls{right:auto;left:var(--gut);bottom:calc(clamp(48px,9vh,110px) + 46px);gap:10px}
  .hero__ctrls button{padding:7px 11px;font-size:.58rem;letter-spacing:.12em}
  .hero__vol{width:56px}
  .hero__vol::after{inset:-13px 0}
}

/* Lautstärke im Hero. Immer sichtbar, solange ein Video läuft: einen Regler,
   den man erst durch einen anderen Klick findet, findet niemand. Stumm ist er
   gedämpft, bei Ton voll da. */
.hero__vol{
  position:relative;align-self:center;width:72px;height:2px;
  background:rgba(255,255,255,.22);cursor:pointer;
  opacity:.4;transition:opacity .3s ease
}
.hero__vol:hover,.hero__vol.is-on{opacity:1}
.hero__vol::after{content:"";position:absolute;inset:-11px 0}
.hero__vol-fill{position:absolute;left:0;top:0;bottom:0;width:70%;background:var(--beam)}
.hero__vol-fill::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--beam)
}


/* ---------- 5. Kennzahlen ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line-d)}
.fact{padding:38px 26px;border-right:1px solid var(--line-d)}
.fact:last-child{border-right:0}
.fact__n{font-family:var(--display);font-size:clamp(2rem,3.6vw,3rem);line-height:1}
.fact__l{margin-top:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute)}
/* Die Zahlenreihe bleibt auf schmalen Geräten in einer Zeile. Zuvor brach sie
   auf zwei Spalten um — vier Werte, die zusammengehören, standen dann als Block
   statt als Reihe und verloren den Vergleich untereinander. Statt umzubrechen
   werden Abstände und Schriftgrade enger. */
@media (max-width:820px){
  .fact{padding:26px 12px}
}
@media (max-width:560px){
  .fact{padding:20px 7px}
  .fact__n{font-size:clamp(1.25rem,6vw,1.9rem)}
  .fact__l{margin-top:6px;font-size:.5rem;letter-spacing:.08em;line-height:1.35}
}
@media (max-width:380px){
  .fact{padding:16px 4px}
  .fact__l{font-size:.44rem;letter-spacing:.05em}
}
.casters{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;justify-content:center;padding:34px var(--gut)}

/* Sender als Kästchen. Bewusst keine Logoleiste: acht Marken bringen acht
   Farbwelten und acht Zeiten mit, und Sender überarbeiten ihre Erscheinung
   alle paar Jahre — eine Wortmarke altert nicht. Ist doch ein Logo hinterlegt,
   sitzt es im selben Kästchen und wird entsättigt eingepasst. */
.caster{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;
  padding:11px 17px;border:1px solid var(--line-d);color:var(--on-dark-mute);
  transition:border-color .25s ease,color .25s ease,background-color .25s ease
}
.caster:hover{border-color:var(--gold);color:var(--gold-soft);background:color-mix(in srgb,var(--gold) 7%,transparent)}

/* Logos: entsättigt und gedämpft, damit acht Marken nicht acht Farbwelten
   in die Seite tragen. Beim Darüberfahren volle Präsenz. */
.caster--img{padding:8px 15px}
.caster--img img{
  height:clamp(16px,1.7vw,22px);width:auto;display:block;
  filter:grayscale(1) brightness(1.9) contrast(.9);
  opacity:.55;transition:opacity .3s ease,filter .3s ease
}
.caster--img:hover img{opacity:1;filter:grayscale(1) brightness(2.2)}

@media (max-width:520px){
  .casters{gap:8px}
  .caster{font-size:.7rem;padding:9px 13px;letter-spacing:.1em}
}

/* ---------- Publikationen ----------
   Umschlag links, Text rechts — wie bei den Filmkacheln, nur großzügiger, weil
   hier eine einzelne Arbeit steht und nicht ein Raster. */
.book{display:grid;grid-template-columns:minmax(180px,280px) 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:clamp(48px,7vw,88px)}
/* Zickzack: jedes zweite Buch spiegelt — Umschlag rechts, Text links. Das gibt
   der Übersicht Rhythmus, statt zwei gleiche Zeilen zu stapeln. */
.book--flip{grid-template-columns:1fr minmax(180px,280px)}
.book--flip .book__body{order:1}
.book--flip .book__cover{order:2}
/* Kein festes Seitenverhältnis: die Aufnahme bringt ihr eigenes mit. Zuvor
   wurde auf 3:4 beschnitten, was bei einem quadratischen Studiofoto oben und
   unten abschnitt — auf dem Handy besonders auffällig. */
.book__cover{position:relative;overflow:hidden;background:var(--dark-2,#1D1A17);box-shadow:0 26px 60px -28px rgba(0,0,0,.8);display:block;line-height:0}
.book__cover img{width:100%;height:auto;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.book:hover .book__cover img{transform:scale(1.03)}
.book__fallback{display:grid;place-items:center;aspect-ratio:3/4;font-family:var(--display);font-size:2rem;color:var(--on-dark-mute)}

/* Leitzitat vor dem Titel. Bei „Doors to Hidden Worlds“ ist es der Blake-Satz,
   aus dem sich Buchtitel und Leitmotiv der Website gleichermaßen ableiten. */
.book__quote{margin:0 0 22px;padding-left:18px;border-left:1px solid var(--gold)}
.book__quote p{font-family:var(--display);font-weight:300;font-style:italic;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.45;color:var(--on-dark);margin:0}
.book__quote cite{display:block;margin-top:9px;font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.book__quote--big{margin-bottom:30px}
.book__quote--big p{font-size:clamp(1.2rem,2.6vw,1.7rem)}

.book__title{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.08;margin:0 0 10px}
.book__sub{color:var(--on-dark-mute);font-size:1.02rem;line-height:1.5;margin:0 0 14px;max-width:46ch}
.book__facts{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.book__blurb{color:var(--on-dark-mute);line-height:1.75;max-width:56ch;margin:0 0 24px}
.book__more{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark);border-bottom:1px solid var(--gold);padding-bottom:5px}
.book__more span{transition:transform .3s ease}
.book:hover .book__more span{transform:translateX(5px)}
@media (max-width:700px){
  .book{grid-template-columns:1fr}
  .book__cover{max-width:280px}
  /* Am Telefon steht der Umschlag immer oben, auch bei gespiegelten Büchern. */
  .book--flip .book__cover,.book--flip .book__body{order:0}
}

/* Detailseite der Publikation */
/* Themen als Reihe von Marken: nennt in sechs Wörtern, worum es geht — mehr
   als eine Verlagsbeschreibung leistet. */
.book-detail__topics{margin-top:40px}
.book-detail__topics ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.book-detail__topics li{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  padding:9px 14px;border:1px solid var(--line-d);color:var(--on-dark-mute)
}

/* Die AR-Elemente: eigener Absatz mit Goldkante, weil sie die Besonderheit
   dieser Ausgabe sind und in einer Aufzählung untergingen. */
.book-detail__ar{margin-top:40px;padding-left:18px;border-left:1px solid var(--gold)}
.book-detail__ar p:not(.eyebrow){margin:0;line-height:1.75;color:var(--on-dark);max-width:58ch}

/* Überleitung zurück zu den Filmen. Als abgesetzter, zentrierter Block, damit
   er die Seite bewusst abschließt und nicht unten links untergeht — gerade auf
   inhaltsarmen Seiten wie der Festschrift. */
.book-detail__onward{
  margin-top:clamp(56px,8vw,104px);
  padding:clamp(38px,6vw,68px) clamp(24px,5vw,56px);
  border:1px solid var(--line-d);
  background:radial-gradient(130% 150% at 50% 0%,rgba(168,203,214,.07),transparent 62%),var(--dark);
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center
}
.book-detail__onward .eyebrow{margin:0;color:var(--beam)}
.book-detail__onward p:not(.eyebrow){
  margin:0;max-width:32ch;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.45rem,3.2vw,2.2rem);line-height:1.28;color:var(--on-dark)
}
.book-detail__onward .book__more{margin-top:4px}

.book-detail__feat,.book-detail__contrib{margin-top:40px}
.book-detail__feat ul,.book-detail__contrib ul{list-style:none;margin:0;padding:0}
.book-detail__feat li{position:relative;padding-left:20px;margin-bottom:10px;line-height:1.6;color:var(--on-dark-mute)}
.book-detail__feat li::before{content:"";position:absolute;left:0;top:.65em;width:7px;height:7px;border:1px solid var(--gold);border-radius:50%}
/* Beitragende als Kranz: die Namen sind ein Argument für sich, deshalb nebeneinander
   statt untereinander — man liest sie als Reihe, nicht als Aufzählung. */
.book-detail__contrib ul{display:flex;flex-wrap:wrap;gap:8px 0}
.book-detail__contrib li{font-size:.93rem;color:var(--on-dark-mute);padding:0 14px;border-right:1px solid var(--line-d);line-height:1.3}
.book-detail__contrib li:last-child{border-right:0}
.book-detail__contrib li:first-child{padding-left:0}
.book-detail__contrib a{color:inherit;transition:color .2s ease}
.book-detail__contrib a:hover,.book-detail__contrib a:focus-visible{color:var(--gold-soft)}
.book-detail__contrib-ext{color:var(--gold);font-size:.8em}

/* Buchpräsentation. Angaben und Bilder; die Bilder erscheinen, sobald welche
   am Beitrag hängen — hochladen genügt, es muss nichts zugeordnet werden. */
.book-detail__event{margin-top:44px;padding-top:30px;border-top:1px solid var(--line-d)}
.book-detail__when{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--on-dark);margin:0 0 8px}
.book-detail__shots-sec{margin-top:44px;padding-top:30px;border-top:1px solid var(--line-d)}
.book-detail__shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:18px}
.book-detail__shot{margin:0}
.book-detail__shot-btn{
  display:block;position:relative;width:100%;padding:0;border:0;cursor:zoom-in;
  background:var(--dark-2,#1D1A17);overflow:hidden;line-height:0
}
/* Gedämpft im Ruhezustand — soll am Anfang nicht knallen. Beim Darüberfahren
   kommt das Bild voll heraus und die Lupe erscheint. */
.book-detail__shot-btn img{
  width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  filter:brightness(.58) saturate(.8);
  transition:filter .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)
}
.book-detail__shot-btn:hover img,.book-detail__shot-btn:focus-visible img{filter:brightness(1) saturate(1.03);transform:scale(1.03)}
.book-detail__zoom{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.82);
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  color:var(--void);background:var(--gold);opacity:0;pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:opacity .3s ease,transform .3s ease
}
.book-detail__shot-btn:hover .book-detail__zoom,.book-detail__shot-btn:focus-visible .book-detail__zoom{opacity:1;transform:translate(-50%,-50%) scale(1)}
.book-detail__shots figcaption{margin-top:7px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--on-dark-mute)}

/* Bild-Lightbox der Ansichten: schließt per × oder Klick irgendwohin. */
.shot-lb{
  position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:var(--gut);
  background:rgba(6,5,5,.95);cursor:zoom-out;opacity:0;transition:opacity .25s ease
}
.shot-lb.is-on{display:grid;opacity:1}
.shot-lb img{max-width:min(1100px,94vw);max-height:88vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.shot-lb__close{
  position:absolute;top:22px;right:26px;color:var(--on-dark-mute);cursor:pointer;background:none;border:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase
}
.shot-lb__close:hover,.shot-lb__close:focus-visible{color:var(--gold)}

.book-detail__buy{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-d)}
.book-detail__buy ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.book-detail__buy a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line-d);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--on-dark);transition:border-color .25s ease,color .25s ease}
.book-detail__buy a:hover{border-color:var(--gold);color:var(--gold-soft)}
.book-detail__buy a span{color:var(--gold)}
/* Bestellung beim Verlag: dort ist das Buch erschienen, das ist die
   maßgebliche Quelle — deshalb eigene Zeile statt in der Linkliste. */
.book-detail__orders{margin:14px 0 0;font-size:.82rem;line-height:1.5;color:var(--on-dark-mute)}
.book-detail__orders a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:2px}
.specs dd a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px}
.specs dd a:hover{color:var(--gold)}

.book-detail__note{margin:12px 0 8px;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--on-dark-mute)}

/* ---------- 5b. Auszeichnungszeile ----------
   Der Emmy bekommt Fläche statt eines Signets. Ein Lichtkegel hinter der
   Statuette, sonst nichts: die Sparsamkeit ist hier das Argument. */
.award-band{background:var(--void);border-bottom:1px solid var(--line-d);padding-block:clamp(44px,6vw,72px)}
.award-band__in{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(28px,5vw,64px);align-items:center
}
.award-band__fig{
  position:relative;display:grid;place-items:center;flex:none;
  padding:0 clamp(14px,2vw,30px)
}
.award-band__fig::before{
  content:"";position:absolute;inset:-30% -10%;
  background:radial-gradient(closest-side,rgba(201,162,39,.16),transparent 70%);
  pointer-events:none
}
.award-band__fig .av-emmy{position:relative}
.emmy--band{filter:drop-shadow(0 14px 30px rgba(0,0,0,.7))}

.award-band__h{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;margin-bottom:12px
}
.award-band__sub{color:var(--on-dark-mute);max-width:52ch;font-size:1rem;margin-bottom:18px}

.award-band__col{border-left:1px solid var(--line-d);padding-left:clamp(20px,2.4vw,32px);min-width:300px}
.award-band__cap{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-mute);margin:0 0 16px
}
.award-band__list{margin:0}
.award-band__list div{display:flex;gap:16px;padding:11px 0;align-items:flex-start}
.award-band__list dt{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--gold);
  flex:none;width:132px;padding-top:2px;line-height:1.4
}
/* Eine Auszeichnung kann über mehrere Jahre / Filme laufen: Zeilen stapeln. */
.award-band__list dd{
  font-size:.86rem;color:var(--on-dark-mute);line-height:1.5;
  display:flex;flex-direction:column;gap:7px;margin:0
}
.award-band__list dd span{display:block}
.award-band__list dd em{font-style:italic;color:var(--on-dark)}
.award-band__yr{
  font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.08em;
  color:var(--beam);margin-right:9px
}

@media (max-width:1080px){
  .award-band__in{grid-template-columns:auto 1fr}
  .award-band__col{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line-d);padding-left:0;padding-top:16px}
}
@media (max-width:640px){
  .award-band__in{grid-template-columns:1fr;justify-items:start;gap:24px}
  .award-band__fig{padding:0}
  .award-band__fig .av-emmy{height:130px !important}
}

/* ---------- 6. Biografie ---------- */
.bio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);margin-top:56px}
.track{border-top:1px solid var(--line-d);padding-top:26px}
.track__h{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--beam);margin-bottom:22px;font-weight:400}
.track:last-child .track__h{color:var(--gold)}
.track p{color:var(--on-dark-mute);margin-bottom:16px}
@media (max-width:820px){.bio{grid-template-columns:1fr}}

.portrait{margin-top:60px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center}
/* ---------- Laufbahn: Kennzahlen und Zeitstrahl ----------
   Steht dort, wo zuvor ein zufälliges Filmbild lag. Beides entsteht aus den
   Filmdaten, es gibt also nichts zu pflegen. */
.career{display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vw,40px)}

.career__figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:clamp(16px,2.5vw,30px);margin:0}
.career__figures div{margin:0}
.career__figures dt{
  font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1;color:var(--on-dark);margin:0 0 7px
}
.career__figures dd{
  margin:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-mute)
}

/* Zeitstrahl. Die Punkte sitzen prozentual auf ihrem Jahr; mehrere Filme im
   selben Jahr stapeln sich über --i nach oben, statt einander zu verdecken. */
.career__line{position:relative;height:64px;margin-top:4px}
.career__axis{position:absolute;left:0;right:0;bottom:22px;height:1px;background:var(--line-d)}
.career__dot{
  position:absolute;bottom:calc(22px + var(--i,0) * 9px);width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,50%);background:var(--on-dark-mute);opacity:.5;
  transition:background .25s ease,opacity .25s ease,box-shadow .35s cubic-bezier(.2,.8,.2,1)
}
/* Die Punkte sind 7 px klein. Eine unsichtbare Fläche darum herum macht sie
   mit der Maus treffbar, ohne die Darstellung zu verändern. */
.career__dot::before{content:"";position:absolute;inset:-8px;border-radius:50%}

/* Jahreszahl erscheint über dem Punkt. Eigener Tooltip statt title-Attribut:
   der native braucht eine Sekunde und lässt sich nicht gestalten. */
.career__dot::after{
  content:attr(data-year);position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(5px);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;line-height:1;
  color:var(--void);background:var(--gold);padding:4px 7px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)
}
.career__dot:hover,.career__dot:focus-visible{
  background:var(--gold);opacity:1;outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 30%,transparent),
             0 0 14px color-mix(in srgb,var(--gold) 45%,transparent)
}
.career__dot:hover::after,.career__dot:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

.career__dot--gold{background:var(--gold);opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}

/* Beim Überfahren des Strahls treten die übrigen Punkte zurück, damit der
   angefasste heraussticht. */
.career__line:hover .career__dot:not(:hover){opacity:.25}
.career__line:hover .career__dot--gold:not(:hover){opacity:.45}

@media (prefers-reduced-motion:reduce){
  .career__dot,.career__dot::after{transition:none}
}
.career__from,.career__to{
  position:absolute;bottom:0;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;color:var(--on-dark-mute)
}
.career__from{left:0}
.career__to{right:0}

.career__key{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute)
}
.career__swatch{width:7px;height:7px;border-radius:50%;background:var(--on-dark-mute);opacity:.5;flex:none}
.career__swatch--gold{background:var(--gold);opacity:1}
.career__key .career__swatch:not(:first-child){margin-left:14px}

.card-contact{border:1px solid var(--line-d);padding:30px}
.card-contact dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:4px}
.card-contact dd{margin-bottom:18px;font-size:.98rem}
.card-contact dd:last-child{margin-bottom:0}
.card-contact a:hover{color:var(--gold)}
/* Ohne Bild trägt die Kontaktkarte die Sektion allein. */
.portrait--solo{grid-template-columns:1fr;max-width:620px}
@media (max-width:820px){.portrait{grid-template-columns:1fr}}

/* ---------- 7. Filme ---------- */
.films__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
/* „eine Auswahl“: leiser Zusatz unter der Überschrift, im Mono-Duktus der Sektion. */
.films__note{
  margin:10px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-light-mute)
}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-l);color:var(--on-light-mute);
  transition:background .25s ease,color .25s ease,border-color .25s ease
}
.filters button:hover{border-color:var(--on-light)}
.filters button.is-active{background:var(--on-light);color:var(--paper);border-color:var(--on-light)}

/* ---------- Filme: Querkacheln ----------
   Cover links, Angaben rechts. Die Archivbilder sind Videocover im Hochformat;
   läge das Bild oben, müsste jedes Cover auf ein Breitformat beschnitten werden.
   Zweispaltig, unter 900px einspaltig. */
.grid-films{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px);margin-top:40px}
@media (max-width:900px){.grid-films{grid-template-columns:1fr}}

.film{
  display:grid;grid-template-columns:clamp(96px,12vw,132px) 1fr;gap:clamp(14px,1.8vw,22px);
  background:var(--paper-2);border:1px solid var(--line-l);padding:14px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .25s ease
}
.film:hover{transform:translateY(-2px);border-color:rgba(20,18,16,.32);box-shadow:0 14px 34px -20px rgba(20,18,16,.5)}
.film.is-hidden{display:none}
/* Der Aufmacher filtert mit — in fremden Kategorien wird er ausgeblendet. */
.feat.is-hidden{display:none}
.film--award{border-left:2px solid var(--gold)}

.film__cover{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--on-light)}
.film__cover img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.film:hover .film__cover img{transform:scale(1.04);filter:saturate(1.06)}

/* Kader ohne Archivbild. Perforation wie am Filmstreifen, Jahr groß.
   Wirkt gesetzt statt leer. */
.film__fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:6px;padding:14px 22px;text-align:center;
  background:radial-gradient(120% 90% at 30% 15%,#2E2A24 0%,#141210 72%)
}
.film__fallback::before,.film__fallback::after{
  content:"";position:absolute;top:0;bottom:0;width:11px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.10) 0 6px,transparent 6px 15px)
}
.film__fallback::before{left:4px}
.film__fallback::after{right:4px}
.film__fallback b{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1;color:rgba(242,237,229,.34)}
.film__fallback em{font-family:var(--mono);font-style:normal;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute);max-width:18ch}

.out__empty{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 15%,#2E2A24 0%,#141210 72%)}

.film__medal{
  position:absolute;left:6px;top:6px;display:flex;align-items:center;gap:5px;
  padding:4px 7px;background:rgba(12,11,10,.82);color:var(--gold-soft);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;font-weight:500
}
.film__medal .av-emmy{color:var(--gold-soft)}

/* Lorbeerzweige. Größe kommt aus dem Template über --lw/--lh, damit Kachel
   (15 px) und Aufmacher (22 px) dieselbe Form in unterschiedlicher Größe nutzen. */
.av-laurel{display:inline-flex;align-items:center;gap:2px;line-height:1}
.av-laurel__b{width:var(--lw,7px);height:var(--lh,15px);display:block;flex:none;color:inherit}
.av-laurel__b--r{transform:scaleX(-1)}
.av-laurel b{font-weight:600;font-size:calc(var(--lh,15px) * .62);padding:0 2px;letter-spacing:0}

.film__body{display:flex;flex-direction:column;padding:3px 4px 3px 0;min-width:0}
.film__title{font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1.7vw,1.34rem);line-height:1.16;margin-bottom:7px}
.film__facts{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--on-light-mute);margin-bottom:5px}
.film__meta{font-size:.85rem;line-height:1.45;color:var(--on-light-mute);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.film__more{
  margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-light)
}
.film__more span{transition:transform .3s ease}
.film:hover .film__more span{transform:translateX(5px)}

/* ---------- Aufmacher: der ausgezeichnete Film ----------
   Bleibt auf Papier, hebt sich nur durch Rahmen, Goldkante und Größe ab.
   Bewusst zurückhaltend: die Auszeichnung soll wirken, nicht schreien. */
.feat{
  display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:clamp(20px,3vw,40px);align-items:center;
  background:var(--paper-2);border:1px solid var(--line-l);border-top:2px solid var(--gold);
  padding:clamp(20px,2.6vw,32px);margin-top:40px;
  transition:box-shadow .35s ease,border-color .25s ease
}
.feat:hover{border-color:rgba(20,18,16,.3);box-shadow:0 18px 44px -26px rgba(20,18,16,.55)}
.feat__cover{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--on-light);box-shadow:0 12px 30px -14px rgba(20,18,16,.5)}
.feat__cover img{width:100%;height:100%;object-fit:cover;display:block}
/* Das Abzeichen sitzt auch auf dem Aufmacher-Cover, etwas größer als auf den
   Kacheln, weil das Bild dort mehr Fläche hat. */
/* Das Abzeichen sitzt auch auf dem Aufmacher-Cover, etwas größer als auf den
   Kacheln, weil das Bild dort mehr Fläche hat. Lorbeere und Statuette stehen
   nebeneinander, getrennt durch eine feine Linie: die Zahl gilt allen Preisen,
   die Statuette hebt den Emmy heraus. */
.feat__cover .film__medal{padding:5px 9px;font-size:.66rem;gap:8px}
.feat__cover .film__medal--emmy .av-emmy{
  padding-left:8px;border-left:1px solid color-mix(in srgb,var(--gold-soft) 40%,transparent)
}
.feat__body{min-width:0}
.feat__kick{
  display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#8A6D12
}
.feat__kick .av-emmy{color:var(--gold)}
.feat__t{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.06;margin-bottom:12px}
.feat__sub{color:var(--on-light-mute);line-height:1.6;max-width:54ch;margin-bottom:16px}
.feat__facts{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-light-mute);margin-bottom:20px}
.feat__cta{
  display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-light);border-bottom:1px solid var(--gold)
}
.feat__cta span{transition:transform .3s ease}
.feat:hover .feat__cta span{transform:translateX(5px)}
@media (max-width:640px){
  .feat{grid-template-columns:1fr;gap:20px}
  .feat__cover{max-width:170px}
}

/* ---------- 8. Sequenzen ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.tabs button{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--line-d);color:var(--on-dark-mute);
  transition:background .25s ease,color .25s ease,border-color .25s ease
}
.tabs button:hover{border-color:var(--on-dark);color:var(--on-dark)}
.tabs button.is-active{background:var(--beam);color:#0C0B0A;border-color:var(--beam)}

.grid-clips{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:36px}
@media (max-width:960px){.grid-clips{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.grid-clips{grid-template-columns:repeat(2,1fr)}}
.clip{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark-2);border:1px solid var(--line-d);width:100%}
.clip.is-hidden{display:none}
.clip img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.08) brightness(.82);transition:filter .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.clip:hover img{filter:none;transform:scale(1.06)}
.clip__play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.clip__play i{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(242,237,229,.55);background:rgba(12,11,10,.28);
  transition:background .3s ease,border-color .3s ease,transform .3s ease
}
@supports (backdrop-filter:blur(4px)){
  .clip__play i{backdrop-filter:blur(3px)}
}
.clip:hover .clip__play i,.out--play:hover .clip__play i{transform:scale(1.06)}
.clip__play i::after{content:"";margin-left:3px;border-left:9px solid var(--on-dark);border-top:6px solid transparent;border-bottom:6px solid transparent}
.clip:hover .clip__play i,.out--play:hover .clip__play i{background:var(--gold);border-color:var(--gold)}
.clip:hover .clip__play i::after,.out--play:hover .clip__play i::after{border-left-color:#0C0B0A}
/* Vorschau-Iframe. pointer-events aus, damit der Klick weiter die Kachel
   erreicht und die Lightbox öffnet. */
/* Vorschau. Der Player wird überzogen und zentriert: was an Rändern doch
   noch auftaucht, liegt außerhalb der Kachelkante und wird abgeschnitten.
   Die Fläche darüber fängt jedes Mausereignis ab, den Player erreicht keines. */
.clip__preview{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;animation:av-fade-in .5s ease .3s forwards
}
.clip__preview::after{content:"";position:absolute;inset:0;z-index:2}
/* Rückfall, falls das Skript nicht dazu kommt. Die exakte Größe rechnet
   fitPlayer() in main.js: Beschnitt in Pixeln, nicht in Prozent, weil die
   Titelleiste von YouTube nicht mitskaliert. */
.clip__preview iframe,.clip__preview > div{
  position:absolute;top:50%;left:50%;width:100%;height:100%;border:0;
  transform:translate(-50%,-50%) scale(2);pointer-events:none
}
/* Eigene Datei: nichts zu beschneiden, nichts abzuschirmen. */
.clip__preview video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:none;pointer-events:none
}
@keyframes av-fade-in{to{opacity:1}}

/* Läuft die Vorschau, verschwindet das Abspielzeichen und der Kader dahinter.
   Der Zeiger wird zur Lupe mit Plus: das Video lässt sich vergrößern. */
.is-preview .clip__play{opacity:0;transition:opacity .3s ease}
.is-preview > img{opacity:0;transition:opacity .5s ease .25s}
.is-preview{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230C0B0A%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.6%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228.4%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%2026%2026%22%2F%3E%3Cpath%20d%3D%22M13%209.4v7.2M9.4%2013h7.2%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F2EDE5%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228.4%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%2026%2026%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E3C463%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M13%209.4v7.2M9.4%2013h7.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 13 13, zoom-in}

/* Hochformat (Abseits der Routine): das 16:9-Video füllt die Höhe und wird
   seitlich beschnitten, statt schwarze Balken zu zeigen. */
.out--play .clip__preview iframe,.out--play .clip__preview > div{
  width:auto;height:100%;aspect-ratio:16/9;
  transform:translate(-50%,-50%) scale(1.5)
}
.out--play.is-preview .out__cap{background:linear-gradient(180deg,transparent,rgba(12,11,10,.75))}

.clip__label{
  position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;pointer-events:none;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(12,11,10,.9));
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--on-dark)
}
.clip__scale{display:flex;align-items:center;gap:6px;margin-top:5px;color:var(--beam);font-size:.56rem;letter-spacing:.14em}
.clip__scale i{width:26px;height:1px;background:var(--beam);flex:none}

.lb{position:fixed;inset:0;z-index:90;background:rgba(6,5,5,.96);display:none;place-items:center;padding:var(--gut)}
.lb.is-on{display:grid}
.lb__frame{
  position:relative;width:min(1100px,100%);aspect-ratio:16/9;
  background:#000;border:1px solid var(--line-d);overflow:hidden
}
/* Der Player wird überzogen: die Ränder mit Titel und Logo liegen außerhalb. */
/* Auch hier: Titelleiste und Logo liegen außerhalb. 1,02 war zu knapp,
   die Leiste ist rund 50 px hoch, der Rahmen etwa 620. */
.lb__player{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.22)}
.lb__player video{transform:scale(.82)}   /* eigene Datei braucht keinen Beschnitt */
.lb__player iframe{width:100%;height:100%;border:0;pointer-events:none}
.lb__player video{width:100%;height:100%;object-fit:contain;background:#000}
/* Fängt jeden Klick ab, damit nie ein Mausereignis den Player erreicht.
   Lupe mit Minus: ein Klick führt zurück auf klein. */
.lb__veil{position:absolute;inset:0;cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%230C0B0A%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.6%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228.4%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%2026%2026%22%2F%3E%3Cpath%20d%3D%22M9.4%2013h7.2%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23F2EDE5%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%228.4%22%2F%3E%3Cpath%20d%3D%22M19.2%2019.2%2026%2026%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E3C463%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M9.4%2013h7.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 13 13, zoom-out}

.lb__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,5,5,.92));
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease
}
.lb__frame:hover .lb__bar,.lb__bar.is-on{opacity:1;transform:none}

/* Ohne Zeiger gibt es kein Darüberfahren. Die Leiste steht dort dauerhaft,
   aber zurückgenommen, und die Ziehflächen sind fingerbreit. */
@media (hover:none){
  .lb__bar{opacity:.9;transform:none;padding:14px 14px 18px;gap:10px}
  .lb__seek{height:3px}
  .lb__seek::after{inset:-14px 0}
  .lb__seek-fill::after{width:11px;height:11px;right:-5px}
  .lb__vol{width:44px}
  .lb__vol::after{inset:-14px 0}
  .lb__btn{width:32px;height:32px}
  .lb__time{min-width:34px}
}
@media (hover:none) and (max-width:520px){
  .lb__vol,.lb__time--dur{display:none}   /* Platz für den Fortschritt */
}

.lb__btn{display:grid;place-items:center;width:26px;height:26px;flex:none;color:var(--on-dark)}
.lb__btn:hover{color:var(--gold)}
.lb__icon{display:block}
.lb__icon--play{border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.lb__icon--pause{width:11px;height:14px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:content-box;margin:0}
.lb__icon--sound{width:14px;height:14px;border-left:4px solid currentColor;border-radius:1px;position:relative}
.lb__icon--sound::after{content:"";position:absolute;left:4px;top:-3px;border-left:8px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent}
.lb__icon--muted{opacity:.4}
.lb__icon--full{width:14px;height:14px;border:2px solid currentColor;border-radius:1px}

.lb__time{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--on-dark-mute);flex:none;min-width:38px}

/* Lautstärke: schmaler Balken neben dem Tonschalter. Er wächst beim
   Darüberfahren, damit er im Ruhezustand nicht mit dem Fortschritt konkurriert. */
.lb__vol{
  position:relative;flex:none;width:54px;height:2px;background:rgba(255,255,255,.2);
  cursor:pointer;transition:width .25s ease
}
.lb__vol:hover,.lb__vol:focus-visible{width:80px}
.lb__vol::after{content:"";position:absolute;inset:-9px 0}
.lb__vol-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--beam)}
.lb__vol-fill::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--beam)
}
.lb__seek{position:relative;flex:1;height:2px;background:rgba(255,255,255,.2);cursor:pointer}
.lb__seek::after{content:"";position:absolute;inset:-9px 0}
.lb__seek-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
.lb__seek-fill::after{
  content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--gold)
}

.lb__close{
  position:absolute;top:22px;right:26px;z-index:3;color:var(--on-dark-mute);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase
}
.lb__close:hover{color:var(--gold)}

/* ---------- 8b. Einwilligung für externe Videos ---------- */

/* Kachel ohne eigenes Standbild: kein Vorschaubild von Google, sondern ein
   Kader, der sagt, woher das Video käme. */
.clip__consent{
  position:absolute;inset:0;display:grid;place-items:center;padding:18px;text-align:center;
  background:radial-gradient(120% 90% at 30% 15%,#2E2A24 0%,#141210 72%);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-mute)
}

.yt-gate{
  position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:var(--gut);
  background:rgba(6,5,5,.94)
}
.yt-gate.is-on{display:grid}
.yt-gate__box{
  width:min(560px,100%);padding:clamp(28px,4vw,44px);
  background:var(--dark);border:1px solid var(--line-d)
}
.yt-gate__h{
  font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.15;margin-bottom:16px
}
.yt-gate__t{color:var(--on-dark-mute);font-size:.98rem;margin-bottom:14px}
.yt-gate__t--small{font-size:.84rem}
.yt-gate__t a{color:var(--beam);border-bottom:1px solid rgba(168,203,214,.4)}
.yt-gate__t a:hover{color:var(--gold);border-color:var(--gold)}
.yt-gate__btns{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px}
.yt-gate__box .btn{background:var(--gold);color:#181206}
.yt-gate__box .btn:hover{background:var(--gold-soft)}
.yt-gate__no{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-mute)
}
.yt-gate__no:hover{color:var(--on-dark)}

/* ---------- 9. Lab ---------- */
.lab{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:900px){.lab{grid-template-columns:1fr}}
.lab__link{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 28px}
.talks{margin-top:clamp(48px,7vw,80px);padding-top:36px;border-top:1px solid var(--line-d)}
.talks__h{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:8px}
.grid-clips--talks{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.grid-clips--talks{grid-template-columns:repeat(2,1fr)}}
.crew{border:1px solid var(--line-d);padding:30px}
.crew h3{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:400}
.crew p{color:var(--on-dark-mute);margin-bottom:22px;font-size:.96rem}
.crew p:last-child{margin-bottom:0}

/* ---------- 10. Abseits ---------- */
.grid-out{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px);margin-top:48px}
@media (max-width:900px){.grid-out{grid-template-columns:repeat(2,1fr)}}
.out{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--dark-2);border:1px solid var(--line-l)}
.out--play{cursor:pointer}
/* Im Hochformat sitzt das Zeichen mittig, aber etwas über der Mitte:
   unten steht die Bildunterschrift, und beides auf einer Höhe wäre gedrängt. */
.out--play .clip__play{padding-bottom:64px}
.out img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.out:hover img{filter:none;transform:scale(1.05)}
.out__cap{position:absolute;inset:auto 0 0 0;padding:30px 14px 14px;background:linear-gradient(180deg,transparent,rgba(12,11,10,.92));color:var(--on-dark)}
.out__cap b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem}
.out__cap span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--beam)}

/* ---------- 11. Kontakt ---------- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact__meta{margin-top:34px;font-size:.95rem;line-height:2}
.contact__meta a:hover{color:#8A6D12}
.form{display:grid;gap:18px;position:relative}

/* ---------- Bestätigung nach dem Absenden ----------
   Legt sich über die Felder, statt als Zeile unter dem Knopf zu stehen. Der
   Haken zeichnet sich beim Erscheinen; danach blendet alles wieder aus. */
.form__done{
  position:absolute;inset:-14px;z-index:5;display:grid;place-content:center;justify-items:center;gap:20px;
  background:color-mix(in srgb,var(--paper-2) 94%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1px solid var(--gold);cursor:pointer;
  opacity:0;transform:scale(.98);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)
}
.form__done[hidden]{display:none}
.form__done.is-on{opacity:1;transform:scale(1)}

.form__done svg{width:56px;height:56px;fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.form__done circle{
  stroke-dasharray:151;stroke-dashoffset:151;opacity:.35;
  transition:stroke-dashoffset .6s ease .05s
}
.form__done path{
  stroke-dasharray:34;stroke-dashoffset:34;
  transition:stroke-dashoffset .4s ease .45s
}
.form__done.is-on circle,.form__done.is-on path{stroke-dashoffset:0}

.form__done-msg{
  margin:0;max-width:32ch;text-align:center;line-height:1.5;
  font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--on-light)
}

@media (prefers-reduced-motion:reduce){
  .form__done,.form__done circle,.form__done path{transition:none}
  .form__done circle,.form__done path{stroke-dashoffset:0}
}
.field label{display:block;margin-bottom:7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-mute)}
.field input,.field textarea{
  width:100%;padding:13px 14px;background:var(--paper-2);border:1px solid var(--line-l);border-radius:0;
  font-family:var(--sans);font-size:.98rem;color:var(--on-light);transition:border-color .25s ease
}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--gold)}
.field textarea{min-height:130px;resize:vertical}

/* Einwilligung. Kästchen und Text nebeneinander, Text in Lesegröße statt in
   der versalen Feldbeschriftung — er will gelesen, nicht überflogen werden. */
.field--check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
.field--check input{
  width:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--gold);cursor:pointer
}
.field--check label{
  margin:0;font-family:var(--sans);font-size:.83rem;line-height:1.5;letter-spacing:0;
  text-transform:none;color:var(--on-light-mute);cursor:pointer
}
.field--check a{color:var(--on-light);text-decoration:underline;text-underline-offset:2px}
.field--check a:hover{color:var(--gold)}
.field--check input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{
  justify-self:start;padding:15px 30px;background:var(--on-light);color:var(--paper);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background .3s ease,transform .3s ease,color .3s ease
}
.btn:hover{background:var(--gold);color:#181206;transform:translateY(-2px)}
.btn[disabled]{opacity:.5;pointer-events:none}
.form__note{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--on-light-mute);min-height:1em}

/* ---------- 12. Detailseite ---------- */
.detail__hero{position:relative;min-height:70svh;display:flex;align-items:flex-end;background:var(--dark)}
.detail__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.95)}
.detail__fallback{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,#2C2823 0%,#0C0B0A 70%)}
/* Gezeichneter Filmkopf. Verhält sich wie das Foto: füllt den Hero, wird vom
   Verlauf überlagert, damit der Titel darauf lesbar bleibt. */
.detail__graphic{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Gezeichneter Kopf: flacher und ohne schwere Abdunklung.
   Der Verlauf stammt aus der Zeit, als dort ein Foto lag — ein helles Standbild
   musste gedämpft werden, damit der Titel lesbar bleibt. Die Zeichnung ist
   von sich aus dunkel; derselbe Verlauf hätte sie fast ausgelöscht. Titel und
   Blende stehen zudem diagonal versetzt, sie stören einander nicht. */
.detail__hero--drawn{min-height:48svh}
.detail__hero--drawn .detail__grad{
  background:linear-gradient(180deg,rgba(12,11,10,.15),rgba(12,11,10,.1) 45%,var(--void))
}

/* ---------- Sektionstrennung: Filmperforation ----------
   Nur die Lochreihen, kein Band. Gliedert die Seite wie eine durchlaufende
   Rolle, ohne selbst Aufmerksamkeit zu ziehen. Der Untergrund richtet sich
   nach der Sektion darüber, damit die Naht unsichtbar bleibt. */
.strip{height:30px;position:relative;overflow:hidden}
.strip::before,.strip::after{
  content:"";position:absolute;left:0;right:0;height:9px;
  background:repeating-linear-gradient(90deg,currentColor 0 13px,transparent 13px 34px);
  opacity:.16
}
.strip::before{top:5px}
.strip::after{bottom:5px}
.strip--void{background:var(--void);color:var(--on-dark)}
.strip--dark{background:var(--dark);color:var(--on-dark)}
.strip--paper{background:var(--paper);color:var(--on-light)}
.strip--paper::before,.strip--paper::after{opacity:.2}

/* ---------- Detailseite: Struktur im Hintergrund ----------
   Der Fließtext lag auf glattem Schwarz. Jetzt liegt ein sehr flaches warmes
   Leuchten darunter und an den Außenrändern läuft eine Perforation senkrecht
   durch: die Seite selbst wird zum Kader. Erst ab 1180px, darunter fehlt der
   Platz neben dem Satzspiegel. */
.detail{position:relative;background:var(--void)}
.detail::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 45% at 18% 12%,rgba(201,162,39,.045) 0%,transparent 62%),
    radial-gradient(60% 50% at 88% 58%,rgba(168,203,214,.035) 0%,transparent 60%)
}
.detail > *{position:relative;z-index:1}
/* Die Perforation hängt am Inhaltsbereich, nicht an einer geratenen Höhe:
   der Hero ist min-height, er kann also wachsen. */
.detail > .wrap{position:relative}
@media (min-width:1180px){
  .detail > .wrap::before,.detail > .wrap::after{
    content:"";position:absolute;top:0;bottom:0;width:11px;pointer-events:none;
    background:repeating-linear-gradient(180deg,rgba(242,237,229,.10) 0 14px,transparent 14px 38px)
  }
  .detail > .wrap::before{left:-6px}
  .detail > .wrap::after{right:-6px}
}
.detail__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.7),rgba(12,11,10,.2) 40%,var(--void))}
.detail__intro{position:relative;z-index:2;width:100%;padding-block:clamp(90px,13vh,150px) clamp(40px,6vh,64px)}
.detail__back{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:30px;color:var(--on-dark-mute);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase
}
.detail__back:hover{color:var(--gold)}
.detail__title{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1.02;max-width:18ch}
.detail__orig{margin-top:14px;font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;color:var(--beam)}
.detail__grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(30px,5vw,72px);padding-block:var(--sec);align-items:start}
@media (max-width:900px){.detail__grid{grid-template-columns:1fr}}
/* Archivbild in der Seitenspalte der Detailseite. Unbeschnitten, in eigenen
   Proportionen — hier steht das Cover als Objekt, nicht als Tapete. */
.detail__cover{margin:0 0 28px}
.detail__cover img{width:100%;height:auto;display:block;border:1px solid var(--line-d);box-shadow:0 18px 44px -20px rgba(0,0,0,.7)}
.detail__cover figcaption{
  margin-top:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark-mute)
}
@media (max-width:900px){.detail__cover{max-width:260px}}

.specs{border-top:1px solid var(--line-d)}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-d)}
.specs dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute)}
.specs dd{text-align:right;font-size:.94rem}
.awards{margin-top:44px}
/* Zeichen als Auftakt des Auszeichnungsabschnitts: Lorbeere mit der Zahl,
   daneben die Statuette, getrennt durch eine feine Linie. */
.awards__marks{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.awards__marks .av-laurel{color:var(--gold)}
.awards__marks .av-emmy{padding-left:18px;border-left:1px solid var(--line-d)}

/* Abzeichen auf dem Archivbild der Seitenspalte, wie auf den Kacheln. */
.detail__cover{position:relative}
.detail__cover .film__medal{position:absolute;left:8px;top:8px;gap:7px;padding:5px 8px}
.detail__cover .film__medal--emmy .av-emmy{
  padding-left:7px;border-left:1px solid color-mix(in srgb,var(--gold-soft) 40%,transparent)
}
.awards li{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-d);
  color:var(--on-dark-mute);font-size:.96rem
}
.awards li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translateY(-2px)}

/* ---------- 13. Footer ---------- */
.ftr{background:var(--void);border-top:1px solid var(--line-d);padding-block:64px 32px}
.ftr__logo{padding-bottom:40px;margin-bottom:44px;border-bottom:1px solid var(--line-d);line-height:0}
.ftr__logo .av-logo--footer{width:auto;height:clamp(74px,8vw,96px);opacity:.9;transition:opacity .4s ease}
.ftr__logo .av-logo--footer:hover{opacity:1}
.ftr__logo img.av-logo--footer{height:clamp(74px,8vw,96px)}
.ftr__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px}
@media (max-width:820px){.ftr__top{grid-template-columns:1fr}}
.ftr__h{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:400}
.ftr p,.ftr li{color:var(--on-dark-mute);font-size:.92rem;line-height:1.8}
.ftr a:hover{color:var(--gold)}
.disclaim{margin-top:26px;font-size:.78rem;line-height:1.7;color:#6C645B}
.ftr__legal{
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;color:var(--on-dark-mute)
}
.plain-list li{padding:10px 0;border-bottom:1px solid var(--line-d)}

/* ---------- 13b. Rechtsseiten ---------- */
.page{padding-top:clamp(120px,14vh,180px)}
.legal{max-width:76ch}
.legal__h{
  font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1.2;margin:44px 0 14px;color:var(--on-dark)
}
.legal__h:first-child{margin-top:0}
.legal__p{color:var(--on-dark-mute);margin-bottom:14px;font-size:1rem;line-height:1.75}
.legal__p a,.legal__list a{color:var(--beam);border-bottom:1px solid rgba(168,203,214,.35)}
.legal__p a:hover,.legal__list a:hover{color:var(--gold);border-color:var(--gold)}
.legal__p strong,.legal__list strong{color:var(--on-dark);font-weight:500}
.legal__list{margin:0 0 18px}
.legal__list li{
  color:var(--on-dark-mute);padding:9px 0 9px 20px;border-bottom:1px solid var(--line-d);
  position:relative;font-size:.96rem
}
.legal__list li::before{
  content:"";position:absolute;left:0;top:17px;width:7px;height:1px;background:var(--gold)
}
.ftr__links{display:flex;gap:20px}
.ftr__links a:hover{color:var(--gold)}

/* ---------- 13c. Zurück nach oben ----------
   Ein Objektiv im Kleinen. Der Ring füllt sich mit dem Scrollweg, das ist die
   Fokusanzeige aus dem Hero als Fortschritt. Erscheint erst, wenn der Hero
   durch ist: davor säße er auf der Ton-Steuerung. */
.totop{
  position:fixed;right:var(--gut);bottom:var(--gut);z-index:70;
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}

.totop__label{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-mute);white-space:nowrap;
  opacity:0;transform:translateX(8px);
  transition:opacity .35s ease,transform .35s ease,color .35s ease
}
.totop:hover .totop__label,
.totop:focus-visible .totop__label{opacity:1;transform:none;color:var(--gold)}

.totop__ring{
  position:relative;display:block;width:44px;height:44px;flex:none;
  background:rgba(12,11,10,.55);border-radius:50%
}
@supports (backdrop-filter:blur(4px)){
  .totop__ring{backdrop-filter:blur(6px)}
}
.totop__ring svg{display:block;width:100%;height:100%;overflow:visible}

.totop__track{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1}

/* Fortschritt: der Kreis wird von oben aufgezogen, deshalb gedreht. */
.totop__prog{
  fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  stroke-dasharray:122.5;stroke-dashoffset:122.5;
  transition:stroke-dashoffset .12s linear
}

.totop__mark path{
  fill:none;stroke:var(--on-dark);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)
}
.totop:hover .totop__mark{transform:translateY(-2px)}
.totop:hover .totop__mark path{stroke:var(--gold)}

/* Strichplatte: dieselbe Sprache wie am großen Objektiv. */
.totop__ticks path{stroke:rgba(168,203,214,.35);stroke-width:1;stroke-linecap:round}

@media (max-width:640px){
  .totop{right:16px;bottom:16px;gap:0}
  .totop__label{display:none}   /* kein Platz, und der Pfeil erklärt sich selbst */
  .totop__ring{width:40px;height:40px}
}

/* ---------- 14. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* Werkhinweis in der Biografie: ordnet die gezeigten Arbeiten historisch ein,
   ohne die gelöschte Firma als heutigen Betreiber erscheinen zu lassen. */
/* Werkhinweis im Fuß: steht über dem Rechtstext, etwas hervorgehoben, weil er
   eine Aussage trifft und keine Formalie ist. */
/* Breite genau wie die erste Fußspalte („Kontakt“), damit der Hinweis vor
   „Seiten“ endet statt darunter durchzulaufen. Die Rechnung spiegelt das Raster
   von .ftr__top: 1.2fr von 3.2fr, abzüglich der beiden Abstände von je 36 px.
   Ändert sich das Raster, muss auch diese Zeile mit. */
.ftr__legacy{
  margin:0 0 18px;max-width:calc((100% - 72px) * .375);
  font-size:.9rem;line-height:1.6;font-style:italic;
  color:var(--on-dark);padding-left:14px;border-left:1px solid var(--gold)
}
@media (max-width:820px){
  /* Der Fuß ist hier einspaltig, eine Begrenzung ergäbe keinen Sinn mehr. */
  .ftr__legacy{max-width:none}
}

/* Produktionshinweis auf der Filmseite. Erscheint nur bei Filmen, die im
   Produktionsfeld „AV Dokumenta“ tragen — nicht pauschal auf allen. */
.detail__prod{margin-top:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ============================================================
   Durchblättern (Publikation als Pop-up-Flipbook)
   pdf.js rendert die Seiten; hier nur Bühne, Blatt und Bedienung.
   ============================================================ */

/* „… unter anderen“ unter der Beitragenden-Liste. */
.book-detail__among{margin-top:10px;font-size:.82rem;font-style:italic;color:var(--on-dark-mute)}

/* Knopf auf der Buch-Detailseite. */
.book-leaf{
  display:inline-flex;align-items:center;gap:11px;margin:18px 0 4px;
  padding:13px 22px;border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(201,162,39,.14),rgba(201,162,39,.05));
  color:var(--gold-soft);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease,transform .25s ease
}
.book-leaf:hover,.book-leaf:focus-visible{background:var(--gold);color:var(--void);transform:translateY(-1px)}
.book-leaf__ext{font-family:var(--mono);font-size:.85em;margin-left:-3px}
.book-leaf__icon{
  width:20px;height:16px;flex:none;background:currentColor;
  -webkit-mask:center/contain no-repeat var(--book-glyph);
  mask:center/contain no-repeat var(--book-glyph)
}
:root{
  --book-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 4C9 2 4 2 2 3v14c2-1 7-1 10 1 3-2 8-2 10-1V3c-2-1-7-1-10 1Z'/%3E%3Cpath d='M12 4v13'/%3E%3C/g%3E%3C/svg%3E")
}

/* Sperrt den Hintergrund, solange das Pop-up offen ist. */
body.fb-lock{overflow:hidden}

.fb{
  position:fixed;inset:0;z-index:120;display:none;flex-direction:column;
  background:rgba(6,5,5,.975);
  opacity:0;transition:opacity .3s ease
}
.fb.is-on{display:flex;opacity:1}

.fb__top{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(44px,6vh,58px);
  padding:8px clamp(16px,4vw,40px);
  border-bottom:1px solid var(--line-d)
}
.fb__title{
  position:absolute;left:clamp(16px,4vw,40px);top:50%;transform:translateY(-50%);
  max-width:34%;
  font-family:var(--display);font-weight:400;font-size:clamp(.9rem,1.8vw,1.15rem);
  color:var(--on-dark-mute);margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* Schließen: ruhiger Balken über die Breite. Beim Darüberfahren tritt das × hervor. */
.fb__x{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:min(560px,58%);height:34px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--on-dark-mute);
  transition:background .25s ease,border-color .25s ease
}
.fb__x:hover,.fb__x:focus-visible{background:rgba(255,255,255,.05);border-color:var(--line-d)}
.fb__x-mark{font-size:1.5rem;line-height:1;opacity:.45;transition:opacity .25s ease,color .25s ease,transform .25s ease}
.fb__x:hover .fb__x-mark,.fb__x:focus-visible .fb__x-mark{opacity:1;color:var(--gold);transform:scale(1.12)}
.fb__x-label{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.45;transition:opacity .25s ease
}
.fb__x:hover .fb__x-label,.fb__x:focus-visible .fb__x-label{opacity:.9}
@media (max-width:640px){ .fb__title{display:none} .fb__x{width:70%} }

.fb__stage{
  position:relative;flex:1;min-height:0;
  display:grid;place-items:center;
  padding:clamp(16px,3vw,40px);
  perspective:2600px
}

.fb__book{
  position:relative;display:flex;align-items:stretch;
  height:100%;max-width:100%;
  transform-style:preserve-3d;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))
}
.fb__side{display:flex;align-items:center;height:100%;background:var(--paper)}
.fb__side--left{justify-content:flex-end}
.fb__side--right{justify-content:flex-start}
.fb__side.is-empty{background:transparent}
.fb__side canvas{display:block;height:100%;width:auto;max-width:100%}

/* Falzschatten in der Mitte, nur bei aufgeschlagenem Buch. */
.fb__book:not(.fb__book--single)::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);
  pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.28) 46%,rgba(0,0,0,.28) 54%,transparent)
}
.fb__book--single .fb__side--left{display:none}
.fb__book--single .fb__side--right{justify-content:center;width:100%}

/* Das umblätternde Blatt. */
.fb__leaf{
  position:absolute;top:0;bottom:0;width:50%;
  transform-style:preserve-3d;z-index:6;
  transition:transform .58s cubic-bezier(.36,.15,.2,1)
}
.fb__leaf--fwd{left:50%;transform-origin:left center}
.fb__leaf--bwd{left:0;transform-origin:right center}
.fb__leaf--fwd.is-turning{transform:rotateY(-180deg)}
.fb__leaf--bwd.is-turning{transform:rotateY(180deg)}

.fb__leaf-face{
  position:absolute;inset:0;overflow:hidden;background:var(--paper);
  display:flex;align-items:center;
  -webkit-backface-visibility:hidden;backface-visibility:hidden
}
.fb__leaf-face canvas{display:block;height:100%;width:auto}
.fb__leaf-face--back{transform:rotateY(180deg)}
.fb__leaf--fwd .fb__leaf-face--front{justify-content:flex-start}
.fb__leaf--fwd .fb__leaf-face--back{justify-content:flex-end}
.fb__leaf--bwd .fb__leaf-face--front{justify-content:flex-end}
.fb__leaf--bwd .fb__leaf-face--back{justify-content:flex-start}

/* Klickflächen: die halbe Bühne links/rechts, mit Blätter-Hinweis. */
.fb__zone{
  position:absolute;top:0;bottom:0;width:34%;z-index:3;background:transparent;border:0;cursor:pointer;
  display:grid;place-items:center;transition:background .25s ease
}
.fb__zone--prev{left:0;justify-items:start;padding-left:clamp(10px,3vw,40px)}
.fb__zone--next{right:0;justify-items:end;padding-right:clamp(10px,3vw,40px)}
.fb__zone.is-off{cursor:default;pointer-events:none}
.fb__zone-hint{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;transition:opacity .25s ease
}
.fb__zone-arrow{
  width:clamp(44px,6vw,62px);height:clamp(44px,6vw,62px);
  display:grid;place-items:center;border:1px solid var(--line-d);border-radius:50%;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--on-dark);
  background:rgba(12,11,10,.4)
}
@supports (backdrop-filter:blur(3px)){.fb__zone-arrow{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}
.fb__zone-txt{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)}

/* Ruhezeichen rechts: pulsiert dezent, damit man auch ohne Darüberfahren sieht,
   dass hier weitergeblättert wird. Weicht beim Hover dem vollen Hinweis. */
.fb__nudge{
  position:absolute;top:50%;right:clamp(14px,3vw,44px);transform:translate(0,-50%);
  font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1;color:var(--gold-soft);
  opacity:.3;pointer-events:none;
  animation:fb-nudge 2.1s ease-in-out infinite
}
@keyframes fb-nudge{
  0%,100%{opacity:.22;transform:translate(0,-50%)}
  50%{opacity:.62;transform:translate(6px,-50%)}
}
.fb__zone--next:hover .fb__nudge{opacity:0;animation:none}
.fb__zone.is-off .fb__nudge{opacity:0;animation:none}
@media (prefers-reduced-motion:reduce){ .fb__nudge{animation:none;opacity:.42} }
@media (hover:hover){
  .fb__zone:hover:not(.is-off) .fb__zone-hint{opacity:1}
  .fb__zone--prev:hover:not(.is-off){background:linear-gradient(90deg,rgba(201,162,39,.07),transparent)}
  .fb__zone--next:hover:not(.is-off){background:linear-gradient(270deg,rgba(201,162,39,.07),transparent)}
  .fb__zone:hover:not(.is-off) .fb__zone-arrow{border-color:var(--gold);color:var(--gold-soft)}
}
@media (hover:none){
  /* Ohne Zeiger bleiben die Hinweise dauerhaft dezent sichtbar. */
  .fb__zone-hint{opacity:.4}
  .fb__zone.is-off .fb__zone-hint{opacity:0}
}

/* Dezente Fortschrittsanzeige über der Navigation. */
.fb__progress{height:2px;width:100%;background:rgba(255,255,255,.08)}
.fb__progress-fill{height:100%;width:0;background:var(--gold);transition:width .35s ease}

.fb__nav{
  display:flex;justify-content:center;align-items:center;gap:20px;
  padding:clamp(11px,1.7vw,17px);border-top:1px solid var(--line-d)
}
.fb__counter{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--on-dark-mute);
  min-width:86px;text-align:center
}
.fb__arrow{
  width:46px;height:46px;display:grid;place-items:center;flex:none;cursor:pointer;
  border:1px solid var(--line-d);color:var(--on-dark);font-size:1.1rem;
  transition:border-color .2s ease,color .2s ease,background .2s ease
}
.fb__arrow:hover:not(:disabled),.fb__arrow:focus-visible:not(:disabled){border-color:var(--gold);color:var(--gold)}
.fb__arrow:disabled{opacity:.28;cursor:default}

.fb__spinner{
  position:absolute;inset:0;margin:auto;width:34px;height:34px;z-index:8;
  border:2px solid rgba(255,255,255,.18);border-top-color:var(--gold);border-radius:50%;
  display:none;animation:fb-spin .8s linear infinite;pointer-events:none
}
.fb__spinner.is-on{display:block}
@keyframes fb-spin{to{transform:rotate(360deg)}}

.fb__error{
  position:absolute;inset:0;margin:auto;max-width:36ch;height:max-content;z-index:8;
  text-align:center;color:var(--on-dark-mute);font-size:.95rem;padding:0 20px
}

@media (prefers-reduced-motion:reduce){
  .fb__leaf{transition:none}
  .fb__spinner{animation:none}
}