/* Fundus · Rezept „Umzug und Transport: Volumen, Termin, Versicherung“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/umzug-transport-logistik/ · 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: 'Special Gothic'; src: url('../../../../assets/fonts/special-gothic-latin-standard-normal.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('../../../../assets/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Special Gothic', system-ui, sans-serif;
  --schrift-text: 'Schibsted Grotesk', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Special Gothic clamp(2.5rem, 1.4rem + 5vw, 6rem), wdth 75 (Condensed), wght 700, Laufweite 0, Zeilenhöhe 0.92, gemischte Schreibung; h2 clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem), wdth 80. Fließtext Schibsted Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Rechner-Ergebnis Schibsted Grotesk 700, 2rem, Tabellenziffern; Labels 0.8125rem Versal +0.06em in Schibsted Grotesk. Knöpfe Schibsted Grotesk 700, 1rem. */
  --mass: 66ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Die Farbe der Flotte ist die Marke: hier Flottengelb, nur für Rechner-Ergebnis übernehmen und Besichtigung anfragen, immer mit dunkler Schrift und dunkler Kontur, weil Gelb auf hellem Grund keine 3 : 1 erreicht. Asphaltgrau hell als Grund, helleres Grau als Fläche für Rechner und Ablauf, Asphalt dunkel für Footer und Karriere. Austauschbar je Firma (Flottenrot, Flottenblau), immer geprüft. Keine Karton-Texturen, keine Weltkugel- und Lkw-Icons als Deko.) */
  --farbe-grund: #F2F2EF; /* Grund Asphalt hell */
  --farbe-text: #18191B; /* Text (15,7 : 1 auf Grund) */
  --farbe-flaeche: #DFE0DC; /* Fläche Planengrau: Rechner, Ablauf-Karten, Haftung (Text 13,3 : 1) */
  --farbe-dunkel: #24272A; /* Dunkel Asphalt: Footer, Karriere-Band (Weiß darauf 15,0 : 1; Flottengelb darauf 8,3 : 1) */
  --farbe-signal: #F2B705; /* Signal Flottengelb: Besichtigung anfragen, Ergebnis übernehmen (dunkle Schrift darauf 9,7 : 1; auf hellem Grund nur 1,6 : 1, deshalb immer mit 2-px-Kontur in Textfarbe) */
  --farbe-leise: #575A5E; /* Leise: Meta-Angaben, Annahmen im Rechner (6,2 : 1 auf Grund, 5,2 : 1 auf Fläche) */
  --farbe-linie: #CBCCC8; /* Linie: Haarlinien in Tabellen (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.8 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 300 (Rechner-Ergebnis, Akkordeon, Dialog öffnen), 200 (schließen), 900 (Hero-Auftritt einmal); Kartenstapel scrollgekoppelt */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 900ms;
  /* Bewegung: token-kinetisch-inout */
  --ease: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.76, 0, 0.24, 1);
  --dauer-m: 900ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1500ms;
  --stagger: 50ms;
  --aus-faktor: 0.75; /* Schließen = Öffnen × Faktor */
  /* Wege: Rahmen ±100 %, inneres Bild gegenläufig ±30 %, Text ±101 % in Masken */

  /* 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 */

  /* Flächen, Bilder, Seitenwechsel (clip-path, Panels, Bänder): Kurve ohne Überschwingen */
  --ease-flaeche: var(--ease-ein);
  --ease-flaeche-aus: var(--ease-aus);

  /* Bewegungs-Partitur (rezept.bewegung, Stand 04.11.2026): Rollen statt Stufen; gleiche Werte wie oben, nur benannt */
  --dauer-klein: 150ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 300ms; /* = --dauer-rezept-3 */
  --dauer-gross: 900ms; /* = --dauer-rezept-4 */
  --dauer-seitenwechsel: 450ms; /* = --ui-dauer-l */
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  /* Laden 1: Fahrzeugfoto */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 900ms;
  /* Laden 2: H1 */
  --dauer-laden-2-ab: 120ms;
  --dauer-laden-2: 450ms;
  --dauer-laden-2-versatz: 40ms;

  /* Raum (mittel): Rechner und Karten kompakt (16 px Innenabstand), Sektionen kräftig getrennt. Mobil untere Leiste, darüber 80 px Freiraum. */
  --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(64px, 8vw, 128px);
  /* Raster: Hero randlos, Rechner direkt darunter über 12 Spalten in einer Zeile (mobil gestapelt). Stapelkarten über 8 Spalten mittig. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(12px, 2vw, 28px);
  --raster-max: 1280px;
  /* Form: Gerundete Karten wie Kartonecken; gelbe Knöpfe immer mit Kontur in Textfarbe. */
  --radius-klein: 4px;
  --radius-gross: 10px;
  --radius-button: 999px;
  --linie-staerke: 2px; /* 2px #18191B um gelbe Knöpfe; 1px #CBCCC8 in Tabellen; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, pfeil-icon-button (Variante seitenwechsel) */
  --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; }
  :root { --dauer-klein: 150ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 150ms; --dauer-hover-aus: 100ms; } /* nur Überblenden, höchstens 150 ms; nie länger als normal */
  /* Partitur reduziert: Karten stehen untereinander, das Foto steht (Rezept); Seitenwechsel als Überblendung. */
  /* Reduziert laut Stil: Kreuzblende 200 ms */
}