/* =====================================================================
   Veritas Sicherheit & Service — „Schichtwechsel"
   Design-System siehe DESIGN.md. Kernidee: Die gesamte Seite ist EINE
   monotone Luminanzrampe von der Nacht (#0C1013) in den Tag (#EFF0ED).
   Sie wird nie gebrochen — es gibt keinen Rücksprung ins Dunkle.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  /* Die Rampe. Endstop einer Sektion = Startstop der nächsten → nahtlos. */
  --s0:  #0C1013;
  --s1:  #12171B;
  --s2:  #191F24;
  --s3:  #232A30;
  --s4:  #2F373D;
  --s5:  #3A4249;
  --s6:  #6E736F; /* Übergangszone — trägt bewusst keinen Fließtext */
  --s7:  #A8ADA8; /* Übergangszone — trägt bewusst keinen Fließtext */
  --s8:  #C3C6C1;
  --s9:  #E4E6E2;
  --s10: #EFF0ED;

  /* Akzent: wandert über die Rampe (Itten — siehe DESIGN.md) */
  --orange: #E88A30;
  --amber-ink: #9C520E; /* 4.9:1 auf --s10 — #A85A12 lag mit 4.44:1 unter AA */

  /* Schrift auf Nacht / auf Tag */
  --ink-light: #F2F3F1;
  --ink-light-mut: #B8BEBB;
  --ink-dark: #14181A;
  --ink-dark-mut: #4A524E;

  --line-light: rgb(242 243 241 / 0.16);
  --line-dark: rgb(20 24 26 / 0.16);

  /* Aktive Rollen — werden pro Band umgeschaltet */
  --ink: var(--ink-light);
  --ink-mut: var(--ink-light-mut);
  --line: var(--line-light);
  --accent: var(--orange);

  /* Spacing (8px-Basis) */
  --sp-1: 8px;   --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;  --sp-5: 48px;
  --sp-6: 64px;  --sp-7: 96px;  --sp-8: 128px; --sp-9: 168px;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 76px;
  --radius: 3px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */

  /* z-index-Skala, semantisch statt willkürlich */
  --z-band: 1;
  --z-shiftband: 20;
  --z-nav: 40;
  --z-consent: 60;
  --z-skip: 80;
}

/* ---------------------------------------------------------------------
   2. Reset & Basis
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Formularfelder und Scrollbalken liegen alle im hellen Teil der Rampe */
  color-scheme: light;
}
/* Lenis übernimmt das Smooth-Scrolling, sobald es läuft */
html.lenis { scroll-behavior: auto; }
html.lenis body { min-height: 100%; }

body {
  font-family: 'Chivo', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--s0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* <picture> ist nur ein Träger für die WebP-Variante und darf im Layout
   nicht mitzählen — sonst greifen Regeln wie `.hero__media img { height:100% }`
   ins Leere. */
picture { display: contents; }
button, input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; }

/* Kein 300ms-Verzögerung beim Tippen, eigenes dezentes Tap-Feedback */
a, button, summary, label, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(232 138 48 / 0.18);
}

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

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: var(--z-skip);
  padding: var(--sp-2) var(--sp-3);
  background: var(--orange);
  color: var(--ink-dark);
  font-weight: 700;
  border-radius: var(--radius);
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* Safe-Area für Geräte mit Aussparung im Querformat */
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
                  max(var(--gutter), env(safe-area-inset-right));
}

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

/* ---------------------------------------------------------------------
   3. Die Rampe
   Jede Sektion ist ein `.band` mit --from/--to. Die Bandklassen sind die
   EINZIGE Stelle, an der die Rampenreihenfolge festgelegt wird.
   --------------------------------------------------------------------- */
.band {
  position: relative;
  z-index: var(--z-band);
  background-image: linear-gradient(180deg, var(--from), var(--to));
  padding-block: clamp(64px, 8vh, 112px);
}

/* Nacht — helle Schrift */
.band-1  { --from: var(--s0); --to: var(--s1); }
.band-2  { --from: var(--s1); --to: var(--s2); }
.band-3  { --from: var(--s2); --to: var(--s3); }
.band-4  { --from: var(--s3); --to: var(--s4); }
.band-5  { --from: var(--s4); --to: var(--s5); }

/* Dämmerung — Übergangszone, trägt keinen Fließtext */
.band-6  { --from: var(--s5); --to: var(--s8); }

/* Tag — dunkle Schrift */
.band-7  { --from: var(--s8);  --to: var(--s9); }
.band-8  { --from: var(--s9);  --to: var(--s9); }
.band-9  { --from: var(--s9);  --to: var(--s10); }
.band-10 { --from: var(--s10); --to: var(--s10); }

/* Textrollen deterministisch aus der Bandlage ableiten */
.band-1, .band-2, .band-3, .band-4, .band-5, .band-6 {
  --ink: var(--ink-light);
  --ink-mut: var(--ink-light-mut);
  --line: var(--line-light);
  --accent: var(--orange);
  color: var(--ink);
}
.band-7, .band-8, .band-9, .band-10 {
  --ink: var(--ink-dark);
  --ink-mut: var(--ink-dark-mut);
  --line: var(--line-dark);
  --accent: var(--amber-ink);
  color: var(--ink);
}

/* Auf dunklem Grund liest helle Schrift leichter → mehr Durchschuss */
.band-1, .band-2, .band-3, .band-4, .band-5 { line-height: 1.7; }

/* Kompakte Rampe für Unterseiten */
.band--tight { padding-block: clamp(56px, 8vh, 104px); }

/* ---------------------------------------------------------------------
   4. Typografie
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.6rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
h2 {
  /* Untergrenze bewusst niedrig: bei 320px muss noch
     „Brandsicherheitswache" in eine Zeile passen. */
  font-size: clamp(1.65rem, 3.8vw, 3.1rem);
  line-height: 1.08;
}
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1rem; }

p { text-wrap: pretty; }
p, .measure { max-width: 68ch; }

/* Lange Zeichenketten (Schlüsselnamen, URLs) dürfen die Seite nicht
   aufreißen — auf schmalen Geräten sonst horizontaler Überlauf. */
p, li, h1, h2, h3, h4, td, dd { overflow-wrap: break-word; }

/* Deutsche Komposita wie „Brandsicherheitswache" oder
   „Vermögensschadenhaftpflicht" sind länger als 320px Displaybreite.
   Silbentrennung bricht sie sauber statt hart mitten im Wort.
   Im Fließtext immer, in großen Überschriften nur auf schmalen Geräten —
   auf dem Desktop sähe eine getrennte Display-Zeile unruhig aus. */
p, li { hyphens: auto; }
@media (max-width: 700px) {
  h1, h2, h3 { hyphens: auto; }
}

/* Grid- und Flex-Kinder haben von Haus aus `min-width: auto` und können
   deshalb nicht unter die Breite ihres längsten Wortes schrumpfen — das
   schiebt die ganze Seite auf. */
.split > *, .steps > *, .step > *, .proof__item > *, .factrow > *,
.handover > *, .footer__grid > *, .head > *, .ledger__row > summary > * {
  min-width: 0;
}
code {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
  padding: 0.1em 0.35em;
  border-radius: 2px;
  background: rgb(20 24 26 / 0.07);
}

.lead {
  font-size: clamp(1.05rem, 1.3vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 56ch;
}
.muted { color: var(--ink-mut); }

/* Chivo Mono — ausschließlich Zeiten, Kennzahlen, Ledger-Spalten */
.mono {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.accent { color: var(--accent); }

/* ---------------------------------------------------------------------
   5. Navigation — helle Plakette; über dem Hero transparent mit
   weiß gefiltertem Logo, danach feste helle Leiste mit Farb-Logo.
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 280ms var(--ease), border-color 280ms var(--ease);
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Marke: freigestellte Bildmarke (Tor + V) plus typografisch gesetzte
   Wortmarke. Die Wortmarke im Original-Logo wäre bei Navigationsgröße
   unlesbar; das vollständige Logo steht dafür groß im Footer. */
.nav__brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-height: 44px;
}
.nav__logo {
  width: auto;
  height: 40px;
  /* Über dem Nachthero: reine weiße Silhouette. Kein invert() — das würde
     das Logo-Orange in Blau drehen. */
  filter: brightness(0) invert(1);
  transition: filter 280ms var(--ease);
}
.nav__word {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  font-size: 1.06rem;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--ink-light);
  transition: color 280ms var(--ease);
}
.nav__word small {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  margin-top: 5px;
  color: var(--ink-light-mut);
}
.nav.is-pinned .nav__word { color: var(--ink-dark); }
.nav.is-pinned .nav__word small { color: var(--ink-dark-mut); }
@media (max-width: 520px) { .nav__word { display: none; } }
.nav.is-pinned { background: rgb(239 240 237 / 0.96); border-bottom-color: var(--line-dark); }
@supports (backdrop-filter: blur(1px)) {
  .nav.is-pinned { background: rgb(239 240 237 / 0.9); backdrop-filter: blur(14px); }
}
/* Auf hellem Grund: das helle Grau des Tor-Motivs abdunkeln, sonst
   verschwindet die Bildmarke bei 40px fast im Hintergrund. */
.nav.is-pinned .nav__logo { filter: brightness(0.74); }

.nav__links { display: flex; gap: var(--sp-1); list-style: none; padding: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-light);
  border-radius: var(--radius);
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.nav.is-pinned .nav__link { color: var(--ink-dark); }
.nav__link:hover { background: rgb(255 255 255 / 0.1); }
.nav.is-pinned .nav__link:hover { background: rgb(20 24 26 / 0.07); }
.nav__link[aria-current='page'] { color: var(--orange); font-weight: 700; }
.nav.is-pinned .nav__link[aria-current='page'] { color: var(--amber-ink); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-2); }

.lang {
  display: flex;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.nav.is-pinned .lang { border-color: var(--line-dark); }
.lang button {
  min-width: 44px; min-height: 44px;
  padding: 0 var(--sp-1);
  background: none; border: 0; cursor: pointer;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--ink-light);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav.is-pinned .lang button { color: var(--ink-dark); }
.lang button[aria-pressed='true'] { background: var(--orange); color: var(--ink-dark); }

.nav__tel {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px; min-width: 44px; padding: 0 var(--sp-2);
  justify-content: center;
  text-decoration: none; font-weight: 500; font-size: 0.9rem;
  color: var(--ink-light);
}
.nav.is-pinned .nav__tel { color: var(--ink-dark); }
.nav__tel-icon { flex: none; }
.nav__tel-247 { color: var(--orange); }
.nav.is-pinned .nav__tel-247 { color: var(--amber-ink); }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line-light);
  border-radius: var(--radius); cursor: pointer;
  position: relative;
}
.nav.is-pinned .nav__burger { border-color: var(--line-dark); }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ''; position: absolute; left: 50%; width: 18px; height: 2px;
  background: var(--ink-light); transform: translateX(-50%);
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}
.nav.is-pinned .nav__burger span,
.nav.is-pinned .nav__burger span::before,
.nav.is-pinned .nav__burger span::after { background: var(--ink-dark); }
.nav__burger span { top: 50%; margin-top: -1px; }
.nav__burger span::before { top: -6px; left: 0; transform: none; }
.nav__burger span::after  { top: 6px;  left: 0; transform: none; }
.nav__burger[aria-expanded='true'] span { transform: translateX(-50%) rotate(45deg); }
.nav__burger[aria-expanded='true'] span::before { opacity: 0; }
.nav__burger[aria-expanded='true'] span::after { transform: rotate(-90deg); top: 0; }

/* ---------------------------------------------------------------------
   6. Signature 2 — Das Schichtband (Schichtuhr 20:00 → 06:00)
   --------------------------------------------------------------------- */
.shiftband {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-shiftband);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}
.shiftband__time {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--orange);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.shiftband__rail {
  position: relative;
  width: 1px;
  height: min(38vh, 300px);
  background: rgb(242 243 241 / 0.22);
}
.shiftband__fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0%;
  background: var(--orange);
  transform-origin: top;
}
.shiftband__label {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(242 243 241 / 0.55);
  writing-mode: vertical-rl;
}
/* Auf hellem Grund umfärben (JS setzt .is-day) */
.shiftband.is-day .shiftband__rail { background: rgb(20 24 26 / 0.2); }
.shiftband.is-day .shiftband__fill { background: var(--amber-ink); }
.shiftband.is-day .shiftband__time { color: var(--amber-ink); }
.shiftband.is-day .shiftband__label { color: rgb(20 24 26 / 0.55); }

/* ---------------------------------------------------------------------
   7. Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 var(--sp-3);
  /* Muss gesetzt sein: <button> erbt sonst den grauen UA-Standardgrund und
     erscheint als leerer heller Kasten (Consent-Banner). */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms var(--ease), background 180ms var(--ease),
              border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn__arrow { transition: transform 180ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Primär auf Nacht: Orange-Fläche, dunkler Text */
.btn--primary { background: var(--orange); color: var(--ink-dark); }
.btn--primary:hover { background: #F09A45; }

/* Primär auf Tag: dunkle Fläche, helle Schrift */
.band-7 .btn--primary, .band-8 .btn--primary,
.band-9 .btn--primary, .band-10 .btn--primary {
  background: var(--ink-dark); color: var(--ink-light);
}
.band-7 .btn--primary:hover, .band-8 .btn--primary:hover,
.band-9 .btn--primary:hover, .band-10 .btn--primary:hover { background: #262D30; }

/* Sekundär: 1px Rahmen, KEIN zusätzlicher Schatten */
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px;
  font-weight: 700; text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------------
   8. Hero (Band 1)
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-block: 0 clamp(56px, 10vh, 120px);
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  /* Das Nachtmotiv braucht Aufhellung, sonst verschwindet es hinter dem Scrim */
  filter: saturate(0.9) contrast(1.02) brightness(1.5);
  will-change: transform;
}
/* Scrim: sichert den Textkontrast unabhängig vom Foto */
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(12 16 19 / 0.5) 0%, rgb(12 16 19 / 0.22) 42%, rgb(12 16 19 / 0.9) 100%),
    linear-gradient(90deg, rgb(12 16 19 / 0.74) 0%, rgb(12 16 19 / 0.12) 62%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__stamp {
  display: inline-flex; align-items: baseline; gap: 0.7em;
  margin-bottom: var(--sp-3);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange);
}
.hero__stamp::before {
  content: ''; width: 26px; height: 1px;
  background: var(--orange); transform: translateY(-4px);
}
.hero h1 { max-width: 15ch; }
.hero__sub { margin-top: var(--sp-4); max-width: 48ch; color: var(--ink-light-mut); }
.hero__actions { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(56px, 10vh, 120px);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(242 243 241 / 0.6);
}
.hero__scroll .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--orange);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------------------------------------------------------------------
   9. Sektionskopf — bewusst OHNE Eyebrow-Label über jeder Sektion.
   Der Zeitstempel trägt echte Information (Schichtzeit) und steht
   inline neben der Überschrift, nicht als Kicker darüber.
   --------------------------------------------------------------------- */
.head {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
/* Breite in rem, NICHT in ch: `ch` würde an der Schriftgröße dieses
   Containers gemessen, nicht an der viel größeren Überschrift darin. */
.head__main { flex: 1 1 auto; max-width: 46rem; }
.head h2 { display: inline; }
.head__time {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--accent);
}

/* ---------------------------------------------------------------------
   10. Der Auftrag (Band 2) — Kernsatz + Wachbuch-Kopfzeile
   --------------------------------------------------------------------- */
.brief__claim {
  font-size: clamp(1.4rem, 2.9vw, 2.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: balance;
}
.brief__claim strong { font-weight: 900; }

.factrow {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
}
.fact {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.fact__k {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.fact__v { font-size: 1.05rem; font-weight: 500; }
/* Telefon und E-Mail sind auf der Kontaktseite die Hauptaktionen — als
   reine Textzeile wären sie nur 20px hohe Tippziele. */
.fact__v a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.fact__v a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fact__n { font-size: 0.875rem; color: var(--ink-mut); }

/* ---------------------------------------------------------------------
   11. Signature 3 — Das Wachbuch (Ledger statt Karten)
   --------------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--line); }

.ledger__row { border-bottom: 1px solid var(--line); }

.ledger__row > summary {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  transition: background 200ms var(--ease);
}
.ledger__row > summary::-webkit-details-marker { display: none; }
.ledger__row > summary:hover { background: rgb(255 255 255 / 0.045); }
.band-7 .ledger__row > summary:hover,
.band-9 .ledger__row > summary:hover { background: rgb(20 24 26 / 0.045); }

.ledger__num {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--accent);
}
.ledger__name {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.ledger__meta {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-mut);
  text-align: right;
  display: flex; align-items: center; gap: var(--sp-2);
}
.ledger__meta::after {
  content: '+';
  display: inline-block;
  width: 1em;
  font-size: 1.1rem; line-height: 1;
  color: var(--accent);
  transition: transform 220ms var(--ease);
}
.ledger__row[open] .ledger__meta::after { transform: rotate(45deg); }

/* Ledger-Zeile als reiner Link (404-Seite) */
.nf-link {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  min-height: 44px;
  text-decoration: none;
  transition: background 200ms var(--ease);
}
.nf-link:hover { background: rgb(20 24 26 / 0.045); }
.nf-link:hover .ledger__meta { color: var(--accent); }

.ledger__body {
  padding: 0 var(--sp-2) var(--sp-4) 3.5rem;
  max-width: 62ch;
  color: var(--ink-mut);
}
@media (min-width: 768px) {
  .ledger__body { padding-left: calc(3.5rem + var(--sp-3)); }
}

/* ---------------------------------------------------------------------
   12. Revier (Band 4) — asymmetrischer Split
   --------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
}
.split__media img {
  width: 100%;
  border-radius: var(--radius);
  filter: saturate(0.9) contrast(1.04);
}

.clocks {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-5);
}
.clock__big {
  display: block;
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.clock__label {
  display: block; margin-top: var(--sp-1);
  font-size: 0.86rem; max-width: 22ch; color: var(--ink-mut);
}

.checks { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.checks li {
  position: relative;
  padding-left: 1.9em;
  color: var(--ink-mut);
}
.checks li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 1px;
  background: var(--accent);
}

/* ---------------------------------------------------------------------
   13. Beweis (Band 5) — Zertifikats-Ledger mit Quantitätskontrast
   --------------------------------------------------------------------- */
.proof { display: grid; gap: 0; border-top: 1px solid var(--line); }
.proof__item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 768px) {
  .proof__item { grid-template-columns: 12rem 1fr; gap: var(--sp-5); align-items: start; }
}
.proof__k {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.35em;
}
.proof__item p { color: var(--ink-mut); }

/* Eine Zeile groß — Quantitätskontrast nach Itten, statt 5 gleicher Karten */
.proof__item--lead { padding-block: var(--sp-6); }
.proof__item--lead h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.proof__item--lead p { font-size: 1.08rem; color: var(--ink); }

/* ---------------------------------------------------------------------
   14. Dämmerung (Band 6) — das Bild trägt den Übergang s5 → s8.
   Diese Zone trägt bewusst keinen Fließtext (Kontrast, siehe DESIGN.md).
   --------------------------------------------------------------------- */
.dawn {
  position: relative;
  padding: 0;
  min-height: min(72vh, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.dawn__media { position: absolute; inset: 0; }
.dawn__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
  will-change: transform;
}
.dawn__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--s5) 0%, rgb(58 66 73 / 0.25) 28%,
    rgb(195 198 193 / 0.25) 72%, var(--s8) 100%);
}
/* Nur eine kurze Zeile, auf eigenem Grund — kein Fließtext auf dem Verlauf */
.dawn__line {
  position: relative;
  z-index: 2;
  padding: var(--sp-3) var(--sp-5);
  background: rgb(12 16 19 / 0.82);
  border-radius: var(--radius);
  color: var(--ink-light);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
  max-width: 24ch;
}
.dawn__line .mono { display: block; font-size: 0.72rem; letter-spacing: 0.14em;
  color: var(--orange); margin-bottom: 0.5em; text-transform: uppercase; }

/* Schmale Variante für Unterseiten — trägt dort denselben Übergang */
.dawn--slim { min-height: min(34vh, 280px); }

/* Abstand zwischen gestapelten Blöcken (Leistungs-Detailseite) */
.stack > * + * { margin-top: clamp(56px, 9vh, 112px); }

/* Anker-Ziel unter der festen Navigation freihalten */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ---------------------------------------------------------------------
   15. Ablauf (Band 7) — echte Sequenz, daher sind Ziffern hier legitim
   --------------------------------------------------------------------- */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: step; }
.step {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) 0;
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 768px) {
  .step { grid-template-columns: 5rem 18rem 1fr; gap: var(--sp-5); align-items: baseline; }
}
.step__n {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}
.step p { color: var(--ink-mut); }

/* ---------------------------------------------------------------------
   16. Region (Band 8)
   --------------------------------------------------------------------- */
.places { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-4); list-style: none; padding: 0; }
.places li {
  padding: 0.45em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.86rem;
  font-weight: 500;
}
.places li[data-primary] { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* ---------------------------------------------------------------------
   17. Übergabe / CTA (Band 9)
   --------------------------------------------------------------------- */
.handover { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .handover { grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: var(--sp-8); }
}
.handover__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------------------------------------------------------------------
   18. Footer (Band 10) — hell. Bewusste Abweichung, siehe DESIGN.md.
   Nebeneffekt: das dunkle Logo ist ohne filter: invert() sichtbar.
   --------------------------------------------------------------------- */
.footer { padding-block: var(--sp-7) var(--sp-4); }
.footer__grid {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
/* Wie in der Navigation: das helle Grau des Tor-Motivs abdunkeln, sonst
   verblasst das Logo auf dem hellen Footer-Grund. */
.footer__logo { height: 64px; width: auto; filter: brightness(0.74); }
.footer__blurb { margin-top: var(--sp-3); max-width: 34ch; font-size: 0.92rem; color: var(--ink-dark-mut); }
.footer__h {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: var(--sp-2);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.footer ul a, .footer ul span {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-size: 0.94rem; color: var(--ink-dark);
}
.footer ul a:hover { color: var(--amber-ink); }
.footer__bottom {
  padding-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: space-between; align-items: center;
  font-size: 0.875rem; color: var(--ink-dark-mut);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer__bottom a:hover { color: var(--amber-ink); }

/* ---------------------------------------------------------------------
   19. Seitenkopf der Unterseiten
   --------------------------------------------------------------------- */
.pagehead {
  padding-top: calc(var(--nav-h) + clamp(56px, 11vh, 128px));
  padding-bottom: clamp(48px, 8vh, 104px);
}
.pagehead h1 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); max-width: 18ch; }
.pagehead .lead { margin-top: var(--sp-4); }

/* ---------------------------------------------------------------------
   20. Formulare
   --------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-3); max-width: 46rem; }
@media (min-width: 700px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.9rem; font-weight: 700; }
/* Nicht unter 14px: auf dem Handy sonst unangenehm zu lesen */
.field .hint { font-size: 0.875rem; color: var(--ink-mut); }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  padding: 0.7em 0.9em;
  background: rgb(255 255 255 / 0.6);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--ink-dark);
}
.field textarea { min-height: 9em; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #5D6560; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--amber-ink); outline-offset: 2px; border-color: var(--amber-ink);
}
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-2); }
/* Kästchen selbst 24px, aber die ganze Zeile ist über das Label anklickbar —
   die wirksame Trefferfläche ist damit deutlich größer als das Kästchen. */
.field--check { padding-block: var(--sp-1); }
.field--check input { width: 24px; min-height: 24px; height: 24px; margin-top: 2px; accent-color: var(--amber-ink); }
.field--check label { font-weight: 400; font-size: 0.9rem; cursor: pointer; padding-block: 6px; }
.form__note { font-size: 0.875rem; color: var(--ink-dark-mut); max-width: 52ch; }

/* ---------------------------------------------------------------------
   21. Consent-Banner + Karten-Platzhalter
   --------------------------------------------------------------------- */
.hinweisbox {
  position: fixed;
  /* Auf Mobil über die volle Breite, ab Tablet unten rechts — links unten
     liegt in den Heros der primäre CTA, den darf der Banner nicht verdecken. */
  left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2);
  z-index: var(--z-consent);
  max-width: 34rem;
  padding: var(--sp-3);
  background: var(--s1);
  color: var(--ink-light);
  border: 1px solid rgb(242 243 241 / 0.14);
  border-radius: var(--radius);
}
.hinweisbox[hidden] { display: none; }
.hinweisbox__titel {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-1);
  color: var(--ink-light);
}
.hinweisbox p { font-size: 0.88rem; color: var(--ink-light-mut); max-width: none; }
.hinweisbox__aktionen { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hinweisbox .btn { min-height: 44px; font-size: 0.88rem; }
.hinweisbox .btn--ghost { border-color: rgb(242 243 241 / 0.32); color: var(--ink-light); }
.hinweisbox .btn--ghost:hover { border-color: var(--ink-light); }
.hinweisbox__mehr { margin-top: var(--sp-2); font-size: 0.82rem; }
.hinweisbox a { color: var(--orange); }

@media (min-width: 720px) {
  .hinweisbox { left: auto; right: var(--sp-3); bottom: var(--sp-3); }
}

/* Widerruf im Footer — sieht aus wie die anderen Footer-Links */
.footer__wahl {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 0.86rem; color: var(--ink-dark-mut);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__wahl:hover { color: var(--amber-ink); }

.mapbox {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--s9);
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-align: center;
}
.mapbox iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--radius); }

/* ---------------------------------------------------------------------
   22. Motion
   Reveals sind IMMER sichtbar voreingestellt. Den versteckten
   Startzustand setzt ausschließlich JS, nachdem GSAP nachweislich läuft
   (siehe js/main.js). Nie Sichtbarkeit per CSS-Klasse gaten.
   --------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
  /* Die Rampe bleibt vollständig erhalten — sie liegt in CSS. */
}

/* ---------------------------------------------------------------------
   23. Responsive — Mobile First, kein Zwei-Spalten-Layout unter 768px
   --------------------------------------------------------------------- */
@media (min-width: 700px) {
  .factrow { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-5); }
}
@media (min-width: 1000px) {
  .factrow { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
  .shiftband { display: none; }
}

@media (max-width: 880px) {
  .nav__burger { display: block; }
  /* Rufnummer bleibt als Icon-Link erhalten — das ist auf dem Telefon die
     wichtigste Aktion. Der Text wird nur optisch entfernt, nicht aus dem
     Barrierefreiheitsbaum: sonst hätte der Link keinen Namen. */
  .nav__tel-247 { display: none; }
  .nav__tel-text {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-4);
    background: var(--s10);
    border-bottom: 1px solid var(--line-dark);
    transform: translateY(-120%);
    transition: transform 300ms var(--ease);
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links[data-open='true'] { transform: translateY(0); }
  .nav__links .nav__link {
    color: var(--ink-dark);
    width: 100%;
    min-height: 52px;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
  }
  .nav__links .nav__link[aria-current='page'] { color: var(--amber-ink); }
  /* Menü offen → Leiste immer hell, damit das Logo sichtbar bleibt */
  .nav[data-menu='open'] { background: var(--s10); border-bottom-color: var(--line-dark); }
    .nav[data-menu='open'] .nav__logo { filter: brightness(0.74); }
  .nav[data-menu='open'] .nav__word { color: var(--ink-dark); }
  .nav[data-menu='open'] .nav__word small { color: var(--ink-dark-mut); }
  .nav[data-menu='open'] .nav__tel,
  .nav[data-menu='open'] .lang button { color: var(--ink-dark); }
  .nav[data-menu='open'] .lang,
  .nav[data-menu='open'] .nav__burger { border-color: var(--line-dark); }
  .nav[data-menu='open'] .nav__burger span,
  .nav[data-menu='open'] .nav__burger span::before,
  .nav[data-menu='open'] .nav__burger span::after { background: var(--ink-dark); }
}

@media (max-width: 620px) {
  .hero { min-height: 92svh; }
  .hero__scroll { display: none; }
  .ledger__row > summary { grid-template-columns: 2.6rem 1fr auto; gap: var(--sp-2); }
  .ledger__meta { font-size: 0; gap: 0; }
  .ledger__meta::after { font-size: 1.3rem; }
  .ledger__body { padding-left: 2.6rem; }
  .clocks { gap: var(--sp-4); }
}

/* Print — der Verlauf ist auf Papier sinnlos */
@media print {
  .nav, .shiftband, .hinweisbox, .hero__scroll { display: none !important; }
  .band { background: #fff !important; color: #000 !important; padding-block: 24px; }
  .band * { color: #000 !important; }
}