/* =========================================================
   DESIGN TOKENS — marketingwerk Website
   CI (live-verifiziert, marketingwerk.at): Blau #3378EC (CTAs),
   Gold #FEB50C (nur Akzent), Navy #0A1C3A, Light-BG #F5F8FB, Inter.
   Display-Ebene: Inter Tight (engere Grotesk fuer H1/H2/Zahlen).
   ========================================================= */

:root {
  /* ---------- Brand: Blau (Vertrauen, Klarheit, CTA) ---------- */
  --blue-50:   #ECF2FE;
  --blue-100:  #D6E4FD;
  --blue-200:  #AEC8FB;
  --blue-300:  #7FA6F6;
  --blue-400:  #5187F1;
  --blue-500:  #3378EC;   /* Brand-Primaer (marketingwerk-Blau) */
  --blue-600:  #2462D6;   /* CTA-Flaeche (AA-konform mit Weiss) */
  --blue-700:  #1B4FBE;   /* Links/Text auf Hell */
  --blue-800:  #163F97;
  --blue-900:  #0F2E70;

  /* ---------- Accent: Gold (NUR Highlight: Garantie, Sterne, Einheiten) ---------- */
  --gold-300:  #FFD873;
  --gold-400:  #FEC43E;   /* Gold auf Dunkel */
  --gold-500:  #FEB50C;   /* marketingwerk-Gold */
  --gold-600:  #E9A300;
  --gold-text: #8A6100;   /* Gold als TEXT auf hellen Flaechen (AA, mit Puffer) */
  --gold-deep: #B57E00;   /* Sterne auf hellen Karten (Non-Text-Kontrast >= 3:1) */
  --gold-soft: rgba(254, 181, 12, 0.16);

  /* ---------- Navy / Neutrals ---------- */
  --navy-950:  #071528;   /* Footer (tiefste Stufe) */
  --navy-900:  #0A1C3A;   /* CI-Navy — dunkle Sektionen, Headings */
  --navy-800:  #10284D;   /* erhoehte Flaechen auf Navy */
  --navy-700:  #16335F;

  --slate-700: #2E3E59;   /* Fliesstext */
  --slate-500: #5A6A85;   /* Sekundaertext (AA auf Paper) */
  --slate-400: #8B99B0;   /* nur fuer Deko, NICHT fuer Text auf Hell */

  --line:      #DCE6F2;
  --line-soft: #EAF1F9;

  --paper:     #F5F8FB;   /* CI Light-BG */
  --surface:   #FFFFFF;
  --surface-2: #EDF3FA;   /* alternierende Sektionen (spuerbar getoent) */

  --white:     #FFFFFF;

  /* Text auf Navy */
  --on-dark:       rgba(255, 255, 255, 0.86);
  --on-dark-muted: rgba(255, 255, 255, 0.64);
  --on-dark-line:  rgba(255, 255, 255, 0.13);

  /* ---------- Funktionsfarben ---------- */
  --success: #1E9E6A;
  --danger:  #D2553F;

  /* ---------- Kanal-Farben (Hero-Kacheln) ---------- */
  --ch-facebook: #1877F2;
  --ch-linkedin: #0A66C2;
  --ch-tiktok:   #111111;
  --ch-indeed:   #2557A7;

  /* ---------- Semantische Aliase ---------- */
  --brand:        var(--blue-500);
  --brand-strong: var(--blue-700);
  --accent:       var(--gold-500);
  --text:         var(--slate-700);
  --text-strong:  var(--navy-900);
  --text-muted:   var(--slate-500);
  --bg:           var(--paper);
  --bg-dark:      var(--navy-900);

  /* ---------- Typografie ---------- */
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Fluid Type-Scale */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.3rem + 0.9vw, 1.95rem);
  --fs-3xl:  clamp(1.9rem, 1.45rem + 1.8vw, 2.6rem);   /* Section-Titel */
  --fs-4xl:  clamp(2.2rem, 1.65rem + 1.9vw, 3rem);     /* Hero-H1 (48px — wie Live-Site) */
  --fs-num:  clamp(2.8rem, 2.1rem + 2.6vw, 4.2rem);    /* Display-Zahlen */

  --lh-tight:  1.06;
  --lh-snug:   1.25;
  --lh-normal: 1.6;

  /* ---------- Spacing (4-pt-Grid) ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(3.5rem, 2.5rem + 3.4vw, 6.5rem);

  /* ---------- Layout ---------- */
  --container:        1180px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* ---------- Radii ---------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-tile: 16px;
  --radius-pill: 999px;

  /* ---------- Shadows (navy-getoent) ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 28, 58, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 28, 58, 0.08);
  --shadow-md: 0 10px 30px -12px rgba(10, 28, 58, 0.18);
  --shadow-lg: 0 24px 60px -18px rgba(10, 28, 58, 0.30);
  --shadow-cta: 0 8px 20px -8px rgba(36, 98, 214, 0.35);

  /* ---------- Verlaeufe (bewusst nur 2 Einsatzorte: CTA + Step-Nummern) ---------- */
  --grad-cta: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  --grad-cta-hover: linear-gradient(135deg, var(--blue-700), var(--blue-800));

  /* ---------- Motion ---------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* ---------- Sonstiges ---------- */
  --header-h: 76px;
}