/* ============================================================
   Reza Tajiki — Film · Fotografie · Text
   Typografie: Manrope (Überschriften) + Poppins (Lauftext)
   — dieselben Schriften wie auf reza13.de, selbst gehostet
   ============================================================ */

/* ---------- Schriften (lokal, keine externen Abrufe) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/manrope-var-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('fonts/manrope-var-latin.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:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400-normal-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400-normal-latin.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:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/poppins-500-normal-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/poppins-500-normal-latin.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:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/poppins-700-normal-latin.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:'Poppins';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/poppins-400-italic-latin.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}

:root{
  --bg:#0b0b0a; --bg2:#141413; --fg:#f0ede7; --dim:#8d8981; --text:#cfcac2;
  --line:#26251f; --accent:#c2a878;
  --display:'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:var(--display);          /* Altbestand: zeigt jetzt auf Manrope */
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;
  line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(194,168,120,.28)}

/* ---------- Typo-Bausteine ---------- */
h1,h2,h3,h4,.display{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.16}
.kicker,.eyebrow{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent)}
.meta{font-family:var(--sans);font-size:11.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px}
.meta em{color:var(--accent);font-style:normal}

/* ---------- Kopf ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:20px 40px;backdrop-filter:blur(16px);background:rgba(11,11,10,.72);border-bottom:1px solid var(--line)}
.mark{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-.01em;
  display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.15}
/* Rezas Zeichen über dem Namen (21.10.2026) */
.mark img{height:49px;width:auto}
/* Der Name klein in Gold unter dem Zeichen (21.10.2026) */
.mark span{font-family:var(--sans);font-size:9.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);margin-top:5px;white-space:nowrap}
nav{display:flex;gap:28px;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
nav a{position:relative;padding-bottom:3px}
nav a:hover,nav a[aria-current]{color:var(--fg)}
/* Der Menü-Knopf gehört nur aufs Handy — ohne diese Zeile stand er auch am Desktop im Kopf. */
.menue{display:none}
nav a[aria-current]:after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 40px 72px;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,10,.5) 0%,rgba(11,11,10,.16) 38%,rgba(11,11,10,.93) 100%)}
.hero .inner{position:relative;max-width:var(--max);width:100%}
.hero h1{font-size:clamp(36px,5.8vw,84px);line-height:1.02;letter-spacing:-.032em;margin:0 0 24px;max-width:19ch}
.hero p{margin:0;max-width:600px;color:var(--text);font-size:17px;line-height:1.7}
.eyebrow{margin-bottom:26px}

/* ---------- Abschnitte ---------- */
section{padding:120px 40px;border-top:1px solid var(--line)}
.wrap{max-width:var(--max);margin:0 auto}
.kopfzeile{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:58px;gap:20px;flex-wrap:wrap}
.kopfzeile h2{font-size:clamp(24px,2.8vw,34px);margin:0}
.kopfzeile span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.kopfzeile a.mehr{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
h2.abteil{font-size:clamp(26px,3.4vw,42px);margin:14px 0 22px;max-width:24ch}

/* ---------- Werkliste ---------- */
.werk{display:grid;grid-template-columns:300px 1fr;gap:48px;padding:48px 0;border-top:1px solid var(--line);align-items:start}
.werk:first-of-type{border-top:0}
.werk figure{margin:0;overflow:hidden;background:var(--bg2)}
.werk figure img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.werk:hover figure img{transform:scale(1.03)}
.werk.wide figure img{aspect-ratio:16/9}
/* Hochkant-Filme: die Kachel bekommt das Format des Films, damit das Cover ganz zu sehen ist */
.werk.vertikal figure img{aspect-ratio:9/16}
.werk h3{font-size:25px;letter-spacing:-.02em;margin:0 0 8px}
.werk h3 a:hover{color:var(--accent)}
.werk p{margin:0 0 14px;max-width:56ch;color:var(--text);font-size:15.5px;line-height:1.7}
.zitat{font-family:var(--sans);font-size:15px;color:#a9a49b;border-left:1px solid var(--accent);padding-left:18px;max-width:52ch}

/* ---------- Raster ---------- */
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.raster figure{margin:0;background:var(--bg2);overflow:hidden}
/* Kacheln im Format der Bilder (3:2 quer) statt 4:5 hochkant — so wird kein Bild mehr
   angeschnitten. Hochkante Bilder stehen vollständig, dahinter dieselbe Aufnahme
   weichgezeichnet als Fläche. */
.raster a,.serienkarte a{position:relative;display:block;overflow:hidden;background:var(--bg2)}
.kfuell{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(26px) brightness(.45);transform:scale(1.15)}
.raster img{position:relative;width:100%;aspect-ratio:3/2;object-fit:contain;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.raster figure:hover img{transform:scale(1.04)}
/* Bildunterschrift mit Serientitel links und Bildzahl rechts */
.raster figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:13.5px;color:var(--dim);padding:12px 2px 0;letter-spacing:.01em}
.raster figcaption b{color:var(--fg);font-weight:500}
.raster figcaption span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* Zwei gleiche Spalten (Textblöcke). Als Klasse, nicht inline: nur so kann die
   Handy-Regel sie auf eine Spalte umstellen — Inline-Stile schlagen jede Media-Query. */
.zweier{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

/* ---------- Text ---------- */
.prosa{max-width:620px;font-family:var(--sans);font-size:18px;line-height:1.8;color:var(--text)}
.prosa .lead{font-family:var(--display);font-weight:500;font-size:23px;line-height:1.4;letter-spacing:-.02em;color:#f4f1eb}
.prosa .quelle{display:block;margin-top:20px;font-family:var(--sans);font-size:11.5px;color:var(--dim);
  letter-spacing:.16em;text-transform:uppercase}

/* ---------- Filmdetail ---------- */
.filmkopf{max-width:var(--max);margin:0 auto;padding:158px 40px 30px}
.filmkopf h1{font-size:clamp(32px,4.8vw,62px);letter-spacing:-.03em;margin:0 0 12px;line-height:1.04}
.filmkopf .meta{margin-bottom:0}
.player{max-width:var(--max);margin:28px auto 0;padding:0 40px}
.player .rahmen{position:relative;background:#000;border:1px solid var(--line);overflow:hidden}
.player .rahmen img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.55}
.player .hinweis{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:rgba(11,11,10,.84);
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--dim);border-top:1px solid var(--line)}
.player .play,.werk .rahmen .play{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;background:rgba(11,11,10,.76);border:1px solid rgba(240,237,231,.55);color:#f0ede7;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.player .play:hover,.werk .rahmen .play:hover{background:rgba(194,168,120,.16);border-color:var(--accent);color:#fff}

/* ---------- Video im Werkskasten (Arbeiten-Übersicht) ----------
   Das Standbild liegt als Poster im Rahmen; das Vimeo-iframe wird erst beim Klick
   eingesetzt (assets/player.js). Wer kein JavaScript hat, kommt über den Verweis auf
   die Filmseite. */
.werk .rahmen{position:relative;background:#000;border:1px solid var(--line);overflow:hidden;
  aspect-ratio:16/9;background-size:cover;background-position:center}
.werk.vertikal .rahmen{aspect-ratio:9/16;max-width:460px;margin:0 auto}
.werk .rahmen img{width:100%;height:100%;object-fit:cover;opacity:.72}
.werk .rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.vertikal .rahmen{max-width:520px;margin:0 auto}
.player.vertikal .rahmen img{aspect-ratio:4/5}
/* Vimeo-Player: Poster liegt als Hintergrund darunter, falls das iframe noch lädt */
.player .rahmen.vimeo{aspect-ratio:16/9;background-size:cover;background-position:center}
.player.vertikal .rahmen.vimeo{aspect-ratio:4/5}
.player .rahmen.vimeo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .hinweiszeile{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--dim);margin:12px 0 0}
.zweispalt{max-width:var(--max);margin:0 auto;padding:74px 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.zweispalt h2{font-size:21px;margin:0 0 16px}
.zweispalt p{color:var(--text);font-size:16px;line-height:1.75;margin:0 0 14px}
.daten{font-size:14px;color:var(--dim);line-height:1.95}
.daten b{color:var(--fg);font-weight:500}
.stills{max-width:var(--max);margin:0 auto;padding:0 40px 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stills img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg2)}
/* Hochkant-Filme: Standbilder im 9:16-Format statt als breiter Streifen */
.stills.vertikal img{aspect-ratio:9/16}
.zurueck{display:inline-block;margin-top:26px;font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.zurueck:hover{color:var(--accent)}

/* ---------- Festival-Auswahl (Filmseite) ---------- */
.festliste{max-width:var(--max);margin:0 auto;padding:0 40px 80px}
.festliste h2{font-size:21px;margin:0 0 6px}
.festliste .zusatz{color:var(--dim);font-size:13.5px;margin:0 0 20px}
.festliste ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.festliste li{display:flex;align-items:baseline;gap:16px;padding:12px 2px;border-bottom:1px solid var(--line);
  font-size:15.5px;color:var(--fg)}
.festliste .jahr{color:var(--dim);font-size:12.5px;letter-spacing:.14em;min-width:44px}
.festliste .name{flex:1}
.festliste .ort{color:var(--dim);font-size:13.5px}
.festliste .kat{color:var(--accent);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:700px){
  .festliste{padding:0 20px 56px}
  .festliste li{flex-wrap:wrap;gap:4px 12px}
  .festliste .name{flex:1 1 100%}
}

/* ---------- Über mich: zwei Porträts ---------- */
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 46px}
.portraits img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--bg2);display:block}
@media (max-width:700px){.portraits{grid-template-columns:1fr;gap:12px}}

/* ---------- Kontakt / Fuß ---------- */
footer{padding:100px 40px 48px;border-top:1px solid var(--line)}
.kontakt{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.kontakt h2{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.03em;margin:0 0 16px;line-height:1.08}
.kontakt a.mail{border-bottom:1px solid var(--accent);padding-bottom:2px}
.fuss{max-width:var(--max);margin:68px auto 0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12px;color:var(--dim);letter-spacing:.1em;border-top:1px solid var(--line);padding-top:22px}
.fuss a:hover{color:var(--fg)}
/* Instagram-Symbol in der Fußzeile: sitzt auf der Textlinie, erbt die Textfarbe,
   beim Überfahren die Akzentfarbe. Kein Fremdskript, das Symbol ist im HTML. */
.fuss .insta{display:inline-flex;align-items:center;vertical-align:-3px;margin-left:2px}
.fuss .insta svg{display:block}
.fuss .insta:hover svg{color:var(--accent)}

@media(max-width:900px){
  /* Kopf auf dem Handy: eine Zeile (Name + „Menü"), darunter das aufklappbare Menü.
     Vorher stand hier nav{display:none}; auf dem Handy gab es damit überhaupt keine
     Navigation, man konnte nur dem Textverlauf folgen.
     Ohne JavaScript — die Klasse .hat-js fehlt dann — bleibt die Navigation als
     offene Liste sichtbar; es gibt also keinen Zustand ohne Navigation.
     position:sticky statt fixed, damit der Kopf den Inhalt nicht überdeckt. */
  header{position:sticky;padding:13px 20px 12px;flex-wrap:wrap;align-items:center;
    justify-content:space-between}
  .mark{font-size:17px}
  .mark img{height:41px}
  .mark span{font-size:8.5px;letter-spacing:.14em;margin-top:4px}
  nav{display:flex;flex-wrap:wrap;gap:2px 20px;width:100%;border-top:1px solid var(--line);
    padding:12px 0 13px;font-size:11px;letter-spacing:.15em;line-height:1.5}
  nav a{padding:4px 0}
  /* Knopf „Menü" — nur wenn nav.js gelaufen ist */
  .menue{display:none}
  header.hat-js .menue{display:inline-flex;align-items:center;gap:10px;background:transparent;
    border:0;padding:6px 0;cursor:pointer;color:var(--fg);font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
  .menue .balken{display:flex;flex-direction:column;gap:4px;width:20px}
  .menue .balken i{display:block;height:1px;width:100%;background:currentColor;
    transition:transform .25s ease,opacity .25s ease}
  header.nav-offen .menue .balken i:nth-child(1){transform:translateY(5px) rotate(45deg)}
  header.nav-offen .menue .balken i:nth-child(2){opacity:0}
  header.nav-offen .menue .balken i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  /* Aufgeklappte Liste: liegt über dem Inhalt, statt ihn nach unten zu schieben */
  header.hat-js nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;padding:0 20px 12px;background:rgba(11,11,10,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.55);font-size:12px}
  header.hat-js.nav-offen nav{display:flex}
  header.hat-js nav a{padding:15px 0;width:100%;border-top:1px solid var(--line);
    letter-spacing:.16em}
  header.hat-js nav a:first-child{border-top:0}
  header.hat-js nav a[aria-current]:after{left:0;right:auto;width:26px}
  .hero{min-height:86vh;padding:0 20px 48px}
  section{padding:76px 20px}
  .werk{grid-template-columns:1fr;gap:22px}
  .raster{grid-template-columns:1fr 1fr}
  .kontakt{grid-template-columns:1fr}
  .filmkopf{padding:46px 20px 20px}
  .zweier{grid-template-columns:1fr;gap:26px}
  .player{padding:0 20px}
  .zweispalt{grid-template-columns:1fr;gap:28px;padding:52px 20px}
  .stills{grid-template-columns:1fr;padding:0 20px 60px}
}

/* ---------- Serien (Fotografie) — redaktionelles Layout ---------- */
.serienraster{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.serienkarte{margin:0}
.serienkarte img{position:relative;width:100%;aspect-ratio:3/2;object-fit:contain;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.serienkarte:hover img{transform:scale(1.035)}
.serienkarte figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:13px 2px 0;font-size:13.5px;color:var(--fg)}
.serienkarte figcaption b{font-weight:500}
.serienkarte figcaption span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
h1.serie{letter-spacing:-.03em}
h1.serie.lang{font-size:clamp(22px,2.6vw,34px);line-height:1.25;max-width:34ch}

/* Der Serienstrom: Text schmal und links, Bilder groß */
.serienstrom{max-width:1340px;margin:0 auto;padding:10px 40px 80px}
.serienstrom .txt{max-width:560px}
.serienstrom .txt p{font-family:var(--sans);font-size:18px;line-height:1.82;color:var(--text);margin:0 0 16px}
.serienstrom .txt p:first-child{color:#e8e4dc}
/* Gedichtzeilen: enger, ohne Absatzabstand */
.serienstrom .txt.gedicht{max-width:600px}
.serienstrom .txt.gedicht p{margin:0 0 3px;font-size:17.5px;line-height:1.75}
.serienstrom .txt.gedicht p:last-child{margin-bottom:0}
.serienstrom figure{margin:0}
.serienstrom img{width:100%;display:block;background:var(--bg2)}

/* Kapitelmarke mit Nummer und Linie */
h2.kapitel{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);max-width:560px;margin:74px 0 26px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;gap:16px;align-items:baseline}
h2.kapitel .nr{color:var(--dim);letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* Text und Bild im Dialog (ein Bild + kurzer Text) */
.dialog{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin:54px 0}
.dialog .txt{max-width:none}
.dialog.links figure.einzel{order:-1}
figure.einzel img{width:100%}

/* Ein Bild, groß und aus der Mitte gerückt */
figure.bild-gross{margin:44px 0}
figure.bild-gross img{width:74%;margin-left:auto}
figure.bild-gross.links img{margin-left:0;margin-right:auto}
figure.bild-gross.voll img{width:100%;margin:0}

/* Bilder eines Abschnitts: gleich breite Spalten, gleiche Kanten, kein Versatz */
.bildraster{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin:38px 0}
.bildraster img{margin:0}
.bild-paar{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin:38px 0}
.bild-spann{margin:38px 0}
.bild-spann .zwei{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.bildstapel{display:flex;flex-direction:column;gap:24px;margin:26px 0}
.serientext{max-width:560px;padding:20px 0 64px}
.serientext p{font-family:var(--sans);font-size:18px;line-height:1.82;color:var(--text);margin:0 0 16px}

@media(max-width:900px){
  .serienraster{grid-template-columns:1fr 1fr}
  /* Bildfeld auf dem Handy: kleinere Kacheln, damit die Fläche dicht bleibt */
  .serienstrom{padding:10px 20px 56px}
  .serienstrom .txt{max-width:none}
  .dialog{grid-template-columns:1fr;gap:24px;margin:38px 0}
  .dialog.links figure.einzel{order:0}
  .bild-paar{grid-template-columns:1fr;gap:22px;margin:34px 0}
  .bild-spann .zwei{grid-template-columns:1fr;margin-top:22px}
  figure.bild-gross{margin:32px 0}
  figure.bild-gross img{width:100%;margin:0}
  .bildraster{grid-template-columns:1fr;gap:22px;margin:26px 0}
  h2.kapitel{margin-top:52px}
}

/* ---------- Formular ---------- */
.kontaktform{display:flex;flex-direction:column;gap:16px;max-width:460px}
.kontaktform label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.kontaktform input,.kontaktform textarea{font-family:var(--sans);font-size:15px;color:var(--fg);
  background:var(--bg2);border:1px solid var(--line);padding:13px 15px;outline:none}
.kontaktform input:focus,.kontaktform textarea:focus{border-color:var(--accent)}
.kontaktform textarea{resize:vertical;min-height:130px}
.kontaktform button{align-self:flex-start;margin-top:6px;padding:14px 28px;background:transparent;color:var(--fg);
  border:1px solid var(--accent);font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;transition:background .3s ease}
.kontaktform button:hover{background:rgba(194,168,120,.14)}
.kontaktform .klein{font-size:12.5px;color:var(--dim);margin:6px 0 0;line-height:1.6}
/* ---------- Rechtstexte ---------- */
.recht{max-width:720px;margin:0 auto;padding:10px 40px 90px}
.recht h2{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:40px 0 12px}
.recht p,.recht li{color:var(--text);font-size:15.5px;line-height:1.75;margin:0 0 10px}
.recht ul{padding-left:18px}
@media(max-width:900px){.recht{padding:10px 20px 60px}}

/* ---------- Bildansicht ---------- */
img.zoombar{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:99;display:none;background:#0b0b0a;
  align-items:center;justify-content:center;padding:34px}
.lightbox.offen{display:flex}
.lightbox img{max-width:100%;max-height:calc(100vh - 68px);object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.6);cursor:zoom-out}
.lightbox button{position:absolute;background:transparent;border:0;color:#e8e4dc;cursor:pointer;
  font-family:var(--sans);font-size:26px;line-height:1;padding:10px 14px;opacity:.72}
.lightbox button:hover{opacity:1}
.lb-zu{top:14px;right:16px;font-size:32px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%);font-size:40px}
.lb-next{right:10px;top:50%;transform:translateY(-50%);font-size:40px}
.lb-zaehler{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
@media(max-width:700px){.lightbox{padding:10px}.lb-prev,.lb-next{display:none}}

/* ---------- Über mich: Werdegang als Zeitleiste (21.10.2026) ---------- */
.werdegang{border-top:1px solid var(--line);padding:70px 40px}
.wdk{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 18px}
.laufbahn{margin:0}
.laufbahn dt{font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;color:var(--accent);
  text-transform:uppercase;margin:0 0 4px}
.laufbahn dd{margin:0 0 22px;padding-left:16px;border-left:1px solid var(--line);line-height:1.6}
.laufbahn dd:last-child{margin-bottom:0}
.laufbahn .note{color:var(--dim);font-size:14px;display:inline-block;margin-top:4px}
@media (max-width:700px){.werdegang{padding:48px 20px}}

/* ---------- Filmseite: Standbild mit Abspielknopf, Vimeo erst beim Klick (21.10.2026) ---------- */
.rahmen.vimeo{position:relative}
.rahmen.vimeo>img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;opacity:1}
.rahmen.vimeo>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rahmen.vimeo .ohnebild{position:absolute;inset:0;background:var(--bg2)}
.abspielen{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(180deg,rgba(11,11,10,.10) 0%,rgba(11,11,10,.42) 100%);
  color:var(--fg);font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.abspielen .knopf{width:76px;height:76px;border-radius:50%;border:1px solid rgba(240,237,231,.6);
  display:flex;align-items:center;justify-content:center;background:rgba(11,11,10,.3);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.abspielen .knopf::after{content:"";width:0;height:0;margin-left:6px;
  border-left:17px solid var(--fg);border-top:11px solid transparent;border-bottom:11px solid transparent}
.abspielen:hover .knopf,.abspielen:focus-visible .knopf{transform:scale(1.08);border-color:var(--accent)}
.abspielen:hover,.abspielen:focus-visible{color:var(--accent)}
.abspielen:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.vimeolink{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--fg);
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:700px){.abspielen .knopf{width:62px;height:62px}.abspielen{gap:14px}}