/* =============================================================
   Design-Tokens SPORT-PX® / BUSINESS-PX
   V4 Schritt 8 · gemessen im Canvas-Quellexport vom 02.10.2026
   (Herleitung je Wert: system/docs/TOKENS.md)
   Marke über <html data-brand="sport|business">
   ============================================================= */

@font-face {
  font-family: "Archivo";
  /* Quelle: github.com/google/fonts/ofl/archivo/Archivo[wdth,wght].ttf (OFL 1.1, siehe fonts/OFL.txt).
     Das Repository liefert nur TTF. Eine WOFF2-Fassung (ca. 1/3 der Größe) lässt sich mit
     woff2_compress erzeugen; dann die erste Zeile ergänzen, die TTF bleibt als Rückfall. */
  src: url("../fonts/archivo-var.ttf") format("truetype-variations"),
       url("../fonts/archivo-var.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Schrift ---------- */
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --hl-weight: 800;
  --hl-leading: 0.94;
  --hl-tracking: -0.01em;
  --fig-stretch: 64%;
  --fig-wdth: 64;
  --fig-leading: 0.9;

  /* Fluid zwischen 390 px (Mobile-Artboard) und 1440 px (Desktop-Artboard):
     Wert = min + (max − min) · (100vw − 390px) / 1050px                    */
  --fs-h2:     clamp(40px, calc(34.06px + 1.524vw), 56px);  /* Abschnittstitel        */
  --fs-h2-l:   clamp(40px, calc(31.09px + 2.286vw), 64px);  /* große Abschnittstitel  */
  --fs-h3-l:   clamp(40px, calc(34.06px + 1.524vw), 56px);  /* Kartentitel Sportarten */
  --fs-h3:     clamp(26px, calc(23.03px + 0.762vw), 34px);
  --fs-h3-s:   clamp(24px, calc(22.51px + 0.381vw), 28px);
  --fs-figure: clamp(56px, calc(41.14px + 3.810vw), 96px);  /* Kennzahlen „62.000+“   */
  --fs-figure-s: 56px;

  --fs-lead:   22px;   /* Hero-Unterzeile        */
  --fs-body-l: 18px;
  --fs-body:   17px;   /* Fließtext              */
  --fs-body-s: 16px;
  --fs-small:  15px;   /* Bildunterschrift, Meta */
  --fs-meta:   14px;
  --fs-nav:    16px;
  --fs-nav-mobile: 26px;
  --fs-button: 17px;

  --lh-body: 1.5;
  --lh-tight: 1.4;
  --lh-snug: 1.3;

  /* ---------- Raster und Abstände ---------- */
  --container: 1280px;
  --gutter: clamp(24px, calc(-6.86px + 7.619vw), 80px);    /* 24 px mobil → 80 px desktop */
  --columns: 12;
  --col-gap: 24px;
  --section-y: clamp(64px, calc(46.17px + 4.571vw), 112px);
  --section-y-l: clamp(64px, calc(43.43px + 5.333vw), 120px);
  --header-h: 88px;
  --header-h-mobile: 64px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 72px;

  /* ---------- Bedienelemente ---------- */
  --btn-h: 56px;
  --btn-pad-x: 28px;
  --btn-weight: 700;
  --btn-radius: 0;
  --link-underline-offset: 5px;
  --link-underline-thickness: 1px;
  --tap-min: 44px;

  /* Pixel-Marker (Markenzeichen, Briefing „Komponenten und Kennzeichen“) */
  --marker-xs: 6px;   /* aktiver Navigationspunkt */
  --marker-s: 8px;    /* Markenwechsel, Aufzählung */
  --marker-m: 12px;
  --marker-l: 16px;   /* Hero-Textbox Oberkante    */

  --radius: 0;
  --shadow: none;
}

/* ---------- SPORT-PX: dunkel, Gelb als Akzent ---------- */
[data-brand="sport"] {
  --c-bg:        #000000;
  --c-surface:   #1F2023;
  --c-surface-2: #2B2D31;  /* Bildfläche hinter Hero */
  --c-line:      #3A3D42;
  --c-text:      #FFFFFF;
  --c-text-2:    #B4B8BD;
  --c-accent:    #FFED00;
  --c-on-accent: #000000;
  --c-link-hover:#B4B8BD;

  --hl-stretch-1: 74%;
  --hl-stretch-2: 76%;
  --hl-stretch-3: 76%;
  --hl-wdth-1: 74;
  --hl-wdth-2: 76;
  --hl-wdth-3: 76;

  --fs-h1:       clamp(54px, calc(38.40px + 4.000vw), 96px);
  --fs-display:  clamp(54px, calc(35.43px + 4.762vw), 104px); /* Startseite */
}

/* ---------- BUSINESS-PX: hell, Schwarz als Akzent ---------- */
[data-brand="business"] {
  --c-bg:        #FFFFFF;
  --c-surface:   #F2F2F0;
  --c-surface-2: #F2F2F0;
  --c-surface-dark: #1F2023;  /* „Fotografie verstehen. Produktion verstehen.“ */
  --c-line:      #DADAD6;
  --c-line-2:    #C9CDD1;
  --c-text:      #000000;
  --c-text-2:    #55585C;
  --c-text-inverse-2: #E4E5E7;
  --c-accent:    #000000;
  --c-on-accent: #FFFFFF;
  --c-link-hover:#55585C;

  --hl-stretch-1: 76%;
  --hl-stretch-2: 76%;
  --hl-stretch-3: 78%;
  --hl-wdth-1: 76;
  --hl-wdth-2: 76;
  --hl-wdth-3: 78;

  --fs-h1:       clamp(48px, calc(39.09px + 2.286vw), 72px);
  --fs-display:  clamp(48px, calc(36.11px + 3.048vw), 80px);  /* Startseite */
  --fs-label:    15px;  /* Überzeile Versalien, 700, Sperrung 0.04em */
  --label-tracking: 0.04em;
}

/* Gelb nie als Textfarbe auf Weiß (Briefing Barrierefreiheit) – Token existiert nur in der Sport-Marke. */