/* ════════════════════════════════════════════════════════════
   BOWHUMAN DESIGN TOKENS v2.0.0
   Kanonische Quelle — alle Sites importieren diese Datei.
   Dokumentation: Dokumentation/bowhuman-styleguide.html
════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
*{font-family:var(--font-base)}
code,pre,kbd,
[class*="mono"],[class*="code"]{font-family:var(--font-mono)}

:root{
  /* ── Accent-Fallback (www.bowhuman.eu — kein site-CSS) ── */
  /* Bugfix 2026-07-19 (Peter, Live-Test Pie-Menu Hell-Theme): --accent zeigte
     immer --green (#B4FF2E Neon-Lime), das laut eigenem Kommentar unten
     "nur auf Dark-BG" gedacht ist — auf hellem Grund kaum lesbar (Pie-Item-
     Ränder/Icons, Badges, Tabellen-Header, Tabs, KPI-Werte: praktisch jede
     .bh-app-Komponente, die --accent nutzt). --green-fg existiert exakt für
     diesen Zweck (WCAG AA auf hell #4A7200, Neon-Lime auf dunkel via
     html.dark-Override unten) — --accent zeigt jetzt darauf statt auf das
     Dark-only --green. */
  --accent:    var(--green-fg);
  --accent-dk: var(--green-dk);
  /* ── Product Accents ── */
  --cyan:        #00BCD4;   /* Neon-Cyan — Kontrast nur auf Dark-BG (2.3:1 auf weiß) */
  --cyan-dk:     #0097A7;
  --cyan-fg:     #00727F;   /* WCAG AA ≥4.5:1 auf hell (analog --green-fg); Dark-Override unten */
  --cursor-aim: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2728%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%278.5%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%271.5%27%20x2%3D%2714%27%20y2%3D%277%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%2721%27%20x2%3D%2714%27%20y2%3D%2726.5%27%2F%3E%3Cline%20x1%3D%271.5%27%20y1%3D%2714%27%20x2%3D%277%27%20y2%3D%2714%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2714%27%20x2%3D%2726.5%27%20y2%3D%2714%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%234A7200%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%278.5%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%271.5%27%20x2%3D%2714%27%20y2%3D%277%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%2721%27%20x2%3D%2714%27%20y2%3D%2726.5%27%2F%3E%3Cline%20x1%3D%271.5%27%20y1%3D%2714%27%20x2%3D%277%27%20y2%3D%2714%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2714%27%20x2%3D%2726.5%27%20y2%3D%2714%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2714%27%20r%3D%271.6%27%20fill%3D%27%234A7200%27%2F%3E%3C%2Fsvg%3E") 14 14, crosshair;   /* Bogensport-Visier statt Finger/Cross, Pie-Trigger (2026-07-19) */
  --magenta:     #E91E8C;
  --magenta-dk:  #AD1457;
  --mag-dk:      var(--magenta-dk);  /* Alias — deprecated, schrittweise ersetzen */
  --green:       #B4FF2E;   /* Neon-Lime — nur auf Dark-BG */
  --green-dk:    #7AB800;
  --green-fg:    #4A7200;   /* WCAG AA ≥ 4.5:1 auf #eef0f3 */
  --orange:      #FF9100;   /* Kanonisch seit 2026-06-16 (vorher #FF6D00) — auf Dark besser lesbar */
  --orange-dk:   #E07000;
  --navy:        #0d1117;
  --navy-2:      #1a2e4a;

  /* ── Neutral Palette ── */
  --bg:          #f3f5f7;
  --nm-bg:       #eef0f3;
  --white:       #ffffff;
  --border:      #e2e6ea;
  --text-primary:   #1a2230;
  --text-secondary: #4a5568;
  --text-muted:     #4f5e6e;   /* WCAG AA ≥ 4.5:1 auf #f3f5f7 */

  /* ── Semantische Status-Farben (theme-adaptiv) ──
     Neu 2026-07-19: bisher nur im .bh-app-Layer (bowhuman-app.css) definiert;
     hierher auf :root gehoben, damit auch Nicht-App-Seiten (sherwood.css-Seiten,
     Inline-Nachbauten) dieselben Tokens nutzen statt Rot/Grün hart zu kodieren.
     Hell = WCAG-AA-taugliche dunkle Variante, Dunkel-Override unten. Der
     .bh-app-Layer (html.bh-app) verfeinert zusätzlich Chip-/Badge-Tints. */
  --ok:    var(--green-fg);   /* Erfolg — #4A7200 hell / Neon dunkel (folgt --green-fg) */
  --warn:  #C45F00;           /* Warnung — WCAG AA ≥4.5:1 auf hell */
  --err:   #C62828;           /* Fehler  — WCAG AA ≥4.5:1 auf hell (5.62:1 auf weiß) */
  --info:  var(--accent);     /* Hinweis = Primärfarbe (folgt Accent) */
  --miss:  #9e9e9e;           /* Scoring: Fehlschuss (Grau, theme-invariant) */
  --red:   var(--err);        /* Alias — Altbestand nutzt var(--red) (archer/following/pair) */

  /* ── Typography ── */
  --font-base: 'AtkinsonNext', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-mono: 'AtkinsonMono', ui-monospace, 'SF Mono', monospace;

  /* ── Font Weights (semantisch benannt) ── */
  --fw-light:    300;   /* Standard-Lesetext in WebApps */
  --fw-regular:  400;   /* Fließtext auf Websites */
  --fw-medium:   500;   /* Sparsam: Zwischenstufe wo 300↔600 zu hart springt */
  --fw-semibold: 600;   /* UI-Labels, Nav-Items, Controls (Hauptarbeitsgewicht WebApp) */
  --fw-bold:     700;   /* Überschriften, Card-Titel, wichtige Inline-Werte */
  --fw-black:    800;   /* KPI-Zahlen, Display, Hero */

  /* ── Type Scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-hero: clamp(48px, 7vw, 88px);

  /* ── Spacing ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  20px;
  --sp-2xl: 24px;
  --sp-3xl: 48px;
  --sp-4xl: 80px;

  /* ── Border Radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-card:  0 2px 8px rgba(0,0,0,.08);
  --shadow-panel: 0 4px 16px rgba(0,0,0,.12);
  --shadow-popup: 0 8px 32px rgba(0,0,0,.18);

  /* ── Neumorphic (Light) ── */
  --nm-shadow-out: 6px 6px 14px rgba(163,177,198,.55),-6px -6px 14px rgba(255,255,255,.92);
  --nm-shadow-in:  inset 4px 4px 10px rgba(163,177,198,.50),inset -4px -4px 10px rgba(255,255,255,.88);
  --nm-shadow-sm:  3px 3px 8px rgba(163,177,198,.50),-3px -3px 8px rgba(255,255,255,.90);

  /* ── Layout ── */
  --nav-h:       60px;
  --content-max: 1200px;
  --content-narrow: 760px;
  --section-pad-v: 96px;

  /* ── Z-Index ── */
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ── Gradients ── */
  --grad-green:   linear-gradient(135deg, #B4FF2E 0%, #7AB800 100%);
  --grad-cyan:    linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
  --grad-magenta: linear-gradient(135deg, #E91E8C 0%, #AD1457 100%);
  --grad-orange:  linear-gradient(135deg, #FF9100 0%, #E07000 100%);
}

/* ── Dark Mode ── toggle via html.dark class ── */
html.dark{
  --bg:          #0d1117;
  --nm-bg:       #161d2a;   /* neutral dark-navy — Sherwood überschreibt lokal */
  --white:       #141b27;
  --border:      rgba(255,255,255,.08);
  --text-primary:   #e8eef4;
  --text-secondary: rgba(255,255,255,.65);
  --text-muted:     rgba(255,255,255,.50);  /* WCAG AA ~4.6:1 auf #0d1117 */
  --green-fg:    #B4FF2E;   /* Neon-Lime hat Kontrast auf Dark */
  --cyan-fg:     #00BCD4;   /* Neon-Cyan hat Kontrast auf Dark */
  --warn:        #FF9100;   /* helleres Orange auf Dark */
  --err:         #F44336;   /* helleres Rot auf Dark */
  --shadow-card:  0 2px 8px rgba(0,0,0,.40);
  --shadow-panel: 0 4px 16px rgba(0,0,0,.55);
  --shadow-popup: 0 8px 32px rgba(0,0,0,.70);
  --nm-shadow-out: 6px 6px 14px rgba(0,0,0,.55),-6px -6px 14px rgba(255,255,255,.03);
  --nm-shadow-in:  inset 4px 4px 10px rgba(0,0,0,.50),inset -4px -4px 10px rgba(255,255,255,.02);
  --nm-shadow-sm:  3px 3px 8px rgba(0,0,0,.50),-3px -3px 8px rgba(255,255,255,.02);
}

/* ── Base ── */
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
  overflow-x:clip;
}
body{
  font-family:var(--font-base);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--text-primary);
  background:var(--bg);
  padding-top:var(--nav-h);
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 50%,var(--bg));border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 50%,var(--bg)) var(--bg)}
::selection{background:rgba(180,255,46,.2);color:inherit}
:focus-visible{outline:2px solid var(--green-fg);outline-offset:3px;border-radius:var(--r-sm)}
html.dark :focus-visible{outline-color:var(--green)}
:focus:not(:focus-visible){outline:none}
/* CSS-Fallback: system dark preference ohne gespeicherte Einstellung */
@media(prefers-color-scheme:dark){
  html:not([class~="light"]){
    --bg:          #0d1117;
    --nm-bg:       #161d2a;
    --white:       #141b27;
    --border:      rgba(255,255,255,.08);
    --text-primary:   #e8eef4;
    --text-secondary: rgba(255,255,255,.65);
    --text-muted:     rgba(255,255,255,.50);
    --green-fg:    #B4FF2E;
    --cyan-fg:     #00BCD4;
    --warn:        #FF9100;
    --err:         #F44336;
    --shadow-card:  0 2px 8px rgba(0,0,0,.40);
    --shadow-panel: 0 4px 16px rgba(0,0,0,.55);
    --shadow-popup: 0 8px 32px rgba(0,0,0,.70);
    --nm-shadow-out: 6px 6px 14px rgba(0,0,0,.55),-6px -6px 14px rgba(255,255,255,.03);
    --nm-shadow-in:  inset 4px 4px 10px rgba(0,0,0,.50),inset -4px -4px 10px rgba(255,255,255,.02);
    --nm-shadow-sm:  3px 3px 8px rgba(0,0,0,.50),-3px -3px 8px rgba(255,255,255,.02);
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}