/* =============================================================
   DAZZLETIC – Design Tokens  (MOBILE FIRST – Basis = Mobile 428)
   Fonts werden vom Plugin „dazzletic-google-fonts" geladen
   (League Spartan + Lexend, 300–800, self-hosted) → kein @import.

   Struktur:
     01-tokens.css   ← diese Datei = Mobile-Basis
     02-layout.css   ← Section/Row/Column-Klassen
     03-portrait.css ← @min-width 481   (überschreibt Tokens)
     04-landscape.css← @min-width 769
     05-desktop.css  ← @min-width 1025
   Breakpoints entsprechen den Styleguide-Frames 428/768/1024/1512.
   ============================================================= */
:root {

  /* ---------- FARBEN ---------- */
  --c-black:         #000000;
  --c-white:         #FFFFFF;
  --c-green:         #8FF886;   /* Brand / Akzent */
  --c-green-light:   #D5FFD1;   /* grüne Card-BG */
  --c-green-tint:    #FAFFFA;   /* Section-BG hell */
  --c-purple:        #9747FF;   /* Akzent */
  --c-purple-credit: #903DFC;   /* Credits-Unterstrich */
  --c-purple-tint:   #FBF8FF;   /* BG hell */
  --c-orange:        #FF5E18;   /* Highlight / Werbung */
  --c-gray-1:        #8A8989;   /* Text sekundär */
  --c-gray-2:        #8A8787;   /* Text sekundär */
  --c-gray-3:        #A9A9A9;   /* Card-Rahmen / Placeholder */
  --c-neutral-1:     #C4C4C4;   /* Label-Rahmen (Weight 1) */
  --c-neutral-2:     #E4E4E4;   /* Label-BG / Trenner */

  /* ---------- RADIEN ---------- */
  --r-label: 10px;
  --r-sm:    20px;
  --r-md:    30px;
  --r-pill:  50px;

  /* ---------- RAHMEN-STÄRKEN ---------- */
  --bw-1: 1px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* ---------- FONTS ---------- */
  --font-heading: "League Spartan", sans-serif;
  --font-body:    "Lexend", sans-serif;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

  /* ---------- ZEILENHÖHEN (Empfehlung – nicht im Styleguide) ---------- */
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1;

  /* ---------- CONTAINER ----------
     Content-Breite = Frame − 2×Gutter (ergibt sich automatisch):
     1512→1416 · 1024→976 · 768→720 · 428→396 */
  --container-max: 1416px;

  /* ---------- ABSTÄNDE  (Mobile-Basis) ---------- */
  --space-gutter:      16px;
  --space-section:     62px;
  --space-section-lg:  64px;
  --space-heading-gap: 20px;

  /* ---------- SCHRIFTGRÖSSEN  (Mobile-Basis) ---------- */
  --fs-h1-hero:          32px;  /* Lexend SemiBold  */
  --fs-h2-section:       24px;  /* Spartan SemiBold */
  --fs-h3-card:          15px;  /* Lexend SemiBold  */
  --fs-body:             18px;  /* Lexend Regular   */
  --fs-label-category:   13px;  /* Spartan SemiBold */
  --fs-credit-image:     11px;  /* Lexend Regular   */
  --fs-credit-article:   13px;  /* Spartan Light    */
  --fs-button-primary:   22px;  /* Spartan SemiBold */
  --fs-button-secondary: 18px;  /* Spartan Reg/Light*/
  --fs-page-title:       32px;  /* Spartan SemiBold */
  --fs-page-title-legal: 26px;  /* Spartan SemiBold */
}