/* Fundus · Rezept „Fahrschule: freundlich und buchbar“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/fahrschule-freundlich-buchbar/ · 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: 'Bricolage Grotesque'; src: url('../../../../assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('../../../../assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Bricolage Grotesque', system-ui, sans-serif;
  --schrift-text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  /* Größen laut Rezept: h1 clamp(2.5rem, 1rem + 6.5vw, 6rem), wght 700, opsz 96, Laufweite -0.02em, Zeilenhöhe 0.98, hyphens:auto (deutsche Komposita wie 'Führerscheinausbildung' sind länger als TOFUs englische Zeilen, deshalb Obergrenze 6rem statt 8.5rem); h2 clamp(2rem, 1rem + 4vw, 4rem); Fließtext 1.125rem, Zeilenhöhe 1.6; Preise mit tabellarischen Ziffern. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Helle, warme Grundfläche, dunkles Navy für Vertrauen und Text, ein Himmelblau als Sekundärton und Kennzeichen-Gelb als Fläche für Hervorhebungen (nie Gelb als Textfarbe auf Hell).) */
  --farbe-grund: #F8F8EC; /* Grund (TOFU cream) */
  --farbe-sektionswechsel: #EEF0D8; /* Sektionswechsel */
  --farbe-text: #142B50; /* Text/Navy, Footer */
  --farbe-dunkel: #3FBADF; /* Sekundär, Links auf Dunkel */
  --farbe-flaeche: #FFD60A; /* Hervorhebung als Fläche (Kennzeichen-Gelb) */
  --farbe-text-2: #566175; /* gedämpfter Text */
  --farbe-linie: #D4D7D3; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.1 : 1 auf Grund */
  --farbe-signal: var(--farbe-text); /* Haupthandlung, abgeleitet aus „Text/Navy, Footer“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 350–450 (Buttons, Karten-Hover), 800 (Einblendungen mit cubic-bezier(0.16, 1, 0.3, 1)) */
  --dauer-rezept-1: 350ms;
  --dauer-rezept-2: 450ms;
  --dauer-rezept-3: 800ms;
  /* Bewegung: token-federnd-verspielt */
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ein: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-aus: cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-feder: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);
  --dauer-s: 400ms;
  --dauer-m: 500ms;
  --dauer-l: 800ms;
  --stagger: 50ms;
  --aus-faktor: 0.6; /* Schließen = Öffnen × Faktor */
  /* Wege: Überschwingen nur auf kleinen Elementen (Buttons, Badges), Opazität immer linear 200 ms */

  /* Bewegung für UI (Menüs, Formulare, Buchung): token-toggle-asymmetrisch */
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --ui-dauer-xs: 150ms;
  --ui-dauer-s: 220ms;
  --ui-dauer-m: 300ms;
  --ui-dauer-l: 450ms;
  --ui-stagger: 40ms;
  --ui-aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Panel clip-path, Links yPercent 100 → 0; Schließen schneller und mit Anlauf-Kurve */

  /* Raum (mittel): Großzügig um die Headline, kompakt in Preisen und Formular: Tabellenzeilen 12 px, Formularfelder 16 px Abstand, Schritte des Ablaufs 48 px. */
  --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: 96px;
  --raum-10: 128px;
  --raum-sektion: clamp(72px, 9vw, 136px);
  /* Raster: Headline über 10 Spalten, Auswahl darunter über 6. Preise als Tabs über volle Breite, Ablauf als nummerierte Schritte, die gezeichnete Straße läuft durch den Rand. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(16px, 2vw, 28px);
  --raster-max: 1240px;
  /* Form: Freundlich rund, aber nicht weich: Pillen für Knöpfe und Klassen-Chips, 20 px für Preis- und Stimmenkarten. Gelb #FFD60A nur als Fläche hinter dunklem Text. */
  --radius-klein: 12px;
  --radius-gross: 20px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #566175 um Felder, Karten ohne Linie auf #EEF0D8 */
  /* Schatten: nur die Unterkante der Tiefen-Taste (tiefen-taste-3d, Variante stapel); Karten und Felder ohne Schatten */

  /* Buttons: tiefen-taste-3d (Variante stapel), button-zustaende */
  --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: ohne Überschwingen, opacity 150 ms */
}