/* Fundus · Rezept „Optik und Hörakustik: scharf sehen, gut hören“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/optik-hoerakustik-sehen-hoeren/ · 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: 'Bodoni Moda'; src: url('../../../../assets/fonts/bodoni-moda-latin-opsz-normal.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../../../../assets/fonts/bodoni-moda-latin-opsz-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@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: 'Fragment Mono'; src: url('../../../../assets/fonts/fragment-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Bodoni Moda', system-ui, sans-serif;
  --schrift-text: 'Mona Sans', system-ui, sans-serif;
  --schrift-akzent: 'Fragment Mono', ui-monospace, monospace;
  /* Größen laut Rezept: h1 Bodoni Moda clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem), opsz an die Größe gekoppelt (font-optical-sizing auto, nie fest 96), wght 500 bis 3.5rem, darüber 400, Laufweite -0.015em, Zeilenhöhe 1.0; Bodoni als Display nur für die H1. h2 Bodoni Moda clamp(1.875rem, 1.3rem + 2vw, 3rem) mit opsz fest 24 bis 36 und wght 600, damit die Haarlinien tragen; h3 und kleiner Mona Sans wdth 112, wght 600; Kursive für Fassungsnamen. Fließtext Mona Sans 1.0625rem (17 px), wdth 100, wght 400, Zeilenhöhe 1.6, höchstens 64ch; Rubriken Mona Sans wdth 112, wght 600, 0.875rem. Fragment Mono für Messwerte und Daten: dpt, Achse, Pupillendistanz in mm, Hörverlust in dB, Dauer und Preis je Termin, 0.875rem; Labels 0.75rem Versal +0.08em. Knöpfe Mona Sans 600, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Viel Papierweiß um Fassungen und Gesichter, Schildpatt hell als Fläche für Termin und Kosten, Tinte für Footer und Hören-Kapitel. Ein Tintenblau nur für Termin buchen. Farben der Fassungen kommen aus den Fotos. Kein Blau-Weiß-Medizin-Look, keine Augen-Icons, keine Linsenreflexe als Effekt.) */
  --farbe-grund: #F4F5F3; /* Grund Papierweiß */
  --farbe-text: #121417; /* Text (16,9 : 1 auf Grund) */
  --farbe-flaeche: #E8DED3; /* Fläche Schildpatt: Termin, Kosten, Werkstatt (Text 13,9 : 1) */
  --farbe-dunkel: #1C2026; /* Dunkel Tinte: Footer, Kapitel Hören (Weiß darauf 16,4 : 1) */
  --farbe-signal: #2442A8; /* Signal Tintenblau: Termin buchen (Weiß darauf 8,7 : 1; als Fläche auf Grund 7,9 : 1, auf Schildpatt 6,5 : 1); auf Tinte stattdessen weißer Knopf mit dunkler Schrift */
  --farbe-leise: #5A5F67; /* Leise: Meta-Angaben, Messwert-Einheiten (5,9 : 1 auf Grund, 4,8 : 1 auf Schildpatt) */
  --farbe-linie: #D3D6D2; /* Linie: Haarlinien um Fassungsbilder (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.0 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 300 (Reiter, Filter, Dialog öffnen), 200 (schließen), 1000 (H1 wird scharf, Wörter mit 50 Versatz), 1200 (Masken-Reveal eines Fassungsbilds) */
  --dauer-rezept-1: 50ms;
  --dauer-rezept-2: 150ms;
  --dauer-rezept-3: 200ms;
  --dauer-rezept-4: 300ms;
  --dauer-rezept-5: 1000ms;
  --dauer-rezept-6: 1200ms;
  /* Bewegung: token-editorial-langsam */
  --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-m: 1000ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1600ms;
  --stagger: 100ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Text 100 % in Zeilenmaske, Bilder clip-path inset und scale 1.1 → 1, Haarlinien scaleX */

  /* 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 05.11.2026): Rollen statt Stufen; gleiche Werte wie oben, nur benannt */
  --dauer-klein: 150ms; /* = --dauer-rezept-2 */
  --dauer-mittel: 300ms; /* = --dauer-rezept-4 */
  --dauer-gross: 1200ms; /* = --dauer-rezept-6 */
  --dauer-seitenwechsel: 800ms;
  --dauer-schliessen: 200ms; /* = --dauer-rezept-3 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  --ease-ausnahme: cubic-bezier(0.76, 0, 0.24, 1); /* nur: der Kreis beim Seitenwechsel (seitenwechsel-wachsende-form klickpunkt); Expo-out verschluckt die Form */
  --ease-form: var(--ease-ausnahme); /* Name, den die Partitur beim Laden nennt */
  /* Laden 1: H1 */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 1000ms;
  --dauer-laden-1-versatz: 50ms;

  /* Raum (luftig): Viel Weiß um jedes Produktfoto (mindestens 48 px), Messwert-Tabellen dagegen dicht mit 8 px Zeilenabstand. */
  --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: 144px;
  --raum-sektion: clamp(72px, 9vw, 144px);
  /* Raster: Hero 5/7 (Text links, Passepartout rechts). Fassungen als 4er-Raster mit viel Abstand, mobil 2. Kosten als Tabelle über 8 Spalten. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 64px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1320px;
  /* Form: Kanten fein wie ein Brillenrand; nur die Haupt-Pille (pfeil-icon-button, Variante tausch) ist rund. */
  --radius-klein: 2px;
  --radius-gross: 2px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #D3D6D2 um Fassungsbilder; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: pfeil-icon-button (Variante tausch), kontur-button-zeichnen (Variante zeichnen) */
  --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 sofort scharf, Bilder ohne Maske (Rezept); Seitenwechsel als Überblendung. Seitenwechsel als Überblendung 150 ms ohne Kreis. */
  /* Reduziert laut Stil: opacity 200 ms, Masken offen */
}