/* Fundus · Rezept „Apotheke vor Ort: offen, Notdienst, vorbestellt“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/apotheke-vor-ort/ · 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: 'Funnel Display'; src: url('../../../../assets/fonts/funnel-display-latin-wght-normal.woff') format('woff'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('../../../../assets/fonts/funnel-sans-latin-wght-normal.woff') format('woff'); font-weight: 300 800; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Funnel Display', system-ui, sans-serif;
  --schrift-text: 'Funnel Sans', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Funnel Display clamp(2rem, 1.3rem + 3vw, 3.5rem), wght 600, Laufweite -0.02em, Zeilenhöhe 1.05; h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem), wght 600. Fließtext Funnel Sans 1.125rem (18 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch. Statuszeile Funnel Sans 1.125rem wght 600; Zeiten, Preise und Postleitzahlen mit Tabellenziffern; Pflichttext 1rem, nie kleiner als der Angebotstext. Knöpfe Funnel Sans 600, 1.0625rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Hell und klinisch ruhig, aber warm: fast weißer Grund, helles Salbei-Petrol als Fläche für Statuszeile und Services, tiefes Petrol für Notdienst-Band und Footer. Petrol mittel nur für Vorbestellen und Termin. Das rote Apotheken-A nur, wenn die Apotheke es als Marke führen darf (Nutzungsregeln vom Kunden prüfen lassen), nie als Deko. Kein Kapsel- und Kreuz-Ornament, keine Grün-Weiß-Verläufe.) */
  --farbe-grund: #FAFAF8; /* Grund Weiß warm */
  --farbe-text: #1A2321; /* Text (15,4 : 1 auf Grund) */
  --farbe-flaeche: #E0ECE8; /* Fläche Salbei: Statuszeile, Services, Vorbestellung (Text 13,3 : 1) */
  --farbe-dunkel: #0F3B3A; /* Dunkel Petrol: Notdienst-Band, Footer (Weiß darauf 12,3 : 1) */
  --farbe-signal: #0D6A62; /* Signal Petrol: Vorbestellen, Termin (Weiß darauf 6,5 : 1; als Fläche auf Grund 6,2 : 1, auf Salbei 5,3 : 1); auf Dunkel stattdessen weißer Knopf mit dunkler Schrift */
  --farbe-leise: #55615E; /* Leise: Meta-Angaben, Stand-Daten (6,2 : 1 auf Grund, 5,3 : 1 auf Salbei) */
  --farbe-linie: #D2DAD7; /* Linie: Haarlinien in Listen (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.3 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 110 (Hover, Farbe), 240 (Markierung der Statusreiter, Akkordeon), 160 (schließen), 400 (Einblendung eines Panels) */
  --dauer-rezept-1: 110ms;
  --dauer-rezept-2: 160ms;
  --dauer-rezept-3: 240ms;
  --dauer-rezept-4: 400ms;
  /* Bewegung: token-tech-praezise */
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-ein: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-aus: cubic-bezier(0.2, 0, 1, 0.9);
  --dauer-xs: 70ms;
  --dauer-s: 110ms;
  --dauer-m: 150ms;
  --dauer-l: 240ms;
  --dauer-xl: 400ms;
  --dauer-xxl: 700ms;
  --stagger: 30ms;
  --aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: 4 bis 8 px, keine Skalierung, kein Federn */

  /* 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: 110ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 240ms; /* = --dauer-rezept-3 */
  --dauer-gross: 400ms; /* = --dauer-rezept-4 */
  --dauer-seitenwechsel: 480ms;
  --dauer-schliessen: 160ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 110ms;
  --dauer-hover-aus: 70ms;
  /* Laden 1: Moment: Markierung der Statuszeile */
  --dauer-laden-1-ab: 120ms;
  --dauer-laden-1: 480ms;

  /* Raum (mittel): Großzügig lesbar: Statuszeile mit 24 px Innenabstand, Services als Liste mit 16 px zwischen den Punkten. */
  --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: 112px;
  --raum-sektion: clamp(56px, 7vw, 112px);
  /* Raster: Statuszeile über 8 Spalten, Kontakt daneben über 4. Services als zweispaltige Liste, mobil eine Spalte. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(16px, 2vw, 28px);
  --raster-max: 1200px;
  /* Form: Freundlich gerundet, ohne Pillen. Flächen über Salbei getrennt, nicht über Schatten. */
  --radius-klein: 6px;
  --radius-gross: 12px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D2DAD7 in Listen; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, 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: 110ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 110ms; --dauer-hover-aus: 70ms; } /* nur Überblenden, höchstens 150 ms; nie länger als normal */
  /* Partitur reduziert: Markierung springt (Rezept), Panels ohne Weg, Seitenwechsel als Überblendung. */
  /* Reduziert laut Stil: opacity 150 ms linear rein, 100 ms raus */
}