/*
  Design-Tokens, siehe 00_PLANUNG/design-direction.md, Abschnitt Farbarchitektur
  (Runde 2: erweiterte Palette). Alle fünf tragenden Farben stammen aus den
  drei Vitalstoff-Broschüren, entweder direkt aus dem dominanten Panel-Ton
  oder aus den warmen Sandtönen der Fotografien. Jede Text/Fläche-Kombination
  ist gegen WCAG geprüft, die Werte stehen als Kommentar bei der Rolle, nicht
  nur im Planungsdokument.
*/

:root {
  /* Grundfläche: Creme aus dem Broschüren-Panel */
  --color-surface: #e7e3dc;
  --color-surface-elevated: #f3f0e9;
  --color-surface-sage-tint: #d2d8c4; /* helles Salbei für Sektions-Bänder */
  --color-surface-forest: #33402c; /* tiefes Waldgrün für dramatische Bänder */
  --color-surface-inverse: #33402c; /* Footer, invertierte Sektionen */

  /* Text */
  --color-text: #241c14; /* 13.1:1 auf --color-surface */
  /*
    Gedämpfter Textton, geprüft auf allen drei Grundflächen, die das System
    tatsächlich hat. Bis Runde 40 stand hier #6b5f51 mit dem Kommentar
    „4.9:1 auf --color-surface". Die Zahl stimmte, aber sie galt nur für eine
    Fläche: Auf Creme erreichte der Ton 4.86:1 und auf der hellen Fläche
    5.46:1, auf dem Salbei-Band --color-surface-sage-tint jedoch nur 4.25:1
    und damit unter dem Minimum von 4.5:1 für normalen Text. Betroffen waren
    13 Stellen allein auf der Startseite, darunter die Abschnitts-Sublines,
    die Schritt-Erklärungen des Ablaufs und der Hinweis auf den Hausarzt.

    Der Fehler war nicht der Wert, sondern die Prüfung: Ein Token, das auf
    drei Flächen benutzt wird, braucht drei Messungen. Der neue Ton ist die
    kleinste Abdunklung, die auf allen dreien trägt, mit etwas Puffer:
    5.32:1 auf Creme, 5.98:1 auf der hellen Fläche, 4.65:1 auf Salbei.
    Wer eine weitere Grundfläche einführt, misst diesen Ton erneut dagegen.
  */
  --color-text-muted: #65594c;
  --color-text-on-inverse: #e7e3dc; /* 8.6:1 auf --color-surface-forest */

  /* Akzent: Marken-Olivgrün aus dem Broschüren-Panel (#7c7d62), für den
     Einsatz als Fläche mit Text um zehn Prozent aufgehellt, damit dunkler
     Text darauf 4.7:1 statt nur 4.0:1 erreicht. Als reine Flächenfarbe ohne
     Text bleibt der ungesättigte Ursprungston sichtbar, der Unterschied ist
     mit bloßem Auge nicht wahrnehmbar. */
  --color-accent: #888a6c;
  --color-accent-hover: #767857;
  --color-accent-text: #33402c; /* Waldgrün als Linkfarbe auf Creme, 8.6:1 */
  --color-accent-text-hover: #1e2617; /* dunkler bei Hover, Kontrast wird dadurch nur größer */
  --color-on-accent: var(--color-text); /* 4.71:1 */

  /* Linkfarben auf dunklem Grund (Footer, invertierte Sektion) */
  --color-link-on-inverse: var(--color-surface-sage-tint); /* 7.52:1 auf Waldgrün */
  --color-link-on-inverse-hover: var(--color-text-on-inverse); /* 8.59:1, heller bei Hover */

  /* Textfarbe auf der primären Handlungsfläche. Seit Runde 8 ist der primäre
     Button Waldgrün (--color-surface-forest); weißer Text darauf erreicht rund
     10:1, siehe design-direction.md, Runde 7. */
  --color-on-primary: #ffffff;

  /* Status, bewusst andere Farbtöne als Akzent und Primär */
  --color-success: #4b6b4e;
  --color-error: #a6432e;
  --color-warning: #6b5217; /* 5.8:1 auf --color-surface, geprüft für Text und Rahmen */
  --color-warning-on-inverse: #e0c177; /* 6.3:1 auf --color-surface-forest */
  --color-focus: #2f6f8f;

  /* Typografie: Rollen */
  --font-display: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /*
    Die Typo-Skala war bis Runde 35 an ihrem oberen Ende doppelt eingefroren,
    und der Auftraggeber meldete, auf einem großen Bildschirm wirke vieles zu
    klein. Eine Messung bei 1440, 1920 und 2560 Pixeln ergab exakt dieselben
    Werte: Jede Kurve hatte ihre Obergrenze schon bei rund 1400 Pixeln
    erreicht, und die Grundgrößen für Fließtext, Label und Meta waren gar nicht
    fluid, sondern feste Werte für jedes Gerät vom 360-Pixel-Telefon bis zum
    27-Zoll-Monitor.

    Das ist ein Fehler in der Sache, nicht nur im Eindruck: Schriftgröße ist
    keine Eigenschaft des Textes, sondern des Sehwinkels. 17 Pixel auf einem
    Telefon in dreißig Zentimetern Abstand und 17 Pixel auf einem Monitor in
    siebzig Zentimetern Abstand sind nicht dieselbe Größe. Wer den unteren Rand
    der Skala einfriert, macht die Seite auf jedem größeren Gerät kleiner.

    Alle Kurven wachsen jetzt bis 2560 Pixel weiter. Die Untergrenzen sind
    unverändert, deshalb ändert sich unterhalb von 1440 Pixeln nichts: Telefon
    und Laptop rendern exakt wie vorher. Die Obergrenzen sind so gewählt, dass
    Fließtext bei 2560 Pixeln 19 statt 17 Pixel misst; die Lesebreite bleibt
    dabei bei 38rem stehen, wodurch die Zeile von 72 auf 64 Zeichen sinkt und
    damit näher an den gut lesbaren Bereich rückt statt sich davon zu
    entfernen.
  */
  --text-display: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
  --text-heading: clamp(1.75rem, 1.5rem + 1vw, 2.75rem);
  --text-subheading: clamp(1.25rem, 1.15rem + 0.4vw, 1.75rem);
  --text-body: clamp(1.0625rem, 0.902rem + 0.179vw, 1.1875rem);
  --text-body-lg: clamp(1.125rem, 0.964rem + 0.179vw, 1.25rem); /* 18px bis 20px, für Hero-Lead und großen CTA */
  --text-label: clamp(0.875rem, 0.795rem + 0.089vw, 0.9375rem);
  --text-meta: clamp(0.8125rem, 0.692rem + 0.134vw, 0.90625rem);

  /* Eigene Rolle für die Startseiten-Headline, siehe design-direction.md,
     Runde 5. Sie trägt allein den ersten Bildschirm und darf deshalb deutlich
     über --text-display liegen, ohne die Überschriften der übrigen Seiten
     mitzuvergrößern. Die Obergrenze ist an der längsten Zeile der realen
     Headline geprüft, nicht geschätzt.

     Die Untergrenze wurde in Runde 33 von 2.375rem auf 2.75rem angehoben. Auf
     einem 390px-Gerät ergab die alte Kurve 38px Headline gegen 18px Lead, ein
     Verhältnis von 2.1 zu 1 bei absolut kleiner Ausgangsgröße: Der erste
     Bildschirm las sich wie ein Fließtext mit etwas größerer Überschrift, nicht
     wie eine Startseite. 44px sind an der realen Headline geprüft, die längste
     Zeile bricht auf 360px Breite nicht ungünstig. Die Vorzugsgröße überholt
     die neue Untergrenze erst bei rund 564px Viewport, oberhalb davon bleibt
     die Kurve unverändert. */
  --text-hero: clamp(2.75rem, 1.55rem + 3.4vw, 4.1875rem);
  --line-height-hero: 1.0;
  --letter-spacing-hero: -0.021em;

  --line-height-display: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;

  /* Abstand, Basis 8px */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Radius: kontrolliert, keine Kapselform. Buttons erhalten eine eigene,
     leicht abgerundete Kante, siehe design-direction.md, Runde 4: ein
     Test mit vollständig eckiger Kante (Radius 0) wirkte dem Auftraggeber
     zufolge zu hart, die kleinste kontrollierte Stufe passt besser zum
     ruhigen, redaktionellen Ton als sowohl die Pillenform als auch die
     scharfe Kante. Flächen wie Karten und Statusmeldungen behalten ihre
     eigene, etwas großzügigere Rundung. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-button: var(--radius-sm);
  /* Große Handlungsflächen bekommen eine eigene, weichere Kante, siehe
     design-direction.md, Runde 6. Regel: der Radius skaliert mit der Größe
     des Buttons. Ein kleiner Button in einer Karte bleibt bei --radius-button
     (4px), damit er klar zur Karte kontrastiert; der alleinstehende, große
     Hero-CTA bekommt --radius-button-lg (18px), damit die Kante zur Fläche
     des Buttons passt und premium statt hart wirkt. Der Wert bleibt klar
     unter der Kapselform (halbe Buttonhöhe ~30px), verletzt also die
     Anti-Template-Regel gegen Pill Buttons nicht. */
  --radius-button-lg: 1.125rem;
  --radius-portrait: 1.75rem;

  /* Schatten: sparsam, als Tiefeninformation */
  --shadow-sm: 0 1px 2px rgba(36, 23, 16, 0.08);
  --shadow-md: 0 4px 16px rgba(36, 23, 16, 0.12);
  /* Enger, wenig gestreuter Schatten für den Button-Hover: eine eckige
     Fläche mit einem stark verlaufenden Schatten aus --shadow-md wirkt
     unsauber, weil die weiche Streuung der harten Kante widerspricht. */
  --shadow-button-hover: 0 3px 8px rgba(36, 23, 16, 0.2);

  /* Bewegung: Rhythmusfamilien aus animation-plan.md, Runde 2 bewusst
     lebendiger als der ursprüngliche, sehr zurückhaltende Startwert */
  --duration-state: 160ms;
  --duration-spatial: 320ms;
  --duration-moment: 600ms;
  --duration-reveal: 900ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  /*
    Breite der Inhaltsspalte, siehe Runde 29. Von 68rem auf 76rem angehoben,
    weil die Seite auf breiten Bildschirmen sonst verloren wirkt: Bei 1920px
    nutzte sie nur 57 Prozent der Fensterbreite. Die Lesbarkeit bleibt davon
    unberührt, weil Fließtext seine eigene, engere Begrenzung über
    --text-max-width behält und nicht mitwächst.
  */
  --content-max-width: clamp(76rem, 60.57rem + 17.14vw, 88rem);
  --text-max-width: 38rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-state: 1ms;
    --duration-spatial: 1ms;
    --duration-moment: 1ms;
    --duration-reveal: 1ms;
  }
}