/* christianlessner.com — Stylesheet.
   Werte 1:1 aus dem Claude-Design "Freelance Colorist Website"
   (Website.dc.html, Variante typo=a, logo=1, hero=1, Kundenwand, Sprachlinie,
   Banner "Kachelfarbe", helle Bänder). Handgeschrieben, kein Buildschritt. */

/* ---------------------------------------------------------------- Fonts --
   Lokal gehostet: das Design lädt Josefin Sans und Fira Mono von Google,
   das würde auf einer deutschen Seite eine Einwilligung nötig machen.
   Gleiche Schnitte, gleiche Dateien, nur von der eigenen Domain. */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/josefin-sans-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: 'Josefin Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/josefin-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fira-mono-400-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: 'Fira Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fira-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fira-mono-500-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: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/fira-mono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/fira-mono-700-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: 'Fira Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/fira-mono-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- Tokens --
   Der Hebel für einen Farb- oder Schriftwechsel. Alles Weitere greift
   ausschließlich hierauf zu; hartkodierte Werte stehen nur noch in den acht
   Platzhalter-Gradienten. */
:root {
  --accent: #3f5d9e;
  --accent-hi: #304778;

  --paper: #f5f4f1;      /* Seitengrund */
  --ink: #1a1a19;        /* Fließtext, Überschriften */
  --ink-2: #383837;      /* About-Fließtext, Kundenraster */
  --body-c: #545452;     /* Einleitungen und Absätze auf Grundfläche */
  --meta: #5c5c59;       /* Mono-Label, Zwischenzeilen */
  --dim: #6b665d;        /* Crew-Zeile, Sprachumschalter */
  --line: #dddcd7;       /* Trennlinien */
  --line-2: #eae5dc;     /* Credits-Zeilen */
  --card: #eae9e5;       /* Kachel- und Reelfläche */
  --card-line: #e0dfda;
  --card-line-hi: #cfc7ba;
  --frame: #e7e6e2;      /* Bildrahmen, solange kein Bild da ist */
  --white: #fdfdfc;      /* Kontaktkarte, Fakten-Box */
  --white-line: #e7e2d9;
  --header-bg: rgba(246, 243, 238, .72);
  --header-line: rgba(27, 26, 23, .07);
  --scrim: rgba(20, 19, 17, .66);   /* Hover-Abdunklung über Bildern */
  --sep: #c6c0b5;

  --pad: clamp(24px, 4.6vw, 76px);
  --maxw: 1380px;

  --head: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Fira Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  --head-w: 600;
  --head-ls: 0.012em;
  --head-case: uppercase;
  --head-lh: 0.94;
  --h1: clamp(46px, 6.8vw, 104px);
  --h2: clamp(34px, 4.6vw, 68px);
  --h3: clamp(22px, 1.7vw, 27px);
  --body-lh: 1.65;
  --body-size: clamp(16.5px, 1.15vw, 19px);

  color-scheme: light;
}

/* ----------------------------------------------------------------- Basis -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: inherit;
}

::selection { background: var(--accent); color: var(--white); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Überschriften: eine Regel, die Größe kommt je Stelle aus den Tokens */
.h-display {
  margin: 0;
  font-family: var(--head);
  font-weight: var(--head-w);
  line-height: var(--head-lh);
  letter-spacing: var(--head-ls);
  text-transform: var(--head-case);
}

.page-h1 {
  margin: 0 0 0 -0.045em;
  font-size: var(--h1);
}

/* Mono-Kleinschrift, das durchgehende Label-Format des Designs */
.label {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--meta);
  text-transform: uppercase;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 80;
}
.skip-link:focus {
  left: var(--pad);
  top: 12px;
  background: var(--accent);
  color: var(--white);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Auszeichnungen im Fließtext der Sprachdateien (<b class="accent">,
   <b class="strong">). .dot ist der Punkt hinter "Admin" im Adminbereich. */
.accent { font-weight: 700; color: var(--accent); }
.strong { font-weight: 700; color: var(--ink); }
.dot { color: var(--accent); }

/* Hervorgehobene Zeile (About) */
.zitat {
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--accent);
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.zitat em, .zitat .accent { font-style: normal; font-weight: inherit; color: var(--accent); }

/* Seitenraster: jede Sektion sitzt in --pad, der Inhalt in --maxw */
.sec { padding-left: var(--pad); padding-right: var(--pad); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* --------------------------------------------- Platzhalter-Gradienten ----
   Die acht Keys aus der Datenbank (projects.placeholder_gradient). Namen und
   Anzahl sind gesetzt — Umbenennen ließe bestehende Projekte still auf
   g-night fallen. Für den hellen Look neu abgestimmt: gedeckte Duotöne, die
   neben dem Papierton stehen können und weiße Overlay-Schrift tragen. */
.g-beauty  { background: linear-gradient(115deg, #d8b6a4 0%, #a97f6d 55%, #6d4c40 100%); }
.g-auto    { background: linear-gradient(115deg, #8ea4c6 0%, #5b7398 60%, #33455f 100%); }
.g-food    { background: linear-gradient(115deg, #d8a578 0%, #ab6f45 55%, #6b4227 100%); }
.g-beauty2 { background: linear-gradient(115deg, #cfa9b6 0%, #9c7286 60%, #5f4453 100%); }
.g-teal    { background: linear-gradient(115deg, #9dbdba 0%, #5d8b89 60%, #33555a 100%); }
.g-night   { background: linear-gradient(115deg, #93aae0 0%, #52679c 60%, #2f3c5d 100%); }
.g-green   { background: linear-gradient(115deg, #b0bb96 0%, #7b8961 60%, #4a5439 100%); }
.g-amber   { background: linear-gradient(115deg, #dcc08a 0%, #b08f4f 60%, #6e5a2f 100%); }

/* ---------------------------------------------------------------- Header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 14px clamp(18px, 2.8vw, 46px);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--header-line);
}

/* Browser ohne backdrop-filter bekommen eine deckende Fläche, sonst läge
   Text auf durchscheinenden Bildern. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: #f6f3ee; }
  .nav-mobile { background: #f6f3ee; }
}

.brand {
  flex: 0 0 auto;
  color: var(--ink);
  transition: opacity .45s ease;
}
.brand:hover { color: var(--ink); }
.brand-name {
  display: block;
  font-family: var(--head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.brand-sub {
  display: block;
  margin-top: 1px;
  font-family: var(--head);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

/* Auf der Startseite trägt die H1 den Namen; die Wortmarke blendet sich erst
   beim Scrollen ein. Ohne JavaScript bleibt sie sichtbar (die Klasse setzt
   erst main.js), damit der Weg zurück nie verloren geht. */
.site-header.is-scrolled-top .brand { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.site-header.is-scrolled-top .brand:focus-visible { opacity: 1; pointer-events: auto; }
/* Bei offenem Menü liegt die H1 unter dem Overlay — dann muss die Wortmarke
   sichtbar sein, sonst hat die Startseite gar kein Logo mehr im Bild. */
body.menu-open .site-header.is-scrolled-top .brand { opacity: 1; pointer-events: auto; }

.nav-desktop {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 38px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  display: inline-block;
  padding-bottom: 7px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.19em;
  color: var(--meta);
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--dim);
  border-left: 1px solid var(--line);
  margin-left: calc(clamp(14px, 1.8vw, 26px) - clamp(16px, 2.2vw, 38px));
  padding-left: clamp(14px, 1.8vw, 26px);
}
.lang-switch a {
  color: var(--dim);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s;
}
.lang-switch a:hover { color: var(--ink); }
.lang-active {
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--accent);
}
.lang-sep { color: var(--sep); }

/* Burger: erst unter 880px sichtbar, siehe Mobil-Block unten.
   44x44 ist die Mindestgröße für ein Touchziel, die Striche sind 2px stark —
   mit 1px verschwanden sie auf dem Telefon fast im Hintergrund. */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  flex: 0 0 auto;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s, opacity .2s;
}
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Vollflächiges Menü. Liegt unter dem Header (z-index 45 gegen 50), damit
   Wortmarke und Schließen-Kreuz darüber stehen bleiben; das Padding oben hält
   die Einträge frei vom Header. Erst ab 881px gar nicht mehr im Spiel. */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  flex-direction: column;
  align-items: flex-start;
  /* Oben beginnend statt mittig: die Einträge sollen dicht unter dem Header
     stehen. Der Header ist mobil konstant 62px hoch (eine Zeile aus Wortmarke
     und Unterzeile), 104px lassen also gut 40px Luft darunter. */
  padding: 104px var(--pad) 40px;
  /* Dasselbe Glas wie der Header, nur etwas deckender (82 statt 72 %): im
     Header steht nur die Wortmarke, hier steht Lesetext — und hinter dem Menü
     können dunkle Kacheln liegen. Nebeneinander sieht man den Unterschied
     nie, der Header ist bei offenem Menü durchsichtig (siehe unten). */
  background: rgba(246, 243, 238, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.menu-open .nav-mobile { display: flex; }
/* Bei offenem Menü verzichtet der Header auf sein eigenes Glas. Sonst lägen
   dort zwei Schichten übereinander und der Headerbereich hebe sich als
   hellerer Streifen ab; so ist der ganze Bildschirm eine Glasfläche und nur
   die Trennlinie markiert den Header. */
body.menu-open .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Seite hinter dem Menü stilllegen, sonst scrollt sie unter dem Overlay weg */
body.menu-open { overflow: hidden; }
html:has(body.menu-open) { overflow: hidden; }

/* Und weil dieses overflow:hidden dem Dokument den Scrollport nimmt, hört
   position:sticky auf zu greifen: der Header fiele auf seine statische
   Position am Seitenanfang zurück und wäre bei gescrollter Seite nicht mehr
   im Bild — samt Wortmarke und Schließen-Kreuz. Solange das Menü offen ist,
   hängt er deshalb fix am Viewport. */
body.menu-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.nav-mobile .nav-link {
  padding: 10px 0;
  border-bottom: 0;
  font-family: var(--head);
  font-weight: var(--head-w);
  font-size: clamp(30px, 8.5vw, 44px);
  line-height: 1.15;
  letter-spacing: var(--head-ls);
  text-transform: var(--head-case);
  color: var(--ink);
}
.nav-mobile .nav-link:hover { color: var(--accent); }
.nav-mobile .nav-link.active { color: var(--accent); }

.nav-mobile-meta {
  width: 100%;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
/* DE / EN steht als fünfter Eintrag in derselben Größe wie die Navigation */
.nav-mobile .lang-switch {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
  gap: 0.35em;
  padding: 10px 0;
  font-family: var(--head);
  font-weight: var(--head-w);
  font-size: clamp(30px, 8.5vw, 44px);
  line-height: 1.15;
  letter-spacing: var(--head-ls);
  text-transform: var(--head-case);
}
.nav-mobile .lang-active { padding-bottom: 0.08em; }
/* Auf dem Glas kann ein dunkles Bild durchscheinen: dann reichen --dim und
   --meta nicht mehr für AA (rund 2,7:1 bzw. 3:1). --ink-2 hält dort gut 5:1. */
.nav-mobile .lang-switch a { padding-bottom: 0.08em; color: var(--ink-2); }
.nav-mobile-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.nav-mobile-socials a {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  text-transform: uppercase;
  transition: color .2s;
}
.nav-mobile-socials a:hover { color: var(--ink); }

/* ------------------------------------------------------------ Hauptteil -- */
.site-main {
  flex: 1 0 auto;
  padding-bottom: clamp(80px, 9vw, 150px);
}

/* Abstände der Sektionen. Die Zahlen stehen im Design an jeder Sektion
   einzeln; hier als Klassen, damit sie nicht in jedem Template stehen. */
.sec-head { padding-top: clamp(24px, 3vw, 44px); }
.sec-intro { padding-top: clamp(64px, 8vw, 132px); }
.sec-md { padding-top: clamp(52px, 6vw, 96px); }
.sec-sm { padding-top: clamp(40px, 4.6vw, 72px); }
.sec-cross { padding-top: clamp(100px, 11vw, 170px); }
.sec-back { padding-top: clamp(10px, 1.4vw, 20px); }
.sec-proj-cols { padding-top: clamp(56px, 6vw, 100px); }
.sec-tiles { padding-top: clamp(60px, 7vw, 120px); }
.sec-clients { padding-top: clamp(60px, 7vw, 110px); }

.page-intro {
  margin: 26px 0 0;
  max-width: 85ch;
  color: var(--body-c);
}
.page-intro + .page-intro { margin-top: 18px; }
.about-main .page-intro { color: var(--ink-2); }

/* ------------------------------------------------------------ Startseite -- */
.hero-center {
  text-align: center;
  padding: clamp(26px, 4.2vw, 66px) 0 clamp(30px, 3.6vw, 54px);
  max-width: 1100px;
  margin: 0 auto;
}
/* Der Name bleibt einzeilig: Auf schmalen Geräten schrumpft die Schrift mit
   der Fensterbreite (Name ≈ 10,6 × Schriftgröße breit, 48px Seitenpadding). */
.hero-name {
  font-size: min(clamp(40px, 5.8vw, 88px), calc((100vw - 48px) / 11));
  white-space: nowrap;
}
.hero-role {
  margin-top: 6px;
  font-family: var(--head);
  font-weight: var(--head-w);
  /* schrumpft mobil im selben Verhältnis wie .hero-name (30:40) */
  font-size: min(clamp(30px, 4.2vw, 64px), calc((100vw - 48px) / 11 * .75));
  line-height: var(--head-lh);
  letter-spacing: var(--head-ls);
  color: var(--accent);
  text-transform: var(--head-case);
}
.hero-fields {
  margin-top: clamp(20px, 2.2vw, 32px);
  font-family: var(--head);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--meta);
  text-transform: uppercase;
}

/* Das 7:2-Band läuft randlos über die volle Fensterbreite. aspect-ratio hält
   die Höhe fest, egal ob Poster, Video oder Gradient darin liegt — beim
   Wechsel Poster → Video springt deshalb nichts. Mobil (bis 768px) hat das
   Band ein eigenes, höheres Format passend zu Poster und Videos in 960x436.
   Die Grenze steht auch in pages.php (HERO_MOBILE_MEDIA). */
.hero-band {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 2;
  overflow: hidden;
  background: var(--frame);
}
@media (max-width: 768px) {
  .hero-band { aspect-ratio: 960 / 436; }
}
.hero-band img,
.hero-band video,
.hero-band .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Das Poster liegt als <picture> unter dem Video. Das Video bleibt
   unsichtbar, bis es läuft (main.js setzt is-playing), so steht vorher
   garantiert das Poster da und kein leerer oder schwarzer Rahmen. Kein
   Fade-In: das Poster ist Frame 1, eine Überblendung würde den Wechsel
   überhaupt erst sichtbar machen. opacity statt visibility: Safari startet
   stumme Videos ohne Klick nur, wenn sie sichtbar sind, und wertet
   visibility: hidden als unsichtbar — das Video liefe dann nie an. */
.hero-band video { opacity: 0; }
.hero-band video.is-playing { opacity: 1; }

/* Abspielen-Knopf, nur wenn das Video nicht von selbst anläuft (main.js
   nimmt dann das hidden-Attribut weg). Klein in der Ecke, im Stil der
   Kachel-Beschriftungen. */
.hero-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px 8px;
  border: 0;
  border-radius: 2px;
  background: rgba(20, 19, 17, .62);
  color: rgba(255, 253, 250, .92);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.hero-play::before {
  content: '';
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.hero-play:hover,
.hero-play:focus-visible { background: rgba(20, 19, 17, .82); }
.hero-play[hidden] { display: none; }

/* Claim links, Key Facts rechts. Bis 880px Fensterbreite stehen die Fakten
   unter dem Text (siehe dort): ohne Linie, dafür mit kurzem Akzentstrich vor
   jedem Punkt. */
.home-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 48px;
  /* Abstand zur Linie; wirkt nur, solange beide nebeneinander stehen */
  column-gap: clamp(24px, 4vw, 72px);
}
.home-intro-text {
  flex: 2 1 440px;
  min-width: 0;
}
.home-claim {
  margin: 0 0 0 -0.045em;
  font-family: var(--head);
  font-weight: var(--head-w);
  font-size: var(--h2);
  line-height: 1.12;
  letter-spacing: var(--head-ls);
  text-transform: var(--head-case);
}
.home-claim-text {
  margin: 28px 0 0;
  font-size: clamp(19px, 1.45vw, 23px);
  line-height: 1.55;
  color: var(--body-c);
  text-wrap: pretty;
}
.home-facts {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 clamp(24px, 4vw, 72px);
  list-style: none;
  border-left: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  /* Die Linie läuft über die volle Höhe des Textblocks, die Punkte stehen
     senkrecht mittig daneben. Untereinander (mobil) ohne Wirkung. */
  justify-content: center;
}
.home-facts li {
  --fact-pt: clamp(14px, 1.4vw, 22px);
  /* Unten fest, nicht ueber --fact-pt: die erste Zeile setzt nur ihren
     oberen Abstand auf 0 */
  padding: var(--fact-pt) 0 clamp(14px, 1.4vw, 22px);
  border-bottom: 1px solid var(--line);
  font-family: var(--head);
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 23px);
  line-height: 1.15;
}
.home-facts li:first-child { --fact-pt: 0px; }
/* Oben und unten ohne Innenabstand, damit die Liste optisch genau mittig sitzt */
.home-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
/* <span class="accent"> färbt hier nur blau (wie im Design),
   <b class="accent"> bleibt fett und blau wie im Fließtext. */
.home-facts span.accent { font-weight: inherit; }

.entry-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(18px, 2vw, 32px);
}
.entry-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--frame);
  color: var(--white);
}
.entry-tile:hover { color: var(--white); }
.entry-tile img,
.entry-tile .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entry-tile-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 28px;
  background: linear-gradient(to top, rgba(20, 19, 17, .72), rgba(20, 19, 17, 0));
  pointer-events: none;
}
.entry-tile-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: rgba(255, 253, 250, .9);
  text-transform: uppercase;
}
.entry-tile-title {
  display: block;
  margin-top: 10px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  color: var(--white);
}

/* ------------------------------------------------------------ Reel-Karte -- */
.reel-box {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: clamp(18px, 2.2vw, 36px);
}
.reel-inner { max-width: 1180px; margin: 0 auto; }

.media-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--frame);
  cursor: pointer;
}
.media-frame img,
.media-frame .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover-Abdunklung mit Play-Marke. Auf Touchgeräten gibt es kein Hover,
   dort steht die Marke dauerhaft klein in der Ecke (siehe unten). */
.media-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(20, 19, 17, 0);
  opacity: 0;
  transition: opacity .25s, background .25s;
  pointer-events: none;
}
.media-frame:hover .media-overlay,
.media-frame:focus-visible .media-overlay,
.tile:hover .media-overlay,
.tile:focus-within .media-overlay,
.still:hover .media-overlay {
  opacity: 1;
  background: var(--scrim);
}
.play-tri {
  width: 0;
  height: 0;
  border-left: 28px solid var(--white);
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
}
.media-overlay-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--white);
  text-transform: uppercase;
}

.reel-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--body-c);
  text-transform: uppercase;
}
.reel-time { color: var(--meta); }

/* ----------------------------------------------------------- Filterpillen -- */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-tab {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--body-c);
  transition: border-color .2s, color .2s, background .2s;
}
.filter-tab:hover { border-color: var(--ink); color: var(--ink); }
.filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.filter-tab.active:hover { color: var(--white); border-color: var(--accent); }

/* ------------------------------------------------------------------ Grid -- */
.grid {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: clamp(18px, 2vw, 30px);
}
.grid-film {
  margin-top: clamp(30px, 3.4vw, 52px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 620px), 1fr));
}

.tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--card-line);
  padding: 10px;
  color: inherit;
  transition: border-color .2s;
}
.tile:hover { border-color: var(--card-line-hi); color: inherit; }
.tile:has(.tile-media:focus-visible) { border-color: var(--card-line-hi); }

.tile-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--frame);
  cursor: pointer;
}
.tile-media img,
.tile-media .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tile .media-overlay { gap: 14px; }
.tile .play-tri {
  border-left-width: 15px;
  border-top-width: 10px;
  border-bottom-width: 10px;
}
.tile .media-overlay-label { font-size: 13px; }
.tile .media-overlay-arrow {
  font-family: var(--mono);
  font-size: 17px;
  color: var(--white);
}

.tile-body { padding: 14px 4px 6px; }
.tile-title {
  margin: 0;
  font-family: var(--head);
  font-weight: var(--head-w);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: var(--head-ls);
  color: var(--ink);
}
/* Format, Jahr und Laufzeit in Akzentfarbe — dieselbe Auszeichnung wie
   .proj-kind auf der Detailseite, die Kachel führt sie also schon vor. */
.tile-meta {
  margin-top: 7px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}
.tile-crew {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* Ohne Hover (Touch) bleibt die Play-Marke sonst unsichtbar: kleine,
   dauerhafte Markierung in der Ecke statt der Flächenabdunklung. */
@media (hover: none) {
  .media-frame::after,
  .tile-media::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 0;
    height: 0;
    border-left: 13px solid var(--white);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    filter: drop-shadow(0 1px 3px rgba(20, 19, 17, .55));
  }
  .tile-link .tile-media::after {
    border: 0;
    width: 22px;
    height: 22px;
    content: '→';
    color: var(--white);
    font-family: var(--mono);
    font-size: 17px;
    line-height: 22px;
    text-align: center;
    filter: drop-shadow(0 1px 3px rgba(20, 19, 17, .55));
  }
}

/* -------------------------------------------------------------- Show More -- */
.show-more-wrap {
  display: flex;
  justify-content: center;
  padding-top: clamp(36px, 4vw, 60px);
}
.show-more {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--body-c);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 34px;
  transition: border-color .2s, color .2s;
}
.show-more:hover { border-color: var(--ink); color: var(--ink); }

/* ----------------------------------------------------------- Kundenwand --
   Die Trennpunkte zeichnet main.js als absolut positionierte Ebene, damit sie
   den Zeilenumbruch nicht beeinflussen. Ohne JavaScript stehen die Namen
   einfach ohne Punkte nebeneinander. */
.clients {
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 3vw, 44px);
}
.clients-label {
  text-align: center;
  font-family: var(--head);
  font-weight: 500;
  font-size: var(--body-size);
  letter-spacing: 0.1em;
  color: var(--meta);
}
/* „und viele mehr …“ unter der Wand: gleiche Schrift wie die Überschrift,
   gleicher Abstand wie zwischen Überschrift und Wand */
.clients-more { margin: clamp(24px, 2.8vw, 42px) 0 0; }
.clients-wall {
  position: relative;
  margin: clamp(24px, 2.8vw, 42px) auto 0;
  max-width: 1280px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.28em clamp(22px, 2.4vw, 42px);
  font-family: var(--head);
  font-weight: var(--head-w);
  font-size: clamp(22px, 2.3vw, 38px);
  line-height: 1.42;
  letter-spacing: var(--head-ls);
  text-transform: var(--head-case);
  color: var(--ink);
}
.clients-wall span[data-name] { white-space: nowrap; }

/* -------------------------------------------------------- Cross-Banner --
   Variante "Kachelfarbe" aus dem Design. */
.cross {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(20px, 2.4vw, 36px);
  background: var(--card);
  border: 1px solid var(--card-line);
  color: var(--ink);
  transition: background .2s, color .2s, border-color .2s;
}
.cross:hover { background: #e3e2dd; color: var(--accent); }
.cross-label {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--meta);
  text-transform: uppercase;
}
.cross-titel {
  margin-left: -0.035em;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--head);
  font-weight: var(--head-w);
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: var(--head-ls);
  text-transform: var(--head-case);
}
.cross .pfeil { color: var(--accent); transition: color .2s, transform .25s; }
.cross:hover .pfeil { transform: translateX(0.16em); }

/* -------------------------------------------------------- Projektseite -- */
.back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.19em;
  color: var(--meta);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
  transition: color .2s, border-color .2s;
}
.back-link:hover { color: var(--ink); border-color: var(--ink); }

.proj-kind {
  margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.proj-h1 {
  margin: 16px 0 0 -0.045em;
  font-size: clamp(38px, 5.2vw, 80px);
}
.proj-synopsis {
  margin: 26px 0 0;
  max-width: 85ch;
  color: var(--body-c);
}
.proj-trailer { padding-top: clamp(34px, 4vw, 60px); }
.proj-trailer-cap {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--body-c);
  text-transform: uppercase;
}

.proj-cols {
  display: grid;
  grid-template-columns: minmax(min(100%, 320px), 1fr) minmax(min(100%, 340px), 500px);
  gap: clamp(40px, 5vw, 90px);
}

.section-label {
  display: block;
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--meta);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.stills-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.still {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--frame);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow .18s;
}
.still:hover, .still:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.still img, .still .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.look-label { margin-top: clamp(36px, 4vw, 56px); }
.look-text { margin: 22px 0 0; color: var(--body-c); }

.credits-list { margin-top: 6px; }
.credit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-2);
}
.credit-key {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--meta);
  text-transform: uppercase;
}
.credit-val {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  color: var(--ink);
}

/* -------------------------------------------------------------- About -- */
.about-cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(44px, 5.5vw, 90px);
  align-items: start;
}
.about-main { max-width: 78ch; }
.about-p { margin: 22px 0 0; color: var(--ink-2); }
.about-p:first-of-type { margin-top: 26px; }

/* Rechte Spalte startet unterhalb der H1-Zeile, damit Porträt und Text
   auf derselben Höhe beginnen */
.about-side { padding-top: calc(var(--h1) * var(--head-lh) + 26px); }

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  overflow: hidden;
  background: var(--frame);
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Solange kein Foto da ist: schraffierte Fläche mit Beschriftung */
.portrait.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--frame);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(27, 26, 23, .05) 9px 10px);
}
.portrait-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--dim);
  text-transform: uppercase;
  text-align: center;
  padding: 0 20px;
}

.fact-box {
  margin-top: 26px;
  max-width: 460px;
  background: var(--white);
  border: 1px solid var(--white-line);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fact-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.fact-head::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  flex: 0 0 auto;
}
.fact-head b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--meta);
  text-transform: uppercase;
}
.fact-lines {
  margin-top: 9px;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ------------------------------------------------------------ Kontakt -- */
.contact-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--white-line);
  box-shadow: 0 40px 70px -50px rgba(27, 26, 23, .45);
  padding: clamp(40px, 4.6vw, 64px) clamp(40px, 5vw, 76px) clamp(34px, 4vw, 54px);
  /* Bezugsgröße für die beiden Zeilen im Kopf, siehe unten */
  container-type: inline-size;
}
.contact-head { padding-top: clamp(14px, 1.8vw, 28px); }

/* Name und Untertitel sind das Logo der Karte und sollen aussehen wie die
   Wortmarke im Header — nur größer. Übernommen sind von dort der Sperrsatz
   (0.09em / 0.22em) und vor allem das Größenverhältnis 13/19 = 0,684.
   Das Design der Karte stand auf 18/38 = 0,474, dadurch wirkte "COLOR
   GRADING" deutlich kleiner als im Header.

   Beide Zeilen hängen an der Kartenbreite (cqi), nicht am Viewport — die
   Karte hat innen Padding, das mit der Breite wächst, ein vw-Wert läge
   daneben. "CHRISTIAN LESSNER" ist mit 0.09em Sperrsatz 11,97-mal so breit
   wie hoch, 8cqi lassen also gut 4 % Luft; damit bricht der Name nie um.
   Die Zeile mit vw davor ist der Rückfall für Browser ohne Container-Queries,
   der clamp-Mindestwert greift erst unter 200px Karteninnenbreite. */
.contact-name {
  font-family: var(--head);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: clamp(16px, 2.9vw, 38px);
  font-size: clamp(16px, 8cqi, 38px);
}
.contact-role {
  margin-top: 0.08em;
  font-family: var(--head);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  /* 0,684 des Namens — dasselbe Verhältnis wie 13px zu 19px im Header */
  font-size: clamp(10.9px, 1.98vw, 26px);
  font-size: clamp(10.9px, 5.474cqi, 26px);
}
.contact-grid {
  margin-top: clamp(38px, 4.4vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(30px, 3.6vw, 56px);
  align-items: center;
}
/* Zwei Spalten über alle Zeilen hinweg: die Beschriftungsspalte richtet sich
   nach der längsten Beschriftung, damit die Werte bündig untereinander stehen.
   Vorher stand dort eine feste Breite von 62px — „Telefon" braucht mit dem
   Sperrsatz 67px und schob seinen Wert nach rechts aus der Flucht. */
.contact-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 16px 18px;
  align-items: baseline;
}
.contact-row { display: contents; }
.contact-key {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--meta);
  text-transform: uppercase;
}
.contact-val {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
a.contact-val:hover { color: var(--accent); }

.contact-qr-col { display: flex; justify-content: flex-end; }
/* Ohne Rahmen und Innenabstand: die weiße Ruhezone bringt das SVG selbst mit */
.contact-qr {
  width: 160px;
  height: 160px;
}
.contact-qr img {
  display: block;
  width: 100%;
  height: 100%;
}
.contact-scan {
  margin: clamp(32px, 3.6vw, 50px) 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--meta);
  text-transform: uppercase;
}
.contact-scan a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.contact-scan a:hover { color: var(--ink); border-color: var(--ink); }
/* Kurzfassung nur dort, wo der QR-Code ausgeblendet ist (siehe 880px-Block) */
.contact-scan-short { display: none; }

/* ------------------------------------------------ Rechtstexte und 404 -- */
.legal { max-width: 85ch; }
.legal-note {
  margin: 26px 0 0;
  padding: 16px 20px;
  background: var(--card);
  border-left: 2px solid var(--accent);
  color: var(--body-c);
  font-size: 0.94em;
}
.legal-section { margin-top: clamp(38px, 4vw, 58px); }
.legal-section > .section-label { margin-bottom: 18px; }
.legal-section p, .legal-section ul, .legal-section address {
  margin: 14px 0 0;
  color: var(--body-c);
  font-style: normal;
}
.legal-section ul { padding-left: 20px; }
.legal-section li { margin-top: 4px; }

.back-home {
  display: inline-block;
  margin-top: clamp(30px, 3.4vw, 46px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}
.back-home:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------- Footer -- */
.site-footer {
  background: var(--accent);
  padding: 18px clamp(18px, 2.8vw, 46px);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(16px, 2.2vw, 38px);
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 253, 250, .78);
  text-transform: uppercase;
}
.footer-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.2vw, 38px);
}
.footer-group:last-child { justify-content: flex-end; }
.site-footer a {
  color: rgba(255, 253, 250, .78);
  transition: color .2s;
}
.site-footer a:hover { color: var(--white); }

/* ----------------------------------------------------------- Lightbox -- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* Deckend und neutral: nichts von der Seite scheint durch, kein Farbstich
     neben den Bildern. So hell, wie vorher der halbtransparente warme Ton
     über der hellen Seite wirkte. */
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 80px);
  animation: omFade .22s ease-out;
}
.lightbox[hidden] { display: none; }
/* Seite hinter der Lightbox stilllegen. Der Scrollbalken bleibt reserviert
   (scrollbar-gutter), damit das Layout beim Oeffnen nicht springt.
   Browser ohne :has() scrollen dahinter weiter — unschoen, aber kein Defekt. */
body.lb-open { overflow: hidden; }
html:has(body.lb-open) { overflow: hidden; }

.lb-backdrop {
  position: absolute;
  inset: 0;
  cursor: default;
}
.lb-dialog {
  position: relative;
  width: 100%;
  max-width: 1400px;
}
.lb-media { position: relative; }
.lb-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
/* Bilder sitzen direkt auf dem Grau, ohne schwarze Balken neben Hochformaten */
.lb-stage.is-gallery { background: none; }

/* Galerie als waagerechter Streifen mit Scroll Snap: Wischen am Handy und
   mit dem Trackpad übernimmt der Browser, das Bild folgt dem Finger. Ein
   Bild pro Geste (snap-stop), am Rand kein „Zurück"-Wischen des Browsers
   (overscroll-behavior). Ein senkrechtes Mausrad bewegt hier bewusst nichts. */
.lb-track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.lb-stage img, .lb-stage .lb-gradient, .lb-stage iframe, .lb-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lb-stage img { object-fit: contain; }
/* Selbst gehostetes Video: gleiche Bühne wie das Vimeo-iframe */
.lb-stage video { object-fit: contain; background: #000; }

/* ---- Einwilligung vor YouTube- und Vimeo-Videos ----
   Das große Posterframe füllt die Bühne, darauf sitzt eine helle Karte im
   Stil der Seite (wie Kontaktkarte und Fakten-Box). Ab 881px Breite und
   660px Fensterhöhe steht alles im 16:9-Rahmen des späteren Players, beim
   Zustimmen springt also nichts. Darunter wächst die Bühne mit der Karte,
   sonst würde der Text abgeschnitten. */
.lb-stage.lb-consent {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px);
}
@media (min-width: 881px) and (min-height: 660px) {
  .lb-stage.lb-consent { aspect-ratio: 16 / 9; }
}
/* Zu niedriges Fenster: die Lightbox scrollt, statt die Karte zu kappen.
   margin-block: auto hält den Dialog mittig, solange Platz da ist. */
.lightbox.lb-has-consent { justify-content: flex-start; overflow-y: auto; }
.lightbox.lb-has-consent .lb-dialog { flex: 0 0 auto; margin-block: auto; }

.consent-bg { position: absolute; inset: 0; }
.lb-stage .consent-bg img { object-fit: cover; }
/* Leicht abgedunkelt: das Bild bleibt erkennbar, die Karte steht klar davor */
.consent-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 17, .38);
}
.consent {
  position: relative;
  width: min(100%, 440px);
  background: var(--white);
  border: 1px solid var(--white-line);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7);
  padding: clamp(22px, 3vw, 32px);
  color: var(--ink);
}
.consent-label {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--meta);
}
.consent-text {
  margin: 0 0 10px;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.consent-privacy {
  margin: 0 0 22px;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
}
.consent-privacy a { color: var(--accent); border-bottom: 1px solid currentColor; transition: color .2s; }
.consent-privacy a:hover { color: var(--ink); }
.consent-buttons { display: grid; gap: 10px; }
/* Beide Buttons gleich gewichtet: ein hervorgehobenes „für diesen Besuch
   erlauben“ wäre ein Nudge zur weitergehenden Einwilligung. Form wie
   „Mehr anzeigen“, beim Überfahren gefüllt. */
.consent-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.consent-btn:hover { background: var(--ink); color: var(--white); }
.consent-btn[hidden] { display: none; }
.consent-btn-inline { display: inline-block; width: auto; }
.consent-external {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.consent-external a { color: var(--meta); transition: color .2s; }
.consent-external a:hover { color: var(--ink); }.lb-caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(255, 253, 250, .8);
  text-transform: uppercase;
  text-align: center;
  padding: 0 24px;
}
/* Schließen steht über dem Bild, rechtsbündig: unter dem Bild stand es neben
   dem Titel und die Leiste wirkte unruhig, besonders wenn der Titel umbrach. */
.lb-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.lb-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 18px;
}
/* Titel und Schließen bilden eine Zeile im selben Schnitt — wie die
   Beschriftung unter den großen Reels (.reel-cap), wo Label und Laufzeit
   ebenfalls gleich gesetzt sind. */
.lb-title,
.lb-counter,
.lb-close {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: rgba(255, 253, 250, .6);
  text-transform: uppercase;
}
.lb-close {
  flex: 0 0 auto;
  cursor: pointer;
  /* Touchziel, ohne die Leiste optisch aufzublähen */
  padding: 8px 2px 8px 12px;
  margin: -8px -2px -8px 0;
  transition: color .2s;
}
.lb-close:hover { color: var(--white); }

.lb-counter { flex: 0 0 auto; }

/* Pfeile senkrecht mittig am Bild. Schmal: am Bildrand auf dunklem Kreis,
   damit sie auch auf hellen Stills lesbar sind. Breit genug (Seitenrand ab
   rund 62px): daneben im Rand, ohne Kreis. Auf Touch-Geräten weg, dort wird
   gewischt. Am ersten/letzten Bild blendet main.js den Pfeil aus. */
.lb-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 34, 34, .6);
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.lb-arrow[hidden] { display: none; }
.lb-arrow:hover { color: #fff; background: rgba(34, 34, 34, .85); }
.lb-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (min-width: 1240px) {
  .lb-arrow { background: none; }
  .lb-arrow:hover { background: none; }
  .lb-prev { left: -60px; }
  .lb-next { right: -60px; }
}
@media (hover: none) {
  .lb-arrow { display: none; }
}

@keyframes omFade { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------- Mobil -- */
@media (max-width: 1080px) {
  .about-cols { grid-template-columns: 1fr; }
  .about-side { padding-top: 0; margin-top: clamp(36px, 5vw, 56px); }
  .portrait, .fact-box { max-width: none; }
  .proj-cols { grid-template-columns: 1fr; }

  /* Kategorien laufen in einer Reihe und werden gewischt statt umgebrochen:
     bei fünf Kategorien mit Namen wie „Automotive & Technology" ergibt jeder
     Umbruch ein anderes Bild, und auf Englisch nochmal ein anderes. Die
     Werbungsleiste braucht 930px am Stück und passt erst ab rund 1024px
     Fensterbreite in eine Zeile — deshalb reicht diese Regel bis 1080px und
     nicht nur bis zum Burger-Breakpunkt, sonst bräche sie auf Tablets um.
     Die negativen Ränder lassen die Reihe bis an den Bildschirmrand laufen,
     damit sie nicht abgeschnitten wirkt. */
  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-block: 2px;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { flex: 0 0 auto; scroll-snap-align: center; }
}

@media (max-width: 880px) {
  .nav-desktop { display: none; }
  .menu-toggle { display: flex; }
  .site-header { gap: 16px; }

  /* Die Profile stehen mobil im Burger-Menü. Im Footer blieben sie sonst
     als dritte und vierte Zeile stehen. */
  .footer-socials { display: none; }
  .footer-row { justify-content: center; text-align: center; }
  .footer-group:last-child { justify-content: center; gap: 12px 20px; }
  /* Umbruch fest hinter dem Namen: Impressum und Datenschutz bilden damit
     eine eigene Zeile, statt dass der Umbruch zwischen sie fällt. */
  .footer-copy { flex-basis: 100%; }

  .stills-grid { gap: 10px; }
  .contact-card { padding: clamp(28px, 7vw, 40px) clamp(22px, 6vw, 40px) clamp(26px, 6vw, 36px); }
  /* Der QR-Code ist auf dem Telefon sinnlos — man scannt ihn nicht mit
     demselben Gerät, auf dem er angezeigt wird. */
  .contact-qr-col { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  /* Ohne QR-Code gibt es nichts zu scannen: nur „Kontaktdaten herunterladen" */
  .contact-scan-full { display: none; }
  .contact-scan .contact-scan-short { display: inline; }

  .reel-box { padding: 0; background: none; border: 0; }

  /* Startseite: Fakten fest unter dem Text. Die senkrechte Linie trennt nur
     nebeneinander etwas, hier steht stattdessen ein kleiner Pfeil vor jedem
     Punkt (derselbe wie auf den Einstiegskacheln). Absolut gesetzt, damit
     umbrechende Punkte bündig eingerückt bleiben. */
  .home-intro { display: block; }
  .home-facts { margin-top: 44px; padding-left: 0; border-left: 0; }
  .home-facts li { position: relative; padding-left: 28px; }
  .home-facts li::before {
    content: '\2192'; /* → */
    position: absolute;
    left: 0;
    top: var(--fact-pt);
    color: var(--accent);
  }
  .cross-titel { font-size: clamp(26px, 7vw, 40px); }
}

@media (max-width: 560px) {
  /* Stills einspaltig über die volle Breite — zweispaltig sind sie auf dem
     Telefon zu klein, um etwas von der Farbe zu zeigen. */
  .stills-grid { grid-template-columns: minmax(0, 1fr); }

  /* Beschriftung über den Wert: die Zweispalter-Flucht kostet rund 115px,
     die der E-Mail-Adresse hier fehlen. Gestapelt bekommt sie die ganze
     Kartenbreite. overflow-wrap ist nur das Netz für sehr schmale Geräte
     (unter etwa 340px), im Normalfall bricht nichts um. */
  .contact-rows { display: flex; flex-direction: column; gap: 18px; }
  .contact-row { display: block; }
  .contact-key { display: block; margin-bottom: 5px; }
  .contact-val { overflow-wrap: anywhere; }
}

/* -------------------------------------------------- Reduzierte Bewegung -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}