/* =========================================================================
   DESIGN TOKENS — die einzige Quelle für Werte. Im CSS dahinter sollen keine
   Magic Numbers stehen, sondern ausschließlich diese Variablen.
   Zwei Stufen:  1) rohe Palette/Skalen   2) semantische Tokens (Verwendung).
   Einzige bewusste Ausnahme: Media-Query-Breakpoints (CSS erlaubt dort keine
   Variablen) — siehe --bp-* unten als dokumentierte Konstanten.
   ========================================================================= */
:root {
  /* ---------- 1a. Rohe Farbpalette ---------- */
  /* Direkt aus dem Logo abgeleitet: warmes Blattgrün (grünes Ende der
     Punkt-Skala #599633), edel vertieft statt schlammig-oliv. */
  --green-900: #245e34;   /* frisches Tiefgrün — Footer/Hover (klar, nicht moosig) */
  --green-700: #55833f;   /* Markenton (Logo-Grün, leicht entsättigt = edler) */
  --green-500: #7ba055;
  --green-200: #cfe0b3;
  --green-50:  #eef3e4;   /* warmer heller Flächenton */
  --ink-900:   #24281d;   /* Text, warmes Fast-Schwarz */
  --ink-600:   #585c4c;   /* gedämpfter Text */
  --green-gray:#54665b;   /* sanftes Graugrün für Überschriften */
  --line-200:  #e4e3d7;   /* Rahmen, warm */
  --white:     #ffffff;
  --green-100: #dde4dd;    /* helles Graugrün — Footer-Fläche */

  /* Logo-Punkte (pixelgenau ausgelesen): warm rot → grün, KEIN Blau/Lila.
     Markensignal, sparsam und leicht gedämpft eingesetzt. */
  --dot-1: #f50000; --dot-2: #f69d01; --dot-3: #faba00; --dot-4: #fdd501;
  --dot-5: #e1dd00; --dot-6: #bfca01; --dot-7: #90b206; --dot-8: #599633;

  /* ---------- 1b. Typo-Skala (modular ~1.22), rem ---------- */
  /* Fliesstext bleibt FIX: 18px Body ist Absicht (aeltere Zielgruppe, WCAG AA)
     und darf auf Mobil nicht schrumpfen. */
  --step--1: 0.9rem;
  --step-0:  1.125rem;   /* Body 18px auf Desktop */
  --step-1:  clamp(1.19rem, 1.05rem + 0.45vw, 1.35rem);  /* Lead: 21,6px → 19px */

  /* Ueberschriften skalieren mit der Viewport-Breite. Grund: bei fixen Groessen
     lief ein langes Wort wie "Palliativzentrum" auf 390px rechts aus dem Bild,
     und die Hierarchie wirkte auf Mobil erschlagend. Die oberen Werte sind
     unveraendert — auf dem Desktop sieht alles aus wie vorher, nur schmale
     Schirme bekommen kleinere Headlines. Je groesser die Stufe, desto staerker
     faellt sie mit. */
  --step-2:  clamp(1.3rem,  1.1rem  + 0.75vw, 1.65rem);  /* h3 */
  --step-3:  clamp(1.45rem, 1.1rem  + 1.3vw,  2.05rem);  /* h2 */
  --step-4:  clamp(1.75rem, 1.15rem + 2.2vw,  2.6rem);
  --step-5:  clamp(1.75rem, 0.85rem + 3.27vw, 3.3rem);   /* h1: 28px mobil, 52,8px Desktop */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.01em;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------- 1c. Spacing-Skala ---------- */
  /* Klein (1–5): FIX. Das sind Abstaende INNERHALB von Komponenten (Label zu Wert,
     Icon zu Text). Wuerden sie mitschrumpfen, zerfiele die Feinausrichtung. */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;

  /* Gross (6–9): FLUID. Das ist der Sektions-Rhythmus (padding-block, Abstand
     zwischen Modulen). Auf 390px waren die Luecken so gross, dass man sich durch
     Leere scrollt. Die oberen Werte sind unveraendert — Desktop bleibt gleich. */
  --space-6: clamp(1.25rem, 0.6rem + 1.75vw, 2rem);   /* 32px → 20px */
  --space-7: clamp(2rem,    0.9rem + 3vw,    3rem);   /* 48px → 32px */
  --space-8: clamp(2.5rem,  1rem   + 4.2vw,  4rem);   /* 64px → 40px */
  --space-9: clamp(3.5rem,  1.5rem + 6.3vw,  6rem);   /* 96px → 56px */

  /* ---------- 1d. Radius / Linien / Schatten ---------- */
  /* Dezent halten — zu viel Radius wirkt billig */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(38, 39, 31, 0.06);
  --shadow:    0 6px 22px rgba(38, 39, 31, 0.09);

  /* ---------- 1e. Layout ---------- */
  --container:        1280px;      /* etwas breiter, Schulthess-nah */
  --container-wide:   1680px;      /* breiter Banner-Bereich */
  --container-narrow: 760px;
  --measure:          68ch;        /* optimale Zeilenlänge Fließtext */

  /* ---------- 1f. Breakpoints (nur als Doku — MQ nutzen die Zahl direkt) ---------- */
  --bp-sm: 540px;
  --bp-md: 760px;
  --bp-lg: 1024px;

  /* =======================================================================
     2. Semantische Tokens — hierüber arbeiten die Komponenten
     ======================================================================= */
  --color-text:        var(--ink-900);
  --color-muted:       var(--ink-600);
  --color-heading:     var(--green-gray);   /* h2/Abschnittsüberschriften */
  --color-footer:      var(--green-100);              /* hellgraugrün, kein Schwarz */
  --color-footer-text: var(--ink-600);
  --color-footer-head: var(--ink-900);
  --color-footer-line: color-mix(in srgb, var(--green-gray) 35%, transparent);
  --color-bg:          var(--white);
  --color-surface:     var(--green-50);
  --color-border:      var(--line-200);

  --color-brand:        var(--green-700);
  --color-brand-strong: var(--green-900);
  --color-on-brand:     var(--white);
  /* Zustände aus dem Markenton abgeleitet — kein eigener Magic-Wert */
  --color-brand-hover:  color-mix(in oklab, var(--color-brand) 82%, black);
  --color-link:         var(--green-900);
  --color-link-hover:   var(--color-brand);
  --color-focus:        var(--green-700);

  --font-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-head: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* zusammengesetzte Layout-Tokens */
  --gutter:    var(--space-5);
  --section-y: var(--space-9);
  --flow:      var(--space-4);   /* Vertikalabstand zwischen Fließelementen */

  /* Komponenten-spezifische Tokens */
  --card-pad:        var(--space-4);   /* kompakteres Karten-Padding */
  /* Der Banner ist auf ein FORMAT festgelegt, nicht auf eine Hoehe: die Hoehe
     folgt der Breite. Sonst haengt sie an der Fensterhoehe, und beim
     Schmalerziehen wird das Bild seitlich immer staerker beschnitten.
     2.6 ist das Format der Bannerfotos (1920x736) — sie passen also exakt.
     hero.php ueberschreibt den Wert je nach ACF-Option. */
  --hero-ratio:      2.6;
  --sidebar-size:    3rem;             /* Durchmesser Schnellleisten-Buttons */
  /* Header: voll beim Seitenanfang, kompakt sobald gescrollt wird (main.js setzt
     .is-scrolled). Auf Mobil faellt der volle Header kleiner aus — 6rem sind dort
     ein Achtel des Bildschirms. */
  --header-h:         clamp(4.25rem, 2.8rem + 3.7vw, 6rem);
  --header-h-compact: clamp(3.25rem, 2.6rem + 1.6vw, 4.25rem);

  /* Mehr Grünflächen: Band-Töne */
  --color-band:      var(--green-200);
  --color-band-soft: var(--color-surface);
}

/* ---------- Mobil: EIN Regler fuer die Dichte ----------
   18px Fliesstext auf 342px Textbreite ergibt bei deutschen Woertern 5–7 Woerter
   pro Zeile — der Text bricht staendig um und die Seite wird endlos. Zusammen mit
   Zeilenhoehe 1,6 wirkt das luftig bis zerfasert.

   Deshalb faellt der Body auf dem Handy auf 16px und die Zeilenhoehe auf 1,5.
   16px ist die uebliche Untergrenze fuer gute Lesbarkeit (und in rem, d.h. wer
   groesser zoomt, bekommt weiterhin alles groesser).

   ACHTUNG: Das weicht bewusst von DESIGN.md ab ("Body 18px"). Die Vorgabe gilt
   weiterhin fuer Desktop — auf 390px war sie kontraproduktiv. */
@media (max-width: 760px) {
  :root {
    --step-0:         1rem;    /* 18px → 16px */
    --leading-normal: 1.5;     /* 1,6 → 1,5 */
  }
}