/* Fundus · Rezept „Versicherungsmakler und Finanzberatung: nüchtern und nachvollziehbar“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/versicherung-finanzberatung/ · 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: 'Zalando Sans'; src: url('../../../../assets/fonts/zalando-sans-latin-wdth-normal.woff2') format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Hedvig Letters Serif', Georgia, serif;
  --schrift-text: 'Zalando Sans', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Hedvig Letters Serif clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem), Laufweite -0.01em, Zeilenhöhe 1.06; Kapitel-H2 clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem) in Hedvig; H3 und Gebrauchsüberschriften Zalando Sans 600, 1.25rem. Fließtext Zalando Sans 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Beträge, Prozente und Registernummern Zalando Sans 500 mit Tabellenziffern, Riesenziffer der Beispielrechnung Hedvig clamp(3rem, 2rem + 4vw, 5.5rem). Knöpfe Zalando Sans 600, 1rem. */
  --mass: 66ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Kühl und sachlich, ohne Bankblau-Klischee: kühles Papier als Grund, Nebelgrau als Fläche für Tabellen und Rechnungen, Marine für Kapitel und Fuß. Petrol nur für „Termin“ und „Schaden melden“. Ziegel nur als Datenfarbe für die Lücke in der Beispielrechnung, nie als Knopf. Kein Gold, keine Münzen, keine Pfeile nach oben.) */
  --farbe-grund: #F4F4EF; /* Grund kühles Papier */
  --farbe-text: #16202B; /* Text (14,9 : 1 auf Grund) */
  --farbe-flaeche: #E2E7EA; /* Fläche Nebel: Tabellen, Vergütung, Beispielrechnung (Text 13,2 : 1) */
  --farbe-dunkel: #18304A; /* Dunkel Marine: Kapitel, Footer (Weiß darauf 13,5 : 1) */
  --farbe-signal: #0E5A61; /* Signal Petrol: Termin, Schaden melden (Weiß darauf 7,9 : 1; als Schrift auf Grund 7,2 : 1) */
  --farbe-akzent: #A8432A; /* Akzent Ziegel (nur Datenfarbe für die Lücke in der Beispielrechnung; als Schrift auf Grund 5,4 : 1) */
  --farbe-leise: #55606A; /* Leise: Stand-Daten, Registernummern, Meta (5,8 : 1 auf Grund, 5,2 : 1 auf Nebel) */
  --farbe-linie: #D0D2D0; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.9 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 200 (Hover, Farbe), 350 (Akkordeon, Reiter, Dialog öffnen), 240 (schließen), 500 (H1-Zeilen einmal), 600 (Seitenwechsel, Wortmarke fliegt in den Kopf), 700 (Balken der Beispielrechnung einmal) */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 240ms;
  --dauer-rezept-3: 350ms;
  --dauer-rezept-4: 500ms;
  --dauer-rezept-5: 600ms;
  --dauer-rezept-6: 700ms;
  /* Bewegung: token-swiss-knackig */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-ein: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-aus: cubic-bezier(0.5, 0, 0.75, 0);
  --dauer-xs: 200ms;
  --dauer-s: 350ms;
  --dauer-m: 500ms;
  --dauer-l: 700ms;
  --stagger: 40ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: nur x oder y; Text 100 % in Zeilenmaske, Pfeile 8 px; keine Rotation */

  /* Flächen, Bilder, Seitenwechsel (clip-path, Panels, Bänder): Kurve ohne Überschwingen */
  --ease-flaeche: var(--ease-ein);
  --ease-flaeche-aus: var(--ease-aus);
  --dauer-xl: 700ms; /* größte Stufe für große Flächen (= --dauer-gross der Partitur); der Seitenwechsel nimmt --dauer-seitenwechsel */

  /* Bewegungs-Partitur (rezept.bewegung, Stand 05.11.2026): Rollen statt Stufen; gleiche Werte wie oben, nur benannt */
  --dauer-klein: 200ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 350ms; /* = --dauer-rezept-3 */
  --dauer-gross: 700ms; /* = --dauer-rezept-6 */
  --dauer-seitenwechsel: 600ms; /* = --dauer-rezept-5 */
  --dauer-schliessen: 240ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 350ms;
  --dauer-hover-aus: 240ms;
  /* Laden 1: H1 (zwei Zeilen) */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 500ms;
  --dauer-laden-1-versatz: 40ms;

  /* Raum (mittel): Ruhig und tabellarisch: Tabellen dicht mit 12 px Zeilenabstand, Kapitel mit viel Luft, die Beispielrechnung mit 48 px Rand. */
  --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 6/6 mit randabfallendem Foto rechts. Beispielrechnung über 8 Spalten mit Annahmen rechts in 4. Tabellen nie breiter als 8 Spalten. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 64px);
  --raster-spalt: clamp(16px, 2vw, 28px);
  --raster-max: 1200px;
  /* Form: Gerade und knapp gerundet; Tabellen mit Haarlinien statt Kästen. */
  --radius-klein: 4px;
  --radius-gross: 8px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #16202B1F in Tabellen; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: fuellung-vom-eintrittspunkt (Variante basis), 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; }
  :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: H1 steht, Balken stehen auf ihrem Wert, Seitenwechsel als Überblendung 150 ms ohne Flug der Wortmarke. */
  /* Reduziert laut Stil: opacity 150 ms linear, Masken sofort offen */
}