/* ============================================================
   DESIGN TOKENS — talents Newsletter (wirtschaftsprüfer.de)
   ------------------------------------------------------------
   Single source of truth: colors, type, spacing, layout.
   Jede Komponente liest aus diesen Variablen — Werte hier
   ändern, und die ganze Seite folgt.
   ============================================================ */

:root {
  /* ---------- FARBEN ---------- */
  --brand:        #D32566;   /* talents-Rot (Magenta) */
  --brand-dark:   #B81E58;   /* Hover / Active */

  --ink:          #222222;   /* Headlines */
  --ink-soft:     #555555;   /* Fließtexte */
  --ink-muted:    #727272;   /* Akzente */
  --ink-faint:    #767676;   /* helle Akzente, Platzhalter */

  --white:        #FFFFFF;
  --line:         #D4D4D4;   /* Borders / Trenner */

  --surface:      #FFFFFF;
  --surface-soft: #F9F9F9;

  /* ---------- TYPOGRAFIE ---------- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Display-Größen */
  --fs-display:   110px;   /* h1 / h2 */
  --lh-display:   120px;   /* nur h1 — h2 läuft auf 1 */
  --fs-h3:        48px;
  --fs-h4:        32px;    /* Aufzählungs-Headlines */
  --lh-h4:        40px;
  --fs-num:       96px;    /* 1. 2. 3. */

  /* Text-Größen */
  --fs-lead:      24px;
  --lh-lead:      32px;
  --fs-body:      17px;
  --lh-body:      24px;
  --fs-sm:        15px;

  --fs-countdown:       48px;
  --fs-countdown-title: 40px;

  /* ---------- LAYOUT ---------- */
  --container:      1260px;   /* Standard-Content */
  --container-hero: 1440px;   /* Hero-Content */
  --container-px:   32px;     /* seitliche Luft */

  --section-py:  120px;
  --nav-px:      32px;

  /* Bildspalte in „Das ist talents". Die Aufzählung darunter setzt
     ihre Textspalte auf denselben Wert — dadurch steht ihr Text an
     der linken Bildkante. Beide Raster enden rechts am Container,
     also genügt die gleiche letzte Spalte; die Abstände davor
     dürfen sich unterscheiden. */
  --about-media: 589px;

  /* Nav — zweiter Wert je Größe gilt im gescrollten Zustand */
  --nav-py:         16px;
  --nav-py-sm:      12px;
  --nav-logo-h:     120px;
  --nav-logo-h-sm:  88px;
  --nav-talents-w:     160px;
  --nav-talents-w-sm:  118px;
  --nav-divider-h:     96px;
  --nav-divider-h-sm:  70px;
  --nav-fade:          40px;   /* Auslauf des Nav-Hintergrunds */
  /* Hintergrund der Leiste — heller Standard, dunkle Variante für
     Sektionen mit [data-nav-theme="brand"] */
  --nav-veil:        rgba(255, 255, 255, 0.88);
  --nav-veil-brand:  rgba(211, 37, 102, 0.88);
  --nav-h:       152px;   /* 2 × --nav-py + --nav-logo-h */

  /* Hero-Hintergrund */
  --hero-glow-inner: rgba(240, 245, 248, 0.15);   /* #F0F5F8 @ 15 % */
  --hero-glow-outer: rgba(201, 215, 233, 0.15);   /* #C9D7E9 @ 15 % */
  --hero-veil-h:     490px;                       /* weißer Verlauf oben */

  /* Countdown-Box ragt zur Hälfte aus dem Hero heraus */
  --countdown-h:       188px;
  --countdown-overlap: 94px;

  /* Karten-Stapel „Dein Einstieg" */
  --stack-top:       120px;   /* Klebepunkt der ersten Karte */
  --stack-step:      32px;    /* sichtbarer Rand je Karte darunter */
  --pathcard-media:  556px;

  /* Zeitstrahl „Der Weg zum 15.09." */
  --step-w:    300px;
  --step-gap:  160px;
  --dot-size:  24px;

  /* ---------- RADIEN ---------- */
  --radius-xs:    8px;
  --radius-sm:   12px;
  --radius:      20px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---------- SCHATTEN ---------- */
  --shadow-card: 0 8px 16px 0 rgba(0, 0, 0, 0.08);

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(0.2, 0.7, 0.25, 1);
  --dur-fast:  150ms;
  --dur:       260ms;
  --dur-slow:  600ms;

  /* ---------- Z-LAYER ---------- */
  --z-phone:    1;
  --z-countdown: 3;
  --z-nav:      50;
  --z-modal:    90;
}