/* =========================================================================
   SauberBrüder — Stylesheet
   Umsetzung von DESIGN.md. Tokennamen entsprechen exakt den dortigen Namen.
   Mobile first (Referenz 393 px), fluid bis 1280 px.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Schriften — selbst gehostet (DESIGN.md §2, §10 Datensparsamkeit)
      Quelle: @fontsource/playfair-display, @fontsource/plus-jakarta-sans
      Lizenz: SIL OFL 1.1 — Lizenztexte in assets/fonts/
      Subsets: latin + latin-ext (enthält Umlaute und ß)
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. Tokens (DESIGN.md §3–§8, §12: "Alle Werte als CSS Custom Properties")
   ------------------------------------------------------------------------- */

:root {
  color-scheme: light;                       /* DESIGN.md §12: kein Dark Mode */

  /* --- Schrift --------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-text: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Typo-Skala (§3) — fluid 393 px → 1280 px ------------------------ */
  --type-display-1: clamp(2.25rem, 1.4746rem + 3.1567vw, 4rem);
  --lh-display-1: clamp(2.8125rem, 2.1202rem + 2.8185vw, 4.375rem);
  --tracking-display-1: -0.02em;

  --type-heading-2: clamp(1.875rem, 1.4873rem + 1.5784vw, 2.75rem);
  --lh-heading-2: clamp(2.25rem, 1.8623rem + 1.5784vw, 3.125rem);
  --tracking-heading-2: -0.015em;

  --type-heading-3: clamp(1.375rem, 1.2642rem + 0.451vw, 1.625rem);
  --lh-heading-3: clamp(1.75rem, 1.6392rem + 0.451vw, 2rem);
  --tracking-heading-3: -0.01em;

  --type-lead: clamp(1.125rem, 1.0696rem + 0.2255vw, 1.25rem);
  --lh-lead: clamp(1.8125rem, 1.7294rem + 0.3382vw, 2rem);

  --type-body: 1.0625rem;
  --lh-body: clamp(1.75rem, 1.7223rem + 0.1127vw, 1.8125rem);

  --type-list-item: 1rem;
  --lh-list-item: 1.625rem;

  --type-button: 1rem;
  --lh-button: 1.25rem;

  --type-eyebrow: clamp(0.8125rem, 0.7848rem + 0.1127vw, 0.875rem);
  --lh-eyebrow: 1.125rem;
  --tracking-eyebrow: 0.16em;

  --type-footer-label: 0.75rem;
  --lh-footer-label: 1rem;
  --tracking-footer-label: 0.18em;

  --type-meta: 0.875rem;
  --lh-meta: 1.375rem;

  --type-legal: 0.9375rem;
  --lh-legal: 1.625rem;

  --measure-body: 68ch;      /* body_max_ch */
  --measure-display: 20ch;   /* display_max_ch */

  /* --- Farbe (§4) ------------------------------------------------------ */
  --ink-900: #0B1A13;
  --ink-800: #0C1D15;
  --ink-700: #132A20;

  --green-700: #1C5F3F;
  --green-800: #14472F;
  --green-900: #0D302D;
  --green-950: #071724;

  --paper-0: #FFFFFF;
  --paper-50: #FBFAF9;
  --paper-100: #F2F3F0;
  --paper-200: #E8E9E6;

  --text-strong: #0C1D15;
  --text-muted: #46604F;
  --text-soft: #526F62;
  --text-on-dark: #E2E8F0;
  --text-on-green: #FBFAF9;
  --text-on-green-muted: #C9D6CE;

  --border-light: #DDE0DA;
  --border-dark: rgba(251, 250, 249, 0.14);
  --focus-ring: #1C5F3F;
  --focus-ring-dark: #FBFAF9;
  --error: #8C2F1F;
  --success: #1C5F3F;

  /* --- Flächen (§4 surfaces) ------------------------------------------ */
  --surface-hero: linear-gradient(160deg, #0B1A13 0%, #132A20 55%, #050C09 100%);
  --surface-section: radial-gradient(120% 70% at 50% 50%, #E8E9E6 0%, #F2F3F0 70%);
  --surface-section-plain: #FFFFFF;   /* zweite helle Flaeche, damit die Mitte nicht eine einzige Bahn ist */
  --surface-section-green: #1C5F3F;   /* gruene Bande in der Seitenmitte, flach — Verlaeufe bleiben Hero/CTA/Footer vorbehalten */
  --surface-cta: linear-gradient(180deg, #1C5F3F 0%, #0D302D 100%);
  --surface-footer: linear-gradient(180deg, #0D302D 0%, #071724 100%);

  /* --- Abstände (§5) — Basis 4 px ------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* --- Layout (§5) ----------------------------------------------------- */
  --gutter-mobile: 16px;
  --gutter-desktop: 32px;
  --gutter: var(--gutter-mobile);
  --content-max: 1120px;
  --text-column-max: 720px;

  --section-padding-top: var(--space-20);      /* mobil 80 */
  --section-padding-bottom: var(--space-20);
  --hero-padding-top: 44px;
  --hero-padding-bottom: 60px;
  --card-padding: var(--space-6);              /* mobil 24 */

  /* --- Stack (§5) ------------------------------------------------------ */
  --stack-eyebrow-to-h: var(--space-4);
  --stack-h-to-lead: var(--space-6);
  --stack-lead-to-body: var(--space-4);
  --stack-body-to-list: 28px;
  --stack-list-row-gap: var(--space-4);
  --stack-body-to-button: var(--space-8);
  --stack-button-to-button: var(--space-3);
  --stack-button-to-micro: var(--space-4);
  --stack-media-to-text: 44px;

  /* --- Form und Tiefe (§6) -------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --hairline-light: 1px solid #DDE0DA;
  --hairline-dark: 1px solid rgba(251, 250, 249, 0.14);

  --shadow-card: 0 1px 2px rgba(12, 29, 21, 0.04), 0 12px 32px -12px rgba(12, 29, 21, 0.12);
  --shadow-media: 0 20px 48px -24px rgba(12, 29, 21, 0.28);

  /* --- Komponenten (§7) ------------------------------------------------ */
  --button-height: 56px;
  --button-padding-x: var(--space-6);
  --min-touch-target: 44px;
  --eyebrow-pill-height: 36px;
  --check-row-height: 40px;
  --check-icon-gap: var(--space-4);
  --header-height: 80px;
  --cta-content-max: 560px;

  /* --- Bewegung (§8) --------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-reveal: 300ms;
  --duration-slow: 400ms;
  --duration-ambient: 6s;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--gutter-desktop);
    --section-padding-top: var(--space-32);     /* desktop 128 */
    --section-padding-bottom: var(--space-32);
    --hero-padding-top: var(--space-24);        /* 96 */
    --hero-padding-bottom: var(--space-28);     /* 112 */
    --card-padding: var(--space-8);             /* 32 */
  }
}

/* -------------------------------------------------------------------------
   3. Grundlagen
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Kopfbereich steht fest; Ankerziele muessen darunter hervorkommen. */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--paper-100);
  color: var(--text-muted);
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.is-menu-open { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--type-display-1);
  line-height: var(--lh-display-1);
  letter-spacing: var(--tracking-display-1);
  max-width: var(--measure-display);
}

h2 {
  font-size: var(--type-heading-2);
  line-height: var(--lh-heading-2);
  letter-spacing: var(--tracking-heading-2);
  max-width: var(--measure-display);
}

h3 {
  font-size: var(--type-heading-3);
  line-height: var(--lh-heading-3);
  letter-spacing: var(--tracking-heading-3);
}

p { margin: 0; max-width: var(--measure-body); }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

strong { font-weight: 600; color: var(--text-strong); }
em { font-style: italic; }

::selection { background: var(--green-700); color: var(--paper-50); }

/* Fokus — §9: sichtbar auf jedem interaktiven Element, nie entfernt. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.site-footer :focus-visible,
.cta :focus-visible {
  outline-color: var(--focus-ring-dark);
}

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-padding-top) var(--section-padding-bottom);
  background: var(--surface-section);
}

/* --- Flaechenwechsel (§11 Sektionsrhythmus) ---------------------------------
   Vorher: dunkel, dann eine einzige helle Bahn bis zum CTA. Jetzt tragen die
   hellen Sektionen abwechselnd Vignette und Weiss, und in der Mitte steht eine
   gruene Bande. Es bleibt bei genau einem Akzent (green-700) — die Bande
   benutzt dieselbe Farbe wie Buttons und CTA, keine zweite Farbe. */
.section--plain { background: var(--surface-section-plain); }

.section--green {
  background: var(--surface-section-green);
  color: var(--text-on-green);
}
.section--green h2,
.section--green h3 { color: var(--text-on-green); }
.section--green .promise { border-top-color: var(--border-dark); }
/* Die Ziffer ist auf Hell gruen — auf der gruenen Bande waere sie unsichtbar. */
.section--green .promise__index { color: var(--text-on-green); opacity: 0.72; }

.text-column { max-width: var(--text-column-max); }

/* -------------------------------------------------------------------------
   5. Typografische Hilfsklassen
   ------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-text);
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;   /* Wortlaut im Markup normal geschrieben (§3) */
  margin: 0;
}

.lead {
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  font-weight: 400;
}

.meta {
  font-size: var(--type-meta);
  line-height: var(--lh-meta);
}

.footer-label {
  font-family: var(--font-display);
  font-size: var(--type-footer-label);
  line-height: var(--lh-footer-label);
  font-weight: 700;
  letter-spacing: var(--tracking-footer-label);
  text-transform: uppercase;
  margin: 0;
}

/* Platzhalter für noch fehlende Stammdaten — sichtbar als solche markiert.
   Bedeutung trägt die eckige Klammer im Text, nicht die Farbe (§9). */
.is-placeholder {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding-inline: var(--space-1);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--paper-200);
  color: var(--text-strong);
  font-weight: 500;
  font-style: normal;
}
/* Im reinen Screenreader-Text braucht die Auszeichnung kein Aussehen — als
   inline-block mit Rahmen wuerde sie aus ihrem 1-px-Container ragen. Die
   Klasse bleibt, damit `grep is-placeholder` weiterhin alle Stellen findet. */
.sr-only .is-placeholder {
  display: inline;
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
}

.on-dark .is-placeholder,
.cta .is-placeholder,
.site-footer .is-placeholder {
  border-color: var(--border-dark);
  background: rgba(251, 250, 249, 0.08);
  color: inherit;
}

/* -------------------------------------------------------------------------
   6. Skip-Link (§9)
   ------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--green-700);
  color: var(--text-on-green);
  font-size: var(--type-button);
  line-height: var(--lh-button);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--focus-ring-dark);
}

/* -------------------------------------------------------------------------
   7. Buttons (§7)
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--button-height);
  min-width: var(--min-touch-target);
  padding: var(--space-3) var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-text);
  font-size: var(--type-button);
  line-height: var(--lh-button);
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--easing-standard),
              border-color var(--duration-base) var(--easing-standard),
              color var(--duration-base) var(--easing-standard);
}

.btn--primary {
  background: var(--green-700);
  color: var(--text-on-green);
}
.btn--primary:hover { background: var(--green-800); }
.btn--primary:active { background: var(--green-900); }

.btn--secondary-dark {
  background: rgba(251, 250, 249, 0.06);
  color: var(--paper-50);
  border-color: rgba(251, 250, 249, 0.14);
}
.btn--secondary-dark:hover { background: rgba(251, 250, 249, 0.12); }
.btn--secondary-dark:active { background: rgba(251, 250, 249, 0.18); }

.btn--secondary-light {
  background: var(--paper-100);
  color: var(--text-strong);
  border-color: var(--border-light);
}
.btn--secondary-light:hover { background: var(--paper-200); }

.btn--inverse-green {
  background: var(--paper-50);
  color: var(--green-700);
}
.btn--inverse-green:hover { background: var(--paper-100); }
.btn--inverse-green:active { background: var(--paper-200); }

.btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }

.btn .icon { flex: none; }

/* Buttongruppe: mobil volle Breite (§7 full_width_mobile) */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: var(--stack-button-to-button);
}
.btn-group .btn { width: 100%; }

@media (min-width: 480px) {
  .btn-group { flex-direction: row; flex-wrap: wrap; }
  .btn-group .btn { width: auto; }
}

/* -------------------------------------------------------------------------
   8. Icons
   ------------------------------------------------------------------------- */

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
   9. Kopfbereich und Navigation (§7 navigation)
   ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;               /* unter Anrufleiste (50) und Overlay-Menue (60) */
  background: var(--paper-100);
  border-bottom: var(--hairline-light);
  transition: box-shadow var(--duration-base) var(--easing-standard);
}

/* Erst beim Scrollen eine feine Kante — kein Sprung, keine Layoutbewegung (§8).
   Nur am Handy: ab 768px ist der Kopfbereich durchsichtig und bekommt sein
   Milchglas aus §8.0 A. Ein Schatten um eine durchsichtige Flaeche saehe dort
   nach Fehler aus. */
@media (max-width: 767px) {
  .site-header.is-scrolled { box-shadow: 0 1px 12px rgba(12, 29, 21, 0.10); }
}

.site-header__inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

/* Wortmarke: weiss + difference, kehrt also ihren Untergrund um — ueber
   schwarzer Schrift weiss, ueber hellem Papier dunkel, pro Bildpunkt
   (§8.0k). Sie MUSS ausserhalb des Kopfbereichs stehen: der macht mit fixed
   und z-index einen Stapelkontext auf, und darin blendet nichts mehr nach
   unten. Die Schicht selbst darf einen haben. */
.wortmarke-schicht {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 41;              /* ueber dem Kopfbereich (40), unter dem Overlay (60) */
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  /* Nur der Name selbst faengt die Maus; der Rest der Schicht ist Luft. */
  pointer-events: none;
  mix-blend-mode: difference;
}
.wortmarke-schicht .container { display: flex; align-items: center; }
.wortmarke-schicht .wordmark {
  pointer-events: auto;
  color: var(--paper-0);
}

.wordmark {
  /* Grotesk statt Playfair und eine Stufe fester. Der Name soll als Marke
     stehen, nicht als Ueberschrift gelesen werden — die Serife daneben
     gehoert den H-Ebenen (§2 usage: "nur H1, H2, H3 und Karten-Titel"). */
  font-family: var(--font-text);
  /* 600 ist die schwerste geladene Stufe (§2 weights: 400, 500, 600). 700
     oder 800 gibt es nicht als Datei — der Browser wuerde sie kuenstlich
     fetten, das wird unsauber. Das Mehr an Gewicht holen Groesse und
     engerer Satz. */
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
}
.wordmark:hover { text-decoration: underline; text-underline-offset: 4px; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav { display: none; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
  font-size: var(--type-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: none;
}
.site-nav__link:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) {
  .site-nav { display: block; }
  .site-header .menu-toggle { display: none; }
}

/* Burger */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--min-touch-target);
  height: var(--min-touch-target);
  padding: 0;
  border: var(--hairline-light);
  border-radius: var(--radius-md);
  background: var(--paper-0);
  color: var(--text-strong);
  cursor: pointer;
}
.menu-toggle:hover { background: var(--paper-200); }

/* Gefuellter Block statt Umriss — im Kopf wie im Overlay dieselbe Stelle,
   dieselbe Groesse, nur Symbol und Beschriftung wechseln. */
.menu-toggle--solid {
  border-color: transparent;
  background: var(--green-700);
  color: var(--text-on-green);
}
.menu-toggle--solid:hover { background: var(--green-800); }

/* Im Overlay steht derselbe Block auf dunklem Grund. Gruen auf Dunkelgruen
   verschwindet dort fast — also dreht sich die Fuellung um. Gleiche Stelle,
   gleiche Groesse, jeweils der starke Block auf seinem eigenen Grund. */
.mobile-menu .menu-toggle--solid {
  background: var(--paper-50);
  color: var(--green-900);
}
.mobile-menu .menu-toggle--solid:hover { background: var(--paper-200); }
.menu-toggle .icon { width: 22px; height: 22px; }

/* Ein Icon allein wird am Handy uebersehen — das Wort steht daneben (§9:
   Bedeutung nie allein in Form). Der Schliessen-Knopf bleibt reines Icon,
   dort tragen Position und aria-label die Bedeutung. */
.menu-toggle__label {
  font-size: var(--type-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.site-header .menu-toggle { padding-inline: var(--space-4); }
[data-menu-close] { width: var(--min-touch-target); }

/* Nur für Screenreader — Bedeutung steht nie allein in Farbe oder Form (§9). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Vollflächiges Overlay-Menü */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--surface-hero);
  color: var(--text-on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--space-6) var(--space-10);
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  /* visibility schaltet beim Oeffnen sofort und beim Schliessen erst nach der
     Blende — sonst laeuft der Fokussprung ins unsichtbare Overlay. */
  transition: opacity var(--duration-base) var(--easing-standard),
              transform var(--duration-base) var(--easing-standard),
              visibility 0s linear var(--duration-base);
}
.mobile-menu[data-open='true'] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--duration-base) var(--easing-standard),
              transform var(--duration-base) var(--easing-standard),
              visibility 0s;
}
/* Kopf oben, Navigation in der Mitte, Kontakt unten am Rand. */
.mobile-menu__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--min-touch-target);
}
.mobile-menu .wordmark { color: var(--paper-50); }

/* Die Navigation nimmt den freien Raum und schiebt den Kontakt nach unten. */
.mobile-menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-10);
}

.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-block: var(--space-1);
  font-family: var(--font-display);
  /* Deutlich groesser als der Fliesstext: die Zeilen sind hier der Inhalt,
     nicht eine Liste am Rand. */
  font-size: clamp(2rem, 1.558rem + 1.8018vw, 3rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--paper-50);
  text-decoration: none;
}
.mobile-menu__link:hover { text-decoration: underline; text-underline-offset: 6px; }

/* Rechtstexte stehen leiser darunter, abgesetzt durch Abstand statt Linie. */
.mobile-menu__minor {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* Die Rechtslinks und die E-Mail-Zeile sind dieselbe leise Stufe im Overlay
   und teilen sich deshalb eine Regel. */
.mobile-menu__minor a,
.menu-mail {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
  font-size: var(--type-meta);
  line-height: var(--lh-meta);
  font-weight: 500;
  color: var(--text-on-dark);
  text-decoration: none;
}
.mobile-menu__minor a:hover,
.menu-mail:hover { text-decoration: underline; text-underline-offset: 4px; }

.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Voll breiter Aktionsblock am unteren Rand — die Telefonnummer steckt jetzt
   hier drin und nicht mehr als eigenes Feld oben im Kopfbereich. */
.menu-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
  padding-inline: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--green-700);
  color: var(--text-on-green);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--easing-standard);
}
.menu-cta:hover { background: var(--green-800); }
.menu-cta__text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.menu-cta__label {
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-on-green);
  opacity: 0.78;
}
.menu-cta__value {
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  font-weight: 600;
}
.menu-cta__arrow { flex: none; width: 24px; height: 24px; }
.menu-cta .is-placeholder {
  border-color: var(--border-dark);
  background: rgba(251, 250, 249, 0.10);
  color: inherit;
}

.menu-mail { gap: var(--space-3); }
.menu-mail .icon { flex: none; width: 20px; height: 20px; }

/* -------------------------------------------------------------------------
   10. Hero (§11 slot hero)
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--surface-hero);
  color: var(--text-on-dark);
  padding-block: var(--hero-padding-top) var(--hero-padding-bottom);
  overflow: hidden;
}

.hero h1 { color: var(--paper-50); }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: var(--eyebrow-pill-height);
  padding-inline: var(--space-4);
  border: var(--hairline-dark);
  border-radius: var(--radius-pill);
  background: rgba(251, 250, 249, 0.06);
  color: var(--paper-50);
}

.hero__heading { margin-top: var(--stack-eyebrow-to-h); }
/* SplitText legt je Zeile ein <div>; der Aufwaertsversatz beim Auftakt darf
   nicht in die Nachbarzeile ragen. */
.hero__zeile { overflow: hidden; display: block; }
.hero__lead {
  margin-top: var(--stack-h-to-lead);
  /* Dasselbe Weiss wie die Überschrift, nicht das grauere --text-on-dark:
     hinter dem Text laeuft ein Video, und jede Stufe Grau, die hier weggeht,
     ist eine Stufe, um die der Schleier darüber dünner sein darf. */
  color: var(--paper-50);
  max-width: 56ch;
}
.hero__actions { margin-top: var(--stack-body-to-button); max-width: 680px; }
.hero__micro {
  margin-top: var(--stack-button-to-micro);
  color: var(--paper-50);
}

/* Hintergrundvideo und Schleier ---------------------------------------
   Der Schleier ist kein Effekt, sondern die Absicherung des Kontrasts: er
   deckt so weit ab, dass die Textfarben auch dann über den Grenzwerten aus
   §9 liegen, wenn im Video eine weisse Flaeche zu sehen ist. Gemessen wird
   der ungünstigste Fall in gate_contrast.py. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Standbild statt Video am Handy (DESIGN.md §8.0e). Ein Hintergrundvideo
   kostet dort Daten und Akku fuer einen Effekt, den man auf 393 px kaum
   wahrnimmt. Ab 768 px uebernimmt das Video, das Standbild verschwindet.

   Der Bildausschnitt ist auf Hochformat gerechnet: object-position haelt die
   Spruehflasche im unteren Drittel, wo im Hero am meisten Platz frei ist. */
.hero__standbild {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url('../bilder/hero-mobil.jpg');
  background-size: cover;
  /* 62% 40%: der Kopf der Flasche steht damit in der freien Flaeche zwischen
     Fliesstext und Knopf, nicht hinter der Ueberschrift. Gemessen bei 320
     und 393 px, nicht geschaetzt (§8.0e). */
  background-position: 62% 40%;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .hero__standbild { display: none; }
}
@media (max-width: 767px) {
  .hero__video { display: none; }
}

.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* 0,68 ist die Untergrenze mit Reserve, keine Geschmacksfrage: ueber einem
     REIN WEISSEN Videobild — dem unguenstigsten Fall — bleiben 5,1:1 fuer den
     hellen Text (§9 verlangt 4,5; ab etwa 0,62 reisst es). */
  background: linear-gradient(160deg,
      rgba(11, 26, 19, 0.72) 0%,
      rgba(19, 42, 32, 0.68) 55%,
      rgba(5, 12, 9, 0.76) 100%);
}

/* -------------------------------------------------------------------------
   11. Vertrauensleiste (§11 slot trust_strip)
   ------------------------------------------------------------------------- */

.trust-strip { padding-block: var(--space-12); background: var(--surface-section); }

.trust-strip__list {
  display: grid;
  gap: var(--space-3) var(--space-8);
}
@media (min-width: 640px) { .trust-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trust-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------------------------
   12. Check-Liste (§7 check_list)
   ------------------------------------------------------------------------- */

.check-list { display: flex; flex-direction: column; gap: var(--stack-list-row-gap); }

.check-list li {
  position: relative;
  min-height: var(--check-row-height);
  padding-left: calc(20px + var(--check-icon-gap));
  display: flex;
  align-items: center;
  font-size: var(--type-list-item);
  line-height: var(--lh-list-item);
  color: var(--text-strong);
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='%231C5F3F'%20stroke-width='1.5'%3E%3Ccircle%20cx='10'%20cy='10'%20r='8.25'/%3E%3Cpath%20d='M6.2%2010.3%208.85%2012.95%2013.8%207.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* -------------------------------------------------------------------------
   13. Bild-Text-Block (§7 media_text_block, §11 content_a/b/c)
   ------------------------------------------------------------------------- */

.section__intro { margin-bottom: var(--space-16); }
.section__intro .lead { margin-top: var(--stack-h-to-lead); }

.mt-block + .mt-block { margin-top: var(--space-24); }

.mt-block__text > * + * { margin-top: var(--stack-lead-to-body); }
.mt-block__text .mt-block__claim { margin-top: var(--stack-h-to-lead); }
.mt-block__text .check-list { margin-top: var(--stack-body-to-list); }
/* Der Termindruck-Satz steht direkt unter der Zusage: er spricht die Gruppe
   mit dem hoechsten Handlungsdruck an (Uebergabetermin, Kaution im Feuer) und
   war als 14-px-Fussnote typografisch die schwaechste Zeile des Blocks. */
.mt-block__text .mt-block__urgency {
  margin-top: var(--space-4);
  color: var(--text-strong);
}

.mt-block__media { margin-bottom: var(--stack-media-to-text); }

@media (min-width: 768px) {
  .mt-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);      /* 64 px Spalte */
    align-items: center;
  }
  .mt-block__media { margin-bottom: 0; }
  .mt-block--media-right .mt-block__media { order: 2; }
}

/* Bildplatzhalter — es gibt noch keine eigenen Fotos (DESIGN.md §10) */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  background: var(--paper-200);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-xl);
  text-align: center;
}
.media-placeholder__label {
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-strong);
}
.media-placeholder__hint {
  font-size: var(--type-meta);
  line-height: var(--lh-meta);
  color: var(--text-strong);
  max-width: 34ch;
}
.media-placeholder .icon {
  width: 28px;
  height: 28px;
  color: var(--green-700);
}

/* -------------------------------------------------------------------------
   14. Zusagen-Raster ("Warum SauberBrüder", §10 allowed_proof_pattern)
   ------------------------------------------------------------------------- */

.promise-list {
  display: grid;
  gap: var(--space-10);
}
@media (min-width: 768px) {
  .promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-16); }
}

.promise {
  padding-top: var(--space-6);
  border-top: var(--hairline-light);
}
.promise__index {
  font-family: var(--font-display);
  font-size: var(--type-footer-label);
  line-height: var(--lh-footer-label);
  font-weight: 700;
  letter-spacing: var(--tracking-footer-label);
  color: var(--green-700);
  display: block;
  margin-bottom: var(--space-3);
}
.promise h3 { margin-bottom: var(--space-4); }

/* -------------------------------------------------------------------------
   15. Erhöhte Karte (§7 card_elevated, §11 slot feature_card)
   ------------------------------------------------------------------------- */

.feature-card {
  background: var(--paper-0);
  border-radius: var(--radius-xl);
  padding: var(--card-padding);
  box-shadow: var(--shadow-card);
}

.steps { counter-reset: step; display: flex; flex-direction: column; }
.steps > li { padding-block: var(--space-6); }
.steps > li + li { border-top: var(--hairline-light); }
.steps > li:first-child { padding-top: 0; }

.step__label {
  display: block;
  font-size: var(--type-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: var(--space-2);
}
.step h3 { margin-bottom: var(--space-3); }

.accent-panel {
  margin-top: var(--space-8);
  background: var(--green-700);
  color: var(--text-on-green);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.accent-panel h3 { color: var(--text-on-green); margin-bottom: var(--space-4); }
.accent-panel p { color: var(--text-on-green); }
.accent-panel p + p { margin-top: var(--space-4); }
.accent-panel strong { color: var(--text-on-green); }
.accent-panel__note {
  margin-top: var(--space-4);
  color: var(--text-on-green-muted);
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
}

/* -------------------------------------------------------------------------
   16. Sekundäre Leistungen (Stiegenhaus, Verkehrsflächen)
   ------------------------------------------------------------------------- */

.service-pair {
  margin-top: var(--space-24);
  display: grid;
  gap: var(--space-12);
}
@media (min-width: 768px) {
  .service-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
}
.service {
  padding-top: var(--space-6);
  border-top: var(--hairline-light);
}
.service h3 { margin-bottom: var(--space-4); }
.service__claim { margin-bottom: var(--space-4); }
.service .check-list { margin-top: var(--stack-body-to-list); }

/* -------------------------------------------------------------------------
   17. FAQ-Akkordeon (§9 keyboard, §11 slot faq)
   ------------------------------------------------------------------------- */

.faq { max-width: var(--text-column-max); }
.faq__item { border-top: var(--hairline-light); }
.faq__item:last-child { border-bottom: var(--hairline-light); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  font-family: var(--font-text);
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  font-weight: 600;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}
.faq__question:hover { color: var(--green-700); }

.faq__marker {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  color: var(--green-700);
}
.faq__marker::before,
.faq__marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 1px;
  translate: -50% -50%;
}
.faq__marker::before { width: 14px; height: 1.5px; }
.faq__marker::after  { width: 1.5px; height: 14px; transition: opacity var(--duration-fast) var(--easing-standard); }
.faq__question[aria-expanded='true'] .faq__marker::after { opacity: 0; }

.faq__answer { padding-bottom: var(--space-6); }
.faq__answer p + p { margin-top: var(--space-4); }
.faq__answer[hidden] { display: none; }

/* -------------------------------------------------------------------------
   18. CTA-Band (§7 cta_band, §11 slot cta)
   ------------------------------------------------------------------------- */

.cta {
  background: var(--surface-cta);
  color: var(--text-on-green);
  padding-block: var(--section-padding-top) var(--section-padding-bottom);
  text-align: center;
}
.cta__inner {
  max-width: var(--cta-content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta h2 { color: var(--text-on-green); }
.cta p { color: var(--text-on-green); }
/* Reihenfolge seit §8.0h: Ueberschrift, Wege, Kleingedrucktes, Erklaerung.
   Die Abstaende folgen der neuen Reihenfolge, nicht mehr der alten. */
.cta__actions { margin-top: var(--stack-h-to-lead); width: 100%; }
.cta__text { margin-top: var(--space-8); }
.cta__text p + p { margin-top: var(--space-4); }
.cta__actions .btn-group { justify-content: center; }
.cta__meta { margin-top: var(--stack-button-to-micro); color: var(--text-on-green-muted); font-size: var(--type-lead); line-height: var(--lh-lead); }

/* -------------------------------------------------------------------------
   19. Footer (§7 footer, §11 slot footer)
   ------------------------------------------------------------------------- */

.site-footer {
  background: var(--surface-footer);
  color: var(--paper-50);
  padding-block: var(--space-20) var(--space-10);
}

/* Raster durchgehend mit minmax(0, 1fr): sonst erzwingt die Mindestbreite
   eines Kindes eine breitere Spalte und die Seite scrollt waagrecht. */
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10) var(--space-8);
}
/* Zwei Spalten erst ab 640px. Bei 393px blieben je Spalte rund 170px — die
   E-Mail-Adresse ist breiter und ragte in die Nachbarspalte. */
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
}

.site-footer__col > * + * { margin-top: var(--space-4); }
.site-footer .footer-label { color: var(--paper-50); }
.site-footer .wordmark { color: var(--paper-50); }
.site-footer p { color: var(--text-on-dark); font-size: var(--type-meta); line-height: var(--lh-meta); }
.site-footer address { font-style: normal; }

.footer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a {
  /* flex statt inline-flex: der Link nimmt die Spaltenbreite, und was nicht
     hineinpasst, bricht um statt hinauszuragen. Das Zeichen schrumpft nicht
     mit, sonst wuerde es verzerrt. */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-wrap: anywhere;
  min-height: var(--min-touch-target);
  font-size: var(--type-meta);
  line-height: var(--lh-meta);
  color: var(--paper-50);
  text-decoration: none;
}
.footer-links a .icon { flex: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.site-footer__bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--hairline-dark);
  text-align: center;
}
.site-footer__bottom p { color: var(--text-on-dark); }
.site-footer__bottom p + p { margin-top: var(--space-2); }
.site-footer__bottom p { margin-inline: auto; }

/* -------------------------------------------------------------------------
   20. Rechtstextseiten
   ------------------------------------------------------------------------- */

.legal-page { padding-block: var(--space-16) var(--section-padding-bottom); }
.legal-page__intro { margin-top: var(--stack-h-to-lead); }

.legal-note {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--paper-0);
  border: var(--hairline-light);
  border-radius: var(--radius-lg);
}
.legal-note p + p { margin-top: var(--space-4); }

.legal-section { margin-top: var(--space-16); }
.legal-section h2 { font-size: var(--type-heading-3); line-height: var(--lh-heading-3); letter-spacing: var(--tracking-heading-3); }
.legal-section h3 { margin-top: var(--space-8); font-size: var(--type-lead); line-height: var(--lh-lead); }
.legal-section > * + * { margin-top: var(--space-4); }
.legal-section p, .legal-section li { font-size: var(--type-legal); line-height: var(--lh-legal); }

.data-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.data-list > div { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--hairline-light); }
/* Freistehende Links erfuellen die 44-px-Trefferflaeche aus §9. */
.text-link,
.data-list dd a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
  color: var(--green-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.text-link:hover,
.data-list dd a:hover { color: var(--green-800); }

.data-list dt { font-weight: 600; color: var(--text-strong); font-size: var(--type-legal); line-height: var(--lh-legal); min-width: 16rem; flex: 1 1 16rem; }
.data-list dd { margin: 0; font-size: var(--type-legal); line-height: var(--lh-legal); flex: 1 1 16rem; }

.bullet-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.bullet-list li { position: relative; padding-left: var(--space-6); }
.bullet-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--green-700);
}

/* -------------------------------------------------------------------------
   21. Sektions-Einblendung (§8.1)
   Sichtbar ist der Ausgangszustand. Die Bewegung ist reiner Zusatz.
   ------------------------------------------------------------------------- */

/* Die Sektions-Einblendung laeuft ueber ScrollTrigger in bewegung.js, nicht
   ueber animation-timeline. Grundsatz §8.1: sichtbar ist der Ausgangs-
   zustand, das Verstecken setzt erst das Skript — kein opacity: 0 hier. */

/* -------------------------------------------------------------------------
   22. prefers-reduced-motion (§8 — verpflichtend)
   ------------------------------------------------------------------------- */

@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;
    scroll-behavior: auto !important;
  }
  /* Ein dauerhaft laufendes Hintergrundvideo ist Bewegung. Wer sie abbestellt
     hat, bekommt den Verlauf aus §4 — genau wie vor dem Video. */
  .hero__video { display: none; }
  .reveal { animation: none; opacity: 1; transform: none; }
  /* §25 faellt hier ersatzlos weg und braucht keine Gegenregel mehr: B, C
     und D stehen in bewegung.css, und die wird von bewegung.js geholt, das
     hier gar nicht erst laeuft. Auch der Nav-Knopf nicht — er ist ohne
     bewegung.css von Haus aus display: none. */
}

/* -------------------------------------------------------------------------
   24. (frei — die feste Kontaktleiste am Handy ist am 16.09.2026 entfallen,
   Begruendung in DESIGN.md §8.0c. Der Kontakt steht am Handy im Hero, im
   Menue und im Abschlussabschnitt.)
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   25. Vier Interaktionen (DESIGN.md §8.0)
   Alle vier sind Zutat: ohne JavaScript und ohne Maus steht die Seite
   vollstaendig. Bei reduced-motion faellt die Fahrt weg, nicht die
   Bedienung (§8.0j).
   ------------------------------------------------------------------------- */

/* Die Referenz fährt alles mit dieser einen Kurve: langsam an, weich aus.
   Sie ist der Grund, warum es dort teuer aussieht und nicht nach ease. */
:root {
  --easing-weit: cubic-bezier(0.625, 0.05, 0, 1);   /* Navigation, 600 ms */
  --easing-kachel: cubic-bezier(0.21, 1, 0.34, 1);  /* FAQ-Füllung, 400 ms */
  --dauer-nav: 600ms;
  --dauer-kachel: 400ms;
}

/* === A. Kopfbereich ueber der Seite (§8.0 A, §8.0k) ======================
   Ab Tablet liegt er ueber dem Inhalt; die Wortmarke laeuft mit und kehrt
   ihren Untergrund um (Regeln oben bei .wortmarke-schicht). */

@media (min-width: 768px) {
  body { padding-top: var(--header-height); }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;              /* unter Overlay (60) und Anrufleiste (50) */
    background: transparent;
    border-bottom: 0;
  }

  /* Der Hero füllt weiterhin bis an die Oberkante — das padding-top am body
     wird hier wieder herausgerechnet, sonst stünde über dem Video ein Streifen. */
  .hero {
    margin-top: calc(var(--header-height) * -1);
    padding-top: calc(var(--hero-padding-top) + var(--header-height));
  }

  /* KEIN durchgehender Balken (Begruendung: DESIGN.md §8.0d). Die Wortmarke
     steht frei, die Bedienelemente sitzen rechts in einer dunklen Flaeche —
     so bleiben sie ueber jedem Abschnitt lesbar, ohne Umfaerben. */
  .site-header__actions {
    padding: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--ink-900);
  }
  .site-header__actions .site-nav__link { color: var(--paper-50); }


}

/* === B. Navigation, die sich zusammenklappt (DESIGN.md §8.0 B) ===========
   Oben offen; verlaesst man den Kopfbereich, fahren die Reiter in den Knopf
   zurueck und kommen bei Mauskontakt oder Fokus heraus. Der Knopf bleibt
   IMMER sichtbar — auf einem Tablet gibt es kein hover. */

.site-nav-schalter { display: none; }

.nav-knopf {
  /* Aus, solange bewegung.css nicht geladen ist. Der Knopf hat genau einen
     Zweck — das Zusammenklappen — und das steht dort. Bei
     prefers-reduced-motion und ohne JavaScript ist er damit gar nicht erst
     da, statt sichtbar und wirkungslos herumzustehen (§9). */
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--min-touch-target);
  padding-inline: var(--space-4);
  border: 0;
  /* Derselbe gefuellte gruene Block wie der Menue-Ausloeser am Handy. Ein
     blasser Umriss ginge in der hellen Flaeche daneben unter. */
  border-radius: var(--radius-pill);
  /* Ohne Fuellung: gefuellt ist im Kopfbereich nur der Handlungsknopf
     daneben. Zwei Flaechen haetten gleich laut gerufen. Der Knopf traegt nur
     das Zeichen, sein Name steht als sr-only darin. */
  background: transparent;
  font-family: var(--font-text);
  font-size: var(--type-meta);
  line-height: var(--lh-meta);
  font-weight: 600;
  color: var(--paper-50);
  cursor: pointer;
}
/* Quadratisch statt breit — die 44px aus §9 gelten weiter in beide Richtungen. */
.nav-knopf { padding-inline: 0; min-width: var(--min-touch-target); }
.nav-knopf:hover { background: var(--green-700); }
.nav-knopf .icon { width: 22px; height: 22px; }

/* Der Handlungsknopf im Kopfbereich (§8.0g) --------------------------------
   Steht auch zugeklappt offen und ist damit der eine Weg zum Kontakt, den man
   von jeder Stelle aus sieht — deshalb faellt das Telefonfeld neben der H1 weg.
   Unter 768px aus: Wortmarke, Knopf und Text sind dort zusammen breiter als
   320px; am Handy fuehren Hero-Knopf und Menue zum Kontakt. */
.kopf-cta { display: none; }

@media (min-width: 768px) {
  .kopf-cta {
    display: inline-flex;
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  .site-nav-schalter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Das Klappwerk. Lag bis zum 16.09.2026 in bewegung.css und fiel damit bei
     reduced-motion ganz aus; die Fahrt wegzulassen ist richtig, die Bedienung
     nicht (§8.0j). Alles haengt an [data-js] — ohne Skript waere der Knopf
     tot, also gibt es ihn dann nicht (§8.1). */
  [data-js] .nav-knopf { display: inline-flex; }

  [data-js] .site-nav {
    display: grid;
    grid-template-columns: 0fr;
  }

  [data-js] .site-nav__list {
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    /* Zugeklappt ist die Spalte null Pixel breit; vom rechten Rand aus
       wachsen die Punkte nach innen, links beginnend ragten sie hinaus. */
    justify-content: flex-end;
  }

  [data-js] .site-nav-schalter[data-nav='offen'] .site-nav,
  [data-js] .site-nav-schalter:hover .site-nav,
  [data-js] .site-nav-schalter:focus-within .site-nav { grid-template-columns: 1fr; }

  [data-js] .site-nav-schalter[data-nav='offen'] .site-nav__list,
  [data-js] .site-nav-schalter:hover .site-nav__list,
  [data-js] .site-nav-schalter:focus-within .site-nav__list { opacity: 1; }

  [data-js] .site-nav-schalter:focus-within .site-nav__list { overflow: visible; }

  /* Zugeschnittene Links sind ohnehin nicht zu treffen; das nimmt ihnen
     zusaetzlich den Mausfang am Rand. */
  [data-js] .site-nav-schalter[data-nav='zu'] .site-nav__link { pointer-events: none; }
  [data-js] .site-nav-schalter[data-nav='zu']:hover .site-nav__link,
  [data-js] .site-nav-schalter[data-nav='zu']:focus-within .site-nav__link { pointer-events: auto; }
}

/* Ohne bewegung.css klappt die Navigation genauso, nur ohne Ueberblendung.
   C und D bleiben dort: ohne die Datei ist ihr Zustand der richtige. */
/* -------------------------------------------------------------------------
   23. Nachtrag
   ------------------------------------------------------------------------- */

/* Das Attribut muss auch Flex-/Grid-Kinder verbergen können. */
[hidden] { display: none !important; }

/* Die H1 nutzt die kurze Fassung aus BRIEF.md §3.1 und kommt damit wieder
   mit display_max_ch aus §3 aus — die frühere Ausnahme auf 30ch entfällt. */