/* Physiotherapie Sievers · tokens.css
   Ausgangspunkt: lab/fundus/rezepte/praxis-gesundheit-ruhig/tokens.css (Stand 02.11.2026).
   Ergänzt: Bild-Kurve des Rezepts (expressive entrance), Flächen- und Zustandsfarben, Fokusfarbe, Schatten der Hovercard.
   Alle Gestaltung in style.css nutzt nur diese Variablen. */

@font-face { font-family: 'Hedvig Letters Serif'; src: url('../../../../assets/fonts/hedvig-letters-serif-latin-opsz-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Google Sans Flex'; src: url('../../../../assets/fonts/google-sans-flex-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Schrift (Rezept: h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), h2 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem), Text ab 17 px, 1.6, 62ch) */
  --schrift-headline: 'Hedvig Letters Serif', Georgia, serif;
  --schrift-text: 'Google Sans Flex', system-ui, sans-serif;
  --groesse-h1: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem);
  --groesse-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --groesse-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --groesse-text: 1.0625rem;
  --groesse-gross: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --groesse-klein: 0.9375rem;
  --mass: 62ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe: Petrol statt Klinikblau, warme Flächen, Grüngrau statt Schwarz, Apricot nur für Hinweise */
  --farbe-grund: #F5F7F7;
  --farbe-flaeche: #E2E0DE;
  --farbe-flaeche-hell: #ECEBE9;
  --farbe-karte: #FBFBFA;
  --farbe-marke: #005450;
  --farbe-marke-tief: #003F3C;
  --farbe-marke-hell: #D5E3E0;
  --farbe-marke-mittel: #357269;  /* zweiter Satz der h1, 5,2 : 1 */
  --farbe-text: #363B3B;
  --farbe-text-2: #596666;
  --farbe-akzent: #FFC776;
  --farbe-akzent-text: #3D2C0F;
  --farbe-linie: #D6D4D1;
  --farbe-feld: #7E8B8A;      /* Feldrahmen, 3,3 : 1 auf Grund und Karte */
  --farbe-fehler: #A3261B;
  --farbe-erfolg: #1E6B4A;
  --farbe-signal: var(--farbe-marke);
  --farbe-auf-marke: #F5F7F7;
  --farbe-auf-marke-2: #BFD6D2;

  /* Bewegung: token-tech-praezise (productive) */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-ein: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-aus: cubic-bezier(0.2, 0, 1, 0.9);
  --ease-bild: cubic-bezier(0, 0, 0.3, 1);      /* expressive entrance, nur für die eine Bild-Überblendung */
  --dauer-xs: 70ms;    /* Hover, Farbe */
  --dauer-s: 110ms;    /* Reiter-Strich */
  --dauer-m: 150ms;    /* Austritte, Druck */
  --dauer-l: 240ms;    /* Panels auf */
  --dauer-xl: 400ms;   /* Einblendungen, höchstens 8 px Weg */
  --dauer-xxl: 700ms;  /* Hero-Bild, einmalig */
  --stagger: 30ms;
  --aus-faktor: 0.65;
  --weg: 8px;

  /* Raum */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 64px;
  --raum-9: 88px;
  --raum-10: 128px;
  --raum-feld: 20px;
  --raum-sektion: clamp(64px, 8vw, 120px);

  /* Raster */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(16px, 2.4vw, 32px);
  --raster-max: 1200px;

  /* Form */
  --radius-klein: 12px;
  --radius-gross: 16px;
  --radius-button: 999px;
  --linie-staerke: 1px;
  --linie: var(--linie-staerke) solid var(--farbe-linie);
  --schatten-karte: 0 0 0 1px rgb(0 63 60 / .08), 0 18px 44px -14px rgb(0 40 38 / .32), 0 4px 12px -4px rgb(0 40 38 / .12);

  /* Buttons: button-zustaende (Haupthandlung), pfeil-icon-button Variante linie (Nebenhandlung) */
  --button-hoehe: 48px;
  --button-farbe: var(--farbe-signal);
  --fokus-farbe: var(--farbe-marke-tief);
  --fokus-ring: 2px solid var(--fokus-farbe);
  --fokus-abstand: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stagger: 0ms; --weg: 0px; --dauer-xl: 150ms; --dauer-xxl: 150ms; }
}