:root {
  --teal: #2D8282;
  --anthrazit: #242223;
  --hell: #F8F8F8; /* war #F0F5EB (warmes Beige) - 2026-10-12 auf neutrales Grau umgestellt (Vorbild mercedes-benz.de, GLA-Element), gilt fuer alle Flaechen-Hintergruende sitewide */
  --schwarz: #1D1D1B;
  --grau-text: #6b6b6b;
  --heading-font: 'Clear Sans Bold', Arial, sans-serif;
  --body-font: 'Clear Sans Bold', Arial, Helvetica, sans-serif;
  --mono-font: 'DejaVu Sans Mono', 'Courier New', monospace;
  --headline-alt-font: 'Open Sans', Arial, sans-serif; /* H1/H2 sitewide (seit 2026-10-13), Seitenkoepfe, CTA-Baender, Telefon-Popup */
  --max-width: 1744px;
  --side-pad: 120px; /* war 48px, jetzt 2.5x */

  /* ===== Type scale — one size per role, used everywhere ===== */
  --fs-h1: 56px;          /* hero headline */
  --fs-h2: 40px;          /* section headings: "Mehr als nur gut verpackt", "Unsere Empfehlungen", Trust-Headline */
  --fs-body: 20px;        /* running paragraph text (hero description) */
  --fs-body-small: 16px;  /* secondary/caption copy inside cards & process steps */
  --fs-nav: 17px;         /* nav links + buttons */
  --fs-card-title: 22px;  /* h3 inside cards */
  --fs-stat-number: 30px; /* big stat numbers */
  --fs-small: 16px;       /* stat labels / mono kicker */

  /* ===== Header (Scroll-Logo, Vorbild mercedes-benz.de, 2026-09-27) ===== */
  --header-pad-v: 18px;           /* Innenabstand oben/unten, Scroll-Position 0 (bisheriger Wert) */
  --header-pad-v-scrolled: 9px;   /* Innenabstand oben/unten, gescrollt (2026-09-29: ca. 10% kleiner als bisher 10px) */
  --logo-h-top: 60px;             /* Logo-Hoehe Desktop, Scroll-Position 0 (1,5x von 40px) */
  --logo-h-top-mobile: 36px;      /* Logo-Hoehe Mobile/Tablet (<=900px), Scroll-Position 0 (2026-10-13: ca. 20% kleiner als bisher 45px) */
  --logo-h-scrolled: 29px;        /* Logo-Hoehe Desktop, gescrollt (2026-09-29: ca. 10% kleiner als bisher 32px) */
  --logo-h-scrolled-mobile: 22px; /* Logo-Hoehe Mobile/Tablet, gescrollt (2026-09-29: ca. 10% kleiner als bisher 24px) */
  --transition-fast: 220ms ease;  /* Logo-Crossfade, Padding-Uebergang */
}

/* Seit 2026-10-13 (Jascha-Feedback, Vorbild mercedes-benz.de Mobilansicht, am Seitenrand
   gemessen ~20px statt wie bisher voller --side-pad von 120px): --side-pad selbst wird bei
   ≤900px kleiner, dadurch ziehen ALLE Komponenten, die padding/margin darueber beziehen
   (Header, Footer, Hero, Stats-Zeile, Wert-Kacheln, Cases-Grid, CTA-Baender, FAQ, Formular,
   Hub-/Produkt-Grids, Legal-Listen usw.), automatisch mit - vorher hatten nur einzelne
   Komponenten (.page-head, .text-section, .trust, .hub-header) eine eigene 48px-Ausnahme,
   der Rest (u.a. .cta-band, .faq, .valueprops, .cases, Footer) hatte gar keine
   Mobil-Reduzierung und blieb faelschlich bei vollen 120px Seitenrand (per Playwright
   getComputedStyle bestaetigt). Die bisherigen 48px-Einzelausnahmen wurden entfernt, damit
   sitewide ein einziger, konsistenter Wert gilt. */
/* Schriftgroessen: Desktop ca. 15 % groesser (2026-10-14, Jascha: Vergleich mit mercedes-benz.de bei 1920px, Option A),
   Mobil bleibt bei den bisherigen Werten (Jascha: "nur Desktop"). */
@media (max-width: 900px) {
  :root {
    --side-pad: 20px;
    --fs-h1: 52px; --fs-h2: 36px; --fs-body: 18px; --fs-body-small: 14px;
    --fs-nav: 16px; --fs-card-title: 20px; --fs-small: 14px;
  }
}