/* Fundus · Rezept „Praxis & Therapie: ruhig und zugewandt“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/praxis-gesundheit-ruhig/ · Bauplan: bauplan.txt · Leitfaden: https://cecodesign.de/lab/fundus/leitfaden.txt
   Alle Gestaltung der Seite nutzt nur diese Variablen. Schriftpfade beim Kopieren in ein Projekt anpassen. */

@font-face { font-family: 'Hedvig Letters Serif'; src: url('../../../../assets/fonts/hedvig-letters-serif-latin-opsz-normal.woff2') format('woff2'); font-weight: 100 900; 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-stretch: 25% 151%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Hedvig Letters Serif', Georgia, serif;
  --schrift-text: 'Google Sans Flex', system-ui, sans-serif;
  /* Größen laut Rezept: Alle drei Referenzen kombinieren eine weiche Serif-Headline (Corda, GT Super, Nantes) mit einer freundlichen Grotesk. h1 clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Hedvig Letters Serif 400, opsz 24, Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem), opsz 24; Fließtext Google Sans Flex wght 400, ROND 30–50 (weich, aber klar), opsz automatisch, mindestens 1.0625rem (17px), Zeilenhöhe 1.6, max. 62ch; Buttons/Labels 1rem wght 500. Für maximale Lesbarkeit (ältere Patienten) Text auf atkinson-hyperlegible-next wechseln. */
  --mass: 62ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Gedecktes Grün/Petrol als Vertrauenston (statt Krankenhausblau), warme Off-Whites und Greige als Flächen, dunkles Grüngrau statt Schwarz für Text, ein warmer Akzent (Apricot/Gelb) nur für Hervorhebungen. Kontrast für Text mind. 4.5:1.) */
  --farbe-grund: #F5F7F7; /* Grund (HelloBetter) */
  --farbe-flaeche: #E2E0DE; /* warme Fläche/Karten (One Medical) */
  --farbe-marke: #005450; /* Marke, Buttons, Footer (One Medical) */
  --farbe-text: #363B3B; /* Text (HelloBetter) */
  --farbe-text-2: #596666; /* Sekundärtext */
  --farbe-akzent: #FFC776; /* warmer Akzent für Hinweise/Badges (One Medical) */
  --farbe-linie: #D6D9D9; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.1 : 1 auf Grund */
  --farbe-signal: var(--farbe-marke); /* Haupthandlung, abgeleitet aus „Marke, Buttons, Footer“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150–250 (Buttons, Links, Formular, Akkordeon), 400 (Einblendungen, max. 8 px Weg), 600–800 (Bild-Überblendung, einmalig) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 250ms;
  --dauer-rezept-3: 400ms;
  --dauer-rezept-4: 600ms;
  --dauer-rezept-5: 800ms;
  /* Bewegung: token-tech-praezise */
  --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);
  --dauer-xs: 70ms;
  --dauer-s: 110ms;
  --dauer-m: 150ms;
  --dauer-l: 240ms;
  --dauer-xl: 400ms;
  --dauer-xxl: 700ms;
  --stagger: 30ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: 4 bis 8 px, keine Skalierung, kein Federn */

  /* Raum (mittel): Ruhig und übersichtlich: Behandlungen als Liste mit 24 px Abstand, Formulare mit 20 px zwischen Feldern, Fließtext auf 62ch. */
  --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-sektion: clamp(64px, 8vw, 120px);
  /* Raster: Hero 6/6 (Text links, Foto rechts). Team als 3er-Raster, Behandlungen in einer Spalte mit Unterzeile. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(16px, 2.4vw, 32px);
  --raster-max: 1200px;
  /* Form: Weich, aber klar: Pillen für Termin und Telefon, 16 px für Fotos und Karten (Demo hovercard-interest-invoker zeigt 12 und 16 px). */
  --radius-klein: 12px;
  --radius-gross: 16px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #E2E0DE */
  /* Schatten: nur Hovercard und Popover: weich und flach in Grüngrau, sonst keiner */

  /* Buttons: button-zustaende, pfeil-icon-button (Variante linie) */
  --button-hoehe: 44px; /* Trefferfläche mindestens 44 × 44 px */
  --button-farbe: var(--farbe-signal, currentColor);
  --fokus-ring: 2px solid var(--farbe-text, currentColor); /* außen um den Knopf, Abstand s. u.; auf dunklen Flächen eigene Farbe setzen */
  --fokus-abstand: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stagger: 0ms; --ui-stagger: 0ms; }
  /* Reduziert laut Stil: opacity 150 ms linear rein, 100 ms raus */
}