/* ═══════════════════════════════════════════════════════════
   MUTWELLE DESIGN-TOKENS — Preset „Cobalt"
   Preset wechseln = nur diese Datei tauschen.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Farben */
  --cobalt:  #0B3BE8;   /* Markenfarbe, große Flächen */
  --ink:     #06124A;   /* Text, Footer, dunkle Sektionen */
  --aqua:    #45DCF5;   /* Akzente, Glitzern */
  --coral:   #FF5440;   /* CTAs, Momentum */
  --coral-2: #E03A26;   /* Koralle dunkel (Verläufe) */
  --sun:     #FFC24B;   /* Badges, sparsam */
  --cloud:   #F2FBFE;   /* Heller Grund */
  --white:   #FFFFFF;

  /* Typografie */
  --font: "Bricolage Grotesque", -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  --fs-hero: clamp(2.7rem, 8.5vw, 5.5rem);
  --fs-h2:   clamp(1.9rem, 5vw, 3.2rem);
  --fs-h3:   clamp(1.35rem, 2.6vw, 1.7rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: clamp(1rem, 1.1vw, 1.0625rem);

  /* Form */
  --r-capsule: 220px;
  --r-card: 26px;
  --r-pill: 999px;
  --maxw: 1160px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  /* Schatten */
  --shadow-card: 0 24px 60px rgba(11, 59, 232, 0.12);
  --shadow-cta: 0 16px 40px rgba(255, 84, 64, 0.35);
}