/*
 * Design-Tokens — Reiterhof Finkenmühle
 *
 * Einzige Quelle der Wahrheit für Farben, Typografie, Abstände und Radien.
 * Werte stammen 1:1 aus dem Design-Handover
 * (.claude/design_handoff_finkenmuehle/Styleguide.dc.html).
 *
 * Regel: In Templates und Komponenten-CSS niemals Hex-Werte oder px-Literale für
 * Farben/Radien/Schatten schreiben — immer diese Variablen benutzen.
 */

:root {
    /* --- Farben: Primär ------------------------------------------------- */
    /*
     * Hofgrün, nachgedunkelt am 03.08.2026 (Entscheidung of, offene-punkte.md
     * Punkt 15). Der Handover-Wert #25a55b erreichte gegen Weiß nur 3,18:1 und
     * gegen den Naturton 2,89:1 — WCAG AA verlangt 4,5:1 für normalen Text, und
     * betroffen war jede grüne Fläche mit Text: Knöpfe, Pill, aktiver
     * Navigationslink, Filter-Chip, Pfeil-Links, Skip-Link, Wortmarke, Eyebrow.
     *
     * Der neue Grundton ist **kein neuer Farbwert**: es ist das Waldgrün des
     * Handovers, das bisher der Hover-Zustand war. Damit bleibt die Palette die
     * des Handovers, nur die Rollen wandern eine Stufe weiter.
     *
     *   --color-green       5,16 (Weiß) / 4,86 (#faf8f3) / 4,70 (#f7f4ee) / 4,65 (#eaf6ef)
     *   --color-green-dark  7,42 (Weiß) — deutlich dunkler, damit Hover sichtbar bleibt
     *
     * Nicht ausreichend wäre eine kleinere Aufdunklung gewesen: #1e874b besteht
     * mit 4,54 gegen Weiß, fällt aber auf den Naturtönen (4,28 / 4,14) durch.
     * Die hellen Flächen sind der bindende Fall, nicht Weiß.
     */
    --color-green: #1c7d45;          /* Hofgrün — CTAs, Links, Akzente */
    --color-green-dark: #166234;     /* Tiefes Waldgrün — Hover-Zustand */
    --color-green-soft: #f2f7f3;     /* Zarter Grünschleier — Füllung des Logo-Kreises */
    --color-near-black: #2a2c2b;     /* Überschriften, Footer, Tabellenkopf */

    /* --- Farben: Text ---------------------------------------------------
     *
     * Nachgerechnet am 03.08.2026 (offene-punkte.md Punkt 15). Der Handover
     * sah vier Graustufen vor — #555755, #8a8c89, #6d6f6d, #a8aaa7 —, aber
     * **drei davon fallen bei WCAG AA durch**: #8a8c89 erreicht auf Weiß nur
     * 3,39:1 und auf dem Naturton 3,09:1, #a8aaa7 sogar nur 2,34:1. Verlangt
     * sind 4,5:1 für normalen Text.
     *
     * Vier Stufen sind bei AA nicht zu halten: der Spielraum zwischen 4,5:1 und
     * dem Fließtext (7,29:1) reicht dafür nicht. Es bleiben **zwei** Graustufen;
     * die Abstufung darunter macht das Design ohnehin über Größe und Gewicht
     * (Labels 10,5 px gesperrt, Hilfstexte 12,5 px). `--color-text-meta` und
     * `--color-text-muted` zeigen deshalb jetzt auf denselben Wert — die
     * Token-Namen bleiben, damit an der Verwendungsstelle weiter lesbar ist,
     * was gemeint war.
     *
     * Die Werte gegen die drei hellen Flächen (Weiß / #faf8f3 / #f7f4ee):
     *   --color-text            7,29 / 6,87 / 6,64
     *   --color-text-secondary  5,07 / 4,77 / 4,62
     * ------------------------------------------------------------------- */
    --color-text: #555755;           /* Fließtext */
    --color-text-secondary: #6d6f6d; /* Sekundärtext, Labels, Metazeilen */
    --color-text-meta: var(--color-text-secondary);
    --color-text-muted: var(--color-text-secondary);

    /*
     * Sekundärtext auf dunklem Grund (Fußbereich, #2a2c2b) braucht die
     * Gegenrichtung: dort erreicht das dunkle Grau nur 2,72:1. Dieser Wert
     * kommt auf 6,58:1.
     */
    --color-text-on-dark: #b0b2af;

    /*
     * Und dasselbe für Grün auf dem dunklen Fußbereich: `--color-green` kommt
     * dort auf 4,43:1 und reißt die 4,5 damit um Haaresbreite. Ein Prozent
     * heller genügt (4,53:1) — der Unterschied ist mit dem Auge nicht zu sehen,
     * die Prüfung besteht er.
     */
    --color-green-on-dark: #25a75c;

    /* --- Farben: Flächen & Linien --------------------------------------- */
    --color-surface: #fff;
    --color-surface-alt: #faf8f3;    /* Seitenhintergrund / Zebra-Zeilen */
    --color-surface-natural: #f7f4ee;/* Naturton — Seitenköpfe, Wechselzonen */
    --color-border: #ece8df;
    --color-border-chip: #dcd7ca;

    /* --- Farben: Zustände ----------------------------------------------- */
    --color-free-bg: #eaf6ef;        /* „frei“-Badge */
    --color-free-text: #1c7d45;
    --color-booked-bg: #f8efe2;      /* „belegt“-Badge */
    /*
     * Eine Spur dunkler als der Handover-Wert #a06a2c: der kam auf seiner eigenen
     * Badge-Fläche nur auf 4,01:1. 93 % seiner Helligkeit genügen für 4,50:1 —
     * mit dem Auge kaum zu unterscheiden (offene-punkte.md Punkt 15).
     */
    --color-booked-text: #956329;
    --color-calendar-free-bg: #eaf6ef;
    --color-calendar-free-border: #bfe3cd; /* nur im Legenden-Muster, damit der helle Grün-Tint auf Weiß sichtbar bleibt */
    --color-calendar-booked-bg: #f0ded1;
    /*
     * Schraffur auf belegten Kalendertagen: das zweite visuelle Merkmal neben der
     * Farbe, das WCAG 1.4.1 verlangt (offene-punkte.md Punkt 15, nachgezogen am
     * 10.08.2026). Bewusst schwach — es soll den Tag kennzeichnen, nicht die Zahl
     * darin unlesbar machen. Der Ton ist `--color-booked-text` mit 22 % Deckung;
     * der Kontrast der Zahl (4,50:1) bleibt davon unberührt, weil die Schraffur
     * nur die Fläche zwischen den Ziffern trifft.
     */
    --color-calendar-booked-stripe: rgb(149 99 41 / 22%);
    /*
     * Die Nächte zwischen An- und Abreise im Buchungskalender (10.08.2026). Ein
     * kräftigeres Grün wäre von den gefüllten Rändern kaum zu unterscheiden, ein
     * blasseres nicht vom freien Tag daneben — dieser Ton liegt dazwischen und
     * trägt `--color-green-dark` mit 5,79:1 (ColorContrastTest).
     */
    --color-calendar-selected-soft: #cdeadb;
    --color-warning: #b0483a;        /* Warnstufe, z. B. Storno 90 % */

    /* --- Overlays & Schatten -------------------------------------------- */
    --overlay-hero: linear-gradient(180deg, rgba(20, 32, 24, .25), rgba(20, 32, 24, .55));
    --shadow-card-hover: 0 8px 28px rgba(30, 50, 38, .12);
    --shadow-floating: 0 12px 40px rgba(30, 50, 38, .18);

    /* Lightbox (nicht im Handover — an die Hero-Overlay-Palette angelehnt) */
    --overlay-backdrop: rgba(20, 32, 24, .82);
    --overlay-control: rgba(255, 255, 255, .16);
    --overlay-control-hover: rgba(255, 255, 255, .3);

    /* Foto-Platzhalter-Verläufe aus dem Handover (bis die echten Fotos da sind) */
    --gradient-hero-fallback: linear-gradient(160deg, #4a7358 0%, #7ea287 45%, #b9c9ad 100%);
    --gradient-natural: linear-gradient(150deg, #6e8f70, #a9bf9c);
    --gradient-photo-a: linear-gradient(160deg, #7d9c8b, #bccdb4);
    --gradient-photo-b: linear-gradient(160deg, #93ab86, #ccd8bd);
    /* Gedeckter Ton für „In Memoriam“ — dort bewusst ohne Grün-Akzent. */
    --gradient-memoriam: linear-gradient(160deg, #9aa89b, #c9d2c4);

    /* --- Typografie ----------------------------------------------------- */
    /* Beide Schriften sind selbst gehostet (assets/styles/fonts.css) — kein
       Request an Google. Die Fallbacks greifen nur noch, solange die woff2-Datei
       lädt oder wenn sie fehlschlägt. */
    --font-heading: 'Marcellus', Georgia, 'Times New Roman', serif;
    --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --font-size-h1: 54px;            /* Startseite */
    --font-size-h1-sub: 40px;        /* Unterseiten (40–42px) */
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-card-title: 20px;
    --font-size-lead: 16px;
    --font-size-body: 15.5px;
    --font-size-meta: 13.5px;
    --font-size-small: 12.5px;
    --font-size-eyebrow: 12px;
    --font-size-label: 10.5px;

    --line-height-heading: 1.15;
    --line-height-body: 1.75;
    --line-height-compact: 1.6;

    --letter-spacing-eyebrow: .26em;
    --letter-spacing-label: .08em;
    --letter-spacing-wordmark: .14em;

    /* --- Abstände (Basisschritte 8/10/12/16/24) -------------------------- */
    --space-1: 8px;
    --space-2: 10px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 56px;
    --space-9: 70px;

    --section-gap: 64px;             /* Sektionsabstand 56–70px */
    --page-head-padding: 52px;       /* Naturton-Kopfband */

    /* --- Raster --------------------------------------------------------- */
    --container-width: 1280px;
    --container-padding: 88px;       /* Seitenränder Desktop */
    --container-padding-header: 48px;
    --container-padding-mobile: 20px;
    --grid-gap: 24px;

    /* --- Radien --------------------------------------------------------- */
    --radius-card: 12px;
    --radius-card-lg: 14px;
    --radius-control: 9px;           /* Buttons, Formularfelder */
    --radius-day: 8px;               /* Kalender-Tageszelle */
    --radius-swatch: 4px;            /* Farbmuster in der Kalender-Legende */
    --radius-pill: 99px;

    /* --- Sonstiges ------------------------------------------------------ */
    --header-height: 84px;
    --sticky-offset: 110px;          /* sticky Anfrage-Box auf Detailseiten */
    --hero-height: 520px;
    --min-touch-target: 44px;
}