/* ==========================================================================
   Haubentaucher · Hotel & Stube am Schaalsee
   Tokens nach Fundus-Rezept boutique-hotel-gastgeber (Stand 02.11.2026)
   Alles andere (style.css, seite.js) nutzt nur diese Variablen.
   ========================================================================== */

/* Schriften: Newsreader (Headlines, opsz) und Mona Sans (Text, wdth). Beide OFL, template_ok. */
@font-face { font-family: 'Newsreader'; src: url('../../../../assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../../../../assets/fonts/newsreader-latin-opsz-italic.woff2') format('woff2-variations'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mona Sans'; src: url('../../../../assets/fonts/mona-sans-latin-wdth-normal.woff2') format('woff2-variations'); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  /* ---------- Animationsstil token-luxus-weich: NUR Bilder und Hero-Wechsel ---------- */
  --ease-lux: cubic-bezier(0.37, 0, 0.63, 1);        /* sine.inOut */
  --ease-lux-out: cubic-bezier(0.61, 1, 0.88, 1);    /* sine.out, einmaliges Zurückskalieren */
  --dur-lux: 1400ms;                                 /* Bildwechsel, Masken */
  --dur-lux-lg: 2200ms;                              /* Zurückskalieren 1.06 → 1 */
  --dur-lux-text: 1200ms;                            /* neue Textzeilen im Hero */
  --dur-lux-text-aus: 500ms;                         /* alte Textzeilen */
  --stagger-lux: 120ms;
  --dur-lux-flaeche: 800ms;                          /* Abweichung: Akkordeon-Flächen (Zimmer), sonst wäre 1,4 s für Hover zu träge */
  --lux-mobil: 0.8;                                  /* Telefon: alle Dauern × 0,8 */
  --dur-seite: 1000ms;                               /* Seitenwechsel (vt-cross-document-mpa), Rezept 900–1200 für Hero-Wechsel */
  --dur-seite-morph: 1200ms;                         /* Zimmerbild wächst zum Hero der Zimmerseite (vt-shared-element-morph) */
  --dur-intro: 900ms;                                /* Intro: Foto öffnet sich aus der Wasserlinie (intro-ohne-wartezeit), Jury: höchstens etwa 1 s */
  --dur-zeit: 900ms;                                 /* Tageszeit-Wechsel der Fläche (theme-farbwechsel-scroll), linear an der Schwelle */

  /* ---------- UI-Stil token-toggle-asymmetrisch: Menü, Buchung, Popover, Formulare ---------- */
  --ease-auf: cubic-bezier(0.16, 1, 0.3, 1);         /* Öffnen, Hover rein: Ausklang */
  --ease-zu: cubic-bezier(0.7, 0, 0.84, 0);          /* Schließen, Hover raus: Anlauf */
  --dur-auf: 300ms;
  --dur-zu: 200ms;                                   /* ≈ 67 % von auf */
  --dur-ui: 150ms;                                   /* Farbe, Rahmen, Auswahl */
  --stagger-ui: 40ms;

  /* ---------- Farbe: Sand, Creme, warmes Dunkel, Holz als einziger Signalton ---------- */
  --grund: #f3eee7;        /* Sand (Aman) */
  --creme: #fef2e3;        /* Buchungsleiste, Karten (Hoxton) */
  --karte: #fffaf3;        /* Popover, Dialoge */
  --band: #e8ddcf;         /* Bereichsband, Spuren */
  --linie: #d5d1c8;        /* Linien, Rahmen (nur Deko) */
  --rahmen: #8f877c;       /* Feldrahmen, 3,2 : 1 auf Creme */
  --text: #3e3a37;         /* warmes Dunkel statt Schwarz, 9,8 : 1 auf Sand */
  --leise: #66655f;        /* Sekundärtext, 5,1 : 1 auf Sand, nicht auf --band */
  --haus: #6e5a47;         /* Hauston Holz: Haupthandlung, Fokus, Auswahl (5,9 : 1 mit Creme) */
  --haus-tief: #574636;
  --nacht: #2f2b28;        /* Footer, Menü */
  --nacht-text: #f3eee7;
  --nacht-leise: #c2b9ad;  /* 7,2 : 1 auf Nacht */
  --fehler: #8c3b21;       /* nur für Fehlermeldungen, 6,9 : 1 auf Creme */
  --bild-grund: #55545f;   /* Platzhalterfarbe, solange Bilder laden */
  --abend: #574636;        /* = --haus-tief als Fläche für das Abend-Kapitel, Creme darauf 8,6 : 1 */

  /* ---------- Tageslauf (theme-farbwechsel-scroll): Fläche und Schrift je Kapitel, nur Rezeptfarben ---------- */
  --flaeche: var(--grund);
  --schrift: var(--text);
  --schrift-leise: var(--leise);

  /* ---------- Schrift ---------- */
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Mona Sans', system-ui, sans-serif;
  --fs-h1: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  --fs-h2: clamp(2.125rem, 1.4rem + 2.6vw, 4rem);
  --fs-h3: clamp(1.5rem, 1.25rem + .7vw, 1.875rem);
  --fs-lead: clamp(1.1875rem, 1.05rem + .4vw, 1.375rem);
  --fs-text: 1.0625rem;
  --fs-klein: .9375rem;
  --fs-label: .75rem;
  --lh-text: 1.6;
  --track-h: -0.02em;      /* Rezept −0,015em, Leitfaden A3 ab 4rem −0,02 bis −0,05em */
  --track-label: .06em;
  --breit: 118%;           /* Mona Sans wdth für Labels und Knöpfe (Rezept 112–125) */

  /* ---------- Abstände ---------- */
  --rand: clamp(18px, 3.6vw, 56px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --sektion: clamp(88px, 11vw, 168px);
  --max: 1320px;
  --lesebreite: 62ch;
  --radius: 6px;

  /* ---------- Knöpfe (muster.button: glas-button frost, pfeil-icon-button tausch) ---------- */
  --knopf-h: 56px;                     /* Haupthandlung, Telefon 52 px */
  --knopf-h-klein: 48px;
  --knopf-radius: 999px;
  --glas-saum: 6px;
  --glas-kern: rgb(254 242 227 / .62);  /* Text #2b2421 hält 5,2 : 1 auch vor Schwarz */
  --glas-saum-farbe: rgb(254 242 227 / .16);
  --glas-blur: blur(12px) saturate(1.6);
  --glas-text: #2b2421;
  --pfeil-kreis: 40px;
  --pfeil-weg: 26px;
}

@media (max-width: 640px) {
  :root { --knopf-h: 52px; }
}