/* Fundus · Rezept „Region und Ausflugsziel: Weg, Wetter, Anreise“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/region-tourismus-ausflugsziel/ · 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: 'Big Shoulders'; src: url('../../../../assets/fonts/big-shoulders-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Host Grotesk'; src: url('../../../../assets/fonts/host-grotesk-latin-wght-normal.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../../../../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Big Shoulders', system-ui, sans-serif;
  --schrift-text: 'Host Grotesk', system-ui, sans-serif;
  --schrift-akzent: 'IBM Plex Mono', ui-monospace, monospace;
  /* Größen laut Rezept: h1 Big Shoulders clamp(3rem, 1.6rem + 6vw, 7.5rem), opsz 72, wght 800, Laufweite -0.01em, Zeilenhöhe 0.88; h2 clamp(2rem, 1.4rem + 2.4vw, 3.75rem), wght 700. Fließtext Host Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Tourdaten (km, Höhenmeter auf und ab, Dauer, Schwierigkeit, Haltestelle) in IBM Plex Mono 0.875rem; Labels 0.75rem Versal +0.08em. Knöpfe Host Grotesk 600, 1rem. */
  --mass: 66ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Farben aus der Landschaft der Region, hier Mittelgebirge: Nebel als Grund, Fels als Fläche für Tourdaten und Anreise, Waldnacht für Panorama-Band und Footer. Ein Rot wie das Wegzeichen am Baum nur für Planen und Buchen. Je Region austauschbar (Seeblau, Heide, Weinlaub), immer mit 4,5 : 1 geprüft. Keine Postkarten-Sättigung, kein Himmelblau-Verlauf.) */
  --farbe-grund: #EEF0EC; /* Grund Nebel */
  --farbe-text: #1B2226; /* Text (14,0 : 1 auf Grund) */
  --farbe-flaeche: #DAD6CA; /* Fläche Fels: Tourdaten, Anreise, Gästekarte (Text 11,1 : 1) */
  --farbe-dunkel: #1F2E2B; /* Dunkel Waldnacht: Panorama-Band, Footer (Weiß darauf 14,2 : 1) */
  --farbe-signal: #B1321C; /* Signal Wegzeichen-Rot: Unterkunft suchen, Tickets, Tour starten (Weiß darauf 6,3 : 1; als Fläche auf Grund 5,5 : 1, auf Fels 4,3 : 1); auf Waldnacht stattdessen Nebel-Knopf mit dunkler Schrift */
  --farbe-leise: #565E60; /* Leise: Meta-Angaben, Stand-Daten, Wetterquelle (5,8 : 1 auf Grund, 4,6 : 1 auf Fels) */
  --farbe-linie: #C9CCC4; /* Linie: Haarlinien in Tourdaten (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.7 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 300 (Filter, Leiste, Dialog öffnen), 200 (schließen), 1400 (Masken-Reveal eines Landschaftsfotos, einmal); Panorama scrollgekoppelt über etwa 300vh */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 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 */

  /* 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: 150ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 300ms; /* = --dauer-rezept-3 */
  --dauer-gross: 1400ms; /* = --dauer-rezept-4 */
  --dauer-seitenwechsel: 1000ms;
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 300ms;
  --dauer-hover-aus: 200ms;
  /* Laden 1: Landschaftsfoto */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 1400ms;
  /* Laden 2: H1 */
  --dauer-laden-2-ab: 300ms;
  --dauer-laden-2: 1200ms;
  --dauer-laden-2-versatz: 120ms;

  /* Raum (luftig): Weit wie die Landschaft: große Bilder mit viel Raum, Tourdaten dagegen dicht in einer Zeile (8 px). */
  --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: 160px;
  --raum-sektion: clamp(72px, 10vw, 160px);
  /* Raster: Hero randlos mit Karte unten links über 5 Spalten. Touren als Reihe mit Peek, Tourseite 8/4 (Weg links, Kenndaten und Anreise rechts sticky). */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 64px);
  --raster-spalt: clamp(12px, 2vw, 32px);
  --raster-max: 1440px;
  /* Form: Ruhige Kästen; das Panorama startet mit 16 px Radius und endet randlos. */
  --radius-klein: 4px;
  --radius-gross: 16px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #C9CCC4 in Tourdaten; Felder 1px in Leise (3:1) */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, glas-button (Variante frost) */
  --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: Panorama in Endgröße ohne Pinning (Rezept); Fotos stehen; Seitenwechsel als Überblendung. Marke steht klein im Kopf, kein Schrumpfen und kein Flug. */
  /* Reduziert laut Stil: opacity 300 ms, kein Zoom, kein Blur */
}