/* ============================================================================
   MCLeut · Design Tokens  (tokens.css)
   ----------------------------------------------------------------------------
   Zentrale CSS Custom Properties. Build-frei, additiv.
   Wird in diesem Stand NUR von neuen Greenfield-Seiten (/ki, /holding,
   /empfehlung/*, später /rechner) eingebunden – bestehende Seiten bleiben
   unangetastet.

   Kanonischer Blauton = #123F7A (bereits in /pkv, /immo, /tools aktiv).
   Legacy #0563bb und AVlytics #00428A werden in eigenen späteren Runs
   migriert, NICHT hier.

   Designrichtung: seriös, modern, hochwertig, Finanz-/Unternehmer-tauglich.
   Orange sparsam, kein aggressiver Glow, kompakte Sektionen, Sans-Serif.
   ============================================================================ */

/* ---------- Web-Font · Plus Jakarta Sans (selbst gehostet, DSGVO-konform) ----
   Ersetzt die render-blockierende Google-Fonts-Einbindung. woff2 latin-Subset
   (U+0000-00FF deckt ä ö ü ß), genutzte Gewichte 400/500/600/700/800.
   font-display: swap → kein FOIT, kein Font-CLS. Dateien: /assets/fonts/. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-400.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-500.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-600.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-700.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-800.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 {

  /* ---------- Farbe · Primär (Blau) ---------------------------------------- */
  --primary-50:  #EEF3FA;
  --primary-100: #D7E2F1;
  --primary-200: #AFC5E3;
  --primary-300: #87A8D5;
  --primary-400: #5F8BC7;
  --primary-500: #376EB9;
  --primary-600: #123F7A;
  --primary-700: #0E3260;
  --primary-800: #0A2447;
  --primary-900: #0A1930;

  --primary:      #123F7A;   /* Marken-Primärblau (= primary-600) */
  --primary-deep: #0A1930;   /* Navy / Sekundärblau (= primary-900) */

  /* ---------- Farbe · Akzent (Orange, entschärft) -------------------------- */
  --accent-soft: #FDF1E7;    /* sehr dezente Fläche / Tint */
  --accent-100:  #FBE0CB;
  --accent:      #EA7A25;    /* Markenakzent – nur sparsam (Links, Mini-Highlights) */
  --accent-strong: #C75F14;  /* DEFAULT-CTA-Füllung – ruhig, ohne Glow */
  --accent-700:  #9A4B10;

  /* ---------- Farbe · Neutral / Grau --------------------------------------- */
  --gray-50:  #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E6EAF0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #5A6B82;
  --gray-600: #475569;
  --gray-700: #384356;
  --gray-800: #1E293B;
  --gray-900: #0A1930;

  /* ---------- Flächen / Hintergründe --------------------------------------- */
  --surface:    #FFFFFF;
  --bg:         #FFFFFF;
  --bg-subtle:  #F8F9FA;
  --bg-mist:    #F5F5F7;
  --bg-dark:    var(--primary-900);

  /* ---------- Border ------------------------------------------------------- */
  --border:        rgba(18, 63, 122, 0.10);
  --border-strong: #E6EAF0;
  --border-dark:   rgba(255, 255, 255, 0.12);

  /* ---------- Text --------------------------------------------------------- */
  --text:            #0A1930;
  --text-muted:      #5A6B82;
  --text-soft:       #7A879B;
  --text-on-primary: #FFFFFF;
  --text-on-accent:  #FFFFFF;
  --text-on-dark:    #E7ECF4;
  --link:            #123F7A;
  --link-hover:      #0E3260;

  /* ---------- Typografie (Sans-Serif – keine Serife) ----------------------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);

  --fs-display: clamp(2.4rem, 1.6rem + 3.2vw, 3.75rem);
  --fs-h1:      clamp(2rem,   1.5rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;

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

  /* ---------- Spacing-Skala (4px-Basis) ------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Layout / Container ------------------------------------------- */
  --container:        1200px;
  --container-narrow: 768px;
  --container-wide:   1320px;
  --gutter:           clamp(1rem, 4vw, 2rem);

  /* ---------- Section-Abstände (kompakt – KEIN 100vh / keine Vollflächen) -- */
  --section-y:    clamp(3.5rem, 7vw, 6rem);
  --section-y-sm: clamp(2.5rem, 5vw, 4rem);
  --section-y-lg: clamp(4.5rem, 9vw, 7.5rem);

  /* ---------- Radius ------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ---------- Schatten (dezent – kein aggressiver Glow) -------------------- */
  --shadow-soft:  0 4px 20px -6px rgba(18, 63, 122, 0.10);
  --shadow-card:  0 18px 50px -22px rgba(18, 63, 122, 0.16);
  --shadow-focus: 0 0 0 3px rgba(18, 63, 122, 0.25);

  /* ---------- Motion ------------------------------------------------------- */
  --transition:      0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 0.15s ease;

  /* ---------- Button-Grundwerte ------------------------------------------- */
  --btn-radius:      var(--radius-pill);
  --btn-pad-y:       0.85rem;
  --btn-pad-x:       1.6rem;
  --btn-min-h:       48px;
  --btn-font-size:   0.95rem;
  --btn-font-weight: var(--fw-semibold);

  /* ---------- Card-Grundwerte --------------------------------------------- */
  --card-bg:     var(--surface);
  --card-radius: var(--radius-lg);
  --card-pad:    clamp(1.25rem, 3vw, 2rem);
  --card-border: 1px solid var(--border);
  --card-shadow: var(--shadow-soft);
}