/* ============================================================
   N-M Marketing — Website Tokens
   Quelle: ../../brand/tokens.css · Herleitung: ../../brand/brand-spec.md
   Erweitert um fluide Typo-Skala und Layout-Maße für die Website.
   ============================================================ */

/* ---------- Schriften: self-hosted, keine externen Requests ---------- */
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Marke (gemessen) ---------- */
  --brand-blue: #0077B5;
  --brand-grey: #717171;

  /* ---------- Blau (OKLCH-gerechnet, H 242.3°) ---------- */
  --blue-50:  #EAF8FF;
  --blue-100: #DAEDFC;
  --blue-200: #BDDBF2;
  --blue-300: #96C1E3;
  --blue-400: #64A2D0;
  --blue-500: #0077B5;
  --blue-600: #00609C;
  --blue-700: #004A84;
  --blue-800: #00346D;
  --blue-900: #00204F;

  /* ---------- Neutral (ungetönt, wie die Wortmarke) ---------- */
  --grey-50:  #F6F6F6;
  --grey-100: #EAEAEA;
  --grey-200: #D6D6D6;
  --grey-300: #BBBBBB;
  --grey-400: #9B9B9B;
  --grey-500: #717171;
  --grey-600: #5B5B5B;
  --grey-700: #464646;
  --grey-800: #323232;
  --grey-900: #1F1F1F;

  /* ---------- Dunkle Flächen (aus Markenton) ---------- */
  --dark-ground:  #0C141A;
  --dark-surface: #161F27;
  --dark-raised:  #212C34;
  --dark-border:  #323F49;

  /* ---------- Akzent ---------- */
  --accent-500: #D18F2B;
  --accent-600: #B7761F;

  /* ---------- Semantisch (hell) ---------- */
  --bg:            #FFFFFF;
  --bg-subtle:     #FAFBFC;
  --bg-sunken:     var(--grey-50);
  --text:          var(--grey-800);
  --text-strong:   var(--grey-900);
  --text-muted:    var(--grey-600);
  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
  --link:          var(--blue-700);
  --action:        var(--blue-500);
  --focus:         var(--blue-500);

  /* ---------- Typografie ---------- */
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;

  /* Fluide Skala — Untergrenzen sind bewusst gesetzt, nicht errechnet:
     Fließtext nie unter 16px, Label nie unter 13px. */
  /* Obergrenze auf 76 px begrenzt: Die Hero-Aussage besteht aus zwei Sätzen.
     Bei 100 px lief sie auf vier Zeilen und schob den primären CTA unter den
     Falz — die Schriftgröße folgt hier der Konversion, nicht dem Effekt. */
  --fs-hero:   clamp(2.5rem, 1.3rem + 4.2vw, 4.75rem);    /*  40 →  76 */
  --fs-h2:     clamp(2rem,    1.2rem + 3.2vw, 3.75rem);   /*  32 →  60 */
  --fs-h3:     clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); /*  22 →  30 */
  --fs-h4:     clamp(1.125rem, 1rem + 0.5vw, 1.375rem);   /*  18 →  22 */
  --fs-lead:   clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);  /*  18 →  23 */
  --fs-body:   1.0625rem;                                  /*  17 */
  --fs-small:  0.9375rem;                                  /*  15 */
  --fs-micro:  0.8125rem;                                  /*  13 */
  /* Obergrenze ist durch die längste Zahl bestimmt, nicht frei gewählt:
     „1.000.000+" misst in Poppins Black rund 5,4 em; bei 320 px nutzbarer
     Zellbreite ergibt das maximal ~56 px, sonst läuft die Zahl in die Nachbarzelle. */
  --fs-num:    clamp(2.25rem, 1.3rem + 3vw, 3.5rem);       /*  36 →  56 */

  --lh-hero: 0.98;
  --lh-head: 1.12;
  --lh-body: 1.68;

  --ls-hero:  -0.035em;
  --ls-head:  -0.025em;
  --ls-body:   0em;      /* Logo misst -0.00273em ≈ neutral */
  --ls-label:  0.14em;

  /* ---------- Raster (Balkenraster 72,33 ÷ 9 ≈ 8) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 1rem;    --sp-4: 1.5rem;
  --sp-5: 2rem;     --sp-6: 3rem;     --sp-7: 4rem;    --sp-8: 4.5rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 10rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 10rem);
  --container: 1280px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);

  /* ---------- Form: „Flächen scharf, Striche rund" ---------- */
  --radius-surface: 0px;
  --radius-soft:    2px;
  --radius-stroke:  999px;
  --angle-rise:     45deg;
  --angle-fall:    -41deg;

  /* Logo-Geometrie als Layout-Modul */
  --bar-w:     42;
  --bar-pitch: 72.33;

  /* ---------- Elevation (flächig, kein Glow) ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 32, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 32, .07);
  --shadow-lg: 0 16px 48px rgba(15, 23, 32, .10);

  /* ---------- Motion ---------- */
  --ease-rise: cubic-bezier(.16, .84, .44, 1);
  --ease-move: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;
  --stagger:   70ms;
}