:root {
    /* =======================
         🎨 Colors
    ======================= */

    --white:    #FFF;
    --light-1:  #F7F9F8;         /* Background */
    --light-2:  #F1F4F3;
    --light-3:  #E3E8E6;
    
    --black:    #000;
    --dark-1:   #666666;
    --dark-2:   #333333;
    --dark-3:   #1A1A1A;          /* Text */

    --primary-main: #21AC4F;    /* Brand Color */
    --primary-1:    #18823C;
    --primary-old:  #439C43;


    /* =======================
         ✍️ Typography
    ======================= */
    
    --font-heading: 'Roboto Condensed', sans-serif;
    --font-body: 'Roboto', sans-serif;

    --font-size-xxs: 1.4rem; /* 14px; */
    --font-size-xs: 1.5rem; /* 15px; */
    --font-size-base: 1.6rem; /* 16px */
    --font-size-sm: 1.8rem; /* 18px; */
    --font-size-md: 2rem; /* 20px (H3 - Kacheln) */
    --font-size-lg: 2.4rem; /* 24px (H3-Headings)*/
    --font-size-xl: 2.8rem; /* 28px (Small-H2-Headings) */
    --font-size-xxl: 3.6rem; /* 36px (H2-Headings) */
    --font-size-h1: 5.6rem; /* 56px (Hero/Highlight) */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --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;


    /* =======================
        📐 Spacing
    ======================= */
    
    --spacing-xxs: 0.5rem; /* 5px */
    --spacing-xs: 1rem; /* 10px */
    --spacing-font-base: var(--font-size-base);
    --spacing-sm: 2rem; /* 20px */
    --spacing-md: 2.8rem; /* 28px */ 
    --spacing-lg: 3.6rem; /* 36px */
    --spacing-xl: 5.2rem; /* 52px */
    --spacing-xxl: 6.8rem; /* 68px */

    --spacing-section: 12rem;


    /* =======================
        🔘 Components
    ======================= */
    
    --header-height: 100px;
    --logo-height: 55px;


    /* =======================
        🌑 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.4s ease;

    /* ===========================
        Container Variablen
    =========================== */
    
    --container-wide: 1560px; /* Hauptcontainer */
    --container-normal: 1300px; /* Etwas schmalerer Container */

}

@media screen and (max-width: 1599px) {
    :root {
        --spacing-section: 9rem;

        --font-size-h1: 4.8rem; /* 48px (Hero/Highlight) */

        --logo-height: 50px;
    }
}

@media screen and (max-width: 1399px) {
    :root {
        --logo-height: 50px;
    }
}

@media screen and (max-width: 1199px) {
    :root {
        --logo-height: 40px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --spacing-section: 6.5rem;
    }
}

@media screen and (max-width: 575px) {
    :root {
        --font-size-base: 1.4rem; /* 14px */

        --header-height: 90px;

        --logo-height: 35px;
    }
}