/* Fundus · Rezept „Kita, Schule, Bildungsträger: offen und verlässlich“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/kita-schule-bildungstraeger/ · 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: '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: 'Literata'; src: url('../../../../assets/fonts/literata-latin-full-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Fraunces', Georgia, serif;
  --schrift-text: 'Literata', Georgia, serif;
  /* Größen laut Rezept: h1 Fraunces clamp(2.25rem, 1.3rem + 4vw, 4.25rem), opsz 96, SOFT 100, wght 500, Laufweite -0.015em, Zeilenhöhe 1.04; Kapitel-H2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem) in Fraunces; H3 und Gebrauchsüberschriften Literata 600, 1.25rem. Fließtext Literata 1.0625rem (17 px), wght 400, Zeilenhöhe 1.62, höchstens 64ch. Zeiten, Beiträge und Speiseplan Literata mit Tabellenziffern. Aushang-Druck in Fraunces 600 und Literata. Knöpfe Literata 600, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.62;

  /* Farbe (Prinzip: Hell und geerdet wie ein Flur mit Garderobe: Kreidepapier als Grund, Himmelblau als ruhige Fläche für Häuser, Zeiten und Beiträge, Tafelgrün für Aushang-Druck, Kapitel und Fuß. Mohnrot nur für „Platz anfragen“ und Anrufen. Sonnengelb nur als Klebeband und Druckfläche im Aushang, nie als Schrift. Kein Regenbogen, keine Bonbonfarben, keine Wachsmalkreide-Verläufe.) */
  --farbe-grund: #F7F2E8; /* Grund Kreidepapier */
  --farbe-text: #1F2A2E; /* Text (13,2 : 1 auf Grund) */
  --farbe-flaeche: #DDE8EC; /* Fläche Himmel: Häuser, Zeiten, Beiträge (Text 11,8 : 1) */
  --farbe-dunkel: #24423A; /* Dunkel Tafelgrün: Aushang-Druck, Kapitel, Footer (Weiß darauf 11,0 : 1, Kreidepapier 9,8 : 1) */
  --farbe-signal: #B23A1C; /* Signal Mohn: Platz anfragen, Anrufen (Weiß darauf 6,0 : 1; als Schrift auf Grund 5,4 : 1) */
  --farbe-akzent: #F2C14E; /* Akzent Sonnengelb (nur Klebeband und Druckfläche im Aushang; Text darauf 8,8 : 1; nie als Schrift) */
  --farbe-leise: #5A6164; /* Leise: Stand-Daten, Meta (5,7 : 1 auf Grund, 5,1 : 1 auf Himmel) */
  --farbe-linie: #D4D2CA; /* 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), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 1000 (H1-Zeilen und Hero-Foto einmal), 700 (Seitenwechsel als Blatt über Blatt, zurück 500) */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 300ms;
  --dauer-rezept-3: 700ms;
  --dauer-rezept-4: 1000ms;
  /* 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: 200ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 300ms; /* = --dauer-rezept-2 */
  --dauer-gross: 1000ms; /* = --dauer-rezept-4 */
  --dauer-seitenwechsel: 700ms; /* = --dauer-rezept-3 */
  --dauer-schliessen: 200ms; /* = --dauer-rezept-1 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  /* Laden 1: H1 (zwei Zeilen) */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 1000ms;
  --dauer-laden-1-versatz: 100ms;
  /* Laden 2: Hero-Foto im Passepartout */
  --dauer-laden-2-ab: 120ms;
  --dauer-laden-2: 1000ms;

  /* Raum (luftig): Großzügig wie ein heller Flur: Aushänge mit 36 px Rand zueinander, Zeiten und Beiträge dicht, Konzept mit viel Raum. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 36px;
  --raum-7: 52px;
  --raum-8: 72px;
  --raum-9: 100px;
  --raum-10: 140px;
  --raum-sektion: clamp(72px, 9vw, 140px);
  /* Raster: Hero: Foto im Passepartout über Spalte 1 bis 8, Aushang über Spalte 9 bis 12, leicht über die Bildkante gehängt. Konzept 5/7, Häuser als zweispaltige Karten, Aushänge nie mehr als zwei nebeneinander. */
  --raster-spalten: 12;
  --raster-rand: clamp(18px, 5vw, 72px);
  --raster-spalt: clamp(16px, 2.2vw, 32px);
  --raster-max: 1200px;
  /* Form: Weich, aber nicht kindlich: Karten 22 px, Aushang eckig mit Klebeband, Knöpfe 10 px. */
  --radius-klein: 10px;
  --radius-gross: 22px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #24423A26 in Tabellen; Felder 1px in Leise (3:1) */
  /* Schatten: nur am Aushang: drop-shadow 0 1px 1px und 0 18px 26px in Tafelgrün mit 12 bis 16 % Deckkraft */

  /* Buttons: tiefen-taste-3d (Variante soft), 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 und Foto stehen; Aushang ohne Streiflicht; Reiter und Dialoge ohne Weg; Seitenwechsel als Überblendung 150 ms ohne Blatt und ohne Bild-Flug. */
  /* Reduziert laut Stil: opacity 200 ms, Masken offen */
}