/* ============================================================================
   ICKE-FAMILIE · DESIGN-TOKENS v1 (living)  —  Quelle: Content/Kreativ
   spaetform-reports/brandbook-v1/tokens.css (2700-K-Warmwelt, 9-Board-System).
   🔴 CI PROVISORISCH (G5). Re-Skin = nur Token-Werte tauschen. Keine Hardcode-Hexe
      in Komponenten. RAL/CMYK = Näherung (nur Print). Stand 25.10.2026: LIVE auf Pages (www seit 06:54:50Z, axt seit 07:14:53Z) —
      hier stand bis dahin „SANDBOX/noindex“, und das galt fuer die Zeit davor.
   Diese Repo-Fassung = C/K-Tokens + Logo-Pfade auf /brand/ + Mockup-Helfertöne
   + Kompat-Aliase (--c-*, --wrap, --space, --step-*) für die migrierten Seiten.
   ============================================================================ */

/* ============================================================================
   🔤 SELF-HOSTED WEBFONTS (C/K-Spec · 🔴 DSGVO: KEIN Google-Fonts-CDN — 0 externe
   Requests. woff2 lokal in /public/fonts/, OFL-Lizenzen beigelegt).
   Newsreader (Serif · Variable, Display+Body) + Inter (Grotesk · Variable, Labels).
   ============================================================================ */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: local('Newsreader'), url('/fonts/newsreader-normal-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/newsreader-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('/fonts/newsreader-italic-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('/fonts/newsreader-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: local('Inter'), url('/fonts/inter-latin.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('/fonts/inter-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* ---- KERN-PALETTE (6 Töne · warm bei 2700 K) ---- */
  --icke-anthrazit:   #23282B;   /* Basis, Ruhe, Berlin-Halle */
  --icke-creme:       #F2ECDD;   /* Fläche, Papier — NIE #FFF als Fläche */
  --icke-holz:        #D9BE8B;   /* Wärme, Handwerk, „made in Berlin" */
  --icke-gruen:       #47614A;   /* Gesundheit, Substanz (olivstichig) */
  --icke-gruen-tief:  #3A5240;   /* Haupt-CTA-Fill. Tiefer als --icke-gruen, damit der
                                    Knopf Flaeche BEKOMMT statt nur Farbe (Nico 31.08.:
                                    'ein bisschen mehr Hochglanz, insbesondere bei den CTAs') */
  --icke-ocker:       #9A5622;   /* Funke, Akzent, Energie */
  --icke-neon:        #F4F1E6;   /* Signal-Warmweiß */

  /* Hilfstöne (Board-System, UI-Tiefe) */
  --icke-panel:       #2B3134;
  --icke-panel-2:     #323A3D;
  --icke-line:        #3E474B;
  --icke-cream-dim:   #BDB7A8;
  /* 🔴 31.08.2026: 4.62 GALT NUR AUF --bg. Der Token sitzt aber auch auf --surface (#2B3134)
     und --surface-2 (#323A3D) — dort 4.09 und 3.59, also UNTER AA. 🔑 Der Wert war an einer
     Flaeche geprueft und auf drei benutzt; die Pruefung galt fuer ihre Achse, nicht fuer den
     Token. Neuer Wert traegt auf der SCHLECHTESTEN Flaeche: 6.21 / 5.50 / 4.82.
     ⚠️ Nach oben begrenzt durch --text-muted (7.45/6.60/5.78) — faint darf nicht heller
     werden als muted, sonst kippt die Rangfolge. Abstand bleibt +0.97 bis +1.24. */
  --icke-cream-faint: #ACA79A;   /* vorher #948F82 (4.20→4.62 auf Anthrazit, C/K 20.08.) */
  --icke-holz-deep:   #B9995F;
  --icke-gruen-hi:    #7FA080;   /* helleres Grün (Text/Eyebrow auf dunkel) */
  --icke-ocker-hi:    #CB8244;   /* helleres Ocker für Text/Eyebrow auf dunkel (aus Mockup) */
  --icke-ocker-deep:  #914F1F;   /* tieferes Ocker: Display-Akzent auf Creme, ≥4.5:1 auf --surface (Light-Mode) */

  /* ---- SEMANTISCHE ALIASE (Standard = CREME · Nico 20.08.: keine schwarzen Websites) ---- */
  --bg:            var(--icke-creme);
  --surface:       #ECE4D2;
  --surface-2:     #E4DAC4;
  --border:        #D8CFBB;
  --text:          var(--icke-anthrazit);
  --text-muted:    #4E5A4F;
  --text-faint:    #615D52;  /* 31.08.: 4.27 auf --surface war unter AA; jetzt 5.58/5.19/4.73 */
  --accent:        var(--icke-anthrazit);
  --accent-2:      var(--icke-ocker);
  --health:        var(--icke-gruen);
  --signal:        var(--icke-anthrazit);
  /* Variante-C-Rollen (Nico final 21.08.; universell — Marken überschreiben nur --accent) */
  --on-accent:     var(--icke-creme);      /* Text auf Grün-Akzentflächen (Feature-Karten/CTA) */
  --cta-border:    var(--icke-creme);      /* helle Kante am Grün-CTA (poppt auf Creme) */
  --band-cta:      var(--icke-holz);       /* unteres „Komm zum Probetraining"-Band */
  --on-band-cta:   var(--icke-anthrazit);
  --accent-em:     var(--icke-ocker-deep); /* warmer Display-Akzent (Hero-Kursivwort etc.) — theme-abhängig, ≥4.5:1 auf Creme/Surface */
  --accent-ink:    var(--accent);          /* Akzent in der TEXT-Rolle (Links/Eyebrows/Fokusring) — muss auf --bg lesbar sein.
                                              Default = --accent; im Light-Mode überschrieben (Holz auf Creme wäre unlesbar). */
  --on-accent-2:   var(--icke-creme);      /* Text auf --accent-2-Fläche (Default; Marken überschreiben) */
  --cta:           var(--icke-gruen-tief);      /* Lead-CTA-Fill = Waldgrün (Nico 22.08.) */
  --on-cta:        var(--icke-creme);      /* heller Text auf Lead-CTA (Creme/Neon — NIE dunkel) */
  --cta2:          var(--icke-creme);      /* Follow-CTA-Fill (Default Creme; Physio überschreibt) */
  --on-cta2:       var(--icke-anthrazit);  /* Text auf Follow-CTA */

  /* ---- TYPOGRAFIE (zwei Register; Websafe-Fallbacks, keine externen Fonts) ---- */
  --font-serif:   'Newsreader','Iowan Old Style','Charter','Palatino Linotype',Palatino,Georgia,serif;
  --font-grotesk: 'Inter','Neue Haas Grotesk','Helvetica Neue',Arial,system-ui,sans-serif;
  --font-editorial: var(--font-serif);
  --font-ui:        var(--font-grotesk);
  /* 🎨 Font-Rollen (C/K Design-System-Web, serif-geführt): Serif für Display+Fließtext, Grotesk NUR für Labels.
     🔧 Font-FAMILIE = Iowan/Charter (HANDOFF); ein self-hosted Webfont ließe sich hier drop-in tauschen. */
  --font-display:   var(--font-serif);     /* H1/H2/H3-Display */
  --font-body:      var(--font-serif);     /* Fließtext + Card-Texte + Blockquotes */
  --font-label:     var(--font-grotesk);   /* Eyebrows/Nav/Buttons/Labels/Zahlen/Chips */

  /* ---- TYPO-SKALA (Board 03) ---- */
  --fs-display: clamp(2.5rem, 5vw, 4.125rem);   /* Hero-Headline · Grotesk 800 */
  --fs-h1:      clamp(1.75rem, 3vw, 2.125rem);
  --fs-h2:      0.8125rem;                       /* Eyebrow-Größe · UPPER .2em  */
  --fs-h3:      1.1875rem;
  --fs-body:    1.1875rem;
  --fs-small:   1rem;
  --fs-label:   0.75rem;
  --lh-tight: 1.05;  --lh-body: 1.5;  --lh-snug: 1.25;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --tracking-label: .14em;  --tracking-eyebrow: .2em;  --tracking-wide: .04em;

  /* ---- SPACING (4-px-Basis) ---- */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-8: 3rem;    --space-10: 4rem;
  --space-12: 6rem;   --space-16: 8rem;
  --section-y: clamp(4rem, 8vw, 6rem);
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --content-max: 1200px;

  /* ---- RADIEN ---- */
  --radius-xs: 6px;  --radius-sm: 9px;  --radius-md: 12px;  --radius-lg: 16px;
  --radius-xl: 20px; --radius-pill: 999px;
  --radius-btn: 10px;  --radius-card: 16px;  --radius-chip: 9px;

  /* ---- SCHATTEN (warm getönt) ---- */
  --shadow-sm: 0 1px 2px rgba(24,27,29,.25);
  --shadow-md: 0 6px 20px rgba(24,27,29,.30);
  --shadow-lg: 0 18px 48px rgba(24,27,29,.40);
  --glow-warm: 0 0 22px rgba(244,241,230,.45), 0 0 46px rgba(217,190,139,.30);
  --hairline: 1px solid var(--border);

  /* ---- BREAKPOINTS / MOTION ---- */
  --bp-sm: 640px;  --bp-md: 960px;  --bp-lg: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 140ms;  --dur: 220ms;  --dur-slow: 380ms;

  /* ---- LOGO-ASSETS (Repo: /brand/ · Web-tauglich als PNG-Chip) ----
     🔴 Vektor liegt nur für die AXT-Wortmarke vor; ICKE-Signet = Raster
     (Original-Vektor via Nico/Markeninhaber → später Drop-in). */
  --logo-icke-signet: url('/brand/icke-signet.png');   /* IMMER in Creme-Kachel */
  --logo-min-web: 40px;
  --logo-clearspace: .25;

  /* 🔴 Mindest-Tap-Target (Nico-Direktive 12.08., Mobile-First) */
  --tap-min: 44px;

  /* ---- KOMPAT-ALIASE (bestehende migrierte Seiten/Artikel-CSS) ----
     Damit .article & Co. ohne Umbau weiterlaufen; neue Komponenten nutzen
     die semantischen Tokens direkt. */
  --c-bg: var(--bg);
  --c-fg: var(--text);
  --c-muted: var(--text-muted);
  --c-surface: var(--surface);
  --c-border: var(--border);
  --c-accent: var(--accent);
  --font-sans: var(--font-grotesk);
  --wrap: var(--content-max);
  --space: var(--space-4);
  --radius: var(--radius-card);

  /* ---- BILDBEHANDLUNG — EINE Definition fuer alle Fotos ----------------------------
     🔴 Nico, 31.08.2026: „Wir sollten schon fuer einen einheitlichen Look bei den Bildern
     sorgen. Hauptsache es sieht professionell und nicht zusammengewuerfelt aus."
     🔑 Der Bestand kommt aus mindestens vier Shootings verschiedener Jahre und Fotografen
     (2019 Training · 2021 Team · 2025 Event · 2026 Coaching). Nebeneinander gestellt ist
     genau das der Effekt, den er nicht will — und er entsteht NICHT durch schlechte Bilder,
     sondern durch unterschiedliche Farbstimmungen.
     ⚠️ Die Werte sind NICHT erfunden: es sind die, mit denen die Hero-Bilder seit dem
     Design-Sprint laufen (`.hero__art img`). Damit ist der Look nicht neu, sondern
     durchgezogen — Inhaltsbilder waren bisher die Ausnahme, nicht die Heros.
     ---------------------------------------------------------------------------------- */
  --bild-grade: saturate(.85) contrast(1.03);
  --step--1: var(--fs-small);
  --step-0: var(--fs-body);
  --step-1: var(--fs-h3);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: var(--fs-display);
}

/* ============================================================================
   PER-MARKE-REGLER — dieselbe Palette, anders laut. data-brand am <html>/Section.
   ICKE + AXT = dunkel-first (Location-Energie). Physio/Spätform = creme-first.
   ============================================================================ */

/* ICKE — DESIGN-SYSTEM-LOOK (Nico-Revert 21.08.): warm-anthrazit-dominant · „Web = Location".
   C/K-Web-Token (website-location-warm), Regler Anthr.38·Holz26·Grün12·Ocker8·Neon16, 2700 K warm.
   Holz=warme Zweitfläche (Stat-/CTA-Band) · Ocker=Funke/Tick · Grün=Substanz/Icon · Neon=CTA-Pop + Text.
   🔴 KEIN kalt-schwarz/Reinweiß. AA: Neon/Anthr 13:1 · Cream-dim/Anthr 7,5:1 · Anthr/Holz 8:1 · Neon-CTA 13:1. */
[data-brand="icke"] {
  --wortmarke-balken: var(--icke-gruen);   /* 20.09.2026 Nico: Wortmarken-Balken bei ICKE gruen wie AXT — nur der Balken, nicht --accent-2 */
  --bg: var(--icke-anthrazit); --surface: var(--icke-panel); --surface-2: var(--icke-panel-2);
  --text: var(--icke-neon); --text-muted: var(--icke-cream-dim); --text-faint: var(--icke-cream-faint);
  --accent: var(--icke-holz); --on-accent: var(--icke-anthrazit);
  --accent-2: var(--icke-ocker); --on-accent-2: var(--icke-creme); --health: var(--icke-gruen);
  --cta: var(--icke-gruen-tief); --on-cta: var(--icke-creme); --cta-border: transparent;   /* Lead-CTA = Waldgrün-Fill + heller Text (Nico 22.08.) */
  --cta2: var(--icke-creme); --on-cta2: var(--icke-anthrazit);                        /* Follow-CTA = Creme-Fill + Anthrazit-Text */
  --border: var(--icke-line); --signal: var(--icke-neon);
  --accent-em: var(--icke-holz);   /* dunkel-first: Holz-Kursivwort auf Anthrazit */
}

/* AXT — dieselbe warm-anthrazit-Basis, aber GRÜN-Signatur vorne (Patch-Erbe): --accent-2=Grün, Emblem-Grün. */
[data-brand="axt"] {
  --wortmarke-balken: var(--icke-gruen);   /* 20.09.2026 Nico: Wortmarken-Balken bei ICKE gruen wie AXT — nur der Balken, nicht --accent-2 */
  --bg: var(--icke-anthrazit); --surface: var(--icke-panel); --surface-2: var(--icke-panel-2);
  --text: var(--icke-neon); --text-muted: var(--icke-cream-dim); --text-faint: var(--icke-cream-faint);
  --accent: var(--icke-holz); --on-accent: var(--icke-anthrazit);
  --accent-2: var(--icke-gruen); --on-accent-2: var(--icke-creme); --health: var(--icke-gruen);
  --cta: var(--icke-gruen-tief); --on-cta: var(--icke-creme); --cta-border: transparent;   /* Lead-CTA = Waldgrün-Fill + heller Text (Nico 22.08.) */
  --cta2: var(--icke-creme); --on-cta2: var(--icke-anthrazit);                        /* Follow-CTA = Creme-Fill + Anthrazit-Text */
  --border: var(--icke-line); --signal: var(--icke-neon);
  --accent-em: var(--icke-holz);   /* dunkel-first: Holz-Kursivwort auf Anthrazit */
}

/* Optionales Sekundär-Register „dunkel" — NUR sparsam als Akzentfläche (Statband/Hero-Art/Footer-Insel),
   NIE als Seiten-Default (Nico: keine schwarzen Websites). */
[data-register="dark"] {
  --bg: var(--icke-anthrazit); --surface: var(--icke-panel); --surface-2: var(--icke-panel-2);
  --text: var(--icke-neon); --text-muted: var(--icke-cream-dim); --text-faint: var(--icke-cream-faint);
  --border: var(--icke-line); --signal: var(--icke-neon);
}

/* ICKE PHYSIO — 🔴 UNVERÄNDERT creme-ruhig (NICHT auf anthrazit drehen): „System ruhig gedreht".
   Grün führt · Serif-nah · klinisch-warm. physiotherapie + praeventionskurse bleiben creme. (HWG §3 intern.) */
[data-brand="physio"] {
  --bg: var(--icke-creme); --surface: #ECE4D2;
  --text: #23282B; --text-muted: #4E5A4F; --text-faint: #615D52;  /* 31.08.: 4.27 auf --surface war unter AA; jetzt 5.58/5.19/4.73 */
  --accent: var(--icke-gruen); --accent-2: var(--icke-holz); --health: var(--icke-gruen);
  --on-accent: var(--icke-creme); --on-accent-2: var(--icke-anthrazit);
  --cta: var(--icke-gruen-tief); --on-cta: var(--icke-creme);
  --cta2: var(--icke-anthrazit); --on-cta2: var(--icke-creme);  /* Physio-Follow: Anthrazit-Fill auf Creme (creme-auf-creme wäre unsichtbar) */
  --border: #D8CFBB;
  --signal: #23282B;
}

/* SPÄTFORM — editorial, serif-lastig, creme-first */
[data-brand="spaetform"] {
  --bg: var(--icke-creme); --surface: #ECE4D2;
  --text: #23282B; --text-muted: #4E5A4F; --text-faint: #8C887C;
  --accent: var(--icke-ocker); --accent-2: var(--icke-gruen); --health: var(--icke-gruen);
  --border: #D8CFBB;
  --signal: #23282B;
  --font-ui: var(--font-serif);
}

/* ============================================================================
   THEME-UMSCHALTER (Light/Dark) — Nico-Wunsch 26.08.2026.
   Überschreibt NUR die Kern-Flächen/Text-Tokens; Marken-AKZENTE (Holz/Ocker/Grün)
   bleiben — nur --accent-em (warmer Display-Akzent) flippt mit, weil Holz auf Creme
   unlesbar ist. Default (KEIN data-theme) = wie bisher: icke/axt dunkel, physio/
   spätform creme. Der Umschalter im Header setzt data-theme am <html> (localStorage-
   persistiert). 🔴 Diese Blöcke stehen NACH den Marken-Blöcken → data-theme gewinnt
   bei gleicher Spezifität (Quellreihenfolge). Kontrast je Marke×Theme deckt
   guard/token-kontrast.test.mjs ab. Default-Wechsel auf hell/OS-Präferenz = ein
   Einzeiler, bewusst NICHT gesetzt (kein Überraschungs-Flip für die dunkle Mehrheit).
   ============================================================================ */
[data-theme="light"] {
  --bg: var(--icke-creme); --surface: #ECE4D2; --surface-2: #E4DAC4;
  --text: var(--icke-anthrazit); --text-muted: #4E5A4F; --text-faint: #615D52;  /* 31.08.: 4.27 auf --surface war unter AA; jetzt 5.58/5.19/4.73 */
  --border: #D8CFBB; --signal: var(--icke-anthrazit);
  --accent-em: var(--icke-ocker-deep);   /* warm + ≥4.5:1 auf Creme/Surface */
  --accent-ink: var(--icke-ocker-deep);  /* Links/Eyebrows: Holz wäre auf Creme unlesbar → tiefes Ocker (5.3:1) */
}
[data-theme="dark"] {
  --bg: var(--icke-anthrazit); --surface: var(--icke-panel); --surface-2: var(--icke-panel-2);
  --text: var(--icke-neon); --text-muted: var(--icke-cream-dim); --text-faint: var(--icke-cream-faint);
  --border: var(--icke-line); --signal: var(--icke-neon);
  --accent-em: var(--icke-holz);
  --accent-ink: var(--icke-holz);        /* Links/Eyebrows auf Anthrazit = Holz (8.3:1) */
}