:root {
    /* =======================
         🎨 Colors
    ======================= */
    --color-light-1: #F4F4F2;
    --color-light-2: #EFEFED;
    --color-light-3: #E6E6E3;
    --color-light-4: #DDDDDB;
    --color-light-5: #D6D6D3;
    --color-light-6: #CDCDCA;

    --color-dark-1: #C2C2BF;
    --color-dark-2: #AFAFAC;
    --color-dark-3: #80807E;
    --color-dark-4: #767674;
    --color-dark-5: #595957;
    --color-dark-6: #20201D;
    --color-dark-bg: #141414;

    --color-primary-1: #EBF2EC;
    --color-primary-2: #CCE7CF;
    --color-primary-3: #7DC58A;
    --color-primary-4: #00b34b; /* MAIN? */
    --color-primary-5: #008832;
    --color-primary-6: #007628;
    --color-primary-main: #00963F;
    --color-bg-primary-gradient: rgba(17, 40, 23, 1);
    
    --color-accent-main: #F1700D;
    --color-accent-2: #E56300;

    /* =======================
         ✍️ Typography
    ======================= */
    --font-heading: "Nunito Sans", sans-serif;
    --font-body: "Source Sans 3", sans-serif;
    
    --font-size-xs-fluid: clamp(1.4rem, 3.5vw, 1.5rem);
    --font-size-sm-fluid: clamp(1.6rem, 1vw, 1.8rem);
    --font-size-md-fluid: clamp(2rem, 3vw, 3.5rem); /* min, preferred, max */
    --font-size-lg-fluid: clamp(2rem, 6.5vw, 5rem); /* min, preferred, max */

    --font-size-xxs: 1.2rem; /* 12px; */
    --font-size-xs: 1.4rem; /* 14px; */
    --font-size-sm: 1.6rem; /* 16px; */
    --font-size-base: 1.8rem; /* 18px */
    --font-size-nav: 2rem; /* 20px */
    --font-size-md: 2.3rem; /* 26px */
    --font-size-lg: 4.2rem; /* 42px (Small-H2-Headings) */
    --font-size-xl: 5rem; /* 50px (H2-Headings) */
    --font-size-xxl: 7rem; /* 70px (Hero/Highlight) */

    --font-weight-light: 400;
    --font-weight-regular: 550;
    --font-weight-semibold: 630;
    --font-weight-bold: 690;
    --font-weight-extrabold: 750;

    --letter-spacing-sm: 0.25px;
    --letter-spacing-md: 0.5px;
    --letter-spacing-lg: 0.65px;

    --line-height-sm: 1.15;
    --line-height-md: 1.35;
    --line-height-lg: 1.55;

    /* =======================
        📐 Breakpoints
    ======================= */
    --bp-full-hd: 1920px; /* Full-HD & große Desktops */
    --bp-xxl: 1600px; /* Große Laptops/Desktops */
    --bp-xl: 1440px; /* Standard-Laptops */
    --bp-lg: 1280px; /* Kleine Laptops */
    --bp-md: 1024px; /* Große Tablets */
    --bp-sm: 767px; /* Kleine Tablets */
    --bp-xs: 480px; /* Smartphones */

    /* ===========================
        Container Variablen
    =========================== */
    --container-lg: 1360px; /* Hauptcontainer */
    --container-sm: 1140px; /* Etwas schmalerer Container */

    --container-padding: 15px; /* Seitenabstand Desktop */

    /* =======================
        📐 Spacing
    ======================= */
    --spacing-xxs: 0.5rem; /* 5px */
    --spacing-xs: 1.2rem; /* 12px */
    --spacing-font-base: var(--font-size-base);
    --spacing-sm: 2.1rem; /* 21px */
    --spacing-md: 2.6rem; /* 25px */ 
    --spacing-lg: 4.2rem; /* 40px - (bei 2-col - pad-l und pad-r) */
    --spacing-xl: 5.8rem; /* 58px */

    --spacing-section: 13.2rem;

    /* =======================
        🔘 Components
    ======================= */
    --border-radius-sm: 3px;
    --border-radius-md: 5px;
    --input-radius: 8px;

    --header-full-height: calc(var(--header-top-height) + var(--header-main-height) );
    --header-top-height: 50px;
    --header-main-height: 100px;

    --icon-size-lg: 35px;
    --icon-size-sm: 25px;

    /* =======================
        🌑 Schatten & Effekte
    ======================= */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.05); 
    --shadow-lg: 0px 8px 24px rgba(149, 157, 165, 0.2);

    --transition-short: all 0.15s ease;
    --transition-base: all 0.25s ease;
    --transition-long: all 0.45s ease;
}

@media screen and (max-width: 1599px) {
    :root {
        --header-top-height: 45px;
        --header-main-height: 85px;

        --spacing-section: 8.2rem;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --font-size-base: 1.7rem;
        --font-size-lg: 3.5rem;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --spacing-section: 5.4rem;
        --container-padding: 25px; /* Seitenabstand Mobile */
    }
}