/* ==========================================================================
   jablonowski.at · Produktion (Redesign 2026-10) · globales System
   Quelle: artifact-v3/assets/css/site.css; Produktionsänderungen (Plan §2.8): Rollenzeile der H1 auch
   unter 768 px, metrik-angepasster Fallback „Archivo Fallback“ (gegen Layout-Sprung beim Font-Swap),
   Utility .alias (Alias-Anker für Alt-Links).
   Richtung A „Monitor“: Schauen = Petrol-Bildschirm · Lesen/Ausfüllen = Sand-Papier.
   Akzent nur Phosphorgrün. Dauerhaft nur transform/opacity. Reduced Motion = Endzustand.

   Diese Datei enthält NUR Globales und geteilte Komponenten.
   Seitenspezifisches steht in assets/css/page-<name>.css (z. B. page-home.css).
   Dokumentation der Klassen: round2/BUILD-NOTES.md (Runde 3: Abschnitt 11)

   Inhalt
   01 Fonts & Tokens          09 Hero-Showreel (Start), Titel-Reveal, Monitor
   02 Basis                   10 Beweisleiste, Logo-Leiste
   03 Typo-Rollen             11 Arbeiten-Karten (.wcard) & Raster (.wgrid)
   04 Buttons, Links, Magnet  11b Filter-Chips (.chip)
                              12 Leistungen (.svc)
   05 Labels K1               13 Stimmen (.revs, .quote)
   06 Kopf & Navigation       14 Über mich
   07 Footer                  15 Akkordeon / FAQ / Tiefe
   08 Sektionen & Layout      16 Anfrage-Modul, Klappe, Formular
                              17 Player, Case-Seiten
                              18 Call-Sheet, Ablauf (Playhead), Zeitleiste
                              19 Making-of-Regler (Style Frame → Shot), Loop-Figur
                              20 Cursor „▶ Ansehen“
                              21 View Transitions
                              22 Scroll-Bewegung, Reduced Motion
                              23 Zweite Lesetiefe (.sec--deep, .deep-index),
                                 Einzel-Stimme (.rev-strip), Anfrage-Leiste mobil (.pill)
   ========================================================================== */

/* ---------- 01 Fonts & Tokens ---------- */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var-v1.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-400-v1.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/plex-mono-500-v1.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Metrik-Fallback für Archivo (lokale Arial bzw. Arial Bold), kalibriert per Headless-Chrome-Messung 12.10.2026:
   size-adjust = Breitenverhältnis Archivo/Arial je Gewicht (Mittel aus UI-, Überschriften- und Fließtext: 400 0,986 ·
   700 0,986 · 800 1,036; 900 = Namensmaske der H1 1,135; 500 = Stimmen-Zitat 1,012; 600 = Hero-Lead 0,97,
   damit der Lead bei 390–1920 px gleich umbricht); ascent/descent = Archivo 0,878/0,210, line-gap 0 (Override ÷ size-adjust).
   Ergebnis (Archivo blockiert vs. geladen, Start 390/768/1280/1440 px): alle Abschnittshöhen gleich, Hero-H1 ±2 px Breite. */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 100 449; size-adjust: 98.6%; ascent-override: 89.05%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 450 549; size-adjust: 101.2%; ascent-override: 86.76%; descent-override: 20.75%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 550 649; size-adjust: 97%; ascent-override: 90.52%; descent-override: 21.65%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 650 749; size-adjust: 98.6%; ascent-override: 89.05%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 750 849; size-adjust: 103.6%; ascent-override: 84.75%; descent-override: 20.27%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 850 1000; size-adjust: 113.5%; ascent-override: 77.36%; descent-override: 18.5%; line-gap-override: 0%; }

:root {
  color-scheme: dark;
  /* Markenkern */
  --petrol: #0e1a1a;
  --petrol-2: #142422;
  --petrol-3: #091110;
  --sand: #ede8da;
  --sand-2: #e4ddcc;
  --bone: #ece7d9;
  --bone-muted: #a3aca7;   /* 7,6:1 auf Petrol */
  --coal: #12201e;
  --coal-muted: #4c5854;   /* 6,1:1 auf Sand */
  --rec: #e5342a;

  /* Akzent: nur Phosphorgrün */
  --acc: #3ce882;          /* auf Petrol ≈ 11:1 */
  --acc-deep: #0f6640;     /* auf Sand ≈ 5,6:1, auf Sand 2 ≈ 5,2:1 */
  --acc-ink: #06140c;

  --f-sans: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-mega: clamp(3rem, 6.2vw, 5.75rem);
  --t-h1: clamp(2.25rem, 4.4vw, 3.75rem);
  --t-h2: clamp(1.9rem, 3.4vw, 3rem);
  --t-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --t-lead: clamp(1.1rem, 1.35vw, 1.3rem);
  --t-small: 0.875rem;
  --t-micro: 0.6875rem;

  /* Bewegung */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: var(--ease-out);
  --d-micro: 120ms; --d-ui: 200ms; --d-enter: 320ms; --d-morph: 460ms; --d-title: 560ms;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 84rem;
  --head-h: 4rem;
  --sec: clamp(5rem, 11vw, 9.5rem);

  --z-base: 1; --z-overlay: 5; --z-header: 40; --z-pill: 60; --z-cursor: 90; --z-skip: 100;
}
.sub { --sec: clamp(4rem, 8vw, 7rem); }

[data-block="dark"] {
  --bg: var(--petrol); --ink: var(--bone); --muted: var(--bone-muted);
  --line: rgba(236, 231, 217, 0.16); --line-soft: rgba(236, 231, 217, 0.08);
  --accent: var(--acc); --panel: var(--petrol-2);
  background: var(--bg); color: var(--ink);
}
[data-block="sand"] {
  --bg: var(--sand); --ink: var(--coal); --muted: var(--coal-muted);
  --line: rgba(18, 32, 30, 0.22); --line-soft: rgba(18, 32, 30, 0.1);
  --accent: var(--acc-deep); --panel: var(--sand-2);
  background: var(--bg); color: var(--ink); color-scheme: light;
}

/* ---------- 02 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: #0e1a1a; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 1rem); }
/* A2: Fokusziele nicht unter der mobilen Anfrage-Leiste (.pill, ≈ 61 px + Safe Area) */
@media (max-width: 999px) { html { scroll-padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open { overflow: hidden; }
body {
  background: var(--petrol); color: var(--bone);
  font-family: var(--f-sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
p { text-wrap: pretty; }
ul, ol { list-style: none; }
::selection { background: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--accent, var(--acc)); outline-offset: 3px; }
[data-block="sand"] :focus-visible { outline-color: var(--coal); }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Alias-Anker (Plan §1.4): leeres <span class="alias" id="…"></span> am Abschnittsanfang für Alt-Links (/#kontakt, /en/#films …).
   Außerhalb des Flusses (belegt keine Grid-/Flex-Zelle); Scroll-Abstand wie Abschnitte über html { scroll-padding-top }. */
.alias { position: absolute; width: 1px; height: 1px; overflow: hidden; pointer-events: none; scroll-margin-top: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: var(--z-skip); background: var(--acc); color: var(--acc-ink); padding: 0.75rem 1rem; font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ---------- 03 Typo-Rollen ---------- */
.mega { font-size: var(--t-mega); font-weight: 900; letter-spacing: -0.035em; line-height: 0.92; }
.mega--long { font-size: clamp(2.4rem, 6.2vw, 5.75rem); }
.h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
.h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.h3 { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 34em; }
/* H2 mit Keyword-Zusatz: Wort bleibt groß, Zusatz als Mono-Zeile (wie im Hub) */
.h2-colon { color: var(--accent); }
.h2-k { display: block; margin-top: 0.55rem; font-family: var(--f-mono); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--muted); }
.small { font-size: var(--t-small); }
.kicker { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); }
/* Mono-Kicker in Versalien mit Phosphor-Strich (Szenen-Kopf) */
.slate { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.slate::before { content: ""; width: 1.25rem; height: 1.5px; background: var(--accent); flex: none; }
/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.25rem; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.crumbs .sep { opacity: 0.6; }

/* ---------- 04 Buttons, Links, Magnet ---------- */
.btn {
  --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3rem; padding: 0 1.25rem;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd); border-radius: 2px;
  font-weight: 700; font-size: 0.97rem; text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.btn:hover { --b-bd: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--primary { --b-bg: var(--acc); --b-fg: var(--acc-ink); --b-bd: var(--acc); }
[data-block="sand"] .btn--primary { --b-bg: var(--coal); --b-fg: var(--sand); --b-bd: var(--coal); }
.btn--primary:hover { --b-bd: var(--b-bg); filter: brightness(1.06); }
.btn-in { display: inline-flex; align-items: center; gap: 0.55rem; }
.btn .arr { transition: transform .3s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }
/* Tally-Licht: Akzentpunkt im Primärknopf auf Sand */
[data-block="sand"] .btn--primary::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--acc); flex: none; }

.link {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem;
  font-weight: 700; text-decoration: none; color: var(--ink); justify-self: start;
  background: linear-gradient(var(--accent), var(--accent)) 0 calc(100% - 0.55rem) / 100% 1.5px no-repeat;
}
.link .arr { transition: transform .3s var(--ease-out); }
.link:hover .arr { transform: translateX(3px); }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; }
/* Mehrzeilige Links (schmale Spalten): Unterstrich folgt jeder Zeile statt die zweite zu durchkreuzen */
.link--wrap, .bsp-learn .link, .pp-more .link, .fp-faq .col .link {
  display: inline; min-height: 0; padding-block: 0.35rem; line-height: 1.5; background: none;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
}
/* Fließtext-Links (z. B. eigene Unternehmen): unterstrichen, ohne Pfeil-Rauschen */
.tlink { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.tlink:hover { text-decoration-thickness: 2.5px; }

/* M9 Magnet: unsichtbare Zone 18 px um den Knopf, nur Desktop (JS) */
.magnet { display: inline-block; padding: 18px; margin: -18px; }
.magnet .btn, .magnet .btn-in { transition: transform 90ms linear, background-color .25s var(--ease-out), border-color .25s var(--ease-out); }
.magnet .btn.is-release, .magnet .btn.is-release .btn-in { transition: transform 520ms var(--ease-spring), background-color .25s var(--ease-out), border-color .25s var(--ease-out); }

/* ---------- 05 Labels K1 (Form statt nur Farbe) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  padding: 0.42em 0.6em; border: 1px solid currentColor; white-space: nowrap;
}
.tag--client { color: var(--ink); }
.tag--spec { border-style: dashed; color: var(--muted); }
.tag--ai { border-color: transparent; background: rgba(9, 17, 16, 0.8); color: var(--bone); }
[data-block="sand"] .tag--ai:not(.on-media) { background: var(--coal); color: var(--sand); }
.tag--net { font-size: 0.625rem; padding: 0.3em 0.45em; color: var(--muted); border-color: var(--line); }
.tag--demo { border-style: dotted; color: var(--muted); }
.on-media { position: absolute; z-index: var(--z-overlay); }

/* ---------- 06 Kopf & Navigation (max. 4 Punkte + CTA) ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header);
  background: var(--petrol); border-bottom: 1px solid var(--line-soft);
  view-transition-name: site-head;
}
.head-row { display: flex; align-items: center; gap: 1.25rem; height: var(--head-h); }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; margin-right: auto; min-height: 2.75rem; }
.wordmark-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rec); flex: none; }
.wordmark-text { transition: opacity .3s var(--ease-out); }
/* Startseite mobil: Name steht als H1 im Hero, Wortmarke erst danach */
@media (max-width: 999px) { .site-head.is-at-hero .wordmark-text { opacity: 0; } }
/* A8: per Tastatur fokussiert ist der Name sichtbar */
@media (max-width: 999px) { .site-head.is-at-hero .wordmark:focus-visible .wordmark-text { opacity: 1; } }

.head-nav { display: none; align-items: center; gap: 0.1rem; }
.head-nav > a, .nav-dd > summary {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 0.75rem;
  text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--muted); cursor: pointer; list-style: none;
  transition: color var(--d-ui);
}
.nav-dd > summary::-webkit-details-marker { display: none; }
.head-nav > a::before, .nav-dd > summary::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--acc);
  opacity: 0; transform: scale(0.4); transition: opacity .25s, transform .3s var(--ease-out);
}
.head-nav > a:hover, .head-nav > a[aria-current], .nav-dd > summary:hover, .nav-dd[open] > summary, .nav-dd.is-current > summary { color: var(--ink); }
.head-nav > a[aria-current]::before, .nav-dd.is-current > summary::before { opacity: 1; transform: none; }
.nav-dd { position: relative; }
.nav-dd > summary::after {
  content: ""; width: 0.42rem; height: 0.42rem; margin-left: 0.1rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.75; transition: transform var(--d-ui) var(--ease-out);
}
.nav-dd[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.nav-panel {
  position: absolute; top: calc(100% + 0.65rem); left: -0.75rem; width: 26rem; display: grid; padding: 0.4rem;
  background: var(--petrol-2); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.nav-panel a { position: relative; display: grid; gap: 0.1rem; align-content: center; min-height: 3.5rem; padding: 0.55rem 0.9rem 0.55rem 1.15rem; text-decoration: none; }
.nav-panel a b { font-weight: 700; color: var(--ink); }
.nav-panel a span { font-size: 0.82rem; color: var(--muted); line-height: 1.35; }
.nav-panel a::before { content: ""; position: absolute; left: 0.4rem; top: 0.65rem; bottom: 0.65rem; width: 2px; background: var(--acc); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--d-ui) var(--ease-out); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(236, 231, 217, 0.04); }
.nav-panel a:hover::before, .nav-panel a:focus-visible::before, .nav-panel a[aria-current]::before { transform: none; }
.nav-panel a:focus-visible { outline-offset: -2px; }
.head-lang { display: none; font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); text-decoration: none; min-height: 2.75rem; align-items: center; padding: 0 0.5rem; }
.head-lang:hover { color: var(--ink); }
.head-cta { display: none; min-height: 2.5rem; padding: 0 1rem; font-size: 0.9rem; }

/* Burger 44 × 44, zwei Linien → ✕ */
.menu-btn { position: relative; display: inline-block; width: 2.75rem; height: 2.75rem; margin-right: -0.6rem; color: var(--ink); }
.menu-btn .bar { position: absolute; left: 0.7rem; right: 0.7rem; height: 1.6px; background: currentColor; transition: transform var(--d-ui) var(--ease-out); }
.menu-btn .bar--a { top: calc(50% - 4px); }
.menu-btn .bar--b { top: calc(50% + 3px); }
.menu-btn[aria-expanded="true"] .bar--a { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bar--b { transform: translateY(-3.5px) rotate(-45deg); }
/* Mobil-Panel */
.mnav {
  position: fixed; inset: calc(var(--head-h) + env(safe-area-inset-top, 0px)) 0 0; z-index: calc(var(--z-pill) + 5);
  overflow-y: auto; overscroll-behavior: contain; background: var(--petrol); border-top: 1px solid var(--line-soft);
  padding: 0.75rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
}
.mnav-list > li > a { display: flex; align-items: center; min-height: 3.5rem; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.mnav-k { display: block; padding: 1.15rem 0 0.35rem; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.mnav-sub a { display: flex; align-items: center; min-height: 3rem; padding-left: 1rem; font-weight: 600; font-size: 1.1rem; text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.mnav a[aria-current] { box-shadow: inset 2px 0 0 var(--acc); padding-left: 0.85rem; }
.mnav-sub a[aria-current] { padding-left: 1rem; }
.mnav .btn { width: 100%; margin-top: 1.5rem; }
.mnav-lang { display: flex; align-items: center; min-height: 3rem; margin-top: 0.5rem; font-family: var(--f-mono); font-size: 0.85rem; color: var(--muted); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .nav-dd[open] .nav-panel { animation: pj-drop 180ms var(--ease-out) both; }
  .mnav.is-open { animation: pj-drop 200ms var(--ease-out) both; }
  .mnav.is-open .mnav-list > li { animation: pj-item 260ms var(--ease-out) both; }
  .mnav.is-open .mnav-list > li:nth-child(2) { animation-delay: 30ms; }
  .mnav.is-open .mnav-list > li:nth-child(3) { animation-delay: 60ms; }
  .mnav.is-open .mnav-list > li:nth-child(4) { animation-delay: 90ms; }
  .mnav.is-open .mnav-list > li:nth-child(5) { animation-delay: 120ms; }
  .mnav.is-open .mnav-list > li:nth-child(n+6) { animation-delay: 150ms; }
  @keyframes pj-drop { from { opacity: 0; transform: translateY(-6px); } }
  @keyframes pj-item { from { transform: translateY(8px); } }
}
@media (min-width: 1000px) {
  .head-nav, .head-lang, .head-cta { display: inline-flex; }
  .menu-btn, .mnav { display: none !important; }
}

/* ---------- 07 Footer (jede Seite) ---------- */
.foot { background: var(--petrol-3); color: var(--bone-muted); font-size: var(--t-small); line-height: 1.5; padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; border-top: 1px solid var(--line-soft); }
.foot-grid { display: grid; gap: 2.25rem 2rem; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; } }
.foot-brand { display: grid; gap: 0.7rem; align-content: start; max-width: 22rem; }
.foot-brand .wordmark { margin: 0; color: var(--bone); }
.foot-brand p { color: var(--bone-muted); }
.foot-h { margin-bottom: 0.4rem; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-muted); }
.foot a { color: var(--bone); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; }
@media (min-width: 1000px) and (pointer: fine) { .foot li a { min-height: 2.25rem; } }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
.foot-co a { display: block; min-height: 0; padding: 0.45rem 0; }
.foot-co a b { font-weight: 700; }
.foot-co a .d { color: var(--bone-muted); }
.foot-co a:hover .d { color: var(--bone); }
.foot-co .ext { color: var(--acc); margin-left: 0.2rem; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
/* D3: Rechtszeile mobil enger (EN ab 390 px einzeilig). Passt sie nicht in eine Zeile (DE: Textbreite ≈ 382 px wegen
   „Cookie-Einstellungen“, einzeilig erst ab ≈ 480 px), bricht sie gewollt nach dem dritten Link um:
   LinkedIn + Sprache als zweite, linksbündige Gruppe (leeres Flex-Element mit voller Breite, DOM-Reihenfolge bleibt) */
@media (max-width: 767px) { .foot-legal { column-gap: 0.9rem; } }
@media (max-width: 519px) {
  html:lang(de) .foot-legal::before { content: ""; flex-basis: 100%; order: 1; }
  html:lang(de) .foot-legal > :nth-child(n+4) { order: 2; }
}
@media (max-width: 389px) {
  html:lang(en) .foot-legal::before { content: ""; flex-basis: 100%; order: 1; }
  html:lang(en) .foot-legal > :nth-child(n+4) { order: 2; }
}
@media (max-width: 999px) { .foot { padding-bottom: 5.5rem; } }

/* ---------- 08 Sektionen & Layout ---------- */
.sec { padding-block: var(--sec); }
.sec[data-block="dark"] + .sec[data-block="dark"] { border-top: 1px solid var(--line-soft); padding-top: clamp(3rem, 6vw, 5rem); }
.sec[data-block="sand"] + .sec[data-block="sand"] { border-top: 1px solid var(--line-soft); padding-top: clamp(3rem, 6vw, 5rem); }
/* F-02 Teil 1 (Audit 14.10.2026): Abschnitte unterhalb des ersten Bildschirms erst zeichnen, wenn sie in die Nähe kommen.
   Ab dem 3. Kind von <main>: Hero und erster Abschnitt bleiben normal (kein CLS). „auto“ merkt sich die echte Höhe.
   html.cv-off (site.js, nur kurz vor einem Sprung zu #ziel): alle Abschnitte zeichnen, damit das Ziel richtig liegt;
   danach gelten die gemerkten Höhen. */
main > section.sec:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
html.cv-off main > section.sec:nth-child(n+3) { content-visibility: visible; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.sec-head > div { display: grid; gap: 0.9rem; }
.sec-head p { color: var(--muted); max-width: 30em; }
.page-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero .h1 { max-width: 20em; }
.page-hero .lead { margin-top: 1.25rem; color: var(--muted); }
.split { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.split--even { align-items: center; }
@media (min-width: 900px) { .split--even { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.stack { display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); }
.stack > .split + .split { padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line-soft); }
.col { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.duo { display: grid; gap: 3rem; }
@media (min-width: 960px) { .duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; } .duo > * + * { border-left: 1px solid var(--line); padding-left: clamp(2rem, 4vw, 3.5rem); } .duo > :first-child { padding-right: clamp(2rem, 4vw, 3.5rem); } }
.duo-col { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.duo-col .sheet { width: 100%; }
.duo-col p.muted { max-width: 30em; }

/* ---------- 09 Hero-Showreel (Start DE/EN), Titel-Reveal (M1), Monitor + Rack Focus (M4) ---------- */
.hero + .sec { padding-top: clamp(3.5rem, 7vw, 6rem); }
.hero-kicker { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.hero-name { display: grid; gap: 0.9rem; }
.hero-name .nm { font-size: var(--t-mega); font-weight: 900; letter-spacing: -0.035em; line-height: 0.9; }
/* Clip-Zeilen: Unterlänge des „J“ bleibt sichtbar */
.hero-name .ln { display: block; overflow: hidden; padding-block: 0.06em 0.14em; margin-block: -0.06em -0.14em; }
.hero-name .ln > span { display: block; }
.hero-name .role { font-family: var(--f-mono); font-weight: 400; font-size: 0.95rem; letter-spacing: 0; color: var(--muted); line-height: 1.4; max-width: 30em; }
.hero-name .role .dash { color: var(--acc); }
/* Start: Angebot + Preisanker als Lead (Deutsch), der englische Claim leise darunter */
.hero-lead { margin-top: 1.4rem; font-size: clamp(1.2rem, 1.75vw, 1.5rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; max-width: 24em; color: var(--ink); }
.hero-lead b { font-weight: 800; white-space: nowrap; background: linear-gradient(var(--accent), var(--accent)) 0 96% / 100% 1.5px no-repeat; }
.hero-sig { margin-top: 0.9rem; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.02em; line-height: 1.5; color: var(--muted); }
.hero-sig span { white-space: nowrap; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; align-items: center; }

/* Vollflächiges Showreel hinter Name und Claim (Runde 3, Reel v3 · round3/reel/EDL.md §v3).
   Die Labels (Kundenprojekt / Concept Film · Spec) sind ins Video gebrannt, je Fassung an eigener Stelle:
   Desktop 1920 (16:9, unten rechts) · Handy 640×1280 (1:2, oben rechts neben dem Pause-Knopf) · kleines Querformat 960 (unten rechts, größer).
   Desktop: Bühne = erster Bildschirm unter dem Kopf. object-position 100 % 70 %: schmaler als 16:9 wird nur links beschnitten
   (unter der Textspalte), breiter als 16:9 vor allem oben → das Label unten rechts bleibt in jedem Seitenverhältnis im Bild.
   Hochformat: 1:2-Schnitt oben verankert (Handlung in den oberen 40 %), Text unten auf eigener Abdunklung, Logo-Leiste darunter.
   Niedriges Querformat (Handy quer, ≤ 500 px hoch): Bühne = Bildschirm, Text darunter auf Petrol. */
.hero--reel {
  --hero-h: calc(100svh - var(--head-h) - 1px);   /* −1 px = Haarlinie unter dem Kopf */
  --reel-col: min(44rem, 58vw - var(--gutter));
  --muted: #c4cac6;   /* auf dem Bild etwas heller als --bone-muted */
  --tshadow: 0 0 2px rgba(5, 10, 10, 0.9), 0 1px 4px rgba(5, 10, 10, 0.8);   /* enge Kontur für kleine Schrift über bewegtem Bild */
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto; min-height: max(var(--hero-h), 26rem); background: var(--petrol-3);
}
.reel-stage { grid-area: 1 / 1 / 3 / 2; position: relative; z-index: 0; overflow: hidden; background: #050a0a; }
.reel-media { position: absolute; inset: 0; }
/* Poster und Video teilen dieselbe Ausrichtung: beim Wechsel springt nichts */
.reel-media img, .reel-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 70%; }
/* Video 1 px schmaler als das Poster: das Poster bleibt das LCP-Element; es bleibt darunter liegen (kein Schwarzbild beim Loop-Neustart) */
.reel-media video { left: 1px; width: calc(100% - 2px); opacity: 0; transition: opacity .45s var(--ease-out); }
.reel-stage.is-live .reel-media video { opacity: 1; }
.reel-scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 17, 16, 0.86) 0%, rgba(9, 17, 16, 0.78) 30%, rgba(9, 17, 16, 0.38) 50%, rgba(9, 17, 16, 0) 68%),
    linear-gradient(0deg, rgba(9, 17, 16, 0.82) 0%, rgba(9, 17, 16, 0.3) 30%, rgba(9, 17, 16, 0) 52%),
    linear-gradient(180deg, rgba(9, 17, 16, 0.5) 0%, rgba(9, 17, 16, 0) 16%);
}
.reel-stage .finder { inset: clamp(0.9rem, 1.8vw, 1.5rem) calc(var(--gutter) * 0.5); z-index: 1; }
.reel-stage .finder i, .finder-m i { border-color: rgba(236, 231, 217, 0.6); }
.reel-stage .finder i, .finder-m i { width: clamp(1.1rem, 1.8vw, 1.6rem); height: clamp(1.1rem, 1.8vw, 1.6rem); }
.reel-in > .finder-m { display: none; }

.reel-in { grid-area: 1 / 1 / 2 / 2; z-index: 1; display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; padding-block: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.5rem, 3vw, 2.25rem); }
.reel-in .hero-copy { grid-area: 2 / 1 / 3 / 2; align-self: end; display: grid; justify-items: start; max-width: var(--reel-col); text-shadow: 0 1px 22px rgba(9, 17, 16, 0.55); }
.hero--reel .hero-kicker { color: var(--bone); }
.hero--reel .hero-kicker, .hero--reel .hero-name .role, .hero--reel .hero-sig, .hero--reel .logos-k { text-shadow: var(--tshadow); }
.nw { white-space: nowrap; }
.hero--reel .hero-name .nm { font-size: clamp(2.75rem, min(5.6vw, 10svh), 6rem); }
.hero--reel .hero-name .role { color: var(--bone); opacity: 0.9; }
.hero--reel .hero-lead { color: var(--bone); }
.hero--reel .btn:not(.btn--primary) { --b-bg: rgba(9, 17, 16, 0.5); --b-bd: rgba(236, 231, 217, 0.5); text-shadow: none; }
.hero--reel .btn:not(.btn--primary):hover { --b-bd: var(--bone); }

/* Statuszeile oben links im Sucher: Pause/Abspielen (WCAG 2.2.2) · REC · Timecode (25 fps) */
.reel-bar { grid-area: 1 / 1 / 2 / 2; position: relative; z-index: 1; display: flex; align-items: center; gap: 0.65rem; justify-self: start; font-family: var(--f-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--bone); }
.reel-pause { position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.35rem 0 -0.35rem -0.55rem; color: var(--bone); }
.reel-pause::before { content: ""; position: absolute; inset: 0.4rem; border: 1px solid rgba(236, 231, 217, 0.5); border-radius: 2px; background: rgba(5, 10, 10, 0.55); transition: border-color var(--d-ui); }
.reel-pause:hover::before { border-color: var(--bone); }
.reel-pause svg { position: relative; width: 0.7rem; height: 0.7rem; fill: currentColor; }
.reel-pause .i-play, .reel-pause[data-state="paused"] .i-pause { display: none; }
.reel-pause[data-state="paused"] .i-play { display: block; }
.reel-pause:focus-visible { outline-offset: -2px; }
.reel-rec { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; background: rgba(5, 10, 10, 0.55); }
.reel-rec .rec-dot { box-shadow: none; }
.reel-rec b { font-weight: 500; letter-spacing: 0.08em; }
.reel-tc { display: inline-block; min-width: 11ch; contain: layout paint; }
.hero--reel.is-playing .reel-rec .rec-dot { opacity: 1; animation: rec 1.6s steps(1, end) infinite; }

/* Desktop-Querformat: Logo-Leiste am unteren Bildrand in der Textspalte */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 501px) {
  .hero--reel .proof { grid-area: 2 / 1 / 3 / 2; z-index: 1; }
}
/* Schmale Querformate (Tablet quer, kleine Fenster): Textspalte schmaler, damit die Leiste nicht in das Label unten rechts läuft */
@media (orientation: landscape) and (max-width: 1099px) and (min-height: 501px) {
  .hero--reel { --reel-col: min(44rem, 52vw - var(--gutter)); }
  /* Textspalte nimmt hier relativ mehr Breite ein: Abdunklung reicht weiter nach rechts */
  .reel-scrim { background:
    linear-gradient(90deg, rgba(9, 17, 16, 0.86) 0%, rgba(9, 17, 16, 0.8) 40%, rgba(9, 17, 16, 0.42) 58%, rgba(9, 17, 16, 0) 76%),
    linear-gradient(0deg, rgba(9, 17, 16, 0.82) 0%, rgba(9, 17, 16, 0.3) 30%, rgba(9, 17, 16, 0) 52%),
    linear-gradient(180deg, rgba(9, 17, 16, 0.5) 0%, rgba(9, 17, 16, 0) 16%); }
}
/* Laptops mit wenig Höhe (1366×657, 1536×730, 1440×790 …): Kopie + Leiste passen in den ersten Bildschirm */
@media (orientation: landscape) and (max-height: 820px) and (min-height: 501px) {
  .hero--reel .hero-sig { display: none; }
  .hero--reel .hero-kicker { margin-bottom: 0.8rem; }
  .hero--reel .hero-name { gap: 0.6rem; }
  .hero--reel .hero-lead { margin-top: 0.9rem; }
  .hero--reel .hero-ctas { margin-top: 1.1rem; }
  .hero--reel .reel-in { gap: 1rem; padding-block: 1.1rem 1.1rem; }
}

/* Hochformat (Handy, Tablet hoch) und schmale Fenster: 1:2-Loop oben verankert, Text unten auf eigener Abdunklung, Leiste darunter */
@media (orientation: portrait), (max-width: 767px) and (min-height: 501px) {
  .hero--reel { --hero-h: max(100svh - var(--head-h) - 1px, 26rem); --reel-col: 100%; min-height: 0; grid-template-rows: minmax(var(--hero-h), auto) auto; background: var(--petrol); }
  .reel-stage { grid-area: 1 / 1 / 2 / 2; }
  .reel-media img, .reel-media video { object-position: 50% 0%; }
  .reel-scrim { background: linear-gradient(180deg, rgba(9, 17, 16, 0.5) 0%, rgba(9, 17, 16, 0) 16%); }
  /* Sucherecken rahmen genau die Bildzone über dem Text: eigenes Grid-Element statt absolut in der Bühne */
  .reel-stage .finder { display: none; }
  .reel-in { grid-template-rows: auto minmax(2.5rem, 1fr) auto; gap: 0; padding-bottom: 0.25rem; }
  .reel-in > .finder-m { display: block; position: relative; inset: auto; grid-area: 1 / 1 / 3 / 2; align-self: stretch; margin: -0.5rem calc(var(--gutter) * -0.5) 1.25rem; z-index: 0; }
  /* nur Pause-Knopf, keine REC-Box im kleinen Bildstreifen (das Label steht oben rechts im Video) */
  .reel-rec { display: none; }
  .reel-in .hero-copy { grid-area: 3 / 1 / 4 / 2; position: relative; isolation: isolate; text-shadow: none; }
  /* Abdunklung am Textblock verankert (nicht in % der Bühne): Kicker, Name und Lead bleiben über jedem Reel-Bild lesbar */
  .reel-in .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -3.5rem calc(var(--gutter) * -1) -0.5rem; pointer-events: none;
    background: linear-gradient(0deg, rgba(14, 26, 26, 0.96) 0, rgba(14, 26, 26, 0.93) calc(100% - 3.5rem), rgba(14, 26, 26, 0.55) calc(100% - 1.75rem), rgba(14, 26, 26, 0) 100%); }
  .hero--reel .hero-kicker { margin-bottom: 0.75rem; }
  .hero--reel .hero-name .nm { font-size: clamp(2.4rem, min(12.4vw, 7.5svh), 4.5rem); }
  .hero--reel .hero-name .role { font-size: 0.82rem; }
  .hero--reel .hero-lead { margin-top: 0.9rem; font-size: clamp(1.06rem, 4.4vw, 1.3rem); }
  .hero--reel .hero-ctas { margin-top: 1.2rem; gap: 0.6rem; }
  .hero--reel .proof { grid-area: 2 / 1 / 3 / 2; }
}
/* unter 768 px: Claim-Zeile aus; die Rollenzeile der H1 bleibt sichtbar (H1-Text = aria-label), klein und umbrechend */
@media (max-width: 767px) {
  .hero--reel .hero-sig { display: none; }
  .hero--reel .hero-name { gap: 0.5rem; }
  .hero--reel .hero-name .role { font-size: 0.75rem; line-height: 1.35; max-width: 100%; overflow-wrap: anywhere; }
}

/* Handy quer und andere niedrige Querformate: Bühne = Bildschirm (Label unten rechts bleibt im Bild), Text darunter auf Petrol */
@media (orientation: landscape) and (max-height: 500px) {
  .hero--reel { --reel-col: min(40rem, 100%); min-height: 0; grid-template-rows: var(--hero-h) auto auto; background: var(--petrol); }
  .reel-stage { grid-area: 1 / 1 / 2 / 2; }
  .reel-scrim { background: linear-gradient(180deg, rgba(9, 17, 16, 0.5) 0%, rgba(9, 17, 16, 0) 22%); }
  .reel-in { display: contents; }
  .reel-bar { grid-area: 1 / 1 / 2 / 2; align-self: start; margin: 1rem calc(var(--gutter) * 0.5 + 1.1rem); }
  .reel-in .hero-copy { grid-area: 2 / 1 / 3 / 2; padding: 1.75rem var(--gutter) 0.5rem; max-width: calc(var(--reel-col) + var(--gutter) * 2); text-shadow: none; }
  .hero--reel .hero-name .nm { font-size: clamp(2.4rem, 6vw, 3.5rem); }
  .hero--reel .proof { grid-area: 3 / 1 / 4 / 2; }
}
@media (max-width: 420px) { .hero-ctas .btn { padding: 0 0.9rem; font-size: 0.92rem; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-intro) .hero-name .ln > span { animation: pj-title var(--d-title) var(--ease-out-expo) both; }
  html:not(.no-intro) .hero-name .nm .ln + .ln > span { animation-delay: 70ms; }
  html:not(.no-intro) .hero-name .role > span { animation-duration: 440ms; animation-delay: 240ms; }
  /* Bild setzt sich, während der Name einläuft; Sucherecken rasten ein (nur transform, Poster ist ab Frame 1 sichtbar) */
  html:not(.no-intro) .reel-media { animation: pj-settle 1600ms var(--ease-out-expo) both; }
  html:not(.no-intro) .reel-stage .finder, html:not(.no-intro) .reel-in > .finder-m { animation: pj-lock 520ms var(--ease-spring) 300ms both; }
  @keyframes pj-title { from { transform: translateY(105%); } }
  @keyframes pj-lock { from { transform: scale(1.06); } }
  @keyframes pj-settle { from { transform: scale(1.05); } }
}

.mon { position: relative; background: var(--petrol-3); border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem; }
.mon-screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: #050a0a; }
.mon-layer { position: absolute; inset: 0; }
.mon-layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Video minimal kleiner als das Poster: das Standbild bleibt das LCP-Element */
.mon-layer > video { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-out); }
.mon-screen.is-live .mon-layer > video { opacity: 1; }
.mon-screen.is-live .mon-layer > img { opacity: 0; transition: opacity 0s .5s; }
.finder { position: absolute; inset: 5% 3.2%; pointer-events: none; z-index: 2; }
.finder i { position: absolute; width: 1.4rem; height: 1.4rem; border-color: rgba(236, 231, 217, 0.75); border-style: solid; border-width: 0; }
.finder i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.finder i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.finder i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.finder i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
/* REC + Timecode innerhalb der Sucherecke oben rechts */
.rec {
  position: absolute; top: calc(5% + 0.6rem); right: calc(3.2% + 0.6rem); z-index: 3;
  display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--bone);
}
.rec-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--rec); opacity: 0.4; box-shadow: 0 0 0 3px rgba(5, 10, 10, 0.45); flex: none; }
.rec [data-mon-tc] { background: rgba(5, 10, 10, 0.6); padding: 0.25rem 0.45rem; visibility: hidden; }
.mon.is-playing .rec [data-mon-tc] { visibility: visible; }
.mon.is-playing .rec-dot { opacity: 1; animation: rec 1.6s steps(1, end) infinite; }
@keyframes rec { 50% { opacity: 0.25; } }
@media (max-width: 599px) { .rec [data-mon-tc] { display: none; } }
/* Label oben links: unten liegen bei Kundenspots Pflichtangaben (Spielerschutz-Leiste) */
.mon-screen .tag--ai { left: calc(3.2% + 0.6rem); top: calc(5% + 0.6rem); }
.mon-foot { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.15rem 0.1rem 0.35rem; min-height: 3.25rem; }
.mon-cap { flex: 1; min-width: 0; font-size: var(--t-small); color: var(--muted); line-height: 1.35; }
.mon-cap b { color: var(--bone); font-weight: 600; }
.mon-ctrl { display: flex; align-items: center; gap: 0.1rem; }
/* Kanäle: ziffernlose Fortschritts-Haarlinien */
.ch { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--muted); }
.ch-bar { position: relative; display: block; width: 2rem; height: 2px; overflow: hidden; background: rgba(236, 231, 217, 0.22); transition: background-color .2s; }
.ch-bar::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); }
.ch:hover .ch-bar { background: rgba(236, 231, 217, 0.45); }
.ch[aria-pressed="true"] .ch-bar::after { transform: scaleX(var(--p, 1)); transition: transform .26s linear; }
.ch-pause { margin-left: 0.4rem; border: 1px solid var(--line); border-radius: 2px; color: var(--bone); }
.ch-pause:hover { border-color: rgba(236, 231, 217, 0.45); }
.ch-pause svg { width: 0.7rem; height: 0.7rem; fill: currentColor; }
.ch-pause .i-play { display: none; }
.ch-pause[aria-pressed="true"] .i-play { display: block; }
.ch-pause[aria-pressed="true"] .i-pause { display: none; }

/* ---------- 10 Beweisleiste K2 (Billing Block) ---------- */
.proof { display: grid; gap: 0.9rem 2.5rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.35rem; border-top: 1px solid var(--line); align-items: center; }
.billing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.1rem; }
.billing-k { flex-basis: 100%; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.billing b {
  font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62; text-transform: uppercase;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: 0.01em; line-height: 1.1;
}
.billing i { width: 1px; height: 1.05rem; background: var(--line); align-self: center; }
@media (max-width: 699px) { .billing { gap: 0.25rem 0.9rem; } .billing i { display: none; } }
.stars { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; text-decoration: none; font-size: var(--t-small); color: var(--muted); }
.stars b { color: var(--ink); font-weight: 700; }
.stars .st { color: var(--accent); letter-spacing: 0.08em; font-size: 0.95rem; }
.stars:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) { .proof { grid-template-columns: 1fr auto; } }

/* Logo-Leiste (Start DE/EN, Runde 3): monochrome Kundenlogos in Sand (Gruppe 80 %), gleiche CSS-Höhe,
   die optische Balance steckt in den viewBoxen (round3/assets/README.md B). Name steht im alt. Kein Laufband, keine Bewegung. */
.proof--logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 2.5rem; margin-top: 0; padding-block: 1.1rem clamp(1.4rem, 2.6vw, 2rem); border-top: 0; }
.proof--logos .wrap-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2.5rem; width: 100%; max-width: var(--reel-col, 100%); padding-top: 1.1rem; border-top: 1px solid rgba(236, 231, 217, 0.24); }
.logos-k { flex-basis: 100%; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem clamp(2rem, 3.4vw, 3rem); }
.logos li { display: flex; align-items: center; }
.logos img { height: 2.75rem; width: auto; }
.proof--logos .stars { color: var(--bone); }
/* niedrige oder schmale Querformate: Leiste kompakter, Kennzeile in derselben Zeile wie die Logos */
@media (orientation: landscape) and (min-height: 501px) and (max-height: 820px), (orientation: landscape) and (min-height: 501px) and (max-width: 1099px) {
  .proof--logos { padding-block: 0.6rem 1rem; }
  .proof--logos .wrap-in { gap: 0.4rem 1.75rem; padding-top: 0.7rem; }
  .logos-k { flex-basis: auto; }
  .logos { gap: 0.6rem 1.75rem; }
  .logos img { height: 2.125rem; }
}
@media (orientation: portrait), (max-width: 767px) and (min-height: 501px), (orientation: landscape) and (max-height: 500px) {
  .proof--logos { padding-block: 0.4rem 0.5rem; }
  .proof--logos .wrap-in { gap: 0.6rem 1.5rem; border-top-color: var(--line); }
  .logos { gap: 0.75rem clamp(1.25rem, 6vw, 2.1rem); }
  .logos img { height: min(2.125rem, 8.6vw); }
}

/* ---------- 11 Arbeiten-Karten (.wcard) & Raster (.wgrid) · M5 Hover-Vorschau ---------- */
.wgrid { display: grid; gap: clamp(2.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
@media (min-width: 860px) {
  .wgrid--2, .wgrid--3, .wgrid[data-layout="duo"], .wgrid[data-layout="feature"], .wgrid[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .wgrid--3, .wgrid[data-layout="feature"], .wgrid[data-layout="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wgrid--4, .wgrid[data-layout="specs"] { gap: 2.25rem clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 600px) { .wgrid--4, .wgrid[data-layout="specs"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wgrid--4, .wgrid[data-layout="specs"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wgrid > .wcard--feature { grid-column: 1 / -1; }

.wcard { position: relative; display: grid; gap: 1rem; align-content: start; min-width: 0; }
.wcard-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--petrol-3); isolation: isolate; }
.wcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.wcard--contain .wcard-media img { object-fit: contain; }
.wcard:not(.wcard--contain):hover .wcard-media img { transform: scale(1.03); }
.wcard-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms var(--ease-out); }
.wcard.is-previewing .wcard-media video { opacity: 1; }
.wcard .finder { inset: 3% 1.8%; z-index: 2; opacity: 0; transform: scale(1.1); transition: opacity 140ms var(--ease-in), transform 160ms var(--ease-in); }
.wcard:hover .finder, .wcard:focus-within .finder, .wcard.is-previewing .finder { opacity: 1; transform: none; transition: opacity 120ms linear, transform 240ms var(--ease-spring); }
.wcard .finder i { width: 1.1rem; height: 1.1rem; }
.wcard-tags { position: absolute; left: calc(1.8% + 1.1rem); top: calc(3% + 1.1rem); z-index: 3; display: flex; gap: 0.4rem; }
.wcard-tc {
  position: absolute; right: calc(1.8% + 1.1rem); top: calc(3% + 1.1rem); z-index: 3; contain: layout paint;
  display: inline-flex; align-items: center; gap: 0.45rem; min-width: 11ch; padding: 0.25rem 0.45rem;
  font-size: 0.72rem; color: var(--bone); background: rgba(5, 10, 10, 0.6); opacity: 0; transition: opacity 160ms linear;
}
.wcard-tc .rec-dot { width: 0.45rem; height: 0.45rem; opacity: 1; box-shadow: none; }
.wcard.is-previewing .wcard-tc { opacity: 1; }
.wcard-play {
  position: absolute; right: 3.5%; bottom: 6%; z-index: 3; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--acc); color: var(--acc-ink);
  transform: scale(0.9); transition: transform 300ms var(--ease-out), opacity 200ms linear;
}
.wcard-play svg { width: 0.8rem; height: 0.8rem; fill: currentColor; margin-left: 2px; }
.wcard:hover .wcard-play { transform: scale(1); }
.wcard.is-previewing .wcard-play, .has-cur .wcard:hover .wcard-play { opacity: 0; }
.wcard--spec .wcard-play { width: 2.25rem; height: 2.25rem; }
.wcard-body { display: grid; gap: 0.45rem; justify-items: start; }
.wcard-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.03em; color: var(--muted); }
.wcard-note { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.wcard-title { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.12; letter-spacing: -0.015em; }
.wcard--spec .wcard-title { font-size: clamp(1.1rem, 1.3vw, 1.25rem); }
.wcard-title a { color: inherit; text-decoration: none; }
.wcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 4; }   /* Stretched Link: ganze Karte klickbar */
.wcard-title a:focus-visible { outline: none; }
.wcard:has(a:focus-visible) .wcard-media { outline: 2px solid var(--accent); outline-offset: 3px; }
.wcard-text { color: var(--muted); max-width: 32em; }
.wcard--spec .wcard-text { font-size: var(--t-small); }
.wcard-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.72rem; letter-spacing: 0.02em; }
.wcard-chips li { padding: 0.32rem 0.5rem; border: 1px solid var(--line); color: var(--muted); line-height: 1.1; }
@media (min-width: 860px) {
  .wcard--feature .wcard-media { aspect-ratio: 21 / 9; }
  .wcard--feature.wcard--contain .wcard-media { aspect-ratio: 16 / 9; }
  .wcard--feature.wcard--contain { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .wcard--feature { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
}
/* Textkarte (Freigabestufe C) und Demo-Platzhalter */
.wcard--text .wcard-media, .wcard--demo .wcard-media { display: grid; place-items: center; padding: 1.5rem; background: var(--petrol-2); text-align: center; }
.wcard--text .finder { opacity: 1; transform: none; }
.wcard-placard { position: relative; z-index: 3; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); max-width: 24em; }
.wcard--demo .wcard-media { background: repeating-linear-gradient(135deg, rgba(236,231,217,0.04) 0 12px, transparent 12px 24px), var(--petrol-2); }

/* ---------- 11b Filter-Chips (Hub-Filter; wiederverwendbar) ---------- */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0 0.8rem;
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer; user-select: none;
  font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  transition: background-color 160ms linear, color 160ms linear, border-color 160ms linear, opacity 160ms linear;
}
.chip::after { content: ""; position: absolute; inset: -4px -2px; }   /* Trefferfläche 44 px */
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-l { display: inline-flex; align-items: center; gap: 0.45rem; }
.chip-l::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--acc); transform: scale(0); transition: transform 200ms var(--ease-out); }
.chip .n { font-variant-numeric: tabular-nums; }   /* A5: keine opacity, Farbe geerbt (--muted bzw. gewählt --bg), ≥ 4,5:1 */
.chip:hover { color: var(--ink); border-color: rgba(236, 231, 217, 0.4); }
.chip:has(input:checked), .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip:has(input:checked) .chip-l::before, .chip.is-on .chip-l::before { transform: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.chip[data-zero]:not(:has(input:checked)) { border-style: dashed; }
.chip[data-zero] .n { opacity: 1; color: var(--muted); }

/* ---------- 12 Leistungen (K3) ---------- */
.svc { display: grid; border-top: 1px solid var(--ink); }
.svc-col { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.6rem; padding: 1.6rem 0 1.25rem; border-bottom: 1px solid var(--line); }
.svc-col .h3 { font-size: clamp(1.35rem, 1.9vw, 1.65rem); }
.svc-col p { color: var(--muted); max-width: 22em; }
.price { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: nowrap; margin-top: 1.25rem; align-self: end; }
.svc-col .price { color: var(--ink); max-width: none; }
.price .ab { font-size: var(--t-small); color: var(--muted); }
.price b { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price b.req { font-size: clamp(1.6rem, 2.3vw, 2.05rem); letter-spacing: -0.025em; }
.svc-col .link { white-space: normal; line-height: 1.3; }
.svc-note { margin-top: 1.5rem; font-size: var(--t-small); color: var(--muted); }
.svc-note a { color: var(--ink); font-weight: 700; }
@media (min-width: 860px) {
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); border-bottom: 1px solid var(--line); }
  .svc-col { grid-row: span 4; grid-template-rows: subgrid; padding: 1.75rem clamp(1.25rem, 2.5vw, 2.25rem) 1.5rem; border-bottom: 0; }
  .svc-col + .svc-col { border-left: 1px solid var(--line); }
  .svc-col:first-child { padding-left: 0; }
  .svc-col:last-child { padding-right: 0; }
}

/* ---------- 13 Stimmen (K7) & Zitat ---------- */
.rating { color: var(--muted); }
.rating .st { color: var(--accent); letter-spacing: 0.08em; }
.revs { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .revs { grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); } }
.rev { display: grid; gap: 1rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.rev-k { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rev-k .st { color: var(--accent); letter-spacing: 0.12em; font-size: 0.8rem; }
.rev blockquote p { font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.5; }
.rev--lead blockquote p { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }
.rev figcaption { font-size: var(--t-small); color: var(--muted); line-height: 1.4; }
.rev figcaption b { display: block; color: var(--ink); font-weight: 700; }
.revs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); font-size: var(--t-small); color: var(--muted); }
.revs-foot p { max-width: 40em; }
.quote { display: grid; gap: 1rem; max-width: 46rem; }
.quote blockquote p { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; color: var(--muted); font-size: var(--t-small); }
.quote figcaption a { color: var(--ink); }

/* ---------- 14 Über mich ---------- */
.about { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .about { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); } }
.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 26rem; width: 100%; overflow: hidden; background: #070f0e; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.portrait .px { image-rendering: pixelated; opacity: 0; object-position: 50% 6%; }
.portrait.is-pulled .px { animation: focuspull 1.1s var(--ease-out) .1s both; }
@keyframes focuspull { 0% { opacity: 1; } 100% { opacity: 0; } }
.about-copy { display: grid; gap: 1.1rem; justify-items: start; }
.about-copy > p { max-width: 36em; }
.about-copy .lead { color: var(--ink); }
.ventures { color: var(--muted); }
.team-line { color: var(--muted); font-size: var(--t-small); max-width: 34em; }

/* ---------- 15 Akkordeon / FAQ / Tiefe (K6) ---------- */
.acc-list { border-top: 1px solid var(--line); width: 100%; }
.acc-list details { border-bottom: 1px solid var(--line); }
.acc-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 0.85rem 0;
  font-weight: 700; cursor: pointer; list-style: none;
}
.acc-list summary::-webkit-details-marker { display: none; }
.acc-list summary::after { content: "+"; content: "+" / ""; flex: none; font-family: var(--f-mono); font-weight: 400; font-size: 1.25rem; line-height: 1; color: var(--accent); transition: transform .3s var(--ease-out); }
.acc-list details[open] > summary::after { transform: rotate(45deg); }
.acc-q { font-size: clamp(1.02rem, 1.2vw, 1.12rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.acc-list .acc-body { padding: 0 0 1.35rem; color: var(--muted); max-width: 40em; display: grid; gap: 0.6rem; justify-items: start; }
.acc-list .acc-body a { color: var(--ink); font-weight: 600; }
.acc-list .acc-body .tlink { font-weight: 600; }
/* Tiefe: ein einzelnes „Ausführlich“-Akkordeon (indexierbar, Browser-Suche öffnet es) */
.deep > summary .acc-q { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em; }
@media (prefers-reduced-motion: no-preference) {
  .acc-list details[open] > .acc-body { animation: pj-acc 240ms var(--ease-out) both; }
  @keyframes pj-acc { from { opacity: 0; transform: translateY(-4px); } }
}

/* ---------- 16 Anfrage-Modul (8.8), Klappe (M7), Formular (K11) ---------- */
.inq { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 1000px) { .inq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.inq-head { display: grid; gap: 1.15rem; align-content: start; justify-items: start; }
.inq-head .kicker { margin-bottom: -0.25rem; }
.inq-lead { font-size: var(--t-lead); line-height: 1.45; max-width: 26em; }
.inq-net { font-size: var(--t-small); color: var(--muted); }
.inq-net a { color: var(--ink); font-weight: 600; }
.inq-line { font-size: var(--t-lead); line-height: 1.45; max-width: 24em; }
/* Anfrage-Überschrift (Runde 3): „Ihr nächster Film beginnt hier.“ / „Your next film starts here.“
   Zwei Zeilen in der 5/12-Spalte; der markierte Teil bricht nie in sich um. */
.inq-title { font-size: clamp(2.35rem, 3.7vw, 3.55rem); font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; max-width: 11em; }
.inq-title .uline { white-space: nowrap; }
/* Klappe: kleine Deko-Animation über der Überschrift, Scharnier links unten, schlägt einmal zu */
.clap { width: clamp(4rem, 5.4vw, 5rem); height: auto; overflow: visible; color: var(--coal); }
.clap-arm { transform-box: fill-box; transform-origin: 0% 100%; }
.clap-txt { font-family: var(--f-mono); font-size: 7.5px; letter-spacing: 0.06em; fill: var(--sand); }
/* Markierungsband hinter dem Text (kein Link-Look: Links tragen die feine 1,5-px-Linie) */
.uline { --ul: color-mix(in srgb, var(--acc) 30%, transparent); --ul-h: 0.34em; background: linear-gradient(var(--ul), var(--ul)) 0 90% / 100% var(--ul-h) no-repeat; padding-inline: 0.05em; margin-inline: -0.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-block="sand"] .uline { --ul: color-mix(in srgb, var(--acc) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .clap.is-armed .clap-arm { transform: rotate(-26deg); }
  .clap.is-shut .clap-arm { animation: pj-clap 300ms cubic-bezier(.6, 0, .9, .4) both; }
  .clap.is-shut { animation: pj-jolt 220ms var(--ease-out) 280ms; }
  .clap.is-armed ~ .mega .uline, .clap.is-armed ~ * .uline { background-size: 0% var(--ul-h); }
  .clap.is-shut ~ .mega .uline, .clap.is-shut ~ * .uline { background-size: 100% var(--ul-h); transition: background-size 300ms var(--ease-out-expo) 300ms; }
  @keyframes pj-clap { 0% { transform: rotate(-26deg); } 82% { transform: rotate(0); } 90% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
  @keyframes pj-jolt { 35% { transform: translateY(2px) rotate(0.4deg); } }
}

.form { display: grid; gap: 0.35rem 1.25rem; }
.form-grid { display: grid; gap: 0.35rem 1.25rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.fld { display: grid; gap: 0.35rem; min-width: 0; align-content: start; }
.fld--full { grid-column: 1 / -1; }
.fld label { font-weight: 600; font-size: 0.92rem; }
.fld label small { font-weight: 400; color: var(--muted); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--coal-muted); border-radius: 2px; color: var(--ink);
  transition: border-color .2s, background-color .2s;
}
.fld textarea::placeholder { color: var(--coal-muted); opacity: 0.85; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2312201e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 0.7rem; }
.fld textarea { min-height: 7.5rem; resize: vertical; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--coal); }
.fld input:focus, .fld select:focus, .fld textarea:focus, .fld.is-focus input { outline: 2px solid var(--coal); outline-offset: 2px; border-color: var(--coal); background-color: #fff; }
.fld.is-invalid input, .fld.is-invalid select, .fld.is-invalid textarea { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.err { min-height: 1.3rem; font-size: 0.82rem; color: #a3211a; line-height: 1.3; }
.hint { min-height: 1.3rem; font-size: 0.82rem; color: var(--muted); line-height: 1.3; }
/* Hinweis je Projektart-Option (Konzept-Check, Maßnahme 14): ohne Text kein Platz, das Formular bleibt wie bisher */
.fld .hint[data-option-hint]:empty { display: none; }
.consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.85rem; color: var(--muted); line-height: 1.45; cursor: pointer; min-height: 2.75rem; padding-top: 0.25rem; }
.consent input { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--coal); flex: none; }
.consent a { color: var(--ink); }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; }
.mail-alt { font-size: var(--t-small); color: var(--muted); }
.mail-alt a { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; min-height: 2.75rem; }
.inq-trust { margin-top: 0.75rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); font-size: var(--t-small); color: var(--muted); max-width: 44em; }
@media (max-width: 639px) {
  .form-grid { row-gap: 0.15rem; }
  .err, .hint { min-height: 1rem; }
  .submit-row .btn { width: 100%; }
}
.hp { display: none; }
.sent { display: none; gap: 1.25rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--panel); border: 1px solid var(--line); }
.form-wrap.is-sent .form { display: none; }
.form-wrap.is-sent .sent { display: grid; }
.steps { display: grid; gap: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.5rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); font-family: var(--f-mono); color: var(--accent); font-weight: 500; }

/* Anfrage-Leiste (mobil): volle Breite, deckend, unten angedockt; verdeckt keinen Text halb.
   Aus der Tab-Reihenfolge, solange unsichtbar; weg, sobald ein anderer Anfrage-Weg im Bild ist (site.js). */
.pill {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-pill);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--petrol-3); border-top: 1px solid rgba(236, 231, 217, 0.16); color: var(--bone);
  transform: translateY(105%); visibility: hidden;
  transition: transform .4s var(--ease-out), visibility 0s linear .4s;
}
.pill.is-on { transform: none; visibility: visible; transition: transform .4s var(--ease-out); }
.pill-k { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--bone-muted); white-space: nowrap; }
.pill .btn { min-height: 2.75rem; padding: 0 1.1rem; }
html.menu-open .pill { display: none; }
@media (min-width: 1000px) { .pill { display: none; } }

/* ---------- 17 Player (K10), Case-Seiten ---------- */
.player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #000; overflow: hidden; }
.player video, .player > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player .start {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35));
}
.player .start > span {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.4rem;
  background: var(--acc); color: var(--acc-ink); font-weight: 700; border-radius: 2px;
  transition: transform .3s var(--ease-out);
}
.player .start:focus-visible { outline: none; }
.player .start:focus-visible > span { outline: 2px solid var(--bone); outline-offset: 3px; }
.player .start svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
.player .start:hover > span { transform: scale(1.03); }
.player.is-on .start { display: none; }
.player--top .start { align-items: flex-start; padding-top: 6%; background: linear-gradient(0deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35)); }
.player--tall { aspect-ratio: 9 / 16; }
@media (max-width: 520px) { .player .start > span { min-height: 2.75rem; padding: 0 1rem; font-size: 0.9rem; } }
/* Tabs (Film-Auswahl im Player; nicht verwechseln mit der Präsentations-Shell) */
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.tabs button {
  min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 2px;
  font-weight: 600; font-size: 0.92rem; color: var(--muted); transition: color .2s, border-color .2s; text-align: left;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.case-hero { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2.5rem, 5vw, 4rem); }
.case-hero .crumbs { margin-bottom: 0.5rem; }
.case-hero .kicker { margin-bottom: 0.7rem; }
.case-hero .h1 { font-size: var(--t-h2); max-width: 19em; }
.watch { display: grid; gap: 1rem; margin-top: clamp(1.25rem, 2.5vw, 2rem); grid-template-areas: "tabs" "player" "meta"; }
.watch .tabs { grid-area: tabs; }
.watch .player { grid-area: player; width: min(100%, calc((100svh - 19rem) * 16 / 9)); }
.watch-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
@media (min-width: 1000px) {
  /* Spalte 1 ist höchstens so breit wie der höhenbegrenzte Player; Restplatz rechts neben den Tabs */
  .watch { grid-template-columns: minmax(0, calc((100svh - 19rem) * 16 / 9)) 14rem; justify-content: start; grid-template-areas: "player tabs" "player meta"; grid-template-rows: auto 1fr; column-gap: 2.5rem; }
  .watch .player { width: 100%; }
  .watch .tabs { flex-direction: column; align-items: stretch; }
  .watch-meta { flex-direction: column; align-items: flex-start; align-self: end; }
}
.stills { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.stills img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.stills .tag--ai { left: 0.6rem; top: 0.6rem; }
@media (max-width: 699px) { .stills { grid-template-columns: 1fr 1fr; } .stills img:first-of-type { grid-column: 1 / -1; } }
/* Klassenlotterie: Spot 16:9 + Shorts 9:16 sofort sichtbar, kein Gate */
.kl-stage { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.kl-players { display: grid; gap: 1rem; }
@media (min-width: 760px) {
  .kl-players { grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr); align-items: stretch; }
  .kl-players .player--tall { aspect-ratio: auto; }
}
@media (max-width: 759px) { .kl-players .player--tall { width: min(100%, 20rem); } }
.case-meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
/* Abschluss einer Case-Seite */
.next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.acc-list + .next, .acc-list + * + .next { border-top: 0; padding-top: 0; margin-top: clamp(2rem, 4vw, 2.75rem); }
.case-min { width: 100%; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--muted); }
.next-link { display: inline-grid; gap: 0.15rem; text-decoration: none; min-height: 3rem; }
.next-k { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.next-t { font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -0.015em; }
.next-link .arr { display: inline-block; transition: transform .3s var(--ease-out); }
.next-link:hover .arr { transform: translateX(4px); }

/* ---------- 18 Call-Sheet (K5), Ablauf mit Playhead (M10), Zeitleiste ---------- */
.sheet { border-top: 1px solid var(--ink); }
.sheet > div { display: grid; grid-template-columns: minmax(7rem, 2fr) 5fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.sheet dt { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.sheet dd { min-width: 0; }
@media (max-width: 520px) { .sheet > div { grid-template-columns: 1fr; gap: 0.15rem; } }

.flow { position: relative; border-top: 1px solid var(--ink); counter-reset: f; width: 100%; view-timeline: --flow block; }
.flow li { counter-increment: f; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); view-timeline: --step block; }
.flow li::before { content: counter(f, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.8rem; color: var(--accent); padding-top: 0.2rem; grid-row: span 2; }
.flow b { font-weight: 700; }
.flow span { color: var(--muted); font-size: var(--t-small); }
@media (min-width: 700px) { .flow li { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr); } .flow li::before { grid-row: auto; } }
.flow::after { content: ""; position: absolute; left: -0.9rem; top: 0; bottom: 0; width: 2px; background: var(--accent); transform-origin: 50% 0; }
@media (max-width: 699px) { .flow::after { left: -0.6rem; } }

/* Kundenzeitleiste: 4 Balken, Phosphor-Füllung läuft per Scroll (Playhead) */
.tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; view-timeline: --tl block; }
.tl li { position: relative; display: grid; gap: 0.35rem; align-content: start; font-size: var(--t-small); }
.tl li::before { content: ""; height: 0.5rem; background: var(--line); }
.tl li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.5rem; background: var(--ink); transform-origin: 0 50%; }
.tl li.is-key::after { background: var(--accent); }
.tl b { font-weight: 700; }
.tl span { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
@media (max-width: 640px) { .tl { grid-template-columns: 1fr 1fr; row-gap: 1rem; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .flow::after { animation: pj-head linear both; animation-timeline: --flow; animation-range: entry 40% cover 60%; }
    .flow li::before { animation: pj-step linear both; animation-timeline: --step; animation-range: entry 60% entry 100%; }
    .tl li::after { animation: pj-fill linear both; animation-timeline: --tl; }
    .tl li:nth-child(1)::after { animation-range: cover 25% cover 35%; }
    .tl li:nth-child(2)::after { animation-range: cover 33% cover 43%; }
    .tl li:nth-child(3)::after { animation-range: cover 41% cover 51%; }
    .tl li:nth-child(4)::after { animation-range: cover 49% cover 59%; }
    @keyframes pj-head { from { transform: scaleY(0); } }
    @keyframes pj-step { from { opacity: 0.3; } }
    @keyframes pj-fill { from { transform: scaleX(0); } }
  }
}
.bullets { display: grid; gap: 0.6rem; }
.bullets li { display: flex; gap: 0.7rem; font-size: var(--t-lead); }
.bullets li::before { content: ""; width: 0.4rem; height: 0.4rem; margin-top: 0.65em; background: var(--accent); flex: none; }
.bullets--sm li { font-size: 1rem; }

/* ---------- 19 Making-of-Regler K12 (Style Frame → fertiger Shot) und Loop-Figur ----------
   Echte Vorher/Nachher-Paare aus der Klassenlotterie-Produktion (deckungsgleich ausgerichtet).
   --p = sichtbarer Anteil des Style Frames in Prozent. Beschnitt nur über transform (Wrapper + Gegenverschiebung),
   die Naht ebenso: Ziehen löst kein Layout aus. Bedienung: Zeiger (ganze Fläche, vertikal scrollt weiter) und
   ein natives input[type=range] für Tastatur und Screenreader. Ohne JS / Reduced Motion: statischer 50-%-Split. */
.ba { display: grid; gap: 0.85rem; margin: 0; min-width: 0; }
.ba-stage { --p: 50; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050a0a; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* Fertiger Shot als Clip (Runde 3): liegt über dem Standbild, unter Label und Style-Frame-Layer; blendet nur beim Abspielen ein */
.ba-stage .ba-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out); }
.ba-stage.is-moving .ba-vid { opacity: 1; }
.ba-clip { position: absolute; inset: 0; z-index: 2; overflow: hidden; transform: translateX(calc((var(--p) - 100) * 1%)); }
.ba-in { position: absolute; inset: 0; transform: translateX(calc((100 - var(--p)) * 1%)); }
.ba-handle { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateX(calc(var(--p) * 1%)); }
.ba-handle::before { content: ""; position: absolute; inset-block: 0; left: -1px; width: 2px; background: var(--acc); box-shadow: 0 0 14px rgba(60, 232, 130, 0.55); }
.ba-knob {
  position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; translate: -50% -50%;
  border-radius: 50%; background: var(--acc); color: var(--acc-ink); box-shadow: 0 4px 18px rgba(5, 10, 10, 0.45);
  transition: scale var(--d-ui) var(--ease-out);
}
.ba-knob svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba-stage:hover .ba-knob, .ba-stage.is-drag .ba-knob { scale: 1.08; }
.ba-lbl {
  position: absolute; top: 5.5%; left: 3.2%; z-index: 2; font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; background: rgba(9, 17, 16, 0.8); color: var(--bone); padding: 0.42em 0.6em; white-space: nowrap;
}
.ba-lbl--r { left: auto; right: 3.2%; z-index: 1; }   /* liegt unter dem Style-Frame-Layer */
.ba-lbl--r::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.45rem; border-radius: 50%; background: var(--acc); vertical-align: 0.05em; }
.ba-stage .tag--ai { left: 3.2%; bottom: 6%; z-index: 4; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba-stage:has(.ba-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.ba-stage:has(.ba-range:focus-visible) .ba-knob { box-shadow: 0 0 0 3px var(--petrol), 0 0 0 5px var(--bone); }
.ba-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; font-size: var(--t-small); color: var(--muted); }
.ba-cap b { color: var(--ink); font-weight: 600; }
.ba-cap .link { min-height: 2.5rem; font-size: var(--t-small); }
.ba-note { font-size: var(--t-small); color: var(--muted); max-width: 40em; }
/* Szenenwahl (Case-Seite): Knopfgruppe mit aria-pressed */
.ba-scenes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ba-scenes button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 2px; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: color var(--d-ui), border-color var(--d-ui); }
.ba-scenes button:hover { color: var(--ink); border-color: rgba(236, 231, 217, 0.45); }
.ba-scenes button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
@media (max-width: 520px) { .ba-lbl { font-size: 0.625rem; } .ba-knob { width: 2.5rem; height: 2.5rem; } }

.loopwrap { display: grid; gap: 0.75rem; width: 100%; }
.loopwrap figcaption { font-size: var(--t-small); color: var(--muted); }
.loopwrap figcaption b { color: var(--ink); font-weight: 600; }
.loopfig { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: #050a0a; }
.loopfig img, .loopfig video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loopfig video { opacity: 0; transition: opacity .5s var(--ease-out); }
.loopfig.is-live video { opacity: 1; }
.loopfig .tag--ai { left: 0.75rem; bottom: 0.75rem; }

/* ---------- 20 Cursor „▶ Ansehen“ (M6, Desktop) ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; transform: translate3d(-200px, -200px, 0); }
.cur > span {
  display: inline-flex; align-items: center; gap: 0.45rem; height: 2.25rem; padding: 0 0.85rem; translate: -50% -50%;
  background: var(--acc); color: var(--acc-ink); border-radius: 2px;
  font: 500 0.6875rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; scale: 0.6; transition: opacity 140ms linear, scale 200ms var(--ease-spring);
}
.cur svg { width: 0.5rem; height: 0.5rem; }
.cur.is-on > span { opacity: 1; scale: 1; }
.cur.is-down > span { scale: 0.92; }
.has-cur [data-cursor], .has-cur .wcard:has([data-cursor]) { cursor: none; }

/* ---------- 21 View Transitions (M2, Cross-Document) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.case-player { view-transition-name: case-media; }
::view-transition-old(root) { animation: 140ms var(--ease-in) both pj-out; }
::view-transition-new(root) { animation: 240ms var(--ease-out) 40ms both pj-in; }
@keyframes pj-out { to { opacity: 0; } }
@keyframes pj-in { from { opacity: 0; } }
::view-transition-old(site-head) { display: none; }
::view-transition-new(site-head) { animation: none; }
::view-transition-group(case-media) { animation-duration: var(--d-morph); animation-timing-function: var(--ease-out-expo); }
::view-transition-old(case-media), ::view-transition-new(case-media) { height: 100%; object-fit: cover; overflow: clip; }

/* ---------- 22 Scroll-Bewegung (nur transform), Reduced Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes rise { from { transform: translateY(28px); } to { transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 23 Zweite Lesetiefe, Einzel-Stimme ----------
   .sec--deep = „Anhang“: kleinere H2, weniger Luft, Lesespalte, kein Farbwechsel innerhalb der Tiefe.
   Davor ein .deep-index (Inhaltsband mit Ankern). Wortzahl bleibt, die Seite liest sich kürzer. */
.sec--deep { --sec: clamp(2.75rem, 5.5vw, 4.5rem); }
.sec--deep .h2, .sec--deep h2.acc-q { font-size: clamp(1.45rem, 2.1vw, 1.95rem); letter-spacing: -0.02em; line-height: 1.12; }
.sec--deep .sec-head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.sec--deep .split { gap: clamp(1.5rem, 3vw, 3.5rem); }
.sec--deep p { max-width: 46rem; }
.sec[data-block="sand"].sec--deep + .sec[data-block="sand"].sec--deep,
.sec[data-block="dark"].sec--deep + .sec[data-block="dark"].sec--deep { padding-top: var(--sec); }
.deep-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.5rem; padding-block: 1.1rem; border-block: 1px solid var(--line); }
.deep-index .slate { margin-right: 0.5rem; }
.deep-index ol { display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem; }
.deep-index a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; font-size: 0.92rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.deep-index a::after { content: "↓"; content: "↓" / ""; font-family: var(--f-mono); font-size: 0.75rem; color: var(--accent); transition: transform var(--d-ui) var(--ease-out); }
.deep-index a:hover::after { transform: translateY(2px); }
.deep-band { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) 0; }

/* Einzel-Stimme (Leistungs- und Preisseiten): ein passendes Zitat + Sternezeile + Link auf alle Rezensionen */
.rev-strip { --sec: clamp(3rem, 6vw, 4.75rem); }
.rev-strip-in { display: grid; gap: 1.5rem 3rem; align-items: end; }
@media (min-width: 900px) { .rev-strip-in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.rev-strip .rev { border-top: 0; padding-top: 0; }
.rev-strip .rev blockquote p { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.38; max-width: 34em; }
.rev-strip-meta { display: grid; gap: 0.35rem; justify-items: start; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); }
.rev-strip-meta .rating b { color: var(--ink); }
.rev-strip-meta .link { min-height: 2.5rem; }
.rev-strip-alt { margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); }
.rev-strip-alt a { color: var(--ink); font-weight: 700; }
/* Nur Sternezeile (Beispiele) */
.stars-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; padding-block: 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-small); }
.stars-line .rating b { color: var(--ink); }