/* Fundus · Rezept „Bestattung: würdig und klar“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/bestattung-wuerdig/ · 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: 'Source Serif 4'; src: url('../../../../assets/fonts/source-serif-4-latin-opsz-normal.woff') format('woff'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../../../../assets/fonts/source-serif-4-latin-opsz-italic.woff') format('woff'); font-weight: 100 900; 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 */
  --schrift-headline: 'Source Serif 4', Georgia, serif;
  --schrift-text: 'Commissioner', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Source Serif 4 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), wght 400, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.12; h2 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem), wght 400; h3 1.375rem, wght 600. Namen auf Gedenkseiten in Source Serif 4 Italic. Fließtext Commissioner mindestens 1.1875rem (19 px), wght 400, FLAR 0, VOLM 0, Zeilenhöhe 1.65, höchstens 62ch; Navigation und Labels Commissioner 1rem, wght 500; Rubriken in Versal nur kurz und mit +0.06em; Telefonnummer 1.5rem, wght 600, Tabellenziffern; Preise, Daten und Lebensdaten in Tabellenziffern. Nichts fetter als 600. */
  --mass: 62ch;
  --zeilenhoehe-text: 1.65;

  /* Farbe (Prinzip: Kalkweiß als Grund, Sandstein für Flächen wie Kosten, Vorsorge und Hinweise, Schiefer (warmes Fast-Schwarz) für die Sofortleiste, dunkle Bänder und den Footer. Moosgrün ist der einzige Signalton: Anrufen, Rückruf, Vorsorge anfragen. Es steht für Ruhe, nicht für Alarm. Auf Schiefer wird der Knopf zu hellem Moos mit Schiefer-Schrift. Kein Schwarzrand, kein Lila oder Violett, kein Gold, keine Verläufe, keine Farbe aus Symbolen. Sekundärtext dunkler als üblich (6,5 : 1), weil viele Leser älter sind oder unter Stress lesen.) */
  --farbe-grund: #F4F1EB; /* Grund Kalk */
  --farbe-text: #24221F; /* Text (14 : 1) */
  --farbe-flaeche: #E8E1D5; /* Fläche Sandstein: Kosten, Vorsorge, Hinweise (Text 12 : 1) */
  --farbe-schiefer: #2B2D2C; /* Schiefer: Sofortleiste, dunkle Bänder, Footer (Kalk darauf 12 : 1) */
  --farbe-signal: #3F5B48; /* Signal Moosgrün: Anrufen, Rückruf, Vorsorge anfragen (Weiß darauf 7,5 : 1; als Fläche auf Kalk 6,6 : 1) */
  --farbe-helles: #8FB59A; /* helles Moos: derselbe Knopf auf Schiefer (Schiefer-Schrift darauf 6,1 : 1) */
  --farbe-text-2: #5A554D; /* Sekundärtext, Lebensdaten, Meta (6,5 : 1 auf Kalk, 5,7 : 1 auf Sandstein) */
  --farbe-linie: #D3CCC0; /* Linien */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.8 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Farbe, Hover), 300 (Menü, Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 1400 (Überblendung der Raumbilder, Riffelglas wird klar), 500 (dasselbe bei reduzierter Bewegung, nur Deckkraft) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 500ms;
  --dauer-rezept-5: 1400ms;
  /* Bewegung: token-luxus-weich */
  --ease: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-ein: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-aus: cubic-bezier(0.37, 0, 0.63, 1);
  --dauer-s: 500ms;
  --dauer-m: 1200ms;
  --dauer-l: 1400ms;
  --dauer-xl: 2200ms;
  --stagger: 120ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: y 16 px, Bild scale 1.08 → 1, blur 8 px → 0 (ohne Blur auf Touch) */

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

  /* Raum (luftig): Viel Ruhe um wenige Elemente: Schritte nach Sterbeort mit 24 px Abstand, Knöpfe mindestens 48 px hoch, nichts gedrängt. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 72px;
  --raum-9: 104px;
  --raum-10: 152px;
  --raum-sektion: clamp(80px, 10vw, 152px);
  /* Raster: Hero 5/7 (Text/Foto), Abschiedsräume 4/8 (Demo geriffeltes-glas). Zwei Türen gleich breit nebeneinander, mobil untereinander. Text auf 62ch. */
  --raster-spalten: 12;
  --raster-rand: clamp(20px, 5vw, 64px);
  --raster-spalt: clamp(20px, 3vw, 40px);
  --raster-max: 1200px;
  /* Form: Fast eckig und still. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie) oder Moosgrün gefüllt; keine Pille. */
  --radius-klein: 2px;
  --radius-gross: 4px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #D3CCC0 */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, 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; }
  /* Reduziert laut Stil: opacity 300 ms, kein Zoom, kein Blur */
}