/* ============================================================
   JULIA — Finanzberatung für Frauen
   Design Tokens · v2.0.0 · Mai 2026
   Quelle: design-tokens.json + Corporate-Design.html

   Zwei-Ebenen-System:
   - 60–70% Pastell-Hintergründe (Bühne)
   - 20–30% gesättigte Block-Akzente (Inhalt)
   - 5–15% Bauhaus-Block-Illustration (Signatur)
   - 5–10% Typografie (Schwarz + Marineblau)
   ============================================================ */

/* Self-hosted fonts — kein Google CDN, DSGVO-konform */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ArchivoBlack-Regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ArchivoBlack-Regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- 1. PASTELL-HINTERGRÜNDE (Ebene 1) ---------- */
  --bg-peach-cream: #FEF3E9;   /* Standard, wärmster Ton */
  --bg-soft-teal:   #C5E3E3;   /* Titel-/Hero-Hintergrund */
  --bg-soft-pink:   #FDEDEA;   /* Sanfte Kontrastfläche */
  --bg-warm-sand:   #FBE4C0;   /* Energiegeladene Sektionen */
  --bg-white:       #FFFFFF;   /* Datenfolien, formale Dokumente */

  /* ---------- 2. BLOCK-AKZENTE (Ebene 2 · 6 gleichberechtigt) ---------- */
  --acc-coral:      #F2494C;   /* Signal, Warnung, Wachrüttler */
  --acc-gold:       #F9AA19;   /* Energie, CTA */
  --acc-teal:       #66B2B0;   /* Ruhe, Vertrauen, positiv */
  --acc-navy:       #0A4054;   /* Kompetenz, Anker, Tiefe */
  --acc-coral-pink: #F39891;   /* Wärme, Nähe */
  --acc-peach:      #F9C996;   /* Optimismus, weiches Highlight */

  /* ---------- 3. TEXT ---------- */
  --text-primary:   #000000;   /* Headlines, Body */
  --text-emphasis:  #0A4054;   /* Pull-Quotes, Stat-Untertitel, Kernaussagen */
  --text-secondary: #555555;   /* Untertitel, Hilfstext */
  --text-muted:     #888888;   /* Quellen, Captions, Metadaten */
  --text-on-dark:   #FFFFFF;   /* Text auf Navy/Coral-Blöcken */

  /* ---------- 4. BORDERS ---------- */
  --border-subtle:  rgba(0,0,0,0.08);
  --border-default: #E7E6E6;
  --border-strong:  #000000;

  /* ---------- 5. TYPOGRAFIE ---------- */
  --font-display: "Archivo Black", "Arial Black", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-display-1: 64px;   /* Hero */
  --fs-display-2: 48px;   /* Sektion-Display */
  --fs-h1:        36px;
  --fs-h2:        22px;
  --fs-h3:        18px;
  --fs-pull:      22px;   /* Pull-Quote, Marineblau */
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   11px;

  --fw-display:   900;
  --fw-body:      400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.7;

  --ls-tight:     -1px;
  --ls-normal:    0;
  --ls-wide:      2px;
  --ls-wider:     4px;

  /* ---------- 6. SPACING ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- 7. RADIUS ---------- */
  --radius-none: 0;
  --radius-sm:   4px;     /* Tags, Badges */
  --radius-md:   10px;    /* Karten, Buttons */
  --radius-lg:   12px;    /* Hervorgehoben */
  --radius-xl:   16px;    /* Große Container */
  --radius-full: 9999px;  /* Pills, runde Icons */

  /* ---------- 8. SHADOWS (dezent — keine Glow, keine Tiefe-Effekte) ---------- */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-lift: 0 10px 30px rgba(0,0,0,0.10);

  /* ---------- 9. LAYOUT ---------- */
  --max-width:   1200px;
  --pad-section: 60px;
  --pad-section-mobile: 32px;

  --bp-mobile:   640px;
  --bp-tablet:   900px;
  --bp-desktop:  1200px;

  /* ---------- 10. MOTION (max. 200ms, prefers-reduced-motion respektiert) ---------- */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;

  /* ---------- 11. FOCUS ---------- */
  --focus-ring:        0 0 0 3px rgba(10, 64, 84, 0.35);   /* Marineblau-Halo */
  --focus-ring-warm:   0 0 0 3px rgba(249, 170, 25, 0.55); /* Gold-Halo auf Navy */
  --focus-outline:     2px solid var(--acc-navy);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}