/* =====================================================================
   StieCon — CI Design Tokens (Single Source of Truth fürs Styling)
   Umgesetzte Handlungsempfehlungen aus Markendossier_Design-Styleguide:
   1) Blau normiert auf EINEN Wert (#0D2F70)
   2) Klares 4-stufiges Radius-System
   3) Weichere, ruhigere Schatten (statt hartem 0.5-Glow)
   4) Heebo als verbindliche Hausschrift (Rubik nur als Display-Akzent)
   ===================================================================== */
:root {
  /* --- Markenfarben (Kern) --- */
  --sc-blue:          #0D2F70;   /* Primär / Marke / Headlines / Flächen */
  --sc-blue-700:      #0a2557;   /* dunkler (Hover auf Blau) */
  --sc-blue-900:      #0F1319;   /* sehr dunkle Sektionen / Footer */
  --sc-gold:          #C6AD13;   /* CTA / Aktion */
  --sc-gold-hover:    #9D8912;   /* CTA Hover */
  --sc-ink:           #18171B;   /* Fließtext */
  --sc-white:         #FFFFFF;

  /* --- Sekundär / Funktion --- */
  --sc-indigo:        #5659C7;   /* Zweitakzent (sparsam, Verläufe) */
  --sc-gold-light:    #C8B274;
  --sc-success:       #14C943;
  --sc-error:         #FD0606;

  /* --- Neutrale --- */
  --sc-cream:         #FFFAF5;   /* sanfte Sektions-Hintergründe */
  --sc-grey-bg:       #F7F8FA;   /* Karten-Hintergründe */
  --sc-line:          #DCE3E7;   /* Hairlines / Trenner */
  --sc-grey-text:     #5C5A64;   /* Sekundärtext */
  --sc-grey-mute:     #8A8A93;

  /* --- Typografie --- */
  --sc-font:          "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --sc-font-display:  "Rubik", var(--sc-font);   /* nur Eyebrows/Display, sparsam */
  --sc-fw-body:       400;
  --sc-fw-medium:     500;
  --sc-fw-semibold:   600;
  --sc-fw-bold:       700;
  --sc-fw-black:      800;
  --sc-tracking-eyebrow: 0.14em;  /* Versalien-Eyebrows: bewusstes Stilmittel */

  /* Fluid Type-Scale (clamp) */
  --sc-fs-eyebrow:    .82rem;
  --sc-fs-body:       1.05rem;
  --sc-fs-lead:       clamp(1.1rem, 1.4vw, 1.3rem);
  --sc-fs-h3:         clamp(1.25rem, 2vw, 1.6rem);
  --sc-fs-h2:         clamp(1.8rem, 3.4vw, 2.8rem);
  --sc-fs-h1:         clamp(2.3rem, 5vw, 3.9rem);

  /* --- Form & Tiefe (Radius-System) --- */
  --sc-r-btn:         6px;    /* Buttons: leicht gerundet (premiumisiert ggü. 0px-Ist) */
  --sc-r-box:         10px;   /* Boxen / Inputs */
  --sc-r-card:        18px;   /* Feature-/Content-Cards */
  --sc-r-round:       999px;  /* Pills / Badges / Avatare */

  /* Weiche, abgestufte Schatten (ruhiger, hochwertiger) */
  --sc-shadow-xs:     0 1px 2px rgba(13,47,112,.06);
  --sc-shadow-sm:     0 4px 14px rgba(13,47,112,.08);
  --sc-shadow-md:     0 12px 30px rgba(13,47,112,.10);
  --sc-shadow-lg:     0 24px 60px rgba(13,47,112,.14);
  --sc-shadow-gold:   0 10px 26px rgba(198,173,19,.28);

  /* --- Layout --- */
  --sc-container:     1180px;
  --sc-container-narrow: 760px;
  --sc-gap:           clamp(1rem, 3vw, 2rem);
  --sc-section-y:     clamp(3.5rem, 8vw, 7rem);

  /* --- Verläufe --- */
  --sc-grad-blue:     linear-gradient(135deg, #0D2F70 0%, #14306e 55%, #283479 100%);
  --sc-grad-gold:     linear-gradient(135deg, #C6AD13 0%, #C8B274 100%);

  /* --- Motion --- */
  --sc-ease:          cubic-bezier(.22,.61,.36,1);
  --sc-dur:           .55s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sc-dur: .001s; }
}