/* Design-Tokens — Single Source of Truth für Farben, Spacing, Typografie */
:root {
  /* Primärfarben — Toni-Becker-Markennavy (wie tonibecker.de), bewusst abweichend von SIGNAL-IDUNA-Blau (#1A3691) */
  --c-primary:        #1A2E4A;
  --c-primary-soft:   #44515A;
  --c-primary-50:     #F0F1F4;
  --c-primary-100:    #dde0e6;

  /* Sekundärakzent — SI-Türkis, für Highlights & Sicherheitsbudget */
  --c-teal:           #00ADBB;
  --c-teal-soft:      #D6F1F4;
  --c-teal-deep:      #007A85;

  /* CTA-Akzent — warmes Gold-Gelb (Conversion-Psychologie) */
  --c-accent:         #ffc933;
  --c-accent-soft:    #ffe199;
  --c-accent-deep:    #d99e00;

  /* Neutrale */
  --c-bg:             #fafbfd;
  --c-bg-alt:         #f1f4fa;
  --c-surface:        #ffffff;
  --c-ink:            #131b2e;
  --c-ink-soft:       #2a3550;
  --c-muted:          #5b6680;
  --c-muted-soft:     #8b94aa;
  --c-line:           #e3e8f1;

  /* Status */
  --c-success:        #16a34a;
  --c-success-soft:   #dcfce7;
  --c-warn:           #f59e0b;
  --c-danger:         #dc2626;
  --c-danger-soft:    #fee2e2;

  /* Schatten */
  --shadow-xs: 0 1px 2px rgba(26, 46, 74, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 46, 74, 0.08);
  --shadow-md: 0 8px 24px rgba(26, 46, 74, 0.10);
  --shadow-lg: 0 16px 48px rgba(26, 46, 74, 0.14);
  --shadow-cta: 0 8px 24px rgba(255, 201, 51, 0.36);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Spacing (4-Punkt-Raster) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Typografie */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", var(--font-sans);

  --fs-xs:   0.8125rem;   /* 13 */
  --fs-sm:   0.9375rem;   /* 15 */
  --fs-base: 1.0625rem;   /* 17 */
  --fs-lg:   1.1875rem;   /* 19 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  2rem;        /* 32 */
  --fs-3xl:  2.5rem;      /* 40 */
  --fs-4xl:  3.25rem;     /* 52 */
  --fs-5xl:  4rem;        /* 64 */

  --lh-tight: 1.12;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-relax: 1.7;

  /* Layout */
  --container: 1200px;
  --container-narrow: 920px;
  --header-h: 40px;
  --section-py: clamp(64px, 9vw, 120px);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --fast: 150ms;
  --med:  280ms;
  --slow: 540ms;
}

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