/* Ederfähre · Speisewirtschaft · tokens.css
   Ausgang: lab/fundus/rezepte/gastro-warm-appetitlich/tokens.css (Stand 02.11.2026, neue Fassung mit Dauer-Rahmen).
   Ergänzt: abgeleitete Farben mit geprüftem Kontrast (Blatt, Salbei-tief, auf Dunkel), Tageszeit-Räume,
   Tokens für den Seitenwechsel (gebogener-wipe-shape). Alle Gestaltung der Seite nutzt nur diese Variablen. */

@font-face { font-family: 'Fraunces'; src: url('../../../../assets/fonts/fraunces-latin-full-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../../../../assets/fonts/fraunces-latin-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Commissioner'; src: url('../../../../assets/fonts/commissioner-latin-full-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Schrift (Rezept: h1 clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces 450–600, SOFT 50–100, -0.01em, 1.02;
     Text Commissioner 1.0625rem / 1.55; Labels FLAR 60–100, 0.75rem, 0.15em; Gericht 1.125rem/500, Beschreibung 0.9375rem) */
  --schrift-headline: 'Fraunces', Georgia, serif;
  --schrift-text: 'Commissioner', system-ui, sans-serif;
  --groesse-h1: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --groesse-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --groesse-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --groesse-zeit: clamp(4.5rem, 2rem + 11vw, 12rem);   /* Uhrzeiten als Bildzeichen (aria-hidden), Fraunces 300 kursiv */
  --groesse-marke: clamp(4rem, 1rem + 15vw, 15rem);    /* Wortmarke im Fuß */
  --groesse-text: 1.0625rem;
  --groesse-gross: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --groesse-klein: 0.9375rem;
  --groesse-label: 0.75rem;
  --groesse-gericht: 1.125rem;
  /* Fraunces eigenständig: drei Lagen über die Achsen statt eines Standardschnitts.
     Display (h1, Telefon, Adresse, Wortmarke): opsz 144 = feine Haarstriche, SOFT 100 = weiche Enden, WONK 1 = h, n, m neigen sich.
     Titel (h2, Gerichte): opsz automatisch, SOFT 100, WONK 0, ruhiger. Kursive (statisch 300) nur für Zeit und Bewegung:
     Uhrzeiten, Gänge der Karte, „fähre“ in der Marke, Name im Seitenwechsel. */
  --fraunces-display: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  --fraunces-titel: 'SOFT' 100, 'WONK' 0;
  --fraunces-gericht: 'SOFT' 60, 'WONK' 0;
  --laufweite-headline: -0.01em;
  --laufweite-display: -0.035em;
  --laufweite-label: 0.15em;
  --zeilenhoehe-headline: 1.02;
  --zeilenhoehe-text: 1.55;
  --mass: 62ch;

  /* Farbe (Rezept) */
  --farbe-grund: #F0ECE0;          /* Papier-Weiß (Dishoom) */
  --farbe-text: #353839;           /* 10,0 : 1 auf Grund */
  --farbe-flaeche: #7F937A;        /* Hausfarbe Salbei, nur Flächen ohne Schrift (2,8 : 1 mit Weiß) */
  --farbe-dunkle: #293E3A;         /* dunkle Räume, Fuß, Haupthandlung, Seitenwechsel */
  --farbe-akzent: #EAC16E;         /* Senf: Kreis im Knopf, Status, Reiter */
  --farbe-akzent-2: #E1A894;       /* Rosé, sparsam */
  --farbe-signal: #293E3A;         /* Haupthandlung als dunkle Pille, Senf im Kreis */
  --farbe-leise: #5C5D55;          /* Meta-Text: 5,6 : 1 auf Grund, 5,1 : 1 auf Blatt, 4,7 : 1 auf Salbei-hell */
  --farbe-linie: rgb(53 56 57 / 0.2);  /* Rezept: 1px #353839 mit 20 % zwischen Gerichten */
  --farbe-linie-stark: rgb(53 56 57 / 0.45);
  --farbe-fehler: #B3261E;         /* 5,5 : 1 auf Grund */
  /* abgeleitet */
  --farbe-blatt: #E6E0D0;          /* eine Stufe tiefer: Felder, Bildplätze */
  --farbe-salbei-hell: #DCE2D2;    /* Tageszeit Abend früh */
  --farbe-salbei-tief: #4F6A4B;    /* Salbei als Schrift: 5,1 : 1 auf Grund */
  --farbe-rose-hell: #EED3C6;      /* Bildplätze, Diele */
  --farbe-senf-hell: #F3DFB2;
  --farbe-auf-dunkel: #F0ECE0;     /* 9,6 : 1 auf Dunkel */
  --farbe-auf-dunkel-leise: #B9C2B0; /* 6,2 : 1 auf Dunkel */
  --farbe-linie-dunkel: rgb(240 236 224 / 0.22);
  --farbe-text-blass: #80807C;     /* 3,4 : 1: Startton des Wort-Aufhellens, nur große Schrift, Endton --farbe-text */
  --farbe-zu: #8A4B3A;             /* 5,9 : 1 auf Grund; Status nie nur über Farbe */

  /* Dauer-Rahmen des Rezepts: 200 (Hover, Tabs), 700 (Bild-Einblendung), 400 (Menü/Overlay) */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 400ms;
  --dauer-rezept-3: 700ms;
  /* Bewegung: token-editorial-langsam (nur Bilder, h1, Seitenwechsel) */
  --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;

  /* Bewegung für UI (Menüs, Reiter, Formulare, Blatt): 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;

  /* Seitenwechsel: gebogener-wipe-shape (Panel in --farbe-dunkle, Seitenname in der Mitte).
     Rein mit --ease-aus (Anlauf), Freigabe mit --ease. Summe 1500 ms (unter 1,5 s Blockade laut meta.json).
     Die Prozentwerte der @keyframes in style.css sind aus diesen drei Zahlen gerechnet. */
  --wechsel-rein: 520ms;
  --wechsel-halten: 160ms;
  --wechsel-raus: 820ms;
  --wechsel-gesamt: 1500ms;
  --wechsel-versatz: 6vh;

  /* Raum (mittel) */
  --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, 128px);
  --raum-gericht: 20px;

  /* Raster */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(12px, 2vw, 24px);
  --raster-max: 1360px;

  /* Form */
  --radius-klein: 6px;
  --radius-gross: 12px;
  --radius-button: 999px;
  --linie-staerke: 1px;

  /* Knöpfe: pfeil-icon-button (tausch), druck-feedback */
  --button-hoehe: 48px;              /* Rezept-Minimum 44 px */
  --button-kreis: 36px;
  --button-farbe: var(--farbe-signal);
  --druck-skala: 0.96;
  --druck-ein: 100ms;
  --druck-aus: 500ms;
  --ease-feder: linear(0, 0.044, 0.155, 0.307, 0.476, 0.643, 0.795, 0.923, 1.023, 1.095, 1.139, 1.16, 1.162, 1.15, 1.129, 1.102, 1.075, 1.048, 1.025, 1.006, 0.991, 0.981, 0.976, 0.973, 0.974, 0.977, 0.981, 0.985, 0.99, 0.994, 0.997, 1);
  --fokus-ring: 2px solid currentColor;
  --fokus-abstand: 3px;

  /* Leisten */
  --kopf-hoehe: 72px;
  --leiste-hoehe: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stagger: 0ms; --ui-stagger: 0ms; }
}