/* ==========================================================================
   La Ballerine – Design-Tokens
   Bordeaux aus dem Originaldesign (#6b0100), Creme & Gold aus der Broschüre.

   Umbruchpunkte (nur diese vier verwenden, Mediaqueries können keine
   Variablen lesen):
     480 px   kleine Handys  → (max-width: 480px)
     640 px   große Handys   → (max-width: 640px) / (min-width: 640px)
     900 px   Tablet quer    → (min-width: 900px) / (max-width: 899px)
     1024 px  Desktop-Menü   → (min-width: 1024px) / (max-width: 1023px)
                               (js/nav.js nutzt denselben Wert)

   Schrift-Regeln:
     - höchstens sechs Überschriftengrößen: --fs-display, --fs-h1 … --fs-h5
     - Cormorant Garamond nie unter 1,4 rem (--fs-h4). Kleinere Titel in
       Inter 600 setzen (--fs-h5).
   ========================================================================== */

/* ---- Schriften (lokal, keine Verbindung zu Google) ---- */
@font-face {
    font-family: "Inter";
    src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("../assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
    font-weight: 500 600;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Farben */
    --c-bordeaux: #6b0100;
    --c-bordeaux-600: #861a17;
    --c-bordeaux-800: #4a0100;
    --c-bordeaux-900: #300202;
    --c-rose: #c2b2b5;
    --c-rose-100: #eedbcf; /* warmes Rosé, passt zum Creme-Hintergrund */
    --c-rose-200: #e5cbbf;
    --c-gold: #b8955a;
    --c-gold-300: #d9bf8f;
    --c-gold-700: #6e5121; /* Gold für Text: 5,1 : 1 auf --c-blush, 6 : 1 auf --c-cream */
    --c-cream: #f3e4cf;     /* warmes Creme, etwas kräftiger */
    --c-cream-200: #ecdac2;
    --c-white: #fffdfa;
    --c-blush: #eed3bd;     /* Karten: warmes, kräftiges Rosé-Sand statt Weiß */
    --c-blush-300: #e2b9a2; /* Wellen-Akzent und Kartenköpfe */
    --c-blush-line: #d9b59b;
    --c-ink: #3a3333;
    --c-ink-soft: #5c4f4e;  /* 5,5 : 1 auf --c-blush */
    --c-line: #e0cfb8;

    /* Rollen */
    --bg: var(--c-cream);
    --bg-soft: var(--c-cream-200);
    --surface: var(--c-blush);
    --card-line: var(--c-blush-line);
    --text: var(--c-ink);
    --text-soft: var(--c-ink-soft);
    --heading: var(--c-bordeaux-900);
    --accent: var(--c-bordeaux);
    --accent-hover: var(--c-bordeaux-600);
    --focus: var(--c-bordeaux); /* in dunklen Bereichen: --c-gold-300 (siehe base.css) */

    /* Typografie */
    --font-serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9rem;
    --fs-base: 1.0625rem;
    --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
    --fs-h5: 1.0625rem; /* Inter 600 – kleine Titel */
    --fs-h4: 1.4rem;    /* kleinste Serifengröße */
    --fs-h3: clamp(1.45rem, 1.3rem + 0.6vw, 1.8rem);
    --fs-h2: clamp(2.1rem, 1.6rem + 2vw, 3.25rem);
    --fs-h1: clamp(2.4rem, 1.8rem + 2.8vw, 4.25rem); /* Seitentitel der Unterseiten */
    --fs-display: clamp(2.6rem, 1.8rem + 3.6vw, 5rem); /* nur Startseiten-Hero */
    --fs-quote: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);

    /* Abstände */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
    --container: 1200px;
    --container-narrow: 760px;

    /* Formen – bewusst ruhig: kleine Rundungen, keine Pillen, Linien statt
       Schatten. Flächen sind einfarbig (keine Farbverläufe). */
    --radius-sm: 2px;
    --radius: 4px;
    --radius-lg: 6px;
    --radius-pill: var(--radius); /* früher Pillenform; Name bleibt für bestehende Regeln */
    --radius-media: var(--radius);
    --shadow-sm: none;
    --shadow: 0 1px 2px color-mix(in srgb, var(--c-bordeaux-900) 8%, transparent);
    --shadow-lg: var(--shadow);

    /* Wellenform (wie Motto-Band und Footer) als Maske für Karten und Hero:
       vordere Welle voll, hintere Welle zart. Gefüllt ist die untere Hälfte. */
    --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill-opacity='.45' d='M0 34C260 0 520 12 760 36s460 30 680-4V80H0z'/%3E%3Cpath d='M0 48C240 8 480 8 720 40s480 40 720 0V80H0z'/%3E%3C/svg%3E");

    /* Bewegung */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 600ms;
    --dur-exit: 180ms; /* Ausblenden ist immer schneller als Einblenden */

    --header-h: 76px;
    --header-h-scrolled: 60px; /* nach dem ersten Scrollen (layout.css, .is-scrolled) */
}