/* Fundus · Rezept „Kfz-Werkstatt und Autohaus: Festpreis, Termin, fertig“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/kfz-werkstatt-autohaus/ · 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: 'Mona Sans'; src: url('../../../../assets/fonts/mona-sans-latin-wdth-normal.woff2') format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; 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: 'Mona Sans', system-ui, sans-serif;
  --schrift-text: 'Google Sans Flex', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Mona Sans clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem), wght 800, wdth 80, Laufweite -0.02em, Zeilenhöhe 0.98; h2 clamp(1.75rem, 1.25rem + 2vw, 2.75rem), wght 750, wdth 85; die drei Preise unter dem Hero Mona Sans 2.5rem wght 800 wdth 75 Tabellenziffern, „€“ und „inkl. MwSt.“ in Google Sans Flex daneben. Preise in der Festpreis-Tabelle Google Sans Flex 1.125rem wght 700 Tabellenziffern, rechtsbündig. Fließtext Google Sans Flex 1.0625rem (17 px), wght 400, ROND 0, opsz automatisch, Zeilenhöhe 1.55, max. 65ch; Labels (Fahrzeugklasse, Stand-Datum) Google Sans Flex 0.8125rem wght 600 Versal +0.06em; Telefonnummer im Kopf 1.25rem wght 700 Tabellenziffern. Pflichtzeile Pkw-EnVKV mindestens so groß und kräftig wie der Angebotstext daneben, nie unter 0.875rem. */
  --mass: 65ch;
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Helles Betongrau als Grund, Asphalt für Kopf, Festpreis-Tafel und Fußzeile, Verkehrsgelb (RAL 1023 als Beispiel) nur für „Termin buchen“ und den aktiven Schritt der Terminstrecke. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Asphalt (Nicht-Text-Kontrast), auf Asphalt ohne Rand. Grün nur für „Jetzt geöffnet“ und „verfügbar“, Rot nur für Fehler; beides immer mit Text, nie als einzige Aussage. Markenfarben von Herstellern nur im Logo des Autohauses, nie als Flächenfarbe der Seite.) */
  --farbe-grund: #F2F1ED; /* Grund (Betongrau hell) */
  --farbe-text: #121314; /* Text (16,5 : 1) */
  --farbe-text-2: #595E63; /* Sekundärtext, Stand-Datum, Einheiten (5,8 : 1) */
  --farbe-asphalt: #232629; /* Asphalt: Kopf, Festpreis-Tafel, Fußzeile (Weiß darauf 15,2 : 1; Sekundärtext darauf #B9BEC4, 8,1 : 1) */
  --farbe-signal: #F5B700; /* Signal Verkehrsgelb: Termin buchen, aktiver Schritt (Text #121314, 10,3 : 1; auf Grund mit 2 px Rand #232629) */
  --farbe-status: #1F7A3E; /* Status geöffnet, verfügbar (Weiß darauf 5,4 : 1, nur mit Text) */
  --farbe-fehler: #B3261E; /* Fehler, Termin belegt (Weiß darauf 6,5 : 1, sparsam) */
  --farbe-linie: #CECDCA; /* abgeleitet: Haarlinien (nur Dekoration) */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 120 (Hover, Farbe, Druck der Taste), 250 (Menü, Preis-Reiter, Akkordeon, nächster Schritt der Terminstrecke, Dialog öffnen), 170 (schließen); Fokusring ohne Übergang */
  --dauer-rezept-1: 120ms;
  --dauer-rezept-2: 170ms;
  --dauer-rezept-3: 250ms;
  /* 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 (dicht): Schnell zu scannen: Festpreis-Tabelle mit 12 px Zeilen, Terminstrecke mit 16 px zwischen Feldern, kurze Sektionsabstände. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 40px;
  --raum-8: 56px;
  --raum-9: 80px;
  --raum-10: 120px;
  --raum-sektion: clamp(56px, 7vw, 104px);
  /* Raster: Hero 5/7 (Text/Foto), darunter die Festpreis-Zeile über alle 12 Spalten auf Asphalt. Fahrzeugkarten 3 Spalten mit Pflichtzeile. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 3vw, 40px);
  --raster-spalt: clamp(12px, 2vw, 24px);
  --raster-max: 1280px;
  /* Form: Werkstatt-Taster statt Pille: 4 px an Knöpfen und Feldern, 8 px an Karten und Fotos. Alle anderen Knöpfe flach. */
  --radius-klein: 4px;
  --radius-gross: 8px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 2px; /* 2px #232629 um gelbe Knöpfe auf hellem Grund; Tabellen 1px #595E63 mit 25 % Deckkraft */
  /* Schatten: nur die Tiefen-Taste (tiefen-taste-3d, Variante stapel) für „Termin buchen“; sonst keiner */

  /* Buttons: tiefen-taste-3d (Variante stapel), pfeil-icon-button (Variante tausch) */
  --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 */
}