/* Fundus · Rezept „Pflegedienst: Nähe und Klartext“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/pflege-dienst-naehe/ · 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: 'Literata'; src: url('../../../../assets/fonts/literata-latin-full-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../../../../assets/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('../../../../assets/fonts/hanken-grotesk-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Literata', Georgia, serif;
  --schrift-text: 'Hanken Grotesk', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Literata clamp(2.5rem, 1.8rem + 3vw, 4rem), wght 600, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem), wght 600; h3 1.5rem. Fließtext Hanken Grotesk mindestens 1.25rem (20 px), wght 400, Zeilenhöhe 1.6, max. 60ch, Absatzabstand 1em; Knöpfe 1.25rem wght 600, mindestens 56 px hoch; Telefonnummer im Kopf 1.5rem wght 700 in Tabellenziffern; kleinste Schrift 1rem, auch in Fußzeile und Formularhinweisen. Fett nur für Telefonnummer und Beträge. */
  --mass: 60ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Warmes Weiß als Grund, sehr dunkles Warmgrau statt Schwarz, Pflaume als Hausfarbe für Überschriften, dunkle Sektionen, den Karriere-Bereich und die Fußzeile, Sonnengelb nur für Anrufen, Anfragen und Bewerben. Sekundärtext dunkler als üblich (9 : 1), weil viele Leser älter sind. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Textfarbe. Kein Klinikblau, kein Mint, keine Verläufe.) */
  --farbe-grund: #FAF7F2; /* Grund */
  --farbe-text: #1F1B16; /* Text (16 : 1) */
  --farbe-text-2: #5B2A4A; /* Pflaume: Marke, Überschriften, Karriere-Bereich, Fußzeile (Weiß darauf 11 : 1) */
  --farbe-signal: #FFC845; /* Signal Sonnengelb: Anrufen, Anfragen, Bewerben (Text #1F1B16, 11 : 1; auf hellem Grund mit 2 px Rand #1F1B16) */
  --farbe-flaeche: #FFF1CC; /* Hinweisfläche: Kosten, Erreichbarkeit */
  --farbe-text-3: #4A443D; /* Sekundärtext (9 : 1) */
  --farbe-linie: #D8D0C4; /* Linien */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.1 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Farbe, Hover), 300 (Akkordeon, Menü, PLZ-Antwort, Dialog öffnen), 200 (schließen); Fokusring ohne Übergang */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  /* Bewegung: token-toggle-asymmetrisch */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --dauer-xs: 150ms;
  --dauer-s: 220ms;
  --dauer-m: 300ms;
  --dauer-l: 450ms;
  --stagger: 40ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Panel clip-path, Links yPercent 100 → 0; Schließen schneller und mit Anlauf-Kurve */

  /* Raum (luftig): Großzügig für große Schrift: kein Abstand unter 8 px, Knöpfe mindestens 56 px hoch, Absatzabstand 1em. Hält 200 % Zoom und erhöhte Textabstände. */
  --raum-1: 8px;
  --raum-2: 12px;
  --raum-3: 16px;
  --raum-4: 24px;
  --raum-5: 32px;
  --raum-6: 40px;
  --raum-7: 56px;
  --raum-8: 72px;
  --raum-9: 96px;
  --raum-10: 128px;
  --raum-sektion: clamp(64px, 8vw, 120px);
  /* Raster: Höchstens zwei Spalten nebeneinander, mobil eine. Text auf 60ch. Navigation mit höchstens fünf Punkten ohne Untermenü. */
  --raster-spalten: 12;
  --raster-rand: clamp(20px, 5vw, 56px);
  --raster-spalt: clamp(20px, 3vw, 40px);
  --raster-max: 1200px;
  /* Form: Wegweiser-Knöpfe zeigen mit der Spitze in ihre Richtung (corner-shape-eckenformen, Variante formen), mit clip-path-Rückfall; Fokusring außen auf eigenem Rahmen. */
  --radius-klein: 8px;
  --radius-gross: 12px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 2px; /* 2px #1F1B16 um gelbe Knöpfe auf hellem Grund; sonst 1px #D8D0C4 */
  /* Schatten: 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 */
}