:root {
    /* =======================
         🎨 Colors
    ======================= */
    /* --color-secondary: rgba(57, 91, 100, 1); */    /* #395B64: Sekundäre Markenfarbe */
    /* --color-accent: rgba(75, 122, 133, 1); */       /* #7C2A33: Akzentfarbe; */

    --white:    #FFF;
    /* --light-1:  #F2F4F1; */     /* Haupt-Hintergrund */
    /* --light-2:  #E6E9E4; */     /* Cards, Sektionen */
    /* --light-3:  #D6DBD3; */     /* Linien, subtile Flächen, Abrenzungen */

    --light-1:  #F6F2EA;     /* Haupt-Hintergrund */
    --light-2:  #EDE7DC;     /* Cards, Sektionen */
    --light-3:  #DDD4C6;     /* Linien, subtile Flächen, Abrenzungen */

    --black:    #000;
    --dark-1:   #1C1E1B;      /* Text, Footer */
    --dark-2:   #2A2D29;      /* Secondary Text (Meta, Labels) */
    --dark-3:   #3A3F39;      /* Borders auf Dark BG, Platzhalter, "unwichtiger" Text */

    /* Primary ist für Aktionen & Marke - nicht für Deko - nur dort, wo ich Brand haben will */
    --primary-1: #7C2A33;   /* Brand / Primary-CTAs, Links, aktive Navigation */
    --primary-2: #9A3A45;   /* Hover, Highlights */
    --primary-3: #5E1F26;   /* Dark Accent, Active/Pressed, Fokus-Rahmen auf dunklem Grund, wichtige kleine Icons */

    /* Accent ist "Wärme" & "Details" - nicht für Haupt-CTAs oder große Flächen. Soll unterstützen, nicht führen. */
    --accent-1: #A89F8A;    /* Warmes Atelier-Beige */
    --accent-2: #6F7C6A;    /* Staubiges Salbei-Grün */
    --accent-3: #C4B2A3;    /* Warmes Nude mit Tiefe */

    --ornament-line: rgba(124, 42, 51, 0.42);
    --ornament-line-dark: rgba(246, 242, 234, 0.58);

    /* =======================
         ✍️ Typography
    ======================= */
    --font-heading: "ivyora-display", serif;
    --font-body: "Work Sans", sans-serif; 
    /* --font-body: "Cormorant Garamond"; */

    --font-size-xxs:    1.3rem; /* 13px; */
    --font-size-xs:     1.5rem; /* 15px; */
    --font-size-base:   1.7rem; /* 17px */
    --font-size-sm:     2.1rem; /* 21px */
    --font-size-md:     2.5rem; /* 25px */
    --font-size-md-2:   3.4rem; /* 34px  */
    --font-size-lg:     4.1rem; /* 41px (Small-H2-Headings) */
    --font-size-xl:     4.9rem; /* 48px (H2-Headings) */
    --font-size-xxl:    5.8rem; /* 65px (Hero/Highlight) */
    --font-size-h1:    6.4rem; /* 64px (Hero/Highlight) */

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

    --letter-spacing-sm:    0.25px;
    --letter-spacing-md:    0.5px;
    --letter-spacing-md-2:  1.5px;
    --letter-spacing-lg:    2.25px;

    --line-height-sm: 1.2;
    --line-height-md: 1.4;
    --line-height-lg: 1.65;

    /* =======================
        📐 Spacing
    ======================= */
    --spacing-xxs: 0.5rem; /* 5px */
    --spacing-xs: .9rem; /* 9px */
    --spacing-font-base: var(--font-size-base); /* 17px */
    --spacing-sm: 2.1rem; /* 21px */ 
    --spacing-md: 2.5rem; /* 25px */ 
    --spacing-lg: 3.2rem; /* 32px */ 
    --spacing-xl: 4.1rem; /* 41px - (bei 2-col - pad-l und pad-r) */
    --spacing-xxl: 5.7rem; /* 57px */

    --spacing-section: 11.2rem;

    /* =======================
        📐 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 */

    /* =======================
        🔘 Components
    ======================= */
    --border-radius-sm: 2px;
    --border-radius-md: 6px;
    --border-radius-lg: 10px;

    --input-radius: var(--border-radius-md);

    --header-height: 115px;

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

    /* =======================
        🌑 Schatten & Effekte
    ======================= */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);

    --transition-short: all 0.15s ease;
    --transition-base: all 0.3s ease;
    --transition-long: all 0.4s ease;
}

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

@media screen and (max-width: 1024px) {
    :root {
        --header-height: 100px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --font-size-base: 1.5rem;

        --spacing-section: 6rem;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --container-padding: 25px; /* Seitenabstand Mobile */
        --header-height: 90px;
    }
}