/* ==========================================================================
   LUA HELL | Portfolio — Redesign-Iteration 01
   Kern: Tokens, Grundgeruest, Typografie, Buttons, Header, Menue, Intro,
   Hero, Projektkacheln, Work, Projektseite, About, Kontakt, Footer.
   Darunter folgen die unveraenderten Bausteine fuer Shop, Produktseiten,
   Consent und Checkout — sie laufen ueber dieselben Tokens.

   Regeln, die fuer alles hier gelten:
   - Schriften: Geist 400/500/600, Kepler Semibold Italic. Sonst nichts.
   - Kepler nur in einer H1 pro Seite, als einzelnes Wort.
   - Orange heisst: aktiv, primaer, Kategorie, Marke. Nie Dekoration.
   - Bilder und Videos haben keine Rundung. Buttons duerfen rund sein.
   - Ein Hintergrund (--bg), eine zweite Flaeche (--surface), sonst nichts.
   ========================================================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Geist von Vercel in Zusammenarbeit mit basement.studio, danke!
   SIL Open Font License 1.1, Lizenztext: /Fonts/Geist-OFL.txt
   https://github.com/vercel/geist-font */
@font-face {
  font-family: 'Geist';
  src: url('/Fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/Fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('/Fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Kepler Std Semibold Italic — lizenziert, nur dieser Schnitt. */
@font-face {
  font-family: 'Kepler';
  src: url('/Fonts/keplerstd-semiboldit-webfont.woff2') format('woff2'),
       url('/Fonts/keplerstd-semiboldit-webfont.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ===== FARBE =====
     Ein Hintergrund, eine zweite Flaeche. Vorher liefen hier sieben
     Schwarz- und Grautoene nebeneinander (#0C0C0C bis #1D1D1D). */
  --bg: #161616;              /* Charcoal Black — die Seite */
  --surface: #1E1E1E;         /* Medien-Platzhalter, Panels, Formularflaechen */
  --white: #FFFFFF;           /* Ueberschriften, Werte */
  --text: #B3B3B3;            /* Fliesstext, 8.6:1 auf --bg */
  --muted: #8A8D90;           /* Meta, Labels, 5.3:1 auf --bg, 4.9:1 auf --surface */
  --divider: #333333;         /* Haarlinien */
  --border: #2A2A2A;
  --border-strong: #3E3E3E;   /* Rahmen der Sekundaer-Buttons */
  /* EINE Linienstaerke fuer alle Trennlinien und Konturen. 1px, und das
     ist keine Vorliebe: Chrome rundet gebrochene Rahmenstaerken auf ganze
     Pixel ab, 1.2px und 1.5px wurden beide zu 1px. Zwischenstufen gibt es
     bei Rahmen nicht, nur 1px oder 2px. Damit die Linien trotzdem klarer
     wirken, ist --divider einen Hauch kraeftiger (Lua 20.09.). */
  --hair: 1.5px;          /* Strichstaerke aller Linien + Button-Rahmen, Studio: Farben -> Strichstaerke */
  --accent: #D95A0A;          /* Signature Orange, 4.67:1 auf --bg */
  --accent-hover: #D95A0A;     /* 16.10.2026: nur noch EIN Orange, auch beim Hover (Lua) */
  --accent-ink: #161616;      /* Text auf Orange: 4.67:1 (Weiss waere 3.88:1) */
  --accent-text: var(--accent); /* Orange als SCHRIFTfarbe (im Hellmodus eine Spur dunkler, s. u.) */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);

  /* Aliase fuer die unveraenderten Shop-/Produkt-Bausteine weiter unten.
     Beide zeigen auf dieselbe eine Flaeche. */
  --surface-1: var(--surface);
  --surface-2: var(--surface);

  /* Supporting Editorial — nur kontextbezogen, nie als Aktion. */
  --pine: #183D2D;
  --cinematic-red: #B62A24;
  --stone: #BABDBF;          /* Stone Grey neu 16.10.2026 (vorher #818588, zu dunkel) */
  --glacier: #567F99;

  /* ===== TYPO ===== */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Kepler', Georgia, 'Times New Roman', serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.65;
  --ls-display: -0.045em;
  --ls-tight: -0.04em;     /* Brand-Tracking −40 */
  --ls-heading: -0.03em;   /* H2 −30 */
  --ls-normal: -0.01em;
  --ls-label: 0.06em;      /* kleine Uppercase-Labels */

  /* Schriftskala. Basis 18px. Die groesste Stufe liegt bei rund 100px statt
     der 122px der ersten Redesign-Fassung — gross, aber nicht wandfuellend. */
  --fs-caption:   clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);      /* 13.5–14.6 */
  --fs-category:  clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);       /* 14.6–15.8 */
  --fs-nav:       0.8611rem;                                          /* 15.5 */
  --fs-body:      clamp(0.9444rem, 0.92rem + 0.12vw, 1rem);          /* 17–18 */
  --fs-lead:      clamp(1.1111rem, 0.98rem + 0.55vw, 1.4rem);        /* 20–25 */
  --fs-h3:        clamp(1.2222rem, 1.08rem + 0.6vw, 1.6rem);         /* 22–29 */
  --fs-h2:        clamp(1.6667rem, 1.2rem + 1.9vw, 2.75rem);         /* 30–50 */
  --fs-h1:        clamp(2.1111rem, 1.3rem + 3.1vw, 4.2rem);          /* 38–76 */
  --fs-statement: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem);           /* 27–50 */
  --fs-display:   clamp(2.6rem, 1.25rem + 5.2vw, 5.6rem);            /* 47–101 */

  /* Rueckwaertskompatibel: die Produktseiten rechnen mit diesen Namen. */
  --fs-display-xl: var(--fs-display);

  /* ===== RAUM ===== */
  /* Breiter wie im Redesign: Rand waechst mit dem Fenster, kein enger
     Mittelblock mehr. Erst auf sehr grossen Schirmen greift die Obergrenze. */
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --max: 2560px;
  --header-h: 72px;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);           /* Abstand zwischen Sektionen */
  --section-sm: clamp(3rem, 2rem + 4vw, 5.5rem);
  --gap-grid: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);  /* Kachel-Raster */
  /* Abstand zwischen Bildern (Galerien, Stills, BTS). Luas Vorgabe 16.10.2026: eng wie im Referenzbild, rund 8 px. */
  --gap-img: clamp(0.375rem, 0.6vw, 0.5rem);
  --gap-section: var(--section);                        /* alte Namen */
  --gap-section-top: var(--section-sm);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-2xs: var(--space-2);
  --space-xs: var(--space-3);
  --space-sm: var(--space-4);
  --space-md: var(--space-6);
  --space-lg: var(--space-9);
  --space-xl: clamp(2.5rem, 4vw, 3.5rem);
  --measure-xs: 480px;
  --measure-sm: 560px;
  --measure-md: 640px;
  --measure-lg: 760px;
  --content-narrow: 920px;
  --card-pad: clamp(1.5rem, 3vw, 2.25rem);
  --card-pad-lg: clamp(2rem, 4vw, 3.25rem);
  --tap: 44px;
  --burger-w: 24px;
  --burger-gap: 7px;

  /* ===== FORM & BEWEGUNG ===== */
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --btn-pad-sm: 0.6rem 1.15rem;
  --btn-pad-md: 0.8rem 1.35rem;
  --btn-pad-lg: 0.95rem 1.6rem;
  --btn-fs-sm: 0.8125rem;
  --btn-fs-md: 0.8889rem;
  --btn-fs-lg: 0.9444rem;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo.out — Auftritte */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); /* Blenden */
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-slow: 0.9s;
  --z-header: 200;
  --z-menu: 150;
  --z-intro: 1000;
  --header-solid: 0;
}

/* Hellmodus: dieselben Rollen, andere Werte. --white heisst "staerkste
   Schriftfarbe" und wird hier Charcoal. Der Hero bleibt in beiden Modi ein
   dunkles Filmbild mit weisser Schrift. */
:root[data-theme="light"] {
  --bg: #F4F2EF;              /* Paper */
  --surface: #E9E6E1;
  --white: #161616;
  --text: #3D3D3D;            /* 10.1:1 auf Paper */
  --muted: #676A6D;           /* 5.2:1 auf Paper */
  --divider: #CFC9C1;
  --border: #DAD6D0;
  --border-strong: #BDB8B1;
  --muted: #5F6265;           /* 5.9:1 auf Paper, 5.4:1 auf der zweiten Flaeche */
  /* Orange ist in beiden Modi exakt das CI-Orange #D95A0A, auch als
     Schrift (Lua 19.09.: "es muss immer das aus dem CI sein"). Auf Paper
     sind das 3.5:1: reicht fuer grosse und fette Schrift (3:1), fuer
     kleinen Fliesstext nicht (4.5:1). Orange deshalb nie fuer Fliesstext. */
  --accent-text: var(--accent);
  color-scheme: light;
}

:root { color-scheme: dark; }

@media (max-width: 768px)  { :root { --header-h: 64px; } }

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

html {
  font-size: 18px;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

button {
  font-family: var(--font);
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

h1, h2, h3 {
  color: var(--white);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p { text-wrap: pretty; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nur Innenabstand links/rechts: Container duerfen den vertikalen Abstand
   einer Sektion nie ueberschreiben (styles-product.css laedt vorher). */
.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.divider {
  border: none;
  border-top: var(--hair) solid var(--divider);
  margin: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--white);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  z-index: calc(var(--z-intro) + 1);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
}
.skip-link:focus { top: 1rem; }

/* ==========================================
   KEPLER-REGEL (CI)
   .hl-accent erbt standardmaessig alles (also Geist). Nur im Seitentitel
   (H1) wird daraus Kepler Semibold Italic — ein Wort am Ende, eine Stelle
   pro Seite. Zwischentitel (H2), Labels, Navigation, Buttons und
   Fliesstext bleiben Geist (Lua 19.09.: Serif-Mix war zu viel). Kepler
   sonst nur in Zitaten. Farbe: die des Titels.
   Orange nur mit --signal, und das nur auf der Startseite ("watch.") und
   auf /work ("Work").
   ========================================== */

.hl-accent {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}

h1 .hl-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  font-size: 1.06em;
  line-height: 0;
}

h1 .hl-accent--signal { color: var(--accent-text); }

/* ==========================================
   LABELS & KATEGORIE
   ========================================== */

.project-hero__cat,
.card__cat,
.product-card__cat,
.product-hero__eyebrow {
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  color: var(--muted);
  line-height: 1.3;
}

/* Die Kategorie auf der Projektseite ist ein echter Meta-Wert und steht
   genau einmal — die einzige orange Kategorie der Website. */
.project-hero__cat { color: var(--accent-text); }

/* Ein Label-Stil fuer die paar Stellen, an denen noch eines steht
   (Footer, Podcast, Produktseiten). Keine Kicker ueber jeder Section. */
.section-label,
.footer__label,
.podcast__label,
.page-hero__eyebrow,
.project-body__label,
.marquee__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  line-height: 1.4;
}

.section-label { margin-bottom: var(--space-6); }

/* ==========================================
   BUTTONS
   Eine Form (Pille), zwei Rollen. Primaer ist Orange mit Charcoal-Schrift,
   sekundaer ist eine ruhige Kontur. Alle Seitenklassen haengen in denselben
   Gruppen, damit es keine Sonderbuttons pro Sektion gibt.
   ========================================== */

/* Konsent und Embed-Gate bleiben bewusst schlicht orange gefuellt: das ist
   Pflicht-UI, kein Teil der Gestaltung. */
.consent__btn,
.embed-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--btn-fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  padding: var(--btn-pad-sm);
  min-height: 40px;
  border-radius: var(--radius-pill);
  border: var(--hair) solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.consent__btn:hover,
.embed-gate__btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Alle anderen Buttons: Kontur im Ruhezustand, beim Hover steigt Orange
   als Kreis von unten auf und fuellt die Pille (wie im Redesign). Text auf
   Orange ist Charcoal: 4.67:1, Weiss laege unter AA. */
.btn,
.hero__cta,
.services-cta__link,
.product-card__buy,
.presets-buy__btn,
.product-hero__btn,
.pg-cta__btn,
.pg-card__btn,
.project-cta__link,
.contact-form__submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font);
  font-size: var(--btn-fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  line-height: 1.2;
  text-align: center;
  padding: var(--btn-pad-md);
  min-height: var(--tap);
  border-radius: var(--radius-pill);
  border: var(--hair) solid var(--border-strong);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.btn::before,
.hero__cta::before,
.services-cta__link::before,
.product-card__buy::before,
.presets-buy__btn::before,
.product-hero__btn::before,
.pg-cta__btn::before,
.pg-card__btn::before,
.project-cta__link::before,
.contact-form__submit::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, 0) scale(0.2);
  transition: transform 0.7s var(--ease-out), top 0.7s var(--ease-out);
  z-index: -1;
  pointer-events: none;
}

.btn:hover,
.hero__cta:hover,
.services-cta__link:hover,
.presets-buy__btn:hover,
.product-hero__btn:hover,
.pg-cta__btn:hover,
.pg-card__btn:hover,
.project-cta__link:hover,
.contact-form__submit:hover,
a.product-card:hover .product-card__buy {
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn:hover::before,
.hero__cta:hover::before,
.services-cta__link:hover::before,
.presets-buy__btn:hover::before,
.product-hero__btn:hover::before,
.pg-cta__btn:hover::before,
.pg-card__btn:hover::before,
.project-cta__link:hover::before,
.contact-form__submit:hover::before,
a.product-card:hover .product-card__buy::before {
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
}

/* Ueber dem Film ist die Kontur hell, der Text weiss — in beiden Modi. */
.hero__cta { color: #fff; border-color: rgba(255, 255, 255, 0.55); }

/* Fokus auf Orange: weisser Ring, ein oranger waere unsichtbar. */
.btn:focus-visible,
.hero__cta:focus-visible,
.product-hero__btn:focus-visible,
.pg-cta__btn:focus-visible,
.project-cta__link:focus-visible,
.contact-form__submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn--sm,
.product-card__buy,
.pg-card__btn {
  font-size: var(--btn-fs-sm);
  padding: var(--btn-pad-sm);
}

.btn--lg,
.pg-cta__btn,
.product-hero__btn {
  font-size: var(--btn-fs-lg);
  padding: var(--btn-pad-lg);
}

/* Pfeil als Pseudo-Element: die Beschriftung bleibt reiner Text, weil das
   Studio (Global → Buttons) den Inhalt der Anker komplett ersetzt. */
.btn--arrow::after {
  content: '\2192';
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.6s var(--ease-out);
}

.btn--arrow:hover::after,
.btn--arrow:focus-visible::after { transform: translateX(3px) rotate(-45deg); }

/* Text-Roll: script.js legt die Beschriftung doppelt in .roll (die zweite
   Zeile aria-hidden). Beim Hover rollt die Zeile nach oben weg und die
   zweite nach — kurz, praezise, ohne Nachfedern. */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.25;
}

.roll > span {
  display: block;
  transition: transform 0.55s var(--ease-out);
}

/* Zwischen den beiden Zeilen liegt eine kleine Luecke. Ohne sie blieb bei
   krummen Hoehen (0.7778rem x 1.25 = halbe Pixel) die Unterkante der
   weggerollten Zeile als 1-px-Linie ueber dem Wort stehen. */
.roll > span + span {
  position: absolute;
  left: 0;
  top: calc(100% + 0.3em);
}

a:hover .roll > span,
button:hover .roll > span,
a:focus-visible .roll > span { transform: translateY(calc(-100% - 0.3em)); }

.btn[disabled],
.product-hero__btn[disabled],
.pg-card__btn--soon,
.product-card__buy--soon {
  background: transparent;
  border-color: var(--divider);
  color: var(--muted);
  cursor: default;
}

.btn[disabled]:hover,
.product-hero__btn[disabled]:hover,
.pg-card__btn--soon:hover,
.product-card__buy--soon:hover {
  background: transparent;
  border-color: var(--divider);
  color: var(--muted);
}

/* ==========================================
   HEADER
   Logo links, Navigation rechts, kein Glas, kein Blur. Am Seitenanfang
   steht die Leiste ohne Flaeche; beim Scrollen blendet --bg stufenlos
   ein (script.js setzt --header-solid 0..1). Nach unten scrollen schiebt
   sie weg, nach oben holt sie zurueck.
   ========================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: color-mix(in srgb, var(--bg) calc(var(--header-solid) * 100%), transparent);
  border-bottom: var(--hair) solid color-mix(in srgb, var(--divider) calc(var(--header-solid) * 100%), transparent);
  transition: transform 0.5s var(--ease-out), background-color 0.3s var(--ease);
}

.site-header.is-hidden { transform: translateY(-100%); }

/* Nur ueber dem Hero-Video: ein Hauch Verlauf, damit die weisse Schrift
   auch vor hellem Himmel lesbar bleibt. Verschwindet mit der Flaeche. */
.site-header--overlay::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 48px);
  pointer-events: none;
  opacity: calc(1 - var(--header-solid));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0));
}

.site-header > .container { position: relative; z-index: 1; }

.site-header--overlay:not(.is-solid) .nav__logo,
.site-header--overlay:not(.is-solid) .nav__link:not(.nav__link--active),
.site-header--overlay:not(.is-solid) .theme-toggle { color: #fff; }
.site-header--overlay:not(.is-solid) .theme-toggle { border-color: rgba(255, 255, 255, 0.4); }
.site-header--overlay:not(.is-solid) .menu-trigger span { background: #fff; }
.site-header.is-menu-open .nav__logo,
.site-header.is-menu-open .theme-toggle { color: var(--white) !important; }
.site-header.is-menu-open .menu-trigger span { background: var(--white) !important; }

/* Hell/Dunkel: ein kleiner runder Schalter in der Leiste. Im Dunkelmodus
   zeigt er die Sonne (Ziel), im Hellmodus den Mond. */
.theme-toggle {
  width: 36px;
  height: 36px;
  margin-left: clamp(1.25rem, 2vw, 2rem);
  display: grid;
  place-items: center;
  border: var(--hair) solid var(--border-strong);
  border-radius: 50%;
  color: var(--white);
  transition: border-color var(--dur-base) var(--ease), transform 0.5s var(--ease-out), color var(--dur-fast) var(--ease);
}

.theme-toggle:hover { border-color: var(--accent); transform: rotate(-20deg); }

.theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.theme-toggle__moon { display: none; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle__sun { display: none; }

.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo {
  font-size: 0.9444rem;
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
}

.nav__links {
  display: flex;
  gap: clamp(1.75rem, 2.4vw, 2.75rem);
  margin-left: auto;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--text);
  padding: 0.5rem 0;
  transition: color var(--dur-fast) var(--ease);
}

.nav__link:hover { color: var(--white); }

/* Aktive Seite: dieselbe Schrift, dieselbe Groesse, nur Orange. */
.nav__link--active,
.nav__link--active:hover { color: var(--accent-text); }

.menu-trigger {
  display: none;
  width: var(--tap);
  height: var(--tap);
  position: relative;
  margin-right: calc((var(--tap) - var(--burger-w)) / -2);
  z-index: 2;
}

.menu-trigger span {
  position: absolute;
  left: 50%;
  width: var(--burger-w);
  height: 1.5px;
  margin-left: calc(var(--burger-w) / -2);
  background: var(--white);
  transition: transform 0.4s var(--ease-out), opacity 0.25s var(--ease), top 0.4s var(--ease-out), background-color var(--dur-fast) var(--ease);
}

.menu-trigger span:nth-child(1) { top: calc(50% - var(--burger-gap) - 0.75px); }
.menu-trigger span:nth-child(2) { top: calc(50% - 0.75px); }
.menu-trigger span:nth-child(3) { top: calc(50% + var(--burger-gap) - 0.75px); }

.menu-trigger.is-open span:nth-child(1) { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-trigger.is-open span:nth-child(2) { opacity: 0; }
.menu-trigger.is-open span:nth-child(3) { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Offenes Menue: der Header steht ohne eigene Flaeche ueber dem Menue. */
.site-header.is-menu-open {
  --header-solid: 0;
  background-color: transparent;
  border-bottom-color: transparent;
  transform: none;
}
.site-header.is-menu-open::before { opacity: 0; }

/* ==========================================
   MOBILE-MENUE
   Klassisch: vier Wege untereinander, Haarlinien dazwischen, aktive Seite
   orange. Die Flaeche faehrt von oben auf, die Zeilen steigen gestaffelt
   nach. Keine Kursivschrift, keine Glasflaeche.
   ========================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--space-6)) var(--pad) max(var(--pad), env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-in-out), visibility 0s linear 0.6s;
}

.mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.6s var(--ease-in-out), visibility 0s;
}

.mobile-menu__nav { display: flex; flex-direction: column; }

.mobile-menu__link {
  display: block;
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--white);
  padding: var(--space-3) 0;
  border-bottom: var(--hair) solid var(--divider);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color var(--dur-fast) var(--ease);
}

.mobile-menu__link:first-child { border-top: var(--hair) solid var(--divider); }

.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out), color var(--dur-fast) var(--ease);
}

.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.18s, 0.18s, 0s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.24s, 0.24s, 0s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.30s, 0.30s, 0s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.36s, 0.36s, 0s; }

.mobile-menu__link:active { color: var(--accent-text); }

.mobile-menu__link--active,
.mobile-menu__link--active:active { color: var(--accent-text); }

.mobile-menu__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-8);
  margin-top: auto;
}

.mobile-menu__social {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 0.875rem;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.mobile-menu__social:hover,
.mobile-menu__social:active { color: var(--white); }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .menu-trigger { display: block; margin-left: var(--space-3); }
  .theme-toggle { margin-left: auto; }
}

/* ==========================================
   SEITENWECHSEL
   View Transitions zwischen Dokumenten: kein Skript, keine Bibliothek.
   Browser ohne Unterstuetzung laden einfach normal. Die Projektkachel
   "oeffnet" sich zusaetzlich in das Filmbild der Projektseite (Namen
   vergibt script.js beim Klick).
   ========================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.25s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.5s var(--ease-out) both; }
::view-transition-group(project-media) { animation-duration: 0.7s; animation-timing-function: var(--ease-out); }
::view-transition-group(site-header) { animation-duration: 0s; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ==========================================
   HERO (Startseite)
   Film randlos, Titel unten links, daneben Satz und ein Button.
   Am Desktop bleibt der Hero stehen und die naechste Sektion faehrt
   darueber — reines CSS (sticky), ohne Scroll-Listener.
   ========================================== */

.hero--video {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 1200px;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(4rem, 13vh, 9.5rem);
  overflow: hidden;
  background: var(--surface) url('/assets/video/hero-poster.webp?v=1794164962') center / cover no-repeat;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video--bw { filter: grayscale(1); }

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(22, 22, 22, 0.86) 0%,
    rgba(22, 22, 22, 0.45) 30%,
    rgba(22, 22, 22, 0.08) 58%,
    rgba(22, 22, 22, 0) 75%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  column-gap: var(--gap-grid);
  row-gap: var(--space-5);
  align-items: end;
}

.hero__name {
  grid-row: 1 / span 2;
  font-size: min(var(--fs-display), 12.5vh);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-display);
  line-height: 0.96;
  color: #fff;
  max-width: 10ch;
  text-wrap: balance;
}

.hero__sub {
  grid-column: 2;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  max-width: 32ch;
}

.hero__ctas {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Das letzte Wort ("watch.") ist der Kepler-Akzent der Startseite —
   das eine orange Wort ueber dem Film. */
.hero__name .word { display: inline-block; }

/* Kursiv im Studio (<em>) ist der Akzent, egal wie viele Woerter */
.hero__name em { font-style: normal; }
.hero__name em .word,
.hero__name .word:last-child {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  font-size: 1.06em;
  color: var(--accent-text);
  padding-right: 0.04em;
}

/* Auftritt: Woerter steigen aus einer Maske auf. Die Zeile selbst clippt. */
.hero__name { overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }

.js .hero__name .word {
  opacity: 0;
  transform: translateY(80%);
  animation: word-rise 1s var(--ease-out) forwards;
}

.js .hero__sub,
.js .hero__ctas {
  opacity: 0;
  animation: fade-up 0.9s var(--ease-out) 0.45s forwards;
}

.js .hero__ctas { animation-delay: 0.55s; }


@keyframes word-rise { to { opacity: 1; transform: none; } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Desktop: Hero bleibt stehen, der Inhalt faehrt darueber. Der Titel
   blendet dabei mit dem Scrollen aus (Scroll-getriebene Animation, wo der
   Browser sie kann — sonst bleibt er einfach stehen). */
@media (min-width: 900px) and (min-height: 620px) {
  .hero--video { position: sticky; top: 0; }
  /* Die Sektionen danach decken den stehenden Hero ab — auch ausserhalb
     ihres Containers. Ohne diese randlose Flaeche schaute der Film auf
     breiten Bildschirmen links und rechts neben den Inhalten hervor. */
  /* Flaeche per border-image: seitlich bis an den Rand, oben und unten
     einen Pixel ueber den Nachbarn. Vorher (box-shadow + clip-path) trafen
     sich zwei Sektionen auf einer halben Pixelkante, und auf Retina schien
     das dunkle Video dort als feine Linie durch (Lua 19.09.: "weirdo"). */
  .hero--video ~ * {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-image: conic-gradient(var(--bg) 0 0) fill 0 / / 1px 100vmax;
  }

  @supports (animation-timeline: scroll()) {
    .hero__content {
      animation: hero-leave linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    @keyframes hero-leave {
      to { opacity: 0; transform: translateY(-12vh); }
    }
  }
}

/* Mobil: 4:5-Rahmen statt voller Hoehe. Der Titel steht damit schon im
   ersten Bild mitten im Blick, nicht erst am unteren Rand eines
   bildschirmhohen Videos. */
@media (max-width: 899px) {
  .hero--video {
    height: min(88svh, 138vw);
    min-height: 0;
    padding-bottom: clamp(3rem, 14vw, 4.5rem);
    background-image: url('/assets/video/hero-poster-mobile.webp?v=1794164962');
  }

  .hero__content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }

  .hero__name {
    grid-row: auto;
    font-size: clamp(2.2rem, 10vw, 3.4rem);
    max-width: 11ch;
  }

  .hero__sub, .hero__ctas { grid-column: 1; }
  .hero__sub { font-size: 0.9444rem; max-width: 30ch; }
}

@media (min-width: 769px) and (max-width: 899px) {
  .hero--video { background-image: url('/assets/video/hero-poster.webp?v=1794164962'); }
}

/* ==========================================
   STATEMENT (Startseite)
   Der Satz ueber Lua, gross gesetzt. Die Woerter werden beim Lesen hell
   (script.js setzt --p von 0 bis 1). Ohne Skript steht er einfach da.
   ========================================== */

.statement {
  padding: var(--section) 0 var(--section-sm);
}

@media (max-width: 899px) {
  .statement { padding-top: clamp(2.75rem, 10vw, 4rem); }
}

.statement__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
}

.statement__text,
.statement__link { grid-column: 3 / span 9; }

.statement__text {
  font-size: var(--fs-statement);
  font-weight: var(--fw-medium);
  line-height: 1.16;
  letter-spacing: var(--ls-heading);
  color: var(--white);
  max-width: 30ch;
}

.statement__link {
  justify-self: start;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.statement__text .w {
  opacity: max(0.5, min(1, calc(var(--p, 1) * var(--n, 1) * 1.25 - var(--i, 0))));
}

@media (max-width: 899px) {
  .statement__text,
  .statement__link { grid-column: 1 / -1; }
}

/* ==========================================
   PROJEKTKACHELN (Startseite, Work, Other Projects)
   Grosses Querformat, darunter Titel und Kategorie. Die ganze Kachel ist
   der Link. Kein Zoom, keine Rundung, kein Logo-Overlay, kein Button —
   beim Hover startet (Desktop) das Vorschau-Video, der Pfeil am Titel
   ruckt ein Stueck nach.
   ========================================== */

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--white);
  line-height: 1.05;
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

.projects {
  padding-top: var(--section-sm);
  padding-bottom: var(--section);
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--img-gap);
}

/* Startseite: die ersten vier. Die Reihenfolge kommt aus dem Studio
   (Projekte → Reihenfolge), alle Kacheln stehen auf /work. */
.projects--home .projects__grid > .card:nth-child(n+5) { display: none; }

.projects__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

.card { display: block; position: relative; }

.card--placeholder { display: none; }

.card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--surface);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.card__video.is-playing { opacity: 1; }

.card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding-top: var(--space-4);
}

.card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
  color: var(--white);
}

/* "See Project" bleibt sichtbar, aber leise: kleiner Text mit Pfeil, der
   beim Hover nach rechts ruckt und orange wird. Kein zweiter Button. */
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--space-3);
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: color var(--dur-base) var(--ease);
}

.card__arrow {
  display: inline-block;
  transition: transform 0.6s var(--ease-out);
}

.card:hover .card__cta,
.card:focus-visible .card__cta { color: var(--accent-text); }

.card:hover .card__arrow,
.card:focus-visible .card__arrow { transform: translateX(5px); }

/* Das Bild selbst bleibt ruhig; beim Hover zieht nur ein Hauch Licht
   zurueck und (Desktop) das Vorschau-Video blendet ein. */
.card__img { transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.card:hover .card__img { filter: brightness(0.92); }

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

@media (max-width: 768px) {
  .projects__grid { grid-template-columns: minmax(0, 1fr); }
  .card__video { display: none; }
}

/* Keine Sonderregel fuer grosse Screens: Startseite bleibt 2 x 2 (10.11.).
   Die alte 2400px-Regel versteckte Kachel 4 und liess ein Loch. */

/* ==========================================
   LOGO-BAND
   Ruhig, klein, eine Zeile. CSS-Animation, haelt bei Hover und bei
   "weniger Bewegung" still.
   ========================================== */

.marquee {
  padding: var(--section-sm) 0 var(--section);
  border-top: var(--hair) solid var(--divider);
  overflow: hidden;
}

.hero + .marquee { border-top: 0; }

.marquee__label {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  text-transform: none;
  color: var(--white);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}

/* Logo-Band laeuft beim Hover weiter (Lua 24.09.) */

.marquee__set {
  display: flex;
  align-items: center;
  gap: clamp(3.5rem, 7vw, 7rem);
  padding-right: clamp(3.5rem, 7vw, 7rem);
  flex-shrink: 0;
}

.marquee__logo {
  height: clamp(28px, 3vw, 44px);
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.8;
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================
   CTA-BLOCK ("Got a project? Let's talk.")
   Dunkel, zentriert, ein Satz, ein Button. Kein Video, kein Verlauf.
   ========================================== */

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: var(--section);
  padding-bottom: var(--section);
  border-top: var(--hair) solid var(--divider);
}

.cta-block__title,
.project-cta__text {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.08;
  color: var(--white);
  max-width: 14ch;
  text-wrap: balance;
}

.marquee + .cta-block { border-top: 0; }

/* ==========================================
   SEITENKOPF (Work, About, Contact, Shop, Legal, Academy, 404)
   ========================================== */

.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6.5rem));
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.page-hero__eyebrow { margin-bottom: var(--space-4); }

.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1.02;
  color: var(--white);
  max-width: 18ch;
}

/* About: ein ganzer Satz statt eines Wortes, deshalb eine Stufe kleiner. */
.page-hero__title--statement {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.06;
  max-width: 22ch;
}

.page-hero__sub {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  max-width: 52ch;
}

.page-hero__action { margin-top: var(--space-8); }

.page-hero--solo { padding-bottom: var(--section); min-height: 70svh; }

/* ==========================================
   WORK-SEITE
   ========================================== */

.work-index { padding-bottom: var(--section); }

.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1.25rem, 2vw, 2rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: var(--hair) solid var(--divider);
}

.work-filter__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.work-filter__btn:hover { color: var(--white); }
.work-filter__btn[aria-pressed="true"] { color: var(--accent-text); }

.work-grid .card[hidden] { display: none; }

@media (max-width: 768px) {
  .work-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
  }
  .work-filter::-webkit-scrollbar { display: none; }
  .work-filter__btn { flex: none; }
}

/* ==========================================
   PROJEKTSEITE
   Kategorie, Titel, Film, dann Text mit Credits daneben, Bilder,
   Kontakt, weitere Projekte.
   ========================================== */

.project-hero {
  padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  color: var(--muted);
  margin-bottom: clamp(1rem, 3vw, 2.5rem);
  transition: color var(--dur-fast) var(--ease);
}

.back-link:hover { color: var(--white); }

.back-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ease-out);
}

.back-link:hover svg { transform: translateX(-4px); }

.project-hero__cat { margin-bottom: var(--space-3); }

.project-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 1.02;
  max-width: 18ch;
}

.project-video { padding-bottom: var(--section-sm); }

.project-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: var(--space-10);
  padding-bottom: var(--section);
  align-items: start;
}

.project-body__text {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 64ch;
}

.project-hero__desc {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text);
}

/* Der erste Absatz fuehrt ein: eine Stufe groesser und hell, kein Zitat. */
.project-body__text .project-hero__desc:first-child {
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: var(--ls-normal);
  color: var(--white);
  margin-bottom: 0.3em;
}

.project-body__credits {
  grid-column: 9 / span 4;
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
}

.project-body__credits:not(:has(.credit-person)) { display: none; }

.project-body__label { margin-bottom: var(--space-4); }

.project-hero__credits {
  display: flex;
  flex-direction: column;
  border-top: var(--hair) solid var(--divider);
}

.credit-person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--hair) solid var(--divider);
}

.credit-person__portrait {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex: none;
  background: var(--surface);
}

.credit-person__portrait--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--hair) solid var(--border);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.credit-person__body { display: flex; flex-direction: column; min-width: 0; }

.credit-person__name {
  font-size: 0.9444rem;
  font-weight: var(--fw-medium);
  color: var(--white);
  line-height: 1.35;
}

a.credit-person__name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

a.credit-person__name:hover,
a.credit-person__name:focus-visible { text-decoration-color: var(--border-strong); }

.credit-person__role { font-size: var(--fs-caption); color: var(--muted); line-height: 1.4; }

.project-images { padding-bottom: var(--section); }

.project-images__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-img);
}

.img-item { overflow: hidden; background: var(--surface); }
.img-item--full { grid-column: 1 / -1; }

.img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.img-item--full img { aspect-ratio: 16 / 9; }

.project-images:has(+ .doc-stills) { padding-bottom: var(--gap-img); }

.other-projects {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--section-sm);
  padding-bottom: var(--section);
}

.other-projects__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--white);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.other-projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--img-gap);
}

.project-cta .project-cta__link { margin-top: 0; }

@media (max-width: 899px) {
  .project-body__text,
  .project-body__credits { grid-column: 1 / -1; position: static; }
}

@media (max-width: 768px) {
  .project-images__grid,
  .other-projects__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Meta-Zeilen (Produktseiten, Services). Wert hell, Label ruhig. */
.meta-list { display: flex; flex-direction: column; gap: var(--space-2); }
.meta-row { display: flex; align-items: baseline; gap: var(--space-4); font-size: 0.875rem; }
.meta-row__label { color: var(--muted); font-size: 0.8125rem; min-width: 160px; flex-shrink: 0; }
.meta-row__value { color: var(--white); }
a.meta-row__value,
.meta-row__value a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
a.meta-row__value:hover,
.meta-row__value a:hover { text-decoration-color: var(--border-strong); }

/* ==========================================
   VIDEO-PLAYER
   Standbild, oranger Play-Knopf, sonst nichts. Das YouTube-iframe
   entsteht erst beim Klick.
   ========================================== */

.video-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  padding: 0;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}

.video-player__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-player__play {
  --play-size: clamp(3.2rem, 1.2rem + 4.5vw, 5rem);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--play-size);
  height: var(--play-size);
  margin: calc(var(--play-size) / -2) 0 0 calc(var(--play-size) / -2);
  font-size: var(--play-size);
  border-radius: 50%;
  background: var(--accent);
  z-index: 1;
  transition: transform 0.5s var(--ease-out);
}

.video-player__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 0.138em 0 0.138em 0.233em;
  border-color: transparent transparent transparent var(--accent-ink);
}

@media (hover: hover) {
  .video-player:hover .video-player__play { transform: scale(1.08); }
}
.video-player:focus-visible .video-player__play { transform: scale(1.08); }

.video-player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pg-showcase__fig .video-player { border: 0; }

/* LH-Player (assets/player): Standbild bleibt der Knopf oben, beim Klick
   tauscht lh-player.js ihn gegen .lh-frame im selben Format. Projektseiten
   sind immer die volle 16:9-Spalte; ein 4:3-Film sitzt darin mittig auf
   seinem geblurrten Standbild (lh-player.css, .lh-backdrop). */
.video-player.is-loading .video-player__play { opacity: .55; transition: opacity var(--m-hover, .2s) ease; }

/* ==========================================
   ABOUT
   ========================================== */

.about-bio { padding-bottom: var(--section); }

.about-bio__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: var(--space-10);
  align-items: start;
}

.about-bio__img-wrap {
  grid-column: 1 / span 5;
  grid-row: 1;
  position: sticky;
  top: calc(var(--header-h) + var(--space-6));
  overflow: hidden;
  background: var(--surface);
}

.about-bio__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-bio__text {
  grid-column: 7 / span 6;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 62ch;
}

.about-bio__text p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text);
}

/* Einstieg: der erste Satz fuehrt, eine Stufe groesser. Der zweite ist die
   kleine Ueberschrift der Geschichte. Danach normaler Lesetext. */
.about-bio__text > p:first-child {
  font-size: var(--fs-lead);
  line-height: 1.42;
  letter-spacing: var(--ls-normal);
  color: var(--white);
}

.about-bio__text > p:nth-child(2) {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
  color: var(--white);
  margin-top: 1.4em;
}

.about-bio__text p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--divider); }

@media (max-width: 899px) {
  .about-bio__img-wrap,
  .about-bio__text { grid-column: 1 / -1; grid-row: auto; position: static; }
  .about-bio__img-wrap { max-width: 520px; }
}

/* Section-Titel auf About: ein Stil, weiss, ohne Kursiv-Akzent. */
.kollektiv__label,
.about-bts__label {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  color: var(--white);
  line-height: 1.05;
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

.kollektiv {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--section-sm);
  padding-bottom: var(--section);
}

.kollektiv__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem) var(--gap-grid);
}

.kollektiv__person {
  display: flex;
  flex-direction: column;
  scroll-margin-top: calc(var(--header-h) + var(--space-8));
}

.kollektiv__frame {
  background: var(--surface);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.kollektiv__portrait,
.kollektiv__portrait--empty {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.kollektiv__name {
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--white);
  line-height: 1.3;
  width: fit-content;
}

a.kollektiv__name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

a.kollektiv__name:hover,
a.kollektiv__name:focus-visible { text-decoration-color: var(--accent); }

.kollektiv__role { font-size: var(--fs-caption); color: var(--muted); line-height: 1.45; margin-top: 0.15rem; }

@media (max-width: 1200px) { .kollektiv__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .kollektiv__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .kollektiv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.75rem; } }

/* ---- Podcast: Next Shot ----
   Cover links, Text rechts. Alle Bedienelemente laufen im Orange der
   Website; das Gelb gehoert nur zum Cover selbst. */

.podcast {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--section-sm);
  padding-bottom: var(--section);
}

.podcast__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: var(--space-8);
  align-items: center;
}

.podcast__cover {
  grid-column: 1 / span 5;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface);
}

.podcast__cover img { width: 100%; height: 100%; object-fit: cover; }

.podcast__body {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 56ch;
}

.podcast__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.05;
  color: var(--white);
}

.podcast__tagline {
  font-size: var(--fs-lead);
  line-height: 1.42;
  color: var(--white);
}

.podcast__tagline a { color: var(--white) !important; }

.podcast__desc { font-size: var(--fs-body); line-height: 1.75; color: var(--text); }

.podcast__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

@media (max-width: 899px) {
  .podcast__cover,
  .podcast__body { grid-column: 1 / -1; }
  .podcast__cover { max-width: 420px; }
}

/* ---- Behind the Scenes ---- */

.about-bts {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--section-sm);
  padding-bottom: var(--section);
  container-type: inline-size;
}

/* ==========================================
   KONTAKT
   Die Formularsprache aus dem Redesign: keine Kaesten, nur eine Linie
   unter jedem Feld, grosse Schrift. Fokus zieht die Linie orange.
   ========================================== */

.contact-content { padding-bottom: var(--section); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 1040px;
  padding-top: clamp(0.5rem, 2vw, 1.5rem);
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.contact-form__group { display: flex; flex-direction: column; gap: var(--space-2); }

.contact-form__label {
  font-size: var(--fs-category);
  font-weight: var(--fw-regular);
  color: var(--muted);
}

@property --cf-line { syntax: '<color>'; inherits: false; initial-value: #C4C4C4; }

/* Ein Feld, eine Linie (24.10.2026). Vorher war die graue Linie eine
   border und die orange ein Hintergrund im Feld: beim Fokus lagen zwei
   Striche uebereinander. Jetzt sind beide Linien Hintergrund-Ebenen an
   derselben Stelle, Orange laeuft ueber Grau. Ruhe = grau, Hover = dunkler,
   ausgefuellt = Charcoal, Fokus = Orange. Autofill sieht aus wie Tippen. */
.contact-form__input,
.contact-form__textarea {
  --cf-line: var(--border-strong);
  width: 100%;
  border: 0;
  border-radius: 0;
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-heading);
  padding: 0.3em 0 0.55em;
  background-color: transparent;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--cf-line), var(--cf-line));
  background-repeat: no-repeat;
  background-position: left bottom, left bottom;
  background-size: 0% 2px, 100% 2px;
  caret-color: var(--accent);
  transition: background-size 0.7s var(--ease-out), --cf-line var(--dur-base) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__textarea {
  font-size: var(--fs-lead);
  letter-spacing: var(--ls-normal);
  line-height: 1.45;
  min-height: 170px;
  resize: none;
  field-sizing: content;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: color-mix(in srgb, var(--white) 30%, transparent); }

@media (hover: hover) {
  .contact-form__input:hover,
  .contact-form__textarea:hover { --cf-line: var(--muted); }
}
.contact-form__input:not(:placeholder-shown),
.contact-form__textarea:not(:placeholder-shown) { --cf-line: var(--white); }

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  background-size: 100% 2px, 100% 2px;
}

/* Browser-Autofill: keine blaue/gelbe Flaeche, gleiche Schrift wie getippt. */
.contact-form__input:-webkit-autofill {
  -webkit-text-fill-color: var(--white);
  --cf-line: var(--white);
  transition: background-color 600000s 0s, color 600000s 0s, background-size 0.7s var(--ease-out);
}
.contact-form__input:autofill { --cf-line: var(--white); }

.contact-form__submit { align-self: flex-start; }

.contact-form__success,
.contact-form__error {
  display: none;
  font-size: var(--fs-body);
  line-height: 1.5;
  padding: var(--space-5) var(--space-6);
}

.contact-form__success {
  color: var(--white);
  border: var(--hair) solid rgba(143, 206, 154, 0.45);
  background: rgba(143, 206, 154, 0.08);
}

.contact-form__success::before { content: '\2713'; margin-right: var(--space-2); color: #8fce9a; font-weight: var(--fw-semibold); }

.contact-form__error {
  color: #E6A0A0;
  border: var(--hair) solid rgba(224, 140, 140, 0.4);
  background: rgba(224, 140, 140, 0.07);
}

.contact-form__error a { text-decoration: underline; text-underline-offset: 3px; }

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .contact-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================
   FOOTER
   Oben die Angaben (Kontakt gross, daneben Office, Explore, Social),
   darunter die Rechtszeile, ganz unten die Wortmarke LUA HELL ueber die
   volle Breite — in Geist Medium, nicht fett. Die Groesse ist gemessen:
   "LUA HELL" in Geist 500 mit -0.025em Laufweite ist 4.39 Schriftgroessen
   breit (enger gesetzt wirkte sie zu fett) (Canvas-Messung, 18.09.2026). Bezug ist die Footerbreite (cqw),
   nicht 100vw, damit keine Scrollbar mitgerechnet wird.
   ========================================== */

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border-top: var(--hair) solid var(--divider);
  padding-top: clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
  container-type: inline-size;
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: var(--space-10);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.footer__lead { grid-column: 1 / span 6; }
.footer__cols {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.footer__label { margin-bottom: var(--space-4); }

.footer__email {
  position: relative;
  display: inline-block;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--white);
  line-height: 1.05;
}

.footer__email::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease-out);
}

.footer__email:hover::after { transform: scaleX(1); transform-origin: left; }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; }

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-size: 0.9444rem;
  color: var(--white);
  transition: color var(--dur-fast) var(--ease);
}

.footer__link:hover,
.footer__link:active { color: var(--accent-text); }

/* Zeilenhoehe = Hoehe einer Link-Zeile (2rem), damit Office auf denselben
   Linien steht wie Explore und Social daneben. */
.footer__text,
.footer__clock {
  font-size: 0.9444rem;
  line-height: 2rem;
  color: var(--text);
}

.footer__clock { color: var(--muted); font-variant-numeric: tabular-nums; }

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: var(--hair) solid var(--divider);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.footer__legal-copy { order: -1; }

.footer__legal-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }

.footer__legal-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}

.footer__legal-link:hover,
.footer__legal-link:active { color: var(--white); }

.footer__word {
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
  font-size: calc(100cqw / 4.46);
  font-weight: var(--fw-medium);
  letter-spacing: -0.025em;
  line-height: 0.74;
  white-space: nowrap;
  text-align: center;
  text-indent: -0.025em;
  color: var(--white);
  overflow: hidden;
  padding-top: 0.03em;
  user-select: none;
}

.footer__word-inner {
  display: inline-block;
  transform: translateY(0);
  transition: transform 1.2s var(--ease-out);
}

.js .footer__word:not(.is-visible) .footer__word-inner { transform: translateY(45%); }

@media (max-width: 1024px) {
  .footer__lead, .footer__cols { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
  .footer__cols .footer__col:first-child { grid-column: 1 / -1; }
  .footer__link { min-height: var(--tap); }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .footer__legal-copy { order: 1; padding-bottom: var(--space-2); }
}

/* ==========================================
   AUFTRITTE BEIM SCROLLEN
   Sichtbar ist der Normalzustand. Versteckt wird nur unter .js — faellt
   das Skript aus, bleibt alles lesbar (auch fuer Google).
   Projektkacheln oeffnen sich von unten (clip-path), Text steigt leicht.
   ========================================== */

.js .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}

.js .fade-in.is-visible { opacity: 1; transform: none; }

/* Kacheln blenden ruhig ein und steigen ein Stueck. Kein Aufziehen des
   Bildrahmens — das wirkte wie ein Zoom (Lua, 19.09.). */
.js .card.fade-in { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .card.fade-in.is-visible { opacity: 1; transform: none; }

.js .card.fade-in .card__info {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease-out) 0.15s, transform 1s var(--ease-out) 0.15s;
}

.js .card.fade-in.is-visible .card__info { opacity: 1; transform: none; }

/* ==========================================
   WENIGER BEWEGUNG
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }

  .js .fade-in,
  .js .card.fade-in,
  .js .card.fade-in .card__info {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .js .hero__name .word,
  .js .hero__sub,
  .js .hero__ctas {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__content { animation: none !important; }
  .marquee__track { animation: none; }
  .statement__text .w { opacity: 1; }

  .mobile-menu,
  .mobile-menu.is-open,
  .mobile-menu__link,
  .mobile-menu.is-open .mobile-menu__link { transition: none; transform: none; }

  .site-header,
  .card__video,
  .card__title::after,
  .btn--arrow::after,
  .video-player__play { transition: none; }
}

@media print {
  .site-header, .site-footer, .mobile-menu { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   AB HIER: Bausteine aus dem Bestand (FAQ, Galerie, Lightbox, Services,
   Shop, Produktseiten, Consent, Checkout). Unveraendert im Aufbau, nur auf
   die gemeinsamen Tokens gezogen.
   ========================================================================== */


/* ==========================================
   FAQ
   ========================================== */

/* Den Section-Rahmen setzt .faq-section, das Label kommt aus .section-label.
   Die frueheren .faq und .faq__label Regeln sind damit entfallen. */

.faq__list {
  max-width: var(--measure-md);
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: var(--hair) solid var(--divider);
}

.faq__item:first-child {
  border-top: var(--hair) solid var(--divider);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.2s;
}

.faq__item[open] .faq__question::after {
  transform: rotate(45deg);
  color: var(--white);
}

.faq__item[open] .faq__question {
  color: var(--white);
}

.faq__answer {
  padding-bottom: var(--space-4);
  padding-right: var(--space-8);
}

.faq__answer p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text);
}

/* Bento-Raster.
   Zwoelf quadratische Spalten, und jedes Bild belegt eine feste Flaeche
   darin: das Kino-Breitbild die ganze Breite, das grosse Hochformat drei
   mal vier Zellen, das Querformat drei mal zwei. Das Seitenverhaeltnis
   jeder Flaeche ist GENAU das Format, das im Studio zugeschnitten wird
   (CMS_BTS_RATIOS in studio/cms-site.php) — nichts wird doppelt beschnitten.

   Vorher liefen alle Bilder in gleich hohen Reihen. Das war ruhig, aber bei
   zwanzig Bildern eine Wand ohne Rhythmus. Die festen Flaechen geben dem
   Raster Gewicht: grosse Momente neben kleinen, dazwischen ein Bild ueber
   die volle Breite.

   dense fuellt Luecken mit spaeteren kleineren Bildern auf. Die Reihenfolge
   im Studio bestimmt also die Richtung, das Raster sorgt dafuer, dass nie
   ein Loch stehen bleibt.

   Die Zellhoehe kommt aus der Breite des Abschnitts (container-type auf
   .about-bts), nicht aus dem Fenster — sonst waeren die Zellen auf breiten
   Bildschirmen keine Quadrate mehr. */
.about-bts { container-type: inline-size; }

.about-bts__grid {
  --bts-gap: var(--gap-img);
  display: grid;
  /* Zwoelf statt sechs Spalten: dieselben Kachelformen, halb so gross.
     Bei sechs Spalten stand ein einzelnes Hochformat bildschirmhoch da und
     die Galerie war sechs Meter lang. So passen zwei Bento-Bloecke
     nebeneinander, und die Reihenfolge im Studio packt lueckenlos
     (durchgerechnet: 19 Bilder, 14 Zellreihen, 0 Loecher). */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(3rem, 7vw, 8.5rem);
  grid-auto-flow: row dense;
  gap: var(--bts-gap);
}

@supports (width: 1cqw) {
  .about-bts__grid {
    grid-auto-rows: calc((100cqw - 11 * var(--bts-gap)) / 12);
  }
}

.about-bts__item {
  grid-column: span 3;
  grid-row: span 2;
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.about-bts__item[data-tile="2:1"]  { grid-column: span 6; grid-row: span 3; }
.about-bts__item[data-tile="4:3"]  { grid-column: span 4; grid-row: span 3; }
.about-bts__item[data-tile="16:9"] { grid-column: span 4; grid-row: span 2; }
.about-bts__item[data-tile="3:4"],
.about-bts__item[data-tile="4:5"]  { grid-column: span 3; grid-row: span 4; }
.about-bts__item[data-tile="2:3"]  { grid-column: span 2; grid-row: span 3; }
.about-bts__item[data-tile="1:1"]  { grid-column: span 2; grid-row: span 2; }

.about-bts__open {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.about-bts__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-bts__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 768px) {
  .about-bts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .about-bts__item,
  .about-bts__item[data-tile] {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }

  .about-bts__item[data-tile="2:1"] { aspect-ratio: 2 / 1; }

  .about-bts__item[data-tile="3:4"],
  .about-bts__item[data-tile="4:5"],
  .about-bts__item[data-tile="2:3"],
  .about-bts__item[data-tile="1:1"] {
    grid-column: span 1;
    aspect-ratio: 2 / 3;
  }
}

/* ==========================================
   LIGHTBOX
   Nur auf Klick. Das Bild steht in voller Groesse vor Charcoal, Pfeile
   und Tastatur blaettern, Esc oder Klick daneben schliesst.
   Ein <dialog>: der Browser uebernimmt Fokus-Falle und Esc selbst.
   ========================================== */

.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 10, 10, 0.96);
  color: var(--white);
  overflow: hidden;
}

.lightbox::backdrop { background: transparent; }

.lightbox__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(0.5rem, 5vw, 5.5rem);
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.lightbox__btn:hover { color: var(--accent); }
.lightbox__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lightbox__close { top: 0.75rem; right: 0.75rem; }
.lightbox__prev  { left: 0.5rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 0.5rem; top: 50%; transform: translateY(-50%); }

.lightbox__count {
  position: absolute;
  top: 1.35rem;
  left: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  /* Auf dem Handy blaettert man mit Wischen; Pfeile unten statt seitlich,
     damit sie nicht ueber dem Bild liegen. */
  .lightbox__prev, .lightbox__next { top: auto; bottom: 0.75rem; transform: none; }
  .lightbox__prev { left: 25%; }
  .lightbox__next { right: 25%; }
}

/* ==========================================
   DOCUMENTARY STILLS GRID
   ========================================== */

.doc-stills {
  padding-bottom: var(--gap-section);
}

/* When BTS grid is directly followed by stills grid, collapse the gap so they read as one block */
.project-images:has(+ .doc-stills) {
  padding-bottom: var(--gap-img);
}

.doc-stills__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-img);
}

.doc-stills__item {
  overflow: hidden;
  background: var(--surface-2);
}

.doc-stills__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

@media (max-width: 900px) {
  .doc-stills__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .doc-stills__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   COOKIE-CONSENT
   Modal unten. Eckig wie alle Panels. Alle vier Aktionen sind gleich
   erreichbar (DSGVO: Ablehnen darf nicht schwerer sein als Zustimmen).
   ========================================== */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) + 10);
  background: var(--surface-1);
  border-top: var(--hair) solid var(--border-strong);
  padding: clamp(1.25rem, 3vw, 2rem) var(--pad);
  max-height: 90vh;
  overflow-y: auto;
  animation: consent-in var(--dur-base) var(--ease);
}

@keyframes consent-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

.consent__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

.consent__copy { max-width: var(--measure-lg); }

.consent__title {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin-bottom: var(--space-2);
}

.consent__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
}

.consent__text a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}

.consent__text strong { color: var(--white); font-weight: var(--fw-medium); }

/* Kategorien: erst nach "Customise" sichtbar. */
.consent__cats { display: none; }

.consent--details .consent__cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--hair) solid var(--divider);
}

.consent__cat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: 32px;
}

.consent__cat-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.consent__cat-row input:disabled { cursor: not-allowed; opacity: 0.55; }

.consent__cat-title {
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--white);
}

.consent__cat-text {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: var(--space-1);
  padding-left: var(--space-7);
}

.consent__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}

/* Die Buttons duerfen nie innerhalb der Pille umbrechen — "Reject all" auf
   zwei Zeilen hat die Leiste vorher deutlich hoeher gemacht. */
.consent__btn { white-space: nowrap; }

/* Sekundaere Aktionen.
   Die Klasse stand schon im Markup, hatte aber nie eine Regel — dadurch waren
   alle drei Buttons volles Signature Orange, gleich laut und ohne Hierarchie.
   Genau das laesst eine Cookie-Leiste wie ein Fremdbaustein aussehen. Jetzt
   traegt nur "Accept all" die Markenfarbe, der Rest ist ruhig. */
/* Genau EIN oranger Button: "Accept all". Alles andere ist dieselbe Pille mit
   heller Umrandung. #383838 war dafuer zu dunkel — der Rahmen verschwand auf
   der Panel-Flaeche fast. */
.consent__btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--white);
}

.consent__btn--ghost:hover,
.consent__btn--ghost:active {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
  transform: none;
}

/* Die Leiste ist eine Pflichtmitteilung, kein Inhalt. Sie darf so wenig Platz
   wie moeglich wegnehmen: kleinere Buttons als im Rest der Seite, engere
   Innenabstaende, kuerzere Zeilen. Rechtlich bleibt alles drin — Text,
   Link zur Datenschutzerklaerung und die vier Kategorien. */
.consent {
  padding: clamp(0.875rem, 1.6vw, 1.125rem) var(--pad);
  padding-bottom: max(clamp(0.875rem, 1.6vw, 1.125rem), env(safe-area-inset-bottom, 0px));
  background: var(--surface);
}

.consent__btn {
  font-size: var(--btn-fs-sm);
  padding: var(--btn-pad-sm);
}

.consent__inner { align-items: center; }

.consent__title {
  font-size: 0.6875rem;
  margin-bottom: var(--space-1);
}

.consent__text {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.consent__copy { max-width: var(--measure-md); }

/* Kategorien kompakter: zwei Zeilen statt vier, kleinere Beschreibungen. */
.consent--details .consent__cats {
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

.consent__cat-row { min-height: 28px; }

.consent__cat-title { font-size: 0.8125rem; }

.consent__cat-text {
  font-size: 0.75rem;
  line-height: 1.45;
  padding-left: var(--space-6);
}

/* "Save choices" gibt es erst im Detail-Modus, "Customise" nur davor. */
.consent__btn--save { display: none; }
.consent--details .consent__btn--save { display: inline-flex; }
.consent--details .consent__btn--details { display: none; }

/* ---- Embed-Gate: Platzhalter statt direkt ladendem Drittanbieter-Player ---- */

.embed-gate {
  background: var(--surface-2);
  border: var(--hair) solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  min-height: 200px;
  aspect-ratio: 16 / 9;
}

.podcast__embed .embed-gate { aspect-ratio: auto; min-height: 152px; }

.embed-gate__inner { max-width: var(--measure-sm); text-align: center; }

.embed-gate__title {
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin-bottom: var(--space-2);
}

.embed-gate__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: var(--space-5);
}

.embed-gate__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.embed-gate__link:hover { color: var(--accent-text); }

/* Der Cookie-Button sieht aus wie die Links daneben, ist aber ein <button>.
   Deshalb nur noch der Button-Reset — Schriftgroesse, Farbe, Abstand und
   Tippziel kommen aus .footer__legal-link, damit die vier Eintraege der
   Rechtszeile garantiert identisch bleiben. Vorher standen dieselben Werte
   hier ein zweites Mal und liefen auf dem Handy auseinander (24px statt 44px). */
.footer__link--consent {
  background: none;
  border: 0;
  font-size: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: fit-content;
  padding: 0;
  line-height: inherit;
  letter-spacing: inherit;
}

.footer__link--consent:disabled { cursor: default; opacity: 0.6; }

/* ---- Consent auf dem Handy ----
   Vorher nahm die Leiste bei 375px rund 45% der Bildschirmhoehe ein: drei
   gleich grosse Pillen, die zu 2+1 umbrachen, mit Zeilenumbruch im Button.
   Jetzt zwei saubere Reihen — die beiden ruhigen Aktionen nebeneinander,
   "Accept all" darunter ueber die volle Breite. Gleiche Funktion, gut die
   Haelfte der Hoehe. */
@media (max-width: 700px) {
  /* Innenabstand kommt aus der Basisregel (kompakt). Hier nur noch die
     Obergrenze, damit die Leiste nie den halben Bildschirm frisst. */
  .consent { max-height: 70svh; }

  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .consent__text { font-size: 0.8125rem; }

  .consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  .consent__btn {
    width: 100%;
    padding: var(--btn-pad-sm);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Das display oben ueberschreibt die beiden Sichtbarkeitsregeln von weiter
     oben. Hier wieder herstellen, sonst steht "Save choices" schon da, bevor
     ueberhaupt auf "Customise" geklickt wurde. */
  .consent__btn--save { display: none; }
  .consent--details .consent__btn--save { display: inline-flex; }
  .consent--details .consent__btn--details { display: none; }

  /* Die Hauptaktion bekommt die eigene Zeile — dadurch steht sie ueber die
     volle Breite und ist eindeutig die primaere Wahl. Ueber das Attribut
     angesprochen, damit dafuer kein Markup angefasst werden muss. */
  .consent__actions [data-consent="accept"] { grid-column: 1 / -1; }

  .consent--details .consent__cats {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}


/* ==========================================
   SHOP-UEBERSICHT
   Cover, Preis als Etikett auf dem Cover, darunter Kategorie und Name,
   ein einziger Einstieg ("View"). Keine Kartenflaeche, kein Rahmen.
   Beim Hover kippt das Cover leicht mit der Maus (script.js) — das
   Produkt bewegt sich, der Bildausschnitt bleibt.
   ========================================== */

.shop { padding-bottom: var(--section); }

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--gap-grid);
  max-width: 1320px;
}

.product-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}

a.product-card { text-decoration: none; }

.product-card__img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
  perspective: 1000px;
}

.product-card__tilt {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-out);
}

.product-card__tilt img,
.product-card__img-wrap > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__price {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 1;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--white);
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-normal);
  line-height: 1.2;
}

.product-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding-top: var(--space-4);
}

.product-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
  color: var(--white);
}

.product-card__desc { display: none; }

/* "View" ist Teil der Kachel, kein eigener Klickpunkt: kleine Kontur-
   Pille, die sich beim Hover der ganzen Kachel orange fuellt. */
.product-card__buy {
  pointer-events: none;
  margin-top: var(--space-4);
}

.product-card__buy::after {
  content: '\2192';
  display: inline-block;
  transition: transform 0.6s var(--ease-out);
}

a.product-card:hover .product-card__buy::after { transform: translateX(3px) rotate(-45deg); }

a.product-card:focus-visible { outline: none; }
a.product-card:focus-visible .product-card__img-wrap { outline: 2px solid var(--accent); outline-offset: 4px; }

.product-card--soon .product-card__img-wrap { opacity: 0.5; }

.product-card__ribbon {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
}

.shop__empty {
  color: var(--muted);
  font-size: 1rem;
  padding: var(--space-6) 0;
}

@media (prefers-reduced-motion: reduce) {
  .product-card__tilt,
  .product-card__buy::after { transition: none; }
}


/* ==========================================================================
   PASS 02 — Bildband, FAQ, Playhead. Steht bewusst am Ende, weil es die
   Bestands-Bausteine (FAQ, BTS-Raster) darueber ueberschreibt.
   ========================================================================== */

/* ==========================================
   BILDBAND (Startseite "Behind the frame", About "Behind the Scenes")
   Eine Reihe grosser Bilder in echter Proportion. Das Band laeuft mit dem
   Scrollen seitlich durch und laesst sich ziehen (script.js, [data-track]).
   Ohne Skript oder bei "weniger Bewegung" scrollt es einfach horizontal.
   ========================================== */

.moments {
  padding: var(--section-sm) 0 var(--section);
  border-top: var(--hair) solid var(--divider);
  overflow: hidden;
}

.moments__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

.moments__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.05;
}

.moments__link {
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.moments__link::after { content: ' \2192'; }
.moments__link:hover { color: var(--accent-text); }

.moments__viewport {
  --track-h: clamp(220px, 30vw, 480px);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.moments__viewport::-webkit-scrollbar { display: none; }

.moments__viewport.is-enhanced { overflow: hidden; }

.moments__viewport.is-dragging { cursor: grabbing; }

/* Das Band beginnt buendig mit dem Seitenraster und laeuft bis zur
   Fensterkante — also Innenabstand = Containerkante. */
.moments__track {
  display: flex;
  gap: clamp(0.5rem, 1vw, 1rem);
  width: max-content;
  padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  will-change: transform;
}

.moments__item {
  flex: none;
  height: var(--track-h);
  width: calc(var(--track-h) * var(--bts-ar, 1.5));
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: auto;
}

.moments__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}


@media (max-width: 768px) {
  .moments__viewport { --track-h: 62vw; }
}

/* ==========================================
   FAQ (Produktseiten) — Bauart aus dem Redesign
   Volle Breite, Haarlinien, grosse Fragen, Plus rechts, das zum Minus
   wird. Hover und offene Frage in Orange. Immer nur eine offen; die Hoehe
   laeuft weich (script.js). Keine Karten, keine Kaesten.
   ========================================== */

/* Rahmen der FAQ-Section: stand frueher nur in styles-product.css, die
   About nicht laedt. Seit die persoenliche FAQ auf About steht (20.09.),
   gehoert die Grundregel hierher, damit sie auf jeder Seite gilt. */
.faq-section {
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--gap-section-top);
  padding-bottom: var(--gap-section);
}
.faq-section .faq__list { max-width: none; }

.faq-section .editorial {
  display: block;
  border-top: 0;
  padding: 0;
}

.faq-section .editorial__head { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }

.faq__list { max-width: none; border-top: var(--hair) solid var(--divider); }
.faq__item,
.faq__item:first-child { border-top: 0; border-bottom: var(--hair) solid var(--divider); }

.faq__question {
  gap: var(--space-8);
  padding: clamp(1rem, 1.4vw, 1.4rem) 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.25;
  color: var(--white);
  transition: color 0.3s var(--ease);
}

.faq__question::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  align-self: center;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size 0.4s var(--ease-out);
  transform: none;
  color: inherit;
  font-size: 0;
}

.faq__question:hover,
.faq__item[open] .faq__question { color: var(--accent-text); }

.faq__item[open] .faq__question::after {
  transform: none;
  color: inherit;
  background-size: 100% 1.5px, 1.5px 0;
}

.faq__answer {
  overflow: hidden;
  padding: 0;
}

.faq__answer p {
  padding: 0 var(--space-8) clamp(1.25rem, 1.8vw, 1.75rem) 0;
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
}

/* ==========================================
   PLAYHEAD
   Auf dem Film sitzt der Play-Knopf dort, wo die Maus ist, und kehrt beim
   Verlassen in die Mitte zurueck (script.js setzt --px/--py). Nur mit
   echter Maus und ohne "weniger Bewegung".
   ========================================== */

.video-player__play {
  transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--ps, 1));
  transition: transform 0.5s var(--ease-out);
}

.video-player.is-following .video-player__play { transition: none; }
.video-player.is-following { cursor: none; }

@media (hover: hover) {
  .video-player:hover .video-player__play { --ps: 1.08; transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--ps)); }
}

:root[data-theme="light"] .marquee__logo { filter: brightness(0); opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .roll > span,
  .footer__word-inner,
  .btn::before, .hero__cta::before, .product-hero__btn::before, .contact-form__submit::before,
  .faq__question::after { transition: none !important; }
  .js .footer__word:not(.is-visible) .footer__word-inner { transform: none; }
}

/* Academy-Lektionen: das Bild oeffnet sich von unten, das Motiv setzt sich
   dabei (wie im Redesign). Ausgeloest ueber .fade-in / .is-visible. */
.js .pg-lesson__fig.fade-in { opacity: 1; transform: none; }

.js .pg-lesson__fig.fade-in img {
  transform: scale(1.2);
  transition: transform 1.8s var(--ease-out);
}

.js .pg-lesson__fig.fade-in.is-visible img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .pg-lesson__fig.fade-in { clip-path: none; transition: none; }
  .js .pg-lesson__fig.fade-in img { transform: none; transition: none; }
}

/* Logo-Band nach dem Einstiegstext: ohne sichtbare Ueberschrift, ruhiger
   Abstand, keine Trennlinie. Der Titel bleibt fuer Screenreader. */
.statement + .marquee,
.marquee { border-top: 0; padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }

/* Avatare im Kaufbereich: Tippziel mind. 24px ohne Ueberlappung. */
.trust__avatar-link { margin-left: -4px; }
.trust__avatar-link img { width: 32px; height: 32px; }

/* Vorher/Nachher-Griff in der CI: oranger Knopf, Charcoal-Pfeile, weisse
   Linie. Kein Glas, kein Schatten-Blur. */
.ba-slider__handle { background: rgba(255, 255, 255, 0.85); }
.ba-slider:hover .ba-slider__handle { background: #fff; }
.ba-slider__handle::after {
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  backdrop-filter: none;
  transition: transform 0.4s var(--ease-out);
}
.ba-slider:hover .ba-slider__handle::after { transform: translate(-50%, -50%) scale(1.08); }
.ba-slider__handle::before { color: var(--accent-ink); font-size: 13px; font-weight: var(--fw-semibold); }

/* Basic vs Pro (Film Core): beide Karten in Farben aus Liams Palette,
   in beiden Modi gleich (Lua 19.09., Variante A). Glacier Blue fuer
   Basic (ruhig, Einstieg), Deep Pine fuer Pro (tief, filmisch). Orange
   bleibt allein dem Kaufknopf. Schrift auf beiden Flaechen weiss. */
.pg-vs__card { background: var(--glacier); border: var(--hair) solid var(--glacier); color: #fff; }
.pg-vs__card--pro { background: var(--pine); border-color: var(--pine); }
.pg-vs__head { justify-content: space-between; align-items: center; }
.pg-vs__name { font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); font-size: max(var(--fs-h3), 1.4rem); }
/* Produktnamen stehen komplett in Kepler (Lua 20.09.: "product names in
   serif"). Gilt fuer die Produkttitel (H1 via .hl-accent), die Basic/Pro-
   Karten und die Shop-Karten. Im Fliesstext bleibt der Name Geist. */
.pg-vs__name .hl-accent,
.product-card__title {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  color: inherit;
}
.pg-vs__name .hl-accent { font-size: 1.06em; }
.pg-vs__tag {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  border: var(--hair) solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
}
.pg-vs__card :is(.pg-vs__name, .pg-vs__line, .pg-vs__tag, .pg-vs__num) { color: #fff; }
.pg-vs__card .pg-vs__line { font-weight: var(--fw-medium); }
.pg-vs__card .pg-vs__count { color: rgba(255, 255, 255, 0.85); }
.pg-vs__card .pg-vs__fig { border-color: rgba(0, 0, 0, 0.25); }

/* Kopfzeile wie im Redesign: Logo links, Navigation mittig, Schalter
   rechts. Navigation in Versalien, Geist Medium, leicht gesperrt. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nav__logo { justify-self: start; }
.nav__links { margin-left: 0; justify-self: center; }
.theme-toggle { justify-self: end; margin-left: 0; }

.nav__link {
  font-size: 0.7778rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .nav { grid-template-columns: 1fr auto auto; }
  .theme-toggle { margin-left: 0; }
}

/* ==========================================
   PASS 03 — etwas mehr Bewegung wie im Redesign, dosiert.
   ========================================== */

/* Titel: Woerter steigen aus einer Maske auf (script.js teilt sie in
   .tw > span). Nur unter .js, ohne Skript steht der Titel normal da. */
.tw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.tw > span { display: inline-block; }
.js .split-ready .tw > span {
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 45ms);
}
.js .split-ready.is-in .tw > span { transform: none; }

/* Hero: der Film setzt beim Laden aus leichter Naehe zurueck. */
@keyframes hero-settle { from { transform: scale(1.12); } to { transform: none; } }
.js .hero__video { animation: hero-settle 2.4s var(--ease-out) both; }


/* Bilder auf Projektseiten: von unten aufziehen, Motiv setzt sich. */
.js .img-item.fade-in { opacity: 1; transform: none; }
.js .img-item.fade-in img { transform: scale(1.15); transition: transform 1.8s var(--ease-out); }
.js .img-item.fade-in.is-visible img { transform: none; }

/* Magnetische Buttons: script.js setzt --mx/--my. */
.is-magnetic { translate: var(--mx, 0) var(--my, 0); transition: translate 0.9s cubic-bezier(0.2, 1.4, 0.4, 1); }

@media (prefers-reduced-motion: reduce) {
  .js .split-ready .tw > span { transform: none; transition: none; }
  .js .hero__video { animation: none; }
  .js .img-item.fade-in { clip-path: none; transition: none; }
  .js .img-item.fade-in img { transform: none; transition: none; }
  .is-magnetic { translate: none; }
}

/* ==========================================
   PASS 04 — Werdegang (About), mehr Auftritte
   ========================================== */

/* About: Einstieg links neben dem Portraet, ohne weitere Absaetze darunter. */
.about-bio { padding-bottom: var(--section-sm); }
.about-bio__text { align-self: start; }
.about-bio__text > p:first-child { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: var(--ls-heading); font-weight: var(--fw-medium); }

/* Geschichte (About): Titel links, Lesetext rechts in Lesebreite. Ein
   Satz darin ist das Zitat in Kepler. */
.story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: var(--space-8);
  border-top: var(--hair) solid var(--divider);
  padding-top: var(--section-sm);
  padding-bottom: var(--section);
}

.story__title {
  grid-column: 1 / span 5;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.08;
}

.story__body {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 62ch;
}

.story__body p { font-size: var(--fs-body); line-height: 1.75; color: var(--text); }
.story__body p a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.story__body .story__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--white);
  margin: 0.4em 0;
}

@media (max-width: 899px) {
  .story__title, .story__body { grid-column: 1 / -1; }
}

/* Leistungen (Services): gleiche Bauart — Titel gross, Nummer rechts in
   Klammern, kein Kepler in den drei Titeln, damit der Akzent selten bleibt. */
.service-index__head { grid-template-columns: minmax(0, 1fr) auto auto; }
.service-index__num {
  order: 2;
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  align-self: start;
  padding-top: 0.5em;
}
.service-index__num::before { content: '('; }
.service-index__num::after { content: ')'; }
.service-index__title { order: 1; font-size: clamp(2rem, 1.2rem + 3.4vw, 4.6rem); font-weight: var(--fw-medium); line-height: 0.98; }
.service-index__icon { order: 3; }
.service-index__title .hl-accent,
.services-context__title .hl-accent { font-family: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; letter-spacing: inherit; }

/* Test-Schalter (Studio → Global → Darstellung): alle Titel in Versalien.
   Leicht offener gesetzt, Versalien brauchen etwas Luft. Kepler bleibt in
   normaler Schreibung. */
[data-titles="caps"] :is(.hero__name, .page-hero__title, .project-hero__title, .section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title, .service-index__title) {
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
[data-titles="caps"] .footer__email { text-transform: none; }
/* Versalien gelten auch fuer das Kepler-Wort — gemischt (BEHIND THE Scenes)
   wirkte es wie ein Fehler. Kepler-Versalien brauchen etwas Luft. */
[data-titles="caps"] :is(.hero__name, .page-hero__title, .project-hero__title, .section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title, .service-index__title) .hl-accent { text-transform: uppercase; letter-spacing: 0.01em; }
/* Nie gemischt: in allen anderen Titeln bleibt das Kepler-Wort in seiner Schreibung. */
/* Wo .hl-accent bewusst Geist bleibt (Leistungen, Kontext), zieht es mit. */
[data-titles="caps"] :is(.service-index__title, .services-context__title) .hl-accent { text-transform: inherit; }

/* Weitere Auftritte: Portraets, Galerie und Shop-Cover oeffnen sich wie
   die Projektbilder, Kundenstimmen heben sich beim Hover leicht. */
.js .kollektiv__person.fade-in .kollektiv__frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-in-out); }
.js .kollektiv__person.fade-in.is-visible .kollektiv__frame { clip-path: inset(0 0 0 0); }

.js .about-bts__item.fade-in { opacity: 1; transform: none; }


.testimonial { transition: border-color 0.4s var(--ease), transform 0.6s var(--ease-out); }
.testimonial:hover { border-color: var(--accent); transform: translateY(-4px); }

/* Seitenkopf: Untertitel folgt dem Titel. */
.js .page-hero__sub { opacity: 0; transform: translateY(14px); animation: fade-up 1s var(--ease-out) 0.45s forwards; }

/* Wort-Maske: Kepler braucht normale Zeilenhoehe, sonst clippt die Maske. */
.tw > .hl-accent { line-height: inherit; }

@media (prefers-reduced-motion: reduce) {
  .js .kollektiv__person.fade-in .kollektiv__frame,
  .js .about-bts__item.fade-in,
  .js .product-card.fade-in { opacity: 1; transform: none; transition: none; }
  .js .page-hero__sub { opacity: 1; transform: none; animation: none; }
  .testimonial:hover { transform: none; }
}

/* ==========================================
   KEPLER FUER ZITATE UND LABELS (CI, 19.09.)
   Zusaetzlich zum einen Akzentwort im Titel darf Kepler Semibold Italic:
   1. kleine Labels ueber einem Wert tragen (Kategorie ueber dem Projekt-
      titel, "Credits", Footer-Spalten) — in Versalien, leicht gesperrt;
   2. kurze Zitate setzen (Kundenstimmen, Pull-Quote im Werdegang).
   Nie fuer Fliesstext, Navigation, Buttons oder Formulare.
   ========================================== */

.card__cat,
.product-card__cat,
.section-label,
.footer__label,
.page-hero__eyebrow,
.podcast__label,
.project-body__label {
  font-family: var(--font);
  font-style: normal;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--muted);
}

/* Die Projektkategorie auf der Projektseite bleibt der orange Meta-Wert. */
/* Kategorien bleiben Kepler (Lua 19.09.: "die Serife bei den Kategorien
   war schon nice"). Gilt fuer Projektseite, Kacheln und Shop-Karten.
   Section-Labels, Footer und Cookie bleiben Geist. */
.project-hero__cat,
.card__cat {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.project-hero__cat { font-size: 1rem; }
.card__cat { font-size: 0.9444rem; }

/* Im Shop steht der Produktname in Kepler. Die Kategorie darueber bleibt
   deshalb Geist, sonst stehen zwei Serif-Zeilen uebereinander (Lua 20.09.). */
.product-card__cat {
  font-family: var(--font);
  font-style: normal;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

.testimonial__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: 1.0556rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--white);
}

/* Kundenstimmen wie im Redesign: drei Spalten, nur Kontur, beim Hover
   orange und leicht angehoben. */
.testimonials__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); }
.testimonial { background: transparent; border: var(--hair) solid var(--divider); }
@media (max-width: 1000px) { .testimonials__grid { grid-template-columns: minmax(0, 1fr); } }

/* About: Porträt steht, rechts laeuft die ganze Geschichte daneben. */
.about-bio { padding-bottom: var(--section); }
.about-bio__text .story__title {
  font-size: var(--fs-h3);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 0.2em;
  max-width: 24ch;
}
.about-bio__text .story__body { max-width: none; }

/* Versalien brauchen im Hero mehr Laufbreite, sonst bricht er dreizeilig. */
[data-titles="caps"] .hero__name { max-width: 13ch; }

/* Produktnamen sind Wortmarken (Film Core, Volume 01): immer in ihrer
   eigenen Schreibung, auch mit Versalien-Schalter. Die Zeile darueber
   bleibt schlichtes Geist, zwei Kepler-Ebenen uebereinander waren zu viel. */
[data-titles="caps"] .product-hero__title,
[data-titles="caps"] .product-hero__title .hl-accent { text-transform: none; }

/* Formular-Rueckmeldung in den Supporting-Farben der Marke: gesendet in
   Pine, Fehler in Cinematic Red. Volle Flaeche, eckig, weisse Schrift —
   kein gruenlicher Kasten mit Rahmen mehr. */
.contact-form__success,
.contact-form__error {
  border: 0;
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: #fff;
}

.contact-form__success { background: var(--pine); }
.contact-form__success::before { content: '\2713'; color: #fff; margin-right: var(--space-3); font-weight: var(--fw-medium); }
.contact-form__error { background: var(--cinematic-red); }
.contact-form__error a { color: #fff; }

/* Bild-Auftritt: der Clip sitzt auf dem Bild, NICHT auf dem beobachteten
   Element. Ein komplett zugeklapptes Element hat fuer den Observer keine
   sichtbare Flaeche, loest nie aus und die Bilder blieben weg (19.09.). */
.js :is(.img-item, .pg-lesson__fig).fade-in img {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s var(--ease-in-out), transform 1.8s var(--ease-out);
}
.js :is(.img-item, .pg-lesson__fig).fade-in.is-visible img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js :is(.img-item, .pg-lesson__fig).fade-in img { clip-path: none; transform: none; transition: none; }
}

/* Projektbilder: kein Aufziehen mehr (Lua 19.09.: "zuerst eine Farbflaeche,
   Bilder laden zu slow"). Das Bild erscheint, sobald es geladen ist, und
   setzt sich beim Reinscrollen leicht. script.js setzt .is-loaded. */
.js .img-item.fade-in img {
  clip-path: none;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.5s var(--ease), transform 1.4s var(--ease-out);
}
.js .img-item.fade-in img.is-loaded { opacity: 1; }
.js .img-item.fade-in.is-visible img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .img-item.fade-in img { transform: none; transition: none; }
}

/* About, rechte Spalte ruhiger: ein Einstieg in Lead-Groesse, eine
   Zwischenzeile, Lesetext. Weniger Groessen, kleinere Abstaende. */
.about-bio__text > p:first-child {
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: var(--ls-normal);
  color: var(--white);
}
.about-bio__text .story__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: 1.35;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 0;
  max-width: none;
}
.about-bio__text .story__body .story__quote { font-size: var(--fs-lead); line-height: 1.4; margin: 0.2em 0; }
.about-bio__grid { align-items: start; }
.about-bio__img { aspect-ratio: 4 / 5; }

/* ==========================================
   HERO-TITEL: eine Groessenregel fuer alle Bildschirme
   Die Groesse richtet sich nach Breite UND Hoehe (der kleinere Wert
   gewinnt), damit der Titel nie das Bild zudeckt — weder auf dem Handy,
   noch im Tablet-Hochformat, noch auf einem flachen Laptop. Versalien
   laufen breiter und hoeher, deshalb 12 Prozent kleiner (--caps).
   ========================================== */
:root { --caps: 1; }
[data-titles="caps"] { --caps: 0.88; }

.hero__name,
[data-titles="caps"] .hero__name {
  font-size: calc(min(4.6vw + 1rem, 11vh, 6rem) * var(--caps));
  max-width: 13ch;
}

@media (max-width: 899px) {
  .hero__name,
  [data-titles="caps"] .hero__name {
    font-size: calc(clamp(1.9rem, 5.2vw + 0.6rem, 2.9rem) * var(--caps));
    max-width: 12ch;
  }
  .hero__sub { font-size: 0.9444rem; max-width: 34ch; }
  .hero--video { height: min(84svh, 132vw); }
}

@media (max-width: 899px) and (max-height: 700px) {
  .hero__name,
  [data-titles="caps"] .hero__name { font-size: calc(min(2.2rem, 6.5vh) * var(--caps)); }
}

/* Auch die Seitentitel: Versalien eine Spur kleiner, damit sie nicht
   lauter werden als in normaler Schreibung. */
[data-titles="caps"] :is(.page-hero__title, .project-hero__title) { font-size: calc(var(--fs-h1) * var(--caps)); }
[data-titles="caps"] :is(.section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title) { font-size: calc(var(--fs-h2) * var(--caps)); }

/* ==========================================
   SERVICES: Prozess im Zeilenstil der Leistungen
   Volle Breite, grosser Schritt-Titel, Text daneben, Nummer rechts in
   Klammern. Die Linie ueber einer Zeile zieht sich orange, wenn man sie
   erreicht (script.js, .is-reached).
   ========================================== */
.services-process .editorial { display: block; border-top: 0; padding: 0; }
.services-process .editorial__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.services-process .section-label {
  font-family: var(--font);
  font-style: normal;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  text-transform: none;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}
[data-titles="caps"] .services-process .section-label { text-transform: uppercase; letter-spacing: -0.02em; font-size: calc(var(--fs-h2) * var(--caps)); }

.process__steps { border-bottom: var(--hair) solid var(--divider); }
.process__step,
.process__step:first-child {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto;
  column-gap: var(--gap-grid);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
  border-top: var(--hair) solid var(--divider);
  border-bottom: 0;
}
.process__step-body { display: contents; }
.process__step-title {
  grid-column: 1; grid-row: 1;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.6rem);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 0.98;
  color: var(--white);
  margin: 0;
}
[data-titles="caps"] .process__step-title { text-transform: uppercase; letter-spacing: -0.02em; font-size: calc(clamp(2rem, 1.2rem + 3.4vw, 4.6rem) * var(--caps)); }
.process__step-desc {
  grid-column: 2; grid-row: 1;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  padding-top: 0.4em;
}
.process__step-num {
  grid-column: 3; grid-row: 1;
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 0.6em;
  transition: color 0.5s var(--ease);
}
.process__step-num::before { content: '('; }
.process__step-num::after { content: ')'; }
.process__step.is-reached .process__step-num { color: var(--accent-text); }

@media (max-width: 899px) {
  .process__step, .process__step:first-child { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-4); }
  .process__step-num { grid-column: 2; }
  .process__step-desc { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
}

/* ==========================================
   NUMMERIERTE ZEILEN — ein Muster fuer Leistungen und Prozess
   "01 COMMERCIAL FILMS": die Nummer steht im Titel, gleiche Groesse,
   gedaempft; offen bzw. erreicht wird sie orange. Rechts nur noch das
   Plus, mittig auf der Zeile. Keine Klammern mehr.
   ========================================== */
:root { --row-title: clamp(2rem, 1.2rem + 3.4vw, 4.6rem); }

.service-index__head {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(1rem, 2.2vw, 2.25rem);
}
.service-index__num,
.process__step-num {
  order: 0;
  font-size: calc(var(--row-title) * var(--caps));
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  line-height: 0.98;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 0;
  align-self: center;
}
.service-index__num::before, .service-index__num::after,
.process__step-num::before, .process__step-num::after { content: none; }
.service-index__title { order: 1; font-size: calc(var(--row-title) * var(--caps)); }
.service-index__icon { order: 2; align-self: center; }
.service-index__list.is-enhanced .service-index__item.is-open .service-index__num { color: var(--accent-text); }

.process__step,
.process__step:first-child {
  grid-template-columns: auto minmax(0, 6fr) minmax(0, 4fr);
  align-items: center;
  column-gap: clamp(1rem, 2.2vw, 2.25rem);
}
.process__step-num { grid-column: 1; grid-row: 1; }
.process__step-title { grid-column: 2; grid-row: 1; font-size: calc(var(--row-title) * var(--caps)); }
.process__step-desc { grid-column: 3; grid-row: 1; padding-top: 0; }
.process__step.is-reached .process__step-num { color: var(--accent-text); }

@media (max-width: 899px) {
  .process__step, .process__step:first-child { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-3); }
  .process__step-desc { grid-column: 1 / -1; grid-row: 2; }
}

/* Cookie-Leiste im Designsystem: Titel als Kepler-Label wie alle Labels,
   ruhigere Flaeche, Fokusring mit Abstand. */
.consent { border-top: var(--hair) solid var(--divider); }
.consent__title {
  font-family: var(--font);
  font-style: normal;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--muted);
}
.consent__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* About mobil: Portraet zuerst, dann die Geschichte. */
@media (max-width: 899px) {
  .about-bio__img-wrap { order: -1; }
}

/* Auswahl: Orange mit Charcoal-Schrift, ohne Kanten durch die Wortmasken
   im Hero (die Woerter sind dort Inline-Bloecke). */
.hero__name .word { padding: 0; margin: 0; }
.hero__name .word::selection,
.hero__name::selection { background: var(--accent); color: var(--accent-ink); }

/* ==========================================
   EINSTIEG NACH DEM VIDEO (Startseite)
   Portraet links, der Satz ueber Lua rechts. Das Bild ist Inhalt (Alt-Text,
   srcset), der Satz bleibt ein Absatz — die einzige H1 der Seite ist der
   Hero-Titel.
   ========================================== */
.statement__portrait {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  margin: 0;
  align-self: start;
  overflow: hidden;
  background: var(--surface);
}
.statement__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.statement__text,
.statement__link { grid-column: 5 / span 8; }
.statement__text { grid-row: 1; }
.statement__link { grid-row: 2; align-self: start; }

@media (max-width: 899px) {
  .statement__portrait { grid-column: 1 / -1; grid-row: auto; width: min(60%, 280px); margin-bottom: var(--space-8); }
  .statement__text, .statement__link { grid-column: 1 / -1; grid-row: auto; }
  /* Mobil steht im Film nur Titel und Button: der Satz darunter wuerde den
     Einstieg direkt danach wiederholen. */
  .hero__sub { display: none; }
}

/* Lightbox ist immer ein dunkler Bildbetrachter, auch im Hellmodus.
   Vorher erbte sie --white (im Hellmodus Charcoal): dunkle Pfeile auf
   dunklem Grund, praktisch unsichtbar. */
.lightbox { background: rgba(12, 12, 12, 0.97); color: #fff; }
.lightbox__btn { color: #fff; }
.lightbox__btn:hover { color: var(--accent); }
.lightbox__count { color: rgba(255, 255, 255, 0.6); }
.lightbox__btn:focus-visible { outline-color: #fff; }

/* BTS-Galerie: kein langsames Aufklappen mehr. Jedes Bild blendet kurz
   ein, sobald es geladen ist (script.js setzt .is-loaded). */
.js .about-bts__item.fade-in { opacity: 1; transform: none; transition: none; }
.js .about-bts__item.fade-in { opacity: 1; transform: none; transition: none; }
.js .about-bts__item img { opacity: 0; transition: opacity 0.35s var(--ease); }
.js .about-bts__item img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .about-bts__item img { transition: none; } }

/* Kaufen und Absenden: volle orange Flaeche statt Kontur. Pro Bildschirm
   genau ein solcher Knopf, alles andere bleibt Kontur. Beim Hover steigt
   ein hellerer Orange-Kreis auf, dieselbe Bewegung wie bei den anderen.
   Text Charcoal (4.67:1). Deaktiviert bleibt Kontur (Regel oben, staerker). */
.product-hero__btn,
.contact-form__submit,
.btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.product-hero__btn::before,
.contact-form__submit::before,
.btn--solid::before { background: var(--accent-hover); }
.product-hero__btn:hover,
.contact-form__submit:hover,
.btn--solid:hover { border-color: var(--accent-hover); color: var(--accent-ink); }

/* Projektseiten: Vertiefung nach den Bildern. Zwischentitel und Absaetze
   in derselben Spalte wie der Text oben, damit die Seite eine Leselinie hat. */
.project-more {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  padding-top: var(--section-sm);
  padding-bottom: var(--section-sm);
}
.project-more__inner {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 64ch;
}
.project-more__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 0.2em;
}
.project-more__text { font-size: var(--fs-body); line-height: 1.75; color: var(--text); }
@media (max-width: 899px) { .project-more__inner { grid-column: 1 / -1; } }

/* Navigation (Lua 20.09.):
   - Orange Haarlinie unter der Leiste, damit Navigation und Seite klar
     getrennt sind. Sie blendet mit der Flaeche ein, steht also nicht ueber
     dem Hero-Video.
   - Schrift eine Stufe leichter (Regular statt Medium).
   - Mobiles Menue in Versalien wie die Desktop-Navigation, Linien in
     derselben Staerke wie ueberall sonst (--hair). */
.site-header {
  border-bottom-color: color-mix(in srgb, var(--accent) calc(var(--header-solid) * 100%), transparent);
}

.nav__link { font-weight: var(--fw-regular); }

/* Mobiles Menue: Versalien und engere Zeilen wurden getestet und von Lua
   beide verworfen (20.09.). Es bleibt bei der urspruenglichen Fassung:
   normale Schreibung, gross, Medium, ruhiger Zeilenabstand. Diese Regel
   steht hier nur noch als Notiz, damit es niemand nochmal aendert. */

/* ---- PASS05:SWISS:START ----
   Swiss-Raster, Pass 05 (24.09.2026). Zum Entfernen diesen Block und den
   gleich markierten Block in script.js loeschen, sonst aendert sich nichts.
   1. /work: Projekttabelle mit Video beim Hover (Umschalter, Standard Grid).
      Die Startseite bleibt bei vier Kacheln.
   3. /work-Titel nur Geist.
   4. Drei Scroll-Effekte, direkt ans Scrollen gekoppelt (kein Nachlaufen).
   5. Ein Raster auf 1.333 (Schrift + Sektionsabstaende).
   6. Grosse randlose Bilder (.bleed) auf der Startseite.
   7. About als Swiss Editorial.
   Linien bleiben neutral (--divider), nie orange ueber Zeilen. */

/* ---- 1. Projekttabelle ---- */

/* /work: Umschalter Grid / List rechts in der Filterleiste */
.work-view {
  display: inline-flex;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-left: auto;
}
.work-view__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.work-view__btn:hover,
.work-view__btn[aria-pressed="true"] { color: var(--white); }
.work-index[data-view="list"] .work-grid { display: none; }
.work-index:not([data-view="list"]) .work-table { display: none; }
/* Die Filterleiste traegt oben schon eine Linie */
.work-index .work-table { margin-top: calc(-1 * clamp(1.75rem, 3vw, 2.75rem)); }
.work-list__row[hidden] { display: none; }
.work-table__head,
.work-list__link {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr) 2rem;
  align-items: baseline;
  column-gap: var(--gap-grid);
}
.work-table__head {
  padding-bottom: var(--space-3);
  border-bottom: var(--hair) solid var(--divider);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list__row { border-bottom: var(--hair) solid var(--divider); }
.work-list__link {
  padding: clamp(1.1rem, 1.6vw, 1.6rem) 0;
  color: var(--white);
}
.work-list__num {
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.work-list__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
}
.work-list__cat {
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.work-list__arrow {
  justify-self: end;
  color: var(--text);
  transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.work-list__link:hover .work-list__arrow,
.work-list__link:focus-visible .work-list__arrow { color: var(--accent-text); transform: translateX(5px); }
.work-list__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: hover) {
  .work-list .work-list__link { transition: opacity var(--dur-base) var(--ease); }
  .work-list:hover .work-list__link { opacity: 0.4; }
  .work-list:hover .work-list__link:hover { opacity: 1; }
}

.work-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: clamp(240px, 24vw, 400px);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  background: var(--surface);
  overflow: hidden;
}
.work-preview.is-on { opacity: 1; }
.work-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.work-preview.is-playing video { opacity: 1; }

@media (max-width: 768px) {
  /* Handy: /work immer Kacheln, dort gibt es kein Hover-Video */
  .work-view { display: none; }
  .work-index[data-view="list"] .work-grid { display: grid; }
  .work-index .work-table { display: none; }
  .work-table__head { display: none; }
  .work-list { border-top: var(--hair) solid var(--divider); }
  .work-list__link {
    grid-template-columns: 2.75rem minmax(0, 1fr) 1.5rem;
    row-gap: 0.2rem;
  }
  .work-list__num { grid-row: 1 / span 2; }
  .work-list__title { grid-column: 2; }
  .work-list__cat { grid-column: 2; grid-row: 2; }
  .work-list__arrow { grid-column: 3; grid-row: 1; }
}

/* ---- 3. /work-Titel: nur Geist, kein Kepler, kein Orange (Lua 24.09.) ---- */
#work-title .hl-accent,
[data-titles="caps"] #work-title .hl-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
}

/* ---- 4. Scroll-Effekte ----
   Alle drei haengen direkt am Scrollweg (scroll-driven animations): sie
   laufen auf dem Compositor, so schnell wie gescrollt wird, ohne Nachlauf.
   Browser ohne Unterstuetzung zeigen einfach den ruhenden Zustand. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* a) Kacheln: Bild bewegt sich im Rahmen gegen die Scrollrichtung. */
    .card__img-wrap { view-timeline: --lh-card block; }
    .card__img,
    .card__video {
      animation: lh-parallax linear both;
      animation-timeline: --lh-card;
      animation-range: cover 0% cover 100%;
    }
    @keyframes lh-parallax {
      from { transform: translateY(-8%) scale(1.16); }
      to   { transform: translateY(8%) scale(1.16); }
    }

    /* c) Footer: die Wortmarke wird vom Scrollen aus der Kante gezogen. */
    /* overflow: hidden machte den Footer zu einem eigenen Scrollbereich,
       dann steht die Zeitachse still. clip schneidet gleich ab, ohne das. */
    .site-footer { overflow: clip; }
    .footer__word { view-timeline: --lh-word block; }
    .footer__word-inner {
      transition: none;
      animation: lh-word linear both;
      animation-timeline: --lh-word;
      animation-range: entry 0% entry 100%;
    }
    @keyframes lh-word {
      from { transform: translateY(100%); }
      to   { transform: none; }
    }
  }

  /* b) Hero (Desktop, wo er stehen bleibt): der Film zieht beim
     Wegscrollen leicht auf und dunkelt ab, die Seite faehrt darueber. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 620px) {
    /* Eigene Eigenschaft (scale statt transform), damit das bestehende
       Setzen beim Laden (hero-settle) weiterlaeuft. */
    .js .hero__video {
      animation: hero-settle 2.4s var(--ease-out) both, lh-hero-depth linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    @keyframes lh-hero-depth {
      to { scale: 1.1; filter: brightness(0.45); }
    }
    .js .hero__video--bw { animation-name: hero-settle, lh-hero-depth-bw; }
    @keyframes lh-hero-depth-bw {
      from { filter: grayscale(1); }
      to { scale: 1.1; filter: grayscale(1) brightness(0.45); }
    }
  }
}

/* ---- 5. Ein Raster: Perfect Fourth 1.333 (wie Liams CI-Skala) ----
   Basis 18px. Stufen: 13.5 · 18 · 24 · 32 · 42.7 · 56.9 · 75.8 · 101 · 135.
   Jede Schriftgroesse und der Sektionsabstand liegen auf einer Stufe
   (Handy eine bis zwei Stufen tiefer, fliessend bis 1440px). Vorher lagen
   Titel bei 43, 46 und 49px nebeneinander und Sektionen hatten oben und
   unten verschiedene Abstaende (43 bis 140px). Jetzt: ueberall gleich. */
:root {
  --fs-caption:   0.75rem;                                   /* 13.5 */
  --fs-category:  0.75rem;                                   /* 13.5 */
  --fs-lead:      clamp(1.1111rem, 1.0286rem + 0.381vw, 1.3333rem);   /* 20 -> 24 */
  --fs-h3:        clamp(1.3333rem, 1.1683rem + 0.762vw, 1.7778rem);   /* 24 -> 32 */
  --fs-statement: clamp(1.3333rem, 0.9481rem + 1.778vw, 2.3704rem);   /* 24 -> 42.7 */
  --fs-h2:        clamp(1.7778rem, 1.2642rem + 2.370vw, 3.1605rem);   /* 32 -> 56.9 */
  --fs-h1:        clamp(2.3704rem, 1.6856rem + 3.160vw, 4.2140rem);   /* 42.7 -> 75.8 */
  --fs-display:   clamp(3.1605rem, 2.2475rem + 4.214vw, 5.6187rem);   /* 56.9 -> 101 */
  --section:      clamp(1.7778rem, 0.8729rem + 4.176vw, 4.2140rem);   /* 32 -> 75.8, oben = unten */
  --section-sm:   var(--section);
  --gap-grid:     clamp(1.0000rem, 0.7111rem + 1.333vw, 1.7778rem);   /* 18 -> 32 */
}
.cta-block__title, .project-cta__text { font-size: var(--fs-h2); }
.statement + .marquee, .marquee { padding: var(--section) 0; }

/* ---- 6. Grosse randlose Bilder ----
   Ein BTS-Bild von Lua ueber die ganze Breite, wie ein Kapitelwechsel.
   Ohne Beschriftung (Lua 24.09.). Markup in index.html zwischen
   PASS05:BLEED-Kommentaren. */
.bleed {
  position: relative;
  overflow: clip;
  height: clamp(420px, 92svh, 1100px);
  background: var(--surface);
}
.bleed__media,
.bleed__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.bleed__media img { object-fit: cover; }
@media (max-width: 767px) {
  .bleed { height: auto; aspect-ratio: 4 / 5; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bleed { view-timeline: --lh-bleed block; }
    .bleed__media img {
      height: 124%;
      animation: lh-bleed linear both;
      animation-timeline: --lh-bleed;
      animation-range: cover 0% cover 100%;
    }
    @keyframes lh-bleed {
      from { transform: translateY(-19%); }
      to   { transform: translateY(0); }
    }
  }
}

/* ---- 7. About als Swiss Editorial (Lua 24.09., Referenz Kalkbrenner) ----
   Nur About (main:has(#about-title)). Riesige H1 mit kleinem Satz rechts,
   darunter ein grosses Bild versetzt bis an den rechten Rand. Geschichte:
   riesiger Titel, Porträt links, Text rechts. BTS als ruhige Galerie
   in drei Spalten. Keine Nummern vor den Titeln (Lua 24.09.). */

/* Hero */
main:has(#about-title) .page-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  align-items: end;
  padding-bottom: var(--section);
}
main:has(#about-title) .page-hero__title {
  grid-column: 1 / span 8;
  font-size: var(--fs-display);
  max-width: none;
}
main:has(#about-title) .page-hero__sub {
  grid-column: 9 / span 4;
  margin: 0 0 0.5em;
  max-width: 34ch;
}

/* Grosses Bild: ab Spalte 3 bis an den rechten Rand */
.about-hero-img {
  margin: 0 0 var(--section) calc(var(--pad) + (100% - 2 * var(--pad)) * 2 / 12);
  aspect-ratio: 3 / 2;
  max-height: 92svh;
  overflow: clip;
  background: var(--surface);
}
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Geschichte: riesiger Titel oben, Porträt links, Einstieg + Text rechts */
main:has(#about-title) .about-bio { border-top: var(--hair) solid var(--divider); padding-top: var(--section); }
main:has(#about-title) .about-bio__grid { row-gap: clamp(2.5rem, 5vw, 4.5rem); }
main:has(#about-title) .about-bio__text,
main:has(#about-title) .about-bio__text .story__body { display: contents; }
main:has(#about-title) .about-bio__text .story__title {
  grid-column: 1 / span 10;
  grid-row: 1;
  margin: 0;
  max-width: 20ch;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
}
main:has(#about-title) .about-bio__img-wrap {
  grid-column: 1 / span 5;
  grid-row: 2 / span 6;
  position: sticky;
}
main:has(#about-title) .about-bio__text > p:first-child {
  grid-column: 7 / span 6;
  grid-row: 2;
  font-size: var(--fs-h3);
}
main:has(#about-title) .about-bio__text .story__body > p {
  grid-column: 7 / span 5;
  max-width: 60ch;
  margin: 0;
}
main:has(#about-title) .about-bio__text .story__body > p + p { margin-top: -1.5rem; }
main:has(#about-title) .about-bio__text .story__body .story__quote { margin: 0.5rem 0; }

/* Netzwerk: vier Spalten, Porträts gross */
main:has(#about-title) .kollektiv__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.25rem) var(--gap-grid);
}
main:has(#about-title) .kollektiv__name { font-size: var(--fs-lead); letter-spacing: var(--ls-heading); }
main:has(#about-title) .kollektiv__role { font-size: 0.75rem; letter-spacing: 0.04em; }
@media (max-width: 1000px) { main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.75rem; } }

/* Podcast: Cover halbe Breite bis an den linken Rand */
main:has(#about-title) .podcast__cover { grid-column: 1 / span 6; margin-left: calc(-1 * var(--pad)); }
main:has(#about-title) .podcast__body { grid-column: 8 / span 5; }

/* Behind the Scenes: feste Galerie in vollen Reihen (justified). Jede Reihe
   ist buendig voll, jedes Bild behaelt sein Format, am Ende keine Luecke.
   Breiten und Hoehen rechnet script.js (PASS05); ohne JS stehen die Bilder
   einfach in ihrem Format nebeneinander. Kein Slider (Lua 24.09.). */
main:has(#about-title) .about-bts__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bts-gap);
}
main:has(#about-title) .about-bts__item,
main:has(#about-title) .about-bts__item[data-tile] {
  flex: none;
  width: calc(var(--bts-ar, 1.5) * 260px);
  height: auto;
  aspect-ratio: var(--bts-ar, 1.5);
  margin: 0;
  grid-column: auto;
  grid-row: auto;
}

@media (max-width: 899px) {
  main:has(#about-title) .page-hero__title,
  main:has(#about-title) .page-hero__sub { grid-column: 1 / -1; }
  main:has(#about-title) .page-hero__sub { margin-top: var(--space-6); }
  .about-hero-img { margin-left: 0; aspect-ratio: 4 / 5; }
  main:has(#about-title) .about-bio__text .story__title,
  main:has(#about-title) .about-bio__img-wrap,
  main:has(#about-title) .about-bio__text > p:first-child,
  main:has(#about-title) .about-bio__text .story__body > p { grid-column: 1 / -1; grid-row: auto; position: static; }
  main:has(#about-title) .about-bio__text .story__body > p + p { margin-top: -1rem; }
  main:has(#about-title) .podcast__cover,
  main:has(#about-title) .podcast__body { grid-column: 1 / -1; }
  main:has(#about-title) .podcast__cover { margin-right: calc(-1 * var(--pad)); }
}
/* ---- 8. Kopfleiste ohne Linie (Lua 24.09.: "orange Linie Header raus") ---- */
.site-header { border-bottom-color: transparent; }

/* ---- 9. CI schaerfer: Liams Titel-Stil und die Cover-Fusszeile ----
   Damit die Seite nach Lua Hell aussieht und nicht nach Theme:
   - Titel eng wie in der CI: Tracking -40 (-0.04em), vorher -30. Schnitt
     bleibt Geist Medium (Liams Raster, Lua 24.09.: Semibold wieder raus).
   - Kepler-Wort nach Liam: Tracking -30 bis -40, optisch 8% groesser.
     Nie positives Tracking (vorher +0.01em in Versalien).
   - Die Cover-Fusszeile (@lua_visuals / Pfeil / Datum) war kurz drin und
     ist wieder raus (Lua 24.09.). */
[data-titles="caps"] :is(.hero__name, .page-hero__title, .project-hero__title, .section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title) {
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;
}
[data-titles="caps"] :is(.hero__name, .page-hero__title, .project-hero__title, .section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title) .hl-accent,
.hero__name .word:last-child {
  letter-spacing: -0.035em;
  font-size: 1.08em;
}
.footer__word { letter-spacing: -0.04em; }


/* ---- PASS05:SWISS:END ---- */

/* ---- STUDIO:THEME:START ---- */
/* Vom Studio verwaltet (Werkzeuge → Farben). Nicht von Hand bearbeiten. */
.site-footer {
  background: #D95A0A;
  --text: #161616;
  --white: #161616;
  --muted: color-mix(in srgb, #161616 72%, #D95A0A);
  --divider: color-mix(in srgb, #161616 25%, #D95A0A);
  --accent: #FFFFFF;
  color: #161616;
}

:root { --hair: 2px; }
/* ---- STUDIO:THEME:END ---- */

/* ---- SERVICES:PASS06:START ----
   24.09.2026 (Lua): Services zugeklappt wie eine Liste mit grossen Titeln,
   Aufklappen nur per Klick und weich, etwas Scrollytelling, gleiche Sprache
   wie About. Dazu About-Geschichte: kleinere Abstaende, weniger Schriftmix.
   Rueckbau: diesen Block loeschen, services.html + script.js aus
   BACKUP/REDESIGN-FEEDBACK-01-vor-services-pass06-20260924-2150/. */

/* ---- About-Geschichte: ein Textblock statt einzelner Rasterzellen ---- */
main:has(#about-title) .about-bio__grid { row-gap: clamp(1.5rem, 3vw, 2.5rem); }
main:has(#about-title) .about-bio__text .story__body {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  grid-column: 7 / span 5;
  grid-row: 3;
  max-width: 60ch;
}
main:has(#about-title) .about-bio__text .story__body > p,
main:has(#about-title) .about-bio__text .story__body > p + p { grid-column: auto; margin: 0; }
/* Zitat ohne Serif-Wechsel: nur weiss statt grau, sonst wie der Lesetext */
main:has(#about-title) .about-bio__text .story__body .story__quote {
  font-family: var(--font);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: normal;
  color: var(--white);
  margin: 0;
}
@media (max-width: 899px) {
  main:has(#about-title) .about-bio__text .story__body { grid-column: 1 / -1; grid-row: auto; }
  main:has(#about-title) .about-bio__text .story__body > p + p { margin-top: 0; }
}

/* ---- Services: Einstieg wie About (riesige H1, kleiner Satz rechts) ---- */
main:has(#services-title) .page-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  align-items: end;
  padding-bottom: var(--section);
}
main:has(#services-title) .page-hero__title { grid-column: 1 / span 8; font-size: var(--fs-display); max-width: none; }
main:has(#services-title) .page-hero__sub { grid-column: 9 / span 4; margin: 0 0 0.5em; max-width: 34ch; }
@media (max-width: 899px) {
  main:has(#services-title) .page-hero__title,
  main:has(#services-title) .page-hero__sub { grid-column: 1 / -1; }
  main:has(#services-title) .page-hero__sub { margin-top: var(--space-6); }
}

/* ---- Leistungen: zugeklappte Liste, Titel riesig, (01) rechts oben ---- */
.service-index { border-top: 0; padding-bottom: var(--section); }
.service-index__list { border-bottom: var(--hair) solid var(--divider); }
.service-index__item { position: relative; border-bottom: 0; view-timeline: --svc-row block; }
.service-index__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--hair);
  background: var(--divider);
  transform-origin: left center;
}
.service-index__head,
.service-index__list .service-index__head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--gap-grid);
  padding: clamp(1.5rem, 0.9rem + 2.4vw, 3rem) 0;
}
.service-index__title {
  order: 0;
  font-size: calc(var(--fs-display) * var(--caps));
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--white);
  transition: transform 0.7s var(--ease-out);
}
.service-index__num {
  order: 1;
  font-size: var(--fs-category);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: 1;
  color: var(--muted);
  padding-top: 0.5em;
  align-self: start;
  transition: color 0.4s var(--ease);
}
.service-index__num::before { content: '('; }
.service-index__num::after { content: ')'; }
.service-index__icon { display: none; }
@media (hover: hover) {
  .service-index__head:hover .service-index__title { transform: translateX(clamp(0.5rem, 1.2vw, 1.25rem)); }
  .service-index__head:hover .service-index__num { color: var(--white); }
}
.service-index__list.is-enhanced .service-index__item.is-open .service-index__num { color: var(--accent-text); }

/* Panel: Text links auf dem Raster, Bild rechts */
.service-index__panel-inner {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: var(--space-6);
  padding-bottom: clamp(1.75rem, 1rem + 2.4vw, 3rem);
}
.service-index__desc { grid-column: 1 / span 5; font-size: var(--fs-lead); line-height: 1.5; color: var(--text); max-width: 34ch; }
.service-index__media { grid-column: 7 / span 6; overflow: clip; }
@media (max-width: 899px) {
  .service-index__desc,
  .service-index__media { grid-column: 1 / -1; }
}

/* Auf- und Zuklappen: Hoehe laeuft weich, Text steigt nach, Bild zieht
   von oben auf. Zu geht es schneller als auf. */
.service-index__list.is-enhanced .service-index__panel {
  opacity: 1;
  transition: grid-template-rows 0.8s var(--ease-out);
}
.service-index__list.is-enhanced .service-index__item:not(.is-open) .service-index__panel {
  opacity: 1;
  transition: grid-template-rows 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
.service-index__list.is-enhanced .service-index__panel-inner { transition: padding-bottom 0.55s var(--ease-out); }
.service-index__list.is-enhanced .service-index__desc {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.service-index__list.is-enhanced .service-index__media img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition: clip-path 0.4s var(--ease), transform 0.4s var(--ease);
}
.service-index__list.is-enhanced .service-index__item.is-open .service-index__desc {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out) 0.18s, transform 0.9s var(--ease-out) 0.18s;
}
.service-index__list.is-enhanced .service-index__item.is-open .service-index__media img {
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 1.1s var(--ease-out) 0.1s, transform 1.5s var(--ease-out) 0.1s;
}

/* ---- Kontext: grosse H2 wie auf dem Rest der Seite, Text rechts ---- */
.services-context { border-top: var(--hair) solid var(--divider); padding-top: var(--section); padding-bottom: var(--section); }
.services-context .editorial,
.services-context .editorial:first-of-type {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: clamp(1.25rem, 2.5vw, 2.25rem);
  padding: 0;
  border: 0;
}
.services-context .editorial + .editorial { margin-top: var(--section); }
.services-context .editorial__head { grid-column: 1 / span 10; }
.services-context .editorial__body { grid-column: 7 / span 5; }
.services-context__title {
  font-size: calc(var(--fs-h2) * var(--caps));
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--white);
  max-width: 18ch;
  margin: 0;
}
[data-titles="caps"] .services-context__title { text-transform: uppercase; }
.services-context__text { font-size: var(--fs-body); line-height: 1.75; color: var(--text); margin: 0 0 1.1em; }
.services-context__text:first-child { font-size: var(--fs-lead); line-height: 1.5; color: var(--white); }
@media (max-width: 899px) {
  .services-context .editorial__head,
  .services-context .editorial__body { grid-column: 1 / -1; }
}

/* ---- Prozess und FAQ: gleiche Abstaende wie ueberall (--section) ---- */
.services-process,
main:has(#services-title) .faq-section { padding-top: var(--section); padding-bottom: var(--section); }
.services-process .editorial__head { margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
.services-process .section-label { letter-spacing: -0.04em; }
.process__step-title { letter-spacing: -0.04em; }
.bleed + .services-process { border-top: 0; }

/* Prozess wie die Leistungen: Nummer klein rechts in Klammern */
.process__step,
.process__step:first-child { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; align-items: start; }
.process__step-title { grid-column: 1; }
.process__step-desc { grid-column: 2; padding-top: 0.5em; }
.process__step-num {
  grid-column: 3;
  font-size: var(--fs-category);
  letter-spacing: var(--ls-normal);
  line-height: 1;
  padding-top: 0.5em;
  align-self: start;
}
.process__step-num::before { content: '('; }
.process__step-num::after { content: ')'; }
@media (max-width: 899px) {
  .process__step, .process__step:first-child { grid-template-columns: minmax(0, 1fr) auto; }
  .process__step-desc { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .process__step-num { grid-column: 2; }
}
/* FAQ-Titel so gross wie "Process" */
main:has(#services-title) .faq-section .section-label {
  font-family: var(--font); font-style: normal;
  font-size: calc(var(--fs-h2) * var(--caps));
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--white);
  margin: 0;
}
[data-titles="caps"] main:has(#services-title) .faq-section .section-label { text-transform: uppercase; }

/* ---- Scrollytelling (am Scrollweg, kein JS) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Linien zeichnen sich von links, wenn die Zeile reinkommt */
    .service-index__item::before {
      animation: lh-svc-line linear both;
      animation-timeline: --svc-row;
      animation-range: entry 0% entry 100%;
    }
    @keyframes lh-svc-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Titel steigen beim Reinkommen auf */
    .services-context__title,
    .services-process .section-label,
    main:has(#services-title) .faq-section .section-label,
    main:has(#services-title) .cta-block__title {
      animation: lh-svc-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    @keyframes lh-svc-rise {
      from { opacity: 0; transform: translateY(0.5em); }
      to   { opacity: 1; transform: none; }
    }

    /* Einstiegssatz wird beim Lesen hell, von oben nach unten */
    @supports ((background-clip: text) or (-webkit-background-clip: text)) {
      .services-context__text:first-child {
        color: transparent;
        background-image: linear-gradient(to bottom, var(--white) 40%, color-mix(in srgb, var(--white) 22%, transparent) 60%);
        background-size: 100% 250%;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        animation: lh-svc-read linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 55%;
      }
      @keyframes lh-svc-read { from { background-position: 0 100%; } to { background-position: 0 0; } }
    }

    /* Prozess: jeder Schritt wird hell, wenn er die Lesekante erreicht */
    .process__step { view-timeline: --lh-step block; }
    .process__step-num,
    .process__step-title,
    .process__step-desc {
      animation: lh-svc-step linear both;
      animation-timeline: --lh-step;
      animation-range: entry 20% cover 45%;
    }
    .process__step-desc { animation-range: entry 40% cover 50%; }
    @keyframes lh-svc-step {
      from { opacity: 0.15; transform: translateY(0.4em); }
      to   { opacity: 1; transform: none; }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-index__title,
  .service-index__list.is-enhanced .service-index__panel,
  .service-index__list.is-enhanced .service-index__desc,
  .service-index__list.is-enhanced .service-index__media img { transition: none !important; }
}

/* ---- About: Behind the Scenes als Editorial-Raster (Kalkbrenner) ----
   12 Spalten, Bilder gross und versetzt, aber jede Kante sitzt auf einer
   Spalte. Muster aus 7 Plaetzen, wiederholt sich: Quer gross links + hoch
   rechts tiefer, hoch links + quer rechts tiefer, hoch + quer, dann ein
   grosses Querformat. Die Reihenfolge im Studio bestimmt, wer wo steht:
   Plaetze 1, 4, 6, 7 sind fuer Querformate gedacht. */
main:has(#about-title) .about-bts__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  row-gap: clamp(2rem, 0.5rem + 3.5vw, 4.5rem);
  grid-auto-rows: auto;
  grid-auto-flow: row;
  align-items: start;
}
main:has(#about-title) .about-bts__item,
main:has(#about-title) .about-bts__item[data-tile] {
  width: auto;
  height: auto;
  aspect-ratio: var(--bts-ar, 1.5);
  grid-row: auto;
  margin: 0;
}
main:has(#about-title) .about-bts__item:nth-child(7n+1) { grid-column: 1 / span 7; }
main:has(#about-title) .about-bts__item:nth-child(7n+2) { grid-column: 9 / span 4; margin-top: clamp(3rem, 8vw, 8rem); }
main:has(#about-title) .about-bts__item:nth-child(7n+3) { grid-column: 2 / span 4; }
main:has(#about-title) .about-bts__item:nth-child(7n+4) { grid-column: 7 / span 6; margin-top: clamp(2rem, 6vw, 6rem); }
main:has(#about-title) .about-bts__item:nth-child(7n+5) { grid-column: 1 / span 5; }
main:has(#about-title) .about-bts__item:nth-child(7n+6) { grid-column: 7 / span 6; margin-top: clamp(3rem, 10vw, 10rem); }
main:has(#about-title) .about-bts__item:nth-child(7n)   { grid-column: 3 / span 10; }
@media (max-width: 899px) {
  main:has(#about-title) .about-bts__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-8); }
  main:has(#about-title) .about-bts__item[data-tile]:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  main:has(#about-title) .about-bts__item:is([data-tile="2:3"], [data-tile="3:4"], [data-tile="4:5"], [data-tile="1:1"]):nth-child(odd) { grid-column: 1 / span 5; }
  main:has(#about-title) .about-bts__item:is([data-tile="2:3"], [data-tile="3:4"], [data-tile="4:5"], [data-tile="1:1"]):nth-child(even) { grid-column: 2 / span 5; }
}
/* Die versetzten Bilder wandern beim Scrollen leicht gegen den Rest */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    main:has(#about-title) .about-bts__item:is(:nth-child(7n+2), :nth-child(7n+4), :nth-child(7n+6)) {
      animation: lh-bts-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes lh-bts-drift { from { translate: 0 8vh; } to { translate: 0 -8vh; } }
  }
}

/* ---- Film Core: Kundenstimmen in Geist, Gesichterreihe ueberlappend ----
   Lua 24.09.: Kepler ist fuer laengere Zitate nicht lesbar. Zitat jetzt
   Geist, weiss, Lesegroesse. Hero: 6 Gesichter (3 Reviewer + Netzwerk),
   stark ueberlappend, kein Name beim Hover. */
.testimonial__quote {
  font-family: var(--font);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--white);
}
.trust__avatar-link { margin-left: -11px; }
.trust__avatar-link:first-child { margin-left: 0; }
.trust__avatar-link img { width: 34px; height: 34px; }
span.trust__avatar-link:hover { transform: none; }
.trust__avatar-name { display: none; }

/* ---- Mobil (Lua 25.09.): Hero-Titel groesser ---- */
@media (max-width: 899px) {
  .hero__name,
  [data-titles="caps"] .hero__name {
    font-size: calc(clamp(2.4rem, 10.6vw, 3.8rem) * var(--caps));
    max-width: 12ch;
  }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero__name,
  [data-titles="caps"] .hero__name { font-size: calc(min(2.6rem, 7.5vh) * var(--caps)); }
}
/* Tippziele mind. 24px, ohne dass sich das Layout verschiebt */
@media (max-width: 899px) {
  .nav__logo,
  .moments__link,
  .credit-person__name { padding-block: 6px; margin-block: -6px; }
}

/* ---- Services V2 (Lua 25.09.: "nicht clean, zu viel Text") ----
   Kleiner Seitentitel wie ein Label, Leistungen nur als grosse Titel.
   Desktop: beim Hover folgt ein Bild der Maus, Klick oeffnet nur den
   kurzen Text. Prozess: Bild steht links, Schritte laufen rechts vorbei
   und wechseln das Bild. */
main:has(#services-title) .page-hero--compact { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); align-items: end; }
main:has(#services-title) .page-hero--compact .page-hero__title,
[data-titles="caps"] main:has(#services-title) .page-hero--compact .page-hero__title {
  grid-column: 1 / span 6;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}
main:has(#services-title) .page-hero--compact .page-hero__sub {
  grid-column: 8 / span 5;
  justify-self: end;
  text-align: right;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--muted);
  max-width: 40ch;
  margin: 0;
}
@media (max-width: 899px) {
  main:has(#services-title) .page-hero--compact .page-hero__title,
  [data-titles="caps"] main:has(#services-title) .page-hero--compact .page-hero__title,
  main:has(#services-title) .page-hero--compact .page-hero__sub { grid-column: 1 / -1; }
  main:has(#services-title) .page-hero--compact .page-hero__sub { justify-self: start; text-align: left; margin-top: var(--space-3); }
}

/* Desktop mit Maus: Bild nicht im Panel, sondern als Vorschau an der Maus */
@media (hover: hover) and (min-width: 900px) {
  .service-index__list.is-enhanced .service-index__media { display: none; }
  .service-index__desc { grid-column: 1 / span 6; }
}
.svc-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: clamp(260px, 28vw, 460px);
  aspect-ratio: 3 / 2;
  overflow: clip;
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  background: var(--surface);
  transition: opacity 0.35s var(--ease), scale 0.6s var(--ease-out);
  will-change: transform;
}
.svc-preview.is-on { opacity: 1; scale: 1; }
.svc-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.7s var(--ease-out);
}
.svc-preview img.is-active { clip-path: inset(0 0 0 0); z-index: 1; }

/* Kontext: ein Titel, ein Satz */
.services-context .editorial + .editorial { display: none; }

/* Prozess als Buehne */
.process__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  align-items: start;
}
.process__media {
  grid-column: 1 / span 6;
  position: sticky;
  top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem));
  aspect-ratio: 4 / 3;
  overflow: clip;
  background: var(--surface);
}
.process__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.1);
  transition: clip-path 0.9s var(--ease-out), transform 1.4s var(--ease-out), opacity 0s linear 0.9s;
}
.process__img.is-active {
  z-index: 2;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
  transition: clip-path 0.9s var(--ease-out), transform 1.4s var(--ease-out), opacity 0s;
}
.process__stage .process__steps { grid-column: 8 / span 5; border-bottom: 0; }
.process__stage .process__step,
.process__stage .process__step:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  min-height: 62vh;
  padding: 0;
  border-top: 0;
  opacity: 0.22;
  transition: opacity 0.5s var(--ease);
}
.process__stage .process__step.is-active { opacity: 1; }
.process__stage .process__step-body { display: flex; flex-direction: column; gap: var(--space-3); }
.process__stage .process__step-num { order: 0; padding: 0; }
.process__stage .process__step .process__step-num { color: var(--muted); }
.process__stage .process__step.is-active .process__step-num { color: var(--accent-text); }
.process__stage .process__step-num,
.process__stage .process__step-title,
.process__stage .process__step-desc { animation: none !important; grid-column: auto; grid-row: auto; }
.process__stage .process__step-desc { padding: 0; max-width: 34ch; }
.process__stage .process__step:last-child { min-height: 70vh; }
@media (max-width: 899px) {
  .process__media {
    grid-column: 1 / -1;
    top: var(--header-h);
    z-index: 3;
    aspect-ratio: 3 / 2;
    margin-inline: calc(-1 * var(--pad));
  }
  .process__stage .process__steps { grid-column: 1 / -1; }
  .process__stage .process__step,
  .process__stage .process__step:first-child { min-height: 48svh; }
  .process__stage .process__step:last-child { min-height: 52svh; }
}
@media (prefers-reduced-motion: reduce) {
  .process__img, .process__img.is-active, .svc-preview, .svc-preview img { transition: none; }
}

/* ==========================================
   TEXT-SYSTEM (Lua 25.09.: "immer derselbe Body-Text, alles braucht ein
   Design-System"). Gemessen vorher: 9 Varianten (16.9 / 18 / 24px, Zeilen
   1.5 bis 1.75). Jetzt genau zwei Rollen fuer Lesetext:
   - Body: --fs-body, Zeile 1.7, --text. Jeder Absatz, jede Beschreibung,
     jede FAQ-Antwort, Listen, Zitate (Zitate nur weiss).
   - Lead: --fs-lead, Zeile 1.45, --white. Nur der eine Einstiegssatz eines
     Abschnitts (erster Absatz Projektseite, About-Einstieg, Podcast-Satz,
     Services-Kontext).
   Alles andere ist Titel (--fs-h*) oder Meta (--fs-caption). Neue Texte:
   eine dieser Klassen verwenden oder in die Gruppe aufnehmen, nie eigene
   Groessen setzen. !important nur hier, weil die Seitenregeln teils
   :has(#id) nutzen und sonst gewinnen wuerden.
   ========================================== */
:root {
  --body-size: var(--fs-body);
  --body-lh: 1.7;
  --lead-size: var(--fs-lead);
  --lead-lh: 1.45;
}
:is(.page-hero__sub, .hero__sub, .service-index__desc, .services-context__text, .process__step-desc,
    .faq__answer p, .story__body p, .about-bio__text p, .podcast__desc, .project-hero__desc,
    .project-body__text p, .product-hero__sub, .product-card__desc, .product-hero__list li, .order__list li,
    .ba-oneclick__text, .preset-row__desc, .preset-test__hint, .pg-vs__line, .testimonial__quote, .editorial__body p, .legal p, .legal li) {
  font-size: var(--body-size) !important;
  line-height: var(--body-lh) !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: normal !important;
}
:is(.about-bio__text > p:first-child, .podcast__tagline, .services-context__text:first-child,
    .project-hero__desc:first-of-type) {
  font-size: var(--lead-size) !important;
  line-height: var(--lead-lh) !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: normal !important;
  color: var(--white);
}
/* Meta: Hinweise unter Knoepfen */
.product-hero__note { font-size: var(--fs-caption) !important; line-height: 1.5 !important; }
/* Kurze Unterzeilen im Seitenkopf (Services) bleiben Meta */
main:has(#services-title) .page-hero--compact .page-hero__sub { font-size: var(--fs-caption) !important; line-height: 1.5 !important; }

/* Services: Titel und Text auf derselben Kante. Kein Verschieben beim
   Hover mehr, statt dessen treten die anderen Titel zurueck. */
.service-index__head:hover .service-index__title { transform: none !important; }
.service-index__title { transition: color 0.35s var(--ease); }
@media (hover: hover) {
  .service-index__list:has(.service-index__head:hover) .service-index__title { color: var(--muted); }
  .service-index__list .service-index__head:hover .service-index__title { color: var(--white); }
}
.service-index__panel-inner { padding-top: 0; }

/* ==========================================
   NUMMERN-SYSTEM (Lua 25.09.): "01 BRIEF". Die Nummer steht vor dem
   Titel, gleiche Groesse und Schrift, grau. Offen (Leistung) bzw. aktiv
   (Prozess-Schritt) wird sie orange. Keine Klammern, keine kleinen
   Zahlen. Text darunter beginnt an derselben linken Kante wie die Nummer.
   ========================================== */
:root { --num-gap: 0.28em; }
.service-index__head,
.service-index__list .service-index__head {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0;
  align-items: baseline;
}
.service-index__num,
.process__stage .process__step-num {
  order: 0 !important;
  font-size: inherit;
  font-weight: var(--fw-medium);
  letter-spacing: -0.04em;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 !important;
  margin-right: var(--num-gap);
  align-self: baseline;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.service-index__num::before, .service-index__num::after,
.process__step-num::before, .process__step-num::after { content: none !important; }
.service-index__head { font-size: calc(var(--fs-display) * var(--caps)); line-height: 0.95; }
.service-index__title { order: 1; font-size: inherit; line-height: inherit; }
.service-index__list.is-enhanced .service-index__item.is-open .service-index__num { color: var(--accent-text); }
@media (hover: hover) {
  .service-index__head:hover .service-index__num { color: var(--accent-text); }
}

/* Prozess: Nummer und Titel in einer Zeile, Text darunter */
.process__stage .process__step,
.process__stage .process__step:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  row-gap: var(--space-4);
  font-size: calc(var(--fs-h1) * var(--caps));
  line-height: 0.95;
}
.process__stage .process__step-body { display: contents; }
.process__stage .process__step-num { grid-column: 1; grid-row: 1; }
.process__stage .process__step-title { grid-column: 2; grid-row: 1; font-size: inherit !important; line-height: inherit !important; margin: 0; padding: 0; align-self: baseline; }
.process__stage .process__step-desc { grid-column: 1 / -1; grid-row: 2; }
.process__stage .process__step .process__step-num { color: var(--muted); }
.process__stage .process__step.is-active .process__step-num { color: var(--accent-text); }

/* About ohne Geschichten-Titel (Lua 25.09.): Einstieg und Text ruecken
   eine Reihe hoch, das Portraet steht daneben ab der ersten Reihe. */
main:has(#about-title) .about-bio__img-wrap { grid-row: 1 / span 6; }
main:has(#about-title) .about-bio__text > p:first-child { grid-row: 1; }
main:has(#about-title) .about-bio__text .story__body { grid-row: 2; }
@media (max-width: 899px) {
  main:has(#about-title) .about-bio__img-wrap,
  main:has(#about-title) .about-bio__text > p:first-child,
  main:has(#about-title) .about-bio__text .story__body { grid-row: auto; }
}

/* Services-Kontext (Lua 25.09.: "Linie und Text wuest"): eine Linie statt
   zwei, Titel links und Text rechts auf derselben Hoehe. */
.service-index + .services-context { border-top: 0; padding-top: var(--section); }
.service-index { padding-bottom: 0; }
.services-context .editorial,
.services-context .editorial:first-of-type { align-items: start; }
.services-context .editorial__head { grid-column: 1 / span 6; grid-row: 1; }
.services-context .editorial__body { grid-column: 8 / span 5; grid-row: 1; padding-top: 0.35em; }
.services-context__text:last-child { margin-bottom: 0; }
@media (max-width: 899px) {
  .services-context .editorial__head,
  .services-context .editorial__body { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
}
/* Ohne Kontext-Abschnitt folgt der Prozess direkt: nur die Linie der Liste */
.service-index ~ .services-process { border-top: 0; padding-top: var(--section); }

/* ==========================================
   MOTION-SYSTEM (Lua 25.09.: "alles aus einem Guss"). Gemessen vorher:
   20 verschiedene Dauern (0.1 bis 1.8s), Bild-Aufzieher mit zwei Kurven.
   Jetzt vier Rollen, jede mit genau einem Wert:
   1. Hover (Farbe, Linie, Rahmen):      --m-hover  0.2s  --ease
   2. Bewegung beim Hover (Pfeil, Fuellung, Avatar): --m-move 0.6s --ease-out
   3. Oeffnen/Schliessen (Menue, FAQ, Services, Tabs):
      auf --m-open 0.6s --ease-out, zu --m-close 0.4s --ease-in-out
   4. Auftritte beim Scrollen: Text --m-reveal 1.1s --ease-out (Deckkraft
      0.9s), Bilder ziehen immer von unten auf, 1.1s --ease-out.
   Neue Animationen: eine dieser Rollen nehmen, nie eigene Werte.
   ========================================== */
:root {
  --m-hover: 0.2s;
  --m-move: 0.6s;
  --m-open: 0.6s;
  --m-close: 0.4s;
  --m-reveal: 1.1s;
  --m-fade: 0.9s;
}

/* 1. Hover */
.faq__question { transition: color var(--m-hover) var(--ease); }
.presets-cta { transition: background var(--m-hover) var(--ease), color var(--m-hover) var(--ease); }
.testimonial__role, .trust__link, .product-back__link, .card__cta, .moments__link { transition: color var(--m-hover) var(--ease); }
.ba-slider__handle { transition: background var(--m-hover) var(--ease); }
.preset-test__btn { transition: border-color var(--m-hover) var(--ease), color var(--m-hover) var(--ease), background var(--m-hover) var(--ease); }
.preset-test__btn span { transition: color var(--m-hover) var(--ease); }
.pg-proof__link { transition: color var(--m-hover) var(--ease), border-color var(--m-hover) var(--ease); }
a.trust__stars { transition: filter var(--m-hover) var(--ease); }
.pg-tab { transition: border-color var(--m-hover) var(--ease), box-shadow var(--m-hover) var(--ease); }
.pt-img { transition: opacity var(--m-hover) var(--ease); }
.service-index__title { transition: color var(--m-hover) var(--ease); }
.work-preview, .work-preview video { transition: opacity var(--m-hover) var(--ease); }
.pg-cta__btn, .pg-card__btn, .project-cta__link, .contact-form__submit { transition: color var(--m-hover) var(--ease), border-color var(--m-hover) var(--ease); }
/* Zustandsfarben (offen/aktiv) bleiben einen Tick ruhiger */
.service-index__num, .process__step-num, .process__stage .process__step-num { transition: color var(--dur-base) var(--ease); }

/* 2. Bewegung beim Hover */
.btn::before, .project-cta__link::before, .contact-form__submit::before { transition: transform var(--m-move) var(--ease-out), top var(--m-move) var(--ease-out); }
.btn--arrow::after, .card__arrow, .footer__email::after, .product-card__buy::after,
.back-link svg, .ba-slider__handle::after, .roll > span { transition: transform var(--m-move) var(--ease-out); }
.video-player__play, .theme-toggle { transition: transform var(--m-move) var(--ease-out), border-color var(--m-hover) var(--ease), color var(--m-hover) var(--ease); }
.trust__avatar-link { transition: transform var(--m-move) var(--ease-out), z-index 0s; }
.testimonial { transition: border-color var(--m-hover) var(--ease), transform var(--m-move) var(--ease-out); }
.work-list__arrow { transition: transform var(--m-move) var(--ease-out), color var(--m-hover) var(--ease); }
.faq__question::after { transition: transform var(--m-move) var(--ease-out), background-size var(--m-move) var(--ease-out), color var(--m-hover) var(--ease); }
.svc-preview { transition: opacity var(--m-hover) var(--ease), scale var(--m-move) var(--ease-out); }

/* 3. Oeffnen / Schliessen */
.mobile-menu { transition: clip-path var(--m-open) var(--ease-in-out), visibility 0s linear var(--m-open); }
.mobile-menu.is-open { transition: clip-path var(--m-open) var(--ease-in-out), visibility 0s; }
.service-index__list.is-enhanced .service-index__panel { transition: grid-template-rows var(--m-open) var(--ease-out); }
.service-index__list.is-enhanced .service-index__item:not(.is-open) .service-index__panel { transition: grid-template-rows var(--m-close) var(--ease-in-out); }
.service-index__list.is-enhanced .service-index__panel-inner { transition: padding-bottom var(--m-open) var(--ease-out); }
.service-index__list.is-enhanced .service-index__desc { transition: opacity var(--m-close) var(--ease), transform var(--m-close) var(--ease); }
.service-index__list.is-enhanced .service-index__media img { transition: clip-path var(--m-close) var(--ease), transform var(--m-close) var(--ease); }
.service-index__list.is-enhanced .service-index__item.is-open .service-index__desc { transition: opacity var(--m-fade) var(--ease-out) 0.12s, transform var(--m-reveal) var(--ease-out) 0.12s; }
.service-index__list.is-enhanced .service-index__item.is-open .service-index__media img { transition: clip-path var(--m-reveal) var(--ease-out) 0.12s, transform var(--m-reveal) var(--ease-out) 0.12s; }
.pg-panel.is-active { animation: pgfade var(--m-open) var(--ease-out); }

/* 4. Auftritte */
.js .fade-in { transition: opacity var(--m-fade) var(--ease-out), transform var(--m-reveal) var(--ease-out); }
.js .card.fade-in { transition: opacity var(--m-fade) var(--ease-out), transform var(--m-reveal) var(--ease-out); }
.js .card.fade-in .card__info { transition: opacity var(--m-fade) var(--ease-out) 0.12s, transform var(--m-reveal) var(--ease-out) 0.12s; }
.js .split-ready .tw > span { transition: transform var(--m-reveal) var(--ease-out); }
.js .hero__name .word { animation-duration: var(--m-reveal); }
.js .hero__sub, .js .hero__ctas, .js .page-hero__sub { animation-duration: var(--m-reveal); }
.footer__word-inner { transition: transform var(--m-reveal) var(--ease-out); }
.js :is(.img-item, .pg-lesson__fig).fade-in img { transition: clip-path var(--m-reveal) var(--ease-out), transform var(--m-reveal) var(--ease-out); }
.js .img-item.fade-in img { transition: opacity 0.5s var(--ease), transform var(--m-reveal) var(--ease-out); }
.js .kollektiv__person.fade-in .kollektiv__frame { transition: clip-path var(--m-reveal) var(--ease-out); }
.svc-preview img { transition: clip-path var(--m-reveal) var(--ease-out); }
.process__img { transition: clip-path var(--m-reveal) var(--ease-out), transform var(--m-reveal) var(--ease-out), opacity 0s linear var(--m-reveal); }
.process__img.is-active { transition: clip-path var(--m-reveal) var(--ease-out), transform var(--m-reveal) var(--ease-out), opacity 0s; }
.process__stage .process__step, .process__stage .process__step:first-child { transition: opacity var(--m-open) var(--ease); }
/* "Weniger Bewegung" gewinnt immer, auch gegen das Motion-System oben */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================
   BILDABSTAND (Lua 25.09.: "Bilder zu weit auseinander, alle gleich").
   Ein Token fuer jeden Abstand zwischen Bildern: Startseiten-Band,
   Projektbilder, About-Galerie. Vorher 14px / 14px / 32 bis 128px.
   Karten mit Text darunter (Work-Raster) sind keine Bildgalerie und
   behalten --gap-grid.
   ========================================== */
:root { --img-gap: clamp(0.4rem, 0.75vw, 0.75rem); }
.moments__track { gap: var(--img-gap); }
.project-images__grid { gap: var(--img-gap); }
main:has(#about-title) .about-bts__grid { column-gap: var(--img-gap); row-gap: var(--img-gap); }
/* Versatz bleibt als Rhythmus, aber knapp: ein Bruchteil statt einer Luecke */
main:has(#about-title) .about-bts__item:nth-child(7n+2) { margin-top: clamp(1.5rem, 4vw, 4rem); }
main:has(#about-title) .about-bts__item:nth-child(7n+4) { margin-top: clamp(1rem, 2.5vw, 2.5rem); }
main:has(#about-title) .about-bts__item:nth-child(7n+6) { margin-top: clamp(1.5rem, 4vw, 4rem); }
/* Kein Drift mehr: bei engem Abstand wuerden sich die Bilder ueberlappen */
main:has(#about-title) .about-bts__item { animation: none !important; translate: none; }
@media (max-width: 899px) {
  main:has(#about-title) .about-bts__grid { row-gap: var(--img-gap); }
}
/* Paare statt Luecken: Querformat 8 Spalten + Hochformat 4 Spalten sind
   fast gleich hoch (3:2 zu 2:3), stossen direkt aneinander. Jedes 7. Bild
   ganz breit. Kein Versatz mehr. */
main:has(#about-title) .about-bts__item[data-tile] { margin-top: 0; }
main:has(#about-title) .about-bts__item:nth-child(7n+1) { grid-column: 1 / span 8; }
main:has(#about-title) .about-bts__item:nth-child(7n+2) { grid-column: 9 / span 4; margin-top: 0; }
main:has(#about-title) .about-bts__item:nth-child(7n+3) { grid-column: 1 / span 4; }
main:has(#about-title) .about-bts__item:nth-child(7n+4) { grid-column: 5 / span 8; margin-top: 0; }
main:has(#about-title) .about-bts__item:nth-child(7n+5) { grid-column: 1 / span 4; }
main:has(#about-title) .about-bts__item:nth-child(7n+6) { grid-column: 5 / span 8; margin-top: 0; }
main:has(#about-title) .about-bts__item:nth-child(7n)   { grid-column: 1 / -1; }
@media (max-width: 899px) {
  main:has(#about-title) .about-bts__item[data-tile]:nth-child(n) { grid-column: 1 / -1; }
}
/* Reihen buendig: in einem Paar fuellt das Querformat die Hoehe des
   Hochformats (Bild wird seitlich leicht beschnitten). Mindesthoehe als
   Sicherung, falls im Studio zwei Querformate nebeneinander landen. */
@media (min-width: 900px) {
  main:has(#about-title) .about-bts__grid { align-items: stretch; }
  main:has(#about-title) .about-bts__item:is(:nth-child(7n+1), :nth-child(7n+4), :nth-child(7n+6)):is([data-tile="3:2"], [data-tile="16:9"], [data-tile="4:3"], [data-tile="2:1"]) {
    aspect-ratio: auto;
    min-height: 24vw;
  }
  main:has(#about-title) .about-bts__item .about-bts__open { position: absolute; inset: 0; }
  main:has(#about-title) .about-bts__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ==========================================
   LINIEN-REGEL (Lua 25.09.: "doppelte Linien komisch"). Gemessen: auf 5
   Seiten stand nach dem letzten Listeneintrag 76px darunter gleich die
   Linie des naechsten Abschnitts. Regel: Listen haben unten keine eigene
   Schlusslinie, den Abschluss macht die Oberkante des naechsten Abschnitts
   (oder des Footers).
   ========================================== */
.faq__item:last-child,
.faq__list .faq__item:last-child,
.preset-row:last-child { border-bottom: 0 !important; }

/* ==========================================
   TITEL-SYSTEM (Lua 25.09.: "mal Regular, mal Medium, chaotisch").
   Gemessen: Regular und Medium gemischt, Laufweite -0.04 bis +0.01em,
   Zeilenhoehe 0.95 bis 1.2. Jetzt fuer JEDEN Titel ab ca. 26px:
   Geist Medium, Laufweite -0.04em (Liam: -40). Zeilenhoehe nach Stufe:
   gross (Display/H1/Zeilentitel) 1.0, H2 1.05, klein (Kartentitel) 1.15.
   Kepler-Akzentwort in der H1 behaelt seine Werte.
   ========================================== */
:is(.hero__name, .page-hero__title, .project-hero__title, .product-hero__title,
    .service-index__head, .service-index__title, .service-index__num,
    .process__stage .process__step, .process__step-title, .process__step-num,
    .section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title,
    .cta-block__title, .project-cta__text, .presets-why__title, .pg-academy__title, .pg-cta__title,
    .ba-oneclick__title, .preset-test__title, .statement__text, .story__title,
    main:has(#services-title) .faq-section .section-label, .services-process .section-label,
    .card__title, .work-list__title, .other-projects__title, .marquee__label,
    .footer__email, .mobile-menu__link) {
  font-family: var(--font);
  font-weight: var(--fw-medium) !important;
  letter-spacing: -0.04em !important;
}
:is(.hero__name, .page-hero__title, .project-hero__title, .product-hero__title,
    .service-index__head, .service-index__title, .service-index__num,
    .process__stage .process__step, .process__step-title, .process__step-num) { line-height: 1 !important; }
:is(.section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title,
    .cta-block__title, .project-cta__text, .presets-why__title, .pg-academy__title, .pg-cta__title,
    .ba-oneclick__title, .preset-test__title, .statement__text, .story__title,
    main:has(#services-title) .faq-section .section-label, .services-process .section-label) { line-height: 1.05 !important; }
:is(.card__title, .work-list__title, .other-projects__title, .marquee__label) { line-height: 1.15 !important; }
/* Geist-Akzentwoerter in Titeln (kein Kepler) laufen einfach mit */
:is(.service-index__title, .services-context__title, .section-title, .cta-block__title, .presets-why__title) .hl-accent:not(h1 .hl-accent) {
  letter-spacing: inherit !important;
}
/* Prozess-Schritte in Versalien wie die Leistungen */
[data-titles="caps"] .process__step-title { text-transform: uppercase; }
/* Akzentwort in Titeln ausser der H1 ist Geist: gleiche Groesse, gleiche
   Laufweite wie der Rest (die 1.08em galten nur fuer Kepler). */
:is(h2, h3, p, strong, a) > .hl-accent,
[data-titles="caps"] :is(.section-title, .moments__title, .kollektiv__label, .about-bts__label, .podcast__title, .cta-block__title) .hl-accent {
  font-size: 1em !important;
  letter-spacing: inherit !important;
}
.pg-vs__name { letter-spacing: -0.04em !important; font-weight: var(--fw-medium) !important; }
/* Kepler in der H1 ueberall gleich (Liam): 1.08em, Laufweite -0.035em */
h1 .hl-accent, h1 .hl-accent .tw, .product-hero__title .hl-accent {
  font-size: 1.08em;
  letter-spacing: -0.035em !important;
}
h1 .hl-accent .tw { font-size: 1em; }
h1 .hl-accent--signal, h1 .hl-accent--signal .tw { font-size: 1em; letter-spacing: -0.04em !important; }

/* ==========================================
   ABSCHNITTSKOPF-REGEL (Lua 25.09.: Produktseiten "so clean wie der
   Rest"). Gemessen: Produktseiten hatten kleines Label + Satz-Titel
   (doppelter Kopf), oder nur ein kleines Label. Regel wie Services/About:
   EIN Kopf pro Abschnitt.
   - Label mit Titel direkt danach: Label faellt weg.
   - Label allein: wird zum grossen Abschnittstitel (Versalien-Schalter
     gilt). Satz-Labels (--sentence) bleiben in normaler Schreibung.
   ========================================== */
.section-label:has(+ :is(h1, h2, h3)),
.podcast__label:has(+ :is(h1, h2, h3)) { display: none; }
.section-label {
  font-family: var(--font);
  font-style: normal;
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05;
  text-transform: none;
  color: var(--white);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
[data-titles="caps"] .section-label:not(.section-label--sentence) {
  text-transform: uppercase;
  font-size: calc(var(--fs-h2) * var(--caps));
}
/* Kleine Status-Labels im Vorher/Nachher-Loop: Meta-Groesse */
.ba-loop__state--a, .ba-loop__state--b { font-size: var(--fs-caption); }
/* ---- SERVICES:PASS06:END ---- */

/* ==========================================================================
   PASS08:CLEAN:START  Lua 10.10.2026: keine Masken, kein Hochziehen.
   Bilder wechseln per ruhiger Ueberblendung, das neue liegt oben, das alte
   bleibt stehen, bis das neue da ist (kein Durchblitzen der Flaeche).
   Text blendet nicht mehr ein. Rueckbau: Block loeschen + script.js aus
   BACKUP/REDESIGN-FEEDBACK-01-vor-pass08-*.
   ========================================================================== */
.svc-preview img,
.process__img,
.service-index__list.is-enhanced .service-index__media img {
  clip-path: none !important;
  transform: none !important;
  opacity: 0;
  transition: opacity 0s linear var(--m-move) !important;
}
.svc-preview img.is-active,
.process__img.is-active,
.service-index__list.is-enhanced .service-index__item.is-open .service-index__media img {
  opacity: 1;
  z-index: 2;
  transition: opacity var(--m-move) var(--ease) !important;
}
.js .kollektiv__person.fade-in .kollektiv__frame,
.js :is(.img-item, .pg-lesson__fig).fade-in img { clip-path: none !important; }
/* Auftritte: nur noch Deckkraft, kein Steigen */
.js .fade-in,
.js .card.fade-in,
.js .kollektiv__person.fade-in { transform: none !important; }
.js .fade-in { transition: opacity var(--m-fade, 0.9s) var(--ease-out) !important; }
/* Statement: Woerter hellen beim Scrollen deutlich sichtbar auf */
.statement__text .w { opacity: max(0.18, min(1, calc(var(--p, 1) * var(--n, 1) * 1.25 - var(--i, 0)))); transition: opacity 0.15s linear; }
/* Lightbox: neues Bild erst zeigen, wenn es geladen ist */
.lightbox__img { opacity: 0; transition: opacity var(--m-hover) var(--ease); }
.lightbox__img.is-loaded { opacity: 1; }
/* PASS08:CLEAN:END */

/* PASS08:SHOP:START  Shop-Karte: Name links, Preis rechts, keine Etiketten */
.product-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); width: 100%; }
.product-card__price--row {
  position: static !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: 400;
  white-space: nowrap;
}
/* PASS08:SHOP:END */

/* PASS08:ABOUT:START  Netzwerk kompakter (Lua 10.10.2026: About "too much") */
main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 1.5rem var(--img-gap, 0.6rem) !important; }
@media (max-width: 1000px) { main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 700px)  { main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.25rem 0.5rem !important; } }
main:has(#about-title) .kollektiv__name { font-size: 0.875rem; }
main:has(#about-title) .kollektiv__role { font-size: 0.8125rem; }
/* PASS08:ABOUT:END */

/* PASS09b:HERO:START  Nur die Textanordnung der Kaufbox (Lua 10.10.2026):
   Film Core gross, darunter klein "PowerGrades + LUTs", Preis normal gross
   mit "One-time payment" daneben. Sonst alles wie vorher. */
.product-hero__title-sub {
  margin-top: 0.6rem;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.fc-price { display: flex; align-items: baseline; gap: 0.6rem; margin: var(--space-6) 0 var(--space-5); }
.fc-price .product-hero__price { margin: 0 !important; font-size: 1.75rem !important; letter-spacing: -0.02em; }
.fc-price__note { font-size: 0.875rem; color: var(--muted); }
/* PASS09b:HERO:END */

/* ==========================================================================
   PASS10:WHITE:START  Lua 10.10.2026: Website weiss, mehr Branding.
   1) Hellmodus ist Standard und reines Weiss (Dunkel bleibt als Schalter).
   2) Farbmomente auf der Startseite aus dem Brand System: Glacier (eigene
      Projekte, 7 Short Films), Cinematic Red einmal (Leistungen), Orange
      (Kontakt). Gleiche Sprache wie der Rest: Geist Medium, Versalien,
      Haarlinien-Raster. Rueckbau: Block loeschen + HTML aus
      BACKUP/REDESIGN-FEEDBACK-01-vor-pass10-*.
   ========================================================================== */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #F2F2F2;
  --divider: #DCDCDC;
  --border: #E6E6E6;
  --border-strong: #C4C4C4;
}


/* ---- PASS11:SECTIONS  Ein Bausystem fuer alle Farbabschnitte ----
   Farben nur aus dem Brand System: Glacier = eigene Filme, Stone Grey =
   Behind the Scenes, Orange = Kontakt/Aktion. Jeder Abschnitt gleich gebaut:
   Label in Versalien + Link, EINE Linie, Titel in der Groesse von "MY WORK",
   gleiche Abstaende. Rot ist raus (Lua 10.10.2026). */
.sx { --sx-ink: #fff; --sx-line: rgba(255, 255, 255, 0.35); color: var(--sx-ink); padding-block: var(--section); background: var(--sx-bg) !important; }
.sx--glacier { --sx-bg: #567F99; }
.sx--stone { --sx-bg: #818588; --sx-ink: #161616; --sx-line: rgba(22, 22, 22, 0.3); }
.sx--orange { --sx-bg: #D95A0A; --sx-ink: #161616; --sx-line: rgba(22, 22, 22, 0.35); }
.sx :is(h2, h3, p, a, span):not(.btn):not(.btn *) { color: var(--sx-ink); }
@media (min-width: 900px) and (min-height: 620px) {
  .hero--video ~ .sx { border-image: conic-gradient(var(--sx-bg) 0 0) fill 0 / / 1px 100vmax; }
}

.sx__head, .sx--stone .moments__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 0.9rem; margin-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: var(--hair) solid var(--sx-line);
}
.sx__label { margin: 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.sx__link, .sx--stone .moments__link { font-size: 0.875rem; text-decoration: none; }
.sx__link::after { content: '\2192'; display: inline-block; margin-left: 0.4em; transition: transform var(--m-move) var(--ease-out); }
.sx__link:hover::after { transform: translateX(4px); }

.sx__title {
  margin: 0; font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; line-height: 1.05;
  letter-spacing: -0.04em; text-transform: uppercase;
}
.sx__title--xl { font-size: var(--fs-display); line-height: 0.95; }
.sx__accent { color: #161616 !important; }
.sx__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body, 1.6); max-width: 34ch; }
.sx__split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: end; }
.sx__split .sx__title { grid-column: 1 / span 7; }
.sx__split .sx__text { grid-column: 9 / span 4; }
@media (max-width: 767px) { .sx__split .sx__title, .sx__split .sx__text { grid-column: 1 / -1; } .sx__split .sx__text { margin-top: 1.25rem; } }

/* Glacier: Poster wie eine Film-Reihe, Nummer + Titel darunter, kein Hover-Effekt */
.sx-films { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--img-gap, 0.6rem); }
.sx-film { display: block; text-decoration: none; }
.sx-film img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.sx-film__cap { display: block; margin-top: 0.6rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; }
.sx-film__cap span { margin-right: 0.4em; opacity: 0.6; }
@media (max-width: 767px) {
  .sx-films { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sx-films li { scroll-snap-align: start; }
}

/* Stone: Behind the Scenes, Titel und Link im selben Kopf */
.sx--stone .moments__title { color: #161616; }
.sx--stone .moments__head { align-items: flex-end; }

/* Orange: gross, Titel, laufendes Bildband aus den Projekten, Fusszeile */
.sx--orange { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cta-block.sx--orange { max-width: none; margin: 0; text-align: left; }
.sx--orange .sx__title--xl { max-width: 12ch; }
.sx-band { overflow: hidden; margin-block: clamp(3rem, 6vw, 5rem); }
.sx-band__track { display: flex; gap: var(--img-gap, 0.6rem); width: max-content; animation: sxBand 70s linear infinite; }
.sx-band__track img { height: clamp(150px, 17vw, 250px); width: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@keyframes sxBand { to { transform: translateX(-50%); } }
.sx__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.sx--orange .btn { background: #161616 !important; color: #fff !important; border-color: #161616 !important; }
.sx--orange .btn :is(span, svg) { color: inherit !important; }
.sx--orange .btn:hover { background: #000 !important; color: #fff !important; }
.sx--orange .btn::before { display: none; }
@media (prefers-reduced-motion: reduce) { .sx-band__track { animation: none; } }
/* PASS10:WHITE:END */

/* ---- PASS11:SERVICES  Leistungen editorial, Prozess als Tabelle ---- */
.svc-rows { display: grid; row-gap: var(--section); padding-block: var(--section); }
.svc-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: end; }
.svc-row__media { grid-column: 1 / span 7; margin: 0; }
.svc-row__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.svc-row__text { grid-column: 9 / span 4; }
.svc-row--flip .svc-row__media { grid-column: 6 / span 7; grid-row: 1; }
.svc-row--flip .svc-row__text { grid-column: 1 / span 4; grid-row: 1; }
.svc-row__num { margin: 0 0 0.9rem; padding-bottom: 0.9rem; border-bottom: var(--hair) solid var(--divider); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
.svc-row__title { margin: 0 0 1.25rem; font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; text-transform: uppercase; color: var(--white); }
.svc-row__desc { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body, 1.6); color: var(--text); }
@media (max-width: 899px) {
  .svc-row__media, .svc-row__text, .svc-row--flip .svc-row__media, .svc-row--flip .svc-row__text { grid-column: 1 / -1; grid-row: auto; }
  .svc-row__text { margin-top: 1.5rem; }
}
.sx-steps { list-style: none; margin: 0; padding: 0; }
.sx-steps li {
  display: grid; grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-grid); align-items: baseline;
  padding: clamp(1rem, 2vw, 1.4rem) 0; border-bottom: var(--hair) solid var(--sx-line);
}
.sx-steps__num { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.sx-steps__title { font-size: var(--fs-h3, 1.5rem); font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; line-height: 1.1; }
.sx-steps__desc { font-size: var(--fs-body); line-height: var(--lh-body, 1.6); }
@media (max-width: 767px) { .sx-steps li { grid-template-columns: 2.5rem 1fr; } .sx-steps__desc { grid-column: 2; } }
/* PASS11:SERVICES:END */


/* ==========================================================================
   PASS12  Lua 10.10.2026 abends. Regeln: nie zwei Farbflaechen direkt
   nacheinander, nichts doppelt, Pfeile mit Abstand, wenige feste Groessen.
   Rueckbau: Block loeschen + Dateien aus BACKUP/REDESIGN-FEEDBACK-01-vor-pass12-*.
   ========================================================================== */
/* Stone Grey als Typo-Flaeche (Markenfilm): grosser Satz, ↳-Links */
.statement.sx { padding-block: var(--section); }
.statement.sx .container { display: block; }
.statement.sx .statement__text {
  grid-column: auto; max-width: 24em; margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); font-weight: 500;
  line-height: 1.12; letter-spacing: -0.035em; color: #161616;
}
.sx-type__links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: clamp(2rem, 4vw, 3rem) 0 0; }
.sx-type__links a {
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em;
  color: #161616; text-decoration: none; transition: opacity var(--m-hover) var(--ease);
}
.sx-type__links a::before { content: '\21B3'; margin-right: 0.15em; }
.sx-type__links a:hover { opacity: 0.6; }

/* Orange: gross und ruhig, ohne Bildband */
.sx--orange { padding-block: calc(var(--section) * 1.4) var(--section); }
.sx--orange .sx__foot { margin-top: clamp(3rem, 8vw, 7rem); }

/* Services als Filmposter: Bild breit, Titel gross im Bild, Text darunter */
.svc-posters { display: grid; row-gap: var(--section); padding-block: 0 var(--section); }
.svc-poster__media { position: relative; margin: 0; overflow: hidden; }
.svc-poster__media img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.svc-poster__over {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 2rem); color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 60%);
}
.svc-poster__num { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; }
.svc-poster__title {
  margin: 0; color: #fff; font-size: var(--fs-display); font-weight: 500;
  line-height: 0.95; letter-spacing: -0.045em; text-transform: uppercase; max-width: 14ch;
}
.svc-poster__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.svc-poster__desc { grid-column: 7 / span 6; margin: 0; font-size: var(--fs-body); line-height: var(--lh-body, 1.6); color: var(--text); }
@media (max-width: 899px) {
  .svc-poster__media img { aspect-ratio: 4 / 3; }
  .svc-poster__desc { grid-column: 1 / -1; }
}

/* /work wie Julian Wildner: dichtes Raster, nur kleiner Titel, keine Kategorien/Filter */
.work-index .work-filter__btn { display: none !important; }
.work-index:not([data-view="list"]) .work-grid > .card { grid-column: span 2; }
.work-index:not([data-view="list"]) .work-grid > .card:nth-child(7n+1), .work-index:not([data-view="list"]) .work-grid > .card:nth-child(7n+2), .work-index:not([data-view="list"]) .work-grid > .card:nth-child(7n+6), .work-index:not([data-view="list"]) .work-grid > .card:nth-child(7n+7) { grid-column: span 3; }
.work-index:not([data-view="list"]) .work-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; column-gap: var(--img-gap, 0.6rem) !important; row-gap: clamp(1.5rem, 3vw, 2.5rem) !important; }
.work-index .work-grid .card__cat,
.work-index .work-grid .card__cta { display: none !important; }
.work-index .work-grid .card__info { padding-top: 0.6rem !important; }
.work-index .work-grid .card__title { font-size: 0.9375rem !important; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; text-transform: none !important; }
@media (max-width: 899px) { .work-index:not([data-view="list"]) .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .work-index:not([data-view="list"]) .work-grid > .card:nth-child(n) { grid-column: auto; } }
@media (max-width: 560px) { .work-index:not([data-view="list"]) .work-grid { grid-template-columns: minmax(0, 1fr) !important; } }
/* PASS12:END */

/* ==========================================================================
   PASS13  Lua 10.10.2026 spaet: ein System statt Einzelfixe.
   Abstaende grosszuegiger, Karten ueberall gleich (Titel links, Kategorie
   rechts, kein "See Project"), Statement weiss, Orange fuellt, Services drei
   gleiche Spalten 3:4, About 5 Personen pro Reihe (15 = 3 volle Reihen).
   Rueckbau: Block loeschen + BACKUP/REDESIGN-FEEDBACK-01-vor-pass13-*.
   ========================================================================== */
:root { --section: clamp(4.5rem, 2.5rem + 6vw, 9rem); --section-sm: var(--section); }

/* Karten: Startseite = /work */
.card__cta { display: none !important; }
.card__info { display: flex !important; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 0.7rem !important; }
.card__cat { font-family: var(--font) !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.875rem !important; font-weight: 400 !important; color: var(--muted) !important; margin: 0 !important; }
.card__title { font-size: 1rem !important; font-weight: 500 !important; letter-spacing: -0.01em !important; margin: 0 !important; text-transform: none !important; }
.work-index .work-grid .card__cat { display: block !important; }

/* /work: Umschalter neben den Titel, keine leere Zone */
.work-index .work-filter { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) !important; padding: 0 !important; border: 0 !important; min-height: 0 !important; }

/* Statement weiss, grosse Typo */
.statement--type { padding-block: var(--section); }
.statement--type .statement__text { max-width: 24em; margin: 0; font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.035em; color: var(--white); grid-column: auto; }

/* Orange fuellt die Flaeche */
.sx--orange { min-height: 88svh; display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--section) !important; }
.sx--orange .container:first-child { flex: 1; display: flex; flex-direction: column; }
.sx__label--top { margin: 0 0 auto; }
.sx--orange .sx__title--xl { font-size: clamp(3.5rem, 1rem + 10vw, 12rem); line-height: 0.88; letter-spacing: -0.05em; max-width: none; margin-top: clamp(3rem, 8vw, 7rem); }
.sx--orange .sx__foot { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Services: drei gleiche Spalten */
.svc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-grid); row-gap: 3rem; padding-block: var(--section); }
.svc-col__media { margin: 0 0 1.25rem; }
.svc-col__media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.svc-col__num { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
.svc-col__title { margin: 0 0 1rem; font-size: calc(var(--fs-h3, 1.5rem) * 1.1); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; text-transform: uppercase; color: var(--white); }
.svc-col__desc { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body, 1.6); color: var(--text); }
@media (max-width: 899px) { .svc-cols { grid-template-columns: 1fr; } }

/* About: 5 pro Reihe, groesser */
main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 2rem var(--gap-grid) !important; }
@media (max-width: 1000px) { main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { main:has(#about-title) .kollektiv__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Grosses Bild: festes Format 21:9 statt zu hoch */
.bleed { height: auto !important; aspect-ratio: 21 / 9; overflow: hidden; }
@media (max-width: 767px) { .bleed { aspect-ratio: 4 / 5; } }
/* PASS13:END */

/* ==========================================================================
   PASS14  Lua 10.10.2026 Abend: "Reizueberflutung raus". Bilder tragen die
   Seite, Text ruhig wie bei julianwildner.com. Nur CSS, Markup bleibt
   CMS-kompatibel. Rueckbau: Block loeschen.
   ========================================================================== */
/* Keine Linien unter Abschnittskoepfen */
.sx__head, .sx--stone .moments__head { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* ---- Projektseiten: Bilder untereinander, dann Details + Credits ---- */
main:has(.project-hero) { display: flex; flex-direction: column; }
main:has(.project-hero) > .project-hero { order: 1; }
main:has(.project-hero) > .project-video { order: 2; }
main:has(.project-hero) > .project-images { order: 3; }
main:has(.project-hero) > .doc-stills { order: 3; }          /* Beyond Performance: Stills direkt nach den Bildern */
main:has(.project-hero) > .project-body { order: 4; }
main:has(.project-hero) > .project-video--bts { order: 4; }  /* Peugeot: BTS-Film nach dem Text */
main:has(.project-hero) > .other-projects { order: 5; }
main:has(.project-hero) > .project-cta { display: none; }

.project-hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; }
.project-video { margin-bottom: var(--pj-gap, clamp(1rem, 2vw, 1.75rem)); }
main:has(.project-hero) { --pj-gap: clamp(0.5rem, 1.1vw, 1.25rem); }
.project-images { border: 0 !important; }
.project-images__grid { gap: var(--pj-gap) !important; }

.project-body { padding-top: var(--section) !important; border-top: 0 !important; row-gap: 2.5rem !important; }
.project-body__text { grid-column: 1 / span 6 !important; }
.project-body__credits { grid-column: 7 / span 6 !important; position: static !important; }
.project-body__text::before { content: 'Details'; display: block; margin-bottom: 1.25rem; font-size: var(--fs-lead); color: var(--muted); }
.project-body__label { margin: 0 0 1.25rem !important; font-size: var(--fs-lead) !important; color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-family: var(--font) !important; font-style: normal !important; }
.project-body__text .project-hero__desc,
.project-body__text .project-hero__desc:first-child {
  font-size: var(--fs-lead) !important; line-height: 1.45 !important; font-weight: 400 !important;
  color: var(--white) !important; letter-spacing: -0.01em !important; margin: 0 0 1em !important; max-width: none !important;
}
/* Credits behalten Profilbilder (Lua 10.10.: "Personen muessen drauf sein") */
@media (max-width: 899px) { .project-body__text, .project-body__credits { grid-column: 1 / -1 !important; } }
.other-projects { padding-top: var(--section) !important; border-top: 0 !important; }
.project-body__credits .project-hero__credits { border-top: 0 !important; margin-top: 0 !important; }
.project-body__text::before, .project-body__label { line-height: 1.45 !important; margin: 0 0 1.25rem !important; padding: 0 !important; border: 0 !important; }
.project-body__text > p, .project-body__text .project-hero__desc { margin: 0 0 0.9em !important; padding: 0 !important; }
.project-body__text, .project-body__credits { padding-top: 0 !important; margin-top: 0 !important; }
.project-hero__cat { font-family: var(--font) !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: var(--fs-body) !important; color: var(--muted) !important; }
.project-video { padding-bottom: 0 !important; margin-bottom: var(--pj-gap) !important; }
main:has(.project-hero) > .project-images { padding-top: 0 !important; margin-top: 0 !important; }
/* Projektbilder buendig mit Titel und Logo (Lua 10.10.: randlos war falsch), nur kleine gleiche Abstaende */
main:has(.project-hero) .project-images__grid { column-gap: var(--pj-gap) !important; row-gap: var(--pj-gap) !important; }
/* PASS14:END */

/* ==========================================================================
   PASS15 (Lua 10.10.2026 Nacht, Video-Chat): Hero immer bildschirmhoch,
   keine helle Fuge an Bildkanten. Rueckbau: Block loeschen.
   ========================================================================== */
/* Hero fuellt den ersten Bildschirm in jeder Fenstergroesse. Vorher 84svh /
   max 1200px: in schmalen oder hohen Fenstern blitzte unten Weiss hervor. */
.hero--video { height: 100svh !important; min-height: 0 !important; max-height: none !important; }

/* Randlose Bilder (.bleed) enden auf halben Pixeln. Auf Retina schien dort
   der helle Seitenhintergrund als Linie durch (zwischen Sonnenuntergang und
   Glacier-Block). Dunkler Grund + 1px Ueberlappung nach unten. */
.bleed { background: #0d0d0d !important; margin-bottom: -1px; }
@media (min-width: 900px) and (min-height: 620px) {
  .hero--video ~ .bleed { border-image: conic-gradient(#0d0d0d 0 0) fill 0 / / 0 100vmax; }
}
/* Platzhalter-Projekte (Apple, Nike): Standbild ohne Play, kleines Label */
.video-player--soon { cursor: default; }
.video-player--soon:not(:has(img[src*="apple-spec-ad"]))::after {
  content: "Coming soon"; position: absolute; left: var(--card-pad, 1.25rem); bottom: var(--card-pad, 1.25rem);
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
/* /work: Rhythmus 2-3 statt 2-3-2 (bei 10 Projekten blieb Nike allein in
   einer Dreierreihe). Reste am Ende fuellen die Zeile immer ganz. */
@media (min-width: 900px) {
  .work-index:not([data-view="list"]) .work-grid > .card:nth-child(n) { grid-column: span 2; }
  .work-index:not([data-view="list"]) .work-grid > .card:nth-child(5n+1),
  .work-index:not([data-view="list"]) .work-grid > .card:nth-child(5n+2) { grid-column: span 3; }
  .work-index:not([data-view="list"]) .work-grid > .card:nth-child(5n+1):last-child { grid-column: span 6; }
  .work-index:not([data-view="list"]) .work-grid > .card:nth-child(5n+4):last-child,
  .work-index:not([data-view="list"]) .work-grid > .card:nth-child(5n+3):nth-last-child(2) { grid-column: span 3; }
}
/* PASS15:END */

/* ==========================================================================
   PASS16  Lua 16.10.2026: Farbe hat eine Bedeutung, nicht nur Deko.
     Weiss   = Arbeit, Bilder (Standard jeder Seite)
     Stone   = #BABDBF, Typo-Flaechen: grosse Zeilen + Haarlinien (Leistungen, Prozess)
     Glacier = eigene Filme (7 Short Films)
     Orange  = Lua selbst: jede Seite endet in derselben orangen Kontaktflaeche
     Gelb    = nur Next Shot (eigene Marke, #FFBE00)
   Nie zwei Farbflaechen direkt nacheinander. Text auf Stone/Orange/Gelb
   immer Charcoal. Rueckbau: Block loeschen + HTML aus
   BACKUP/REDESIGN-FEEDBACK-01-vor-pass16-*.
   ========================================================================== */
:root { --stone: #BABDBF; --glacier: #567F99; --nextshot: #FFBE00; --ink: #161616;
        --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M2 12h19M14 5l7 7-7 7'/%3E%3C/svg%3E"); }
.sx--stone   { --sx-bg: var(--stone); --sx-ink: var(--ink); --sx-line: rgba(22, 22, 22, 0.22); }
.sx--glacier { --sx-bg: #537B94; } /* 10.11.: Glacier 1,4 % dunkler, damit weisse Schrift 4,5:1 hat */
.sx--orange  { --sx-bg: var(--accent); }

/* Serif-Akzent: genau ein Wort, per JS ans Satzende gesetzt (CMS-sicher) */
.serif-word { font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: 1.08em; letter-spacing: -0.035em; }

/* Zahl hochgestellt neben Titeln (Anzahl Projekte, aus den Karten gezaehlt) */
.count-sup { display: inline-block; margin-left: 0.18em; font-size: 0.32em; font-weight: 500; letter-spacing: 0; vertical-align: top; line-height: 1; transform: translateY(0.25em); font-variant-numeric: tabular-nums; color: var(--muted); }

/* Menue: Zeilen mit Haarlinie + Pfeil rechts (Desktop: Pfeil schiebt beim Hover ein) */
.mobile-menu__link { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; }
.mobile-menu__link::after {
  content: ''; flex: none; width: 0.62em; height: 0.62em; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transform: rotate(0deg); transition: transform var(--m-move) var(--ease-out);
}
.mobile-menu__link--active::after, .mobile-menu__link:active::after { transform: rotate(-45deg); }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.42s, 0.42s, 0s; }

/* Orange Schlussflaeche: auf jeder Seite gleich, nur Titel + Knopf rechts */
.sx--orange .sx__foot { justify-content: flex-end; }
.sx--orange .sx__foot:has(.sx__text) { justify-content: space-between; }
.sx--orange .sx__title--xl { margin-top: 0 !important; }
.sx--orange { min-height: 72svh; }
main > .sx--orange:last-child { margin-bottom: 0; }

/* Prozess auf dem neuen hellen Stone: Linien zeichnen sich beim Scrollen */
.sx--stone .sx-steps li { border-bottom-color: transparent; position: relative; }
.sx--stone .sx-steps li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hair); background: var(--sx-line); transform-origin: left; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sx--stone .sx-steps li::after { animation: lineDraw linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
  }
}
@keyframes lineDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sx--stone .sx-steps__num { color: rgba(22, 22, 22, 0.55); }

/* Next Shot: eigene gelbe Flaeche, Logo verschmilzt mit dem Grund */
.podcast--brand { background: var(--nextshot); color: var(--ink); padding-block: 0 !important; margin-block: var(--section); }
.podcast--brand .podcast__inner { align-items: center; }
main:has(#about-title) .podcast--brand .podcast__cover { margin-block: 0; }
.podcast--brand .podcast__cover img { display: block; }
.podcast--brand :is(.podcast__label, .podcast__title, .podcast__tagline, .podcast__desc) { color: var(--ink) !important; }
.podcast--brand .podcast__tagline a { color: var(--ink) !important; text-decoration-color: rgba(22, 22, 22, 0.4) !important; }
.podcast--brand .podcast__label { font-size: var(--fs-lead) !important; letter-spacing: -0.01em !important; text-transform: none !important; font-weight: 500 !important; margin-bottom: 0.75rem; }
.podcast--brand .podcast__body { padding-block: clamp(2.5rem, 5vw, 4rem); }
.podcast--brand .btn { color: var(--ink) !important; border-color: var(--ink) !important; background: transparent !important; }
.podcast--brand .btn--primary { background: var(--ink) !important; color: var(--nextshot) !important; }
.podcast--brand .btn :is(span, svg) { color: inherit !important; }
.podcast--brand .btn::before { display: none !important; }
@media (hover: hover) { .podcast--brand .btn:hover { background: var(--ink) !important; color: var(--nextshot) !important; } }
@media (max-width: 899px) { .podcast--brand .podcast__cover { max-width: none !important; margin-inline: calc(-1 * var(--pad)) !important; } }

/* Zahlen zaehlen einmal hoch (7 / 7 / 114), danach Ruhe */
[data-count] { font-variant-numeric: tabular-nums; }
/* PASS16:END */
/* PASS16b: Link im Abschnittskopf bleibt rechts, auch ohne Label */
.sx__head > .sx__link:only-child { margin-left: auto; }
.count-sup { font-size: 0.36em; }
/* PASS16c Next Shot: Logo steht schon im Bild, darum Titel nur fuer Google/Screenreader, sichtbar ist der Claim */
.podcast--brand .podcast__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.podcast__claim { margin: 0 0 1.5rem; font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); }
.podcast--brand + section { border-top: 0 !important; }
@media (max-width: 899px) {
  .podcast--brand .podcast__cover img { aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
  .podcast--brand .podcast__body { padding-block: 0 3rem; }
}

/* PASS16d (Lua: Box-Knopf und graues Logo-Band raus) ---------------------- */
/* Burger-Menue: Pfeile reagieren. Hover = Pfeil dreht nach oben rechts und
   faehrt mit, das Wort rueckt nach, Farbe Orange. Touch: dasselbe bei :active. */
.mobile-menu__link { transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out), color var(--m-hover) var(--ease), padding var(--m-move) var(--ease-out) !important; }
.mobile-menu__link::after { transition: transform var(--m-move) var(--ease-out), background-color var(--m-hover) var(--ease); }
@media (hover: hover) {
  .mobile-menu__link:hover { color: var(--accent-text); padding-left: 0.4rem; }
  .mobile-menu__link:hover::after { transform: translateX(-0.25rem) rotate(-45deg); }
}
.mobile-menu__link:active { padding-left: 0.4rem; }

/* 7 Short Films: Link gehoert zum Text, nicht frei in den Kopf */
.sx__aside { grid-column: 9 / span 4; }
.sx__aside .sx__text { max-width: none; }
.sx__aside .sx__link { display: inline-block; margin-top: 1.25rem; }
@media (max-width: 767px) { .sx__aside { grid-column: 1 / -1; margin-top: 1.25rem; } .sx__aside .sx__text { margin-top: 0; } }

/* Stone als Typo-Flaeche: Leistungen als grosse Zeilen (Inspo Bild 5) */
.svc-type { padding-block: var(--section); }
.svc-type__list { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--sx-line); }
.svc-type__list li { border-bottom: var(--hair) solid var(--sx-line); }
.svc-type__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem;
  padding: clamp(0.6rem, 1.2vw, 1rem) 0 clamp(0.35rem, 0.8vw, 0.6rem); color: var(--ink); text-decoration: none;
}
.svc-type__title {
  font-size: clamp(2.2rem, 0.6rem + 6.4vw, 7.25rem); font-weight: 500; line-height: 0.92;
  letter-spacing: -0.05em; text-transform: uppercase; transition: transform var(--m-move) var(--ease-out);
}
.svc-type__num { font-variant-numeric: tabular-nums; }
.svc-type__tags {
  font-size: 0.75rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: right; padding-bottom: 0.4em; transition: opacity var(--m-hover) var(--ease);
}
@media (hover: hover) {
  .svc-type__list:hover .svc-type__row { color: rgba(22, 22, 22, 0.45); }
  .svc-type__list .svc-type__row:hover { color: var(--ink); }
  .svc-type__row:hover .svc-type__title { transform: translateX(0.12em); }
}
.svc-type__row { transition: color var(--m-hover) var(--ease); }
@media (max-width: 767px) {
  .svc-type__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .svc-type__tags { text-align: left; }
  .svc-type__tags br { display: none; }
  .svc-type__tags { display: flex; flex-wrap: wrap; gap: 0 1rem; }
}
.svc-type__tags > span { display: block; }
@media (max-width: 767px) { .svc-type__tags > span { display: inline; } }

/* ==========================================================================
   PASS17  Lua 16.10.2026: weniger Varianz. EIN Seitentitel-System nach der
   "Work"-Inspo (riesig, links, eng; kurzer Satz klein rechts oben) fuer
   Work, Services, About, Contact, Shop, Legal. Seitenfarbe kommt aus dem
   Studio (Werkzeuge -> Farben -> Seitenfarbe), hier nur die Mechanik.
   Rueckbau: Block loeschen.
   ========================================================================== */
:root { --fs-page: clamp(3.4rem, 0.6rem + 11.5vw, 13.5rem); }

main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title), :has(#shop-title)) > .page-hero {
  display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid);
  align-items: start !important; min-height: 0 !important;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5.5rem)) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
}
main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__title,
[data-titles="caps"] main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__title {
  grid-column: 1 / span 9 !important; grid-row: 1; margin: 0 !important; max-width: none !important;
  font-size: var(--fs-page) !important; font-weight: 500 !important;
  line-height: 0.86 !important; letter-spacing: -0.055em !important; color: var(--white) !important;
}
main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__title .hl-accent { font-size: 1em; }
main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__sub {
  grid-column: 10 / span 3 !important; grid-row: 1; justify-self: end; align-self: start;
  margin: 0.4em 0 0 !important; max-width: 30ch !important; text-align: left !important;
  font-size: var(--fs-body) !important; line-height: 1.5 !important; color: var(--text) !important;
  opacity: 1 !important; transform: none !important; animation: none !important;
}
@media (max-width: 899px) {
  main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__title,
  [data-titles="caps"] main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__title,
  main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__sub { grid-column: 1 / -1 !important; grid-row: auto; }
  main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__sub { justify-self: start; margin-top: 1.5rem !important; }
}

/* Seitenfarbe randlos: Flaeche geht ueber den Container hinaus. Auf weissen
   Seiten ist --bg die Seitenfarbe, also unsichtbar. */
main > :is(.page-hero, .page-hero + section) { border-image: conic-gradient(var(--bg) 0 0) fill 0 / / 0 100vmax; }
/* Getoente Flaeche: Karten-/Listentext liest dieselben Variablen mit */
main > .page-hero + section :is(.card__title, .work-filter__btn, .work-list__title) { color: var(--white); }
/* PASS17:END */
/* PASS17b: Next-Shot-Cover ohne grauen Platzhalter und ohne feste Hoehe (Luecke auf Tablet) */
.podcast--brand .podcast__cover { background: transparent !important; aspect-ratio: auto !important; height: auto !important; }
.podcast--brand .podcast__cover img { height: auto !important; }
/* PASS17c: Leistungszeilen — Nummer Orange (Hauptfarbe), mobil Nummer klein darueber, Titel gross */
.sx .svc-type__row .svc-type__num { color: var(--accent) !important; transition: color var(--m-hover) var(--ease); }
@media (hover: hover) { .sx .svc-type__list:hover .svc-type__row:not(:hover) .svc-type__num { color: inherit !important; } }
@media (max-width: 767px) {
  .svc-type__row { padding: 1.1rem 0 0.9rem; }
  .svc-type__title { font-size: clamp(2.6rem, 12.5vw, 4.5rem); line-height: 0.9; letter-spacing: -0.05em; }
  .sx .svc-type__row .svc-type__num { display: block; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink) !important; }
  .svc-type__num::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: 50%; background: var(--accent); vertical-align: 0.05em; }
}
/* PASS17d: Kontaktformular bis Tablet einspaltig (Name, Email, Nachricht), Desktop bleibt nebeneinander */
@media (max-width: 899px) { .contact-form__row { grid-template-columns: minmax(0, 1fr) !important; } }
/* PASS17e  Lua: Titel minimal kleiner und auf die 1.333-Skala (16 * 1.333^n:
   37.9 / 50.5 / 67.3 / 89.8 / 119.7 / 159.6 px). Grenzen liegen genau auf Stufen. */
:root { --fs-page: clamp(3.1605rem, 0.7rem + 10.3vw, 9.9887rem); }                 /* 50.5 -> 159.6 */
.svc-type__title { font-size: clamp(2.3704rem, 0.4rem + 7.6vw, 7.4915rem) !important; } /* 37.9 -> 119.7 */
@media (max-width: 767px) { .svc-type__title { font-size: clamp(2.3704rem, 12.5vw, 4.2088rem) !important; } } /* 37.9 -> 67.3 */
/* PASS17f  Lua: keine Punkte. 01 02 03 ueberall inline wie Desktop,
   Charcoal, nur beim Hover / Antippen orange. Ersetzt PASS17c. */
.sx .svc-type__row .svc-type__num { display: inline !important; margin: 0 !important; font-size: 1em !important; letter-spacing: inherit !important; color: inherit !important; transition: color var(--m-hover) var(--ease); }
.sx .svc-type__row .svc-type__num::before { content: none !important; }
.sx .svc-type__row:is(:hover, :active, :focus-visible) .svc-type__num { color: var(--accent) !important; }
@media (max-width: 767px) { .svc-type__title { font-size: clamp(2.3704rem, 11vw, 4.2088rem) !important; } } /* "01 COMMERCIAL" bleibt auf einer Zeile */
/* PASS17g  Serif mehr, aber sauber: genau ein Kepler-Wort pro Block
   (Startseiten-Satz, orange Schlussflaeche, Footer-Zeile). */
.footer__claim { margin: 0 0 0.6rem; font-size: 1.7778rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; color: var(--white); } /* 28.4 px, Stufe der 1.333-Skala */
.footer__claim .serif-word { font-size: 1.08em; }
.sx--orange .cta-block__title .serif-word { text-transform: uppercase; letter-spacing: -0.02em; }

/* ==========================================================================
   PASS18  Lua 16.10.2026: Orange "muss mehr knallen". Kein kleiner Knopf im
   Leerraum, sondern eine grosse Zeile wie das Burger-Menue / Player Roberts
   Bell: Haarlinien oben und unten, Wort links, grosser Pfeil rechts, Hover
   dreht den Pfeil nach oben rechts. Groessen auf der 1.333-Skala.
   Bildabstand: ein Wert fuer alle Bildraster (Bild 6: kleine gleiche Fugen).
   Rueckbau: Block loeschen + Markup aus BACKUP/...-vor-pass16-*.
   ========================================================================== */
/* 16.10.2026: Bildabstand eng wie Luas Referenz, ein Wert fuer alle Bildraster (--gap-img oben). */
:root { --img-gap: var(--gap-img); --pj-gap: var(--img-gap); }
main:has(.project-hero) { --pj-gap: var(--img-gap); }

.sx--orange { min-height: 0 !important; padding-block: calc(var(--section) * 0.9) calc(var(--section) * 0.7) !important; }
.sx--orange .sx__title--xl { font-size: clamp(3.1605rem, 0.4rem + 10.6vw, 12.6rem) !important; line-height: 0.86 !important; letter-spacing: -0.055em !important; }
.sx--orange .sx__foot { display: block !important; margin-top: clamp(2.5rem, 6vw, 5.5rem) !important; }
.sx--orange .sx__foot .sx__text { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); max-width: 34ch; }
.cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.5rem) 0;
  border-top: var(--hair) solid var(--ink); border-bottom: var(--hair) solid var(--ink);
  color: var(--ink) !important; text-decoration: none;
  font-size: clamp(2.3704rem, 1rem + 4.2vw, 5.6187rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em;
}
.cta-row::after {
  content: ''; flex: none; width: 0.82em; height: 0.82em; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--m-move) var(--ease-out);
}
.cta-row:is(:hover, :focus-visible, :active)::after { transform: rotate(-45deg); }
.cta-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* PASS18:END */

/* ==========================================================================
   PASS19  Lua 16.10.2026: Orange "einfach gross Design": nur der Titel, die
   ganze Flaeche ist der Link, Pfeil am Titelende dreht beim Hover.
   /work-Tabelle wie die Work-Inspo. Kartenzeile mobil sauber.
   ========================================================================== */
.sx--orange { position: relative; padding-block: calc(var(--section) * 0.9) !important; }
.sx--orange .sx__cover { position: absolute; inset: 0; z-index: 1; }
.sx--orange .sx__cover:focus-visible { outline: var(--hair) solid var(--ink); outline-offset: -0.75rem; }
.sx--orange .cta-block__title::after {
  content: ''; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.18em; vertical-align: -0.02em;
  background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--m-move) var(--ease-out);
}
.sx--orange:has(.sx__cover:is(:hover, :focus-visible, :active)) .cta-block__title::after { transform: rotate(-45deg); }

/* /work Tabelle: Kopf grau klein, Zeilen ruhig, eine Linie pro Zeile */
.work-table__head, .work-list__link { grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr) 1.5rem !important; column-gap: var(--gap-grid) !important; }
.work-table__head { padding: 0 0 0.6rem !important; border-bottom: var(--hair) solid var(--white) !important; font-size: var(--fs-body) !important; color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important; }
.work-list__link { padding: 0.7rem 0 !important; align-items: baseline; }
.work-list__title { font-size: var(--fs-body) !important; font-weight: 500 !important; letter-spacing: -0.01em !important; text-transform: none !important; }
.work-list__cat, .work-list__num { font-size: var(--fs-body) !important; color: var(--muted) !important; font-family: var(--font) !important; font-style: normal !important; text-transform: none !important; }
.work-list__row { border-bottom-color: var(--border-strong) !important; }
.work-index .work-table { margin-top: 0 !important; }

/* Karten: Titel und Kategorie nie umbrechen lassen, schmal untereinander */
@media (max-width: 1100px) {
  .card__info { flex-direction: column-reverse !important; align-items: flex-start !important; gap: 0.15rem !important; }
}
/* PASS19:END */
@media (min-width: 1101px) { .mobile-menu { display: none !important; } } /* PASS20: Menueflaeche nie auf Desktop */

/* ==========================================================================
   PASS20  Lua 16.10.2026: Kontakt wie Kalkbrenner-Newsletter. Bildschirm-
   fuellende orange Flaeche: kleines Label links, Satz rechts (Satzschreibung,
   ein Kepler-Wort), Knopf darunter, unten ein ruhig laufendes Band aus
   Projektbildern mit kleinen gleichen Fugen und versetzten Hoehen.
   ========================================================================== */
.sx--contact { min-height: 100svh !important; display: flex !important; flex-direction: column; justify-content: space-between; gap: clamp(3rem, 8vw, 7rem); padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4.5rem) !important; overflow: hidden; }
.sx--contact .sx__cover { display: none; }
.sx--contact .cta-block__title::after { content: none !important; }
.sx-contact__top { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: start; }
.sx .sx-contact__label { grid-column: 1 / span 4; margin: 0.35em 0 0; font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.sx-contact__main { grid-column: 7 / span 6; }
.sx .sx-contact__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); max-width: 16em;
  font-size: clamp(2.3704rem, 1.2rem + 2.2vw, 3.1605rem); /* 37.9 -> 50.5 */
  font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; text-transform: none; color: var(--ink);
}
.sx--contact .btn { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
.sx-contact__band { overflow: hidden; }
.sx-contact__track { display: flex; align-items: flex-end; gap: var(--img-gap); width: max-content; animation: sxBand 80s linear infinite; }
.sx-contact__img { display: block; width: auto; object-fit: cover; height: clamp(9rem, 15vw, 15rem); aspect-ratio: 1 / 1; }
.sx-contact__img--1 { aspect-ratio: 3 / 2; height: clamp(7rem, 11vw, 11.5rem); }
.sx-contact__img--2 { aspect-ratio: 4 / 3; height: clamp(8rem, 13vw, 13rem); }
@media (hover: hover) { .sx-contact__band:hover .sx-contact__track { animation-play-state: paused; } }
@media (max-width: 899px) {
  .sx .sx-contact__label, .sx-contact__main { grid-column: 1 / -1; }
  .sx .sx-contact__label { margin-bottom: clamp(3rem, 12vw, 5rem); }
  .sx--contact { min-height: 88svh !important; }
}
@media (prefers-reduced-motion: reduce) { .sx-contact__track { animation: none; } }
/* PASS20:END */
.sx--contact .sx-contact__title .serif-word { text-transform: none !important; letter-spacing: -0.03em; }
/* Footer (Transkript-Feedback): Mail-Adresse in Kepler, keine Zeile darueber */
.footer__email { font-family: var(--font-accent) !important; font-style: italic !important; font-weight: 600 !important; letter-spacing: -0.03em !important; }

/* ---- PASS20:SF-ALBUM  Startseite 7 Short Films wie Kalkbrenner-Album:
   grosses Bild links bis an den Rand, rechts oben eine Zeile mit den Zahlen
   + Link ueber einer Haarlinie, Titel, Text, unten die sieben Poster. ---- */
.sf-album { padding-block: 0 !important; }
.sf-album__grid { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: stretch; }
.sf-album__media { grid-column: 1 / span 6; display: block; margin-left: calc(-1 * var(--pad)); }
.sf-album__media img { display: block; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sf-album__body { grid-column: 7 / span 6; display: flex; flex-direction: column; padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3.5rem); }
.sx .sf-album__bar { display: flex; align-items: baseline; gap: clamp(1.25rem, 3vw, 3rem); padding-bottom: 0.9rem; border-bottom: var(--hair) solid rgba(255, 255, 255, 0.6); font-size: var(--fs-body); font-weight: 500; }
.sf-album__bar span:not(:first-child) { opacity: 0.6; }
.sf-album__bar .sx__link { margin-left: auto; font-size: var(--fs-body); font-weight: 500; }
.sf-album .sx__title { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; }
.sf-album .sx__text { margin: auto 0 clamp(1.5rem, 3vw, 2.5rem); max-width: 30em; padding-top: clamp(2rem, 5vw, 4rem); }
.sf-album .sx-films { margin: 0 !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem !important; }
@media (max-width: 899px) {
  .sf-album__media, .sf-album__body { grid-column: 1 / -1; }
  .sf-album__media { margin-right: calc(-1 * var(--pad)); }
  .sf-album__media img { aspect-ratio: 4 / 3; }
  .sf-album__bar { flex-wrap: wrap; row-gap: 0.4rem; }
  .sf-album .sx-films { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-flow: row !important; overflow: visible !important; }
}
.sf-album .sx__title { font-size: clamp(2.3704rem, 1rem + 3.4vw, 4.2088rem) !important; line-height: 0.95; } /* 37.9 -> 67.3 */
@media (max-width: 899px) {
  .sf-album .sx-films { grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: 38% !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--pad)) !important; }
  .sf-album .sx-films li { scroll-snap-align: start; }
  .sf-album__bar .sx__link { margin-left: 0; flex-basis: 100%; order: -1; }
}
/* PASS20:SF-ALBUM:END */

/* PASS20:CTA  Transkript: "was wichtig ist zum Verkaufen, immer orange".
   Hero-Knopf gefuellt orange, Schrift Charcoal (4.67:1). Nebenwege bleiben Kontur. */
.hero__cta, .site-header--overlay .hero__cta { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important; }
.hero__cta :is(span, svg) { color: inherit !important; }
@media (hover: hover) { .hero__cta:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--accent-ink) !important; } }
/* /work Tabelle: Zeilen hoeher (Lua: zu eng) */
.work-list__link { padding: 1.05rem 0 !important; }
.work-table__head { padding-bottom: 0.9rem !important; }

/* ---- PASS20:SVC  Services wie Slides (Kalkbrenner-Album): Bild halb bis an
   den Rand, rechts Nummer + Projektlink ueber einer Linie, grosser Titel,
   ein Satz unten. Seiten wechseln von Zeile zu Zeile. ---- */
.svc-slides { display: grid; row-gap: var(--img-gap); padding-block: 0 var(--section); }
.svc-slide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); padding-right: var(--pad); }
.svc-slide--flip { padding-right: 0; padding-left: var(--pad); }
.svc-slide__media { grid-column: 1 / span 7; margin: 0; }
.svc-slide__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-slide__body { grid-column: 8 / span 5; display: flex; flex-direction: column; padding-block: clamp(0.25rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem); }
.svc-slide--flip .svc-slide__media { grid-column: 6 / span 7; grid-row: 1; }
.svc-slide--flip .svc-slide__body { grid-column: 1 / span 5; grid-row: 1; }
.svc-slide__bar { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.9rem; border-bottom: var(--hair) solid var(--white); font-size: var(--fs-body); font-weight: 500; }
.svc-slide__num { color: var(--white); transition: color var(--m-hover) var(--ease); }
.svc-slide__link { color: var(--white); text-decoration: none; }
.svc-slide__link::after { content: ''; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.45em; vertical-align: -0.1em; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform var(--m-move) var(--ease-out); }
.svc-slide__link:hover::after { transform: rotate(-45deg); }
.svc-slide:hover .svc-slide__num { color: var(--accent-text); }
.svc-slide__title { margin: clamp(1rem, 2vw, 1.5rem) 0 0; font-size: clamp(2.3704rem, 1rem + 3.4vw, 4.2088rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.045em; text-transform: uppercase; color: var(--white); }
.svc-slide__desc { margin: auto 0 0; padding-top: 2rem; max-width: 26em; font-size: var(--fs-lead, 1.333rem); line-height: 1.35; color: var(--white); }
@media (max-width: 899px) {
  .svc-slide, .svc-slide--flip { padding: 0; }
  .svc-slide__media, .svc-slide__body, .svc-slide--flip .svc-slide__media, .svc-slide--flip .svc-slide__body { grid-column: 1 / -1; grid-row: auto; }
  .svc-slide__body { padding: 1.25rem var(--pad) 2.5rem; }
}
/* PASS20:SVC:END */

/* ==========================================================================
   PASS21  Lua 16.10.2026: Farbflaechen IMMER bildschirmhoch, ein Abstands-
   system (oben = unten = --section), kein Bilderband, nichts nachgebaut.
   Abschnitts-Links sind Knoepfe (Transkript: "ueberall Button, einheitlich").
   ========================================================================== */
.sx, .podcast--brand { min-height: 100svh !important; display: flex !important; flex-direction: column; justify-content: space-between; gap: var(--section); padding-block: var(--section) !important; box-sizing: border-box; }
.podcast--brand { justify-content: center; padding-block: 0 !important; }
.podcast--brand > .container { width: 100%; }

/* Glacier: Titel + Text oben, Poster unten gross ueber die ganze Breite */
.sx--glacier .sx__split { align-items: start; }
.sx--glacier .sx__aside .sx__text { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.sx--glacier .sx-films { margin: 0 !important; gap: var(--img-gap) !important; }
.sx--glacier .sx__title { font-size: clamp(2.3704rem, 1rem + 3.4vw, 4.2088rem) !important; line-height: 0.95; } /* 37.9 -> 67.3 */

/* Knoepfe auf Farbflaechen: Kontur in der Schriftfarbe der Flaeche, Hover gefuellt */
.sx .btn--secondary { background: transparent !important; color: var(--sx-ink) !important; border-color: var(--sx-ink) !important; }
.sx .btn--secondary :is(span, svg) { color: inherit !important; }
.sx .btn--secondary::before { display: none !important; }
@media (hover: hover) {
  .sx--glacier .btn--secondary:hover { background: #fff !important; color: var(--glacier) !important; }
  .sx--stone .btn--secondary:hover { background: var(--ink) !important; color: var(--stone) !important; }
}
.moments__link.btn { font-size: var(--btn-fs-md) !important; }

/* Kontakt: clean, bildschirmhoch, Satz gross unten links, Knopf darunter */
.sx--contact { justify-content: flex-end !important; padding-block: var(--section) !important; }
.sx--contact .sx-contact__label { display: none; }
.sx-contact__top { display: block !important; }
.sx-contact__main { max-width: 15em; font-size: clamp(2.3704rem, 0.9rem + 4.4vw, 5.6187rem); } /* 37.9 -> 89.8 */
.sx .sx-contact__title { font-size: 1em !important; line-height: 0.98 !important; letter-spacing: -0.045em !important; max-width: none; margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.sx--contact .btn { font-size: var(--btn-fs-md) !important; }

/* Services-Slides: Abstand zwischen den Leistungen aus dem System */
.svc-slides { row-gap: calc(var(--section) * 0.5); }
/* PASS21:END */
.sx--contact .container:first-child { flex: 0 0 auto !important; display: block !important; }
.svc-type { justify-content: center !important; }

/* PASS21:ARROWS  Lua: ein Pfeil fuer alles = der Geist-Pfeil (Glyphe \2192),
   etwas fetter. Ruhezustand schraeg nach oben (↗), Hover dreht zur Seite (→)
   und schiebt minimal nach. Gilt fuer Knoepfe, Abschnittslinks, Tabelle, Menue. */
.btn--arrow::after, .sx__link::after, .work-list__arrow, .mobile-menu__link::after {
  content: '\2192'; display: inline-block; font-family: var(--font); font-weight: 600; line-height: 1;
  transform: rotate(-45deg); transition: transform var(--m-move) var(--ease-out);
}
.mobile-menu__link::after { width: auto !important; height: auto !important; background: none !important; -webkit-mask: none !important; mask: none !important; font-size: 0.8em; }
.work-list__arrow { font-size: 1.1em; }
.btn--arrow:is(:hover, :focus-visible)::after,
.sx__link:is(:hover, :focus-visible)::after,
.work-list__link:is(:hover, :focus-visible) .work-list__arrow,
.mobile-menu__link:is(:hover, :active, :focus-visible)::after,
.mobile-menu__link--active::after { transform: translateX(0.18em) rotate(0deg) !important; }

/* PASS21:SVC  Services ohne Bilder (Lua): drei Leistungen als grosse Zeilen
   auf Stone wie auf der Startseite, darunter je ein Satz + Projektlink.
   Prozess danach auf Weiss (nie zwei Farbflaechen nacheinander). */
.svc-type--page .svc-type__item { padding: clamp(0.6rem, 1.2vw, 1rem) 0 clamp(1.25rem, 2.5vw, 2rem); }
.svc-type--page .svc-type__title { margin: 0; color: var(--ink); }
.svc-type--page .svc-type__more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: baseline; margin-top: clamp(0.75rem, 1.5vw, 1.25rem); }
.sx .svc-type--page .svc-type__desc, .svc-type--page .svc-type__desc { grid-column: 1 / span 6; margin: 0; font-size: var(--fs-lead, 1.333rem); line-height: 1.35; color: var(--ink); max-width: 30em; }
.svc-type--page .sx__link { grid-column: 10 / span 3; justify-self: end; font-size: var(--fs-body); font-weight: 500; color: var(--ink); text-decoration: none; }
.svc-type--page .svc-type__item:hover .svc-type__num { color: var(--accent) !important; }
@media (max-width: 767px) {
  .svc-type--page .svc-type__desc, .svc-type--page .sx__link { grid-column: 1 / -1; justify-self: start; }
  .svc-type--page .sx__link { margin-top: 0.75rem; }
}
.sx--plain { --sx-bg: var(--bg); --sx-ink: var(--white); --sx-line: var(--divider); }

/* PASS21:BUTTONS  Lua: keine Kontur-Knoepfe. Orange gefuellt = verkaufen
   (Get in Touch), Charcoal gefuellt = Wege (All projects, Watch the films).
   Auf Orange ist der Hauptknopf Charcoal. */
.btn--secondary, .sx .btn--secondary {
  background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important;
}
.btn--secondary :is(span, svg), .sx .btn--secondary :is(span, svg) { color: inherit !important; }
.btn--secondary::before { display: none !important; }
@media (hover: hover) {
  .btn--secondary:hover, .sx .btn--secondary:hover, .sx--glacier .btn--secondary:hover, .sx--stone .btn--secondary:hover {
    background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important;
  }
}

/* Stone-Flaeche direkt nach dem Seitentitel nicht weiss uebermalen */
main > .page-hero + .sx { border-image: conic-gradient(var(--sx-bg) 0 0) fill 0 / / 0 100vmax !important; }

/* Laufband unten in der orangen Flaeche (Inspo: Zeiten-Ticker) */
.sx--contact { padding-bottom: 0 !important; }
.sx-ticker { overflow: hidden; border-top: var(--hair) solid var(--ink); margin-top: auto; }
.sx-ticker__track { display: flex; width: max-content; animation: sxBand 60s linear infinite; }
.sx-ticker__track span {
  display: inline-flex; align-items: center; white-space: nowrap; padding: clamp(0.9rem, 1.6vw, 1.3rem) 0;
  font-size: clamp(1.3333rem, 0.9rem + 1.6vw, 2.3704rem); font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink);
}
.sx-ticker__track span::after { content: '\2193'; display: inline-block; margin: 0 0.7em; font-weight: 600; }
.sx-ticker__track b { font-family: var(--font-accent); font-style: italic; font-weight: 600; text-transform: none; margin-left: 0.3em; font-variant-numeric: tabular-nums; }
.sx--contact .sx-contact__top { margin-bottom: var(--section); }
@media (prefers-reduced-motion: reduce) { .sx-ticker__track { animation: none; } }
/* PASS21:SHOP  Lua: Produktbilder groesser. Zwei Produkte = zwei halbe Spalten. */
.shop__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--img-gap) var(--gap-grid) !important; max-width: none !important; }
.shop__grid .product-card { max-width: none !important; width: 100% !important; }
.shop__grid .product-card__img-wrap img { width: 100%; height: auto; }
@media (max-width: 599px) { .shop__grid { grid-template-columns: 1fr !important; } }
.product-card__buy { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important; }
.product-card__buy::before { display: none !important; }
.product-card__buy::after { content: '\2192' !important; display: inline-block; font-weight: 600; transform: rotate(-45deg); transition: transform var(--m-move) var(--ease-out); }
.product-card:is(:hover, :focus-visible) .product-card__buy::after { transform: translateX(0.18em) rotate(0deg); }
@media (hover: hover) { .product-card:hover .product-card__buy { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } }
/* Lenis: Grundregeln aus der Lenis-Doku */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* PASS21:ARROWS-b  Lua: gedrehter Pfeil sah angeschnitten und nicht nach Geist
   aus. Jetzt der echte Geist-Pfeil ↗ (SemiBold) in Ruhe, Hover dreht ihn um
   45° zur Seite (→). Etwas Luft um die Glyphe, damit nichts abgeschnitten wird. */
.btn--arrow::after, .sx__link::after, .work-list__arrow, .mobile-menu__link::after, .product-card__buy::after {
  content: '\2197' !important; font-family: var(--font) !important; font-weight: 600 !important;
  transform: none !important; padding: 0.08em; margin: -0.08em 0 -0.08em 0.02em; overflow: visible;
}
.btn--arrow:is(:hover, :focus-visible)::after,
.sx__link:is(:hover, :focus-visible)::after,
.work-list__link:is(:hover, :focus-visible) .work-list__arrow,
.mobile-menu__link:is(:hover, :active, :focus-visible)::after,
.product-card:is(:hover, :focus-visible) .product-card__buy::after { transform: translateX(0.12em) rotate(45deg) !important; }
.mobile-menu__link--active::after { transform: none !important; }
.work-list__arrow { display: inline-block; font-size: 1.1em; }
.work-list__arrow::after { content: '\2197'; font-family: var(--font); font-weight: 600; }

/* PASS22  Seitentitel laden ruhig: ganzer Titel einmal 0.9 s von leicht unten,
   keine Wortmasken (Lua: "laden nicht sinnvoll"). */
@keyframes h1In { from { opacity: 0; transform: translateY(0.12em); } to { opacity: 1; transform: none; } }
.js main :is(.page-hero__title, .project-hero__title, .product-hero__title) { animation: h1In 0.9s var(--ease-out) 0.05s both; }
@media (prefers-reduced-motion: reduce) { .js main :is(.page-hero__title, .project-hero__title, .product-hero__title) { animation: none; } }
.bleed--svc { margin-top: 0; }
.sx__link::after { margin-left: 0.4em !important; }

/* ==========================================================================
   PASS23  Lua 16.10.2026
   ========================================================================== */
/* Pfeil: Geist ↗, etwas groesser und auf die Textmitte gesetzt (war zu klein
   und sass oben, wirkte "kaputt"). Hover dreht zu →. */
.btn--arrow::after, .sx__link::after, .work-list__arrow::after, .mobile-menu__link::after, .product-card__buy::after {
  content: '\2197' !important; font-family: var(--font) !important; font-weight: 500 !important;
  font-size: 1.22em !important; line-height: 0 !important; vertical-align: -0.06em !important;
  padding: 0 !important; margin: 0 0 0 0.35em !important; display: inline-block !important;
  transform-origin: 50% 45%;
}
.work-list__arrow { transform: none !important; }
.work-list__link:is(:hover, :focus-visible) .work-list__arrow::after { transform: translateX(0.1em) rotate(45deg); }
.btn--arrow::after { margin-left: 0.1em !important; } /* Knoepfe haben schon gap */
.mobile-menu__link::after { font-size: 0.9em !important; }

/* Knoepfe: Standard = Kontur in der Schriftfarbe der Flaeche (auf Blau weiss),
   Hover fuellt orange. Primaer (verkaufen) = orange gefuellt. */
.btn--secondary { background: transparent !important; color: var(--white) !important; border-color: var(--white) !important; }
.sx .btn--secondary { color: var(--sx-ink) !important; border-color: var(--sx-ink) !important; }
@media (hover: hover) {
  .btn--secondary:hover, .sx .btn--secondary:hover, .sx--glacier .btn--secondary:hover, .sx--stone .btn--secondary:hover {
    background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important;
  }
}
/* Next Shot ist die Ausnahme: nie Orange, nur Charcoal/Gelb */
.podcast--brand .btn, .podcast--brand .btn--secondary { border-color: var(--ink) !important; }
.podcast--brand .btn--secondary { background: transparent !important; color: var(--ink) !important; }
.podcast--brand .btn--primary { background: var(--ink) !important; color: var(--nextshot) !important; }
@media (hover: hover) {
  .podcast--brand .btn:hover, .podcast--brand .btn--secondary:hover, .podcast--brand .btn--primary:hover {
    background: var(--ink) !important; border-color: var(--ink) !important; color: var(--nextshot) !important;
  }
}

/* Seitentitel ohne Lade-Animation (wirkte abgeschnitten und verbuggt) */
.js main :is(.page-hero__title, .project-hero__title, .product-hero__title) { animation: none !important; opacity: 1 !important; transform: none !important; }

/* Shop: kein 3D-Kippen, Karten kleiner (2 x 5 von 12 Spalten) */
.product-card__tilt { transform: none !important; transition: none !important; }
.shop__grid { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
.shop__grid .product-card { grid-column: span 5; }
.shop__grid .product-card:nth-child(2) { grid-column: 7 / span 5; }
@media (max-width: 899px) { .shop__grid .product-card, .shop__grid .product-card:nth-child(2) { grid-column: span 6; } }
@media (max-width: 599px) { .shop__grid .product-card, .shop__grid .product-card:nth-child(2) { grid-column: 1 / -1; } }

/* Services-Prozess: fuenf Spalten, grosse Nummer, Titel, kurzer Text.
   Groessen auf der 1.333-Skala: Nummer 67.3, Titel 28.4, Text 16. */
.process-sec { justify-content: center !important; }
.sx .process-cols__title { margin: 0 0 var(--section); font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; color: var(--white); }
.process-cols { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap-grid); }
.process-cols li { display: flex !important; flex-direction: column; gap: 0.75rem; padding: 1.25rem 0 0 !important; border-bottom: 0 !important; border-top: var(--hair) solid var(--white) !important; }
.process-cols li::after { content: none !important; }
.sx .process-cols .sx-steps__num { font-size: clamp(2.3704rem, 1rem + 3.4vw, 4.2088rem); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: var(--white) !important; transition: color var(--m-hover) var(--ease); }
.sx .process-cols .sx-steps__title { margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: 1.7778rem; line-height: 1.05; letter-spacing: -0.035em; color: var(--white); }
.sx .process-cols .sx-steps__desc { font-size: var(--fs-body); line-height: 1.5; color: var(--muted) !important; }
.process-cols li:hover .sx-steps__num { color: var(--accent) !important; }
@media (max-width: 1099px) { .process-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; } }
@media (max-width: 599px) { .process-cols { grid-template-columns: 1fr; row-gap: 2.25rem; } .sx .process-cols .sx-steps__title { margin-top: 0.75rem; } }
/* PASS23:END */
.sx .btn--secondary { background: transparent !important; } /* Kontur auch auf Farbflaechen (Blau: weiss) */

/* PASS24  Lua: gleiche Elemente = gleiches Verhalten. Leistungszeilen auf der
   Startseite wie auf Services: kein Schieben, kein Abblenden der anderen
   Zeilen, nur die Nummer wird beim Hover orange. Gleiche Abstaende. */
.svc-type__row:hover .svc-type__title, .svc-type__title { transform: none !important; transition: none !important; }
.svc-type__list:hover .svc-type__row, .svc-type__list .svc-type__row:hover { color: var(--ink) !important; }
.sx .svc-type__list:hover .svc-type__row:not(:hover) .svc-type__num { color: inherit !important; }
.sx .svc-type__row .svc-type__num, .svc-type--page .svc-type__num { color: inherit !important; transition: color var(--m-hover) var(--ease); }
.sx .svc-type__row:is(:hover, :focus-visible, :active) .svc-type__num,
.svc-type--page .svc-type__item:hover .svc-type__num { color: var(--accent) !important; }
.svc-type__row, .svc-type--page .svc-type__item { padding: clamp(0.6rem, 1.2vw, 1rem) 0 clamp(0.35rem, 0.8vw, 0.6rem) !important; }

/* ==========================================================================
   PASS25  Services-Prozess als oranges Swiss-Poster (Inspo: Rami Voss Zeilen,
   Player Roberts Bell, Expo-Poster). Gleichzeitig das Kontakt-Finale der
   Seite. Groessen auf der 1.333-Skala: Titel 67.3, Nummer 67.3, Text 16.
   ========================================================================== */
.process-poster { --sx-bg: var(--accent); --sx-ink: var(--ink); --sx-line: var(--ink); justify-content: space-between !important; }
.sx .pp__bar { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.9rem; border-bottom: var(--hair) solid var(--ink); }
.sx .pp__bar h2, .sx .pp__bar span { margin: 0; font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.pp__list { list-style: none; margin: 0; padding: 0; }
.pp__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: baseline;
  padding: clamp(0.5rem, 1vw, 0.8rem) 0 clamp(0.3rem, 0.7vw, 0.55rem); border-bottom: var(--hair) solid var(--ink);
}
.sx .pp__title, .sx .pp__num { font-size: clamp(2.3704rem, 0.8rem + 3.8vw, 4.2088rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; text-transform: uppercase; color: var(--ink); }
.pp__title { grid-column: 1 / span 6; }
.sx .pp__desc { grid-column: 7 / span 4; font-size: var(--fs-body); line-height: 1.4; color: var(--ink); max-width: 26em; }
.pp__num { grid-column: 11 / span 2; justify-self: end; font-variant-numeric: tabular-nums; }
.pp__foot { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.sx .pp__cta-title { margin: 0; max-width: 14em; font-size: clamp(2.3704rem, 1rem + 3.4vw, 4.2088rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; color: var(--ink); }
.pp__cta-title .serif-word { font-family: var(--font-accent); font-style: italic; font-weight: 600; letter-spacing: -0.03em; }
.process-poster .btn--primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; }
@media (hover: hover) { .process-poster .btn--primary:hover { background: #fff !important; color: var(--ink) !important; border-color: #fff !important; } }
@media (max-width: 899px) {
  .pp__title { grid-column: 1 / span 9; } .pp__num { grid-column: 10 / span 3; }
  .sx .pp__desc { grid-column: 1 / -1; grid-row: 2; margin: 0.4rem 0 0.4rem; }
}
/* PASS25:END */
/* PASS26  Shop auf das gleiche Bildraster wie /work und Projektbilder:
   zwei Spalten, Spaltenabstand = --img-gap (Lua: "muss so sein wie bei den Bildern"). */
.shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--img-gap) !important; row-gap: clamp(2rem, 4vw, 3rem) !important; }
.shop__grid .product-card, .shop__grid .product-card:nth-child(2) { grid-column: auto !important; }
@media (max-width: 599px) { .shop__grid { grid-template-columns: 1fr !important; } }

/* PASS27  Lua: Prozess-Poster "zu laut, nicht im Raster, Text nicht optisch
   mit BRIEF ausgerichtet". Titel eine Stufe kleiner (50.5), alles oben an der
   Versalhoehe des Titels ausgerichtet, Nummer klein oben rechts, Text in einer
   festen Spalte. Eine kleine Spielerei: die Zeile, ueber der man ist, wird
   Charcoal, Nummer und Titel bleiben lesbar. */
.process-poster { --pp-t: clamp(2.3704rem, 1rem + 2.6vw, 3.1605rem); } /* 37.9 -> 50.5 */
.pp__row { align-items: start !important; padding: 0.9rem 0 1.1rem !important; transition: background-color var(--m-hover) var(--ease); }
.sx .pp__title { font-size: var(--pp-t) !important; line-height: 0.9 !important; letter-spacing: -0.045em !important; }
.sx .pp__num { font-size: var(--fs-body) !important; line-height: 1 !important; letter-spacing: 0.02em !important; font-weight: 500; padding-top: calc(var(--pp-t) * 0.06); }
.sx .pp__desc { grid-column: 7 / span 4 !important; padding-top: calc(var(--pp-t) * 0.06); margin: 0 !important; line-height: 1.35 !important; }
.pp__title { grid-column: 1 / span 6 !important; }
.pp__num { grid-column: 12 / span 1 !important; }
@media (hover: hover) {
  .pp__row { position: relative; }
  .pp__row::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--pad)); background: var(--ink); opacity: 0; transition: opacity var(--m-hover) var(--ease); z-index: 0; }
  .pp__row > * { position: relative; z-index: 1; transition: color var(--m-hover) var(--ease); }
  .pp__row:hover::before { opacity: 1; }
  .sx .pp__row:hover > * { color: var(--accent) !important; }
}
@media (max-width: 899px) {
  .pp__title { grid-column: 1 / span 10 !important; } .pp__num { grid-column: 11 / span 2 !important; justify-self: end; }
  .sx .pp__desc { grid-column: 1 / span 10 !important; grid-row: 2; padding-top: 0.6rem; }
}
.sx .pp__num { line-height: 1.35 !important; padding-top: calc(var(--pp-t) * 0.06); }
.sx .pp__bar span { margin: 0; font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.pp--contact .pp__cta-title .serif-word { font-family: var(--font-accent); font-style: italic; font-weight: 600; letter-spacing: -0.03em; text-transform: none; }
/* Netzwerk-Portraets: gleicher Bildabstand wie alle Bildraster */
main:has(#about-title) .kollektiv__list { column-gap: var(--img-gap) !important; }
/* PASS27:END */
.pp--contact .pp__cta-title, .pp--contact .pp__foot { text-align: left !important; }

/* PASS28  About Behind the Scenes: kleiner, mehr Bilder pro Reihe (3-5), echte
   Formate ohne Beschnitt, Reihen gleich hoch und randbuendig (justified per
   Flexbox: flex-grow = Seitenverhaeltnis). Abstand = --img-gap wie ueberall. */
main:has(#about-title) .about-bts__grid {
  display: flex !important; flex-wrap: wrap; gap: var(--img-gap) !important; grid-template-columns: none !important;
  --bts-row: clamp(11rem, 18vw, 17rem);
}
main:has(#about-title) .about-bts__grid::after { content: ''; flex: 999 1 0; } /* letzte Reihe nicht aufblasen */
main:has(#about-title) .about-bts__grid .about-bts__item,
main:has(#about-title) .about-bts__grid .about-bts__item:nth-child(n),
main:has(#about-title) .about-bts__grid .about-bts__item[data-tile]:nth-child(n) {
  grid-column: auto !important; margin: 0 !important; position: relative;
  flex: calc(var(--bts-ar, 1.5) * 100) 1 calc(var(--bts-ar, 1.5) * var(--bts-row));
  aspect-ratio: var(--bts-ar, 1.5) !important; height: auto !important; min-height: 0 !important;
}
main:has(#about-title) .about-bts__grid .about-bts__open { position: absolute !important; inset: 0 !important; display: block; }
main:has(#about-title) .about-bts__grid img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; }
@media (max-width: 599px) { main:has(#about-title) .about-bts__grid { --bts-row: 8.5rem; } }
/* PASS28:SHOP  Lua: Bilder kleiner, ein drittes Produkt kommt. Drei Spalten,
   gleicher Bildabstand; mit 2 Produkten bleibt die dritte Spalte frei. */
.shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 899px) { .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 599px) { .shop__grid { grid-template-columns: 1fr !important; } }
/* PASS28:PP-HOVER  Lua: Charcoal-Balken "weird". Wie bei den Leistungszeilen
   reagiert nur die Nummer (auf Orange: weiss). */
.pp__row::before { content: none !important; }
.sx .pp__row:hover > * { color: var(--ink) !important; }
.sx .pp__row:hover > .pp__num { color: #fff !important; }
/* Einzelne Bilder in einer Reihe nicht riesig aufblasen */
main:has(#about-title) .about-bts__grid .about-bts__item:nth-child(n) { max-width: calc(var(--bts-ar, 1.5) * var(--bts-row) * 1.9); }
/* Enge Bildfugen: Text unter Karten haelt Abstand zur Nachbarkarte */
:is(.product-card__info, .card__info) { padding-right: clamp(0.75rem, 1.5vw, 1.25rem) !important; }
/* /work-Liste: Pfeil drehte doppelt (Span + Glyphe) und zeigte nach unten. Nur die Glyphe dreht: ↗ -> → */
.work-list .work-list__link .work-list__arrow,
.work-list .work-list__link:is(:hover, :focus-visible) .work-list__arrow { transform: none !important; }
.work-list .work-list__link:is(:hover, :focus-visible) .work-list__arrow::after { transform: translateX(0.12em) rotate(45deg) !important; }
@media (max-width: 599px) {
  main:has(#about-title) .about-bts__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main:has(#about-title) .about-bts__grid::after { content: none; }
  main:has(#about-title) .about-bts__grid .about-bts__item:nth-child(n) { max-width: none; aspect-ratio: 4 / 5 !important; flex: none; }
}
/* PASS28:END */
@media (max-width: 599px) {
  main:has(#about-title) .about-bts__grid .about-bts__item[data-tile]:nth-child(n),
  main:has(#about-title) .about-bts__grid .about-bts__item:nth-child(n) { aspect-ratio: 4 / 5 !important; max-width: none !important; flex: none !important; width: auto !important; }
}

/* ==========================================================================
   PASS29:BUTTONS  EIN Knopf-System, gilt ueber allem was davor steht.
   Lua 16.10.2026: "nicht einheitlich, strenger beim CI".
   1 Primaer (verkaufen): Orange gefuellt, Schrift Charcoal.
     Auf Orange: Charcoal gefuellt, Schrift Weiss.
     Hover aendert KEINE Farbe, nur der Pfeil dreht (↗ -> →).
   2 Standard (Wege): Kontur + Schrift in der Schriftfarbe der Flaeche.
     Hover: Orange gefuellt, Schrift Charcoal.
   3 Next Shot: Charcoal/Gelb, Hover ohne Farbwechsel.
   Keine Fuell-Animationen (::before) mehr, keine weissen Konturen.
   ========================================================================== */
html :is(.btn, .hero__cta, .product-hero__btn, .pg-cta__btn, .contact-form__submit, .product-card__buy, .project-cta__link)::before { display: none !important; }

html :is(.btn--primary, .hero__cta, .product-hero__btn, .pg-cta__btn, .contact-form__submit, .product-card__buy),
html :is(.btn--primary, .hero__cta, .product-hero__btn, .pg-cta__btn, .contact-form__submit, .product-card__buy):is(:hover, :focus-visible, :active) {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important;
}
html :is(.sx--orange, .process-poster) .btn--primary,
html :is(.sx--orange, .process-poster) .btn--primary:is(:hover, :focus-visible, :active) {
  background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important;
}

html .btn--secondary { background: transparent !important; border-color: var(--white) !important; color: var(--white) !important; }
html .sx .btn--secondary { border-color: var(--sx-ink) !important; color: var(--sx-ink) !important; }
@media (hover: hover) {
  html .btn--secondary:is(:hover, :focus-visible), html .sx .btn--secondary:is(:hover, :focus-visible) {
    background: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important;
  }
}

html .podcast--brand .btn--primary, html .podcast--brand .btn--primary:is(:hover, :focus-visible, :active) { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--nextshot) !important; }
html .podcast--brand .btn--secondary, html .podcast--brand .btn--secondary:is(:hover, :focus-visible, :active) { background: transparent !important; border-color: var(--ink) !important; color: var(--ink) !important; }

html :is(.btn, .hero__cta, .product-hero__btn, .pg-cta__btn, .contact-form__submit, .product-card__buy) :is(span, svg) { color: inherit !important; }
html :is(.btn, .hero__cta, .product-hero__btn, .pg-cta__btn, .contact-form__submit, .product-card__buy) { border-width: var(--hair) !important; border-style: solid !important; transition: background-color var(--m-hover) var(--ease), color var(--m-hover) var(--ease), border-color var(--m-hover) var(--ease) !important; }
/* PASS29:BUTTONS:END */
/* BTS About: Reihen zu 3, randbuendig (JS setzt Umbrueche) */
@media (min-width: 600px) {
  main:has(#about-title) .about-bts__grid.has-rows::after { content: none; }
  main:has(#about-title) .about-bts__grid.has-rows .about-bts__item:nth-child(n) { flex: var(--bts-ar, 1.5) 1 0 !important; max-width: none !important; }
  main:has(#about-title) .about-bts__grid .bts-break { flex: 0 0 100%; height: 0; margin-bottom: calc(-1 * var(--img-gap)); }
}
@media (max-width: 599px) { main:has(#about-title) .about-bts__grid .bts-break { display: none; } }
/* PASS29:CAPS  Kepler-Wort in Versalien-Titeln auf Geist-Versalhoehe:
   Geist Cap 0.710 em, Kepler Cap 0.633 em -> Faktor 1.12, gleiche Grundlinie. */
html[data-titles="caps"] :is(h1, .page-hero__title, .hero__name) .hl-accent,
html[data-titles="caps"] main > .page-hero .page-hero__title .hl-accent,
html[data-titles="caps"] main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__title .hl-accent {
  font-size: 1.12em !important; line-height: 0 !important; letter-spacing: -0.035em !important;
}

/* PASS30  Services: vorhandene Texte zurueck (ruhige Spalte rechts unter dem Titel).
   Prozess-Poster stiller (Lua: "zu viel, nicht arthouse"): Nummer klein vorne,
   Titel 28.4, Text in fester Spalte, feine Linien, viel Luft. */
.svc-type--page .svc-type__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); }
.svc-type--page .svc-type__title { grid-column: 1 / -1; }
.sx .svc-type--page .svc-type__desc, .svc-type--page .svc-type__desc { grid-column: 8 / span 5; margin: 1rem 0 0.4rem; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); max-width: 34em; }
@media (max-width: 767px) { .sx .svc-type--page .svc-type__desc, .svc-type--page .svc-type__desc { grid-column: 1 / -1; } }

.process-poster { --pp-t: 1.7778rem; }
.pp__row { padding: 1.1rem 0 1.3rem !important; border-bottom-color: rgba(22, 22, 22, 0.35) !important; }
.sx .pp__bar { border-bottom: 0 !important; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.pp__num { grid-column: 1 / span 1 !important; grid-row: 1; justify-self: start !important; }
.pp__title { grid-column: 2 / span 5 !important; grid-row: 1; }
.sx .pp__title { line-height: 1 !important; letter-spacing: -0.035em !important; }
.sx .pp__desc { grid-column: 8 / span 4 !important; grid-row: 1; padding-top: 0.2em !important; }
.sx .pp__num { padding-top: 0.35em !important; }
.pp__list { border-top: var(--hair) solid rgba(22, 22, 22, 0.35); }
.pp__foot { margin-top: var(--section); }
@media (max-width: 899px) {
  .pp__num { grid-column: 1 / span 2 !important; } .pp__title { grid-column: 3 / -1 !important; }
  .sx .pp__desc { grid-column: 3 / -1 !important; grid-row: 2; padding-top: 0.5rem !important; }
}
/* PASS30:END */
/* Markieren in grossen Titeln: keine Kaesten (Kepler-Wort hat andere Hoehe), nur Schrift orange */
:is(h1, h2, .svc-type__title, .pp__title, .pp__cta-title) ::selection,
:is(h1, h2, .svc-type__title, .pp__title, .pp__cta-title)::selection { background: transparent; color: var(--accent); }
.sx--orange :is(h1, h2) ::selection, .process-poster :is(h2, .pp__title, .pp__cta-title) ::selection,
.process-poster :is(.pp__title, .pp__cta-title)::selection { color: #fff; }

/* PASS31  Hero heller, Verlauf oben und unten weicher (Lua 16.10.).
   Viele Stufen (ease-out-Kurve), damit keine Kante sichtbar ist. */
.hero__overlay {
  background: linear-gradient(to top,
    rgba(22,22,22,0.62) 0%, rgba(22,22,22,0.55) 8%, rgba(22,22,22,0.46) 16%, rgba(22,22,22,0.37) 24%,
    rgba(22,22,22,0.28) 32%, rgba(22,22,22,0.20) 40%, rgba(22,22,22,0.13) 48%, rgba(22,22,22,0.07) 56%,
    rgba(22,22,22,0.03) 64%, rgba(22,22,22,0) 72%) !important;
}
.site-header--overlay::before {
  height: calc(100% + 96px) !important;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.18) 20%, rgba(0,0,0,0.13) 40%, rgba(0,0,0,0.08) 60%,
    rgba(0,0,0,0.04) 78%, rgba(0,0,0,0.01) 92%, rgba(0,0,0,0) 100%) !important;
}

/* PASS32  Burger-Menue bis 1100 px (Lua: kommt auf schmalen Desktops zu spaet) */
@media (max-width: 1100px) {
  .nav__links { display: none !important; }
  .menu-trigger { display: block !important; margin-left: var(--space-3); }
  .theme-toggle { margin-left: auto !important; }
}
/* Markieren ueberall gleich: keine Kaesten (Kepler-Woerter haben andere
   Hoehen), nur die Schrift wird orange. Auf Orange: weiss. */
::selection { background: transparent; color: var(--accent); }
:is(.sx--orange, .process-poster, .podcast--brand) ::selection { color: #fff; }

/* ==========================================================================
   PASS33  Luas Wahl aus dem Varianten-Tool
   K5 Kontakt: Orange, Charcoal, ein riesiges Wort laeuft rechts aus dem Bild.
   S3 7 Short Films: Filmstreifen mit Pfeilen, Zaehler, Titel, Wischen.
   ========================================================================== */
.contact-k5 {
  position: relative; overflow: hidden; background: var(--accent) !important; color: var(--ink);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--section) 0 clamp(1.5rem, 3vw, 2.5rem) !important; margin: 0 !important; max-width: none !important; text-align: left !important;
}
.contact-k5__word { margin: 0 0 0 calc(var(--pad) - 0.06em); white-space: nowrap; font-size: clamp(8rem, 2rem + 30vw, 34rem) !important; font-weight: 500; line-height: 0.82; letter-spacing: -0.06em; text-transform: uppercase; }
.contact-k5__word a { color: var(--ink) !important; text-decoration: none; }
.contact-k5__word .serif-word { font-family: var(--font-accent); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: -0.04em; }
.contact-k5__foot { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; border-top: var(--hair) solid var(--ink); padding-top: 1.25rem; }
.contact-k5__foot p { margin: 0; font-size: var(--fs-lead); font-weight: 500; max-width: 18em; color: var(--ink); }
.contact-k5 .btn--primary, .contact-k5 .btn--primary:is(:hover, :focus-visible, :active) { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.contact-k5 ::selection { color: #fff; }

/* S3 Filmstreifen */
.sf-strip { padding-block: var(--section) !important; }
.sf-strip__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sf-strip__title { margin: 0; font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
.sf-strip__nav { display: flex; align-items: center; gap: 0.6rem; }
.sf-strip__count { font-size: var(--fs-body); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 0.75rem; }
.sf-strip__btn { width: 3rem; height: 3rem; border-radius: 50%; border: var(--hair) solid var(--white); background: transparent; color: var(--white); font: 500 1.2rem/1 var(--font); cursor: pointer; transition: background-color var(--m-hover) var(--ease), color var(--m-hover) var(--ease), border-color var(--m-hover) var(--ease); }
.sf-strip__btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.sf-strip__btn:disabled { opacity: 0.3; cursor: default; }
.sf-strip .sf-grid {
  display: flex !important; gap: var(--img-gap) !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 var(--pad); scroll-padding-left: var(--pad); scrollbar-width: none; cursor: grab;
}
.sf-strip .sf-grid::-webkit-scrollbar { display: none; }
.sf-strip .sf-grid.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.sf-strip .sf-grid > * { flex: 0 0 clamp(16rem, 26vw, 26rem); scroll-snap-align: start; }
.sf-strip .sf-film { background: transparent !important; overflow: visible !important; text-decoration: none; color: var(--white); }
.sf-strip .sf-film img { aspect-ratio: 3 / 4; }
.sf-strip .sf-film:hover img { transform: none !important; }
.sf-strip__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; font-size: var(--fs-body); font-weight: 500; }
.sf-strip__cap span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.sf-strip .sf-film:hover .sf-strip__cap span:last-child { color: var(--accent); }
.sf-strip .sf-all { aspect-ratio: 3 / 4; align-self: start; }
@media (max-width: 599px) { .sf-strip .sf-grid > * { flex-basis: 72vw; } .sf-strip__count { display: none; } }
/* PASS33:END */
/* Services: Text per Klick, buendig mit dem Titel (nach der Nummer), weich auf/zu */
.svc-type__toggle { all: unset; display: block; width: 100%; cursor: pointer; }
.svc-type__toggle:focus-visible { outline: var(--hair) solid var(--ink); outline-offset: 4px; }
.svc-type--page .svc-type__panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--m-close) var(--ease-out); }
.svc-type--page .is-open .svc-type__panel { grid-template-rows: 1fr; transition-duration: var(--m-open); }
.svc-type--page .svc-type__panel > p { overflow: hidden; min-height: 0; }
.sx .svc-type--page .svc-type__desc, .svc-type--page .svc-type__desc {
  grid-column: auto !important; margin: 0 !important; padding: 0.9rem 0 0.6rem var(--svc-num-w, 0);
  max-width: 40em; font-size: var(--fs-lead, 1.333rem) !important; line-height: 1.4 !important;
}
.svc-type--page .svc-type__title { font-variant-numeric: tabular-nums; }
.svc-type--page .svc-type__item.is-open .svc-type__num { color: var(--accent) !important; }
@media (max-width: 767px) { .sx .svc-type--page .svc-type__desc { padding-left: 0; font-size: var(--fs-body) !important; } }
.contact-k5 { border-image: none !important; align-items: stretch !important; }
.contact-k5__word { align-self: flex-start; }
@media (min-width: 900px) and (min-height: 620px) { .hero--video ~ .contact-k5 { border-image: none !important; } }
/* Services-Panel: zu = wirklich null Hoehe (Abstand als Margin, Panel schneidet) */
.svc-type--page .svc-type__panel { overflow: hidden; }
.sx .svc-type--page .svc-type__desc, .svc-type--page .svc-type__desc { padding: 0 0 0 var(--svc-num-w, 0) !important; margin: 0.9rem 0 0.6rem !important; }
.sf-strip__cap { display: none !important; } /* Lua: Titel steht schon auf dem Poster */

/* PASS34  Luas Wahl: A1 Laufband (stoppt nie), B6 leichtes Filmkorn auf Farbflaechen */
.contact-k5__band { display: block; overflow: hidden; color: var(--ink); text-decoration: none; }
.contact-k5__track { display: flex; width: max-content; animation: k5band 24s linear infinite; }
.contact-k5__track .contact-k5__word { margin: 0 !important; padding-right: 0.3em; display: block; }
@keyframes k5band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .contact-k5__track { animation: none; } }

:is(.sx, .contact-k5, .process-poster, .podcast--brand) { isolation: isolate; }
:is(.sx, .contact-k5, .process-poster)::after {
  content: ''; position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: lhGrain 0.6s steps(4) infinite;
}
:is(.sx, .contact-k5, .process-poster) { position: relative; overflow: hidden; }
@keyframes lhGrain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } 100% { transform: translate(1%,3%); } }
@media (prefers-reduced-motion: reduce) { :is(.sx, .contact-k5, .process-poster)::after { animation: none; } }
.contact-k5__band { margin-block: auto; }
/* PASS35  LET'S TALK. statisch, alles Versalien, randbuendig (JS passt Groesse an) */
.contact-k5__track { animation: none !important; width: auto !important; display: block !important; }
.contact-k5__band { padding: 0 var(--pad); }
.contact-k5__track .contact-k5__word { display: inline-block !important; padding: 0 !important; white-space: nowrap; line-height: 0.8 !important; }
.contact-k5__word .serif-word { text-transform: uppercase !important; letter-spacing: -0.03em !important; }
/* Footer orange (Studio): Trennlinie zur orangen Kontaktflaeche */
.contact-k5 + * , main:has(> .contact-k5:last-child) + .site-footer { border-top: var(--hair) solid var(--ink); }
/* PASS36  Kontaktflaeche weiss, Footer ist die orange Flaeche (Lua 16.10.) */
.contact-k5 { background: var(--bg) !important; color: var(--ink); }
.contact-k5::after { content: none !important; }
.contact-k5 .btn--primary, .contact-k5 .btn--primary:is(:hover, :focus-visible, :active) { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important; }
.contact-k5 ::selection { color: var(--accent); }
main:has(> .contact-k5:last-child) + .site-footer { border-top: 0 !important; }
/* PASS37  Kontakt ohne tote Fusszeile: Satz -> grosses Wort -> Knopf, ein Block */
.contact-k5 { min-height: 0 !important; justify-content: center !important; gap: clamp(1.25rem, 2.5vw, 2rem); padding-block: var(--section) !important; }
.contact-k5__band { margin-block: 0 !important; }
.contact-k5__lead { margin: 0 auto; width: 100%; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.contact-k5__act { margin: 0 auto; width: 100%; padding-top: clamp(0.5rem, 1.5vw, 1.25rem); }
.contact-k5 .btn--primary { font-size: 1.1rem !important; padding: 1rem 1.6rem !important; }
/* Fix: 1.12em nur fuer echte Kepler-Woerter, "MY WORK" ist ganz Geist */
html[data-titles="caps"] main :is(h1, .page-hero__title) .hl-accent--signal { font-size: 1em !important; font-family: var(--font) !important; font-style: normal !important; letter-spacing: inherit !important; }
html[data-titles="caps"] main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__title .hl-accent.hl-accent--signal { font-size: 1em !important; }

/* PASS38  Services: Prozess auf Stone statt Orange (Lua: zu viel Orange
   uebereinander mit dem orangen Footer). Stone = Typo-Listen, wie oben. */
.process-poster:not(.pp--contact) { --sx-bg: var(--stone) !important; background: var(--stone) !important; }
.process-poster:not(.pp--contact) .btn--primary,
.process-poster:not(.pp--contact) .btn--primary:is(:hover, :focus-visible, :active) { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--ink) !important; }
.process-poster:not(.pp--contact) .pp__row:hover > .pp__num { color: var(--accent) !important; }
.process-poster:not(.pp--contact) ::selection { color: var(--accent); }
main:is(:has(#work-title), :has(#services-title), :has(#about-title), :has(#contact-title)) > .page-hero .page-hero__sub { display: none !important; } /* Lua 16.10.: Titel steht allein */
/* Hover-Video: harter Wechsel ohne Blende, Standbild nicht abdunkeln */
.card__video { transition: none !important; }
.card:hover .card__img { filter: none !important; }
/* Markieren: wieder Standard mit Flaeche (Lua 16.10.) */
::selection, :is(h1, h2, .svc-type__title, .pp__title, .pp__cta-title) ::selection, :is(h1, h2, .svc-type__title, .pp__title, .pp__cta-title)::selection,
.contact-k5 ::selection, .process-poster ::selection, .process-poster:not(.pp--contact) ::selection { background: var(--accent); color: var(--ink); }
:is(.sx--orange, .podcast--brand, .site-footer) ::selection { background: var(--ink); color: #fff; }
/* Services: Leistungen + Prozess = eine graue Flaeche */
.svc-type--page + .process-poster { min-height: 0 !important; padding-top: 0 !important; }
.svc-type--page:has(+ .process-poster) { min-height: 0 !important; padding-bottom: var(--section) !important; }
.svc-type--page + .process-poster .pp__bar { padding-top: var(--section); }

/* PASS39  Leistungen: eine Zeile pro Leistung, einheitliche Groesse (JS --svc-fs),
   kein leerer Raum mobil; aufgeklappter Text ruhiger. */
.svc-type__title, .svc-type .svc-type__title { font-size: var(--svc-fs, 4rem) !important; white-space: nowrap; line-height: 0.92 !important; }
.svc-type { min-height: 0 !important; }
@media (max-width: 767px) { .svc-type { padding-block: clamp(3rem, 12vw, 4.5rem) !important; } }
.sx .svc-type--page .svc-type__desc, .svc-type--page .svc-type__desc {
  font-size: var(--fs-body) !important; line-height: 1.55 !important; max-width: 34em; color: rgba(22, 22, 22, 0.8) !important;
  margin: 1.1rem 0 1.4rem !important;
}
@media (max-width: 767px) { .svc-type__title, .svc-type .svc-type__title { font-size: 11vw !important; white-space: normal; } }

/* ==========================================================================
   PASS40  Lua 16.10. Abend
   ========================================================================== */
/* Kein Korn mehr (Ladezeit) */
:is(.sx, .contact-k5, .process-poster)::after { content: none !important; animation: none !important; }
/* Keine Trennlinien zwischen Abschnitten und zum Footer */
main > *, .site-footer { border-top: 0 !important; border-bottom: 0 !important; }
.site-footer { padding-top: var(--section) !important; }
/* BTS-Reihen: Reihenabstand = Spaltenabstand */
main:has(#about-title) .about-bts__grid.has-rows { row-gap: 0 !important; }
main:has(#about-title) .about-bts__grid .bts-break { height: var(--img-gap) !important; margin: 0 !important; }

/* PASS40:PROC  Prozess orange, grosse Zeilen wie die Leistungen, der Schritt
   in der Bildschirmmitte ist aktiv (voll Charcoal, Nummer weiss), Zaehler
   oben rechts laeuft mit. Danach FAQ weiss, dann Footer. */
.proc { background: var(--accent); color: var(--ink); padding-block: var(--section); }
.proc__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.proc__heading { margin: 0; font-size: var(--fs-page); font-weight: 500; line-height: 0.86; letter-spacing: -0.055em; text-transform: uppercase; color: var(--ink); }
.proc__count { font-size: var(--fs-lead); font-weight: 500; font-variant-numeric: tabular-nums; padding-bottom: 0.4em; }
.proc__count b { font-weight: 500; color: #fff; }
.proc__list { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--ink); }
.proc__row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: baseline;
  padding: clamp(0.8rem, 1.5vw, 1.2rem) 0; border-bottom: var(--hair) solid var(--ink);
  color: rgba(22, 22, 22, 0.42); transition: color var(--m-move) var(--ease-out);
}
.proc__num { grid-column: 1 / span 1; font-size: var(--fs-lead); font-weight: 500; font-variant-numeric: tabular-nums; transition: color var(--m-move) var(--ease-out); }
.proc__title { grid-column: 2 / span 6; font-size: clamp(2.3704rem, 0.8rem + 4.2vw, 5.6187rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; text-transform: uppercase; }
.proc__desc { grid-column: 9 / span 4; font-size: var(--fs-body); line-height: 1.5; }
.proc__row.is-now { color: var(--ink); }
.proc__row.is-now .proc__num { color: #fff; }
.proc__cta { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-top: var(--section); }
.proc__cta p { margin: 0; font-size: clamp(2.3704rem, 1rem + 3.4vw, 4.2088rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; max-width: 14em; }
.proc__cta .serif-word { font-family: var(--font-accent); font-style: italic; font-weight: 600; letter-spacing: -0.03em; }
.proc .btn--primary, .proc .btn--primary:is(:hover, :focus-visible, :active) { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.proc ::selection { background: var(--ink); color: #fff; }
@media (max-width: 899px) {
  .proc__num { grid-column: 1 / span 2; } .proc__title { grid-column: 3 / -1; }
  .proc__desc { grid-column: 3 / -1; margin-top: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { .proc__row { color: var(--ink); } }

/* Leistungen: Desktop oeffnet beim Hover, Text rechts, etwas mehr Luft */
@media (min-width: 900px) {
  .svc-type--page .svc-type__item { position: relative; }
  .svc-type--page .svc-type__panel { grid-column: 7 / -1 !important; }
  .sx .svc-type--page .svc-type__desc, .svc-type--page .svc-type__desc { padding-left: 0 !important; margin: 1.4rem 0 2rem !important; max-width: 32em; }
}

/* PASS40:NS  Next Shot ohne Gelb: kleines Cover, Titel, Links, zwei Folgen.
   YouTube laedt erst beim Klick (youtube-nocookie). */
.podcast--clean { padding-block: var(--section); background: var(--bg); }
.ns__head { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ns__cover { width: clamp(4.5rem, 7vw, 6.5rem); height: auto; display: block; }
.ns__title { margin: 0; font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; color: var(--white); }
.ns__tagline { margin: 0.4rem 0 0; font-size: var(--fs-body); color: var(--muted); }
.ns__tagline a { color: inherit !important; }
.ns__links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ns__eps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--img-gap); }
@media (max-width: 899px) { .ns__head { grid-template-columns: auto 1fr; } .ns__links { grid-column: 1 / -1; } .ns__eps { grid-template-columns: 1fr; row-gap: 2rem; } }
.yt-ep { all: unset; display: block; cursor: pointer; color: var(--white); }
.yt-ep__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #161616; }
.yt-ep__media img, .yt-ep__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt-ep__play { position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; border-radius: 50%; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; padding-left: 0.2rem; box-sizing: border-box; transition: transform var(--m-move) var(--ease-out); }
.yt-ep:hover .yt-ep__play, .yt-ep:focus-visible .yt-ep__play { transform: scale(1.08); }
.yt-ep:focus-visible { outline: var(--hair) solid var(--accent); outline-offset: 4px; }
.yt-ep__meta { display: flex; justify-content: space-between; margin-top: 0.8rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.yt-ep__title { display: block; margin-top: 0.35rem; font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.yt-ep.is-playing { cursor: default; }
/* 7 Short Films: Podcastfolge */
.sf-pod { padding-block: var(--section); }
.sf-pod__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sf-pod__title { margin: 0; font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; }
.sf-pod__sub { margin: 0; font-size: var(--fs-body); color: var(--muted); max-width: 26em; }
.sf-pod .yt-ep { max-width: none; }
.yt-ep { width: 100%; box-sizing: border-box; }
.yt-ep__play { left: 1rem; top: auto; bottom: 1rem; margin: 0; width: 3.2rem; height: 3.2rem; font-size: 0.95rem; }
/* Netzwerk: ganzes Portraet ist der Link zur Website der Person */
.kollektiv__person { position: relative; }
.kollektiv__person a.kollektiv__name::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.kollektiv__person:has(a.kollektiv__name) { cursor: pointer; }

/* ==========================================================================
   PASS41  Lua 16.10. Abend
   ========================================================================== */
/* Services: Text + Stichworte in einer Klappe; Stichworte in Kepler (Akzent) */
.svc-type--page .svc-type__panel > .svc-type__inner { overflow: hidden; min-height: 0; }
.svc-type--page .svc-type__inner > .svc-type__desc { margin-bottom: 0.9rem !important; }
.svc-type__kw { margin: 0 0 2rem; font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: clamp(1.3333rem, 1rem + 0.9vw, 1.7778rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }

/* Kepler als ruhiger Akzent: kleine Labels in Kepler kursiv Versalien (wie KiwiSchulz) */
.footer__label, .project-body__label, .project-body__text::before, .proc__heading + *, .sf-pod__sub {
  font-family: var(--font-accent) !important; font-style: italic !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.02em !important;
}
.footer__label { font-size: 1rem !important; }
.project-body__label, .project-body__text::before { font-size: var(--fs-lead) !important; color: var(--white) !important; }
.sf-pod__sub { text-transform: none !important; font-size: var(--fs-lead) !important; color: var(--white) !important; letter-spacing: -0.01em !important; }
.statement__text .serif-word { font-family: var(--font-accent); font-style: italic; font-weight: 600; letter-spacing: -0.03em; }

/* Bilder: beim Hover schwarz-weiss, ganz leichter Verlauf von unten */
:is(.about-bts__item, .sf-tile, .bleed__media) { position: relative; }
:is(.about-bts__item, .sf-tile)::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0) 35%); }
:is(.about-bts__item, .sf-tile) :is(img, video) { transition: filter var(--m-move) var(--ease-out); }
@media (hover: hover) { :is(.about-bts__item, .sf-tile):hover :is(img, video) { filter: grayscale(1); } }

/* Lightbox weiss, kein Blur */
.lightbox, .lightbox[open] { background: #fff !important; color: var(--ink) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.lightbox::backdrop { background: #fff !important; backdrop-filter: none !important; }
.lightbox__btn { color: var(--ink) !important; }
.lightbox__btn:hover { color: var(--accent) !important; }
.lightbox__count { color: var(--muted) !important; }
/* Kein Blur: Film-Overlay (7 Short Films) weiss wie die Lightbox, Player ohne Blur-Buehne */
.sf-player { background: #fff !important; }
.sf-player__bg { display: none !important; }
.sf-player__bar, .sf-player :is(.sf-player__close, .sf-player__nav, .sf-player__title) { color: var(--ink) !important; }
.lh-backdrop { filter: none !important; display: none !important; }

/* PASS41:PROJECT-HEAD  Titel links, Einstieg rechts in Kepler, Meta-Zeile darunter */
.project-hero__head { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: start; }
.project-hero__head .project-hero__cat { display: none !important; }
.project-hero__head .project-hero__title { grid-column: 1 / span 7; margin: 0 !important; }
.project-hero__lead {
  grid-column: 9 / span 4; margin: 0.4em 0 0; font-family: var(--font-accent); font-style: italic; font-weight: 600;
  font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.3333rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--white);
}
.project-body__text .project-hero__desc.is-moved { display: none !important; }
.project-hero__meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); margin-top: clamp(2.5rem, 6vw, 5rem); }
.project-hero__meta > div { grid-column: span 4; display: flex; flex-direction: column; gap: 0.3rem; }
.project-hero__meta > div:nth-child(2) { grid-column: 9 / span 4; }
.project-hero__meta-label { font-family: var(--font-accent); font-style: italic; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; color: var(--muted); }
.project-hero__meta-val { font-size: var(--fs-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; color: var(--white); }
@media (max-width: 899px) {
  .project-hero__head .project-hero__title, .project-hero__lead { grid-column: 1 / -1; }
  .project-hero__lead { margin-top: 1.5rem; }
  .project-hero__meta > div, .project-hero__meta > div:nth-child(2) { grid-column: span 6; }
}
/* Credits in Kepler-Labels wie Referenz: Rolle kursiv */
.credit-person__role { font-family: var(--font-accent) !important; font-style: italic !important; font-weight: 600 !important; letter-spacing: 0 !important; font-size: 0.95rem !important; }
/* PASS41:QUOTE  7 Short Films: Zahlen + Zitat als bildschirmhohe Glacier-Flaeche */
.sf-facts { background: var(--glacier); color: #fff; max-width: none !important; min-height: 100svh; display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding: var(--section) var(--pad) !important; text-align: center; }
.sf-facts .sf-quote { margin: 0 auto !important; max-width: 22em !important; font-size: clamp(1.7778rem, 0.8rem + 3.2vw, 4.2088rem) !important; font-weight: 500 !important; line-height: 1.02 !important; letter-spacing: -0.04em !important; text-transform: uppercase; color: #fff !important; font-family: var(--font) !important; font-style: normal !important; }
.sf-facts .sf-stats { border-top: 0 !important; padding: 0 !important; width: min(36rem, 100%); color: #fff; }
.sf-facts .sf-stats * { color: #fff !important; }
.sf-facts .sf-stat__label { opacity: 0.75; }
.sf-facts .sf-stat__num { font-family: var(--font) !important; font-weight: 500 !important; letter-spacing: -0.04em !important; }
/* Stichworte: ruhig wie eine Meta-Zeile statt grosser Kursivschrift */
.svc-type__kw { font-family: var(--font) !important; font-style: normal !important; font-weight: 500 !important; font-size: 0.8125rem !important; letter-spacing: 0.06em !important; text-transform: uppercase; line-height: 1.6 !important; color: rgba(22,22,22,0.7) !important; padding-top: 0.9rem; border-top: var(--hair) solid rgba(22,22,22,0.25); max-width: 32em; }
/* Lua: Meta-Zeile ueber dem Video raus, Credit-Rollen wieder Geist */
.project-hero__meta { display: none !important; }
.credit-person__role { font-family: var(--font) !important; font-style: normal !important; font-weight: 400 !important; font-size: 0.875rem !important; letter-spacing: 0 !important; color: var(--muted) !important; }
.project-body__text:not(:has(.project-hero__desc:not(.is-moved)))::before { content: none !important; } /* leeres "Details" ausblenden */

/* PASS42  Footer-Hover: auf Orange immer weiss (vorher verschwanden Links) */
.site-footer :is(a, button):is(:hover, :focus-visible) { color: #fff !important; }
.site-footer .footer__email:hover { color: #fff !important; }
/* Shop-Titel wie alle Seitentitel */
main:has(#shop-title) > .page-hero .page-hero__title { font-size: var(--fs-page) !important; line-height: 0.86 !important; letter-spacing: -0.055em !important; text-transform: uppercase; max-width: none !important; }
main:has(#shop-title) > .page-hero .page-hero__sub { display: none !important; }
/* 7 Short Films: 7 im Titel weiss wie der Rest, Podcast-Video kleiner */
.sf-hero .sf-hero__num { color: inherit !important; }
.sf-pod .yt-ep { max-width: 46rem !important; }
/* Mobil: nie Punkte vor den Nummern, Nummer inline wie Desktop */
.svc-type__num::before { content: none !important; display: none !important; }
@media (max-width: 767px) { .svc-type__num { display: inline !important; margin: 0 !important; font-size: 1em !important; letter-spacing: inherit !important; } }

/* ==========================================================================
   PASS43  ABSTANDSSYSTEM 1.333 (Perfect Fourth, Basis 16 px)
   s0 9 · s1 12 · s2 16 · s3 21.3 · s4 28.4 · s5 37.9 · s6 50.6 · s7 67.4 · s8 89.9 · s9 119.9
   Jeder Abstand der Website liegt auf einer dieser Stufen. Fliessende Werte
   (clamp) beginnen und enden immer auf einer Stufe. Uebersicht: /system
   ========================================================================== */
:root {
  --s0: 0.5625rem; --s1: 0.75rem; --s2: 1rem; --s3: 1.3333rem; --s4: 1.7778rem;
  --s5: 2.3704rem; --s6: 3.1605rem; --s7: 4.2140rem; --s8: 5.6187rem; --s9: 7.4915rem;
  --section: clamp(var(--s6), 1.6rem + 4.4vw, var(--s8)) !important;   /* 50.6 -> 89.9 */
  --section-sm: var(--section);
  --gap-grid: clamp(var(--s3), 1rem + 1vw, var(--s4));                /* 21.3 -> 28.4 */
  --img-gap: var(--s0);  --gap-img: var(--s0);  --pj-gap: var(--s0);  /* 9 */
  --card-pad: var(--s4);  --card-pad-lg: var(--s5);
  --space-1: 0.25rem; --space-2: var(--s0); --space-3: var(--s1); --space-4: var(--s2);
  --space-5: var(--s3); --space-6: var(--s3); --space-7: var(--s4); --space-8: var(--s4);
  --space-9: var(--s5); --space-10: var(--s5); --space-12: var(--s6);
}
main:has(.project-hero) { --pj-gap: var(--s0) !important; }

/* Prozess: mehr Luft unter dem Titel, "01 BRIEF" eine Groesse, Text gleich lang */
.proc__head { margin-bottom: var(--s7) !important; }
.proc__row { padding: var(--s3) 0 !important; align-items: center !important; color: rgba(22, 22, 22, 0.55); }
.proc__num { grid-column: 1 / span 1 !important; font-size: clamp(var(--s5), 0.8rem + 4.2vw, var(--s8)) !important; font-weight: 500; line-height: 0.92; letter-spacing: -0.05em; }
.proc__title { grid-column: 2 / span 6 !important; }
.proc__desc { grid-column: 9 / span 4 !important; font-size: var(--fs-body); }
.proc__row.is-now .proc__num { color: #fff !important; }
@media (max-width: 899px) {
  .proc__num { grid-column: 1 / span 3 !important; } .proc__title { grid-column: 4 / -1 !important; }
  .proc__desc { grid-column: 4 / -1 !important; margin-top: var(--s1); }
}
@media (min-width: 900px) { .proc__title { grid-column: 2 / span 8 !important; } .proc__desc { grid-column: 10 / span 3 !important; } }

/* PASS43:WALLPAPER */
.wp-hero { padding-top: calc(var(--header-h) + var(--s6)) !important; padding-bottom: var(--section); }
.wp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: center; margin-top: var(--s5); }
.wp-media { grid-column: 1 / span 6; margin: 0; } .wp-media img { width: 100%; height: auto; display: block; }
.wp-body { grid-column: 8 / span 5; }
.wp-eyebrow { margin: 0 0 var(--s2); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wp-title { margin: 0 0 var(--s3); font-size: clamp(var(--s6), 1rem + 4vw, var(--s8)); font-weight: 500; line-height: 0.95; letter-spacing: -0.045em; color: var(--white); }
.wp-title .serif-word { font-family: var(--font-accent); font-style: italic; font-weight: 600; letter-spacing: -0.03em; }
.wp-lead { margin: 0 0 var(--s5); font-size: var(--fs-lead); line-height: 1.4; color: var(--text); max-width: 26em; }
.wp-form { display: grid; gap: var(--s2); max-width: 30rem; }
.wp-label { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.wp-input { font: 400 var(--fs-lead) var(--font); color: var(--white); background: transparent; border: 0; border-bottom: var(--hair) solid var(--white); padding: var(--s1) 0; border-radius: 0; }
.wp-input:focus { outline: none; border-bottom-color: var(--accent); }
.wp-consent { display: flex; gap: var(--s1); align-items: flex-start; font-size: 0.875rem; line-height: 1.5; color: var(--muted); margin-top: var(--s1); }
.wp-consent input { margin-top: 0.2em; accent-color: #D95A0A; }
.wp-submit { justify-self: start; margin-top: var(--s2); }
.wp-msg { margin: 0; min-height: 1.5em; font-size: 0.9375rem; color: var(--white); }
.wp-msg a { color: var(--accent); }
.wp-form.is-sent :is(.wp-input, .wp-label, .wp-consent, .wp-submit) { display: none; }
.wp-more { padding-bottom: var(--section); }
.wp-more__title { margin: 0 0 var(--s5); font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; letter-spacing: -0.04em; text-transform: uppercase; }
.wp-more .shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 899px) { .wp-media, .wp-body { grid-column: 1 / -1; } .wp-body { margin-top: var(--s5); } .wp-more .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.wp-hero .back-link { display: inline-flex; }
/* /system (intern, noindex) */
.sys { padding-block: calc(var(--header-h) + var(--s6)) var(--section); }
.sys-h1 { margin: 0 0 var(--s3); font-size: var(--fs-page); font-weight: 500; line-height: .86; letter-spacing: -.055em; text-transform: uppercase; }
.sys-intro { margin: 0 0 var(--s8); max-width: 34em; font-size: var(--fs-lead); }
.sys-h2 { margin: var(--s8) 0 var(--s5); font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; letter-spacing: -.04em; text-transform: uppercase; }
.sys-row { display: grid; grid-template-columns: 3rem 8rem 4rem 1fr; gap: var(--s3); align-items: center; padding: var(--s1) 0; }
.sys-k, .sys-px { font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.sys-bar { display: block; height: var(--s1); background: var(--accent); }
.sys-use, .sys-cap { font-size: .875rem; color: var(--muted); }
.sys-type { display: grid; gap: var(--s1) 0; }
.sys-type .sys-cap { margin-bottom: var(--s5); }
.sys-sws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s0); }
.sys-sw { min-height: 10rem; padding: var(--s3); display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; font-size: .875rem; border: var(--hair) solid rgba(0,0,0,.08); }
.sys-sw b { font-size: var(--fs-lead); font-weight: 500; }
.sys-btns { display: flex; gap: var(--s2); margin-bottom: var(--s2); }
.sys-rules { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); font-size: var(--fs-body); }
@media (max-width: 767px) { .sys-sws { grid-template-columns: 1fr 1fr; } .sys-row { grid-template-columns: 2.5rem 5rem 3.5rem; } .sys-use { grid-column: 1 / -1; } }
/* 7 Short Films Podcast: Text links, Video rechts, ein Raster */
.sf-pod__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: end; }
.sf-pod__text { grid-column: 1 / span 4; padding-bottom: var(--s4); }
.sf-pod__title { margin: 0 0 var(--s3) !important; }
.sf-pod__sub { margin: 0 !important; max-width: 20em !important; }
.sf-pod__grid .yt-ep { grid-column: 6 / span 7; max-width: none !important; }
@media (max-width: 899px) { .sf-pod__text, .sf-pod__grid .yt-ep { grid-column: 1 / -1; } .sf-pod__text { padding-bottom: var(--s5); } }
/* 7 Short Films: jeder Abschnitt gleich viel Luft (s8 Desktop) */
main:has(#sf-title) > section:not(.sf-hero):not(.sf-facts) { padding-block: var(--section) !important; margin: 0 !important; }
main:has(#sf-title) .sf-bts .section-title { margin-bottom: var(--s5) !important; }
.is-magnetic { transform: none !important; }
.sf-pod :is(.yt-ep__meta, .yt-ep__title) { display: none !important; } /* Lua: zu viel, Titel steht im Bild */
.yt-ep__meta, .yt-ep__title { display: none !important; } /* Lua: Titel steht im Bild, Labels bringen nichts */

/* PASS17:KAUFBOX:START  Lua 17.10.2026: "Preise usw nicht einheitlich",
   "H1 overall ein bisschen kleiner". Alle Kaufboxen wie Film Core
   (Eyebrow = wo es laeuft, Titel + kleine Zeile, Preis 1.75rem), und die
   H1-Stufe eine Spur tiefer (vorher 42.7 -> 75.8px, jetzt 37 -> 66px). */
:root { --fs-h1: clamp(2.0556rem, 1.46rem + 2.75vw, 3.6667rem); }
.product-hero__price { font-size: 1.75rem; letter-spacing: -0.02em; margin: var(--space-6) 0 var(--space-5); }
/* H1 ueberall eine Spur kleiner (x0.88), jede Titelart gleich viel */
:root { --fs-page: calc(clamp(3.1605rem, 0.7rem + 10.3vw, 9.9887rem) * 0.88); }
.hero__name { --caps: 0.88; }
[data-titles="caps"] .hero__name { --caps: 0.7744; }
main .sf-hero__title { font-size: calc(clamp(3.25rem, 10vw, 9rem) * 0.88); }
main .wp-title { font-size: calc(clamp(var(--s6), 1rem + 4vw, var(--s8)) * 0.88); }
/* PASS17:KAUFBOX:END */

/* PASS34:HERO-GROSS:START  Lua 17.10.2026: auf dem 27-Zoll-Monitor wirkt
   "Films people want to watch" zu klein und zu tief. Ab 1600 px darf der
   Titel mitwachsen (Deckel 6rem -> 9rem) und steht etwas hoeher.
   Laptop bleibt unveraendert. Rueckbau: Block loeschen. */
@media (min-width: 1600px) {
  .hero__name,
  [data-titles="caps"] .hero__name { font-size: calc(min(4.6vw + 1rem, 13vh, 9rem) * var(--caps)); }
  .hero--video { padding-bottom: clamp(117px, 15vh, 240px); }
}
/* PASS34:HERO-GROSS:END */

/* I18N:LANG-SWITCH:START  17.10.2026  Sprachumschalter "EN / DE"
   Oben rechts neben dem Hell/Dunkel-Knopf, gleiche Schrift wie die Nav
   (Geist, Versalien, gesperrt). Aktive Sprache Charcoal, andere grau,
   Hover Orange. Keine Box, keine Flaggen. Echte Links auf die Gegenseite,
   erzeugt von studio/content/i18n.php. Im Burger-Bereich (bis 1100 px)
   steht er nur im Menue, sonst waere er bei offenem Menue doppelt. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.7778rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
}
.lang-switch__link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.lang-switch__link.is-active { color: var(--white); }
.lang-switch__link:hover,
.lang-switch__link:focus-visible { color: var(--accent-text); }
.lang-switch__sep { color: var(--muted); }

@media (min-width: 1101px) {
  .nav > .lang-switch,
  .nav > .theme-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav > .lang-switch { margin-right: calc(36px + clamp(1.25rem, 2vw, 2rem)); }
}
@media (max-width: 1100px) {
  .nav > .lang-switch { display: none; }
}

.site-header--overlay:not(.is-solid) .lang-switch__link,
.site-header--overlay:not(.is-solid) .lang-switch__sep { color: rgba(255, 255, 255, 0.62); }
.site-header--overlay:not(.is-solid) .lang-switch__link.is-active { color: #fff; }
.site-header--overlay:not(.is-solid) .lang-switch__link:hover { color: var(--accent-text); }

/* Im mobilen Menue: unter den vier Wegen, gleiche Schrift wie oben */
.lang-switch--menu {
  padding-top: var(--space-6);
  font-size: 0.875rem;
}
.lang-switch--menu .lang-switch__link { min-height: var(--tap); padding: 0; }
/* I18N:LANG-SWITCH:END */

/* ── PASS50:START (23.10.2026) ───────────────────────────────────────────
   Startseite: 7 Short Films als Filmstreifen wie auf /7-short-films
   (Pfeile + Zaehler, Poster gross, laeuft rechts aus dem Bild). */
.sx-strip__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; }
@media (min-width: 1400px) { .sx-strip__row { flex-wrap: nowrap; } }
.sx-strip__row > .btn { white-space: nowrap; flex-shrink: 0; }
.sx-strip__nav { display: flex; align-items: center; gap: var(--s1); flex-shrink: 0; }
.sx-strip__nav .sf-strip__count { margin-right: var(--s0); color: #fff; }
.sx--glacier .sf-strip__btn { border-color: rgba(255, 255, 255, 0.9); color: #fff; }
.sx--glacier .sf-strip__btn:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--glacier); }
.sx-strip { overflow: hidden; }
.sx--glacier .sx-films--strip {
  display: flex !important; gap: var(--img-gap) !important; margin: 0 !important;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 0 var(--pad) !important; scroll-padding-left: var(--pad); scrollbar-width: none; cursor: grab;
}
.sx-films--strip::-webkit-scrollbar { display: none; }
.sx-films--strip.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.sx-films--strip > li { flex: 0 0 clamp(14rem, 22vw, 24rem); scroll-snap-align: start; }
.sx-films--strip .sx-film { overflow: hidden; }
.sx-films--strip .sx-film img { display: block; user-select: none; -webkit-user-drag: none; transition: transform var(--m-move, 0.6s) var(--ease-out); }
@media (hover: hover) { .sx-films--strip .sx-film:hover img { transform: scale(1.025); } }
@media (max-width: 1100px) { .sx-films--strip > li { flex-basis: 34vw; } }
@media (max-width: 599px) {
  .sx-films--strip > li { flex-basis: 72vw; }
  .sx-strip__nav .sf-strip__count { display: none; }
}
/* Kopfzeile: Burger immer buendig rechts (vorher sass er zwischen 769 und
   1100 px in der Mittelspalte, seit der Hell/Dunkel-Knopf weg ist). */
.nav > .menu-trigger { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0 !important; }
@media (min-width: 1101px) { .nav > .lang-switch { margin-right: 0 !important; } }
/* Cookie-Hinweis so klein wie rechtlich sauber moeglich: kleine Karte unten
   links, Ablehnen gleich prominent wie Akzeptieren, Link zum Datenschutz,
   Einstellungen pro Kategorie bleiben ueber "Settings" erreichbar. */
.consent {
  left: var(--s2) !important; right: auto !important; bottom: var(--s2) !important; top: auto !important;
  width: min(23rem, calc(100vw - 2 * var(--s2))) !important; max-height: calc(100svh - 2 * var(--s2)) !important; overflow-y: auto;
  background: #fff !important; color: var(--ink, #161616); border: 0 !important; border-radius: 1rem;
  box-shadow: 0 0.5rem 2.5rem rgba(22, 22, 22, 0.16) !important; padding: 0 !important;
}
.consent .consent__inner { display: block !important; padding: var(--s3) !important; max-width: none !important; margin: 0 !important; }
.consent .consent__copy { max-width: none !important; }
.consent .consent__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; }
.consent .consent__text { margin: 0 !important; font-size: 0.8125rem !important; line-height: 1.45 !important; color: var(--ink, #161616) !important; }
.consent .consent__text a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }
.consent .consent__actions { display: flex !important; flex-wrap: wrap; gap: var(--s0) !important; margin-top: var(--s2) !important; padding: 0 !important; grid-template-columns: none !important; }
.consent .consent__btn { flex: 1 1 auto; width: auto !important; min-height: 2.25rem !important; padding: 0 0.9rem !important; font-size: 0.8125rem !important; border-radius: 999px !important; grid-column: auto !important; }
.consent--details .consent__cats { margin-top: var(--s2) !important; }
.consent .consent__btn:focus-visible { outline: 1.5px solid var(--ink, #161616) !important; outline-offset: 2px !important; }
/* Burger-Menue (Lua 23.10.): Nummern 01-05 getestet und wieder raus.
   Linien naeher an der Schrift. Pfeil gleich stark
   wie das Wort (gleicher Schnitt, kleinere Glyphe = gleiche Strichstaerke). */
.mobile-menu__nav { counter-reset: mm; }
.mobile-menu__link { counter-increment: mm; justify-content: flex-start !important; gap: 0 !important; padding-block: var(--s0) !important; line-height: 1 !important; }
.mobile-menu__link::after { margin-left: auto !important; font-weight: inherit !important; font-size: 0.82em !important; }
@media (hover: hover) { .mobile-menu__link:hover { padding-left: 0 !important; } }
.mobile-menu__link:active { padding-left: 0 !important; }
/* Alle Pfeil-Glyphen: Geist, gleicher Schnitt wie der Text daneben */
.lightbox__btn, .sf-strip__btn, .card__arrow { font-family: var(--font) !important; }
.btn--arrow::after, .sx__link::after, .product-card__buy::after { font-weight: inherit !important; }
/* Handy-Hero: Titel beginnt genau auf der unteren Drittellinie des Bildes
   (Kamera-Drittelregel), auf jedem Handy gleich, statt Abstand von unten. */
@media (max-width: 767px) {
  html .hero.hero--video { align-items: flex-start !important; padding-bottom: 0 !important; }
  html .hero--video .hero__content { margin-top: calc(100svh * 2 / 3) !important; padding-bottom: 0 !important; align-self: flex-start !important; }
}
/* 1.333-Raster (Liam): Abschnitts-Abstaende nur noch in festen Stufen statt
   fliessend. Desktop 90, Tablet/Handy 67. Seitenkoepfe ueberall gleich hoch. */
:root { --section: var(--s8) !important; --section-sm: var(--s8) !important; --hero-top: calc(var(--s9) + var(--s5)); }
@media (max-width: 1099px) { :root { --section: var(--s7) !important; --section-sm: var(--s7) !important; --hero-top: calc(var(--s8) + var(--s5)); } }
html body :is(main, #lh-spec) > .page-hero.page-hero { padding-top: var(--hero-top) !important; padding-bottom: var(--s7) !important; }
html body main > .project-hero.project-hero { padding-top: var(--hero-top) !important; padding-bottom: var(--s6) !important; }
main > .sf-hero { padding-top: var(--hero-top) !important; }
main > .product-hero, main > .pg-cta { padding-bottom: var(--section) !important; }
main > .pg-cta { padding-top: var(--section) !important; }
main > .product-back { padding-top: var(--s9) !important; }
@media (max-width: 1099px) { main > .product-back { padding-top: var(--s8) !important; } }
html body :is(main, #lh-spec) > .sx.sx { padding-block: var(--section) !important; }
/* Verspielt 1: Footer-Wortmarke, Buchstaben heben sich unter der Maus */
.fw-l { display: inline-block; transition: transform var(--m-move, 0.6s) var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fw-l:hover { transform: translateY(-0.08em); transition-duration: 0.25s; }
}
.footer__word { cursor: default; user-select: none; }
/* Easter Egg: Karte unten rechts */
.egg {
  position: fixed; right: var(--s3); bottom: var(--s3); z-index: 1000; width: min(17rem, calc(100vw - 2 * var(--s3)));
  padding: var(--s2); background: #fff; color: var(--ink, #161616); border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgba(22, 22, 22, 0.18);
  opacity: 0; transform: translateY(1.5rem) rotate(2deg); pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
.egg.is-on { opacity: 1; transform: none; pointer-events: auto; }
.egg__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.5rem; }
.egg__hi { margin: var(--s2) 0 var(--s0); font-size: var(--fs-lead, 1.333rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.egg__list { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
.egg__mail { display: inline-block; margin-top: var(--s1); font-size: 0.8125rem; color: var(--accent); text-decoration: none; }
.egg__x { position: absolute; top: calc(var(--s2) + var(--s0)); right: calc(var(--s2) + var(--s0)); width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ink, #161616); font: 400 1.4rem/1 var(--font); cursor: pointer; }
@media (max-width: 599px) { .egg { width: 13.5rem; right: var(--s2); bottom: var(--s2); } }
@media (prefers-reduced-motion: reduce) { .egg { transition: opacity 0.2s; transform: none; } }
.sx-films--strip.is-scrolllinked { scroll-snap-type: none !important; scroll-behavior: auto !important; }
/* PASS50:END */

/* ── PASS51:START (23.10.2026) Leistungsseiten ───────────────────────────
   /commercial-films (Rot), /brand-films (Pine), /social-campaigns (Glacier).
   Farbe = Leistung, genau eine Farbflaeche pro Seite (der Kopf), danach
   Weiss bis zum orangen Footer. Titel, Karten, FAQ aus dem bestehenden
   System, hier nur das, was neu ist. */
.svcp--red     { --svcp: var(--cinematic-red, #B62A24); }
.svcp--pine    { --svcp: var(--pine, #183D2D); }
.svcp--glacier { --svcp: var(--glacier, #567F99); }

/* Kopf = gleiches System wie der 7-Short-Films-Block der Startseite:
   Titel links, Satz + Knopf + Pfeile rechts, Projekte als Streifen unten. */
.svcp-hero {
  background: var(--svcp); color: #fff; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--section);
  padding: calc(var(--header-h, 4.5rem) + var(--section)) 0 var(--section);
}
.svcp-hero__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid, 1.5rem); row-gap: var(--s5); align-items: start; }
html .svcp .svcp-hero__title {
  grid-column: 1 / span 7; margin: 0; color: #fff;
  font-size: clamp(2.3704rem, 1rem + 3.4vw, 4.2088rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase;
}
html .svcp .svcp-hero__title .hl-accent { font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: 1.12em; letter-spacing: -0.035em; color: #fff; }
.svcp-hero__aside { grid-column: 9 / -1; }
.svcp-hero__lead { margin: 0 0 var(--s4); font-size: var(--fs-body); line-height: 1.7; color: #fff; }
.svcp-hero .btn--secondary { color: #fff !important; border-color: #fff !important; }
.svcp-hero .btn--secondary:hover { background: #fff !important; color: var(--svcp) !important; }
.svcp-hero .sf-strip__btn { border-color: rgba(255, 255, 255, 0.9); color: #fff; }
.svcp-hero .sf-strip__btn:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--svcp); }
.svcp-hero .sf-strip__count { color: #fff; }
.svcp-hero ::selection { color: #fff; }
body:has(.svcp) .site-header--overlay:not(.is-solid)::before { opacity: 0 !important; }
body:has(.svcp) .site-header--overlay:not(.is-solid) .nav__link--active { color: #fff !important; }
/* Streifen: Projekt-Kacheln im echten Format, laufen rechts aus dem Bild */
.svcp-strip {
  display: flex; gap: var(--img-gap); margin: 0; padding: 0 var(--pad); list-style: none;
  overflow-x: auto; scrollbar-width: none; scroll-padding-left: var(--pad); cursor: grab; overscroll-behavior-x: contain;
}
.svcp-strip::-webkit-scrollbar { display: none; }
.svcp-strip.is-drag { cursor: grabbing; }
.svcp-strip > li { flex: 0 0 clamp(17rem, 36vw, 40rem); }
.svcp-strip .card__info, .svcp-strip .card__title { color: #fff !important; }
.svcp-strip .card__cat { color: rgba(255, 255, 255, 0.72) !important; }
.svcp-strip img { user-select: none; -webkit-user-drag: none; }
@media (max-width: 1099px) {
  .svcp-hero__top > * { grid-column: 1 / -1 !important; }
  .svcp-strip > li { flex-basis: 62vw; }
}
@media (max-width: 599px) {
  .svcp-strip > li { flex-basis: 82vw; }
  .svcp-hero .sx-strip__nav .sf-strip__count { display: none; }
}

/* Abschnitte: gleiche Abstaende wie ueberall */
html body .svcp > section:not(.svcp-hero), .svcp > .svcp-next { padding-block: var(--section) !important; }
html body .svcp > section.svcp-text { padding-bottom: 0 !important; }
.svcp .section-title { margin: 0 0 var(--s6) !important; }

/* Beispiele: 2er-Raster, bei drei Projekten das erste gross */

/* Text + Leistungsliste */
.svcp-text__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid, 1.5rem); row-gap: var(--s6); }
.svcp-text__body { grid-column: 1 / span 8; max-width: 40em; }
.svcp-text__body p { margin: 0 0 var(--s3); font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
.svcp-text__body p:first-child { font-size: var(--fs-lead, 1.333rem); line-height: 1.45; color: var(--white); }
.svcp-list { grid-column: 9 / -1; list-style: none; margin: 0; padding: 0; align-self: start; }
.svcp-list li { padding: var(--s1) 0; border-top: var(--hair) solid var(--divider); font-size: var(--fs-body); font-weight: 500; }
.svcp-list li:last-child { border-bottom: var(--hair) solid var(--divider); }
@media (max-width: 899px) { .svcp-text__body, .svcp-list { grid-column: 1 / -1; } }

/* Weitere Leistungen: grosse Zeilen wie im Menue */
.svcp-next { display: flex; flex-direction: column; }
.svcp-next__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s1) 0; border-top: var(--hair) solid var(--divider);
  font-size: calc(var(--fs-h2) * var(--caps, 1)); font-weight: 500; letter-spacing: -0.04em; line-height: 1;
  text-transform: uppercase; color: var(--white); text-decoration: none; transition: color var(--m-hover) var(--ease);
}
.svcp-next__link:last-child { border-bottom: var(--hair) solid var(--divider); }
.svcp-next__link::after { content: '\2197'; font-family: var(--font); font-weight: inherit; font-size: 0.82em; transition: transform var(--m-move) var(--ease-out); }
.svcp-next__link:is(:hover, :focus-visible) { color: var(--accent); }
.svcp-next__link:is(:hover, :focus-visible)::after { transform: rotate(45deg); }

/* Services + Startseite: Weg zur jeweiligen Leistungsseite */
html .svc-type .svc-type__more { display: inline-flex !important; align-items: baseline; width: auto !important; justify-self: start; grid-column: 1 / -1; white-space: nowrap; margin-top: var(--s2); font-size: var(--fs-body); font-weight: 500; color: inherit; text-decoration: none; }
html .svc-type .svc-type__more .svc-type__more-arrow { display: inline-block !important; position: static !important; width: auto !important; margin-left: 0.2em; font-family: var(--font); transition: transform var(--m-move) var(--ease-out); }
.svc-type__more:hover .svc-type__more-arrow { transform: rotate(45deg); }
.svc-type__more:hover { color: var(--accent); }
.svc-type__link { color: inherit; text-decoration: none; }
/* PASS51:END */

/* PASS52 (23.10.2026): zwei Knoepfe im Kopf, BTS-Bild, Drei Fragen, klare Links Startseite */
.svcp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s1); }
html .svcp-hero .svcp-cta, html .svcp-hero .svcp-cta:is(:hover, :focus-visible) { background: #fff !important; border-color: #fff !important; color: var(--svcp) !important; }
.svcp > .bleed { padding: 0 !important; }
.svcp-q__list { list-style: none; margin: 0; padding: 0; }
.svcp-q__list li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid, 1.5rem); padding: var(--s3) 0; border-top: var(--hair) solid var(--divider); }
.svcp-q__list li:last-child { border-bottom: var(--hair) solid var(--divider); }
.svcp-q__t { grid-column: 1 / span 6; font-size: var(--fs-lead, 1.333rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.svcp-q__d { grid-column: 8 / -1; font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
@media (max-width: 767px) { .svcp-q__t, .svcp-q__d { grid-column: 1 / -1; } .svcp-q__d { margin-top: var(--s0); } }
html body .svcp > section.svcp-q { padding-bottom: 0 !important; }
/* Startseite: Leistungszeilen sind Links, Pfeil rechts macht das klar */
.sx--stone .svc-type__row { display: flex !important; align-items: center; justify-content: space-between; gap: var(--s3); text-decoration: none; color: inherit; }
.sx--stone .svc-type__row::after { content: '\2197'; font-family: var(--font); font-weight: 500; font-size: 0.5em; transition: transform var(--m-move) var(--ease-out); flex: none; }
.sx--stone .svc-type__row:is(:hover, :focus-visible)::after { transform: rotate(45deg); color: var(--accent); }
/* PASS52:END */

/* PASS53 (23.10.2026) Lightbox ueberall: Zeiger zeigt, dass das Bild aufgeht */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lightbox--single .lightbox__prev, .lightbox--single .lightbox__next { display: none; }

/* PASS54 (23.10.2026) Leistungsseiten ohne Farbflaeche (Lua): weisser Kopf
   wie die anderen Seiten, dann Bild, dann Projekte im 2er-Raster wie /work. */
.svcp-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid, 1.5rem); row-gap: var(--s6); padding-top: var(--hero-top) !important; padding-bottom: var(--s8) !important; }
html .svcp .svcp-head__title {
  grid-column: 1 / -1; margin: 0; color: var(--ink, #161616);
  font-size: min(9.8vw, 8.85rem); font-weight: 500; line-height: 0.88; letter-spacing: -0.055em; text-transform: uppercase;
}
html .svcp .svcp-head__title .hl-accent { font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: 1.12em; letter-spacing: -0.035em; }
.svcp-head__aside { grid-column: 8 / -1; }
.svcp-head__lead { margin: 0 0 var(--s4); font-size: var(--fs-lead, 1.333rem); line-height: 1.45; color: var(--ink, #161616); }
.svcp-head__ctas { display: flex; flex-wrap: wrap; gap: var(--s1); }
@media (max-width: 899px) { .svcp-head__aside { grid-column: 1 / -1; } html .svcp .svcp-head__title { font-size: 13vw; } }
html body .svcp > section.svcp-head { padding-top: var(--hero-top) !important; padding-bottom: var(--s8) !important; }
html body .svcp > section.svcp-work { padding-bottom: 0 !important; }
.svcp .bleed { position: relative; }
.svcp .bleed__media { position: absolute !important; inset: 0; height: 100% !important; }
.svcp .bleed__media img { animation: none !important; transform: none !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* Leistungsseiten: alle Projektkacheln gleich gross, nie zuschneiden (Lua 23.10.) */

/* PASS55 (23.10.2026) Leistungsseiten im Stil der Katrine-Referenz:
   Statement gross mit Kepler-Phrasen, Prozesszeilen mit Kepler-Liste,
   "Let's make a film together." als Abschluss. Slogan in Kepler im Footer. */
.kp { font-family: var(--font-accent); font-style: italic; font-weight: 600; letter-spacing: -0.02em; font-size: 1.06em; }
html body .svcp > section.svcp-text { padding-top: var(--section) !important; padding-bottom: var(--section) !important; }
.svcp-label { margin: 0 0 var(--s5); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.svcp-statement { margin: 0; max-width: 22em; font-size: clamp(2rem, 1rem + 3.3vw, 4.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--ink, #161616); }
.svcp .svcp-text__body { grid-column: auto; max-width: 34em; margin: var(--s7) 0 0 auto; columns: 1; }
.svcp .svcp-text__body p, .svcp .svcp-text__body p:first-child { font-size: var(--fs-body) !important; line-height: 1.7 !important; color: var(--text) !important; margin: 0 0 var(--s3); }
@media (max-width: 899px) { .svcp .svcp-text__body { margin-left: 0; } }

html body .svcp > section.svcp-how { padding-top: var(--section) !important; padding-bottom: var(--section) !important; }
.svcp-how__title { margin: 0 0 var(--s7); text-align: center; font-size: clamp(2rem, 1rem + 3vw, 3.8rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; }
.svcp-how__list { list-style: none; margin: 0; padding: 0; }
.svcp-how__row { display: grid; grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: var(--gap-grid, 1.5rem); align-items: start; padding: var(--s4) 0; border-top: var(--hair) solid var(--divider); }
.svcp-how__row:last-child { border-bottom: var(--hair) solid var(--divider); }
.svcp-how__num { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 0.45em; }
.svcp-how__step { margin: 0; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.svcp-how__desc { margin: 0.3em 0 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text); max-width: 22em; }
.svcp-how__items { list-style: none; margin: 0; padding: 0; font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.4rem); line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 899px) {
  .svcp-how__row { grid-template-columns: 2.5rem minmax(0, 1fr); row-gap: var(--s2); }
  .svcp-how__desc, .svcp-how__items { grid-column: 2; }
  .svcp-how__title { text-align: left; }
}

html body .svcp > section.svcp-contact { padding-top: var(--section) !important; padding-bottom: var(--section) !important; }
.svcp-contact__title { margin: 0 0 var(--s6); font-size: clamp(3rem, 1rem + 6.4vw, 8.4rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; }
.svcp-contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid, 1.5rem); row-gap: var(--s4); padding-top: var(--s4); border-top: var(--hair) solid var(--divider); }
.svcp-contact__text { grid-column: 1 / span 5; margin: 0; font-size: var(--fs-lead, 1.333rem); line-height: 1.4; }
.svcp-contact__q { grid-column: 7 / span 4; list-style: none; margin: 0; padding: 0; font-family: var(--font-accent); font-style: italic; font-weight: 600; font-size: var(--fs-lead, 1.333rem); line-height: 1.35; }
.svcp-contact__btn { grid-column: 11 / -1; justify-self: end; align-self: start; white-space: nowrap; }
@media (max-width: 899px) { .svcp-contact__text, .svcp-contact__q, .svcp-contact__btn { grid-column: 1 / -1; justify-self: start; } }
html body .svcp > section.faq-section { padding-bottom: 0 !important; }

/* PASS55:END */
.svcp-work__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 768px) { .svcp-work__grid--3 { grid-template-columns: minmax(0, 1fr) !important; } }

/* ── PASS56:START (23.10.2026) Cookie-Hinweis als schmale Leiste ─────────
   Lua: die Karte unten links verdeckt beim Start zu viel und wirkt zufaellig
   platziert. Jetzt eine ruhige Leiste ueber die ganze Breite, eine Zeile:
   Text links, kleine Knoepfe rechts, Haarlinie oben. Ablehnen bleibt gleich
   prominent wie Akzeptieren. Mit "Settings" waechst sie nach oben auf. */
.consent {
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; max-height: 80svh !important;
  background: rgba(255, 255, 255, 0.96) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 0 !important; box-shadow: none !important;
  border-top: var(--hair, 1px) solid var(--divider, rgba(22, 22, 22, 0.12)) !important;
}
.consent .consent__inner {
  display: flex !important; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s1) var(--pad) calc(var(--s1) + env(safe-area-inset-bottom, 0px)) !important;
}
.consent .consent__text { font-size: 0.75rem !important; line-height: 1.4 !important; }
.consent .consent__actions { flex-wrap: nowrap; flex: 0 0 auto; margin-top: 0 !important; gap: 0.4rem !important; }
.consent .consent__btn { flex: 0 0 auto; min-height: 1.85rem !important; padding: 0 0.85rem !important; font-size: 0.75rem !important; }
.consent--details .consent__inner { display: block !important; padding-top: var(--s2) !important; }
.consent--details .consent__actions { margin-top: var(--s2) !important; justify-content: flex-end; }
@media (max-width: 700px) {
  .consent .consent__inner { display: block !important; min-width: 0; }
  .consent .consent__copy, .consent .consent__text { white-space: normal !important; min-width: 0; overflow-wrap: anywhere; }
  .consent .consent__actions { display: flex !important; width: 100%; margin-top: var(--s1) !important; }
  .consent .consent__btn { flex: 1 1 0; min-width: 0 !important; padding: 0 0.5rem !important; }
}
/* PASS56:END */

/* ── PASS57:START (23.10.2026) ──────────────────────────────────────────
   Next-Shot-Kacheln: Play-Knopf nur beim Drueberfahren (Lua: "Playbutton
   auf Hover, sonst nicht"). Auf Touch-Geraeten ohne Hover bleibt er
   sichtbar, sonst sieht man dort nicht, dass die Kachel ein Video ist. */
.yt-ep .yt-ep__play { opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--ps, 0.9)); transition: opacity var(--m-hover, .2s) var(--ease, ease), transform var(--m-move, .4s) var(--ease-out, ease); pointer-events: none; }
.yt-ep:hover .yt-ep__play, .yt-ep:focus-visible .yt-ep__play { opacity: 1; --ps: 1; transform: translate(var(--px, 0px), var(--py, 0px)) scale(var(--ps)); }
/* Folgt der Maus wie bei den Filmen (script.js setzt --px/--py), Zeiger aus. */
.yt-ep.is-following .yt-ep__play { transition: opacity var(--m-hover, .2s) var(--ease, ease); }
.yt-ep.is-following .yt-ep__media { cursor: none; }
.yt-ep.is-playing .yt-ep__play { opacity: 0; }
@media (hover: none) { .yt-ep .yt-ep__play { opacity: 1; transform: none; } }
/* Vorher/Nachher-Griff: ganz an den Rand gezogen, wurde der orange Knopf
   halb abgeschnitten. Der Griff bleibt jetzt immer ganz im Bild. */
.ba-slider .ba-slider__handle { left: clamp(22px, var(--pos, 50%), calc(100% - 22px)); }
/* PASS57:END */

/* ── PASS58:START (24.10.2026) ──────────────────────────────────────────
   Lua: Pfeile in der Work-Liste kippten hart, Linien unterschiedlich
   stark, Kontaktfeld-Linie zu schnell/lang, Autofill-Schrift zu klein. */

/* Work-Liste: der Pfeil dreht weich wie bei den Knoepfen (0.6s expo.out),
   nicht mehr hart. Farbe blendet mit. */
.work-list .work-list__arrow::after,
.work-list__arrow::after {
  transition: transform 0.6s var(--ease-out), color var(--m-hover, 0.3s) var(--ease) !important;
}

/* Eine Strichstaerke, ruhige Farbe: Zeilenlinien wie alle Haarlinien. */
.work-list__row { border-bottom-color: var(--divider) !important; }

/* Kontaktfeld: Orange laeuft gleichmaessig statt schnell-dann-lang. */
.contact-form__input,
.contact-form__textarea {
  transition: background-size 0.45s cubic-bezier(0.65, 0, 0.35, 1), --cf-line var(--dur-base) var(--ease) !important;
}

/* Autofill (Chrome-Vorschlag und ausgefuellt): gleiche Schrift und Groesse
   wie getippt. ::first-line greift auch in der Vorschau beim Drueberfahren. */
.contact-form__input:-webkit-autofill,
.contact-form__input:-webkit-autofill::first-line,
.contact-form__input:-webkit-autofill:hover,
.contact-form__input:-webkit-autofill:focus {
  font-family: var(--font) !important;
  font-size: var(--fs-h3) !important;
  letter-spacing: var(--ls-heading) !important;
  -webkit-text-fill-color: var(--white) !important;
}
/* PASS58:END */

/* ── PASS59:WORK-RASTER:START (25.10.2026) ──────────────────────────────
   Lua: /work als kleineres, gleichmaessiges Raster, alle Arbeiten auf einen
   Blick statt Rhythmus 2-3. Drei gleiche Spalten, alle Bilder 3:2.
   ZURUECK zum alten 2-3-Rhythmus: diesen ganzen Block loeschen. */
@media (min-width: 900px) {
  .work-index:not([data-view="list"]) .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .work-index:not([data-view="list"]) .work-grid > .card:nth-child(n) { grid-column: auto !important; }
}
.work-index:not([data-view="list"]) .work-grid .card__img-wrap { aspect-ratio: 3 / 2 !important; }
.work-index:not([data-view="list"]) .work-grid .card__img { width: 100%; height: 100%; object-fit: cover; }
/* Kategorie buendig mit der rechten Bildkante, wie der Titel links. */
.work-index .work-grid .card__info { padding-right: 0 !important; }
/* PASS59:WORK-RASTER:END */

/* ── PASS60:WORK-COLLAGE:START (25.10.2026) ─────────────────────────────
   Lua: "meins ist grad sehr brav" + "nie Videos auf 4:3 zuschneiden".
   /work als Collage: jedes Bild behaelt sein ECHTES Format (aus width/height
   des Bildes, script.js setzt --r), Abwechslung kommt ueber die Groesse:
   Reihen mit 2, 4, 3 Arbeiten, jede Reihe gleich hoch und ganz gefuellt.
   Ohne JS bleibt das 3er-Raster aus PASS59.
   ZURUECK zum ruhigen 3er-Raster: diesen Block loeschen (und PASS60 in
   script.js). ZURUECK zum alten 2-3-Rhythmus: zusaetzlich PASS59 loeschen. */
@media (min-width: 700px) {
  .work-index:not([data-view="list"]) .work-grid.is-collage {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(1.1rem, 1.8vw, 1.8rem) 6px !important;
  }
  .work-grid.is-collage > .work-break { flex: 0 0 100%; height: 0; margin-top: calc(-1 * clamp(1.1rem, 1.8vw, 1.8rem)); }
  .work-index:not([data-view="list"]) .work-grid.is-collage > .card { flex: var(--r, 1.5) 1 0; min-width: 0; grid-column: auto !important; }
  .work-index:not([data-view="list"]) .work-grid.is-collage .card__img-wrap { aspect-ratio: var(--r, 1.5) !important; }
  .work-index:not([data-view="list"]) .work-grid.is-collage .card__info { padding-top: 0.5rem !important; display: block !important; text-align: left !important; }
  /* Wie die Referenz: nur der Titel unter dem Bild. */
  .work-index:not([data-view="list"]) .work-grid.is-collage .card__cat { display: none !important; }
  .work-index:not([data-view="list"]) .work-grid.is-collage .card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* PASS60:WORK-COLLAGE:END */

/* PASS61 Karten-Videos automatisch (Studio-Schalter): auch auf dem Handy zeigen. */
html[data-card-video="autoplay"] .card__video, .card[data-play="auto"] .card__video { display: block !important; }

/* ── PASS62:BAUKASTEN:START (25.10.2026) ──────────────────────────────
   Bilder-Bereiche aus dem Studio (Reiter Aufbau): Spalten 1-4 und Format.
   Ohne data-cols/data-ratio gilt das normale Raster. */
.container[data-cols] > div { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.container[data-ratio] .img-item img,
.container[data-ratio] .img-item--full img { aspect-ratio: var(--ratio); }
.container[data-ratio="auto"] .img-item img { aspect-ratio: auto; height: auto; }
@media (max-width: 600px) {
  .container[data-cols] > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container[data-cols="1"] > div { grid-template-columns: 1fr; }
}
/* PASS62:BAUKASTEN:END */

/* ==========================================================================
   MOBIL-FEINSCHLIFF (28.10.2026, Lua)
   Steht bewusst am Dateiende und gewinnt gegen die aelteren Schichten oben.
   1. Seitentitel: weniger Luft ueber dem Titel und zwischen Titel und Inhalt
   2. Knoepfe: Text wird nie abgeschnitten
   3. Footer: Links enger untereinander
   4. About-Bilder: freies Raster wie auf dem Desktop statt starrer 2er-Kacheln
   ========================================================================== */
@media (max-width: 768px) {
  /* :is(main, #lh-spec) hebt die Spezifitaet auf ID-Niveau, wie die aelteren Regeln oben. */
  html body :is(main, #lh-spec) > :is(.page-hero, .project-hero, .svcp-head, .sf-hero):is(section, #lh-spec) {
    padding-top: calc(var(--header-h) + 1.75rem) !important;
    padding-bottom: 1.25rem !important;
  }
  html body :is(main, #lh-spec) > :is(.page-hero, .project-hero, .svcp-head, .sf-hero) + :is(section, #lh-spec) {
    padding-top: .75rem !important;
  }
  html body :is(main, #lh-spec) > .page-hero .page-hero__sub:is(p, #lh-spec) {
    margin-top: .75rem !important;
  }

  html .btn, html .btn--arrow, html .moments__link {
    width: auto !important;
    max-width: 100%;
    overflow: visible !important;
    flex: none;
  }

  html .footer__link { min-height: 2.25rem; }
  html .footer__cols { row-gap: var(--space-6, 1.5rem); }
  html .footer__label { margin-bottom: .35rem; }

  /* Bilder behalten ihr Seitenverhaeltnis; jede Reihe fuellt die Breite,
     Hoch- und Querformate wechseln sich frei ab. */
  html body :is(main, #lh-spec) .about-bts__grid,
  html body :is(main, #lh-spec) .about-bts__grid.has-rows {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--img-gap, .5rem) !important;
    grid-template-columns: none !important;
  }
  html body :is(main, #lh-spec) .about-bts__grid::after { content: "" !important; flex: 999 1 0 !important; }
  html body :is(main, #lh-spec) .about-bts__grid .bts-break { display: none !important; }
  html body :is(main, #lh-spec):has(#about-title) .about-bts__grid .about-bts__item:nth-child(n),
  html body :is(main, #lh-spec) .about-bts__grid .about-bts__item[data-tile]:nth-child(n),
  html body :is(main, #lh-spec) .about-bts__grid.has-rows .about-bts__item:nth-child(n) {
    flex: var(--bts-ar, 1.5) 1 calc(var(--bts-ar, 1.5) * 6.5rem) !important;
    aspect-ratio: var(--bts-ar, 1.5) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }
}


/* ==========================================================================
   PROJEKTRASTER-EINSTELLUNGEN AUS DEM STUDIO (28.10.2026)
   Greifen nur, wenn im Studio etwas gewaehlt ist (data-grid-* am Abschnitt).
   Ohne Wahl bleibt das bisherige Raster unveraendert.
   ========================================================================== */
@media (min-width: 769px) {
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols="2"]:not([data-view=list]) :is(.work-grid, .projects__grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols="3"]:not([data-view=list]) :is(.work-grid, .projects__grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols="4"]:not([data-view=list]) :is(.work-grid, .projects__grid) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols]:not([data-view=list]) :is(.work-grid, .projects__grid) > .card:nth-child(n) { grid-column: auto !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols]:not([data-view=list]) :is(.work-grid, .projects__grid) > .card[data-card-size="large"]:nth-child(n) { grid-column: span 2 !important; }
  /* Alle gleich gross: einheitliches Bildformat */
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="uniform"] :is(.work-grid, .projects__grid) .card__img-wrap { aspect-ratio: 3 / 2 !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="uniform"] :is(.work-grid, .projects__grid) .card__img { width: 100%; height: 100%; object-fit: cover; }
  /* Nach Bildformat: Reihen fuellen die Breite, jede Karte behaelt ihr Format */
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="collage"]:not([data-view=list]) :is(.work-grid, .projects__grid) { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: clamp(1.1rem, 1.8vw, 1.8rem) var(--img-gap, .6rem) !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="collage"]:not([data-view=list]) :is(.work-grid, .projects__grid) > .card:nth-child(n) { flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * 14rem); min-width: 0; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="collage"]:not([data-view=list]) :is(.work-grid, .projects__grid) > .card[data-card-size="large"]:nth-child(n) { flex-basis: calc(var(--r, 1.5) * 26rem); }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="collage"]:not([data-view=list]) :is(.work-grid, .projects__grid) .card__img-wrap { aspect-ratio: var(--r, 1.5) !important; }
}
/* Startseite: wie viele Projekte sichtbar sind */
html body :is(main, #lh-spec) .projects--home[data-grid-count] .projects__grid > .card:nth-child(n) { display: block !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="1"] .projects__grid > .card:nth-child(n+2) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="2"] .projects__grid > .card:nth-child(n+3) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="3"] .projects__grid > .card:nth-child(n+4) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="4"] .projects__grid > .card:nth-child(n+5) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="5"] .projects__grid > .card:nth-child(n+6) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="6"] .projects__grid > .card:nth-child(n+7) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="7"] .projects__grid > .card:nth-child(n+8) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="8"] .projects__grid > .card:nth-child(n+9) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="9"] .projects__grid > .card:nth-child(n+10) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="10"] .projects__grid > .card:nth-child(n+11) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="11"] .projects__grid > .card:nth-child(n+12) { display: none !important; }
html body :is(main, #lh-spec) .projects--home[data-grid-count="12"] .projects__grid > .card:nth-child(n+13) { display: none !important; }

/* Gewaehlte Spalten/Groessen schalten das automatische Collage-Raster der Work-Seite ab */
@media (min-width: 769px) {
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols]:not([data-grid-layout="collage"]):not([data-view=list]) :is(.work-grid, .projects__grid),
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="uniform"]:not([data-view=list]) :is(.work-grid, .projects__grid) { display: grid !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols]:not([data-grid-layout="collage"]) :is(.work-grid, .projects__grid) > .card:nth-child(n),
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="uniform"] :is(.work-grid, .projects__grid) > .card:nth-child(n) { flex: none !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="uniform"]:not([data-grid-cols]):not([data-view=list]) :is(.work-grid, .projects__grid) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="uniform"] :is(.work-grid, .projects__grid) > .card:not([data-card-size="large"]):nth-child(n) { grid-column: auto !important; }
  html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout="uniform"] :is(.work-grid, .projects__grid) > .card[data-card-size="large"]:nth-child(n) { grid-column: span 2 !important; }
}
html body :is(main, #lh-spec) :is(.work-index, .projects):is([data-grid-cols], [data-grid-layout]) .work-break { display: none !important; }

/* ==========================================================================
   ABSTANDSSYSTEM (28.10.2026, Lua)
   Abstaende folgen derselben Skala wie die Typografie (Faktor 1.333):
   --s0 .5625rem · --s1 .75 · --s2 1 · --s3 1.333 · --s4 1.778 · --s5 2.370 · --s6 3.160 · --s7 4.214
   Regeln:
   1. Seitenrand (--pad) ist immer eine Stufe der Skala.
   2. Zwischen Bildern liegt ueberall dieselbe Luecke: --img-gap = --s0, waagrecht wie senkrecht.
   3. Kein Bild beruehrt den Bildschirmrand (Ausnahme: das Hero-Video der Startseite
      als Hintergrund und waagrechte Scroll-Leisten, die bewusst weiterlaufen).
   ========================================================================== */
:root { --pad: var(--s3); --img-gap: var(--s0); --gap-img: var(--s0); --pj-gap: var(--s0); }
@media (min-width: 769px) { :root { --pad: var(--s5); } }
@media (min-width: 1280px) { :root { --pad: var(--s6); } }
@media (min-width: 1800px) { :root { --pad: var(--s7); } }

/* Seitenrand fuer alle Inhaltsabschnitte gleich */
html body :is(main, #lh-spec) > section.container,
html body :is(main, #lh-spec) > section > .container { padding-inline: var(--pad) !important; }

/* Bildflaechen nie randlos */
html body :is(main, #lh-spec) > .bleed:is(section, #lh-spec) { margin-inline: var(--pad) !important; width: auto !important; border-image: none !important; }

/* Bildraster: dieselbe Luecke in beide Richtungen */
html body :is(main, #lh-spec) :is(.project-images__grid, .doc-stills__grid, .doc-stills) { gap: var(--img-gap) !important; row-gap: var(--img-gap) !important; }
html body :is(main, #lh-spec) :is(.project-images__grid, .doc-stills__grid) > * { margin: 0 !important; }

@media (max-width: 768px) {
  /* Behind the Scenes mobil: zwei ruhige Spalten, jedes Bild in seinem Format,
     gleiche Luecke ueberall, kein einzelnes Restbild */
  html body :is(main, #lh-spec) .about-bts__grid,
  html body :is(main, #lh-spec) .about-bts__grid.has-rows {
    display: block !important; columns: 2; column-gap: var(--img-gap) !important;
  }
  html body :is(main, #lh-spec) .about-bts__grid::after { content: none !important; }
  html body :is(main, #lh-spec):has(#about-title) .about-bts__grid .about-bts__item:nth-child(n),
  html body :is(main, #lh-spec) .about-bts__grid .about-bts__item[data-tile]:nth-child(n),
  html body :is(main, #lh-spec) .about-bts__grid.has-rows .about-bts__item:nth-child(n) {
    display: block; break-inside: avoid; width: 100% !important; flex: none !important;
    margin: 0 0 var(--img-gap) !important; aspect-ratio: var(--bts-ar, 1.5) !important;
  }
}

/* FAQ- und Abschnittsueberschriften in Tinte (#161616), nicht Grau (28.10.2026) */
html body :is(main, #lh-spec) .faq-section .section-label,
html body :is(main, #lh-spec) .faq-section :is(h2, h3) { color: var(--ink, #161616) !important; opacity: 1 !important; }

/* Bleed-Bilder: rundum derselbe Abstand (Seitenrand), damit sie gerahmt wirken
   und nie direkt an farbige Flaechen stossen (28.10.2026) */
html body :is(main, #lh-spec) > .bleed:is(section, #lh-spec) { margin-block: var(--pad) !important; }

/* Startseite: das letzte Wort im Hero-Titel ("watch." / DE "will.") bleibt
   Kepler kursiv, aber weiss. Orange gehoert nur auf Knoepfe (Lua 30.10.2026). */
html body .hero__name .word:last-child { color: inherit; }

/* 31.10.2026: Kooperationshinweis unter den Projekt-Details, Hinweis zur Markenreihe */
.project-body__note { margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted); max-width: 36em; }
.marquee__note { margin: 0 auto 1.25rem; padding: 0 var(--pad); text-align: center; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
/* 31.10.2026: neuer Hero-Satz ("Dokumentation.") passt auf 320 px sonst nicht in die Zeile */
@media (max-width: 380px) { .hero__name, [data-titles="caps"] .hero__name { font-size: 9.4vw !important; } }
/* 31.10.2026 Lua: kleine Pfeile rechts in den Service-Zeilen raus */
.sx--stone .svc-type__row::after { content: none !important; display: none !important; }
/* 31.10.2026: lange Einzelwoerter (ZUSAMMENARBEIT) laufen auf dem Handy sonst aus dem Bild */
@media (max-width: 600px) { .proc__heading { font-size: min(var(--fs-page), 10vw) !important; } }
/* 31.10.2026 Lua: 7 Kurzfilme auf der Startseite ohne riesige Leerflaeche zwischen Text und Plakaten */
.sx--glacier.sx--screen { min-height: 0 !important; justify-content: flex-start !important; gap: clamp(3rem, 6vw, 5rem) !important; }
/* 31.10.2026: Ablauf-Zeilen auf dem Handy, NACHBEARBEITUNG / POST-PRODUCTION liefen aus dem Bild */
@media (max-width: 600px) {
  .proc__num { grid-column: 1 / -1 !important; }
  .proc__title { grid-column: 1 / -1 !important; font-size: min(2.3704rem, 8vw) !important; }
}
/* 31.10.2026: "Mehr über mich" bricht auf sehr schmalen Handys unter den Titel um */
@media (max-width: 420px) { .moments__head, .sx--stone .moments__head { flex-wrap: wrap !important; row-gap: 1rem; } }
/* 31.10.2026: 320-px-Handys, Zahlenreihe 7 Kurzfilme und Mail im Footer passen sonst nicht */
@media (max-width: 380px) {
  .sf-facts .sf-stat__num { font-size: 2.25rem !important; }
  .sf-facts .sf-stat__label { font-size: 0.75rem !important; }
  .footer__email { font-size: 9vw !important; }
}
/* 31.10.2026 Lua: grosses Bild auf der Startseite wieder randlos ueber die ganze Breite */
html body :is(main, #lh-spec) > .bleed:is(section, #lh-spec) { margin: 0 !important; width: 100% !important; }
/* 31.10.2026: "Download-Link anfordern" bricht nie am Bindestrich */
.product-hero__note a { white-space: nowrap; }
/* 31.10.2026 Lua: Kaufknopf auf Produktseiten so breit wie der Text, nicht über die ganze Spalte */
html .product-hero__btn { width: auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5em; font-size: var(--fs-body) !important; padding: 0.85em 1.6em !important; }
.product-hero__buy { display: flex !important; flex-direction: column; align-items: flex-start !important; }
.product-hero__buy .product-hero__note, .product-hero__secure { text-align: left !important; }
/* 31.10.2026 Lua: Startseiten-Video auf dem Handy im 4:5-Format, nicht bildschirmhoch */
@media (max-width: 767px) {
  html .hero--video { height: 125vw !important; min-height: 0 !important; max-height: none !important; }
  html .hero.hero--video { align-items: flex-end !important; padding-bottom: var(--s6) !important; }
  html .hero--video .hero__content { margin-top: 0 !important; align-self: flex-end !important; }
}
/* 31.10.2026 Lua: Wallpaper wie die Produktseiten (Bild und Titel oben bündig, gleiche Titelgrösse) */
main .wp-grid { align-items: start !important; }
main .wp-hero .wp-title { font-size: var(--fs-h1) !important; }
main .wp-hero .back-link { font-size: 14.625px !important; }
main .wp-hero .wp-eyebrow { font-size: 13.5px !important; }
@media (min-width: 1025px) { main .wp-hero { padding-top: calc(var(--header-h) + var(--s6) + 6px) !important; } main .wp-body { margin-left: -5px; } }
@media (max-width: 1024px) { main .wp-hero { padding-top: calc(var(--header-h) + var(--s6) - 20px) !important; } }
main .wp-grid { margin-top: calc(2vw + var(--wp-gap-fix, 0px)) !important; }
main .wp-hero .wp-eyebrow { line-height: 1.3 !important; margin-bottom: 13.5px !important; }
main .wp-hero { --wp-gap-fix: calc(5px - 3.33vw); }
@media (min-width: 900px) and (max-width: 1024px) { main .wp-hero { padding-top: calc(var(--header-h) + var(--s6) - 28px) !important; } main .wp-body { margin-left: -7px; } }
/* PASS60:BUTTONS  Ein Knopf-System (Lua 01.11.): Primaer orange gefuellt,
   Sekundaer Kontur. Alle gleich gross, alle mit Text-Roll. */
html :is(.btn, .hero__cta, .product-hero__btn, .pg-cta__btn, .contact-form__submit, .project-cta__link, .moments__link, .svcp-contact__btn) {
  font-size: var(--btn-fs-md) !important; padding: var(--btn-pad-md) !important; min-height: 0 !important; height: auto !important; line-height: 1.2 !important;
}
html .product-card__buy { font-size: var(--btn-fs-sm) !important; }
html .pg-cta__btn { align-self: center !important; }
/* Roll in Formular-Knoepfen und Shop-Karten: Hover am Knopf bzw. an der Karte */
.contact-form__submit:is(:hover, :focus-visible) .roll > span,
.wp-submit:is(:hover, :focus-visible) .roll > span,
a.product-card:is(:hover, :focus-visible) .product-card__buy .roll > span { transform: translateY(calc(-100% - 0.3em)); }
/* PASS60:BUTTONS:END */
/* PASS60:NAV  Farbiger Seitenanfang (7 Short Films, Glacier): Menue steht von
   Anfang an auf der weissen Leiste, nie schwarz auf Farbe. Aktiv bleibt orange. */
/* PASS60:NAV:END */
/* PASS60:SERIF  Fliesstext nie in Serif (Lua 01.11.). Ausnahme: Einleitung neben dem Projekttitel bleibt Serif (Lua 01.11. abends). */
html .sf-pod__sub { font-family: var(--font) !important; font-style: normal !important; font-weight: var(--fw-regular, 400) !important; letter-spacing: var(--ls-normal, -0.01em) !important; }
/* PASS60:SERIF:END */
/* PASS60:SPACING  Jeder Abstand auf einer Stufe der 1.333-Leiter (--s0..--s9).
   Feste Rollen: Titel -> Inhalt = s5, Absatz -> Absatz = s2,
   Kachelreihen = s5 (Handy s3), Unterzeile/Lead -> Titel = s3. */
:root { --title-gap: var(--s5); --card-row: var(--s5); }
@media (max-width: 1099px) { :root { --title-gap: var(--s4); --card-row: var(--s4); } }
@media (max-width: 599px)  { :root { --title-gap: var(--s4); --card-row: var(--s3); } }
/* Titel -> Inhalt */
html :is(.section-title, .editorial__head, .other-projects__title, .ns__head, .pg-vs__head, .sx__text, .moments__head) { margin-bottom: var(--title-gap) !important; }
/* Absaetze untereinander */
html :is(.about-bio__text, .project-body__text, .story__body) { row-gap: var(--s2) !important; }
html .project-hero__desc { margin-bottom: var(--s2) !important; }
html .project-hero__desc:last-child { margin-bottom: 0 !important; }
/* Kachelreihen ueberall gleich */
html body main :is(.projects__grid, .projects__grid.work-grid, .other-projects__grid, .shop__grid) { row-gap: var(--card-row) !important; }
/* Kleinere Abstaende */
html :is(.page-hero__sub, .sf-hero__sub, .pg-vs__txt, .contact-form) { margin-top: var(--s3) !important; }
html .contact-form { padding-top: 0 !important; }
html .project-body__label { margin-bottom: var(--s3) !important; }
html :is(.faq__question) { padding-top: var(--s2) !important; padding-bottom: var(--s2) !important; }
html .faq__answer p, html .faq__item p { padding-bottom: var(--s3) !important; }
html body main :is(.kollektiv__list, .ns__eps, .about-bio__grid) { row-gap: var(--s4) !important; }
html .ns__head { row-gap: var(--s4) !important; }
html .project-body { row-gap: var(--s5) !important; }
html main > .sf-strip.container, html main .container { row-gap: var(--s3); }
html .sf-hero__lead { margin-top: var(--s6) !important; }
@media (max-width: 1099px) { html .sf-hero__lead { margin-top: var(--s5) !important; } }
html .sf-facts { row-gap: var(--s7) !important; }
html body main .sx.sx { row-gap: var(--s7) !important; }
@media (max-width: 1099px) { html body main .sx.sx { row-gap: var(--s6) !important; } }
html main > .product-hero { padding-top: var(--s4) !important; }
html main > .product-detail { padding-bottom: var(--section) !important; padding-top: var(--s6) !important; }
html :is(.order__list) { margin-bottom: var(--s4) !important; }
html body main:has(#about-title) .kollektiv__list.kollektiv__list { row-gap: var(--s4) !important; }
html body main .pg-vs__grid.pg-vs__grid { row-gap: var(--s5) !important; }
html body main .project-body__text .project-hero__desc.project-hero__desc { margin: 0 0 var(--s2) !important; }
html body main .work-index .work-filter.work-filter { margin-bottom: var(--s4) !important; }
html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-layout]:not([data-view=list]) :is(.work-grid, .projects__grid).is-collage,
html body :is(main, #lh-spec) :is(.work-index, .projects)[data-grid-cols]:not([data-view=list]) :is(.work-grid, .projects__grid).projects__grid { row-gap: var(--card-row) !important; }
/* Tablet und Handy */
html :is(.back-link, .section-label, .work-filter) { margin-bottom: var(--s4) !important; }
html .marquee__label { margin-bottom: var(--title-gap) !important; }
html .marquee__set { row-gap: var(--s6) !important; }
html .pg-vs__grid { margin-top: var(--title-gap) !important; row-gap: var(--s5) !important; }
html .projects__more { margin-top: var(--s5) !important; }
html .sf-stats { row-gap: var(--s4) !important; }
html .sx__aside { margin-top: var(--s3) !important; }
html .project-hero__lead { margin-top: var(--s3) !important; }
@media (min-width: 900px) { html .project-hero__lead { margin-top: 0 !important; } }
@media (max-width: 767px) { html body :is(main, #lh-spec) > :is(.page-hero.page-hero, .project-hero.project-hero, .sf-hero.sf-hero) { padding-bottom: var(--s3) !important; } }
/* PASS60:SPACING:END */
/* PASS60:SCREEN  Farbflaechen wie bei Paul Kalkbrenner: jede farbige Flaeche
   fuellt den ganzen Bildschirm, Inhalt sitzt ruhig darin. Orange schliesst
   jede Seite (Footer) als volle Flaeche. Nie zwei Farbflaechen direkt nacheinander. */
html body main .sx.sx--screen,
html body main > .sf-facts { min-height: 100svh; display: flex !important; flex-direction: column; justify-content: center; }
html body main > .sf-facts > * { width: 100%; }
/* PASS60:SCREEN:END */
/* PASS60:SVC  Services schlicht (Lua 01.11.): offene Leistung = Text + "Projekte",
   keine Stichwortzeile mit Linie. Zusammenarbeit: aktive Nummer in Titelfarbe. */
html .svc-type--page .svc-type__kw { display: none !important; }
html .svc-type--page .svc-type__desc { border: 0 !important; padding-bottom: 0 !important; margin-bottom: var(--s3) !important; }
html .svc-type--page .svc-type__desc::after, html .svc-type--page .svc-type__inner::before { content: none !important; display: none !important; }
html body .proc .is-now .proc__num, html body .proc [data-step].is-now .proc__num { color: var(--ink) !important; }
/* PASS60:SVC:END */

/* PASS61:SF-HERO  7 Kurzfilme (Lua 01.11.): Glacier, normaler Seitentitel
   linksbuendig wie auf allen Seiten (Versalien, Akzentwort Serif), Einleitung
   darunter, Bild rechts. Kein Video, nichts mittig. */
html body main > .sf-hero.sf-hero--plain { background: var(--glacier) !important; color: #fff !important; padding-top: var(--hero-top) !important; padding-bottom: var(--section) !important; }
html body main > .sf-hero--plain .sf-hero__in { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); align-items: end; }
html body main > .sf-hero--plain .sf-hero__text { grid-column: 1 / span 6; }
html body main > .sf-hero--plain .sf-hero__title { margin: 0 !important; color: #fff !important; font-size: min(var(--fs-page), 7vw) !important; font-weight: 500 !important; line-height: 0.86 !important; letter-spacing: -0.055em !important; text-transform: uppercase; }
html body main > .sf-hero--plain .sf-hero__title .hl-accent { font-size: 1em; color: #fff !important; }
html body main > .sf-hero--plain .sf-hero__lead { margin: var(--s6) 0 0 !important; max-width: 32rem; font-family: var(--font) !important; font-size: var(--fs-lead) !important; line-height: 1.45 !important; color: #fff !important; }
html body main > .sf-hero--plain .sf-hero__img { grid-column: 8 / span 5; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin: 0 !important; max-height: none !important; display: block; }
@media (max-width: 899px) {
  html body main > .sf-hero--plain .sf-hero__title { font-size: min(var(--fs-page), 14vw) !important; }
  html body main > .sf-hero--plain .sf-hero__in { display: block !important; }
  html body main > .sf-hero--plain .sf-hero__img { margin-top: var(--s6) !important; }
}
body:has(main > .sf-hero--plain) .site-header:not(.is-hidden) { background-color: #fff !important; }
/* PASS61:SF-HERO:END */

/* 02.11.2026  Titel nie orange: Kursiv-Akzent im Hero in Titelfarbe (auch mit <em> aus dem Studio) */
html body .hero__name em,
html body .hero__name em .word,
html body .hero__name .word:last-child { color: inherit !important; }
/* HERO-MOBIL-RUHIG:START  02.11.2026 Lua: auf dem Handy deckte der Hero-Text
   zu viel vom Film ab. Rahmen jetzt 3:4 statt 4:5, Titel und Knopf teilen
   sich eine Zeile am unteren Rand, Verlauf nur noch im unteren Drittel.
   Rückbau: Block löschen. */
@media (max-width: 767px) {
  html .hero--video { height: 133.333vw !important; }
  html .hero.hero--video { padding-bottom: var(--pad) !important; }
  html .hero--video .hero__content {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    column-gap: var(--s3) !important;
  }
  html .hero__name,
  html[data-titles="caps"] .hero__name { grid-row: 1 !important; grid-column: 1 !important; font-size: 7vw !important; max-width: none !important; white-space: nowrap; }
  html .hero__ctas { grid-row: 1 !important; grid-column: 2 !important; padding-bottom: 0.15em; }
  html .hero__cta { font-size: var(--btn-fs-sm) !important; padding: var(--btn-pad-sm) !important; }
  .hero__overlay {
    background: linear-gradient(to top,
      rgba(22,22,22,0.58) 0%, rgba(22,22,22,0.46) 8%, rgba(22,22,22,0.32) 16%,
      rgba(22,22,22,0.18) 24%, rgba(22,22,22,0.08) 32%, rgba(22,22,22,0.02) 40%, rgba(22,22,22,0) 46%) !important;
  }
}
/* HERO-MOBIL-RUHIG:END */
/* HERO-MOBIL-MITTE:START  08.11.2026 Lua: Mittelweg zwischen "Slogan über
   Knopf" (deckt zu viel) und "eine kleine Zeile". Rahmen exakt 4:5 wie der
   Master, also kein Crop. Slogan zweizeilig, Knopf rechts auf Höhe der
   zweiten Zeile. Rückbau: Block löschen. */
@media (max-width: 767px) {
  html .hero--video { height: 125vw !important; }
  html .hero__name,
  html[data-titles="caps"] .hero__name { font-size: min(8.6vw, calc((100vw - 192px) / 5.8)) !important; white-space: nowrap; max-width: none !important; }
  html .hero__ctas { padding-bottom: 0.1em; }
  .hero__overlay {
    background: linear-gradient(to top,
      rgba(22,22,22,0.62) 0%, rgba(22,22,22,0.48) 10%, rgba(22,22,22,0.3) 20%,
      rgba(22,22,22,0.14) 30%, rgba(22,22,22,0.04) 40%, rgba(22,22,22,0) 48%) !important;
  }
}
/* HERO-MOBIL-MITTE:END */
/* CHECKOUT-CONSENT:START  06.11.2026: Pflicht-Häkchen vor dem Kauf (sofortiger
   Download, Widerrufsrecht erlischt, Bedingungen). Text steht zweisprachig im
   Markup, sichtbar ist nur die Sprache der Seite. */
.product-hero__consent { display: flex; gap: 0.6em; align-items: flex-start; margin: 0 0 var(--s3); font-size: 0.8125rem; line-height: 1.45; color: var(--muted); max-width: 34em; cursor: pointer; }
.product-hero__consent input { flex: none; width: 1.05em; height: 1.05em; margin: 0.15em 0 0; accent-color: var(--accent); cursor: pointer; }
.product-hero__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html[lang|="de"] .product-hero__consent [lang="en"],
html:not([lang|="de"]) .product-hero__consent [lang="de"] { display: none; }
/* CHECKOUT-CONSENT:END */

/* KAUF-ZUSTIMMUNG (08.11.): Die Bestaetigung zum Widerrufsrecht erscheint erst
   nach dem ersten Klick auf Bestellen, unter dem Knopf, der Knopf bleibt wo er
   ist. Ohne JavaScript ist sie immer sichtbar (noscript in der Komponente). */
.product-hero__buy .product-hero__btn { order: 1; }
.product-hero__buy .product-hero__consent { order: 2; display: none; margin: var(--s3, 1rem) 0 0; }
.product-hero__buy.is-asking .product-hero__consent { display: flex; animation: consent-reveal .28s cubic-bezier(.2,.8,.2,1); }
.product-hero__consent > span::after { content: " *"; color: var(--cinematic-red, #B62A24); font-weight: 600; }
.product-hero__buy.is-missing .product-hero__consent { color: var(--fg, #161616); }
.product-hero__buy.is-missing .product-hero__consent input { outline: 2px solid var(--cinematic-red, #B62A24); outline-offset: 2px; }
@keyframes consent-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .product-hero__buy.is-asking .product-hero__consent { animation: none; } }
/* KAUF-ZUSTIMMUNG:END */

/* WORK-TABLET:START  06.11.2026 Lua: zwischen 700 und 768 px stand die alte
   Collage-Regel (flex, alles in einer Reihe) noch drin, die neun Kacheln
   wurden 70 px schmal. Dort jetzt dasselbe Zweier-Raster wie knapp darunter. */
@media (min-width: 700px) and (max-width: 768px) {
  html body .work-index:not([data-view="list"]) .work-grid.is-collage {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: var(--s0) !important;
  }
  html body .work-index:not([data-view="list"]) .work-grid.is-collage > .card { flex: none !important; grid-column: auto !important; }
}
/* WORK-TABLET:END */
/* WORK-KATEGORIE:START  06.11.2026 Lua: Kategorie unter dem Titel auf /work
   überall zeigen, nicht nur auf dem Handy (vorher ab 700 px ausgeblendet). */
html body .work-index:not([data-view="list"]) .work-grid.is-collage .card__cat { display: block !important; }
/* Gleiche Reihenfolge wie auf dem Handy: Titel oben, Kategorie darunter */
html body .work-index:not([data-view="list"]) .work-grid.is-collage .card__info { display: flex !important; flex-direction: column-reverse !important; gap: 0.15rem !important; padding-top: 0.6rem !important; }
/* WORK-KATEGORIE:END */
/* AVATAR-ZOOM:START 08.11.2026: Zoom aus dem Studio bei runden Credit-Portraits.
   transform:scale vergroessert sonst den ganzen Kreis. clip-path schneidet ihn
   vor dem Skalieren so zu, dass nach dem Zoom wieder genau der Kreis bleibt. */
.credit-person__portrait[style*="--z"] {
  clip-path: circle(calc(50% / var(--z)) at calc(var(--fx) + (50% - var(--fx)) / var(--z)) calc(var(--fy) + (50% - var(--fy)) / var(--z)));
}
/* AVATAR-ZOOM:END */
/* FOOTER-KONTRAST:START 08.11.2026: Grau-Stufe im orangen Footer erreichte nur
   3.3:1 (PageSpeed Barrierefreiheit). Volles Charcoal auf #D95A0A = 4.66:1. */
.site-footer { --muted: #161616; }
/* FOOTER-KONTRAST:END */