/* ════════════════════════════════════════════════════════════ 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); /* 28.08.2026: --accent stand hier ohne Partner. --green-fg kippt mit dem Theme (im Hellen das dunkle Oliv #4A7200, im Dunkeln Neon-Lime), die Vorgabe --accent-on: var(--navy) aus bowhuman-components.css kippt nicht — im Hellmodus also dunkles Blau auf dunklem Oliv, 3.33:1. Weiss auf #4A7200 sind 5.68:1, Navy auf Neon-Lime 15.58:1. Der Dark-Zweig steht unten bei html.dark. Wer --accent setzt, setzt --accent-on daneben. */ --accent-on: #fff; /* Gegenstueck fuer die dauerhaft dunklen Flaechen .nav und .footer: dort waere --green-fg im Hellmodus die falsche Haelfte des Paares. Regel: wer --accent setzt, setzt auch --accent-dark-bg. Begruendung in bowhuman-components.css bei .nav (27.08.2026). */ --accent-dark-bg: var(--green); /* ── 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 */ /* 27.08.2026 ergaenzt: bis dahin gab es -fg nur fuer Cyan und Gruen. Magenta und Orange fehlten, und genau daran scheiterten marians und nottinghams Rechtsseiten (--magenta 4.2:1, --orange 2.3:1 auf hellem Grund) sowie sherwoods Status-Pillen. Gemessen auf #fff / #eef0f3 / #f3f5f7: #C2185B = 5.87 / 5.14 / 5.37 · #A85400 = 5.34 / 4.68 / 4.89. Dunkel-Override unten, dort gilt wieder der vibrante Markenton. */ --magenta-fg: #C2185B; --orange-fg: #A85400; --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 */ /* Zurueckgenommener Text auf einer Flaeche, die in BEIDEN Themes dunkel ist — Anmeldekarten, Navigationsleiste, Fusszeile. --text-muted taugt dort nicht: es kippt im Hellmodus auf ein dunkles Grau und waere auf dunklem Grund unlesbar. Dasselbe Muster wie --accent-dark-bg. .55 ist der niedrigste Wert, der auf allen vorkommenden dunklen Flaechen AA haelt (5.4 bis 6.2). Gemessen 28.08.2026. */ --text-muted-dark-bg: rgba(255,255,255,.55); /* ── 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) */ /* Warnung — folgt --orange-fg, wie --ok dem --green-fg folgt. Stand bis 27.08.2026 auf #C45F00 mit dem Kommentar "WCAG AA ≥4.5:1 auf hell"; nachgemessen stimmte das auf keinem hellen Grund (4.21 / 3.86 / 3.69). Aufgefallen ueber sherwoods "In Entwicklung"-Pille. */ --warn: var(--orange-fg); --err: #C62828; /* Fehler — WCAG AA ≥4.5:1 auf hell (5.62:1 auf weiß) */ --info: var(--accent); /* Hinweis = Primärfarbe (folgt Accent) */ /* Fensterknoepfe der macOS-Nachbauten. Standen bis 27.08.2026 zweimal fest im CSS: www.css hatte #FF5F56/#FFBD2E/#27C93F, marian.css #ff5f57/#febc2e/#28c840 — derselbe Nachbau, drei Werte um 1 bis 2 daneben. Es gilt jetzt der erste Satz. */ --win-rot: #FF5F56; --win-gelb: #FFBD2E; --win-gruen: #27C93F; --miss: #9e9e9e; /* Scoring: Fehlschuss (Grau, theme-invariant) */ /* --success gab es vom Vormittag bis zum Abend des 27.08.2026. robin und marian faerbten damit je ein Feature-Symbol und hatten dafuer lokal --green auf #2e7d32 umdefiniert — den Namen der sherwood-Markenfarbe mit einer anderen Farbe belegt. --success hielt zunaechst den exakten Altwert, damit die Umstellung ohne sichtbare Aenderung lief. Semantisch deckte --ok (theme-adaptiv, folgt --green-fg) dasselbe ab; zwei Namen fuer eine Sache sind genau die Unordnung, die dieser Satz vermeiden soll. Die beiden Symbole nutzen jetzt --ok. Nebeneffekt: im Dunkeln standen sie mit #2e7d32 auf fast schwarzem Grund bei 3.46:1, mit Neon-Lime bei 13:1. */ --red: var(--err); /* Alias — Altbestand nutzt var(--red) (archer/following/pair) */ /* ── Tint-Leiter des Akzents ── Fuenf Stufen, aus var(--accent) gemischt. Vorher stand jede Toenung als eigenes rgba() im CSS: 237 Werte in 84 verschiedenen Deckkraft-Stufen von .03 bis .9, jede einzeln hingeschrieben. Die Stufen 5/10/20/30/45 sind nicht geraten — sie sind diejenige Fuenferleiter, die den gemessenen Bestand am wenigsten verschiebt (im Schnitt 2,35 Prozentpunkte; die naechst- bessere Leiter 7/12/20/30/45 gewinnt nur 10 Punkte und liest sich schlechter). Aufgeloest wird beim Gebrauch auf :root, nicht auf dem Element — ein .legal-article, das --accent umbindet, aendert die Leiter also NICHT. Das war vorher genauso (dort standen feste rgba-Werte), ist aber der Grund, warum es keine Ueberraschung gibt. Fuer fremde Marken auf derselben Seite (robin zeigt littlejohn, www zeigt alle fuenf) steht color-mix direkt an der Regel. */ /* Gemischt wird aus --tint, nicht direkt aus --accent. Der Unterschied zaehlt genau bei sherwood: dort ist --accent die theme-adaptive Fassung var(--green-fg), damit Text im Hell-Theme lesbar bleibt. Eine Flaeche soll aber in beiden Themes denselben Farbton haben, sonst wechselt der Hintergrund die Farbe statt nur die Helligkeit. --tint zeigt darum auf den stabilen Markenton; nur sherwood muss ihn ueberhaupt setzen. */ --tint: var(--accent); --accent-t05: color-mix(in srgb, var(--tint) 5%, transparent); --accent-t10: color-mix(in srgb, var(--tint) 10%, transparent); --accent-t20: color-mix(in srgb, var(--tint) 20%, transparent); --accent-t30: color-mix(in srgb, var(--tint) 30%, transparent); --accent-t45: color-mix(in srgb, var(--tint) 45%, transparent); /* Altnamen aus der Zeit der handgeschriebenen Leiter. Sie stehen noch im App-Layer (bowhuman-app.css, archers-nest.css, achievements.css), der hier ausserhalb des Auftrags liegt — darum bleiben die Namen und zeigen auf die naechste Stufe. Gleichstaende (.15, .25) gehen nach UNTEN: eine zu zarte Toenung ist der kleinere Fehler als eine zu laute. */ --accent-t07: var(--accent-t05); --accent-t12: var(--accent-t10); --accent-t15: var(--accent-t10); --accent-t25: var(--accent-t20); /* ── 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 (rem, Basis 16px – skaliert mit Nutzer-Schriftgrößen-Einstellung) ── */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-hero: clamp(3rem, 7vw, 5.5rem); /* 48px–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); /* Der Schwebeschatten der Karten. Stand am 28.08.2026 in sechs Dateien wortgleich — je zweimal, hell und dunkel. Zwoelf handgeschriebene Rezepturen fuer zwei Werte. */ --nm-shadow-hover: 8px 8px 20px rgba(163,177,198,.60),-8px -8px 20px rgba(255,255,255,.95); --nm-shadow-hover-sm: 6px 6px 16px rgba(163,177,198,.55),-6px -6px 16px rgba(255,255,255,.90); /* ── Layout ── */ --nav-h: 60px; --content-max: 1200px; --content-narrow: 760px; --section-pad-v: 96px; /* ── Z-Index ── */ /* Skala siehe ADR-005 (Vault/01 Architektur). Bestehende drei Werte unveraendert -- Erweiterung um die Stufen, die bisher als literale Zahlen in bowhuman-app.css / sherwood-nav.js standen (Audit 2026-09-15). */ --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-app-shell: 500; /* fixe App-Topbar (sherwood-nav.js), bisher literal 500 */ --z-drawer: 600; /* Slide-Over-Drawer (bh-drawer) und Kontext-Panel (sherwood-nav), bisher literal 600 an zwei unabhaengigen Stellen */ --z-tooltip: 700; /* macht bisherigen Fallback var(--z-tooltip,700) explizit */ --z-toast: 8000; /* Toast-Benachrichtigungen (bh-toast-wrap) */ --z-max: 9999; /* muss ueber allem liegen: Skip-Link, Pie-Menue, Debug-Overlays */ /* ── 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%); /* Hero-Hintergrund der Rechtsseiten (Datenschutz/Impressum/AGB) — fix, nicht accent-abhaengig: derselbe dunkle Verlauf auf allen 5 Sites, der Akzent kommt nur ueber .legal-badge/.legal-header::before dazu. */ --grad-hero: linear-gradient(160deg, #0d1117 0%, #081e22 60%, #0a1e22 100%); /* ── Site-Markenfarben (fix, theme-unabhaengig) ── Fuer sitefremde Referenzen — z. B. die Footer-Cross-Links zu den jeweils anderen 4 Sites im BOWHUMAN-Oekosystem. Bewusst getrennt von --accent (das ist die Farbe der JEWEILS EIGENEN Site und kann pro Element theme-abhaengig gedacht sein); --brand-* ist immer der feste Marken-Ton. */ --brand-robin: var(--cyan); --brand-marian: var(--magenta); --brand-sherwood: var(--green); --brand-nottingham: var(--orange); } /* ── Dark Mode ── toggle via html.dark class ── */ html.dark{ --accent-on: var(--navy); /* Gegenstueck zu :root oben — Neon-Lime traegt dunkle Schrift */ --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 */ /* Nicht der rohe Markenton: #E91E8C kommt auf der dunklen Artikelflaeche (#141b27) nur auf 4.14:1 und verfehlt AA. #F05FAA schafft 5.69:1 und ist im Projekt bereits in Gebrauch (marian.css). */ --magenta-fg: #F05FAA; --orange-fg: #FF9100; --cyan-fg: #00BCD4; /* Neon-Cyan hat Kontrast 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); --nm-shadow-hover: 8px 8px 20px rgba(0,0,0,.55),-8px -8px 20px rgba(255,255,255,.05); --nm-shadow-hover-sm: 6px 6px 16px rgba(0,0,0,.5),-6px -6px 16px rgba(255,255,255,.04); } /* ── 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)} /* 26.08.2026 (Peter): ::selection und :focus-visible waren hart auf sherwoods Neon-Lime-Gruen verdrahtet - global, fuer ALLE 5 Sites, nicht nur sherwood ("selbst wenn da ein farbiger Rand sein sollte - waere das cyan und nicht gruen" bei www/robin). --accent ist bereits pro Site korrekt gesetzt (cyan bei robin/www, magenta bei marian, gruen bei sherwood, orange bei nottingham) und aendert sich nicht zwischen Hell/Dunkel-Theme (siehe .nav/.footer, die genau deshalb schon var(--accent) nutzen) - daher genuegt hier EINE Regel ohne separaten Dark-Override. */ ::selection{background:color-mix(in srgb, var(--tint) 20%, transparent);color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)} :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; --magenta-fg: #F05FAA; --orange-fg: #FF9100; --cyan-fg: #00BCD4; --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); --nm-shadow-hover: 8px 8px 20px rgba(0,0,0,.55),-8px -8px 20px rgba(255,255,255,.05); --nm-shadow-hover-sm: 6px 6px 16px rgba(0,0,0,.5),-6px -6px 16px rgba(255,255,255,.04); } } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }