/* =====================================================================
   H-Air-Filme – Design-System „Cinematic Airspace“ (Redesign 09/2026)
   ---------------------------------------------------------------------
   Eine Datei für alle Seiten. Aufbau:
    1  Schriften          7  Header & Navigation     13 Portfolio-Reel
    2  Tokens / Themes    8  Hero (Startseite)       14 FAQ
    3  Reset & Basis      9  Intro & Statistiken     15 CTA & Footer
    4  Typografie        10  Regionen-Marquee        16 Unterseiten
    5  Layout            11  Workflow / Flugbahn     17 Formulare & Karte
    6  Bausteine         12  Leistungen & Dialoge    18 Motion, Reduced Motion
   ===================================================================== */

/* ---------------------------------------------------------------------
   1  Schriften (lokal, DSGVO-konform) + metrisch angepasste Fallbacks
   --------------------------------------------------------------------- */
/* Montserrat: nur die 800er-Datei ist vollständig (die alten 600/700-Dateien enthielten
   keine lateinischen Zeichen) → sie bedient alle Überschriften-Gewichte. */
@font-face {
  font-family: "Montserrat";
  font-weight: 700 800;
  font-display: swap;
  src: url("../fonts/montserrat-v26-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Mono";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2");
}
/* Fallbacks mit angepassten Metriken → kaum Layout-Sprung beim Schriftwechsel (CLS) */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 700 800;
  size-adjust: 106%;
  ascent-override: 91%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Barlow Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 96.7%;
  ascent-override: 103.4%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------------
   2  Tokens – Dark ist Standard, Light per Umschalter
   --------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Flächen */
  --bg: #07090c;
  --bg-2: #0c1015;
  --bg-3: #121820;
  --surface: #161d26;
  --surface-2: #1c2530;
  --overlay: rgb(7 9 12 / 0.72);

  /* Text – alle Paare ≥ 4.5:1 auf --bg bis --surface geprüft */
  --text: #eef2f6;          /* 17.7:1 */
  --text-muted: #a7b1bd;    /*  9.2:1 */
  --text-dim: #8793a1;      /*  6.4:1 */

  /* Marke */
  --accent: #5cb8e6;        /*  9.0:1 – Himmelblau aus dem Logo */
  --accent-strong: #8fd3f5; /* 12.2:1 */
  --accent-ink: #04121b;    /* Text auf Akzentflächen – 8.5:1 */
  --accent-soft: rgb(92 184 230 / 0.12);
  --gold: #f2b25c;          /* Golden Hour – nur Akzente */
  --rec: #ff5a5a;           /* REC-Punkt, dekorativ */

  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.18);
  --field-border: #6b7685;  /* 4.3:1 / 3.7:1 – Rand von Eingabefeldern */
  --shadow: 0 30px 80px -20px rgb(0 0 0 / 0.65);
  --shadow-soft: 0 12px 40px -12px rgb(0 0 0 / 0.5);

  --logo-dark-display: block;
  --logo-light-display: none;

  /* Typografie */
  --font-display: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --font-body: "Barlow", "Barlow Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Atkinson Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --fs-sm: clamp(0.9rem, 0.87rem + 0.15vw, 0.97rem);
  --fs-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-lg: clamp(1.18rem, 1.08rem + 0.45vw, 1.42rem);
  --fs-h4: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-h3: clamp(1.3rem, 1.12rem + 0.8vw, 1.8rem);
  --fs-h2: clamp(2rem, 1.3rem + 3vw, 4.1rem);
  --fs-h1: clamp(2.7rem, 1.2rem + 6.2vw, 7.4rem);
  --fs-giant: clamp(3.4rem, 0.6rem + 12vw, 14rem);

  /* Raum */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --container: 1320px;
  --section-y: clamp(5rem, 2.8rem + 8vw, 10rem);
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 8px;
  --header-h: 76px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1ec;
  --bg-2: #ebe8e1;
  --bg-3: #e3dfd6;
  --surface: #ffffff;
  --surface-2: #f8f6f2;
  --overlay: rgb(243 241 236 / 0.8);
  --text: #0b0f14;          /* 17.0:1 */
  --text-muted: #46515d;    /*  7.2:1 */
  --text-dim: #56616d;      /*  5.9:1 */
  --accent: #1a6690;        /*  5.6:1 */
  --accent-strong: #0f4f72; /*  7.8:1 */
  --accent-ink: #ffffff;    /*  6.3:1 auf --accent */
  --accent-soft: rgb(26 102 144 / 0.1);
  --gold: #9a5b00;
  --line: rgb(11 15 20 / 0.1);
  --line-strong: rgb(11 15 20 / 0.2);
  --field-border: #767f8a;  /* 3.6:1 / 4.1:1 */
  --shadow: 0 30px 70px -24px rgb(20 28 40 / 0.28);
  --shadow-soft: 0 12px 36px -14px rgb(20 28 40 / 0.22);
  --logo-dark-display: none;
  --logo-light-display: block;
}

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

html:has(.project-index) { scroll-padding-top: calc(var(--header-h) + 5.5rem); }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, picture, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
address { font-style: normal; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:where(:not([class])) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: text-decoration-color var(--dur-fast);
}
a:where(:not([class])):hover { text-decoration-color: currentColor; }

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

/* Sichtbarer Fokus (WCAG 2.4.7 / 2.4.11) */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-media :focus-visible,
.hero :focus-visible { outline-color: #fff; }

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

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 1000;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; outline-color: var(--text); }

/* Filmkorn – statische Textur, nur auf Desktop */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .grain { opacity: 0.035; filter: invert(1); }
@media (hover: none), (max-width: 767px) { .grain { display: none; } }

/* ---------------------------------------------------------------------
   4  Typografie
   --------------------------------------------------------------------- */
.h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
}
h1, .h1 { font-size: var(--fs-h1); line-height: 0.94; text-transform: uppercase; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }

.h2 em, h2 em, .h1 em, h1 em {
  font-style: normal;
  color: var(--accent);
}
.text-gradient {
  background: linear-gradient(100deg, var(--accent-strong) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, var(--gold)) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="light"] .text-gradient {
  background: linear-gradient(100deg, var(--accent-strong), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}

.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--text); }
.muted { color: var(--text-muted); }
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--text-muted); max-width: 68ch; }
.prose strong { color: var(--text); font-weight: 600; }

/* HUD-Label / Kicker: technische Mono-Beschriftung wie im Sucher */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
}
.kicker::before { /* Klappen-Streifen einer Filmklappe */
  content: "";
  flex: none;
  width: 1.9em; height: 0.72em;
  border: 1px solid currentColor;
  background: repeating-linear-gradient(-55deg, currentColor 0 2px, transparent 2px 5px);
}
.kicker--rec::before { width: 0.62em; height: 0.62em; border: 0; border-radius: 50%; background: var(--rec); }
.kicker__index { color: var(--text-dim); }

.mono { font-family: var(--font-mono); letter-spacing: 0.06em; }

/* ---------------------------------------------------------------------
   5  Layout
   --------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { --container: 880px; }
.container--wide { --container: 1520px; }

.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--alt { background: var(--bg-2); }
.section + .section--alt,
.section--alt + .section { border-top: 1px solid var(--line); }

.section-head { max-width: 860px; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head p:not(.kicker) {
  margin-top: 1.25rem;
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 60ch;
}
.section-head--center p:not(.kicker) { margin-inline: auto; }

.stack > * + * { margin-top: var(--stack, 1.25rem); }

/* Einspaltige Grids nie breiter als der Container (min-content-Falle) */
:where(.intro__grid, .facts__grid, .workflow__grid, .faq__grid, .duo, .values, .dual, .project, .contact__grid, .legal__grid, .footer__top, .form, .form__row, .field) {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------------
   6  Bausteine: Buttons, Links, Chips, Checkliste, Medien
   --------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  --btn-af: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* Autofokus-Klammern: rasten beim Hover auf den Button ein (wie das AF-Feld im Sucher) */
.btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  --c: var(--btn-af);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 11px 2px,
    linear-gradient(var(--c), var(--c)) 0 0 / 2px 11px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 11px 2px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 2px 11px,
    linear-gradient(var(--c), var(--c)) 0 100% / 11px 2px,
    linear-gradient(var(--c), var(--c)) 0 100% / 2px 11px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 11px 2px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 2px 11px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.2s, transform 0.45s var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) { .btn::after { transform: scale(1.12, 1.35); } } /* nur mit Maus: sonst ragt das Feld über den Rand */
.btn:hover::after,
.btn:focus-visible::after { opacity: 1; transform: none; }
.btn:focus-visible { outline-offset: 10px; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-bd: var(--accent);
}
.btn--primary:hover { --btn-bg: var(--accent-strong); --btn-bd: var(--accent-strong); }
.btn--ghost:hover { --btn-bd: var(--text); }
.btn--light { /* auf Video/Bild – immer hell */
  --btn-bg: rgb(7 9 12 / 0.35);
  --btn-fg: #fff;
  --btn-bd: rgb(255 255 255 / 0.55);
  --btn-af: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--light:hover { --btn-bd: #fff; --btn-bg: rgb(7 9 12 / 0.55); }
.btn--sm { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: var(--fs-sm); }
.btn--sm::after { inset: -5px; }
.btn--block { width: 100%; }

.link-arrow { /* inline-block: bricht der Text um, bleibt der Pfeil am letzten Wort */
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out);
}
.link-arrow svg { display: inline-block; width: 1.1em; height: 1.1em; margin-left: 0.45em; vertical-align: -0.18em; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover svg { transform: translate(3px, -3px); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.chip--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--text-muted);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.25em;
  width: 1.3rem; height: 1.3rem;
  border-radius: 2px;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb8e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
:root[data-theme="light"] .checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6690' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.checklist strong { color: var(--text); font-weight: 600; }
.checklist--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); column-gap: 2rem; }

/* Sucher-Ecken um Medien */
.frame { position: relative; }
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: clamp(18px, 3vw, 34px);
  aspect-ratio: 1;
  border: 2px solid var(--accent);
  pointer-events: none;
  transition: inset var(--dur-slow) var(--ease-out);
}
.frame::before { top: -12px; left: -12px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -12px; right: -12px; border-left: 0; border-top: 0; }

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-3);
}
.media picture { width: 100%; height: 100%; }
.media img,
.media video { width: 100%; height: 100%; object-fit: cover; }

/* Icon-Buttons (Theme, Pause, Schließen) – Zielgröße ≥ 44 px */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur) var(--ease-spring);
}
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }

/* ---------------------------------------------------------------------
   7  Header & Navigation – immer sichtbar, Menü zentriert
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--header-h);
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur);
  view-transition-name: site-header;
}
.site-header::before { /* Milchglas: sobald gescrollt wird – auch über Hero und Seitenkopf */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out), background-color var(--dur);
}
.site-header:is(.is-floating, .is-scrolled)::before { opacity: 1; }
:is(.has-hero, body:has(.page-hero--media)) .site-header.is-floating:not(.is-scrolled)::before { background: rgb(5 7 10 / 0.62); }
.site-header.is-scrolled { border-bottom-color: var(--line); }

:is(.has-hero, body:has(.page-hero--media)) .site-header:not(.is-scrolled) { color: #fff; --text: #fff; --line-strong: rgb(255 255 255 / 0.35); --accent: #5cb8e6; --accent-strong: #8fd3f5; --accent-ink: #04121b; --bg: #07090c; }
:is(.has-hero, body:has(.page-hero--media)) .site-header:not(.is-scrolled) .brand__logo--dark { display: block; }
:is(.has-hero, body:has(.page-hero--media)) .site-header:not(.is-scrolled) .brand__logo--light { display: none; }

.site-header__bar {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; justify-self: start; border-radius: 4px; }
.brand img { height: 52px; width: auto; }
.brand__logo--dark { display: var(--logo-dark-display); }
.brand__logo--light { display: var(--logo-light-display); }

.nav { justify-self: center; }
.nav__list { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast);
}
.nav__link::after { /* Markierung wie ein Schnittpunkt auf der Timeline */
  content: "";
  position: absolute;
  left: 50%; bottom: 0.35rem;
  width: 5px; height: 5px;
  background: var(--accent);
  transform: translateX(-50%) scale(0);
  transition: transform var(--dur) var(--ease-spring);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
.nav__link[aria-current="page"] { color: var(--accent); }
:is(.has-hero, body:has(.page-hero--media)) .site-header:not(.is-scrolled) .nav__link[aria-current="page"] { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
.header-cta { display: none; }

.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menu-toggle__icon { display: grid; gap: 5px; width: 20px; }
.menu-toggle__icon span { height: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out); }
.menu-toggle__icon span:last-child { width: 65%; justify-self: end; }
.menu-toggle:hover .menu-toggle__icon span:last-child { transform: scaleX(1.55); transform-origin: right; }

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .header-cta { display: inline-flex; }
}
@media (max-width: 899.98px) {
  .nav { display: none; }
  .site-header__bar { grid-template-columns: 1fr auto; }
}

/* Schnittspur: Seitenfortschritt als Timeline mit Clips und Playhead */
.timeline {
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 22px;
  pointer-events: none;
}
.timeline__track { position: absolute; inset: 0 0 auto 0; height: 3px; background: color-mix(in srgb, var(--bg) 55%, transparent); }
.timeline__seg { position: absolute; top: 0; height: 3px; background: var(--line-strong); box-shadow: inset -2px 0 0 var(--bg); transition: background-color var(--dur); }
.timeline__seg.is-past { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.timeline__seg.is-current { background: var(--accent); }
.timeline__head {
  position: absolute;
  top: 0;
  left: calc(var(--progress, 0) * 100%);
  width: 2px; height: 11px;
  background: var(--rec);
  transform: translateX(-1px);
}
.timeline__label {
  position: absolute;
  top: 5px;
  left: calc(var(--progress, 0) * 100%);
  transform: translateX(8px);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.4s;
}
.timeline.is-flip .timeline__label { transform: translateX(calc(-100% - 8px)); }
.timeline.is-scrubbing .timeline__label { opacity: 1; }
@media (max-width: 1023px) { .timeline__label { display: none; } }

/* Mobiles Menü – natives <dialog> (Fokusfalle, Esc, inert) */
.mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}
.mobile-nav::backdrop { background: transparent; }
.motion-ok .mobile-nav[open] { animation: shutter-open 0.6s var(--ease-out) both; }
.motion-ok .mobile-nav[open].is-closing { animation: shutter-close 0.4s var(--ease-in-out) both; }
@keyframes shutter-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes shutter-close { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
.mobile-nav__inner {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  padding: 1rem var(--gutter) 2rem;
}
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) - 1rem); }
.mobile-nav__top img { height: 42px; width: auto; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; align-self: center; counter-reset: nav; }
.mobile-nav__list li { overflow: hidden; border-bottom: 1px solid var(--line); counter-increment: nav; }
.mobile-nav__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1rem + 7vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
}
.mobile-nav__list a::before {
  content: "SZ 0" counter(nav);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.mobile-nav__list a[aria-current="page"] { color: var(--accent); }
.mobile-nav__list a:focus-visible { outline-offset: -4px; }
.motion-ok .mobile-nav[open] .mobile-nav__list a { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(0.12s + var(--i, 0) * 0.06s); }
.mobile-nav__foot { display: grid; gap: 1rem; color: var(--text-muted); font-size: var(--fs-sm); }
.mobile-nav__foot a { color: var(--text); }
.social-row { display: flex; gap: 0.6rem; }

@keyframes rise { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------------
   8  Hero (Startseite) – Scroll-Video mit Sucher-HUD
      Desktop: bildfüllend. Smartphone: „Kamera-Monitor“, der beim Scrollen stehen bleibt.
   --------------------------------------------------------------------- */
.hero {
  --p: 0;
  position: relative;
  height: 100svh;
  background: #000;
  color: #fff;
}
.hero.is-scrub { height: 300vh; }
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  isolation: isolate;
}
.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__screen { position: absolute; inset: 0; overflow: hidden; background: #000; }
.hero__media {
  --shift: 0%;
  --s0: 1;
  position: absolute;
  inset: 0;
  background: #000;
  transform:
    translate3d(calc(var(--shift) * (1 - min(1, var(--p) * 4.5))), 0, 0)
    scale(calc(var(--s0) + (1 - var(--s0)) * min(1, var(--p) * 4.5) + var(--p) * 0.06));
}
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) { .hero__media { --shift: 21%; --s0: 0.8; } }
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero__video { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.hero__video.is-ready { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.5) 30%, rgb(0 0 0 / 0) 58%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 22%);
}
@media (min-width: 1024px) {
  .hero__scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.55) 38%, transparent 62%);
    opacity: calc(1 - var(--p) * 5);
  }
}

/* Letterbox-Balken: öffnen sich beim Laden wie ein Vorhang (transform → kein CLS) */
.hero__bar {
  position: absolute;
  left: 0; right: 0;
  z-index: 4;
  height: 50.5%;
  background: #000;
  pointer-events: none;
  transform: scaleY(0);
}
.hero__bar--top { top: 0; transform-origin: top; }
.hero__bar--bottom { bottom: 0; transform-origin: bottom; }
.motion-ok .hero__bar { animation: curtain 1.3s var(--ease-in-out) 0.1s both; }
@keyframes curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* HUD */
.hud {
  position: absolute;
  inset: calc(var(--header-h) + 1.9rem) clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.2rem);
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.8);
}
.hud__corner { position: absolute; width: 28px; height: 28px; border: 2px solid rgb(255 255 255 / 0.7); }
.hud__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.hud__row { position: absolute; display: flex; gap: 1.5rem; align-items: center; }
.hud__row--top { top: 0.4rem; left: 2.6rem; right: 2.6rem; justify-content: space-between; }
.hud__row--top > span { white-space: nowrap; }
.hud__row--side { top: 50%; right: 0.6rem; transform: translateY(-50%); flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.hud__rec { display: inline-flex; align-items: center; gap: 0.55rem; }
.hud__rec::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--rec); box-shadow: 0 0 12px var(--rec); }
.motion-ok .hud__rec::before { animation: rec-blink 1.6s steps(1) 3; } /* max. ~5 s (WCAG 2.2.2) */
@keyframes rec-blink { 50% { opacity: 0.25; } }
.hud__meter { width: 3px; height: 120px; background: rgb(255 255 255 / 0.2); position: relative; margin-top: 0.4rem; }
.hud__meter::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background: var(--accent); }
/* Autofokus-Feld: sucht, sobald die Drohne im Bild ist, und rastet ein */
.hud__af {
  position: absolute;
  top: 50%; left: 50%;
  width: 110px; height: 76px;
  transform: translate(-50%, -50%) scale(var(--af-s, 1.25));
  opacity: var(--af-o, 0);
  transition: transform 0.45s var(--ease-spring), opacity 0.3s;
}
.hud__af i { position: absolute; width: 14px; height: 14px; border: 2px solid var(--af-c, rgb(255 255 255 / 0.8)); transition: border-color 0.3s; }
.hud__af i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud__af i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hud__af i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hud__af i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.hero.af-hunt .hud__af { --af-o: 1; --af-s: 1.25; }
.hero.af-lock .hud__af { --af-o: 1; --af-s: 1; --af-c: #6fe39b; }
@media (max-width: 767px) { .hud__row--side, .hud__hide-sm { display: none; } .hud__row--top { left: 2.2rem; right: 2.2rem; } }

.hero__content {
  position: relative;
  z-index: 5;
  align-self: end;
  padding-bottom: clamp(4.5rem, 11vh, 8.5rem);
  transform: translateY(calc(var(--p) * -140px));
  opacity: calc(1 - var(--p) * 5.5);
}
.hero.is-past-intro .hero__content { visibility: hidden; }
.hero__eyebrow { display: flex; width: fit-content; max-width: 100%; color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / 0.85); letter-spacing: 0.12em; }
.hero__eyebrow::before { width: 0.6em; height: 0.6em; border: 0; border-radius: 50%; background: var(--rec); }
.hero__title {
  max-width: 13ch;
  color: #fff;
  font-size: min(clamp(2.5rem, 1rem + 4.8vw, 6.4rem), 10.5vh);
  text-shadow: 0 4px 40px rgb(0 0 0 / 0.5);
}
.hero__title .line { display: block; }
.hero__title .line--accent { color: var(--accent); }
.hero__lead {
  max-width: 54ch;
  margin-top: 1.6rem;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.7);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }

/* Untertitel-Einblendungen (Bauchbinden) während des Drohnenflugs */
.hero__lowers {
  position: absolute;
  left: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(4.5rem, 13vh, 9rem);
  z-index: 4;
  display: grid;
  margin: 0; padding: 0;
  list-style: none;
  pointer-events: none;
}
.hero__lowers li {
  grid-area: 1 / 1;
  display: grid;
  gap: 0.35rem;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 3px solid var(--accent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s var(--ease-out);
}
.hero__lowers li.is-active { clip-path: inset(0 0 0 0); }
.lt__n { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--accent); }
.lt__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 3vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / 0.6); }
.lt__s { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.85); }
.hero:not(.is-scrub) .hero__lowers { display: none; }
.hero__hint, .hero__track { display: none; }

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 3vh, 2rem);
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
  opacity: calc(1 - var(--p) * 12);
}
@media (max-height: 780px) { .hero__cue { display: none; } }
.hero__cue i { width: 1px; height: 44px; background: linear-gradient(#fff, transparent); transform-origin: top; }
.motion-ok .hero__cue i { animation: cue 2.2s var(--ease-in-out) 2; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Smartphone hochkant: Kamera-Monitor. Titel steht oben, darunter bleibt der Monitor stehen
   und spielt beim Scrollen die Drohnen-Animation – scharf, weil das 16:9-Video nicht beschnitten wird. */
@media (max-width: 767px) and (orientation: portrait) {
  .hero, .hero.is-scrub { height: auto; }
  .hero__sticky { position: relative; height: auto; overflow: visible; display: block; }
  .hero__content {
    padding: calc(var(--header-h) + 2.2rem) 0 2rem;
    opacity: 1;
    transform: none;
  }
  .hero.is-past-intro .hero__content { visibility: visible; }
  .hero__title { font-size: min(9.6vw, 3.4rem); max-width: none; }
  .hero__lead { font-size: 1rem; margin-top: 1.1rem; }
  .hero__actions { margin-top: 1.5rem; gap: 0.7rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__stage {
    position: relative;
    inset: auto;
    z-index: 1;
    width: min(100% - 2 * var(--gutter), 560px);
    margin: 0 auto;
    padding-bottom: 2.5rem;
  }
  .hero__screen {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    box-shadow: 0 0 0 7px #11151b, 0 0 0 8px rgb(255 255 255 / 0.1), 0 26px 50px -18px #000;
  }
  .hero__media { transform: none; }
  .hero__scrim { background: linear-gradient(to top, rgb(0 0 0 / 0.35), transparent 40%); }
  .hud { inset: 0.55rem; font-size: 8.5px; letter-spacing: 0.08em; }
  .hud__corner { width: 12px; height: 12px; border-width: 1.5px; }
  .hud__row--top { top: 0.1rem; left: 1.1rem; right: 1.1rem; }
  .hud__coords { display: none; }
  .hud__af { width: 60px; height: 42px; }
  .hud__af i { width: 9px; height: 9px; }
  .hero__lowers { position: relative; left: auto; bottom: auto; margin-top: 1.4rem; min-height: 5.2rem; }
  .lt__t { font-size: clamp(1.4rem, 7.4vw, 1.8rem); }
  .hero__hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.75);
    opacity: calc(1 - var(--p) * 8);
  }
  .hero__hint span { width: 1.6em; height: 1px; background: currentColor; }
  .hero.is-scrub .hero__track {
    display: block;
    position: relative;
    height: 3px;
    margin-top: 1.2rem;
    background:
      linear-gradient(#05070a, #05070a) 25% 0 / 3px 100% no-repeat,
      linear-gradient(#05070a, #05070a) 50% 0 / 3px 100% no-repeat,
      linear-gradient(#05070a, #05070a) 75% 0 / 3px 100% no-repeat,
      rgb(255 255 255 / 0.2);
  }
  .hero__track span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--accent); }
  .hero__track span::after { content: ""; position: absolute; right: -1px; top: -4px; width: 2px; height: 11px; background: var(--rec); }
  .hero:not(.is-scrub) .hero__hint { display: none; }
  .hero__cue { display: none; }
}
/* Sehr geringe Höhe (z. B. 400 % Zoom, Querformat): kein Scrubbing, Inhalt fließt normal (WCAG 1.4.10) */
@media (max-height: 499px) {
  .hero, .hero.is-scrub { height: auto; min-height: 100svh; }
  .hero__sticky { position: relative; height: auto; min-height: 100svh; }
  .hero__content { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 3rem; }
  .hero__lowers, .hud__row--side, .hud__af { display: none; }
}
@media (max-height: 500px) {
  .site-header { position: absolute; }
}

/* ---------------------------------------------------------------------
   9  Intro & Statistiken
   --------------------------------------------------------------------- */
.intro__grid {
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 6rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .intro__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.intro__text .lead { margin-top: 1.8rem; }
.intro__text p + p { margin-top: 1.1rem; color: var(--text-muted); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column-reverse; gap: 0.35rem; }
.stat dt { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.35; }
.stat dd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat dd sup { font-size: 0.5em; vertical-align: 0.8em; color: var(--accent); margin-left: 0.05em; }

.intro__media { position: relative; }
.intro__media .media { aspect-ratio: 4 / 5; }
@media (min-width: 640px) and (max-width: 1023px) { .intro__media .media { aspect-ratio: 16 / 10; } }
.intro__media img { transform: scale(1.12); }

/* Lizenz-Plakette wie auf dem Drohnenkoffer */
.plate {
  position: absolute;
  left: clamp(-1.25rem, -2vw, -0.5rem);
  bottom: clamp(-1.75rem, -3vw, -1rem);
  z-index: 4;
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1.1rem 0.85rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--gold);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.plate__k { font-size: 10px; letter-spacing: 0.18em; color: var(--text-dim); }
.plate__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); letter-spacing: -0.01em; color: var(--text); }
.plate__s { font-size: 10px; letter-spacing: 0.14em; color: var(--accent); }

/* Auf einen Blick – Filmklappe als Datenblatt */
.facts__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 1024px) { .facts__grid { grid-template-columns: 0.85fr 1.15fr; } }
.facts__text .lead { margin-top: 1.5rem; }
.slate { position: relative; padding-top: 3.2rem; }
.slate__clapper {
  position: absolute;
  top: 0.6rem; left: 0; right: 0;
  height: 2.6rem;
  border-radius: 10px 10px 0 0;
  background: repeating-linear-gradient(-55deg, var(--text) 0 1.4rem, var(--bg-2) 1.4rem 2.8rem);
  border: 1px solid var(--line-strong);
  transform-origin: 0.6rem 100%;
}
.motion-ok .slate.is-in .slate__clapper { animation: clap 1.1s var(--ease-out) 0.35s both; }
@keyframes clap {
  0% { transform: rotate(-16deg); }
  45% { transform: rotate(0deg); }
  58% { transform: rotate(-2.5deg); }
  72%, 100% { transform: rotate(0deg); }
}
.slate__body {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.slate__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1rem 1.4rem;
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.slate__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slate__facts > div { padding: 1rem 1.4rem; border-top: 1px solid var(--line); }
.slate__facts > div:nth-child(odd):not(.slate__wide) { border-right: 1px solid var(--line); }
.slate__facts .slate__wide { grid-column: 1 / -1; }
.slate__facts dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.3rem; }
.slate__facts dd { font-weight: 600; line-height: 1.4; }
@media (max-width: 639px) {
  .slate__facts { grid-template-columns: 1fr; }
  .slate__facts > div:nth-child(odd):not(.slate__wide) { border-right: 0; }
}

/* ---------------------------------------------------------------------
   10 Einsatzgebiet – echter DJI-Abendflug, gesteuert über die Wegpunkte
      Scrollen durch die Orte dreht die Drohne auf Kurs (Kompassband, Horizont).
   --------------------------------------------------------------------- */
.area {
  --heading: 147;
  --roll: 0;
  position: relative;
  isolation: isolate;
  background: #05070a;
  color: var(--text);
  padding-block: var(--section-y);
}
.area__text { position: relative; z-index: 2; }
.area__text h2 { color: #fff; }
.area__lead { margin-top: 1.4rem; font-size: var(--fs-lg); line-height: 1.55; color: rgb(255 255 255 / 0.86); max-width: 46ch; }
.area__home {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
}
.area__home-h { /* Home-Point wie im DJI-Display */
  display: grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  background: var(--gold);
  color: #140c00;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.area__screen { position: relative; overflow: hidden; background: #000; }
.area__media { position: absolute; inset: 0; transform: rotate(calc(var(--roll) * 0.18deg)) scale(1.08); }
.area__poster,
.area__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.area__video { opacity: 0; transition: opacity 0.8s var(--ease-out); }
.area__video.is-ready { opacity: 1; }
.area__scrim { position: absolute; inset: 0; }
.area__hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.9);
}

/* Kompassband */
.compass {
  --ppd: 5px; /* Pixel je Grad */
  position: absolute;
  top: 0; left: 50%;
  width: min(62%, 560px);
  height: 3.1rem;
  transform: translateX(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
.compass__tape {
  position: absolute;
  top: 0; left: 50%;
  width: calc(360 * var(--ppd));
  height: 100%;
  transform: translate3d(calc(var(--heading) * var(--ppd) * -1), 0, 0);
  background:
    repeating-linear-gradient(to right, rgb(255 255 255 / 0.75) 0 1px, transparent 1px calc(5 * var(--ppd))) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(to right, #fff 0 2px, transparent 2px calc(15 * var(--ppd))) -1px 0 / 100% 12px no-repeat;
}
.compass__deg,
.compass__wp {
  position: absolute;
  left: calc(var(--d) * var(--ppd));
  transform: translateX(-50%);
  white-space: nowrap;
}
.compass__deg { top: 15px; font-size: 10px; color: rgb(255 255 255 / 0.8); }
.compass__deg--card { color: var(--accent-strong); font-weight: 700; font-size: 12px; }
.compass__wp { /* Wegpunkt-Marke auf dem Band */
  top: 31px;
  padding: 1px 5px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid currentColor;
  transition: background-color 0.3s, color 0.3s;
}
.compass__wp.is-active { background: var(--gold); color: #140c00; text-shadow: none; }
.compass__caret {
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 0;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 8px solid var(--accent);
}

/* künstlicher Horizont */
.attitude {
  position: absolute;
  top: 50%; left: 50%;
  width: 132px; height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.55);
  overflow: hidden;
}
.attitude__sky {
  position: absolute;
  inset: -25%;
  background: linear-gradient(to bottom, rgb(92 184 230 / 0.28) 50%, rgb(242 178 92 / 0.22) 50%);
  transform: rotate(calc(var(--roll) * -1deg));
}
.attitude__sky::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff; }
.attitude__wings {
  position: absolute;
  top: 50%; left: 18%; right: 18%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(to right, var(--gold) 0 34%, transparent 34% 66%, var(--gold) 66%);
}
.attitude__wings::after { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); }

.area__telemetry {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-variant-numeric: tabular-nums;
}
.area__telemetry b { font-weight: 500; color: var(--accent-strong); }
.area__telemetry-src { margin-left: auto; }

/* Wegpunkt-Liste */
.area__table { position: relative; z-index: 2; }
.area__note {
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}
.area__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / 0.16); }
.wp {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.16);
  color: #aeb8c4;
  transition: color 0.4s;
}
.wp__n { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: #9aa5b2; }
.wp__city {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  hyphens: manual;
  overflow-wrap: anywhere;
  transition: transform 0.6s var(--ease-out);
}
.wp__meta { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; white-space: nowrap; color: rgb(255 255 255 / 0.82); }
.wp.is-active { color: #fff; }
.wp.is-active .wp__n { color: var(--gold); }
.wp.is-active .wp__city { transform: translateX(0.4rem); }

/* Smartphone & Tablet: Monitor bleibt oben stehen, die Orte laufen darunter durch */
@media (max-width: 1023.98px), (max-height: 639.98px) {
  .area__text, .area__table { width: min(100% - 2 * var(--gutter), 720px); margin-inline: auto; }
  .area__stage {
    position: relative;
    z-index: 3;
    width: min(100% - 2 * var(--gutter), 720px);
    margin: 2.2rem auto 1.6rem;
  }
  .area.is-scrub .area__stage { position: sticky; top: calc(var(--header-h) + 0.6rem); }
  .area__screen {
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    box-shadow: 0 0 0 7px #11151b, 0 0 0 8px rgb(255 255 255 / 0.1), 0 26px 50px -18px #000;
  }
  .area__scrim { background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 35%), linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent 30%); }
  .area__hud { inset: 0.5rem 0.7rem; font-size: 9px; letter-spacing: 0.08em; }
  .compass { --ppd: 3.2px; width: 78%; height: 2.3rem; }
  .compass__deg { top: 11px; font-size: 8px; }
  .compass__deg--card { font-size: 9px; }
  .compass__wp { top: 23px; font-size: 8px; padding: 0 3px; }
  .attitude { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .area__telemetry { gap: 0.2rem 0.9rem; }
  .area.is-scrub .area__table { padding-bottom: 36svh; }
  .area.is-scrub .wp { padding-block: 1.4rem; }
  .wp { grid-template-columns: 3rem minmax(0, 1fr); row-gap: 0.3rem; }
  .wp__meta { grid-column: 2; }
}
@media (max-width: 479px) { .area__telemetry-src { display: none; } }

/* Desktop: Film bildfüllend, Text links fest, Wegpunkte rechts im Fluss */
@media (min-width: 1024px) and (min-height: 640px) {
  .area {
    display: grid;
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 520px) minmax(0, 800px) minmax(var(--gutter), 1fr);
    padding-block: 0;
  }
  .area__stage { grid-column: 1 / -1; grid-row: 1; align-self: start; position: sticky; top: 0; height: 100svh; z-index: 0; }
  .area__screen { position: absolute; inset: 0; }
  .area__scrim {
    background:
      linear-gradient(to right, rgb(3 5 8 / 0.92) 0%, rgb(3 5 8 / 0.7) 30%, rgb(3 5 8 / 0.15) 52%, rgb(3 5 8 / 0.55) 72%, rgb(3 5 8 / 0.9) 100%),
      linear-gradient(to bottom, rgb(3 5 8 / 0.7), transparent 25%, transparent 75%, rgb(3 5 8 / 0.85));
  }
  .area__hud { inset: calc(var(--header-h) + 2.6rem) max(var(--gutter), (100% - var(--container)) / 2) 2rem; }
  .area__text {
    grid-column: 2; grid-row: 1;
    align-self: start;
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-block: calc(var(--header-h) + 2rem) 3rem;
  }
  .area__table {
    grid-column: 3; grid-row: 1;
    padding: calc(var(--header-h) + 7rem) 0 6rem clamp(3rem, 8vw, 9rem);
  }
  .area.is-scrub .area__table { padding-block: 55vh 50vh; }
  .area.is-scrub .area__list { border-top: 0; }
  .area.is-scrub .wp { padding-block: 5.5vh; grid-template-columns: 3.4rem minmax(0, 1fr); }
  .area.is-scrub .wp__meta { grid-column: 2; }
  .area.is-scrub .wp__city { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.8rem); }
  .attitude { top: 0; left: auto; right: 0; width: 104px; height: 104px; margin: 0; }
}

/* ---------------------------------------------------------------------
   11 Workflow mit Flugbahn
   --------------------------------------------------------------------- */
.workflow__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
@media (min-width: 1024px) {
  .workflow__grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .workflow__head { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.workflow__aerial {
  margin-top: 2.5rem;
  aspect-ratio: 16 / 10;
  display: none;
}
@media (min-width: 1024px) { .workflow__aerial { display: block; } }

.flight {
  --p: 0;
  position: relative;
  padding-left: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}
.flight__track {
  position: absolute;
  top: 0.6rem; bottom: 0.6rem;
  left: clamp(1.2rem, 0.9rem + 1vw, 1.9rem);
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 14px);
}
.flight__track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(var(--p));
  transform-origin: top;
}
.flight__drone {
  position: absolute;
  left: clamp(1.2rem, 0.9rem + 1vw, 1.9rem);
  top: calc(0.6rem + var(--p) * (100% - 1.2rem));
  z-index: 2;
  width: 44px; height: 44px;
  margin: -22px 0 0 -21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 6px var(--bg);
  transform: translateX(var(--sway, 0px)) rotate(var(--tilt, 0deg));
}
.flight__drone svg { width: 26px; height: 26px; }
.flight__drone .rotor { transform-box: fill-box; transform-origin: center; }
.motion-ok .flight.is-flying .flight__drone .rotor { animation: spin 0.3s linear infinite; } /* nur während gescrollt wird */
@keyframes spin { to { transform: rotate(360deg); } }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.2rem, 1.5rem + 2.5vw, 4rem); }
.step { position: relative; }
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
  transition: color var(--dur);
}
.step__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.step__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem; height: 3.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  transition: color var(--dur), border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease-spring);
}
.step__icon svg { width: 1.6rem; height: 1.6rem; }
.step p { color: var(--text-muted); max-width: 58ch; }
.step h3 { hyphens: manual; }
@media (max-width: 479px) {
  .step__head { gap: 0.8rem; }
  .step__icon { width: 2.8rem; height: 2.8rem; }
  .step__icon svg { width: 1.35rem; height: 1.35rem; }
  .step h3 { font-size: 1.25rem; }
}
.step.is-active .step__icon { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.step.is-active .step__num { color: var(--accent); }
.step::before { /* Wegpunkt auf der Flugbahn */
  content: "";
  position: absolute;
  top: 0.35rem;
  left: calc(-1 * clamp(3.5rem, 2.5rem + 3vw, 5.5rem) + clamp(1.2rem, 0.9rem + 1vw, 1.9rem) - 5px);
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
  transition: border-color var(--dur), background-color var(--dur);
}
.section--alt .step::before { background: var(--bg-2); }
.step.is-active::before { border-color: var(--accent); background: var(--accent); }

/* ---------------------------------------------------------------------
   12 Leistungen (Karten) & Dialoge
   --------------------------------------------------------------------- */
.services__grid {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(420px, 36vw + 120px, 620px);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  background: #0b0e12;
}
.svc__media { position: absolute; inset: 0; z-index: -2; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); filter: saturate(0.72) contrast(0.94); transition: transform 1.2s var(--ease-out), filter 0.8s; }
.svc::before { /* Lesbarkeits-Verlauf */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(4 6 9 / 0.96) 0%, rgb(4 6 9 / 0.78) 38%, rgb(4 6 9 / 0.12) 72%, rgb(4 6 9 / 0.25) 100%);
}
.svc::after { /* Sucher: AF-Klammern rasten beim Hover ein */
  content: "";
  position: absolute;
  inset: 1rem;
  z-index: 0;
  pointer-events: none;
  --c: #fff;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 22px 2px,
    linear-gradient(var(--c), var(--c)) 0 0 / 2px 22px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 22px 2px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 2px 22px,
    linear-gradient(var(--c), var(--c)) 0 100% / 22px 2px,
    linear-gradient(var(--c), var(--c)) 0 100% / 2px 22px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 22px 2px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 2px 22px;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.25s, transform 0.5s var(--ease-spring);
}
.svc:is(:hover, :focus-within)::after { opacity: 0.9; transform: none; }
.svc:is(:hover, :focus-within) .svc__media img { filter: saturate(1.08) contrast(1.04); }
.svc__index::before { /* wird beim Hover zum REC-Punkt */
  content: "";
  display: inline-block;
  width: 0.6em; height: 0.6em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
  transition: background-color 0.3s;
}
.svc:is(:hover, :focus-within) .svc__index::before { background: var(--rec); }
.svc:hover .svc__media img,
.svc:focus-within .svc__media img { transform: scale(1.12); }
.svc__index {
  position: absolute;
  top: clamp(1.25rem, 1rem + 1vw, 2rem);
  left: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.85);
}
.svc__icon {
  display: grid;
  place-items: center;
  width: 3.2rem; height: 3.2rem;
  margin-bottom: 1.2rem;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.svc__icon svg { width: 1.5rem; height: 1.5rem; }
.svc h3 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); }
.svc p { margin-top: 0.9rem; color: rgb(255 255 255 / 0.84); font-size: var(--fs-sm); line-height: 1.6; }
.svc__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: #fff;
  text-align: left;
}
.svc__more::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* ganze Karte klickbar */
.svc__more svg { width: 1.2rem; height: 1.2rem; transition: transform var(--dur) var(--ease-out); }
.svc:hover .svc__more svg { transform: translateX(5px); }
.svc__more:focus-visible { outline: none; }
.svc:has(.svc__more:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; }
.svc__more-line { position: relative; }
.svc__more-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.svc:hover .svc__more-line::after { transform: scaleX(1); }

/* Dialog */
.modal {
  width: min(100% - 2rem, 940px);
  max-width: none;
  max-height: min(92dvh, 900px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.modal::backdrop { background: rgb(2 4 6 / 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { display: flex; flex-direction: column; }
.motion-ok .modal[open] { animation: modal-in 0.6s var(--ease-out) both; }
.motion-ok .modal[open]::backdrop { animation: fade-in 0.4s ease both; }
.motion-ok .modal[open].is-closing { animation: modal-out 0.3s var(--ease-in-out) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(40px) scale(0.97); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
.modal__scroll { overflow-y: auto; overscroll-behavior: contain; }
.modal__media { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: #000; }
.modal__media img { width: 100%; height: 100%; object-fit: cover; }
.modal__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-2), transparent 70%); }
.modal__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; color: #fff; background: rgb(0 0 0 / 0.45); border-color: rgb(255 255 255 / 0.35); }
.modal__body { padding: 0 clamp(1.25rem, 0.8rem + 2.5vw, 3rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.modal__title { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem); margin-top: -0.6em; position: relative; }
.modal__section { margin-top: 2rem; }
.modal__section h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.modal__section h3 svg { width: 1.3rem; height: 1.3rem; color: var(--accent); flex: none; }
.modal__section p { color: var(--text-muted); }
.modal__section p + p { margin-top: 0.9rem; }
.modal__audience { display: grid; gap: 0.7rem; }
.modal__audience dt { font-weight: 600; color: var(--text); }
.modal__audience dd { color: var(--text-muted); margin-bottom: 0.4rem; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
@media (max-width: 639px) {
  .modal { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .motion-ok .modal[open] { animation: sheet-in 0.55s var(--ease-out) both; }
  .modal__media { aspect-ratio: 16 / 9; }
  .modal__actions .btn { flex: 1 1 100%; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }

/* View-Transition-Morph Karte → Dialog */
::view-transition-group(svc-hero) { animation-duration: 0.6s; animation-timing-function: var(--ease-out); }
::view-transition-old(svc-hero),
::view-transition-new(svc-hero) { height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   13 Portfolio-Reel (horizontal, am Desktop an den Scroll gekoppelt)
   --------------------------------------------------------------------- */
.reel { position: relative; background: var(--bg); }
.reel__sticky { padding-block: var(--section-y); }
.reel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.reel__head .section-head { margin-bottom: 0; }
.reel__tools { display: flex; align-items: center; gap: 1rem; }
.reel__counter { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.14em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.reel__counter b { color: var(--text); font-weight: 500; }
.reel__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
}
.reel__viewport::-webkit-scrollbar { display: none; }
.reel__track {
  display: flex;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  width: max-content;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
}
.reel__item { scroll-snap-align: start; flex: none; width: min(84vw, 560px); }
.reel__item--featured { width: min(90vw, 760px); }
.reel__item--end { width: min(80vw, 380px); display: grid; }

/* Filmstreifen-Perforation */
.reel__strip {
  height: 14px;
  margin-block: 0.9rem;
  background: radial-gradient(circle at 7px 7px, var(--line-strong) 3.5px, transparent 4px) 0 0 / 22px 14px repeat-x;
  opacity: 0.8;
}
.reel__bar { height: 2px; margin-top: 1.6rem; background: var(--line); overflow: hidden; }
.reel__bar span { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--reel-p, 0)); transform-origin: left; }

/* Desktop: vertikales Scrollen bewegt den Streifen */
@media (min-width: 1024px) {
  .reel.is-pinned { height: var(--reel-h, 300vh); }
  .reel.is-pinned .reel__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(var(--header-h) + 1rem) 2rem;
    overflow: clip;
  }
  .reel.is-pinned .reel__viewport { overflow: visible; scroll-snap-type: none; }
  .reel.is-pinned .reel__track { transform: translate3d(calc(var(--reel-x, 0) * -1px), 0, 0); will-change: transform; }
  .reel.is-pinned .reel__item { width: min(36vw, 540px); }
  .reel.is-pinned .reel__item--featured { width: min(50vw, 740px); }
  .reel.is-pinned .reel__item--end { width: min(28vw, 380px); }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .reel.is-pinned .section-head p:not(.kicker),
  .reel.is-pinned .pcard__desc { display: none; }
  .reel.is-pinned .reel__item { width: min(32vw, 480px); }
  .reel.is-pinned .reel__item--featured { width: min(44vw, 640px); }
}

/* Projektkarte */
.pcard { position: relative; display: flex; flex-direction: column; height: 100%; }
.pcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
}
.reel__item--featured .pcard__media { aspect-ratio: 16 / 9; }
.pcard__media img,
.pcard__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), opacity 0.5s;
}
.pcard__media video { opacity: 0; }
.pcard.is-playing .pcard__media video { opacity: 1; }
.pcard:hover .pcard__media img,
.pcard:hover .pcard__media video { transform: scale(1.05); }
.pcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 45%);
  pointer-events: none;
}
.pcard__play {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.5rem; height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  border: 1px solid rgb(255 255 255 / 0.4);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur);
}
.pcard__play svg { width: 1.4rem; height: 1.4rem; margin-left: 3px; }
.pcard.is-playing .pcard__play { opacity: 0; transform: scale(0.6); }
.pcard__tc {
  position: absolute;
  left: 1rem; bottom: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: #fff;
}
.pcard__tc::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--rec); }
.pcard__body { padding-top: 1.3rem; }
.pcard__cat { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.pcard__title { margin-top: 0.55rem; font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); }
.pcard__title a { text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); }
.pcard__title a:focus-visible { outline: none; }
.pcard:has(.pcard__title a:focus-visible) .pcard__media { outline: 3px solid var(--accent); outline-offset: 4px; }
.pcard__desc { margin-top: 0.6rem; color: var(--text-muted); font-size: var(--fs-sm); max-width: 52ch; }
.pcard__cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-weight: 600; color: var(--text); }
.pcard__cta svg { width: 1.1rem; height: 1.1rem; color: var(--accent); transition: transform var(--dur) var(--ease-out); }
.pcard:hover .pcard__cta svg { transform: translate(3px, -3px); }

.reel-end {
  position: relative;
  display: grid;
  align-content: end;
  gap: 1.2rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  min-height: 100%;
}
.reel-end p { color: var(--text-muted); }
.reel-end .h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--text); }

/* ---------------------------------------------------------------------
   14 FAQ
   --------------------------------------------------------------------- */
.faq__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 3rem); }
}
.faq__contact {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.faq__contact p { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 1rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--dur-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary .faq-item__q {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
.faq-item__icon {
  position: relative;
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur), border-color var(--dur);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: rotate(180deg); }
.faq-item[open] .faq-item__icon::after { transform: rotate(0deg); }
.faq-item__a { padding: 0 3.5rem 1.7rem 0; color: var(--text-muted); max-width: 70ch; }
/* Weiches Aufklappen, wo unterstützt */
@supports (interpolate-size: allow-keywords) {
  .motion-ok .faq-item { interpolate-size: allow-keywords; }
  .motion-ok .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.5s var(--ease-out), content-visibility 0.5s allow-discrete;
  }
  .motion-ok .faq-item[open]::details-content { height: auto; }
}

/* ---------------------------------------------------------------------
   15 CTA & Footer
   --------------------------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 3rem + 12vw, 13rem);
  color: #fff;
  background: #05070a;
  text-align: center;
}
.cta__bg { position: absolute; inset: -12% 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta__bg--camera img { object-position: 30% 50%; } /* Kamera links bleibt auch im Hochformat im Bild */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 58% at 50% 50%, rgb(3 5 8 / 0.74), rgb(3 5 8 / 0.3)), /* dunkel hinter dem Text, Bild am Rand sichtbar */
    linear-gradient(to bottom, rgb(3 5 8 / 0.45), transparent 30%, transparent 70%, rgb(3 5 8 / 0.6));
}
.cta__inner { position: relative; max-width: 900px; }
.cta .kicker { justify-content: center; color: var(--accent-strong); }
.cta h2 { color: #fff; font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.6rem); }
.cta__inner > p:not(.kicker) { max-width: 56ch; margin: 1.5rem auto 0; font-size: var(--fs-lg); color: rgb(255 255 255 / 0.86); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 2.6rem; }

.site-footer {
  position: relative;
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer__top {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1.6fr repeat(3, 1fr); } }
/* Smartphone/Tablet: Linklisten nebeneinander statt langer Spalte (Reihenfolge bleibt wie im Code) */
@media (max-width: 1023.98px) {
  .footer__top { gap: 2rem; }
  .footer__col .footer__list { display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem; }
}
.footer__brand img { height: 64px; width: auto; margin-bottom: 1.2rem; }
.footer__brand p { color: var(--text-muted); max-width: 34ch; }
.footer__tagline { margin-top: 0.9rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent) !important; }
.footer__title {
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.footer__list a,
.footer__address a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 85% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease-out), color var(--dur-fast);
}
.footer__list a:hover,
.footer__address a:hover { background-size: 100% 1px; color: var(--accent); }
.footer__address { color: var(--text-muted); display: grid; gap: 0.2rem; }
.footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  color: var(--text);
  overflow: visible;
  user-select: none;
}
.footer__wordmark text {
  font-family: var(--font-display);
  font-weight: 800;
  fill: url(#wordmark-fill);
}
.footer__wordmark stop { stop-color: currentColor; }
.footer__wordmark .wm-top { stop-opacity: 0.16; }
.footer__wordmark .wm-bottom { stop-opacity: 0; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.6rem 2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer__legal a,
.footer__legal button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.footer__legal a:hover,
.footer__legal button:hover { color: var(--text); text-decoration-color: currentColor; }
.motion-toggle__state { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; padding: 0.15rem 0.5rem; border-radius: 2px; border: 1px solid var(--line-strong); }
.to-top { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; color: var(--text); text-decoration: none; font-weight: 600; }
.to-top svg { width: 1.1rem; height: 1.1rem; transition: transform var(--dur) var(--ease-out); }
.to-top:hover svg { transform: translateY(-4px); }

.signature { background: #030405; border-top: 1px solid rgb(255 255 255 / 0.06); }
.signature a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.6rem 1rem;
  color: #a7b1bd;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color var(--dur-fast);
}
.signature img { width: 28px; height: 28px; border-radius: 6px; transition: transform var(--dur) var(--ease-spring); }
.signature strong { color: #eef2f6; font-weight: 500; }
.signature a:hover { color: #eef2f6; }
.signature a:hover img { transform: rotate(-8deg) scale(1.1); }

/* ---------------------------------------------------------------------
   16 Unterseiten: Seitenkopf, Über mich, Portfolio, Rechtliches, Fehler
   --------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 8rem)) 0 clamp(3.5rem, 2rem + 5vw, 7rem);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-hero--media { color: #fff; background: #05070a; min-height: min(88svh, 860px); display: flex; align-items: flex-end; }
.page-hero__bg { position: absolute; inset: -8% 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(4 6 9 / 0.95) 0%, rgb(4 6 9 / 0.6) 40%, rgb(4 6 9 / 0.25) 75%, rgb(4 6 9 / 0.55) 100%),
    linear-gradient(to right, rgb(4 6 9 / 0.6), transparent 70%);
}
.page-hero--media .page-title,
.page-hero--media .page-hero__lead { color: #fff; }
.page-hero--media .page-hero__lead { color: rgb(255 255 255 / 0.88); }
.page-hero--media .breadcrumb,
.page-hero--media .breadcrumb a { color: rgb(255 255 255 / 0.85); }
.page-hero--media .kicker { color: var(--accent-strong); }
.page-title { font-size: min(clamp(3rem, 1.2rem + 8vw, 9.5rem), 11.5vw); line-height: 0.9; }
.motion-ok .page-title { animation: rise-fade 0.8s var(--ease-out) 0.1s both; }
.page-hero__lead { max-width: 58ch; margin-top: 1.6rem; font-size: var(--fs-lg); color: var(--text-muted); }
.page-hero__hud {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.2rem, 1rem + 1vw, 2rem);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.page-hero--media .page-hero__hud { color: rgb(255 255 255 / 0.75); }
@media (max-width: 639px) { .page-hero__hud { display: none; } }

.breadcrumb { margin-bottom: 2rem; font-size: var(--fs-sm); color: var(--text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: inherit; font-weight: 600; }

/* Duo: Text + Bild */
.duo { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (min-width: 1024px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--reverse > :first-child { order: 2; }
}
.duo__media .media { aspect-ratio: 4 / 3; }
.duo__media--portrait .media { aspect-ratio: 4 / 5; }
.duo__text h2 { margin-bottom: 1.6rem; }

/* Expertise-Karten */
.cards { display: grid; gap: clamp(1rem, 0.6rem + 1.2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); list-style: none; margin: 0; padding: 0; }
.card {
  position: relative;
  height: 100%;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease-out), background-color var(--dur);
}
.card:hover { border-color: var(--line-strong); }
.card__num { position: absolute; top: 1.4rem; right: 1.6rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; color: var(--text-dim); }
.card__icon {
  display: grid;
  place-items: center;
  width: 3.4rem; height: 3.4rem;
  margin-bottom: 1.6rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon svg { width: 1.6rem; height: 1.6rem; }
.card h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem); margin-bottom: 0.8rem; }
.card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; position: relative; }

/* Werte */
.values { display: grid; gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (min-width: 1024px) { .values { grid-template-columns: 1fr 1fr; } .values__list { order: 2; } }
.values__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: v; }
.values__list li {
  counter-increment: v;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.values__list li:first-child { border-top: 1px solid var(--line); }
.values__list li::before {
  content: "0" counter(v);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* Handwerk trifft Kreativität */
.dual {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
@media (min-width: 1024px) { .dual { grid-template-columns: 1.1fr 0.9fr; } }
.dual__text { padding: clamp(2rem, 1.2rem + 3vw, 4.5rem); }
.dual__text h2 { margin-bottom: 1.5rem; }
.dual__text .link-arrow { margin-top: 2rem; }
.dual__media { min-height: 320px; position: relative; overflow: hidden; }
.dual__media img { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; }

/* Portfolio-Seite */
.project-index {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.project-index ol {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0;
  padding: 0.75rem 0;
  list-style: none;
}
.project-index ol::-webkit-scrollbar { display: none; }
.project-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.project-index a span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); }
.project-index a:hover,
.project-index a.is-current { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.project-index a.is-current span { color: var(--accent); }

.project {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 5rem);
  padding-block: clamp(4rem, 2.5rem + 5vw, 8rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 4.5rem);
}
.project:last-of-type { border-bottom: 0; }
/* Titel steht im Code vor dem Film (Smartphone: Titel → Film → Text); am Desktop Film daneben */
.project { grid-template-areas: "head" "media" "info"; }
.project__head { grid-area: head; }
.project__media { grid-area: media; }
.project__info { grid-area: info; }
.project__head h2 { margin: 0; }
@media (max-width: 1099.98px) {
  .project { gap: 1.4rem; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
  .project__head .project__num { font-size: clamp(3rem, 2rem + 5vw, 4.5rem); }
}
@media (min-width: 1100px) {
  .project { grid-template-columns: 1.15fr 0.85fr; grid-template-rows: auto 1fr; grid-template-areas: "media head" "media info"; column-gap: clamp(2rem, 1.5rem + 3vw, 5rem); row-gap: 1.6rem; align-items: start; }
  .project--reverse { grid-template-columns: 0.85fr 1.15fr; grid-template-areas: "head media" "info media"; }
  .project__media { position: sticky; top: calc(var(--header-h) + 6rem); }
}
.project__num {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 2rem + 6vw, 8rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--bg-3);
}
.project__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.project h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); }
.project__lead { margin-top: 1.2rem; font-size: var(--fs-lg); color: var(--text); }
.project__info > :first-child { margin-top: 0; }
.project__desc { margin-top: 1.4rem; }
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 1px;
  margin-top: 2rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}
.specs div { padding: 1.1rem 1.2rem; background: var(--surface); }
.specs dt { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.35rem; }
.specs dd { font-weight: 600; line-height: 1.35; }
.project__highlights { margin-top: 2rem; }
.project__highlights h3 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-bottom: 1rem; }
.project .link-arrow { margin-top: 2rem; }

/* Video-Player mit Poster (lädt erst auf Klick) */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: var(--shadow);
}
.player img,
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player video { object-fit: contain; background: #000; }
.player__start {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  width: 100%;
  color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.1));
  transition: background-color var(--dur);
}
.player__icon {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 3.5rem + 3vw, 6.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  transition: transform var(--dur) var(--ease-spring);
}
.player__icon svg { width: 34%; height: 34%; margin-left: 6%; }
.player__start:hover .player__icon,
.player__start:focus-visible .player__icon { transform: scale(1.08); }
.player__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 1px 8px rgb(0 0 0 / 0.7); }
.player__start:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: var(--radius-lg); }
.player.is-loaded .player__start,
.player.is-loaded img { display: none; }
.player__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--text-dim); }

/* Filmbeschreibung (Textalternative zum Video, WCAG 1.2.1/1.2.3) */
.film-desc { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.film-desc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.film-desc summary::-webkit-details-marker { display: none; }
.film-desc summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.25rem; line-height: 1; color: var(--accent); }
.film-desc[open] summary::after { content: "–"; }
.film-desc summary:hover { color: var(--accent); }
.film-desc > div { padding: 0 1.1rem 1.1rem; color: var(--text-muted); font-size: var(--fs-sm); }
.film-desc > div p + p { margin-top: 0.6rem; }

/* Rechtstexte */
.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-y); }
.legal__grid { display: grid; gap: 3rem; }
@media (min-width: 1100px) {
  .legal__grid { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.legal__toc { font-size: var(--fs-sm); }
.legal__toc p { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.8rem; }
.legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; border-left: 1px solid var(--line); }
.legal__toc a { display: block; padding: 0.4rem 0 0.4rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; line-height: 1.35; }
.legal__toc a:hover,
.legal__toc a.is-current { color: var(--text); border-left-color: var(--accent); }
.legal-content { max-width: 78ch; }
.legal-content > section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.legal-content > section:last-child { border-bottom: 0; }
.legal-content h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 1.2rem; }
.legal-content h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; margin: 1.8rem 0 0.7rem; }
.legal-content p,
.legal-content li,
.legal-content dd { color: var(--text-muted); }
.legal-content p + p { margin-top: 0.9rem; }
.legal-content ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; margin: 0.8rem 0; }
.legal-content address,
.legal-card {
  margin-top: 1rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  line-height: 1.7;
}
.legal-content code { font-family: var(--font-mono); font-size: 0.88em; padding: 0.1em 0.4em; border-radius: 4px; background: var(--bg-3); color: var(--text); }
.legal-content .table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.legal-content th,
.legal-content td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-content th { font-weight: 600; color: var(--text); background: var(--bg-3); }
.legal-content td { color: var(--text-muted); }
.legal-content tr:last-child td { border-bottom: 0; }
.legal-meta { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--text-dim); }

/* Fehlerseiten – „Kein Signal“ */
.error-screen {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  overflow: hidden;
  text-align: center;
  background: #05070a;
  color: #fff;
}
.error-screen__bars {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  opacity: 0.16;
  filter: saturate(0.9);
}
.error-screen__bars i:nth-child(1) { background: #c0c0c0; }
.error-screen__bars i:nth-child(2) { background: #c0c000; }
.error-screen__bars i:nth-child(3) { background: #00c0c0; }
.error-screen__bars i:nth-child(4) { background: #00c000; }
.error-screen__bars i:nth-child(5) { background: #c000c0; }
.error-screen__bars i:nth-child(6) { background: #c00000; }
.error-screen__bars i:nth-child(7) { background: #0000c0; }
.error-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, rgb(5 7 10 / 0.6), #05070a 90%); }
.error-screen__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 3rem + 18vw, 18rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, #fff 20%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.motion-ok .error-screen__code { animation: glitch 2.4s steps(1) 2; }
@keyframes glitch {
  0%, 92%, 100% { transform: none; filter: none; }
  93% { transform: translate(-4px, 1px) skewX(-6deg); filter: hue-rotate(90deg); }
  95% { transform: translate(3px, -2px); }
  97% { transform: translate(-2px, 0) skewX(4deg); filter: hue-rotate(-60deg); }
}
.error-screen h1 { margin-top: 1rem; font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); text-transform: none; line-height: 1.1; color: #fff; }
.error-screen p { max-width: 52ch; margin: 1.2rem auto 0; color: rgb(255 255 255 / 0.84); }
.error-screen .kicker { justify-content: center; color: var(--accent-strong); }
.error-screen__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 2.4rem; }

/* Immer dunkle Flächen behalten die hellen Akzentfarben (Kontrast im hellen Schema) */
.hero, .cta, .page-hero--media, .area {
  --text: #eef2f6;
  --text-muted: #a7b1bd;
  --text-dim: #8793a1;
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.18);
  --accent: #5cb8e6;
  --accent-strong: #8fd3f5;
  --accent-ink: #04121b;
  --accent-soft: rgb(92 184 230 / 0.12);
}

/* Ergänzungen Rechtstexte & Fehlerseiten */
/* ---------------------------------------------------------------------
   1  PFLICHT (Bugfix): Rechtstexte laufen unter 1100 px rechts aus dem Bild
   ---------------------------------------------------------------------
   .legal__grid hat unter 1100 px keine Spaltendefinition. Der implizite
   Track ist „auto“ und wächst auf die min-content-Breite von
   .legal-content (Tabelle, lange URLs) → bei 375 px ist der Inhalt
   ~750 px breit, das Layout-Viewport wird mitgezogen, Header und Text
   werden abgeschnitten. Getestet: mit diesem Fix 0 px Überlauf,
   Tabellen scrollen (bzw. stapeln, siehe 4) innerhalb der Spalte. */
@media (max-width: 1099px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Lange URLs (Widerspruchs-Links) dürfen umbrechen */
.legal-content a { overflow-wrap: anywhere; }


/* ---------------------------------------------------------------------
   2  Abstände nach Kästen
   ---------------------------------------------------------------------
   .legal-card / address haben nur margin-top; ein folgender Absatz klebt
   sonst direkt am Kasten (z. B. „Einen Datenschutzbeauftragten …“). */
.legal-content :is(address, .legal-card, .table-wrap, .specs) + :is(p, ul) { margin-top: 1rem; }
.legal-card > p + p { margin-top: 0.6rem; }


/* ---------------------------------------------------------------------
   3  Hervorgehobener Kasten (Widerspruchsrecht, Widerspruch Zählung)
   --------------------------------------------------------------------- */
.legal-card--highlight {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.legal-card--highlight strong { color: var(--text); }


/* ---------------------------------------------------------------------
   4  Tabellen mobil als gestapelte Karten
   ---------------------------------------------------------------------
   HTML: <div class="table-wrap table-wrap--stack">, jede <td> hat
   data-label="Spaltenname", erste Spalte ist <th scope="row">.
   Hinweis: display:block auf Tabellenelementen kann in älteren Safari-
   Versionen die Tabellen-Semantik für Screenreader aufheben; die
   Spaltennamen stehen per data-label trotzdem sichtbar/vorlesbar da. */
@media (max-width: 639px) {
  .legal-content .table-wrap--stack { overflow: visible; border: 0; border-radius: 0; }
  .table-wrap--stack table,
  .table-wrap--stack tbody,
  .table-wrap--stack tr,
  .table-wrap--stack th,
  .table-wrap--stack td { display: block; width: 100%; }
  .table-wrap--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .table-wrap--stack tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
  }
  .legal-content .table-wrap--stack th[scope="row"] { border-bottom: 1px solid var(--line); }
  .legal-content .table-wrap--stack td { padding: 0.45rem 1rem; border-bottom: 0; }
  .legal-content .table-wrap--stack td:last-child { padding-bottom: 0.9rem; }
  .table-wrap--stack td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
}


/* ---------------------------------------------------------------------
   5  Fragen-/Aktionskasten am Ende der Rechtstexte
   --------------------------------------------------------------------- */
.legal-cta { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.legal-content .legal-cta h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 0.8rem; }
.legal-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }


/* ---------------------------------------------------------------------
   6  Inhaltsverzeichnis auf Tablets zweispaltig (optional)
   ---------------------------------------------------------------------
   Unter 1100 px steht das Verzeichnis (15 Einträge) über dem Text. */
@media (min-width: 640px) and (max-width: 1099px) {
  .legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}


/* ---------------------------------------------------------------------
   7  Fehlerseiten: immer dunkle Akzentfarben (Kontrast im hellen Schema)
   ---------------------------------------------------------------------
   .error-screen ist immer dunkel (#05070a), die Akzent-Tokens wechseln
   im hellen Schema aber auf dunkles Blau: Kicker 2,3:1, Links 3,2:1
   (gemessen). Dunkle Werte aus :root lokal erzwingen. */
.error-screen {
  --accent: #5cb8e6;
  --accent-strong: #8fd3f5;
  --accent-ink: #04121b;
  --accent-soft: rgb(92 184 230 / 0.12);
}


/* ---------------------------------------------------------------------
   8  Fehlerseiten: „Hier geht es weiter“ (SEO-Spec 3.7)
   ---------------------------------------------------------------------
   <nav class="error-screen__nav"><h2 class="kicker">…</h2><ul role="list">…</ul></nav> */
.error-screen__nav { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.error-screen__nav .kicker { margin-bottom: 0.9rem; }
.error-screen__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; }
.error-screen__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;               /* Zielgröße 44 px */
  color: rgb(255 255 255 / 0.84);
  text-decoration-color: rgb(255 255 255 / 0.35);
}
.error-screen__nav a:hover { color: #fff; text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------
   17 Formulare, Kontakt & Karte
   --------------------------------------------------------------------- */
.quick-info { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); list-style: none; margin: 0; padding: 0; }
.quick-info li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.quick-info li:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); }
.quick-info h2 { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.35rem; }
.quick-info p { font-weight: 600; font-size: var(--fs-lg); line-height: 1.35; }
.quick-info p a { text-decoration: none; }
.quick-info p a:hover { color: var(--accent); text-decoration: underline; }
.quick-info small { display: block; margin-top: 0.3rem; font-size: var(--fs-sm); color: var(--text-muted); }

.contact__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 1.35fr 0.65fr; align-items: start; }
  .contact__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.form-card {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.form-card h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.form-card__intro { margin-top: 0.8rem; color: var(--text-muted); }
.form { display: grid; gap: 1.4rem; margin-top: 2rem; }
.form__row { display: grid; gap: 1.4rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.5rem; }
.field label,
.field .label { font-weight: 600; font-size: var(--fs-sm); }
.field .req { color: var(--accent); }
.field .opt { color: var(--text-dim); font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--field-border);
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background-color var(--dur-fast);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238793a1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
}
.field ::placeholder { color: var(--text-dim); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-dim); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.field [aria-invalid="true"] { border-color: #ff7b7b; box-shadow: 0 0 0 4px rgb(255 123 123 / 0.12); }
:root[data-theme="light"] .field [aria-invalid="true"] { border-color: #b3261e; }
.field__error { display: flex; align-items: flex-start; gap: 0.45rem; font-size: var(--fs-sm); color: #ff9b9b; }
:root[data-theme="light"] .field__error { color: #b3261e; }
.field__error:empty { display: none; }
.field__hint { font-size: var(--fs-xs); color: var(--text-dim); display: flex; justify-content: space-between; gap: 1rem; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.check input {
  appearance: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: 0.1rem;
  border-radius: 6px;
  border: 1.5px solid var(--text-dim);
  background: var(--bg) center / 0.95rem no-repeat;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.check input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .check input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.check label { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: var(--fs-xs); color: var(--text-dim); }
.form__submit { justify-self: start; min-width: 14rem; }
.form__submit[aria-busy="true"] { pointer-events: none; opacity: 0.75; }
.form__submit .spinner { display: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.form__submit[aria-busy="true"] .spinner { display: block; animation: spin 0.8s linear infinite; }
.form__submit[aria-busy="true"] .btn__arrow { display: none; }

.alert {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.alert svg { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.1rem; }
.alert--success { border-color: color-mix(in srgb, #3ecf8e 50%, transparent); background: rgb(62 207 142 / 0.1); }
.alert--success svg { color: #3ecf8e; }
.alert--error { border-color: color-mix(in srgb, #ff7b7b 55%, transparent); background: rgb(255 123 123 / 0.08); }
.alert--error svg { color: #ff7b7b; }
:root[data-theme="light"] .alert--success svg { color: #137a4a; }
:root[data-theme="light"] .alert--error svg { color: #b3261e; }
.alert strong { display: block; margin-bottom: 0.2rem; color: var(--text); }
.alert ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.alert a { color: var(--text); }

.aside-card {
  padding: 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.aside-card + .aside-card { margin-top: 1rem; }
.aside-card h2 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; margin-bottom: 0.6rem; }
.aside-card p { color: var(--text-muted); font-size: var(--fs-sm); }
.aside-card .btn { margin-top: 1rem; }
.aside-card__actions { display: grid; gap: 0.6rem; margin-top: 1.1rem; }
.aside-card__actions .btn { margin-top: 0; justify-content: flex-start; }

.form-return { display: none; margin-bottom: 1.5rem; }
.form-return:target { display: flex; }

/* Karte: 2-Klick-Lösung (lädt OpenStreetMap erst nach Einwilligung) */
.map {
  position: relative;
  overflow: hidden;
  width: 100%; /* sonst leitet aspect-ratio aus min-height eine Überbreite ab */
  aspect-ratio: 16 / 7;
  min-height: 360px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
}
.map__pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem; height: 4rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--accent);
  color: var(--accent-ink);
}
.map__pin svg { width: 1.5rem; height: 1.5rem; transform: rotate(45deg); }
.map__consent address { font-weight: 600; font-size: var(--fs-lg); }
.map__consent p { max-width: 52ch; color: var(--text-muted); font-size: var(--fs-sm); }
.map__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.map.is-loaded .map__consent { display: none; }
@media (max-width: 639px) { .map { aspect-ratio: auto; min-height: 460px; } }

/* Ergänzungen Über mich & Portfolio */
/* 1) BUG (betrifft auch index.html, CTA auf Mobil):
      <picture> in .page-hero__bg / .cta__bg hat keine Höhe → das <img>
      (height:100%) fällt auf seine natürliche Höhe zurück. Auf 375 px ist das
      CTA-Bild nur 250 px hoch, die Fläche aber 800 px (oberes Drittel Bild,
      Rest schwarz). Gemessen im Browser.
      In about/portfolio habe ich das umgangen: <img srcset> direkt, ohne
      <picture>. Mit dieser Regel funktioniert auch das Muster aus dem
      Design-Guide (und die index-CTA). */
.page-hero__bg picture,
.cta__bg picture,
.dual__media picture { display: block; width: 100%; height: 100%; }

/* 2) Portfolio: Bei .project--reverse wandert nur das Medium in Spalte 2.
      Die Spalten bleiben 1.15fr / 0.85fr → bei Projekt 02 und 04 ist der Player
      deutlich kleiner (≈ 530 statt 720 px bei 1440 px). Spalten mitdrehen,
      dann sind alle vier Player gleich groß: */
@media (min-width: 1100px) {
  .project--reverse { grid-template-columns: 0.85fr 1.15fr; }
}

/* 3) .specs: Grid mit 1-px-Gap auf --line-Hintergrund. Bleibt in der letzten
      Zeile eine Zelle leer (3 Einträge auf Mobil = 2+1; 4 Einträge in der
      schmalen Spalte = 3+1), sieht man ein leeres --line-Feld.
      Flex statt Grid: Einträge der letzten Zeile füllen die Breite. */
.specs { display: flex; flex-wrap: wrap; }
.specs div { flex: 1 1 150px; }

/* 4) .player__meta: Auf 375 px bricht „Imagefilm · 75 Sekunden“ /
      „4K-Master · 16:9“ je zweizeilig um (space-between ohne wrap). */
.player__meta { flex-wrap: wrap; row-gap: 0.3rem; }

/* 5) H1-Eyebrow auf Unterseiten: <span class="kicker"> als erstes Kind der
      .page-title braucht eine eigene Zeile. Aktuell nutze ich dafür die
      vorhandene Klasse .hero__eyebrow (display:flex; fit-content; text-shadow).
      Sauberer als eigene Regel – danach kann .hero__eyebrow in about/portfolio
      entfallen: */
.page-title .kicker {
  display: flex;
  width: fit-content;
  max-width: 100%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-hero--media .page-title .kicker { text-shadow: 0 1px 10px rgb(0 0 0 / 0.85); }

/* 6) Werte-Block (about): Der Textteil in .values hat keine eigene Klasse;
      ich nutze .duo__text (nur wegen h2 { margin-bottom }). Optional eigene: */
.values__text h2 { margin-bottom: 1.6rem; }

/* 7) .dual__media img ist 115 % hoch, aber oben bündig (Reserve nur unten).
      data-parallax verschiebt in beiden Richtungen → oben entsteht beim
      Scrollen ein Spalt (bis ≈ 25 px Desktop / ≈ 10 px Mobil, weil der
      Messcontainer <picture> 0 px hoch ist). Deshalb habe ich data-parallax am
      Handwerk-Bild weggelassen. Mit dieser Regel (Reserve oben und unten)
      kann data-parallax="0.06" wieder ans <img>: */
.dual__media img { top: -7.5%; bottom: auto; height: 115%; }

/* Ergänzungen Kontakt */
/* Quick-Info: Icon-Kachel nutzt .card__icon – dort steht margin-bottom für Karten,
   in der Zeile (flex) wird sie nicht gebraucht */
.quick-info__icon { margin-bottom: 0; flex: none; width: 3rem; height: 3rem; border-radius: var(--radius); }
.quick-info__icon svg { width: 1.4rem; height: 1.4rem; }

/* Sidebar-Karten: kompaktere Icon-Kachel (nutzt ebenfalls .card__icon) */
.aside-card__icon { width: 2.8rem; height: 2.8rem; margin-bottom: 1rem; border-radius: var(--radius); }
.aside-card__icon svg { width: 1.35rem; height: 1.35rem; }

/* Inline-Fehler: Icon wird per JS erzeugt (Fallback width/height=16 am <svg>) */
.field__error svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2em; }

/* Fehlermeldung unter der Datenschutz-Checkbox (steht in der rechten Spalte von .check) */
.check .field__error { margin-top: 0.5rem; }

/* Pflichtfeld-Hinweis über dem Formular: Sternchen wie in den Labels einfärben */
.form__note .req { color: var(--accent); }

/* Zeichenzähler: nicht umbrechen, ruhige Ziffern, Warnstufe ab 80 % / 100 %
   (contact.js setzt data-level="0|1|2") */
.field__hint [data-char-count] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.field__hint [data-char-count][data-level="1"] { color: var(--text-muted); }
.field__hint [data-char-count][data-level="2"] { color: #ff9b9b; font-weight: 600; }
:root[data-theme="light"] .field__hint [data-char-count][data-level="2"] { color: #b3261e; }

/* Meldungen (Erfolg/Fehler): Absätze und Listenpunkte leicht absetzen
   (Fokusring kommt aus der globalen :focus-visible-Regel) */
.alert p + p { margin-top: 0.45rem; }
.alert li + li { margin-top: 0.25rem; }

/* Karte nach dem Laden: neutraler Hintergrund, solange Kacheln laden */
.map.is-loaded { background: var(--bg-3); }

/* =====================================================================
   Unterseiten – Kino-Effekte (Seitenkopf, belichteter Text, Radar, Bänder)
   ===================================================================== */

/* Seitenkopf: Sucher-Rahmen, REC-Timecode, Scroll-Zoom & Ausblenden */
.page-hero { --hp: 0; }
.page-hero__frame {
  position: absolute;
  inset: calc(var(--header-h) + 0.75rem) var(--gutter) 1rem;
  z-index: 0;
  pointer-events: none;
  color: var(--text-dim);
}
.page-hero--media .page-hero__frame { color: rgb(255 255 255 / 0.7); }
.page-hero__frame span { position: absolute; width: 26px; height: 26px; border: 2px solid currentColor; opacity: 0.7; }
.page-hero__frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.page-hero__frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.page-hero__frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.page-hero__frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__hud { z-index: 2; right: calc(var(--gutter) + 2.2rem); bottom: clamp(1.6rem, 1.3rem + 1vw, 2.4rem); }
.page-hero__hud .hud__rec { color: inherit; }
.motion-ok .page-hero__bg img { transform: scale(calc(1.04 + var(--hp) * 0.14)); transform-origin: 50% 40%; will-change: transform; }
.motion-ok .page-hero .container { opacity: calc(1 - var(--hp) * 1.4); transform: translate3d(0, calc(var(--hp) * -70px), 0); }
.page-hero .hero__bar { z-index: 5; }
@media (max-width: 639px) { .page-hero__frame { display: none; } }

/* Text, der sich beim Scrollen Wort für Wort „belichtet“ (Kontrast bleibt auch im Dunkel-Zustand ≥ 4.5:1) */
.lead--statement {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.15rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.01em;
  max-width: 34ch;
}
.scrub .sw {
  --w: clamp(0, var(--sp, 1) * var(--n, 1) - var(--i, 0), 1);
  color: color-mix(in srgb, var(--scrub-on, var(--text)) calc(var(--w) * 100%), var(--text-dim));
  transition: color 0.2s linear;
}
.scrub em { font-style: normal; }
.scrub em .sw { --scrub-on: var(--accent); }

/* Werte: Linien ziehen sich beim Einblenden nacheinander auf */
.values__list li { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat; }
.motion-ok .values__list li { background-size: 0 2px; transition: background-size 1.2s var(--ease-out); }
.motion-ok .values__list.is-in li { background-size: 100% 2px; }
.values__list li:nth-child(2) { transition-delay: 0.15s; }
.values__list li:nth-child(3) { transition-delay: 0.3s; }
.values__list li:nth-child(4) { transition-delay: 0.45s; }

/* Kontakt: Entfernungen als Flugplan + Karte */
.locator { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .locator { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
  .locator .map { aspect-ratio: auto; height: 100%; min-height: 480px; }
}
.routes {
  padding: clamp(1.25rem, 1rem + 1.2vw, 2.2rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.routes__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.routes__h {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0;
}
:root[data-theme="light"] .routes__h { color: #fff; }
.routes__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.routes__table thead th {
  padding: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-strong);
}
.routes__table tbody th,
.routes__table td { padding: 0.8rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.routes__table tbody th { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.01em; text-transform: uppercase; }
.routes__table td { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.routes__table :is(th, td):not(:first-child) { padding-left: 1rem; }
.routes__table tbody tr { transition: background-color var(--dur-fast); }
.routes__table tbody tr:hover { background: var(--accent-soft); }
.dir { /* Kursnadel: zeigt von Niesky aus in Richtung des Ortes (Norden = oben) */
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-right: 0.55em;
  vertical-align: -0.08em;
  background: var(--accent);
  clip-path: polygon(50% 0, 92% 100%, 50% 76%, 8% 100%);
  transform: rotate(var(--b));
}
.motion-ok .routes .dir { transform: rotate(0deg); transition: transform 1.2s var(--ease-spring); }
.motion-ok .routes.is-in .dir { transform: rotate(var(--b)); }
.motion-ok .routes.is-in tr:nth-child(2) .dir { transition-delay: 0.08s; }
.motion-ok .routes.is-in tr:nth-child(3) .dir { transition-delay: 0.16s; }
.motion-ok .routes.is-in tr:nth-child(4) .dir { transition-delay: 0.24s; }
.motion-ok .routes.is-in tr:nth-child(5) .dir { transition-delay: 0.32s; }
.motion-ok .routes.is-in tr:nth-child(6) .dir { transition-delay: 0.4s; }
.motion-ok .routes.is-in tr:nth-child(7) .dir { transition-delay: 0.48s; }
.routes__note { margin-top: 1.1rem; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 479px) {
  .routes { padding: 1.1rem; }
  .routes__table thead tr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* bleibt für Screenreader */
  .routes__table tbody th { font-size: 1.02rem; }
  .routes__table :is(th, td):not(:first-child) { padding-left: 0.6rem; }
  .routes__table td { font-size: 0.82rem; }
}

/* ---------------------------------------------------------------------
   17b Smartphone-Feinschliff (Seite für Seite)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Startseite – Leistungen als Wisch-Leiste statt drei hoher Karten untereinander */
  .services__grid {
    display: flex;
    gap: 0.9rem;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .services__grid > li { flex: 0 0 84%; scroll-snap-align: start; }
  .svc { min-height: 30rem; }
  .services__hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .services__hint::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

  /* Über mich – Expertise kompakt: Symbol neben der Überschrift */
  .cards { gap: 0.75rem; }
  .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 1.25rem; }
  .card__icon { width: 2.8rem; height: 2.8rem; margin: 0; }
  .card__icon svg { width: 1.35rem; height: 1.35rem; }
  .card h3 { margin: 0; padding-right: 1.6rem; }
  .card p { grid-column: 1 / -1; margin-top: 0.8rem; }
  .card__num { top: 1rem; right: 1.1rem; }

  /* Kontakt – kompakte Kontaktzeilen, Formular ohne doppelten Rahmen, Seitenleiste ohne Wiederholung */
  .quick-info { gap: 0.6rem; }
  .quick-info li { padding: 1rem 1.1rem; gap: 0.9rem; align-items: center; }
  .quick-info__icon { width: 2.6rem; height: 2.6rem; }
  .quick-info p { font-size: var(--fs-base); }
  .form-card { padding: 1.4rem 1.15rem; }
  .form__submit { justify-self: stretch; min-width: 0; }
  .contact__aside .aside-card:first-child { display: none; } /* Telefon & E-Mail stehen schon ganz oben */
  .aside-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; padding: 1.1rem; }
  .aside-card__icon { grid-row: span 3; width: 2.4rem; height: 2.4rem; margin: 0; }
  .aside-card h2 { margin-bottom: 0.3rem; }
  .aside-card .btn { justify-self: start; margin-top: 0.8rem; }
  .aside-card + .aside-card { margin-top: 0.6rem; }
  .section--tight:has(.quick-info) { padding-bottom: 1.25rem; }
  .section.contact { padding-top: 1.25rem; }
}
@media (min-width: 768px) { .services__hint { display: none; } }

/* ---------------------------------------------------------------------
   18 Motion: Reveals, Split-Text, Cursor, View Transitions, Reduced Motion
   --------------------------------------------------------------------- */
/* Inhalte sind ohne JS/ohne Motion immer sichtbar; nur .motion-ok blendet ein */
.motion-ok [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.motion-ok [data-reveal="fade"] { transform: none; }
.motion-ok [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.motion-ok [data-reveal="scale"] { transform: scale(0.94); }
.motion-ok [data-reveal].is-in { opacity: 1; transform: none; }

/* Bilder: öffnen sich wie das Bildfenster eines Films – leicht überbelichtet, dann korrekt */
.motion-ok [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 1.25s var(--ease-in-out);
}
.motion-ok [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.motion-ok [data-reveal="clip"] img { filter: brightness(1.9) contrast(0.7); transform: scale(1.18); transition: filter 1.6s var(--ease-out) 0.3s, transform 1.8s var(--ease-out); }
.motion-ok [data-reveal="clip"].is-in img { filter: none; transform: scale(1.1); }

/* Überschriften: Schärfe ziehen (Rack Focus) statt Wort-für-Wort-Schieben */
.motion-ok .split {
  filter: blur(14px);
  opacity: 0.15;
  transform: scale(1.025);
  transform-origin: left center;
  transition: filter 1.1s var(--ease-out), opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.section-head--center .split { transform-origin: center; }
.motion-ok .split.is-in { filter: blur(0); opacity: 1; transform: none; }

/* Color Grading: LOG-Ebene wird beim Scrollen von links nach rechts „gegradet“ */
[data-grade] { --g: 0; }
.grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 0 0 calc(var(--g) * 100%));
}
.grade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion-ok [data-grade] .grade img,
.motion-ok [data-grade].is-in .grade img { filter: saturate(0.28) contrast(0.62) brightness(1.16) sepia(0.12); }
.grade__line {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--g) * 100%);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
  pointer-events: none;
  transition: opacity 0.4s;
}
.grade__line b {
  position: absolute;
  top: 0.9rem;
  padding: 0.2rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  background: rgb(0 0 0 / 0.6);
  white-space: nowrap;
}
.grade__line b:first-child { right: 8px; }
.grade__line b:last-child { left: 8px; }
[data-grade].is-graded .grade__line,
[data-grade]:not([style*="--g"]) .grade__line { opacity: 0; }
html:not(.motion-ok) .grade, html:not(.motion-ok) .grade__line { display: none; }

/* Ladechoreografie im Hero */
.motion-ok .hero .kicker { animation: rise-fade 0.9s var(--ease-out) 0.5s both; }
.motion-ok .hero__title .line { overflow: hidden; }
.motion-ok .hero__title .line > span { display: inline-block; animation: rise 1.2s var(--ease-out) both; animation-delay: calc(0.6s + var(--l, 0) * 0.12s); }
.motion-ok .hero__lead { animation: rise-fade 1s var(--ease-out) 0.95s both; }
.motion-ok .hero__actions { animation: rise-fade 1s var(--ease-out) 1.1s both; }
.motion-ok .hud { animation: fade-in 1.2s ease 1.2s both; }
@keyframes rise-fade { from { opacity: 0; transform: translateY(24px); } }

/* Parallaxe (per JS gesetzt) */
[data-parallax] { will-change: transform; }

/* Cursor-Begleiter: Autofokus-Feld – nur Maus, ergänzt den System-Cursor */
.cursor {
  --c: var(--accent);
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  width: 44px; height: 32px;
  margin: -16px 0 0 -22px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 9px 1.5px,
    linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 9px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 9px 1.5px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 9px,
    linear-gradient(var(--c), var(--c)) 0 100% / 9px 1.5px,
    linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 9px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 9px 1.5px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 9px;
  background-repeat: no-repeat;
  transition: width 0.35s var(--ease-spring), height 0.35s var(--ease-spring), margin 0.35s var(--ease-spring), opacity 0.3s;
}
.cursor.is-visible { opacity: 0.9; }
.cursor.is-link { --c: #6fe39b; width: 26px; height: 20px; margin: -10px 0 0 -13px; } /* eingerastet */
:root[data-theme="light"] .cursor.is-link { --c: #1d7a43; }
.cursor.is-media { --c: #fff; width: 104px; height: 70px; margin: -35px 0 0 -52px; }
.cursor__label {
  position: absolute;
  left: 50%; top: 100%;
  margin-top: 0.4rem;
  transform: translateX(-50%);
  padding: 0.15rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgb(0 0 0 / 0.65);
  opacity: 0;
  transition: opacity 0.2s;
}
.cursor.is-media .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Seitenwechsel als Blende (Cross-Document View Transitions) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.45s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 0.75s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.97); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Farbschema-Wechsel als Iris vom Umschalter aus */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-old(site-header) { animation: none; }
html.theme-vt::view-transition-new(root),
html.theme-vt::view-transition-new(site-header) { animation: iris-theme 0.8s var(--ease-in-out) both; }
@keyframes iris-theme {
  from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 2rem)); }
  to { clip-path: circle(150vmax at var(--vt-x, 90%) var(--vt-y, 2rem)); }
}

/* Reduzierte Bewegung: System-Einstellung ODER Umschalter im Footer */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
html:is([data-motion="reduced"], [data-lc-ruhe]) *,
html:is([data-motion="reduced"], [data-lc-ruhe]) *::before,
html:is([data-motion="reduced"], [data-lc-ruhe]) *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
html:is([data-motion="reduced"], [data-lc-ruhe])::view-transition-group(*),
html:is([data-motion="reduced"], [data-lc-ruhe])::view-transition-old(*),
html:is([data-motion="reduced"], [data-lc-ruhe])::view-transition-new(*) { animation: none !important; }
html:is([data-motion="reduced"], [data-lc-ruhe]) { scroll-behavior: auto !important; }

/* LiraCore-Barrierefreiheits-Widget: Zusammenspiel */
html[data-lc-dunkel][data-theme="dark"] { filter: none !important; } /* Seite ist schon dunkel */
html[data-lc-dunkel][data-lc-blass][data-theme="dark"] { filter: saturate(0.35) !important; }
html[data-lc-dunkel][data-theme="dark"] :is(img, video, picture, iframe, #liracore-bf-knopf, #liracore-bf-klappe, #liracore-widerruf, #liracore-banner, #liracore-cookie-dialog) { filter: none !important; }
html[data-lc-zeiger] .cursor { display: none !important; }
html[data-lc-abstand] .hero,
html[data-lc-abstand] .hero.is-scrub { height: auto; min-height: 100svh; }
html[data-lc-abstand] .hero__sticky { position: relative; height: auto; min-height: 100svh; }
html[data-lc-abstand] .hero__content { padding-top: calc(var(--header-h) + 4rem); }
html[data-lc-abstand] .hero__lowers { display: none; }

/* Windows-Kontrastmodus */
@media (forced-colors: active) {
  .btn, .icon-btn, .menu-toggle, .chip, .card, .svc, .field input, .field select, .field textarea { border: 1px solid CanvasText; }
  .btn::after, .grain, .cursor, .hero__scrim, .svc::before, .svc::after, .grade, .grade__line { display: none; }
  .text-gradient, .error-screen__code { color: CanvasText; background: none; }
  .footer__wordmark text { fill: CanvasText; }
  .project__num { color: CanvasText; }
}

/* Druck */
@media print {
  .site-header, .mobile-nav, .grain, .cursor, .hero__media, .hud, .hero__cue, .reel__tools, .cta, .signature, .map, .footer__wordmark, .timeline, .area__stage, .grade, .grade__line { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .hero.is-scrub { height: auto; min-height: 0; background: none; color: #000; }
  [data-reveal], .split, .page-title { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .hero__sticky { position: static; height: auto; min-height: 0; }
  .hero__title, .hero__lead { color: #000; text-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}