/* ============================================================
   Luisa Thiel - v3, cinematische Fassung
   ------------------------------------------------------------
   Richtung: Filmtitelkarte, nicht Portfolio-Raster.
   Der Sizzle setzt seinen Titel weiss, versal, leicht und weit
   gesperrt - genau diese Stimme traegt hier die ganze Seite.

   Farbe   : ein warmes Papierbeige, eine dunkle Tinte, sonst nur Bild.
             Keine Akzentfarbe.
   Schrift : Jost (geometrische Groteske, Futura-Linie) in drei Registern.
             Instrument Serif kursiv nur fuer Tagline, Filmtitel und die
             Kontaktzeile - bewusst NICHT im Hero.
   Flaeche : keine Trennlinien, keine Nummern. Rhythmus statt Rahmen.
   Motion  : Schnitte und langsame Kamerafahrten. Alles laeuft ueber
             transform/opacity, nichts ueber Layout-Eigenschaften.
   ============================================================ */

/* ---------- 1. Schriften ---------- */
@font-face{font-family:Jost;font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/jost-latin-ext-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Jost;font-style:normal;font-weight:200 700;font-display:swap;
  src:url(../fonts/jost-latin-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Jost;font-style:italic;font-weight:200 700;font-display:swap;
  src:url(../fonts/jost-latin-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-latin-ext-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-latin-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Token ---------- */
:root{
  --paper:#F3EEE5;
  --paper-0:#FCFAF6;
  --paper-2:#EBE3D5;
  --paper-3:#E2D9C8;
  --ink:#16150F;
  --ink-2:#4B463B;
  --ink-3:#867C6C;
  --light:#FBF8F2;

  --wrap:1560px;
  --pad:clamp(20px,5vw,110px);
  /* Randabstand der randlosen Bereiche - schmal, damit Kopfzeile,
     Hero, Titelband und Fuss auf einer Kante mit den Bildern sitzen. */
  --pad-edge:clamp(20px,2.4vw,46px);
  --nav-h:78px;

  /* Titelregister - versal, leicht, gesperrt, wie die Titelkarte des Films */
  --display:clamp(44px,9.2vw,164px);
  --h2:clamp(28px,4.9vw,80px);
  --film:clamp(32px,6.2vw,112px);
  --statement:clamp(23px,3.7vw,60px);
  --tagline:clamp(26px,4.5vw,76px);
  /* Fliesstext */
  --body:clamp(16.5px,1.12vw,19.5px);
  --lead:clamp(20px,1.62vw,27px);
  /* Klappenregister - die Schrift der Inserts und Credits */
  --slate:clamp(10px,.72vw,12px);
  --track-slate:.3em;
  --track-title:.055em;

  --ease:cubic-bezier(.16,1,.3,1);
  --slow:1.15s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Jost,"Avenir Next",Avenir,system-ui,sans-serif;
  font-weight:400;font-size:var(--body);line-height:1.72;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* max() gegen die Aussparung: im Querformat schiebt die Kamera-Insel den
   Inhalt sonst unter den schwarzen Rand. */
.wrap{
  max-width:var(--wrap);margin:0 auto;width:100%;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}

/* Volle Breite: kein Satzspiegel-Deckel, nur ein schmaler Rand. Sonst stuenden
   diese Texte auf grossen Schirmen 276px innen, waehrend die Bilder bei 0
   beginnen. Die Lesebereiche (About, Synopsis, Editor) behalten bewusst den
   normalen Satzspiegel - dort braucht der Text eine Zeilenlaenge. */
.nav .wrap,
.hero > .wrap,
.dir-stage-text,
.contact > .wrap,
footer .wrap{
  max-width:none;
  padding-left:max(var(--pad-edge),env(safe-area-inset-left));
  padding-right:max(var(--pad-edge),env(safe-area-inset-right));
}

/* ---------- 3. Filmkorn ---------- */
/* Sehr feine Koernung ueber der ganzen Seite. Gibt dem Beige Material,
   ohne eine Farbe einzufuehren. */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- 4. Typografische Register ---------- */
/* Klappe: Versalien, weit gesperrt - die Stimme der Inserts */
.slate{
  font-size:var(--slate);font-weight:400;
  letter-spacing:var(--track-slate);text-transform:uppercase;
  color:var(--ink-3);margin:0 0 clamp(20px,2.6vw,40px);
}
.title{
  font-weight:300;text-transform:uppercase;
  letter-spacing:var(--track-title);line-height:.94;
  margin:0;
}
h1,h2{font-weight:300;margin:0}
h2.title{font-size:var(--h2);margin-bottom:clamp(28px,4vw,64px)}
p{margin:0 0 1.4em;max-width:56ch}
p:last-child{margin-bottom:0}
.lead{font-size:var(--lead);font-weight:350;line-height:1.48}
.mute{color:var(--ink-2)}
em,.serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400}

/* ---------- 5. Maskierter Zeilen-Reveal ---------- */
/* Jede Zeile sitzt in einem ueberlaufenden Kasten und faehrt von unten
   herein. Das ist der Grundgestus der ganzen Seite. */
.lines > span{display:block;overflow:hidden;padding-bottom:.06em}
.lines > span > i{
  display:block;font-style:inherit;
  transform:translateY(110%);
  transition:transform var(--slow) var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.lines.in > span > i{transform:none}

/* Einfacher Reveal fuer Absaetze, Bilder, Gruppen */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);}
.rv.in{opacity:1;transform:none}

/* Bildblende plus leichte Kamerafahrt.
   Die Blende sitzt bewusst auf dem Kind, nicht auf dem beobachteten Element -
   ein clip-path auf dem Ziel selbst meldet dem IntersectionObserver eine leere
   Flaeche, der Reveal wuerde nie ausgeloest.
   Die Fahrt laeuft auf dem picture (einmalig, darf einen Uebergang haben),
   die Parallaxe auf dem img (jedes Bild, darf keinen haben). */
.wipe > picture,.wipe > img{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.07);
  transition:clip-path 1.4s var(--ease),transform 1.9s var(--ease);
  transition-delay:calc(var(--i,0) * 110ms);
}
.wipe.from-l > picture{clip-path:inset(0 100% 0 0)}
.wipe.from-r > picture{clip-path:inset(0 0 0 100%)}
.wipe.in > picture,.wipe.in > img{clip-path:inset(0 0 0 0);transform:none}

/* Randlos: bricht aus dem Satzspiegel auf die volle Viewportbreite aus.
   body traegt overflow-x:clip, deshalb entsteht keine Scrollleiste.
   Bewusst hier bei den allgemeinen Bausteinen, nicht in einer Sektion -
   die Regel stand schon einmal in der Director-Sektion und ist bei deren
   Umbau mitgeloescht worden. */
.bleed{width:100vw;max-width:none;margin-left:50%;transform:translateX(-50%)}

/* Rahmen mit innerer Kamerafahrt: das Bild ist groesser als sein Ausschnitt
   und wird beim Scrollen langsam verschoben. */
.frame{position:relative;overflow:hidden}
.frame > picture,.frame > img{display:block;height:100%}
.frame img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.14) translate3d(0,var(--par,0px),0);
  backface-visibility:hidden}

/* ---------- 6. Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:calc(var(--nav-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;color:var(--light);
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);
}
.nav.solid{background:rgba(243,238,229,.97);color:var(--ink)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.brand{
  font-size:13px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  white-space:nowrap;padding-right:.34em;
}
.nav-links{display:flex;gap:clamp(14px,2vw,34px);align-items:center}

/* Hamburger. Zwei Striche, die sich beim Oeffnen kreuzen.
   Am Rechner ausgeblendet - dort steht die Leiste ausgeschrieben da. */
.nav-toggle{
  display:none;position:relative;z-index:2;
  width:44px;height:44px;margin-right:-10px;
  padding:0;border:0;background:none;cursor:pointer;color:inherit;
}
.nav-toggle span{
  position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;
  transition:transform .38s var(--ease),opacity .28s var(--ease);
}
.nav-toggle span:first-child{top:19px}
.nav-toggle span:last-child{top:25px}
body.menu-open .nav-toggle span:first-child{transform:translateY(3px) rotate(45deg)}
body.menu-open .nav-toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}
.nav-links a{
  font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  opacity:.7;transition:opacity .3s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{opacity:1}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;height:100svh;min-height:560px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(34px,5.5vw,84px);
  overflow:hidden;isolation:isolate;background:#0B0C0D;
}
.hero-media{position:absolute;inset:0;z-index:0;
  transform:scale(var(--heroScale,1)) translate3d(0,var(--heroY,0px),0);
  will-change:transform;backface-visibility:hidden}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
/* Standbild nur auf dem Telefon, Video nur darueber. Die Grenze muss
   mit der Abfrage in site.js uebereinstimmen (700px). */
.hero-still{display:none}
@media (max-width:700px){
  .hero-still{display:block;position:absolute;inset:0}
  #heroVideo{display:none}
}
/* Abdunklung fuer die Schrift plus Vignette plus Auslauf ins Papier */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,11,12,.5) 0%,rgba(10,11,12,.05) 26%,rgba(10,11,12,.5) 74%,rgba(10,11,12,.72) 100%),
    radial-gradient(120% 85% at 50% 45%,transparent 42%,rgba(10,11,12,.45) 100%);
}
.hero > .wrap{position:relative;z-index:3;opacity:var(--heroFade,1)}
.hero h1{
  font-size:var(--display);font-weight:300;line-height:.92;
  letter-spacing:.045em;text-transform:uppercase;color:var(--light);
}
.hero h1 .l2{padding-left:.16em}
.hero .slate{color:rgba(251,248,242,.8);margin-bottom:clamp(24px,3vw,44px)}
/* Der Titelblock bleibt stehen, solange das Video laeuft. */
/* Zweites Register des Heros - dieselbe Familie wie der Name, aber
   Gemischtschreibung statt Versalien und deutlich leichter. Die kursive
   Zierschrift stand hier vorher im Widerspruch zur geometrischen Groteske
   und wirkte wie eine Fussnote unter dem Namen. */
.hero-sub{
  font-size:clamp(19px,1.95vw,32px);font-weight:300;
  line-height:1.3;letter-spacing:.005em;
  color:rgba(251,248,242,.92);
  margin:clamp(30px,3.6vw,56px) 0 0;max-width:none;white-space:nowrap;
}
/* Grosser Knopf, mittig unten. Kommt erst, wenn das Video bei Luisa steht. */
.cue{
  position:absolute;z-index:5;left:50%;bottom:clamp(26px,3.6vw,58px);
  display:flex;flex-direction:column;align-items:center;gap:13px;
  font-size:var(--slate);letter-spacing:var(--track-slate);text-transform:uppercase;
  color:rgba(251,248,242,.8);
  opacity:0;transform:translate(-50%,16px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),color .3s var(--ease);
}
.cue.on{opacity:1;transform:translate(-50%,0)}
.cue:hover{color:var(--light)}
.cue span{
  width:clamp(56px,4.8vw,76px);height:clamp(56px,4.8vw,76px);
  border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(251,248,242,.42);
  transition:box-shadow .35s var(--ease),background .35s var(--ease);
}
.cue:hover span{box-shadow:inset 0 0 0 1px rgba(251,248,242,.9);background:rgba(251,248,242,.08)}
.cue span::before{
  content:"";width:11px;height:11px;margin-top:-4px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);animation:bob 2.6s var(--ease) infinite;
}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(-3px,-3px)}50%{transform:rotate(45deg) translate(3px,3px)}}

/* Kinoblenden: fahren beim Laden auf und geben das Bild frei */
.bars{position:absolute;inset:0;z-index:2;pointer-events:none}
.bars::before,.bars::after{
  content:"";position:absolute;left:0;right:0;height:14vh;background:#0B0C0D;
  transition:transform 1.5s var(--ease) .25s;
}
.bars::before{top:0;transform:translateY(0)}
.bars::after{bottom:0;transform:translateY(0)}
body.ready .bars::before{transform:translateY(-100%)}
body.ready .bars::after{transform:translateY(100%)}

/* ---------- 8. Sektionen ---------- */
section{position:relative;padding-block:clamp(84px,12vw,210px)}
.band{padding-block:clamp(70px,10vw,170px)}
.band-2{background:var(--paper-2)}
.statement{
  font-size:var(--statement);font-weight:300;line-height:1.16;
  letter-spacing:-.005em;margin:0;max-width:24ch;
}
.tagline{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:var(--tagline);line-height:1.16;letter-spacing:-.01em;
  margin:0;max-width:none;
}
/* Im About-Text steht sie als Schlusszeile, nicht als eigenes Band -
   deshalb kleiner und mit Abstand nach oben. */
.about-text .tagline{
  font-size:clamp(23px,2.7vw,42px);line-height:1.2;
  margin-top:clamp(38px,4.5vw,74px);
}

/* ---------- 9. About ---------- */
/* Text links, Bild rechts - so von Luisa vorgegeben */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,5vw,96px);align-items:start;
}
.about-media{aspect-ratio:4/5}
.about-text{padding-top:clamp(4px,2vw,48px);max-width:52ch}


/* ---------- 10. Documentary Director ---------- */
/* Reihenfolge: Titel und Lead, dann das Kapitelbild, dann die Filmtafel als
   Hoehepunkt, danach die Synopsis in zwei beschrifteten Spalten. Alles sitzt
   in einer Achse untereinander, nichts steht als Bruchstueck daneben. */
/* Titelband: Video randlos, Text liegt darin. Unten links wie eine
   Titelkarte, mit Verlauf darunter damit die Schrift traegt. */
#director{padding-top:0}
.dir-stage{
  position:relative;isolation:isolate;overflow:hidden;background:#0B0C0D;
  min-height:clamp(500px,82svh,940px);
  display:flex;align-items:flex-end;
  padding-bottom:clamp(64px,8.5vw,150px);
  color:var(--light);
}
.dir-media{position:absolute;inset:0;z-index:0}
.dir-media video,.dir-media img{width:100%;height:100%;object-fit:cover;display:block}
.dir-stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,12,13,.40) 0%,rgba(11,12,13,.04) 24%,rgba(11,12,13,.5) 70%,rgba(11,12,13,.8) 100%),
    linear-gradient(90deg,rgba(11,12,13,.58) 0%,rgba(11,12,13,.12) 58%,transparent 100%);
}
.dir-stage-text{position:relative;z-index:2}
.dir-stage h2{color:var(--light);margin-bottom:clamp(16px,2vw,32px)}
.dir-lead{
  font-size:clamp(19px,1.85vw,30px);font-weight:300;line-height:1.34;
  max-width:none;margin:0;color:rgba(251,248,242,.92);
}

.film-slate{
  margin-top:clamp(64px,8.5vw,150px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,80px);align-items:end;
}
.film-slate > .slate{grid-column:1;margin-bottom:clamp(18px,2vw,30px)}
.film-title{
  font-size:var(--film);font-weight:300;line-height:.95;
  letter-spacing:var(--track-title);text-transform:uppercase;
  grid-column:1;margin:0;
}
.film-title .of{font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:0;font-weight:400}

/* Der Satz traegt die Nennung, die Plattformen haengen darunter -
   derselbe Bezug wie die Klammer im Originaltext. */
.film-credit{grid-column:2;max-width:44ch;padding-bottom:.4em}
.film-credit p{font-size:clamp(16px,1.15vw,19px);font-weight:400;line-height:1.6;margin:0 0 1.3em}
.film-credit b{font-weight:500}
.fm-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:7px clamp(12px,1.4vw,22px);
}
.fm-list li{
  font-size:var(--slate);font-weight:400;letter-spacing:var(--track-slate);
  text-transform:uppercase;color:var(--ink-2);
}

.film-body{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,96px);margin-top:clamp(56px,7.5vw,128px);
}
.fb-col .slate{margin-bottom:18px}
.dir-note{margin-top:2em;color:var(--ink-2)}
.dir-note a{box-shadow:inset 0 -1px 0 rgba(22,21,15,.35);transition:box-shadow .3s var(--ease)}
.dir-note a:hover{box-shadow:inset 0 -1px 0 var(--ink)}

/* ---------- 11. Stills ---------- */
/* Randlos ueber die volle Breite, wie Hero, Titelband und Kontakt.
   Je Reihe sind die beiden Kacheln annaehernd gleich hoch - 6|6 im
   Verhaeltnis 3:2, und 4|8 als Hochformat neben Querformat. Dadurch
   entstehen keine unmotivierten Loecher mehr. */
.stills{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(10px,1.4vw,22px);
  align-items:start;
}
/* figure bringt vom Browser margin: 1em 40px mit - das fraesse je Kachel
   80px Breite weg und das Raster waere nicht mehr randlos. */
.stills figure{margin:0}
.s-full {grid-column:1/13;   aspect-ratio:21/9}
.s-half {grid-column:span 6; aspect-ratio:3/2}
.s-quart{grid-column:span 4; aspect-ratio:3/4}
.s-three{grid-column:span 8; aspect-ratio:3/2}
/* Versatz und Grundlinie sorgen fuer den Rhythmus, nicht der Zufall */
.stills .push{margin-top:clamp(26px,4.5vw,88px)}
.stills .settle{align-self:end}

/* ---------- 12. Editor / Logos ---------- */
.editor-intro{max-width:58ch;margin-bottom:clamp(40px,5.5vw,88px)}
.logos{
  display:grid;
  /* 42 Logos: nur 3, 6 und 7 Spalten gehen ohne Rest auf. auto-fill haette
     je nach Fensterbreite eine angebrochene letzte Reihe ergeben. */
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(24px,2.8vw,48px) clamp(18px,2.2vw,38px);
}
.logo{
  margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;min-width:0;min-height:clamp(70px,7vw,104px);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 32ms);
}
.logos.in .logo{opacity:1;transform:none}
.logo img{
  width:100%;height:clamp(32px,3.2vw,50px);object-fit:contain;
  filter:grayscale(1) contrast(.88);opacity:.46;
  transition:filter .45s var(--ease),opacity .45s var(--ease),transform .45s var(--ease);
}
.logo figcaption{
  font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;line-height:1.35;overflow-wrap:anywhere;
  opacity:0;transform:translateY(5px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.logo:hover img,.logo:focus-within img{filter:none;opacity:1;transform:scale(1.18)}
.logo:hover figcaption,.logo:focus-within figcaption{opacity:1;transform:none}
.logo.featured img{height:clamp(44px,4.4vw,68px)}
.logo.featured{min-height:clamp(88px,8.6vw,128px)}

/* ---------- 13. Newsletter ---------- */
.nl-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:start}
.nl-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.nl-form .full{grid-column:1/-1}
.nl-form label{
  display:block;font-size:var(--slate);font-weight:400;
  letter-spacing:var(--track-slate);text-transform:uppercase;color:var(--ink-3);
  margin-bottom:9px;
}
.nl-form input{
  width:100%;font-family:inherit;font-size:16px;font-weight:400;color:var(--ink);
  background:rgba(22,21,15,.035);border:0;border-radius:0;padding:15px 16px;
  box-shadow:inset 0 0 0 1px rgba(22,21,15,.14);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.nl-form input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ink);background:transparent}
.nl-form button{
  font-family:inherit;font-size:11px;font-weight:400;
  letter-spacing:var(--track-slate);text-transform:uppercase;
  color:var(--paper);background:var(--ink);border:0;
  padding:17px 38px;cursor:pointer;justify-self:start;
  transition:opacity .3s var(--ease);
}
.nl-form button:disabled{opacity:.35;cursor:not-allowed}
.nl-hint{font-size:13px;color:var(--ink-3);margin-top:16px;max-width:46ch;min-height:2.4em}
.nl-hint a{box-shadow:inset 0 -1px 0 rgba(134,124,108,.6)}
.nl-hint.err{color:#8A3A2A}
.nl-hint.ok{color:var(--ink)}

/* Honigtopf: aus dem Bild geschoben statt display:none - manche Bots
   erkennen ausgeblendete Felder und lassen sie dann aus. */
.nl-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nl-consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-size:13px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.nl-consent input{
  appearance:none;flex:none;width:17px;height:17px;margin-top:2px;
  background:transparent;box-shadow:inset 0 0 0 1px rgba(22,21,15,.35);
  cursor:pointer;transition:box-shadow .2s var(--ease),background .2s var(--ease);
}
.nl-consent input:checked{background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.nl-consent input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nl-consent a{box-shadow:inset 0 -1px 0 rgba(75,70,59,.45)}
.nl-form button[aria-busy="true"]{opacity:.5;pointer-events:none}

/* ---------- 14. Kontakt ---------- */
.contact{
  position:relative;isolation:isolate;overflow:hidden;color:var(--light);
  min-height:100svh;display:flex;align-items:center;background:#0B0C0D;
  padding-bottom:clamp(120px,14vw,190px);
}
.contact > .wrap{position:relative;z-index:3}
.contact .frame{position:absolute;inset:0;z-index:0}
.contact::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(11,12,13,.8) 4%,rgba(11,12,13,.42) 54%,rgba(11,12,13,.18) 100%),
    linear-gradient(180deg,var(--paper) 0%,rgba(11,12,13,.2) 13%,transparent 32%,rgba(11,12,13,.45) 74%,rgba(11,12,13,.82) 100%);
}
.contact .slate{color:rgba(251,248,242,.7)}
.contact h2{margin-bottom:clamp(22px,3vw,44px)}
.contact-lead{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(24px,3vw,50px);line-height:1.2;margin:0 0 clamp(34px,4.4vw,66px);max-width:14ch;
}
.contact-links{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px);margin-bottom:clamp(30px,4vw,54px);align-items:flex-start}
.contact-links a{
  font-size:clamp(17px,1.6vw,24px);font-weight:300;
  padding-bottom:5px;box-shadow:inset 0 -1px 0 rgba(251,248,242,.28);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.contact-links a:hover,.contact-links a:focus-visible{box-shadow:inset 0 -1px 0 var(--light);transform:translateX(7px)}
.contact-loc{color:rgba(251,248,242,.72);max-width:32ch;margin:0;font-size:15px}

/* ---------- 15. Footer ---------- */
/* Der Footer sitzt im Kontaktbild und schliesst die Seite damit ab -
   kein heller Streifen mehr darunter. */
footer{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding-bottom:calc(clamp(24px,3vw,44px) + env(safe-area-inset-bottom));padding-top:clamp(20px,2.4vw,34px)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer p,.footer-links a{
  font-size:var(--slate);font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(251,248,242,.62);margin:0;
}
.footer-links{display:flex;gap:clamp(16px,2vw,32px)}
.footer-links a{transition:color .3s var(--ease)}
.footer-links a:hover{color:var(--light)}

/* Auf den Rechtsseiten steht der Footer wieder normal auf Papier */
.legal ~ footer{position:static;padding-top:clamp(32px,4vw,58px)}
.legal ~ footer p,.legal ~ footer .footer-links a{color:var(--ink-3)}
.legal ~ footer .footer-links a:hover{color:var(--ink)}

/* ---------- 16. Rechtstexte ---------- */
.legal{padding-top:calc(var(--nav-h) + clamp(46px,7vw,104px));padding-bottom:clamp(60px,8vw,120px)}
.legal .wrap{max-width:860px}
.legal h1{font-size:clamp(30px,4.2vw,62px);font-weight:300;letter-spacing:var(--track-title);
  text-transform:uppercase;line-height:.98;margin:0 0 .8em}
.legal h2{font-size:clamp(13px,1vw,15px);font-weight:400;letter-spacing:var(--track-slate);
  text-transform:uppercase;margin:3em 0 .9em;color:var(--ink)}
.legal h3{font-size:15px;font-weight:500;margin:1.9em 0 .4em}
.legal p,.legal li{font-size:16px;line-height:1.8;color:var(--ink-2);max-width:70ch}
.legal ul{padding-left:1.15em;margin:0 0 1.5em}
.legal li{margin-bottom:.45em}
.legal a{box-shadow:inset 0 -1px 0 rgba(75,70,59,.4)}
.legal a:hover{box-shadow:inset 0 -1px 0 var(--ink)}
.legal .updated{font-size:13px;color:var(--ink-3)}
.legal .todo{background:var(--paper-3);padding:18px 22px;font-size:14px;
  color:var(--ink-2);max-width:70ch;margin:0 0 2em}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.back{display:inline-block;margin-bottom:3.4em;font-size:var(--slate);
  letter-spacing:var(--track-slate);text-transform:uppercase;color:var(--ink-3)}
.back:hover{color:var(--ink)}

/* ---------- 17. Responsive ---------- */
@media (max-width:1040px){
  .about-grid,.nl-grid,.film-body,.film-slate{grid-template-columns:1fr;gap:34px}
  .logos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .film-slate > .slate,.film-title,.film-credit{grid-column:1}
  .about-text{padding-top:0}
  .s-full,.s-half,.s-quart,.s-three{grid-column:1/13;aspect-ratio:3/2}
  .stills .push{margin-top:0}
  .stills .settle{align-self:start}
  .frame img{transform:scale(1.08) translate3d(0,var(--par,0px),0)}
}
@media (max-width:680px){
  .nav-links{gap:12px}
  .nav-links a{font-size:9.5px;letter-spacing:.16em}
  /* Menue liegt hinter dem Hamburger und faehrt als Flaeche auf. */
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:clamp(14px,3.4vh,26px);
    padding:0 max(var(--pad-edge),env(safe-area-inset-left));
    background:var(--paper);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  }
  body.menu-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{
    font-size:clamp(21px,6.2vw,30px);letter-spacing:.14em;
    color:var(--ink);opacity:1;padding:6px 0;
  }
  body.menu-open{overflow:hidden}
  /* Wortmarke bleibt ueber der Flaeche stehen, sonst verliert man die
     Orientierung, sobald das Menue offen ist. */
  .brand{position:relative;z-index:2}
  body.menu-open .nav,body.menu-open .nav .brand{color:var(--ink)}

  /* Kein scroll-gekoppeltes Verschieben auf dem Telefon. Safari rechnet den
     Schwung-Scroll auf einem eigenen Faden, das Nachziehen per JavaScript
     hinkt dann sichtbar hinterher - genau das Zittern. */
  .frame img{transform:none}
  .hero-media{transform:none;will-change:auto}
  .hero-sub{white-space:normal;font-size:17px}
  .hero{padding-bottom:clamp(52px,9vw,90px)}
  .cue{display:none}
  .bars::before,.bars::after{height:9vh}
  .nl-form{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
  .pin span{font-size:9px;letter-spacing:.18em}
  .pin-up span{left:38px;top:-34px}
  .pin-down span{left:56px;top:14px}
  .pin-left span{right:42px;top:8px}
  .logo{min-height:62px}
  .logo.featured{min-height:78px}
  .statement,.tagline{max-width:none}
  .dir-lead{font-size:17px}
  .lines.dir-lead > span{overflow:visible}
  /* Seitliche Abdunklung wuerde auf schmalen Schirmen alles zudecken */
  .contact::after{
    background:linear-gradient(180deg,var(--paper) 0%,rgba(11,12,13,.34) 12%,rgba(11,12,13,.52) 44%,rgba(11,12,13,.62) 78%,rgba(11,12,13,.42) 93%,var(--paper) 100%);
  }
}

/* ---------- 18. Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.lines > span > i,.logo{opacity:1;transform:none;transition:none}
  .wipe{clip-path:none;transition:none}
  .frame img{transform:none}
  .bars::before,.bars::after{display:none}
  .grain{animation:none}
  .cue span{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}