:root {

  /* ==========================================
     FARBEN — Hintergründe
  ========================================== */

  --bg-primary:       #FFFFFF;
  --bg-secondary:     #E4E9EB;
  --bg-dark:          #9BAFB5;
  --bg-special:       #FCF3EC;
  --bg-dark-section:  #1C2128;

  /* ==========================================
     FARBEN — Text
  ========================================== */

  --text-primary:     #747474;
  --text-black:       #181B20;
  --text-white:       #FCF3EC;

  /* ==========================================
     FARBEN — CTAs
  ========================================== */

  --cta-primary:        #36648B;
  --cta-primary-hover:  #E7C8BB;
  --cta-secondary:      #96A8AF;

  /* ==========================================
     TYPOGRAFIE — Familien
  ========================================== */

  --font-serif: "Cormorant Garamond", serif;
  --font-sans:  "Inter", sans-serif;

  /* ==========================================
     TYPOGRAFIE — Skala
     Verwendung:
     --text-xs    → Labels, Eyebrows, Microcopy
     --text-sm    → Captions, Credentials
     --text-base  → Fließtext überall
     --text-md    → Lead-Text, Zitate klein
     --text-lg    → Subheadlines, Zitate groß
     --text-xl    → H2, Sektions-Headlines
     --text-2xl   → H1 Sections
     --text-hero  → H1 Hero
  ========================================== */

  --text-xs:    clamp(0.6875rem, 0.9vw,  0.8125rem);
  --text-sm:    clamp(0.8125rem, 1.1vw,  0.9375rem);
  --text-base:  clamp(0.9375rem, 1.4vw,  1.0625rem);
  --text-md:    clamp(1.125rem,  2vw,    1.375rem);
  --text-lg:    clamp(1.375rem,  2.5vw,  1.875rem);
  --text-xl:    clamp(1.5rem,    3vw,    2.25rem);
  --text-2xl:   clamp(1.75rem,   3.5vw,  2.75rem);
  --text-hero:  clamp(1.75rem,   3.5vw,  2.75rem);

  /* ==========================================
     SPACING — Skala
     Verwendung:
     --space-2xs  → 0.5–0.75rem  Sehr enger Abstand
     --space-xs   → 0.75–1rem    Enger Abstand
     --space-sm   → 1–1.5rem     Kleiner Abstand
     --space-md   → 1.5–2.5rem   Mittlerer Abstand
     --space-lg   → 2–4rem       Großer Abstand
     --space-xl   → 4–7rem       Section-intern
     --space-2xl  → 6–10rem      Section-Padding
  ========================================== */

  --space-2xs:  clamp(0.5rem,  0.4rem  + 0.2vw, 0.75rem);
  --space-xs:   clamp(0.75rem, 0.6rem  + 0.4vw, 1rem);
  --space-sm:   clamp(1rem,    0.8rem  + 0.8vw, 1.5rem);
  --space-md:   clamp(1.5rem,  1.2rem  + 1vw,   2.5rem);
  --space-lg:   clamp(2rem,    1.5rem  + 2vw,   4rem);
  --space-xl:   clamp(4rem,    3rem    + 3vw,   7rem);
  --space-2xl:  clamp(6rem,    5rem    + 5vw,   10rem);

  /* ==========================================
     LAYOUT
  ========================================== */

  --container:    1320px;
  --radius-sm:    12px;
  --radius-md:    20px;
  --radius-lg:    40px;

  /* ==========================================
     EFFEKTE
  ========================================== */

  --shadow-soft:      0 12px 40px rgba(24, 27, 32, 0.04);
  --shadow-card:      0 4px 20px rgba(24, 27, 32, 0.06);

  --transition-fast:  220ms ease;
  --transition-base:  480ms cubic-bezier(.16, 1, .3, 1);

}