/* Fundus · Rezept „Reisebüro: Fernweh mit Beratung“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/reisebuero-reiseveranstalter/ · 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: 'Instrument Serif'; src: url('../../../../assets/fonts/instrument-serif-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../../../../assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@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; }

:root {
  /* Schrift */
  --schrift-headline: 'Instrument Serif', Georgia, serif;
  --schrift-text: 'Source Serif 4', Georgia, serif;
  /* Größen laut Rezept: h1 Instrument Serif clamp(2.75rem, 1.4rem + 5.6vw, 6rem), Laufweite -0.02em, Zeilenhöhe 0.95, Kursive für ein Wort erlaubt; Kapitel-H2 clamp(2rem, 1.3rem + 2.6vw, 3.25rem) in Instrument Serif. H3, Reisetitel und Gebrauchsüberschriften Source Serif 4 600, opsz 20, 1.25rem. Fließtext Source Serif 4 1.0625rem (17 px), opsz 17, wght 400, Zeilenhöhe 1.6, höchstens 64ch. Preise, Daten und Reisezeiträume Source Serif 4 600 mit Tabellenziffern. Knöpfe Source Serif 4 600, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Wie eine Postkarte im Briefkasten: Postkarten-Weiß als Grund, Meer hell als Fläche für Reisen und Beratung, Tinte für Kapitel und Fuß. Briefmarkenrot nur für „Beratung buchen“ und „Reise anfragen“, Sand nur als Briefmarke und Stempelfläche. Farbe kommt aus den Fotos, nicht aus Verläufen; kein Sonnenuntergangs-Orange, kein Türkis-Klischee.) */
  --farbe-grund: #F6F0E4; /* Grund Postkarte */
  --farbe-text: #1E1B18; /* Text (15,1 : 1 auf Grund) */
  --farbe-flaeche: #D6E5E4; /* Fläche Meer hell: Reisen, Beratung, Gut zu wissen (Text 13,2 : 1) */
  --farbe-dunkel: #1B2B3A; /* Dunkel Tinte: Kapitel, Footer (Weiß darauf 14,5 : 1) */
  --farbe-signal: #B3261E; /* Signal Briefmarkenrot: Beratung buchen, Reise anfragen (Weiß darauf 6,5 : 1; als Schrift auf Grund 5,8 : 1) */
  --farbe-akzent: #E7D2A6; /* Akzent Sand (nur Briefmarke und Stempelfläche; Text darauf 11,6 : 1) */
  --farbe-leise: #5E5850; /* Leise: Veranstalter, Stand-Daten (6,2 : 1 auf Grund, 5,4 : 1 auf Meer) */
  --farbe-linie: #D3CEC3; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.8 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 200 (Hover, Farbe), 300 (Reiter, Filter, Dialog öffnen), 200 (schließen), 900 (H1-Zeilen und Postkarten fächern einmal auf), 1100 (Seitenwechsel, Postkarte wird Kopfbild) */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 300ms;
  --dauer-rezept-3: 900ms;
  --dauer-rezept-4: 1100ms;
  /* Bewegung: token-kinetisch-inout */
  --ease: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.76, 0, 0.24, 1);
  --dauer-m: 900ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1500ms;
  --stagger: 50ms;
  --aus-faktor: 0.75; /* Schließen = Öffnen × Faktor */
  /* Wege: Rahmen ±100 %, inneres Bild gegenläufig ±30 %, Text ±101 % in Masken */

  /* 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: 900ms; /* = --dauer-rezept-3 */
  --dauer-seitenwechsel: 1100ms; /* = --dauer-rezept-4 */
  --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: 900ms;
  --dauer-laden-1-versatz: 60ms;
  /* Laden 2: Postkarten (karten-faecher-container, bogen) */
  --dauer-laden-2-ab: 120ms;
  --dauer-laden-2: 900ms;
  --dauer-laden-2-versatz: 50ms;

  /* Raum (luftig): Luftig wie ein Reisemagazin: große Bilder, viel Rand, Preise und Pflichtangaben dicht unter den Karten. */
  --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: 104px;
  --raum-10: 144px;
  --raum-sektion: clamp(72px, 9vw, 144px);
  /* Raster: Hero 5/7 mit dem Fächer rechts; Reiseseiten im Magazin-Raster (Bild randlos, Text 7 Spalten, Fakten 4 Spalten rechts); Reisekarten als Reihe mit angeschnittener nächster Karte. */
  --raster-spalten: 12;
  --raster-rand: clamp(18px, 5vw, 80px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1360px;
  /* Form: Postkarten fast eckig (2 px) mit Zackenrand per clip-path, Karten und Felder 6 px, Knöpfe als Pille, große Bilder ohne Radius. */
  --radius-klein: 2px;
  --radius-gross: 6px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #1E1B1824 in Tabellen; Felder 1px in Leise (3:1) */
  /* Schatten: nur an Postkarten: 0 2px 4px und 0 16px 28px in Tinte mit 10 bis 14 % Deckkraft */

  /* Buttons: pfeil-icon-button (Variante tausch), kontur-button-zeichnen (Variante doppel) */
  --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: Postkarten als gerade Reihe ohne Winkel; H1 steht; Filter ohne Weg; Seitenwechsel als Überblendung 150 ms ohne Morph. */
  /* Reduziert laut Stil: Kreuzblende 200 ms */
}