/*
    Bueren / Design-Tokens
    ======================
    Enthält AUSSCHLIESSLICH CSS-Variablen (keine Selektoren mit Eigen-
    schaften) und bildet damit die gemeinsame Basis für alle übrigen
    CSS-Dateien dieser App. Werte stammen aus der Stitch-Designvorlage
    (siehe Bueren/input/DESIGN.md) – hier 1:1 als Variablen abgebildet,
    damit kein Hex-/Pixel-Wert doppelt im Code steht.

    Faustregel für neue Sektionen: ausschließlich diese Variablen
    referenzieren statt eigene Farb-/Abstandswerte zu erfinden. Fehlt ein
    Wert, hier ergänzen statt im Komponenten-CSS einen Hex-Code zu notieren.
*/

:root {
    /* --- Marken- & Akzentfarben --- */
    --farbe-primary: #242e57;             /* Tiefes Navy – Haupt-Markenfarbe (Flächen, Überschriften) */
    --farbe-on-primary: #ffffff;          /* Text/Icons auf primary-Flächen */
    --farbe-primary-fixed: #dde1ff;       /* Heller Lila-Ton – z. B. Hero-Badge-Hintergrund */
    --farbe-on-primary-fixed: #0d1841;    /* Text auf primary-fixed */
    --farbe-secondary: #1d70a9;           /* Akzent-Blau – Icons, Hover-Zustände */
    --farbe-secondary-fixed: #cee5ff;     /* Helles Blau – z. B. Kategorie-Label auf Bildern */

    /* --- Oberflächen, vom hellsten zum dunkelsten --- */
    --farbe-surface: #f8f9ff;                    /* Standard-Seitenhintergrund */
    --farbe-surface-container-low: #eff4ff;      /* Sektions-Hintergrund (z. B. Expertise) */
    --farbe-surface-container-lowest: #ffffff;   /* Karten-Hintergrund (heller als die Sektion) */
    --farbe-surface-container-highest: #d3e4fe;  /* Footer-Hintergrund */

    /* --- Text & Linien --- */
    --farbe-on-surface: #0b1c30;          /* Haupt-Textfarbe */
    --farbe-on-surface-variant: #45464e;  /* Gedämpfte Textfarbe (Fließtext, Meta-Infos) */
    --farbe-outline: #76767f;             /* Dezente Trennlinien/Zierelemente */
    --farbe-outline-variant: #c6c5d0;     /* Sehr helle Rahmen/Trennlinien, Strukturraster-Punkte */
    --farbe-weiss: #ffffff;

    /* --- Schrift (siehe DESIGN.md "typography": ausschließlich "Inter") --- */
    --schrift: 'Inter', 'Segoe UI', 'Trebuchet MS', sans-serif;

    /* --- Abstände: 8px-Basis-Raster, siehe DESIGN.md "spacing" --- */
    --gutter: 24px;            /* Abstand zwischen Grid-Spalten/Karten ("gutter") */
    --rand-mobil: 16px;        /* Seitenrand auf kleinen Bildschirmen ("margin-mobile") */
    --rand-desktop: 32px;      /* Seitenrand ab Tablet-Breite ("margin-desktop") */
    --container-max: 1280px;   /* Inhaltsbreite, entspricht max-w-[1280px] in der Vorlage */

    /* --- Rundung: DESIGN.md nennt "Soft" – minimale Eckenrundung (max. 8px) --- */
    --radius: 0.25rem;
    --radius-klein: 0.125rem;

    /* --- Wiederkehrende Übergangsdauer für Hover-/Scroll-Effekte --- */
    --uebergang: 200ms ease-in-out;

    /* --- Benutzerdefinierte Easing-Kurven (stärker als CSS-Standards) --- */
    --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);       /* Starkes ease-out: Einblendungen, Hover, Press-Feedback */
    --ease-morph: cubic-bezier(0.77, 0, 0.175, 1);    /* Starkes ease-in-out: Karussell, On-Screen-Bewegungen */

    /* --- Navigations-Höhe (für viewport-basierte Hero-Berechnung) --- */
    --nav-hoehe: 80px;

    /* --- Breakpoints als Referenz (DESIGN.md "Breakpoints"): 768px, 1280px --- */
}