:root {
    /* --- logo color--- */
    --color-primary-blue: #004a80;
    /* Das kräftige Dunkelblau */
    --color-primary-green: #6aaa45;
    /* Das frische Blattgrün */

    /* --- Basic color --- */
    --color-text-main: #222222;
    /* Fast Schwarz für gute Lesbarkeit */
    --color-text-light: #f4f4f4;
    /* Helles Grau/Weiß für Text auf Blau */
    --color-bg-white: #ffffff;
    --color-bg-grey: #f0f2f5;
    /* Für Sektions-Hintergründe */

    /* --- font family --- */
    --roboto:'Roboto-Regular';
    --open-sans:'OpenSans-Regular';

    /* --- UI Helper --- */
    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.1);
    --radius-std: 8px;
    --spacing-unit: 16px;
    --main-unit:16px;
    --max-width-unit: 1920px;
    --font-h1: clamp(3.5rem, 6vw + 1rem, 6.0rem);
    --font-h2: clamp(2.5rem, 4vw + 1rem, 4.5rem);
    --font-xl: clamp(1.50rem, 2vw + 1rem, 2.50rem);
    --font-l: clamp(1.25rem, 1.5vw + 0.8rem, 1.75rem);
    --font-m: clamp(1.00rem, 1vw + 0.7rem, 1.25rem);
    --font-s: clamp(0.875rem, 0.5vw + 0.5rem, 1.00rem);
    --font-xs: clamp(0.75rem, 0.5vw + 0.25rem, 0.875rem);
    /* card-unit */
    --info-s: 160px;
    --info-m: 240px;
    --info-l: 320px;
    --info-xl: 420px;
}