/* =====================================================================
   retreva · Design-Tokens (Design 1.0 + Step 1–5)
   Quelle: Board „Basis 1/4 · Design-Tokens“ (Canvas v47). Jeder Name = 1:1 Token im Board.
   Diese Datei ist führend. Die Curator Suite gibt für retreva kein eigenes CSS aus.
   ===================================================================== */

/* ---------- Schriften (selbst gehostet, OFL) ---------- */
@font-face { font-family: "Sora"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/sora/Sora-Regular.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/sora/Sora-Medium.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/sora/Sora-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/sora/Sora-Bold.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/dm-sans/DMSans-400-700.woff2") format("woff2"); }

:root {
  /* ---------- Farben ---------- */
  --c-ink: #14243A;            /* Überschriften, Text */
  --c-navy: #1E3D63;           /* Primär (Buttons, aktive Zustände, Flächen) */
  --c-link: #2A5A8A;           /* Links, Info, Fokus */
  --c-book: #F7C548;           /* NUR Buchen/Verfügbarkeit, Header-Suche, Newsletter (V23) */
  --c-on-book: #1B1606;
  --c-star: #F2B83A;
  --c-text: #14243A;
  --c-text-2: #33475B;
  --c-muted: #4A5D70;
  --c-placeholder: #647587;
  --c-disabled: #B7C1CB;
  --c-on-navy: #FFFFFF;
  --c-on-navy-2: #C6D4E2;
  --c-bg: #F4F6F8;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF2F5;
  --c-discovery-shade: rgb(0 0 0 / .6);
  --c-gallery-matte: #F3F3F3;
  --c-gallery-backdrop: rgb(0 0 0 / .72);
  --c-dialog-backdrop: rgb(0 0 0 / .42);
  --c-navy-tint: #E8F0F8;
  --c-line: #E1E7ED;
  --c-line-strong: #C9D3DD;
  --c-line-field: #7F8E9E;
  --c-overlay: #14243A;
  --c-heart: #E8505B;          /* Merkliste „gemerkt“ */
  --c-hero-text: #FFFFFF;
  --c-hero-shade: rgb(0 0 0 / 56%);
  --c-hero-credit-bg: rgb(0 0 0 / 65%);
  --c-hero-credit-line: rgb(255 255 255 / 45%);
  --c-card-chip-bg: var(--c-navy-tint);
  --c-card-chip-text: var(--c-ink);
  --card-motion-duration: var(--dur-4);
  --card-motion-ease: var(--ease-emphasized);
  --card-hover-lift: -3px;

  /* Status (Hinweis-System A/B/C, spec/hinweis-system.md) */
  --c-error: #B3261E;   --c-error-bg: #FCECEA;   --c-error-text: #8C1D18;
  --c-warning: #A8551C; --c-warning-bg: #FBEFE6; --c-warning-text: #6B3A12;
  --c-success: #2E7D4F; --c-success-bg: #E8F4EC; --c-success-text: #1D5235;
  --c-info: #2A5A8A;    --c-info-bg: #E8F0F8;    --c-info-text: #1E3D63;

  /* Saison-Flächen der Startseite (redaktionell steuerbar) */
  --c-season-winter: #E9EFF6;
  --c-season-autumn: #F5EFE6;
  --c-season-spa: #E6F0F0;

  /* Listen-Marker „Ruhesteine“ (Bildmarke ohne Sonne) */
  --list-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cellipse cx='9' cy='9.1' rx='7.6' ry='2.7'/%3E%3Cellipse cx='8.2' cy='3.9' rx='4.7' ry='2.2'/%3E%3C/svg%3E");
  --c-list-marker: #2A5A8A;
  --c-list-marker-on-dark: #C6D4E2;

  /* ---------- Typografie ---------- */
  --ff-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(40px, 5.2vw, 76px);   /* Sora 600 · 76/1.03 · −0.03em · Hero Startseite */
  --fs-h1: clamp(32px, 3.7vw, 52px);        /* Sora 600 · 52/1.05 · −0.03em */
  --fs-h1-small: clamp(16px, 1.4vw, 20px);  /* DM Sans 500 · 20/1.4 · <small> in der H1 */
  --fs-h2-lg: clamp(30px, 3.1vw, 44px);     /* Sora 600 · 44/1.1 · Startseiten-Sektionen */
  --fs-h2: clamp(26px, 2.4vw, 34px);        /* Sora 600 · 34/1.15 · −0.02em */
  --fs-h3: 22px;                             /* Sora 600 · 22/1.3 */
  --fs-h4: 18px;                             /* Sora 600 · 18/1.35 · Kartentitel */
  --fs-eyebrow: 13px;                        /* DM Sans 700 · 13 · +0.1em · uppercase */
  --fs-lead: 18px;                           /* DM Sans 600 (Teaser) / 400 · 18/1.75 */
  --fs-body: 16px;                           /* DM Sans 400 · 16/1.6 */
  --fs-small: 14px;                          /* DM Sans 400 · 14/1.5 (15 in Karten) */
  --fs-caption: 13px;                        /* DM Sans 500 · 13/1.45 · Minimum 12 */

  /* ---------- Abstände ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;
  --section-gap: clamp(64px, 7vw, 104px);

  /* ---------- Radien ---------- */
  --r-sm: 10px;    /* Badges, kleine Buttons */
  --r-md: 14px;    /* Buttons, Inputs, Felder */
  --r-lg: 18px;    /* Kleine Karten, Dropdowns */
  --r-xl: 22px;    /* Karten, Panels, Bilder */
  --r-2xl: 28px;   /* Hero-Bilder, Modals */
  --r-pill: 999px; /* Chips, Such-Pill, Stepper */

  /* ---------- Schatten ---------- */
  --sh-1: 0 2px 4px rgba(20, 36, 58, .05), 0 12px 32px rgba(20, 36, 58, .07);   /* Karten */
  --sh-2: 0 2px 4px rgba(20, 36, 58, .06), 0 18px 44px rgba(20, 36, 58, .12);   /* Widget, angehobene Karten */
  --sh-3: 0 4px 10px rgba(20, 36, 58, .06), 0 30px 70px rgba(20, 36, 58, .2);   /* Dropdowns, Modals, Toasts */

  /* ---------- Fokus ---------- */
  --focus-ring: 2px solid var(--c-link);
  --focus-offset: 2px;
  --focus-halo: 0 0 0 4px var(--c-navy-tint);

  /* ---------- Layout ---------- */
  --container: 1312px;
  --gutter: 24px;
  --page-pad: 64px;          /* ≥ 1200 */
  --header-h: 80px;          /* Desktop ≥ 1024 */
  --header-h-mobile: 60px;   /* < 1024 */
  --touch: 44px;             /* Mindest-Trefferfläche */

  /* ---------- Bewegung ----------
     Zentrale Dauern und Kurven für Transitions/Animationen (Micromoments später hier steuern).
     Natives Smooth-Scrolling (Carousels, Anker) hat browsereigenes Timing und ist per CSS nicht einstellbar. */
  --ease: cubic-bezier(.2, .7, .2, 1);            /* Standard: Hover, Farben, kleine Zustände */
  --ease-emphasized: cubic-bezier(.2, .65, .3, 1); /* Karten, Bild-Zoom, größere Bewegungen */
  --ease-exit: cubic-bezier(.4, 0, 1, 1);          /* Ausblenden */
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; --dur-4: 420ms;

  /* ---------- Ebenen ---------- */
  --z-header: 50; --z-dropdown: 60; --z-pricebar: 70; --z-sheet: 80; --z-modal: 90; --z-toast: 100; --z-consent: 110;
}

/* Breakpoints (siehe HANDOFF.md › Breakpoints)
   xs  < 768     Mobil: Rand 16, 1 Spalte, Sheets statt Dropdowns, Burger-Menü
   md  768–1023  Tablet: Rand 32, 2 Spalten, Burger-Menü, Widget unter Teaser + Preisleiste
   lg  1024–1199 kleiner Desktop: Hauptmenü, Rand 32, Raster wie Desktop
   xl  ≥ 1200    Desktop: Container 1312, Rand 64 (= Boards 1440) */
@media (max-width: 1199px) { :root { --page-pad: 32px; } }
@media (max-width: 767px)  { :root { --page-pad: 16px; --gutter: 16px; } }