/* =============================================================================
   DESIGN-TOKENS - DIE EVENTHANDWERKER
   Nur Werte, die tatsächlich verwendet werden.
   ============================================================================= */

:root {
    /* Farben (CI) */
    --farbe-rot: #bc2822;
    --farbe-rot-hover: #a52320;
    --farbe-rot-tief: #8c1620;
    --farbe-rot-rgb: 188 40 34;
    --farbe-grau: #3b3b3a;
    --farbe-grau-gedaempft: #5f5f5e;   /* Fließtext-Sekundärfarbe, 6:1 auf Weiß */
    --farbe-weiss: #ffffff;
    --farbe-weiss-gedaempft: rgb(255 255 255 / 0.7); /* Sekundärtext auf dunklem Grund (Footer, Modul-Karten) */
    --farbe-creme: #fafaf8;

    /* Dunkle Töne (Footer, Modul-Karten, Fehlerseite) */
    --farbe-nacht: #1a1a19;
    --farbe-nacht-2: #242423;
    --farbe-tinte: #0f0f0f;

    --farbe-linie: rgb(0 0 0 / 0.08);
    --farbe-linie-hell: rgb(255 255 255 / 0.12);

    --farbe-text: var(--farbe-grau);
    --farbe-hintergrund: var(--farbe-weiss);
    --farbe-flaeche: var(--farbe-weiss); /* Hintergrund von Sektionen, Karten, Feldern - im dunklen Partnershop dunkel (Partner::kopf) */
    --farbe-akzent: var(--farbe-rot);

    --gradient-rot: linear-gradient(135deg, var(--farbe-rot) 0%, var(--farbe-rot-tief) 100%);
    --gradient-nacht: linear-gradient(180deg, var(--farbe-tinte) 0%, #141413 100%);

    /* Typografie */
    --schrift: 'Inter', system-ui, -apple-system, sans-serif;
    --schrift-headlines: 'Montserrat', system-ui, -apple-system, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --text-3xl: clamp(1.75rem, 1.3rem + 2.25vw, 2.75rem);
    --text-4xl: clamp(2.25rem, 1.6rem + 3.25vw, 4rem);
    --text-5xl: clamp(2.5rem, 1.75rem + 3.75vw, 5rem);

    --lh-tight: 1.1;
    --lh-normal: 1.6;
    --lh-loose: 1.8;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900; /* Kennzahlen, 404-Ziffern (Montserrat, variable 100-900) */

    /* Überschriften in Montserrat: wie die Wortmarke im Logo - mittlere Stärke, enge Laufweite,
       immer Großbuchstaben (mit Bastian auf der Testseite abgeglichen, 2026-09-04) */
    --fw-headline: 500;
    --ls-headline: -0.1em;
    --ws-headline: 0.2em; /* Wortabstand: gleicht die enge Laufweite aus, damit Wörter getrennt bleiben */
    /* Versalien gehören zur Hausschrift. Ein Partnershop mit eigener Schrift setzt das auf "none" (Partner::kopf) */
    --schrift-gross: uppercase;

    /* Seitenverhältnis des Rahmens um ein Produktfoto. Ein Partnershop darf es ändern (Partner::kopf).
       Der Zuschnitt ist keine Wahl: Produktfotos werden immer ganz gezeigt (siehe .produkt-karte__bild). */
    --karten-format: 4 / 3;

    --ls-tight: -0.02em;
    --ls-wide: 0.05em;
    --ls-wider: 0.1em;

    /* Abstände */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    --sektion-padding: clamp(3.5rem, 8vw, 9rem);
    --container-max: 1320px;
    --container-padding: clamp(1rem, 4vw, 2rem);
    --header-hoehe: 4.5rem;

    /* Radien */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Übergänge (Hover, Zustände) */
    --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
    --transition-schnell: 150ms var(--ease);
    --transition-normal: 280ms var(--ease);
    --transition-langsam: 400ms var(--ease); /* Hover-Lift, Bild-Zoom, Overlays */

    /* Dauer von Keyframe-Animationen (Einblenden beim Laden und Scrollen) */
    --dauer-einblenden: 1s;    /* Hero-Inhalt */
    --dauer-reveal: 800ms;     /* Sektionsinhalte beim Scrollen */
    --dauer-puls: 2s;          /* Scroll-Hinweis */

    /* Schatten */
    --schatten-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 4px rgb(0 0 0 / 0.04);
    --schatten-md: 0 2px 4px rgb(0 0 0 / 0.02), 0 4px 8px rgb(0 0 0 / 0.04), 0 8px 16px rgb(0 0 0 / 0.04);
    --schatten-lg: 0 4px 8px rgb(0 0 0 / 0.02), 0 8px 16px rgb(0 0 0 / 0.04), 0 16px 32px rgb(0 0 0 / 0.06);
    --schatten-karte: 0 0 0 1px rgb(0 0 0 / 0.03), 0 2px 4px rgb(0 0 0 / 0.02), 0 12px 24px rgb(0 0 0 / 0.06);
    --schatten-karte-hover: 0 0 0 1px rgb(var(--farbe-rot-rgb) / 0.1), 0 4px 8px rgb(0 0 0 / 0.02), 0 24px 48px rgb(0 0 0 / 0.1);
    --schatten-rot: 0 2px 8px rgb(var(--farbe-rot-rgb) / 0.25), 0 8px 24px rgb(var(--farbe-rot-rgb) / 0.15);
    --schatten-rot-hover: 0 4px 12px rgb(var(--farbe-rot-rgb) / 0.3), 0 12px 32px rgb(var(--farbe-rot-rgb) / 0.2);
    /* Fokusring: weißer Innenring + roter Außenring, sichtbar auf hellem, dunklem und rotem Grund.
       Elemente mit eigenem box-shadow (Buttons, FAB, Slider-Pfeile) setzen ihn bei :focus-visible erneut. */
    --schatten-fokus: 0 0 0 2px var(--farbe-weiss), 0 0 0 5px var(--farbe-rot);

    /* Stapelreihenfolge */
    --z-header: 100;
    --z-merkliste: 110; /* Schublade über dem Header */
    --z-fab: 90;
    --z-skip-link: 1000;
}

@media (max-width: 48em) {
    :root {
        --header-hoehe: 3.5rem;
    }
}