/* Fundus · Rezept „Boutique-Hotel: Gastgeber mit Haltung“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/ · 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: 'Newsreader'; src: url('../../../../assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../../../../assets/fonts/newsreader-latin-opsz-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mona Sans'; src: url('../../../../assets/fonts/mona-sans-latin-wdth-normal.woff2') format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Newsreader', Georgia, serif;
  --schrift-text: 'Mona Sans', system-ui, sans-serif;
  /* Größen laut Rezept: h1 clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader opsz 72, wght 300–400, Laufweite -0.015em, Zeilenhöhe 1.05; Kursiv für Ortsnamen/Akzente (wie Tiempos Fine Italic bei Hoxton). Labels und Buttons Mona Sans wdth 112–125 (breit wie GT America Extended), 0.75rem Versal, Laufweite 0.06em; Fließtext Mona Sans wdth 100, 1.0625rem, Zeilenhöhe 1.6. */
  --mass: 65ch; /* Standard, Rezept nennt kein Maß */
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Sand und Creme als Grund, warmes Dunkelbraun-Grau statt Schwarz, ein gedämpfter Naturton aus dem Haus (Holz, Stein, Pflanzen). Kein Gold, keine Verläufe – die Fotos tragen die Stimmung.) */
  --farbe-grund: #F3EEE7; /* Grund (Aman Sand) */
  --farbe-flaeche: #FEF2E3; /* Creme für Buchungsleiste/Karten (Hoxton) */
  --farbe-text: #3E3A37; /* Text/Footer (Hoxton) */
  --farbe-linie: #D5D1C8; /* Linien, Rahmen */
  --farbe-text-2: #82847F; /* Sekundärtext, Meta (Aman) */
  --farbe-hauston: #6E5A47; /* Hauston für Buttons (frei gewählt aus dem Interieur, hier Beispiel Holz) */
  --farbe-text-3: #6A6C67; /* Meta-Text barrierefrei (4.6 : 1 auf #F3EEE7; #82847F nur für Linien oder Schrift ab 24 px) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.7 : 1 auf Grund */
  --farbe-signal: var(--farbe-hauston); /* Haupthandlung, abgeleitet aus „Hauston für Buttons“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 300–600 (Deckkraft, linear oder sine, wie Michelberger), 400 (UI-Farben, Rahmen wie Aman), 900–1200 (Bild-Crossfades/Hero-Wechsel) */
  --dauer-rezept-1: 300ms;
  --dauer-rezept-2: 400ms;
  --dauer-rezept-3: 600ms;
  --dauer-rezept-4: 900ms;
  --dauer-rezept-5: 1200ms;
  /* 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): Werte wie im Starter (starter/boutique-hotel-gastgeber/tokens.css: --s-1 bis --s-8, --sektion). Bilder und Kapitel mit viel Luft, die Buchungsleiste dagegen kompakt mit 56 px Höhe. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 64px;
  --raum-9: 96px;
  --raum-10: 168px;
  --raum-sektion: clamp(88px, 11vw, 168px);
  /* Raster: Hero und Zimmerbilder randlos, Text auf 62ch. Zimmer als 2er-Raster mit 3:2-Bildern, Lage und Anreise 6/6. */
  --raster-spalten: 12;
  --raster-rand: clamp(18px, 3.6vw, 56px);
  --raster-spalt: clamp(16px, 2.4vw, 32px);
  --raster-max: 1320px;
  /* Form: Knöpfe als Pille (Starter --knopf-radius 999px), Karten und Popover 6 px (Starter --radius). */
  --radius-klein: 6px;
  --radius-gross: 6px;
  --radius-button: 999px;
  --linie-staerke: 1px; /* 1px #D5D1C8 für Linien und Rahmen (nur Deko); Feldrahmen #8f877c */
  /* Schatten: keiner; der einzige Material-Effekt ist der Glas-Knopf über dem Hero-Foto (glas-button, Variante frost) */

  /* Buttons: pfeil-icon-button (Variante tausch), 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; }
  /* Reduziert laut Stil: opacity 300 ms, kein Zoom, kein Blur */
}