@charset "UTF-8";
/* Korrektur 2026-08-20 (Peter, profile-edit.html: "Warum steht da Text
   neben der 5" im Tag-Dropdown, Geburtsdatum) — die aktive Option im
   Custom-Select (.bh-sel-opt.active::after, s. weiter unten) hängt per
   CSS content:'✓' ein Häkchen an. Extern verlinkte CSS-Dateien haben eine
   EIGENE Zeichensatz-Erkennung, unabhängig vom <meta charset> der HTML-
   Seite (Reihenfolge: HTTP-Content-Type-Header → @charset hier → BOM →
   Fallback auf das Encoding des verlinkenden Dokuments). Ohne @charset-
   Deklaration UND ohne charset im HTTP-Header kann der Server/Browser die
   UTF-8-Bytes des Häkchens als Windows-1252 lesen → "âœ"" statt "✓" (exakt
   der gemeldete Mojibake-Text neben der "5"). Fix zweigleisig: @charset
   hier erzwingt UTF-8 unabhängig vom Server, UND das Häkchen selbst ist
   jetzt als reine ASCII-Escape-Sequence geschrieben (content:'\2713'
   statt des rohen ✓-Zeichens) — dadurch ist die Zeile komplett
   encoding-unabhängig, selbst falls @charset von einem Proxy/Server
   überschrieben würde. */
/* @font-face absichtlich nicht hier — jede App lädt Fonts via ihre eigene
   foundation.css mit korrekten pfad-relativen URLs (robin, littlejohn, marian …)
   Das Design-System Demo lädt Fonts via ds-demo.css (relativ zu demos/css/).    */

/* ════════════════════════════════════════════════════════════
   BOWHUMAN WEBAPP-LAYER  ·  v0.2  ·  2026-06-16
   ────────────────────────────────────────────────────────────
   Patterns für interaktive WebApps (Marian, Admin, Archers Nest,
   Nottingham). NICHT für Marketing-Websites.

   • Setzt bowhuman-tokens.css voraus (Farben, Fonts, Scale).
   • ALLE Regeln sind unter `html.bh-app` gekapselt → kann eine
     Website nicht beeinflussen (Trennung Web vs WebApp).
   • Apps binden ein:  <html class="bh-app dark"> + tokens + DIESE Datei.

   Doku: Dokumentation/styleguide-architektur.md
   Kanonische Quelle: Websites/shared/bowhuman-app.css
════════════════════════════════════════════════════════════ */

/* ── App-spezifische Token-Anpassungen (gekapselt) ───────────── */
html.bh-app {
  --line-app:    1.45;          /* dichter als Website (1.65) */
  --app-gap:     var(--sp-lg);
  --app-pad:     var(--sp-lg);
  --app-radius:  var(--r-lg);
  --topbar-h:    56px;
  --sidebar-w:   248px;
  /* Accent-System (pro App überschreibbar — z.B. Nottingham setzt Orange) */
  --accent:      var(--cyan);
  /* Gegenstueck fuer theme-feste dunkle Flaechen (.app-topbar). Wer --accent
     setzt, setzt auch --accent-dark-bg -- siehe bowhuman-tokens.css:33 und
     00-foundations.md "Theme-feste Flaechen". Hier Cyan, passend zum
     App-Default darueber; Sherwood/Marian/Nottingham binden es eigen um. */
  --accent-dark-bg: var(--cyan);
  --accent-dk:   var(--cyan-dk);
  /* 28.08.2026: stand auf #fff. Weiss auf --cyan (#00BCD4) sind 2.30:1 —
     unter jeder Schwelle. Dieselbe Flaeche mit --navy ergibt 8.24:1.
     Betrifft jede App-Seite ohne eigene Accent-Bindung (u.a.
     operator-parcours-edit) und die Defaults von robin/marian/littlejohn. */
  --accent-on:   var(--navy);
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-dk));
  --accent-dim:  color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-bd:   color-mix(in srgb, var(--accent) 28%, transparent);
  /* Semantische Status-Farben — sie stehen im geteilten Satz und werden
     hier NICHT mehr wiederholt.

     Bis 28.08.2026 stand hier eine Kopie mit den DUNKLEN Werten
     (--ok: var(--green), --warn: #FF9100, --err: #F44336), fest fuer beide
     Themes. html.bh-app und :root sind dasselbe Element, und (0,1,1) schlaegt
     (0,1,0) — die Kopie gewann also immer. Deshalb brauchte es weiter unten
     einen zweiten Block html.bh-app:not(.dark), der die hellen Werte mit
     (0,2,1) zurueckholte. Zwei Kopien, die sich gegenseitig korrigierten.

     Ohne beide gilt wieder der geteilte Satz: :root im Hellen, html.dark im
     Dunkeln — beides theme-adaptiv und an einer Stelle gepflegt. Die Werte
     bleiben dieselben, mit einer Ausnahme: --warn ist im Hellen jetzt
     --orange-fg (#A85400, 5.34:1 auf Weiss) statt #C45F00, das seine
     AA-Zusage nie eingehalten hat (4.21 / 3.86 / 3.52).

     --info braucht ebenfalls keinen Eintrag: der Satz setzt --info auf
     var(--accent), und --accent wird eine Zeile weiter oben auf denselben
     Element neu gebunden. Siehe Vault: reference_schattenkopie_des_tokensatzes. */
  /* Dim + Border Tints (für Chips, Notices, Glows) */
  /* --ok-dim fehlte als einziges der vier; .chip.ok trug den Wert deshalb
     als Rueckfall direkt in der Regel und waere einer Aenderung an --ok
     nicht gefolgt. Im Dunkeln derselbe Wert wie bisher, im Hellen ohnehin
     weiter unten ueberschrieben. */
  --ok-dim:      color-mix(in srgb, var(--ok)    12%, transparent);
  --info-dim:    color-mix(in srgb, var(--info)  12%, transparent);
  --info-bd:     color-mix(in srgb, var(--info)  28%, transparent);
  --warn-dim:    color-mix(in srgb, var(--warn)  12%, transparent);
  --warn-bd:     color-mix(in srgb, var(--warn)  28%, transparent);
  --err-dim:     color-mix(in srgb, var(--err)   12%, transparent);
  --err-bd:      color-mix(in srgb, var(--err)   28%, transparent);
  --panel-bg:    var(--white);          /* nutzt Dark-Token, wenn .dark gesetzt */
  --panel-border: var(--border);
  /* ── Intent-Token-Alias (2026-08-19, Button-Pill-Konsolidierung) ──
     Additive Namensebene über dem bestehenden Accent-System — KEIN Rename.
     Zeigt vorerst 1:1 auf --accent/--accent-dk/--accent-on, die jede App
     bereits korrekt pro Kontext überschreibt (Sherwood=Grün+Navy-Text,
     Nottingham=Orange+Weiß-Text, Operator=Orange+Weiß-Text). Neue
     Button-/Pill-Klassen sollen ab jetzt --intent-primary* referenzieren,
     nicht --accent* direkt — Vorbereitung für eine spätere zentrale
     foundations.css, ohne heute schon etwas umzubenennen oder zu brechen. */
  --intent-primary:       var(--accent);
  --intent-primary-hover: var(--accent-dk);
  --intent-primary-on:    var(--accent-on);
  /* ── Sportliche Daten-Semantik (theme-invariant, App-übergreifend) ──
     Alias-Ebene analog zu marian-tokens.css (--hit-kill/--hit-wound/
     --hit-miss existieren dort bereits identisch benannt) — beide Systeme
     nutzen ab jetzt dasselbe Vokabular für dieselben, bereits identischen
     Hex-Werte (Cyan #00BCD4 / Magenta #E91E8C / Grau #9e9e9e). */
  --hit-kill:    var(--cyan);
  --hit-wound:   var(--magenta);
  --hit-miss:    var(--miss);
}

/* App-Shell füllt den Viewport — KEIN Nav-Offset wie auf Websites */
html.bh-app, html.bh-app body {
  height: 100%;
}
html.bh-app body {
  padding-top: 0;
  margin: 0;
  line-height: var(--line-app);
  overflow: hidden;                      /* Scroll passiert in App-Bereichen */
  background: var(--bg);
  color: var(--text-primary);
  font-weight: var(--fw-light);          /* 300 — minimalistischer Standard-Lesetext */
}

/* ── Schriftgrößen-Toggle (aA−/aA+, 2026-08-19) ──────────────────
   Button/Logik lebt im Nav-Modul (sherwood-nav.js — NAV_CSS enthält
   dieselbe Regel unscoped, da nicht alle Seiten dort bowhuman-app.css
   laden). Diese Kopie hier nur, damit Seiten, die bowhuman-app.css
   bereits im <head> laden (also VOR dem Nav-Modul), die Regel schon
   beim ersten Paint zur Verfügung haben — kein Warten auf init().
   Relative Skalierung (112.5%), damit abweichende Root-Größen anderer
   Bereiche korrekt mitskalieren. Funktioniert dank rem-Umstellung vom
   2026-08-19 (Button-Pill-Konsolidierung §P7). */
html.bh-app.bh-fontsize-large { font-size: 112.5%; }

/* ════════════════════════════════════════════════════════════
   BREAKPOINTS — als CSS Custom Properties (read-only, für JS)
   Scope: html.bh-app
   sm  480px  — Smartphone Ende
   md  768px  — Tablet / Landscape
   lg 1024px  — Desktop-Minimum (Marian)
   xl 1280px  — Voller Desktop
════════════════════════════════════════════════════════════ */
html.bh-app {
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT-UTILITIES
   Philosophie: Flexible Container — Kinder bestimmen Größe.
   Niemals feste px-Breiten auf Content-Containern.
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */

/* ── Stack: vertikale Kinder-Reihung ──────────────────────
   Ersetzt margin-bottom überall wo Kinder gestapelt werden  */
.bh-app .bh-stack{display:flex;flex-direction:column;gap:var(--bh-gap,var(--sp-md))}
.bh-app .bh-stack--xs{--bh-gap:var(--sp-xs)}
.bh-app .bh-stack--sm{--bh-gap:var(--sp-sm)}
.bh-app .bh-stack--lg{--bh-gap:var(--sp-lg)}
.bh-app .bh-stack--xl{--bh-gap:var(--sp-xl)}

/* ── Cluster: Zeile · wrappend · Lücken rundum ─────────────
   Für Button-Gruppen, Chips, Badges, Filter-Bars            */
.bh-app .bh-cluster{display:flex;flex-wrap:wrap;gap:var(--bh-gap,var(--sp-sm));align-items:center}
.bh-app .bh-cluster--sm{--bh-gap:var(--sp-xs)}
.bh-app .bh-cluster--lg{--bh-gap:var(--sp-md)}
.bh-app .bh-cluster--stretch{align-items:stretch}

/* ── Grid: auto-fit · fluid ────────────────────────────────
   --bh-grid-min steuert minimale Spaltenbreite.
   Spaltenzahl passt sich automatisch an → kein festes breakpoint.  */
.bh-app .bh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--bh-grid-min,200px),1fr));gap:var(--bh-gap,var(--sp-md))}
/* Semantische Preset-Varianten */
.bh-app .bh-grid--kpi  {--bh-grid-min:120px;--bh-gap:var(--sp-sm)}   /* KPI-Kacheln */
.bh-app .bh-grid--cards{--bh-grid-min:240px;--bh-gap:var(--sp-md)}   /* Event-/Content-Cards */
.bh-app .bh-grid--form {--bh-grid-min:180px;--bh-gap:var(--sp-sm)}   /* Formular-Felder */
.bh-app .bh-grid--wide {--bh-grid-min:320px;--bh-gap:var(--sp-md)}   /* Info-Panels, Widgets */
/* Feste Spaltenzahl (erzwungen) */
.bh-app .bh-grid--2{grid-template-columns:repeat(2,1fr)}
.bh-app .bh-grid--3{grid-template-columns:repeat(3,1fr)}
.bh-app .bh-grid--4{grid-template-columns:repeat(4,1fr)}
/* Responsive Overrides für enge Viewports */
@media(max-width:599px){
  .bh-app .bh-grid--2,.bh-app .bh-grid--3,.bh-app .bh-grid--4{grid-template-columns:1fr}
}
@media(min-width:600px) and (max-width:899px){
  .bh-app .bh-grid--3,.bh-app .bh-grid--4{grid-template-columns:repeat(2,1fr)}
}

/* ── Sidebar-Layout: Nav + Content ────────────────────────
   Setzt --bh-sidebar-w als Custom Property (Default 240px).
   Sidebar collapst unter md via --bh-sidebar-w:0 + overflow:hidden. */
.bh-app .bh-sidebar-layout{display:grid;grid-template-columns:var(--bh-sidebar-w,240px) 1fr;min-height:0;flex:1}
.bh-app .bh-sidebar-layout__aside{overflow-y:auto;border-right:1px solid var(--border)}
.bh-app .bh-sidebar-layout__main{overflow-y:auto;min-width:0}
@media(max-width:767px){
  .bh-app .bh-sidebar-layout{grid-template-columns:1fr}
  .bh-app .bh-sidebar-layout__aside{display:none}
  .bh-app .bh-sidebar-layout__aside.is-open{display:block;position:fixed;inset:0;z-index:var(--z-overlay);background:var(--nm-bg)}
}

/* ── Content-Breiten-Begrenzung ────────────────────────────
   Verhindert zu breite Textzeilen auf großen Viewports.      */
.bh-app .bh-content--narrow {max-width: 480px}   /* Formulare, Einzel-Felder */
.bh-app .bh-content--mid    {max-width: 720px}   /* Artikel, Listen */
.bh-app .bh-content--wide   {max-width: 960px}   /* Dashboards, mehrspaltig */
.bh-app .bh-content--full   {max-width: none}    /* Tabellen, Karten — kein Limit */

/* ── Responsive App-Shell ──────────────────────────────────
   Unterhalb md: Sidebar ausgeblendet, Bottom Nav aktiv       */
@media(max-width:767px){
  .bh-app .app-sidebar{display:none}
  .bh-app .app-main{padding:var(--sp-md)}
}

/* ════ SHELL ════════════════════════════════════════════════ */
.bh-app .app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.bh-app .app-body {            /* Sidebar + Main nebeneinander */
  display: flex;
  flex: 1;
  min-height: 0;              /* erlaubt internes Scrollen */
}
.bh-app .app-main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: var(--app-pad);
}

/* ── Topbar ── */
.bh-app .app-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  height: var(--topbar-h);
  flex-shrink: 0;
  padding: 0 var(--app-pad);
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid var(--border);
}
.bh-app .app-topbar .app-brand {
  display: flex; align-items: center; gap: var(--sp-sm);
  font-weight: var(--fw-black); letter-spacing: .01em;   /* 800 — Markenname = Display */
}
.bh-app .app-topbar .app-spacer { margin-left: auto; }

/* ── Topbar: Breadcrumb-Nav ─────────────────────────────── */
.bh-app .tb-crumbs{display:flex;align-items:center;min-width:0;overflow:hidden}
.bh-app .tb-crumb-root{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--text-muted-dark-bg);font-size:0.6875rem;font-weight:700;letter-spacing:.04em;flex-shrink:0;transition:color .15s}
.bh-app .tb-crumb-root:hover{color:rgba(255,255,255,.7)}
/* 27.09.2026: BOWHUMAN-App-Icon statt "B" (Kap. 10) -- absolut, Datei liegt je Site unter /app-icons/ (bisher nur sherwood) */
.bh-app .tb-b-icon{width:32px;height:32px;background:url('/app-icons/bowhuman.svg') center/contain no-repeat;display:flex;align-items:center;justify-content:center;font-size:0;color:transparent;overflow:hidden;flex-shrink:0}
.bh-app .tb-crumb-sep{font-size:0.75rem;color:var(--text-muted-dark-bg);padding:0 6px;flex-shrink:0;user-select:none}
.bh-app .tb-crumb{font-size:0.8125rem;font-weight:600;color:var(--text-muted-dark-bg);text-decoration:none;white-space:nowrap;transition:color .15s;flex-shrink:0}
.bh-app a.tb-crumb:hover{color:rgba(255,255,255,.8)}
.bh-app .tb-crumb.active{color:#fff;font-weight:700;cursor:default}
/* Topbar: Rechte Seite (User, Actions, Controls) */
.bh-app .tb-user-chip{display:flex;align-items:center;gap:6px;padding:2px 8px 2px 2px;border-radius:var(--r-full);background:var(--accent-dim);border:1px solid var(--accent-bd);flex-shrink:0}
.bh-app .tb-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;font-size:0.625rem;font-weight:800;color:var(--accent-on);flex-shrink:0;overflow:hidden}
.bh-app .tb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bh-app .tb-username{font-size:0.6875rem;font-weight:700;color:var(--accent);white-space:nowrap}
.bh-app .tb-action-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--accent-bd);background:var(--accent-dim);color:var(--accent);font-size:0.6875rem;font-weight:700;cursor:pointer;font-family:var(--font-base);transition:background .15s,border-color .15s;white-space:nowrap;flex-shrink:0}
.bh-app .tb-action-btn:hover{background:var(--accent-t12,rgba(255,255,255,.1));border-color:var(--accent)}
.bh-app .tb-action-btn i{font-size:0.8125rem}
.bh-app .tb-icon-btn{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:transparent;color:var(--text-muted-dark-bg);cursor:pointer;font-size:0.8125rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;font-family:var(--font-base);flex-shrink:0}
.bh-app .tb-icon-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Topbar: Sprach-Dropdown ── (promoted aus club/index.html, 2026-07-13) */
.bh-app .tb-lang-wrap{position:relative;flex-shrink:0}
.bh-app .tb-lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--navy);border:1px solid var(--accent-bd);border-radius:10px;padding:5px;min-width:148px;box-shadow:var(--shadow-popup);display:none;flex-direction:column;gap:1px;z-index:var(--z-overlay)}
.bh-app .tb-lang-dropdown.open{display:flex}
.bh-app .tb-lang-opt{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:7px;font-size:0.75rem;font-weight:600;color:rgba(255,255,255,.6);cursor:pointer;transition:all .12s;border:none;background:none;font-family:var(--font-base);text-align:left;width:100%}
.bh-app .tb-lang-opt:hover{color:#fff;background:rgba(255,255,255,.06)}
.bh-app .tb-lang-opt.active{color:var(--accent);background:var(--accent-dim);font-weight:700}
.bh-app .tb-lang-opt .tb-lang-code{font-size:0.625rem;font-weight:800;letter-spacing:.06em;color:var(--text-muted-dark-bg)}
.bh-app .tb-lang-opt.active .tb-lang-code{color:var(--accent-bd)}

/* ── Topbar: Kontext-Switcher (.tb-ctx-*) und Schriftgröße (.tb-fontsize-*) ──
   19.10.2026 aus der NAV_CSS von js/sherwood-nav.js gehoben, tokenisiert
   (Konzepte/tuck-training/ANGLEICH-DESIGN.md E26: Tuck ist der zweite
   Konsument). Akzent über --accent — in .app-topbar ist das --accent-dark-bg
   (Regel weiter unten, LICHT-THEME), also die Brand-Farbe auf --navy.
   Additiv: die #sherwood-nav-Regeln sind spezifischer und gelten dort weiter.
   Die Schriftgrößen-Klasse selbst (html.bh-app.bh-fontsize-large) steht oben. */
.bh-app .tb-ctx-wrap{position:relative;flex-shrink:0}
.bh-app .tb-ctx-trigger{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.75);font-size:0.75rem;font-weight:700;cursor:pointer;font-family:var(--font-base);white-space:nowrap;max-width:200px;transition:border-color .15s,color .15s}
.bh-app .tb-ctx-trigger:hover{border-color:var(--accent);color:var(--accent)}
.bh-app .tb-ctx-trigger span{overflow:hidden;text-overflow:ellipsis}
.bh-app .tb-ctx-trigger i{font-size:0.875rem;flex-shrink:0}
.bh-app .tb-ctx-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;max-width:300px;background:var(--navy);border:1px solid var(--accent-bd);border-radius:10px;box-shadow:var(--shadow-popup);display:none;flex-direction:column;z-index:var(--z-drawer);max-height:min(70vh,480px);overflow-y:auto}
/* rechtsbündig, wenn der Trigger am rechten Rand sitzt (schmale Topbar) */
.bh-app .tb-ctx-panel--end{left:auto;right:0}
.bh-app .tb-ctx-panel.open{display:flex}
.bh-app .tb-ctx-search-wrap{padding:8px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:var(--navy);z-index:1}
.bh-app .tb-ctx-search{width:100%;padding:7px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;font-size:0.75rem;font-family:var(--font-base);outline:none}
.bh-app .tb-ctx-search:focus{border-color:var(--accent)}
.bh-app .tb-ctx-group{padding:4px 0}
.bh-app .tb-ctx-group-label{padding:8px 12px 4px;font-size:0.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted-dark-bg)}
.bh-app .tb-ctx-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:none;background:none;color:rgba(255,255,255,.75);font-size:0.78125rem;font-weight:600;text-align:left;cursor:pointer;font-family:var(--font-base);transition:background .12s,color .12s}
.bh-app .tb-ctx-item:hover{background:rgba(255,255,255,.06);color:#fff}
.bh-app .tb-ctx-item.current{color:var(--accent)}
.bh-app .tb-ctx-item .tb-ctx-item-icon{font-size:0.875rem;width:16px;flex-shrink:0;text-align:center}
.bh-app .tb-ctx-item .tb-ctx-item-sub{margin-left:auto;font-size:0.5625rem;color:var(--text-muted-dark-bg);text-transform:uppercase;font-weight:700;flex-shrink:0;padding-left:6px}
.bh-app .tb-ctx-empty{padding:16px 12px;text-align:center;font-size:0.75rem;color:var(--text-muted-dark-bg)}
/* Konto-Zeile oben im Panel („Angemeldet als …", Fund #24) */
.bh-app .tb-ctx-account{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:2px}
.bh-app .tb-ctx-account-label{font-size:0.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted-dark-bg)}
/* kleinere Avatar-Variante im Trigger */
.bh-app .tb-avatar-sm{width:22px;height:22px;font-size:0.5rem}
/* Schriftgröße aA−/aA+ */
.bh-app .tb-fontsize-wrap{display:flex;align-items:center;border:1px solid rgba(255,255,255,.15);border-radius:var(--r-full);overflow:hidden;flex-shrink:0}
.bh-app .tb-fontsize-btn{border:none;background:transparent;color:var(--text-muted-dark-bg);font-family:var(--font-base);font-size:0.6875rem;font-weight:800;cursor:pointer;padding:5px 9px;line-height:1;transition:background .15s,color .15s}
.bh-app .tb-fontsize-btn:hover{color:var(--accent)}
.bh-app .tb-fontsize-btn.active{background:var(--accent-dim);color:var(--accent)}
.bh-app .tb-fontsize-btn+.tb-fontsize-btn{border-left:1px solid rgba(255,255,255,.15)}

/* ── Sidebar ── */
.bh-app .app-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  overflow-y: auto;
  padding: var(--app-pad);
  background: var(--nm-bg);
  border-right: 1px solid var(--border);
}
.bh-app .app-nav-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  cursor: pointer; text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);   /* 600 */
  /* 10.09.2026: Die Klasse setzte weder background noch border. An einem <a>
     faellt das nicht auf, an einem <button> erbt sie ButtonFace — hellgrauer
     Kasten mit heller Schrift, im Dunkelmodus unlesbar. Das HTML-Pattern in
     03-organisms.md zeigt selbst ein <button class="app-nav-item is-danger">,
     die Klasse wird also fuer beides angeboten und muss fuer beides tragen. */
  background: transparent; border: none; font-family: inherit;
  width: 100%; text-align: left;
}
.bh-app .app-nav-item:hover { background: var(--accent-dim); color: var(--accent); }
.bh-app .app-nav-item.active,
.bh-app .app-nav-item.is-active { background: var(--accent); color: var(--accent-on); }

/* ── Sidebar: Icon-Rail (eingeklappt) ──
   17.09.2026, Inventar-Review: mehr horizontaler Platz fuer breite
   Tabellen (operator-app.html #p-inv). Toggle-Button sitzt in der Sidebar
   selbst (siehe dortiges Markup + JS), der Zustand wird pro Browser
   gemerkt (localStorage-Schluessel 'bh-sidebar-collapsed'). Das Label
   steckt in einem eigenen .app-nav-item__label, damit es sich ausblenden
   laesst, ohne das Icon anzufassen -- Seiten ohne dieses <span> bekommen
   exakt das bisherige Verhalten, die Klasse ist rein additiv. Siehe
   Dokumentation/design-system/03-organisms.md, Abschnitt "Sidebar". */
.bh-app .app-sidebar{transition:width 180ms cubic-bezier(.4,0,.2,1)}
.bh-app .app-nav-item__label{white-space:nowrap}
.bh-app .app-sidebar.is-collapsed{
  width:64px; padding:var(--sp-sm) var(--sp-xs);
  /* Kein Scrollbalken: der Prototyp war mit 52px zu schmal, das Icon plus
     sein Fokus-/Hover-Kreis liefen ueber und erzwangen Overflow (Review
     17.09.2026, Bugreport 1). 64px plus zentrierte 44px-Buttons passen. */
  overflow-x:hidden; overflow-y:hidden;
}
.bh-app .app-sidebar.is-collapsed .op-side-lbl,
.bh-app .app-sidebar.is-collapsed .op-side-note,
.bh-app .app-sidebar.is-collapsed .app-nav-item__label{display:none}
.bh-app .app-sidebar.is-collapsed .app-nav-item{
  justify-content:center; width:44px; height:44px; padding:0;
  margin:0 auto var(--sp-xs);
}
.bh-app .app-sidebar.is-collapsed .app-nav-item i{font-size:1.0625rem}
.bh-app .app-sidebar-toggle{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px; margin:0 0 var(--sp-sm) auto;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:transparent; color:var(--text-muted); cursor:pointer;
}
.bh-app .app-sidebar-toggle:hover{color:var(--accent); border-color:var(--accent)}
.bh-app .app-sidebar.is-collapsed .app-sidebar-toggle{margin:0 auto var(--sp-md)}

/* ════ FLÄCHEN ══════════════════════════════════════════════ */
.bh-app .app-panel,
.bh-app .app-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--app-radius);
  box-shadow: var(--shadow-card);
}
.bh-app .app-card { padding: var(--app-pad); }
.bh-app .app-panel-head {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-md) var(--app-pad);
  border-bottom: 1px solid var(--panel-border);
  font-weight: var(--fw-semibold);    /* 600 — Abschnittslabel, kein Schreien */
  font-size: var(--text-sm);
}

/* Overlay / HUD (z.B. Live-View) */
.bh-app .app-overlay {
  position: absolute;
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--app-radius);
  box-shadow: var(--shadow-popup);
  backdrop-filter: blur(6px);
}

/* Split mit Splitter */
.bh-app .app-split { display: flex; min-height: 0; }

/* Vertikale Aufteilung (Standard): Pane oben/unten */
.bh-app .app-splitter {
  flex: 0 0 6px; cursor: row-resize;
  background: var(--border);
  transition: background .15s;
  user-select: none;
  position: relative;
  z-index: 1;
}
.bh-app .app-splitter:hover,
.bh-app .app-splitter.is-dragging { background: var(--accent); }

/* Horizontale Aufteilung: Pane links/rechts */
.bh-app .app-split--h { flex-direction: row; }
.bh-app .app-split--h > .app-splitter { flex: 0 0 6px; cursor: col-resize; }

/* Pane-Klassen */
.bh-app .app-pane { overflow: auto; min-height: 0; min-width: 0; }
.bh-app .app-pane--fixed { flex: 0 0 auto; }
.bh-app .app-pane--fill  { flex: 1 1 0; }

/* ════ DATEN ════════════════════════════════════════════════ */
.bh-app .app-toolbar {
  display: flex; align-items: center; gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-bottom: var(--app-gap);
}
.bh-app .app-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}
.bh-app .app-table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: var(--fw-semibold);   /* 600 */
  color: var(--text-secondary);
  background: var(--nm-bg);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.bh-app .app-table td {
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--panel-border);
}
.bh-app .app-table tbody tr:hover { background: var(--accent-t07, rgba(0,188,212,.07)); }

/* KPI-Kachel */
.bh-app .app-kpi { padding: var(--app-pad); }
.bh-app .app-kpi .kpi-value { font-size: var(--text-2xl); font-weight: var(--fw-black); line-height: 1.1; font-variant-numeric: tabular-nums; }   /* 800, Mono-ähnlich durch tabular-nums */
.bh-app .app-kpi .kpi-label { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ════ CONTROLS (kanonisch, accent-getrieben) ═══════════════
   Aus dem Nottingham-Admin promotet. Accent über --accent (App setzt
   ihn pro Produkt). Saubere generische Aliase neben den bewährten Namen.
   ─────────────────────────────────────────────────────────── */

/* ── Buttons ── */
/* Haupt-Button (32px)
   KORREKTUR 14.09.2026: Die Aliase .btn-primary und .btn-ghost trugen nur die
   FARBE, die Geometrie stand allein auf .btn. Wer also — wie der Kommentar
   oben es anbietet — nur den Alias schrieb, bekam einen Rahmen ohne Höhe,
   ohne Innenabstand, ohne Radius und ohne inline-flex: bei einem a-Element ein
   enges eckiges Kästchen um unterstrichenen Text. Genau so sah der Knopf
   "Alle Parcours" im Operator Nest und "Zur Startseite" im Archers Nest aus.
   Gemessen am 14.09.2026: 33 Fundstellen schrieben nur den Alias (19-mal
   btn-primary, 14-mal btn-ghost), 24 kombiniert mit .btn. Die Mehrheit der
   Verwendungen war also kaputt, nicht die Ausnahme — deshalb die Korrektur
   hier und nicht in den Seiten.
   text-decoration:none gehört ebenfalls hierher: .btn wird oft auf a-Elemente
   gesetzt, und ohne die Zeile bleibt die Unterstreichung stehen. */
.bh-app .btn,
.bh-app .btn-primary,
.bh-app .btn-ghost{height:32px;padding:0 14px;border-radius:var(--r-md);font-size:0.75rem;font-weight:var(--fw-semibold);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-base);text-decoration:none;transition:opacity .15s;white-space:nowrap;flex-shrink:0}
.bh-app .btn.primary,.bh-app .btn-primary{background:var(--accent-grad);border:none;color:var(--accent-on)}
.bh-app .btn.primary:hover,.bh-app .btn-primary:hover{opacity:.88}
.bh-app .btn.ghost,.bh-app .btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--text-secondary)}
.bh-app .btn.ghost:hover,.bh-app .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.bh-app .btn i,
.bh-app .btn-primary i,
.bh-app .btn-ghost i{font-size:0.875rem}

/* Kleiner Ghost-Button (28px, Modal-Footer etc.) — 2026-09-07 aus archers-nest.css
   konsolidiert (Button-Vereinheitlichung, war dort + in 3 Standalone-Seiten
   dupliziert). .btn-sm-primary/.btn-sm-danger bleiben bewusst in archers-nest.css,
   da nicht Teil der Sekundär-/Ghost-Konsolidierung. */
.bh-app .btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;padding:0 13px;border-radius:var(--r-lg);font-size:0.75rem;font-weight:600;line-height:1;cursor:pointer;font-family:var(--font-base);text-decoration:none;border:none;}
.bh-app .btn-sm-ghost{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.12);color:var(--text-secondary);}
.bh-app .btn-sm-ghost:hover{background:rgba(0,0,0,.09);color:var(--text-primary);}
html.dark .bh-app .btn-sm-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.65);}
html.dark .bh-app .btn-sm-ghost:hover{background:rgba(255,255,255,.1);color:#fff;}
.bh-app .btn-sm[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;}

/* Toolbar-Button (28px) */
.bh-app .tb-btn{height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--text-secondary);font-size:0.6875rem;font-weight:var(--fw-semibold);cursor:pointer;transition:border-color .15s,color .15s;font-family:var(--font-base)}.bh-app .tb-btn[hidden]{display:none}
.bh-app .tb-btn:hover{border-color:var(--accent);color:var(--accent)}
.bh-app .tb-btn i{font-size:0.8125rem}
.bh-app .tb-btn.primary{background:var(--accent-grad);border-color:transparent;color:var(--accent-on)}
.bh-app .tb-btn.primary:hover{opacity:.88}

/* Card-Action-Button (24px, klein) */
.bh-app .ca-btn{height:24px;padding:0 8px;background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted);font-size:0.625rem;font-weight:var(--fw-semibold);cursor:pointer;transition:border-color .12s,color .12s;display:flex;align-items:center;gap:4px;font-family:var(--font-base)}
.bh-app .ca-btn i{font-size:0.75rem}
.bh-app .ca-btn:hover{border-color:var(--accent);color:var(--accent)}
.bh-app .ca-btn.primary{background:var(--accent-grad);border-color:transparent;color:var(--accent-on)}
.bh-app .ca-btn.primary:hover{opacity:.88}

/* Sidebar-Footer-Button (30px, flex-1) */
.bh-app .sf-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:30px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-md);color:var(--text-muted);font-size:0.6875rem;cursor:pointer;transition:border-color .15s,color .15s;font-family:var(--font-base)}
.bh-app .sf-btn:hover{border-color:rgba(255,255,255,.2);color:var(--text-secondary)}
.bh-app .sf-btn i{font-size:0.8125rem}
.bh-app .sf-btn.danger{color:rgba(244,67,54,.7);border-color:rgba(244,67,54,.2)}

/* "kleiner Muelleimer Button" (Peter Klein, 18./19.09.2026: "kleiner
   Muelleimer button -- sowas sollte ins design system integriert werden --
   kommt ja oefter vor"). Generischer Danger-Modifier auf .ca-btn statt
   Einzelfall im Editier-Panel des Stations-Panels (operator-app.html) --
   .ca-btn ist die Card-Action-Groesse (24px), also genau das Format fuer
   "ein kleiner Loeschen-Knopf pro Listen-/Kartenzeile". Farbformel wie
   .sf-btn.danger, aber ueber --err/--err-dim/--err-bd statt fester
   rgba-Werte, damit sie in jedem Theme und jeder Akzentfarbe mitzieht. */
.bh-app .ca-btn.danger{color:var(--err);border-color:var(--err-bd)}
.bh-app .ca-btn.danger:hover{background:var(--err-dim);border-color:var(--err)}

/* Resolve/Inline-Aktion (24px, accent-getönt) */
.bh-app .resolve-btn{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;background:var(--accent-dim);border:1.5px solid var(--accent-bd);border-radius:var(--r-sm);color:var(--accent);font-size:0.625rem;font-weight:700;cursor:pointer;transition:background .12s;font-family:var(--font-base)}
.bh-app .resolve-btn:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}

/* ── Pills / Tabs (Filter, Segmented) ── */
.bh-app .filter-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.bh-app .f-chip,.bh-app .pill{height:26px;padding:0 10px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-full);color:var(--text-secondary);font-size:0.6875rem;font-weight:600;cursor:pointer;transition:border-color .12s,color .12s;font-family:var(--font-base);display:flex;align-items:center;gap:5px}
.bh-app .f-chip:hover,.bh-app .pill:hover{border-color:var(--accent-bd);color:var(--accent)}
.bh-app .f-chip.active,.f-chip.is-active,.bh-app .pill.active,.bh-app .pill.is-active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}
.bh-app .f-chip sup{font-size:0.625rem;background:color-mix(in srgb,var(--accent) 25%,transparent);padding:0 4px;border-radius:10px}
.bh-app .tab-row{display:flex;gap:4px;margin-bottom:8px}
.bh-app .tab-btn{height:26px;padding:0 10px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted);font-size:0.625rem;font-weight:700;cursor:pointer;transition:border-color .12s,color .12s;font-family:var(--font-base)}
.bh-app .tab-btn.active{border-color:var(--accent-bd);color:var(--accent)}

/* ── Status-Badges (chip) ── */
.bh-app .chip,.bh-app .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);font-size:0.625rem;font-weight:var(--fw-semibold)}
/* Status-Chips: ok · info · warn · err · muted · accent */
.bh-app .chip.ok,.bh-app .badge.ok      {background:var(--ok-dim);                       color:var(--ok)}
.bh-app .chip.info,.bh-app .badge.info  {background:var(--info-dim);                      color:var(--info)}
.bh-app .chip.warn,.bh-app .badge.warn  {background:var(--warn-dim);                      color:var(--warn)}
.bh-app .chip.err,.bh-app .badge.err    {background:var(--err-dim);                       color:var(--err)}
.bh-app .chip.muted,.bh-app .badge.muted{background:rgba(255,255,255,.08);                color:var(--text-muted)}
.bh-app .chip.cyan,.bh-app .badge.cyan  {background:var(--info-dim);color:var(--info)}    /* ⚠ deprecated → chip info */
/* accent-Chip: folgt dem App-Theme (Robin=Cyan, LittleJohn=Grün, Marian=Magenta …) */
.bh-app .chip.accent,.bh-app .badge.accent{background:var(--accent-dim);color:var(--accent)}

/* ── Auswahl-Chip (toggle, Sprachselektor) ── */
.bh-app .bh-chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-full);font-size:var(--text-sm);font-weight:var(--fw-semibold);border:1.5px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;transition:border-color .12s,background .12s,color .12s;white-space:nowrap;font-family:var(--font-base)}
.bh-app .bh-chip:hover{border-color:var(--accent-bd);color:var(--text-primary)}
.bh-app .bh-chip--active,.bh-app .bh-chip[aria-pressed="true"]{background:var(--accent-dim);border-color:var(--accent-bd);color:var(--accent)}
.bh-app .bh-chip:disabled,.bh-app .bh-chip[disabled]{opacity:.4;pointer-events:none}

/* ── Chip-Gruppe (lang-selector, filter-bar) ── */
.bh-app .bh-chip-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bh-app .live-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:rgba(180,255,46,.1);border:1px solid rgba(180,255,46,.3);border-radius:var(--r-full);font-size:0.625rem;font-weight:700;color:var(--ok)}

/* ── Formularfelder ── */
.bh-app .f-input,.bh-app .f-select,.bh-app .f-textarea,.bh-app .input,.bh-app .select{background:rgba(255,255,255,.06);border:1.5px solid var(--border);border-radius:var(--r-md);padding:8px 10px;color:var(--text-primary);font-size:0.75rem;outline:none;transition:border-color .15s;font-family:var(--font-base);width:100%}
.bh-app .f-input:focus,.bh-app .f-select:focus,.bh-app .f-textarea:focus,.bh-app .input:focus,.bh-app .select:focus{border-color:var(--accent);border-width:2px}
.bh-app .f-input::placeholder,.bh-app .f-textarea::placeholder,.bh-app .input::placeholder{color:var(--text-muted)}
/* .bh-input — Standalone-Eingabefeld aus 01-atoms.md. Bis 01.10.2026 gab es
   dafuer keine zentrale Regel: die Doku nannte die Klasse, drei Seiten
   definierten sie selbst (equipment, crm/lead, pair), und wer sie ohne
   eigene Regel benutzte -- die Spaltensuche in bowhuman-table.js --, bekam
   ein nacktes Browserfeld (Peter: "Spaltensuche nicht gestylt"). Gleiches
   Aussehen wie .f-input. :where() haelt die Spezifitaet bei einer Klasse,
   damit die Seiten mit eigener .bh-input-Regel ihren Stil behalten. */
:where(.bh-app) .bh-input{background:rgba(255,255,255,.06);border:1.5px solid var(--border);border-radius:var(--r-md);padding:7px 10px;color:var(--text-primary);font-size:0.75rem;outline:none;transition:border-color .15s;font-family:var(--font-base);width:100%;box-sizing:border-box}
:where(.bh-app) .bh-input:focus{border-color:var(--accent)}
:where(.bh-app) .bh-input::placeholder{color:var(--text-muted)}
:where(html.bh-app:not(.dark)) .bh-input{background:#fff}
/* Fund 2026-08-20 (Audit): Hintergrund stand fest auf dunklem Navy, während
   .f-select selbst var(--text-primary) als Textfarbe nutzt (Zeile oben) — im
   Hell-Theme ist --text-primary ebenfalls dunkles Navy, macht die Optionen im
   Dropdown also dunkel-auf-dunkel unlesbar. Jetzt theme-adaptiv wie der Rest
   des Formularfelds. */
.bh-app .f-select option,.bh-app .select option{background:var(--white);color:var(--text-primary)}

/* ── Select: custom Arrow, kein Browser-Default ──────────────
   Iteration 2: → .bh-select
   Wrapper .f-sel-wrap nötig für Pseudo-Element-Pfeil (accent-farbig)
   Ohne Wrapper: SVG-URL mit neutralem Grau (kein accent möglich)
──────────────────────────────────────────────────────────── */
.bh-app .f-select,.bh-app .select{
  appearance:none;-webkit-appearance:none;
  /* Fund #11 (2026-07-13): Inhalt vertikal nicht zentriert — Ursache war
     Top/Bottom-Padding (8px) ohne explizite height/line-height. Sobald eine
     Instanz height per Inline-Style überschreibt (z.B. 28px), stimmt das
     Padding nicht mehr zur Boxhöhe. Fix: feste height + line-height statt
     variabler Padding-basierter Höhe, padding-top/bottom auf 0. */
  height:36px;
  line-height:33px; /* 36px - 2×1.5px Border */
  padding-top:0;padding-bottom:0;
  padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='%23718096' d='m213.66 101.66-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 53.66 90.34L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
}
/* Kompakte Inline-Variante (z.B. Tabellen-Filter, Inline-Rollen-Dropdown) —
   gleiche height/line-height-Kopplung wie oben, nur kleiner. Ersetzt die
   bisherige Praxis, height+font-size einzeln per Inline-Style zu überschreiben
   (das war die konkrete Ursache von Fund #11). */
.bh-app .f-select-sm{height:28px;line-height:25px;font-size:0.75rem}
/* Wrapper-Variante: Pfeil als ::after, reagiert auf --accent */
.bh-app .f-sel-wrap{position:relative;display:block}
.bh-app .f-sel-wrap .f-select,.bh-app .f-sel-wrap .select{background-image:none}
.bh-app .f-sel-wrap::after{
  content:"\e136"; /* ph-caret-down (Phosphor-Light codepoint, korrigiert 2026-09-15 — war \e9be, kein gueltiger Phosphor-Light-Codepoint) */
  font-family:'Phosphor-Light';
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  font-size:0.75rem;color:var(--text-muted);pointer-events:none;
  transition:color .15s;
}
.bh-app .f-sel-wrap:focus-within::after{color:var(--accent)}

/* ── Number Input: Spinner verstecken ────────────────────────
   Iteration 2: → .bh-input[type="number"]
──────────────────────────────────────────────────────────── */
.bh-app .f-input[type="number"],.bh-app .input[type="number"]{-moz-appearance:textfield}
.bh-app .f-input[type="number"]::-webkit-inner-spin-button,
.bh-app .f-input[type="number"]::-webkit-outer-spin-button,
.bh-app .input[type="number"]::-webkit-inner-spin-button,
.bh-app .input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bh-app .search-wrap{position:relative;margin-left:auto}
.bh-app .search-wrap i{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.75rem;pointer-events:none}
.bh-app .search-input{height:28px;padding:0 10px 0 26px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:0.6875rem;background:rgba(255,255,255,.05);color:var(--text-primary);outline:none;width:180px;transition:border-color .15s;font-family:var(--font-base)}
.bh-app .search-input:focus{border-color:var(--accent)}
.bh-app .search-input::placeholder{color:var(--text-muted)}

/* ── Dichte Tabelle (tbl) ── */
.bh-app .tbl{width:100%;border-collapse:collapse;font-size:0.6875rem}
.bh-app .tbl thead th{padding:8px 12px;text-align:left;font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);border-bottom:2px solid var(--border);background:var(--white);position:sticky;top:0;white-space:nowrap}
.bh-app .tbl tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .08s}
.bh-app .tbl tbody tr:last-child{border-bottom:none}
.bh-app .tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.bh-app .tbl tbody tr.sel{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.bh-app .tbl td{padding:8px 12px;color:var(--text-primary);vertical-align:middle}
.bh-app .tbl td.muted{color:var(--text-muted)}
.bh-app .tbl td.name{font-weight:600}
.bh-app .tbl td.name small{display:block;font-size:0.625rem;color:var(--text-muted);font-weight:400}

/* ── Toggle / Dropdown (generisch) ── */
.bh-app .toggle{appearance:none;width:40px;height:22px;border-radius:var(--r-full);background:var(--border);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s}
.bh-app .toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.bh-app .toggle:checked{background:var(--accent)}
.bh-app .toggle:checked::after{transform:translateX(18px)}
.bh-app .dropdown{position:relative}
.bh-app .dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:180px;display:none;flex-direction:column;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--r-md);box-shadow:var(--shadow-popup);padding:4px;z-index:var(--z-overlay)}
.bh-app .dropdown-menu.open{display:flex}
.bh-app .dropdown-item{padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-sm);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer}
.bh-app .dropdown-item:hover{background:var(--accent-dim);color:var(--accent)}

/* ════ ACCORDION ════════════════════════════════════════════
   Kanonisch. Ersetzt ad-hoc expand-Rows in CRM und Archers Nest.
   ─────────────────────────────────────────────────────────── */
.bh-app .bh-acc{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--app-radius);overflow:hidden}
.bh-app .bh-acc-item+.bh-acc-item{border-top:1px solid var(--border)}
.bh-app .bh-acc-trigger{display:flex;align-items:center;gap:var(--sp-sm);width:100%;padding:10px var(--app-pad);background:transparent;border:none;color:var(--text-primary);font-size:var(--text-sm);font-weight:600;cursor:pointer;font-family:var(--font-base);text-align:left;transition:background .1s}
.bh-app .bh-acc-trigger:hover{background:var(--accent-dim)}
.bh-app .bh-acc-icon{margin-left:auto;font-size:0.875rem;color:var(--text-muted);transition:transform .2s;flex-shrink:0}
.bh-app .bh-acc-item.open>.bh-acc-trigger>.bh-acc-icon{transform:rotate(90deg)}
.bh-app .bh-acc-item.open>.bh-acc-trigger{color:var(--accent)}
.bh-app .bh-acc-body{display:none;padding:0 var(--app-pad) var(--app-pad);font-size:var(--text-sm);color:var(--text-secondary);border-top:1px solid var(--border);line-height:1.55}
.bh-app .bh-acc-item.open>.bh-acc-body{display:block}

/* ════ CUSTOM SELECT (bh-sel) ═══════════════════════════════
   Ersetzt .bh-hks aus CRM (standalone CSS). Canonical, scoped.
   ─────────────────────────────────────────────────────────── */
.bh-app .bh-sel{position:relative;display:inline-flex;flex-direction:column;min-width:120px}
.bh-app .bh-sel-trigger{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--panel-bg);color:var(--text-primary);font-size:0.75rem;cursor:pointer;font-family:var(--font-base);font-weight:500;transition:border-color .12s}
/* Fund #12, Fortsetzung (2026-07-13): kompakte Variante für Inline-Filter
   (ehemals native <select class="f-select-sm">, height:28px) */
.bh-app .bh-sel-trigger-sm{height:28px;font-size:0.75rem}
.bh-app .bh-sel-trigger:disabled{opacity:.5;cursor:not-allowed}
.bh-app .bh-sel-trigger:hover,.bh-app .bh-sel.open .bh-sel-trigger{border-color:var(--accent)}
.bh-app .bh-sel-arrow{margin-left:auto;font-size:0.75rem;color:var(--text-muted);transition:transform .15s;flex-shrink:0}
.bh-app .bh-sel.open .bh-sel-arrow{transform:rotate(180deg)}
.bh-app .bh-sel-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:100%;background:var(--panel-bg);border:1.5px solid var(--border);border-radius:var(--r-md);padding:4px;box-shadow:var(--shadow-popup);z-index:var(--z-overlay);max-height:240px;overflow-y:auto}
.bh-app .bh-sel.open .bh-sel-panel{display:flex;flex-direction:column}
.bh-app .bh-sel-opt{padding:6px 8px;border-radius:var(--r-sm);font-size:0.75rem;color:var(--text-secondary);cursor:pointer;transition:background .1s,color .1s;display:flex;align-items:center;gap:6px;white-space:nowrap}
.bh-app .bh-sel-opt:hover{background:var(--accent-dim);color:var(--accent)}
.bh-app .bh-sel-opt.active{color:var(--accent);font-weight:700}
.bh-app .bh-sel-opt.active::after{content:'\2713';margin-left:auto;padding-left:8px}
.bh-app .bh-sel-search{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--nm-bg);color:var(--text-primary);font-size:0.75rem;font-family:var(--font-base);outline:none;margin-bottom:3px;flex-shrink:0}
.bh-app .bh-sel-search:focus{border-color:var(--accent)}

/* Titel-Variante: derselbe echte Dropdown wie oben, nur als grosse
   Ueberschrift geskinnt statt als Formularfeld -- fuer einen Seitentitel,
   der zugleich Umschalter ist (z.B. Parcours wechseln im Sherwood-
   Szeneneditor). Keine neue Interaktion, nur ein anderer Anzug fuer
   .bh-sel-trigger (Review 19.09.2026). */
.bh-app .bh-sel--title{min-width:0}
.bh-app .bh-sel--title .bh-sel-trigger{height:auto;padding:0;border:none;background:none;
  font-size:1.25rem;font-weight:800;color:var(--text-primary);letter-spacing:-.01em}
.bh-app .bh-sel--title .bh-sel-trigger:hover,
.bh-app .bh-sel--title.open .bh-sel-trigger{border-color:transparent;color:var(--accent)}
.bh-app .bh-sel--title .bh-sel-arrow{font-size:1rem}

/* Automatik fuer jedes <select> (js/bowhuman-sel.js, Peter 01.10.2026):
   Formularfeld-Variante, Tastatur-Markierung, Fokusring, Fehlerrand,
   gesperrte Option, <optgroup>-Ueberschrift, Aufklappen nach oben bzw.
   rechtsbuendig, wenn unten bzw. rechts der Platz fehlt. */
.bh-app .bh-sel-trigger>span{white-space:nowrap;text-align:left}
.bh-app .bh-sel--field .bh-sel-trigger>span,.bh-app .bh-sel[style*="width"] .bh-sel-trigger>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bh-app .bh-sel-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.bh-app .bh-sel-trigger.is-error{border-color:var(--err)}
.bh-app .bh-sel--field{display:flex;width:100%;min-width:0}
.bh-app .bh-sel--field .bh-sel-trigger{height:auto;min-height:34px;padding:7px 10px}
.bh-app .bh-sel--field .bh-sel-trigger.bh-sel-trigger-sm{min-height:28px;padding:0 10px}
.bh-app .bh-sel-opt.is-hl{background:var(--accent-dim);color:var(--accent)}
.bh-app .bh-sel-opt.is-disabled{opacity:.45;cursor:default}
.bh-app .bh-sel-opt.is-disabled:hover{background:none;color:var(--text-secondary)}
.bh-app .bh-sel-group{padding:6px 8px 2px;font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.bh-app .bh-sel.bh-sel--up .bh-sel-panel{top:auto;bottom:calc(100% + 4px)}
.bh-app .bh-sel.bh-sel--end .bh-sel-panel{left:auto;right:0}

/* ════ RANGE SLIDER (bh-range) ══════════════════════════════
   Accent-getrieben, nativer <input type=range>. Ersetzt CRM
   Alpha-SVG-Slider und andere Ad-hoc-Implementierungen.
   ─────────────────────────────────────────────────────────── */
.bh-app .bh-range-wrap{display:flex;flex-direction:column;gap:4px}
.bh-app .bh-range-val{font-size:0.75rem;font-weight:700;color:var(--accent);font-family:var(--font-mono);text-align:right}
.bh-app .bh-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--r-full);outline:none;cursor:pointer;background:linear-gradient(to right,var(--accent) var(--pct,40%),rgba(255,255,255,.12) var(--pct,40%))}
.bh-app .bh-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-grad);border:2.5px solid var(--bg);box-shadow:0 0 0 1.5px var(--accent);cursor:pointer}
.bh-app .bh-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-grad);border:2.5px solid var(--bg);box-shadow:0 0 0 1.5px var(--accent);cursor:pointer}
.bh-app .bh-range-labels{display:flex;justify-content:space-between;font-size:0.625rem;color:var(--text-muted);font-family:var(--font-mono)}

/* ════ EVENT / TURNIERKARTE ═════════════════════════════════
   Aus Archers Nest promotet. Kanonisches Pattern für Termin-Listen.
   ─────────────────────────────────────────────────────────── */
.bh-app .event-item{display:flex;align-items:flex-start;gap:12px;padding:12px var(--app-pad);border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background .1s;cursor:pointer}
.bh-app .event-item:hover{background:var(--accent-dim)}
.bh-app .event-item:last-child{border-bottom:none}
.bh-app .event-date-box{flex-shrink:0;width:40px;text-align:center;background:var(--panel-bg);border:1px solid var(--border);border-radius:var(--r-md);padding:4px 0}
.bh-app .event-day{font-size:1rem;font-weight:800;color:var(--text-primary);line-height:1.1}
.bh-app .event-mon{font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.bh-app .event-name{font-size:0.8125rem;font-weight:700;color:var(--text-primary);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-app .event-loc{font-size:0.6875rem;color:var(--text-muted);display:flex;align-items:center;gap:4px;margin-bottom:5px}
.bh-app .event-meta-row{display:flex;flex-wrap:wrap;gap:4px}
.bh-app .event-meta-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--r-full);background:rgba(255,255,255,.06);border:1px solid var(--border);font-size:0.625rem;color:var(--text-muted)}
.bh-app .chip-turnier{background:rgba(0,188,212,.12);color:var(--cyan-fg);border:1px solid rgba(0,188,212,.2);font-size:0.625rem;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}
.bh-app .chip-event{background:rgba(233,30,140,.12);color:var(--magenta);border:1px solid rgba(233,30,140,.2);font-size:0.625rem;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}
.bh-app .chip-training{background:rgba(180,255,46,.10);color:var(--ok);border:1px solid rgba(180,255,46,.18);font-size:0.625rem;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}
.bh-app .event-distance{font-size:0.6875rem;color:var(--text-muted);font-weight:700}

/* ════ DRAG & DROP (bh-dnd) ════════════════════════════════
   Equipment-Set-Builder aus Archers Nest. Auch für andere
   Ordnungs-/Zusammenstell-UIs (Gruppenplanung, Routing).
   ─────────────────────────────────────────────────────────── */
.bh-app .bh-dnd-shelf{display:flex;flex-wrap:wrap;gap:8px;padding:var(--app-pad);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);min-height:52px;align-items:flex-start}
.bh-app .bh-dnd-shelf-label{width:100%;font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:2px}
.bh-app .bh-dnd-item{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--panel-bg);border:1.5px solid var(--border);border-radius:var(--r-md);font-size:0.75rem;font-weight:600;color:var(--text-primary);cursor:grab;user-select:none;transition:border-color .12s,box-shadow .12s,opacity .12s}
.bh-app .bh-dnd-item:hover{border-color:var(--accent-bd)}
.bh-app .bh-dnd-item.dragging{opacity:.35;cursor:grabbing}
.bh-app .bh-dnd-item i{color:var(--text-muted);font-size:0.875rem}
.bh-app .bh-dnd-zone{min-height:80px;border:2px dashed var(--border);border-radius:var(--r-lg);padding:var(--app-pad);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:0.75rem;transition:border-color .15s,background .15s;flex-wrap:wrap;gap:8px;align-content:flex-start}
.bh-app .bh-dnd-zone:empty::before{content:attr(data-placeholder);color:var(--text-muted);font-size:0.75rem;pointer-events:none}
.bh-app .bh-dnd-zone.dragover{border-color:var(--accent);background:var(--accent-dim)}
.bh-app .bh-dnd-slot{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--accent-dim);border:1.5px solid var(--accent-bd);border-radius:var(--r-md);font-size:0.75rem;font-weight:600;color:var(--accent)}
.bh-app .bh-dnd-slot .dnd-remove{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;display:flex;align-items:center;font-size:0.8125rem;opacity:.7;transition:opacity .1s}
.bh-app .bh-dnd-slot .dnd-remove:hover{opacity:1}

/* ════ ACCORDION ════════════════════════════════════════════
   Iteration 2: → .bh-accordion__trigger etc. (BEM bereits korrekt)
   ─────────────────────────────────────────────────────────── */
.bh-app .bh-accordion{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.bh-app .bh-accordion__item{border-bottom:1px solid var(--border)}
.bh-app .bh-accordion__item:last-child{border-bottom:none}
.bh-app .bh-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px var(--app-pad);background:none;border:none;color:var(--text-primary);font-size:0.8125rem;font-weight:var(--fw-semibold);cursor:pointer;text-align:left;font-family:var(--font-base);transition:background .1s}
.bh-app .bh-accordion__trigger:hover{background:var(--accent-dim)}
.bh-app .bh-accordion__icon{color:var(--text-muted);font-size:0.875rem;transition:transform .2s;flex-shrink:0}
.bh-app .bh-accordion__item.is-open .bh-accordion__icon{transform:rotate(180deg)}
.bh-app .bh-accordion__body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.bh-app .bh-accordion__item.is-open .bh-accordion__body{max-height:600px}
.bh-app .bh-accordion__content{padding:0 var(--app-pad) 14px;font-size:0.8125rem;color:var(--text-secondary);line-height:1.55}

/* ════ ALPHA SLIDER — Histogramm Range Selector ═════════════
   SVG-Widget: Datenverteilung + zwei Handles + drag-to-shift.
   Kanonische Implementierung: createAlphaSlider() in ds-widgets.js
   Prod-Nutzung: sherwood/events.html (Datum-Filter)
   N Griffe ohne Intervall-Drag: .alpha-slider--multi weiter unten
   (shared/bowhuman-multi-slider.js)
   ─────────────────────────────────────────────────────────── */
.bh-app .alpha-slider{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;user-select:none;-webkit-user-select:none;width:100%}
.bh-app .alpha-slider__track-wrap{position:relative;flex:1}
.bh-app .as-track-bg{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.12);stroke-width:1}
html.bh-app:not(.dark) .as-track-bg{fill:rgba(0,0,0,.06);stroke:rgba(0,0,0,.1)}
.bh-app .as-bar{fill:var(--accent);transition:opacity .2s,height .2s}
.bh-app .as-selection-drag{fill:var(--accent-dim);stroke:var(--accent-bd);stroke-width:1.5;cursor:grab}
.bh-app .as-selection-drag:active{cursor:grabbing}
.bh-app .as-selection-drag:hover{fill:var(--accent-t12,rgba(0,188,212,.12))}
.bh-app .as-handle-line{stroke:var(--accent-bd);stroke-width:1.5;pointer-events:none}
.bh-app .as-handle circle{fill:var(--panel-bg);stroke:var(--accent);stroke-width:2;cursor:ew-resize;transition:r 120ms ease}
.bh-app .alpha-slider__label{position:absolute;transform:translateX(-50%);font-size:0.625rem;font-weight:700;color:var(--accent);pointer-events:none;white-space:nowrap}
.bh-app .slider-months{display:flex;justify-content:space-between;padding:0 4px;margin-top:4px}
.bh-app .slider-month{font-size:0.625rem;font-weight:600;color:var(--text-muted);letter-spacing:.04em}

/* ════ MULTI-GRIFF-SCHIEBEREGLER — N Griffe über einem Histogramm ════
   Modifier von .alpha-slider (04-widgets.md, „Multi-Griff-Schieberegler").
   JS: BhMultiSlider.create() in shared/bowhuman-multi-slider.js — Griffe sind
   HTML-Elemente mit role=slider über dem SVG (aria-hidden), Zonen zwischen den
   Griffen tragen einen Ton (muted · ok · warn · err · accent). Höhe 84 px =
   Konstanten TOP + TRACK + TICK_GAP + TICK_H im JS. Erster Einsatz: Tuck T7b
   (Schwellen des Lastverhältnisses).
   ─────────────────────────────────────────────────────────── */
.bh-app .alpha-slider--multi .alpha-slider__track-wrap{height:84px}
.bh-app .alpha-slider--multi svg{display:block;overflow:visible}
.bh-app .as-zone{fill:transparent}
.bh-app .as-zone--muted{fill:color-mix(in srgb,var(--text-muted) 10%,transparent)}
.bh-app .as-zone--ok{fill:var(--ok-dim)}
.bh-app .as-zone--warn{fill:var(--warn-dim)}
.bh-app .as-zone--err{fill:var(--err-dim)}
.bh-app .as-zone--accent{fill:var(--accent-dim)}
.bh-app .as-bar--muted{fill:var(--text-muted)}
.bh-app .as-bar--ok{fill:var(--ok)}
.bh-app .as-bar--warn{fill:var(--warn)}
.bh-app .as-bar--err{fill:var(--err)}
.bh-app .as-bar--accent{fill:var(--accent)}
.bh-app .as-handle-line--muted{stroke:var(--text-muted)}
.bh-app .as-handle-line--ok{stroke:var(--ok)}
.bh-app .as-handle-line--warn{stroke:var(--warn)}
.bh-app .as-handle-line--err{stroke:var(--err)}
.bh-app .as-knob{position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:var(--panel-bg);border:2px solid var(--accent);box-sizing:border-box;cursor:ew-resize;touch-action:none;transition:width 120ms ease,height 120ms ease}
.bh-app .as-knob:hover,.bh-app .as-knob.is-dragging{width:22px;height:22px}
.bh-app .as-knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:50%}
.bh-app .as-knob--muted{border-color:var(--text-muted)}
.bh-app .as-knob--ok{border-color:var(--ok)}
.bh-app .as-knob--warn{border-color:var(--warn)}
.bh-app .as-knob--err{border-color:var(--err)}
.bh-app .alpha-slider--multi .alpha-slider__label--muted{color:var(--text-muted)}
.bh-app .alpha-slider--multi .alpha-slider__label--ok{color:var(--ok)}
.bh-app .alpha-slider--multi .alpha-slider__label--warn{color:var(--warn)}
.bh-app .alpha-slider--multi .alpha-slider__label--err{color:var(--err)}
.bh-app .alpha-slider__tick{position:absolute;transform:translateX(-50%);font-size:0.625rem;font-weight:600;color:var(--text-muted);pointer-events:none;white-space:nowrap}

/* ════ HALO (SVG Trefferbild) ═══════════════════════════════ */
.bh-app .bh-halo{
  display:block;background:var(--nm-bg);border-radius:var(--r-md);border:1px solid var(--border);
  /* Ring-Farb-Tokens — Dark-Mode-Default (weiße Alphas auf dunklem BG) */
  --halo-r0:          rgba(255,255,255,.05);   /* äußere Ringe (neutral)  */
  --halo-r-red:       rgba(255,0,0,.11);        /* rote Zone               */
  --halo-r-gold:      rgba(255,215,0,.14);      /* Gold innen              */
  --halo-r-gold2:     rgba(255,215,0,.22);      /* Gold innerste           */
  --halo-stroke:      rgba(255,255,255,.10);    /* Ring-Kontur             */
  --halo-grid:        rgba(255,255,255,.07);    /* Gitternetz              */
  --halo-shot-stroke: rgba(255,255,255,.55);    /* Pfeil-Dot-Rand          */
}
/* Light-Mode: schwarze Alphas auf hellem BG */
html.bh-app:not(.dark) .bh-halo{
  --halo-r0:          rgba(0,0,0,.05);
  --halo-r-red:       rgba(200,0,0,.13);
  --halo-r-gold:      rgba(180,135,0,.14);
  --halo-r-gold2:     rgba(180,135,0,.23);
  --halo-stroke:      rgba(0,0,0,.13);
  --halo-grid:        rgba(0,0,0,.08);
  --halo-shot-stroke: rgba(0,0,0,.45);
}

/* ════ PIE MENU ══════════════════════════════════════════════
   Radiales Kontextmenü (Canonical) — position:fixed, width:0/height:0 Ursprung
   Spec: bowhuman-webapp-styleguide.html #pie-menu
   ─────────────────────────────────────────────────────────── */
.bh-app .pie-menu{position:fixed;z-index:var(--z-max);pointer-events:none;width:0;height:0}
.bh-app .pie-menu.open{pointer-events:all}
.bh-app .pie-bg{position:absolute;width:136px;height:136px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1.5px solid var(--accent-bd);transform:translate(-50%,-50%) scale(0);opacity:0;left:0;top:0;pointer-events:none;transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.bh-app .pie-menu.open .pie-bg{transform:translate(-50%,-50%) scale(1);opacity:1}
html.bh-app.dark .pie-bg{background:rgba(26,16,0,.55)}
.bh-app .pie-item{position:absolute;width:36px;height:36px;border-radius:50%;background:var(--nm-bg,#fff);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:0.875rem;cursor:pointer;color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.25);transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .18s,background .12s}
html.bh-app.dark .pie-item{background:var(--nm-bg)}
.bh-app .pie-menu.open .pie-item{transform:translate(-50%,-50%) scale(1);opacity:1}
.bh-app .pie-item:hover{background:var(--accent)!important;color:var(--accent-on)!important;transform:translate(-50%,-50%) scale(1.18)!important}
.bh-app .pie-item--n {top:-66px;left:0;transition-delay:.00s}
.bh-app .pie-item--ne{top:-33px;left:57px;transition-delay:.03s}
.bh-app .pie-item--se{top:33px;left:57px;transition-delay:.06s}
.bh-app .pie-item--s {top:66px;left:0;transition-delay:.09s}
.bh-app .pie-item--sw{top:33px;left:-57px;transition-delay:.06s}
.bh-app .pie-item--nw{top:-33px;left:-57px;transition-delay:.03s}
/* Korrektur 2026-08-20 (Peter, Live-Test Pie-Menu Hell-Theme: "dunkles X
   auf dunklem Grün"): der 2026-07-14-Fix unten hatte color fest auf
   --navy gesetzt, um Weiß auf Neon-Lime im Dark-Theme zu beheben (dort
   --accent = #B4FF2E, sehr hell → Navy-Text = 15.6:1 Kontrast, korrekt).
   Aber --accent ist theme-adaptiv: im Hell-Theme ist --accent = --green-fg
   = #4A7200 (dunkles Oliv) — Navy-Text darauf hat nur ~3.3:1 Kontrast,
   kaum lesbar (genau der jetzt gemeldete Bug). Fix: zurück auf
   var(--accent-on) (= #fff, korrekt fürs Hell-Theme, 5.7:1) als Default,
   plus expliziter Dark-Override auf --navy (ersetzt den alten
   fest-navy-Ansatz). --accent-on selbst bleibt bewusst unangetastet
   (Token-Inkonsistenz app.css/components.css weiterhin in der separaten
   Farb-Session, s. alter Kommentar in der Git-History dieser Zeile). */
.bh-app .pie-close{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-on);border:none;display:flex;align-items:center;justify-content:center;font-size:0.6875rem;cursor:pointer;left:0;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .18s .1s cubic-bezier(.34,1.56,.64,1);z-index:1;box-shadow:0 1px 4px rgba(0,0,0,.3);font-family:var(--font-base)}
html.bh-app.dark .pie-close{color:var(--navy)}
.bh-app .pie-menu.open .pie-close{transform:translate(-50%,-50%) scale(1)}
.bh-app .pie-status-panel{position:fixed;z-index:var(--z-max);background:var(--nm-bg,#fff);border:1.5px solid var(--accent);border-radius:10px;padding:6px 5px;box-shadow:0 4px 16px rgba(0,0,0,.22);min-width:148px;display:flex;flex-direction:column;gap:3px;transform:scale(0);transform-origin:top center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .18s;opacity:0;pointer-events:none}
html.bh-app.dark .pie-status-panel{background:var(--nm-bg)}
.bh-app .pie-status-panel.open{transform:scale(1);opacity:1;pointer-events:all}
.bh-app .pie-status-opt{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:0.6875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;transition:background .1s}
.bh-app .pie-status-opt:hover{background:var(--accent-dim)}
.bh-app .pie-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── Pie Item Tastatur-Fokus ──────────────────────────────────
   Bisher gab es nur :hover — Pfeiltasten-Navigation (generalisiertes
   Pie-Menu, sherwood-pie-menu.js) braucht denselben visuellen Zustand
   auch ohne Maus. Ergänzt den globalen :focus-visible-Ring (Tokens,
   00-foundations.md §2) um die gleiche Hervorhebung wie :hover. */
.bh-app .pie-item:focus-visible{background:var(--accent)!important;color:var(--accent-on)!important;transform:translate(-50%,-50%) scale(1.18)!important;outline-offset:3px}

/* Destruktive Aktion (z.B. Löschen) — Rot statt Accent bei Hover/Fokus */
.bh-app .pie-item--danger{border-color:#f44336;color:#f44336}
.bh-app .pie-item--danger:hover,
.bh-app .pie-item--danger:focus-visible{background:#f44336!important;color:#fff!important}

/* ── Generisches Tooltip (data-pie-label + data-tip-dir) ──────
   Die alten --n/--ne/--se/--s/--sw/--nw-Modifier decken nur 6 feste
   Hex-Positionen ab. Bei dynamischer Kreisberechnung (beliebige Anzahl
   Items, beliebiger Winkel) setzt sherwood-pie-menu.js stattdessen
   data-tip-dir (up/down/left/right) je nachdem, in welchem Quadranten
   das Item liegt — Tooltip zeigt immer vom Zentrum weg.
   BEWUSST data-pie-label statt data-tip als Text-Quelle (2026-07-14-Fix):
   data-tip triggert zusätzlich das generische globale [data-tip]-Tooltip
   weiter unten in dieser Datei UND das alte Hex-Modifier-System direkt
   darunter — beide reagieren auf jedes Element mit data-tip-Attribut,
   unabhängig von data-tip-dir. Ergebnis wären bis zu 3 überlappende
   Tooltips gleichzeitig gewesen. */
.bh-app .pie-item[data-tip-dir]{position:absolute;overflow:visible}
.bh-app .pie-item[data-tip-dir]::after{
  content:attr(data-pie-label);
  position:absolute;
  white-space:nowrap;
  font-size:0.625rem;font-weight:700;letter-spacing:.04em;
  color:var(--accent);
  background:var(--panel-bg);
  border:1px solid var(--accent-bd);
  border-radius:4px;
  padding:2px 7px;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s .08s;
  z-index:10;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
}
.bh-app .pie-menu.open .pie-item[data-tip-dir]:hover::after,
.bh-app .pie-menu.open .pie-item[data-tip-dir]:focus-visible::after{opacity:1}
.bh-app .pie-item[data-tip-dir="up"]::after   {bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.bh-app .pie-item[data-tip-dir="down"]::after {top:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.bh-app .pie-item[data-tip-dir="left"]::after {right:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.bh-app .pie-item[data-tip-dir="right"]::after{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}

/* ── .bh-pie-trigger — Objekt-Karte, die ein Pie-Menu öffnet ──
   Governance-Entscheidung 2026-07-14: Karte selbst fokussierbar,
   Enter/Space öffnet (kein separater •••-Button). tabindex/role/
   aria-haspopup/aria-expanded werden vom aufrufenden Screen gesetzt
   (s. sherwood-pie-menu.js attach()), diese Klasse liefert nur die
   visuelle Aufmerksamkeit für Hover + Fokus. */
.bh-app .bh-pie-trigger{cursor:var(--cursor-aim);transition:border-color .15s,box-shadow .15s}  /* crosshair statt pointer — Bogensport-Thema (Zielen), 2026-07-19 */
.bh-app .bh-pie-trigger:hover{border-color:var(--accent-bd)}
.bh-app .bh-pie-trigger[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-bd)}

/* ── .pie-help-panel — Hilfe-Breakout (jedes Objekt, sherwood-pie-menu.js) ──
   Wiederverwendet .pie-status-panel als Basis (gleiche Glas-Optik,
   gleiches spring-in), Modifier für Fließtext statt Options-Zeilen.
   Positionierung: gleiche Richtungsvektor-Logik wie CRM-_positionBreakout,
   nur ohne Map-Pan (Viewport-Clamping stattdessen) — s. JS. */
/* Feste width statt shrink-to-fit (min-width:0/max-width) — bei
   position:fixed + nur left/top gesetzt (kein right) hat die
   shrink-to-fit-Breitenberechnung im Zusammenspiel mit der
   offsetWidth-Messung in positionHelpPanel() (Panel unsichtbar bei
   left:-9999px vermessen) zu einer sehr schmalen, einzeiligen
   Wort-für-Wort-Umbruch-Darstellung geführt (Peter, 2026-07-14: Panel
   "zu klein, an der falschen Stelle" — Folgefehler der falschen Breite,
   die auch das Viewport-Clamping in positionHelpPanel() verzerrt hat).
   Feste Breite macht offsetWidth deterministisch. */
/* KEIN position:relative hier (2026-07-14, dritter/eigentlicher Root-Cause-
   Fix)! .pie-status-panel setzt bereits position:fixed — .pie-help-panel
   hatte zusätzlich position:relative, gleiche Selektor-Spezifität wie
   .pie-status-panel, aber später in der Datei deklariert → gewinnt in der
   Kaskade IMMER. Das Panel war dadurch die ganze Zeit position:relative
   statt fixed, egal welche left/top-Werte das JS berechnet hat — die
   wurden als Offset von der Fluss-Position interpretiert, nicht als
   Viewport-Koordinaten. Das war der eigentliche Bug hinter "Panel an
   random Stelle" — nicht die Vektor-Formel, nicht die DOM-Verschachtelung
   (beide vorherigen Korrekturen waren daher wirkungslos). */
.bh-app .pie-help-panel{width:220px;max-width:calc(100vw - 28px);padding:14px 16px;text-align:left}
.bh-app .pie-help-title{font-size:0.75rem;font-weight:800;color:var(--accent);margin-bottom:5px;padding-right:18px}
.bh-app .pie-help-body{font-size:0.75rem;line-height:1.5;color:var(--text-secondary,var(--text-primary));font-weight:500}
.bh-app .pie-help-close{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;border:none;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.6875rem;transition:background .12s,color .12s}
.bh-app .pie-help-close:hover,
.bh-app .pie-help-close:focus-visible{background:var(--accent-dim);color:var(--accent)}

/* ── Pie Item Tooltip ([data-pie-label]) — CSS-only, kein JS ──
   War früher [data-tip] — kollidierte mit dem generischen globalen
   [data-tip]-Tooltip weiter unten in dieser Datei (gleiches Attribut,
   gleiches Element) → doppeltes Popup (schwarz korrekt + weiß darunter).
   Gleicher Fix wie beim dynamischen System (data-tip-dir, s.o., 2026-07-14):
   eigener Attributname data-pie-label statt data-tip. Bislang nur in den
   Implementierungen nachgezogen, hier im Styleguide noch nicht (2026-07-26). */
/* Erscheint beim Hover nach außen (weg vom Zentrum) */
.bh-app .pie-item[data-pie-label]{position:absolute;overflow:visible}
.bh-app .pie-item[data-pie-label]::after{
  content:attr(data-pie-label);
  position:absolute;
  white-space:nowrap;
  font-size:0.625rem;font-weight:700;letter-spacing:.04em;
  color:var(--accent);
  background:var(--panel-bg);
  border:1px solid var(--accent-bd);
  border-radius:4px;
  padding:2px 7px;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s .08s;
  z-index:10;
  box-shadow:0 1px 6px rgba(0,0,0,.18);
}
.bh-app .pie-menu.open .pie-item[data-pie-label]:hover::after{opacity:1}
/* Richtungen: Tooltip zeigt vom Zentrum weg */
.bh-app .pie-item--n[data-pie-label]::after {bottom:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.bh-app .pie-item--ne[data-pie-label]::after{bottom:calc(100% + 4px);left:calc(100% + 4px)}
.bh-app .pie-item--se[data-pie-label]::after{top:calc(100% + 4px);left:calc(100% + 4px)}
.bh-app .pie-item--s[data-pie-label]::after {top:calc(100% + 6px);left:50%;transform:translateX(-50%)}
.bh-app .pie-item--sw[data-pie-label]::after{top:calc(100% + 4px);right:calc(100% + 4px)}
.bh-app .pie-item--nw[data-pie-label]::after{bottom:calc(100% + 4px);right:calc(100% + 4px)}

/* ════ SORTIERBARE TABELLEN-HEADER ══════════════════════════ */
.bh-app .app-table th.sortable,.bh-app .tbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.bh-app .app-table th.sortable:hover,.bh-app .tbl th.sortable:hover{color:var(--accent)}
.bh-app .sort-icon{margin-left:4px;opacity:.3;font-size:0.625rem;vertical-align:middle}
.bh-app th.asc .sort-icon,.bh-app th.desc .sort-icon{opacity:1;color:var(--accent)}

/* ════ UNDERLINE TABS (Nottingham lb-tab → kanonisch) ═══════ */
.bh-app .tab-ul-row{display:flex;gap:0;border-bottom:1px solid var(--border)}
.bh-app .tab-ul-btn{height:36px;padding:0 14px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-size:0.6875rem;font-weight:600;cursor:pointer;font-family:var(--font-base);margin-bottom:-1px;transition:color .12s,border-color .12s}
.bh-app .tab-ul-btn:hover{color:var(--text-primary)}
.bh-app .tab-ul-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ════ PROGRESS BAR (canonical) ════════════════════════════ */
.bh-app .prog{width:100%;height:5px;background:rgba(255,255,255,.08);border-radius:var(--r-full);overflow:hidden}
.bh-app .prog-fill{height:100%;background:var(--accent-grad);border-radius:var(--r-full);transition:width .3s ease}

/* ════ BOARD (bh-board) — Kanban-Spalten nach Status (2026-10-13) ═════
   Drei Spalten nebeneinander, unter 720px untereinander. Kein Drag & Drop:
   den Status wechseln Knöpfe in der Karte (Peter, 13.10.2026: „die 3 spalten
   reichen erstmal“). Erster Nutzer: Vorschläge auf operator-parcours.html;
   vorgesehen auch für Befunde und Szenen-Feedback (BHS-009 §1.2).
   Markup: .bh-board > .bh-board-col > .bh-board-head (> .bh-board-count)
           + .bh-board-card* oder .bh-board-empty
   ══════════════════════════════════════════════════════════════════ */
.bh-app .bh-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-md);align-items:start}
@media (max-width:720px){.bh-app .bh-board{grid-template-columns:minmax(0,1fr)}}
.bh-app .bh-board-col{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--border)}
.bh-app .bh-board-head{display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.bh-app .bh-board-count{margin-left:auto;padding:0 8px;border-radius:var(--r-full);background:var(--accent-dim);color:var(--accent);font-variant-numeric:tabular-nums}
.bh-app .bh-board-card{min-width:0;padding:12px;border-radius:var(--r-md);background:var(--nm-bg);box-shadow:var(--nm-shadow-sm)}
html.bh-app.dark .bh-board-card{background:var(--white);border:1px solid var(--border);box-shadow:none}
.bh-app .bh-board-empty{padding:8px 4px;font-size:12px;color:var(--text-muted)}

/* ════ WOCHE (bh-week) — Wochenraster Mo–So (2026-10-18) ═══════════
   Sieben Tagesspalten nebeneinander, unter 720px untereinander. Je Tag
   ein Kopf (Wochentag + Datum), darunter Einträge als Knöpfe (öffnen den
   Bearbeiten-Dialog) und ein gestrichelter Hinzufügen-Knopf. Reines CSS,
   kein Drag & Drop. Erster Nutzer: Tuck-Wochenplan (marian /tuck/,
   #/trainer/plans); vorgesehen auch für die Wochenansicht auf dem Handy.
   Bei 1024px mit Seitenleiste ist eine Spalte rund 95px breit — Titel
   brechen deshalb mit Silbentrennung (lang="de" am <html>).
   Markup: .bh-week > .bh-week-day(.is-today) > .bh-week-head
             (> .bh-week-dayname + .bh-week-date)
           + .bh-week-item*(--rest) (> .bh-week-item__title + .bh-week-item__meta
             + .bh-week-item__note) + .bh-week-add
   ══════════════════════════════════════════════════════════════════ */
.bh-app .bh-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-sm);align-items:stretch}
@media (max-width:720px){.bh-app .bh-week{grid-template-columns:minmax(0,1fr)}}
.bh-app .bh-week-day{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:160px;padding:8px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--border)}
.bh-app .bh-week-day.is-today{border-color:var(--accent-bd);box-shadow:inset 0 2px 0 var(--accent)}
.bh-app .bh-week-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px;padding:0 2px 2px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.bh-app .bh-week-day.is-today .bh-week-dayname{color:var(--accent)}
.bh-app .bh-week-date{font-family:var(--font-mono);font-weight:600;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.bh-app .bh-week-item{display:flex;flex-direction:column;gap:2px;width:100%;min-width:0;padding:8px;border:none;border-radius:var(--r-md);background:var(--nm-bg);box-shadow:var(--nm-shadow-sm);color:var(--text-primary);font-family:var(--font-base);text-align:left;cursor:pointer;transition:box-shadow .12s,border-color .12s}
html.bh-app.dark .bh-week-item{background:var(--white);border:1px solid var(--border);box-shadow:none}
.bh-app .bh-week-item:hover{box-shadow:0 0 0 1.5px var(--accent-bd)}
.bh-app .bh-week-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.bh-app .bh-week-item:disabled{cursor:default;box-shadow:var(--nm-shadow-sm)}
html.bh-app.dark .bh-week-item:disabled{box-shadow:none}
.bh-app .bh-week-item__title{font-size:12px;font-weight:var(--fw-semibold);line-height:1.3;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.bh-app .bh-week-item__meta{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.bh-app .bh-week-item__note{font-size:11px;color:var(--text-secondary);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.bh-app .bh-week-item--rest,html.bh-app.dark .bh-week-item--rest{background:transparent;border:1.5px dashed var(--border);box-shadow:none;color:var(--text-muted)}
.bh-app .bh-week-add{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:32px;margin-top:auto;padding:4px;border:1.5px dashed var(--border);border-radius:var(--r-md);background:transparent;color:var(--text-muted);font-size:11px;font-weight:var(--fw-semibold);font-family:var(--font-base);cursor:pointer;transition:border-color .12s,color .12s}
.bh-app .bh-week-add:hover{border-color:var(--accent-bd);color:var(--accent)}
.bh-app .bh-week-add:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ════ LICHT-THEME (html.bh-app ohne .dark) ════════════════
   Tokens-CSS :root liefert Licht-Werte automatisch.
   Ergänzungen spezifisch für WebApp-Controls im Licht-Modus:
   ─────────────────────────────────────────────────────────── */
html.bh-app:not(.dark) .app-topbar{background:var(--navy)}          /* immer dunkel */
/* Die Topbar ist in BEIDEN Themes --navy. Deshalb bindet sie --accent lokal
   auf die theme-feste Brand-Variante um und --accent-on auf navy: alle
   Kind-Bauteile (.tb-b-icon, .tb-avatar, .tb-username, .tb-action-btn,
   .tb-btn.primary, .tb-icon-btn:hover, .tb-lang-opt.active) bleiben dadurch
   unveraendert richtig, ohne dass eine einzige von ihnen angefasst wird.
   Dasselbe Muster wie .nav/.footer in bowhuman-components.css:88 (27.08.2026).
   Ohne diese Zeile misst .tb-b-icon im Hellmodus 3.33:1 -- --accent ist dort
   #4A7200 auf #0d1117. Entscheidung Peter 09.09.2026: die Topbar traegt die
   jeweilige Brand-Farbe, nicht eine gemeinsame. Gemessen auf --navy, beide
   Themes gleich: green 15.58:1 - orange 8.38:1 - cyan 8.24:1 - magenta
   (#f05faa) 6.24:1, jeweils als Text UND mit navy als Schrift darauf. */
.bh-app .app-topbar{--accent:var(--accent-dark-bg);--accent-on:var(--navy);--accent-dk:var(--accent-dark-bg);--accent-grad:var(--accent-dark-bg)}
html.bh-app:not(.dark) .f-input,
html.bh-app:not(.dark) .f-select,
html.bh-app:not(.dark) .f-textarea,
html.bh-app:not(.dark) .input,
html.bh-app:not(.dark) .select{background:#fff;border-color:var(--border)}
/* Focus-Regel muss NACH dem generischen Light-Override kommen, sonst verliert sie die Kaskade */
html.bh-app:not(.dark) .f-input:focus,
html.bh-app:not(.dark) .f-select:focus,
html.bh-app:not(.dark) .f-textarea:focus,
html.bh-app:not(.dark) .input:focus,
html.bh-app:not(.dark) .select:focus{border-color:var(--accent);border-width:2px}
html.bh-app:not(.dark) .bh-sel-trigger{background:#fff}
html.bh-app:not(.dark) .bh-range{background:linear-gradient(to right,var(--accent) var(--pct,40%),rgba(0,0,0,.12) var(--pct,40%))}
html.bh-app:not(.dark) .bh-dnd-shelf{background:var(--nm-bg)}
html.bh-app:not(.dark) .bh-dnd-zone{border-color:rgba(0,0,0,.15)}
html.bh-app:not(.dark) .app-nav-item:hover   { background: var(--accent-dim); color: var(--accent-fg, var(--accent)); }
html.bh-app:not(.dark) .app-nav-item.active,
html.bh-app:not(.dark) .app-nav-item.is-active { background: var(--accent-fg, var(--accent)); color: #fff; font-weight: 700; }
/* 2026-08-19 (Peter-Feedback: Toggles im Hell-Modus farblich nicht
   unterscheidbar): war vorher unconditional auf ".toggle" (ohne :not(:checked))
   gesetzt. Specificity von "html.bh-app:not(.dark) .toggle" (2 Klassen + 1
   Typ-Selektor "html") ist HÖHER als ".bh-app .toggle:checked" (2 Klassen +
   1 Pseudoklasse) — die Off-Grundfarbe hat dadurch im Hell-Modus IMMER die
   Grün-Akzentfarbe des Checked-Zustands überschrieben, unabhängig vom
   tatsächlichen checked-Status. Dark-Modus war nicht betroffen (dort greift
   keine analoge Override-Regel). Fix: Selektor auf :not(:checked) verengt,
   damit die Checked-Regel wieder zum Zug kommt. */
html.bh-app:not(.dark) .toggle:not(:checked){background:#cbd5e0}
html.bh-app:not(.dark) .toggle::after{background:#fff}
/* Status-/Chip-Farben Light-Mode
   ─────────────────────────────────────────────────────────────────────────
   Neon-Grün (#B4FF2E) und weiße Alpha-BGs funktionieren nur auf dark BGs.
   Im Light-Mode werden alle Chip-Tints auf sichtbare Werte überschrieben.  */
/* Status-Token-Overrides Light-Mode:
   Neon-Grün + weiße Alpha-Tints sind auf hellem BG unsichtbar/zu hell.
   info/warn/err-Texte brauchen dunklere Varianten für WCAG AA.         */
/* 28.08.2026 — hier stand eine Schattenkopie des Farbsatzes:

     --ok:   var(--green-fg);
     --warn: #C45F00;
     --err:  #C62828;

   --ok und --err waren wortgleich mit bowhuman-tokens.css, also folgenlos.
   --warn war es nicht. Der geteilte Satz zeigt seit dem 27.08.2026 auf
   --orange-fg (#A85400), weil #C45F00 seine AA-Zusage nie eingehalten hat.
   Diese Datei laedt NACH tokens.css — der alte Wert gewann still, und die
   Korrektur erreichte die gesamte App-Schicht nie. Nachgemessen:

     #C45F00   4.21 auf Weiss · 3.86 auf --bg · 3.52 auf --nm-bg
     #A85400   5.34 auf Weiss · 4.89 auf --bg · 4.46 auf --nm-bg

   Der Block ist ersatzlos weg; --ok/--warn/--err kommen jetzt aus dem
   geteilten Satz. Nur die Flaechen bleiben hier, weil sie im Hellmodus
   andere Deckkraft brauchen als die Neon-Toene im Dunkeln — und sie mischen
   ab jetzt aus dem Token, damit sie einer Korrektur von selbst folgen.
   Siehe Vault: reference_schattenkopie_des_tokensatzes. */
html.bh-app:not(.dark) .chip.ok,
html.bh-app:not(.dark) .badge.ok    { background:color-mix(in srgb, var(--ok)   10%, transparent); color:var(--ok) }
html.bh-app:not(.dark) .chip.warn,
html.bh-app:not(.dark) .badge.warn  { background:color-mix(in srgb, var(--warn) 10%, transparent); color:var(--warn) }
html.bh-app:not(.dark) .chip.err,
html.bh-app:not(.dark) .badge.err   { background:color-mix(in srgb, var(--err)  10%, transparent); color:var(--err) }
html.bh-app:not(.dark) .chip.muted,
html.bh-app:not(.dark) .badge.muted { background:rgba(0,0,0,.07);    color:var(--text-muted) }
/* info + accent + cyan: Light-Mode BG-Tint via accent-dim, Farbe via accent */
html.bh-app:not(.dark) .chip.info,   html.bh-app:not(.dark) .badge.info,
html.bh-app:not(.dark) .chip.accent, html.bh-app:not(.dark) .badge.accent,
html.bh-app:not(.dark) .chip.cyan,   html.bh-app:not(.dark) .badge.cyan
  { background:var(--accent-dim); color:var(--accent) }
/* Lime-BG-Komponenten: Neon-Grün (#B4FF2E) ist auf hellem BG kaum sichtbar */
html.bh-app:not(.dark) .live-chip    { background:rgba(74,114,0,.10); border-color:rgba(74,114,0,.28) }
html.bh-app:not(.dark) .chip-training{ background:rgba(74,114,0,.10); border-color:rgba(74,114,0,.20) }
/* Event-Meta-Pill: weißes Alpha-BG ergibt auf hell near-transparent  */
html.bh-app:not(.dark) .event-meta-pill { background:rgba(0,0,0,.05) }
/* Progress-Track: weiße Alpha-BG ergibt auf hell near-transparent    */
html.bh-app:not(.dark) .prog { background:rgba(0,0,0,.10) }

/* ════ i18n-SUPPORT ══════════════════════════════════════════
   CSS-seitig keine spezifischen Regeln nötig.
   [data-i18n] wird per JS (t('key')) befüllt.
   Sprachübergänge via .i18n-fade animieren:
   ─────────────────────────────────────────────────────────── */
.bh-app [data-i18n]{transition:opacity .15s}
.bh-app [data-i18n].i18n-updating{opacity:0}

/* ════ MODAL SYSTEM ══════════════════════════════════════════ */
.bh-app .modal-wrap{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:24px}
.bh-app .modal-wrap.open{display:flex}
.bh-app .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.bh-app .modal-pane{position:relative;z-index:1;width:100%;max-width:480px;background:var(--nm-bg);border-radius:var(--r-2xl);box-shadow:0 24px 80px rgba(0,0,0,.3);overflow:hidden}
html.bh-app.dark .modal-pane{background:#1a2230;border:1px solid rgba(255,255,255,.1)}
.bh-app .modal-hdr{padding:18px 22px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
html.bh-app.dark .modal-hdr{border-bottom-color:rgba(255,255,255,.08)}
.bh-app .modal-title-row{display:flex;align-items:flex-start;gap:8px}
.bh-app .modal-title-row>i{margin-top:1px}
.bh-app .modal-title{font-size:0.9375rem;font-weight:800;color:var(--text-primary)}
html.bh-app.dark .modal-title{color:#fff}
.bh-app .modal-subtitle{font-size:0.75rem;color:var(--text-muted);margin-top:1px}
.bh-app .modal-close{width:28px;height:28px;border-radius:50%;border:none;background:rgba(0,0,0,.06);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.875rem}
html.bh-app.dark .modal-close{background:rgba(255,255,255,.08);color:var(--text-muted-dark-bg)}
.bh-app .modal-close:hover{background:rgba(0,0,0,.1);color:var(--text-primary)}
.bh-app .modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:0}
.bh-app .modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
html.bh-app.dark .modal-footer{border-top-color:rgba(255,255,255,.08)}

/* ════ SCORING DOMAIN — Zone Badges ════════════════════════
   Verwendet in: Robin (Scoring), Marian (Analyse), LittleJohn (Ergebnis-Liste)
   Kill=Cyan · Wound=Magenta · Miss=Grau (--miss)
   Fund 2026-08-20 (Audit): "Kill"-Text nutzte var(--cyan) direkt — laut
   bowhuman-tokens.css ausdrücklich "nur auf Dark-BG" (2.3:1 auf Weiß, reißt
   AA). Text-Vorkommen (hier + Hit-Chips + KPI-Wert weiter unten) jetzt auf
   var(--cyan-fg) (theme-adaptiv, AA-sicher analog --green-fg). Reine
   Flächenfüllungen mit eigener fester Textfarbe (z.B. .score-kill,
   Cyan-Hintergrund + #0d1117-Text) sind unverändert, die hängen nicht von
   der Seiten-Hintergrundfarbe ab.
════════════════════════════════════════════════════════════ */
.bh-app .zone-badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-full);font-size:0.625rem;font-weight:700;letter-spacing:.06em}
.bh-app .zone-kill{background:rgba(0,188,212,.12);color:var(--cyan-fg);border:1px solid rgba(0,188,212,.25)}
.bh-app .zone-wound{background:rgba(233,30,140,.1);color:var(--magenta);border:1px solid rgba(233,30,140,.22)}
.bh-app .zone-miss{background:rgba(158,158,158,.1);color:var(--miss);border:1px solid rgba(158,158,158,.2)}

/* ════ SCORING DOMAIN — Hit Chips (Scoring Input) ══════════
   Große anklickbare Flächen für das Eintragen von Treffern.
   Immer in einem 3er-Grid: kill | wound | miss
════════════════════════════════════════════════════════════ */
.bh-app .hit-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-md);border:1.5px solid transparent;cursor:pointer;transition:all .15s;font-family:var(--font-base)}
.bh-app .hit-chip .hc-score{font-size:1.375rem;font-weight:900;line-height:1}
.bh-app .hit-chip .hc-text{display:flex;flex-direction:column}
.bh-app .hit-chip .hc-label{font-size:0.625rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.bh-app .hit-chip .hc-sub{font-size:0.625rem;opacity:.7;margin-top:1px}
.bh-app .hit-kill{background:rgba(0,188,212,.1);border-color:rgba(0,188,212,.3);color:var(--cyan-fg)}
.bh-app .hit-wound{background:rgba(233,30,140,.1);border-color:rgba(233,30,140,.3);color:var(--magenta)}
.bh-app .hit-miss{background:rgba(158,158,158,.1);border-color:rgba(158,158,158,.3);color:var(--miss)}
.bh-app .hit-kill:hover{background:rgba(0,188,212,.18);border-color:var(--cyan-fg)}
.bh-app .hit-wound:hover{background:rgba(233,30,140,.18);border-color:var(--magenta)}
.bh-app .hit-miss:hover{background:rgba(158,158,158,.18);border-color:var(--miss)}
.bh-app .hit-chip.selected{box-shadow:0 0 0 2px currentColor}

/* ════ SCORING DOMAIN — Score Badge (Kreis) ════════════════
   Runde Zahl-Anzeige für Treffer-Ergebnis.
   Verwendung: Ziel-Liste, Leaderboard, Session-Summary
════════════════════════════════════════════════════════════ */
.bh-app .score-badge{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-full);font-size:0.9375rem;font-weight:900}
.bh-app .score-kill{background:var(--cyan);color:var(--navy)}
.bh-app .score-wound{background:var(--magenta);color:#fff}
.bh-app .score-miss{background:var(--miss);color:#fff}

/* ════ DASHBOARD — KPI Row ══════════════════════════════════
   Horizontale Kachel-Reihe mit 3–6 Metriken.
   Variant: .kpi-val.val-kill/wound/miss/neutral für Farbkodierung
════════════════════════════════════════════════════════════ */
.bh-app .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1px;background:var(--panel-border);border-radius:var(--r-md);overflow:hidden;margin-bottom:16px}
.bh-app .kpi-card{background:var(--panel-bg);padding:14px 16px;text-align:center}
.bh-app .kpi-val{font-size:1.5rem;font-weight:900;color:var(--accent);line-height:1;letter-spacing:-.02em}
.bh-app .kpi-val.val-kill{color:var(--cyan-fg)}
.bh-app .kpi-val.val-wound{color:var(--magenta)}
.bh-app .kpi-val.val-miss{color:var(--miss)}
.bh-app .kpi-val.val-neutral{color:var(--text-primary)}
.bh-app .kpi-lbl{font-size:0.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:5px}
.bh-app .kpi-delta-row{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.bh-app .kpi-delta{font-size:0.625rem;font-weight:700;padding:2px 6px;border-radius:3px;font-family:var(--font-mono);white-space:nowrap;line-height:1.4}
.bh-app .kpi-delta--pos{color:var(--ok);background:color-mix(in srgb, var(--ok) 10%, transparent)}
.bh-app .kpi-delta--neg{color:#c62828;background:rgba(198,40,40,.10)}
.bh-app .kpi-delta--zero{color:var(--text-muted);background:rgba(84,110,122,.08)}
html.bh-app.dark .kpi-delta--pos{color:#66bb6a;background:rgba(102,187,106,.13)}
html.bh-app.dark .kpi-delta--neg{color:#ef5350;background:rgba(239,83,80,.13)}

/* ════ DASHBOARD — Dash-Card + Chart-Wrap ══════════════════
   Panel-Variante für Charts, Tabellen und Metriken.
   .chart-wrap: Chart.js canvas Container — max-height begrenzt canvas.
════════════════════════════════════════════════════════════ */
.bh-app .dash-card{background:var(--panel-bg);border-radius:var(--r-md);border:1px solid var(--panel-border);overflow:hidden}
.bh-app .dash-card-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--panel-border)}
.bh-app .dash-card-title{font-size:0.6875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.bh-app .dash-card-title i{font-size:0.8125rem;margin-right:4px;color:var(--accent)}
.bh-app .dash-card-body{padding:16px}
.bh-app .dash-card-body-flush{padding:0}
.bh-app .chart-wrap{position:relative;padding:16px}
.bh-app .chart-wrap canvas{max-height:220px}

/* ════ TARGET TABLE — Score Display Helpers ═════════════════
   Ergänzende Klassen für .app-table in Scoring-Kontexten.
   Verwende .app-table als Container — diese Klassen gehen drauf.
════════════════════════════════════════════════════════════ */
.bh-app .tgt-num{font-size:0.6875rem;font-weight:700;color:var(--text-muted);font-family:var(--font-mono)}
.bh-app .arrow-pill{display:inline-block;font-size:0.625rem;font-weight:700;letter-spacing:.05em;padding:1px 5px;border-radius:3px;background:var(--nm-bg);color:var(--text-muted)}
.bh-app .score-num{font-family:var(--font-mono);font-weight:700;font-size:0.8125rem}
.bh-app .time-mono{font-family:var(--font-mono);font-size:0.6875rem;color:var(--text-muted)}
.bh-app .pace-mono{font-family:var(--font-mono);font-size:0.6875rem;color:var(--text-muted)}
.bh-app .pace-slow{color:#ef5350}

/* ════ DASHBOARD — Breakdown Bars ═══════════════════════════
   Horizontale Label-Bar-Count Reihen (z.B. Kill/Wound/Miss Verteilung).
   .bd-bar-fill: Breite via width inline; Farbe via background inline.
════════════════════════════════════════════════════════════ */
.bh-app .bd-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.bh-app .bd-lbl{font-size:0.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);width:60px;flex-shrink:0}
.bh-app .bd-bar-wrap{flex:1;height:6px;background:var(--nm-bg);border-radius:3px;overflow:hidden}
.bh-app .bd-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}
.bh-app .bd-count{font-size:0.6875rem;font-weight:700;width:36px;text-align:right;flex-shrink:0}

/* Donut-Charts (Review, Chat 18.09.2026, Punkt 2): ersetzen die Balkenlisten
   (.bd-row) bei "Pro Parcours"/"Nach IFAA-Gruppe" im Sherwood-Inventar.
   Klick auf ein Segment oder eine Legenden-Zeile filtert die Tabelle -- das
   gleiche Prinzip, das die Bestands-Leiste (.op-dist) auf derselben Seite
   bereits fuer den Zustand vormacht. Es gab dafuer noch keine Donut-
   Komponente im Design-System (nur ein unabhaengiges Canvas-Donut bei
   Robin) -- dies ist die neue, wiederverwendbare SVG-Variante. Nutzt
   .bd-count aus den Breakdown Bars fuer die Zahl in der Legende. */
.bh-app .bd-donut-wrap{display:flex;align-items:center;gap:14px}
.bh-app .bd-donut{flex-shrink:0}
.bh-app .bd-donut__seg{cursor:pointer;transition:opacity .15s,filter .15s}
.bh-app .bd-donut__seg:hover{filter:brightness(1.15)}
.bh-app .bd-donut__seg.is-off{opacity:.3}
.bh-app .bd-donut__total{font-size:1rem;font-weight:700;fill:var(--text-primary)}
.bh-app .bd-legend{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.bh-app .bd-legend-row{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.625rem;color:var(--text-secondary);transition:opacity .15s;padding:2px 0}
.bh-app .bd-legend-row:hover{color:var(--text-primary)}
.bh-app .bd-legend-row.is-off{opacity:.4}
.bh-app .bd-legend-sw{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.bh-app .bd-legend-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ════ DASHBOARD — Sparklines ════════════════════════════════
   Mini-Balken-Reihen im Verlauf-Panel (Schützenvergleich etc.)
   .spark-fill.current: Hervorhebung des aktuellen Werts.
════════════════════════════════════════════════════════════ */
.bh-app .sparkline-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.bh-app .spark-lbl{font-size:0.625rem;color:var(--text-muted);width:60px;flex-shrink:0;font-family:var(--font-mono)}
.bh-app .spark-score{font-size:0.8125rem;font-weight:900;color:var(--accent);width:36px;flex-shrink:0}
.bh-app .spark-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.bh-app .spark-fill{height:100%;background:var(--accent-dk);border-radius:2px}
.bh-app .spark-fill.current{background:var(--accent)}

/* ════ DASHBOARD — Weak Chips ════════════════════════════════
   Kleine anklickbare Chips für "schwache Ziele" (Miss/Wound).
   Brush-Interaktion mit .brush-hover/.brush-active (JS-gesteuert).
════════════════════════════════════════════════════════════ */
.bh-app .weak-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--panel-border);background:var(--panel-bg);font-size:0.6875rem;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all .15s}
.bh-app .weak-chip:hover,.bh-app .weak-chip.brush-hover{border-color:var(--magenta);background:rgba(233,30,140,.04)}
.bh-app .weak-chip.brush-active{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 2px var(--accent-bd)}
.bh-app .weak-chip .wc-num{font-family:var(--font-mono);color:var(--text-muted);font-size:0.625rem}
.bh-app .weak-chip .wc-zone{font-size:0.625rem;font-weight:700;letter-spacing:.06em;padding:1px 5px;border-radius:2px}

/* ════ BRUSHING & LINKING — generisches Pattern (2026-08-18) ═══
   JS: Websites/shared/sherwood-brush-link.js (seit T9a; Symlink in sherwood/marian js/)
   Kanonische Klassen für Cross-Visualisierung-Hervorhebung: jedes Element
   mit [data-brush-id] bekommt vom Modul automatisch .bh-brush-hover
   (transient) bzw. .bh-brush-active (persistent/gepinnt), optional
   .bh-brush-dim auf allen nicht gematchten Elementen.
   ⚠️ Nicht verwechseln mit dem ÄLTEREN, unprefixed .brush-hover/.brush-active
   direkt oberhalb (Weak-Chips-Widget, eigenständiges JS, vor diesem
   generischen Pattern entstanden) — beide Namen koexistieren bewusst, keine
   Migration ohne Not (s. Vault/06 Design/Pattern-Brushing-and-Linking.md).
   Die generische Basis-Optik unten passt für Zeilen/Karten/Listenelemente;
   SVG-/Chart-/Karten-Visualisierungen brauchen zusätzlich eigene, typ-
   spezifische Regeln (Beispiel: .trend-ring in sessions.html) — dafür ist
   registerView() im JS-Modul da, s. Kommentarkopf dort.
════════════════════════════════════════════════════════════ */
.bh-app [data-brush-id]{transition:background-color .12s,box-shadow .12s,opacity .12s}
.bh-app .bh-brush-hover{background-color:var(--accent-dim)}
.bh-app .bh-brush-active{background-color:var(--accent-dim);box-shadow:inset 2px 0 0 var(--accent)}
.bh-app .bh-brush-dim{opacity:.35}
/* In einer .bh-table (bowhuman-table.css) schlagen Zebra und :hover der Zeilen (0,2,2) die
   Grundregeln oben (0,2,0) — die Hervorhebung wäre auf geraden Zeilen unsichtbar. Darum dort
   eigens, stärker als Zebra, :hover und .expanded-open (T9a, Tuck Plan-Treue). */
.bh-app .bh-table tbody tr:is(.bh-brush-hover,.bh-brush-active){background-color:var(--accent-dim)}

/* ════ TARGET DETAIL — Info Hero Panel ══════════════════════
   Tier-Bild + Overlay-Text + Footer-Metadaten.
   Höhe über Container definiert (z.B. height:280px am Parent).
   .info-hero-tint: Zone-Farbe als Tint via background inline.
════════════════════════════════════════════════════════════ */
.bh-app .info-hero-panel{display:flex;flex-direction:column;overflow:hidden}
.bh-app .info-hero-area{flex:1;position:relative;overflow:hidden;min-height:0;background:var(--nm-bg)}
.bh-app .info-hero-tint{position:absolute;inset:0;transition:background .25s}
.bh-app .info-hero-area img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 40%;padding:14px 14px 48px;z-index:1}
.bh-app .info-hero-area .no-img-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.25rem;color:rgba(0,0,0,.1);z-index:1}
.bh-app .info-hero-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent 0%,rgba(13,17,23,.72) 55%,rgba(13,17,23,.92) 100%);padding:28px 12px 11px;z-index:2}
.bh-app .info-hero-num{font-size:0.625rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1;margin-bottom:3px}
.bh-app .info-hero-name{font-size:1rem;font-weight:900;color:#fff;line-height:1.1;margin-bottom:6px}
.bh-app .info-hero-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bh-app .info-hero-score{font-size:1.125rem;font-weight:900;line-height:1}
.bh-app .info-hero-footer{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 12px;height:44px;background:var(--panel-bg);border-top:1px solid var(--panel-border)}
.bh-app .info-hero-footer-meta{flex:1;font-size:0.6875rem;color:var(--text-muted);display:flex;gap:10px}
.bh-app .info-hero-footer-meta span{display:flex;align-items:center;gap:3px}
.bh-app .info-hero-footer-meta i{font-size:0.6875rem}

/* ════════════════════════════════════════════════════════════
   BH-DATE — dreiteiliges Datums-Control
   Tag (Number-Input) · Monat (Dropdown, i18n) · Jahr (Number-Input)
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-date{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--panel-bg);overflow:visible;transition:border-color .15s,box-shadow .15s;height:38px}
.bh-app .bh-date:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.bh-app .bh-date.is-error{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(244,67,54,.12)!important}
.bh-app .bh-date.is-disabled{opacity:.45;pointer-events:none}
.bh-app .bh-date--full{display:flex}
.bh-app .bh-date--full .bh-date__part--month{flex:1}
.bh-app .bh-date--full .bh-date__part--month .bh-date__select{width:100%}

/* Trennlinie */
.bh-app .bh-date__sep{width:1px;height:22px;background:var(--border);flex-shrink:0}

/* Part-Wrapper */
.bh-app .bh-date__part{position:relative;display:flex;align-items:center;height:100%}

/* Monat: Select-Pfeil */
.bh-app .bh-date__part--select::after{content:'';position:absolute;right:7px;top:50%;transform:translateY(-50%);border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-muted);pointer-events:none;transition:border-color .15s}
.bh-app .bh-date:focus-within .bh-date__part--select::after{border-top-color:var(--accent)}
.bh-app .bh-date.is-error .bh-date__part--select::after{border-top-color:var(--err)}

/* Select */
.bh-app .bh-date__select{appearance:none;-webkit-appearance:none;border:none;background:transparent;font-family:var(--font-base);font-size:0.8125rem;color:var(--text-primary);font-weight:500;cursor:pointer;outline:none;padding:0 22px 0 10px;height:100%}
.bh-app .bh-date__select.is-ph{color:var(--text-muted);font-weight:400}
.bh-app .bh-date__part--month .bh-date__select{width:140px}
/* Monatsfeld als Design-System-Dropdown (js/bowhuman-sel.js, Peter 01.10.2026:
   "einheitliches Control, zentral stylen"). Dasselbe .bh-sel wie ueberall,
   nur ohne eigenen Rahmen — den traegt die .bh-date-Huelle, der Pfeil bleibt
   das ::after des Parts (wird bei Fokus akzentfarbig, bei Fehler rot).
   overflow der Huelle steht deshalb auf visible, sonst schnitte sie das Panel ab. */
.bh-app .bh-date .bh-date__part--select .bh-sel{min-width:0;width:140px;height:100%}
.bh-app .bh-date--full .bh-date__part--select .bh-sel{width:100%}
.bh-app .bh-date .bh-date__part--select .bh-sel-trigger{height:100%;padding:0 22px 0 10px;border:none;border-radius:0;background:transparent;box-shadow:none;font-size:0.8125rem;font-weight:500;color:var(--text-primary)}
.bh-app .bh-date .bh-date__part--select .bh-sel-trigger.is-ph{color:var(--text-muted);font-weight:400}
.bh-app .bh-date .bh-date__part--select .bh-sel-arrow{display:none}
.bh-app .bh-date .bh-date__part--select .bh-sel-panel{top:calc(100% + 6px)}

/* Number-Inputs (Tag + Jahr) */
.bh-app .bh-date__input{border:none;background:transparent;font-family:var(--font-base);font-size:0.8125rem;color:var(--text-primary);font-weight:500;outline:none;text-align:center;padding:0 8px;height:100%;-moz-appearance:textfield}
.bh-app .bh-date__input::-webkit-inner-spin-button,.bh-app .bh-date__input::-webkit-outer-spin-button{-webkit-appearance:none}
.bh-app .bh-date__input::placeholder{color:var(--text-muted);font-weight:400}
.bh-app .bh-date__part--day  .bh-date__input{width:52px}
.bh-app .bh-date__part--year .bh-date__input{width:66px;text-align:left;padding:0 10px}

/* Fehler-/OK-Meldung */
.bh-app .bh-date-msg{display:flex;align-items:center;gap:5px;font-size:0.6875rem;margin-top:5px;min-height:16px;transition:opacity .15s}
.bh-app .bh-date-msg--error{color:var(--err)}
.bh-app .bh-date-msg--warn{color:var(--warn)}
.bh-app .bh-date-msg--ok{color:var(--ok)}
.bh-app .bh-date-msg i{font-size:0.75rem;flex-shrink:0}

/* ════════════════════════════════════════════════════════════
   BH-TIME — zweiteiliges Zeit-Control
   Stunden (0–23) · Minuten (0–59) — beide Number-Input
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-time{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--panel-bg);overflow:hidden;transition:border-color .15s,box-shadow .15s;height:38px}
.bh-app .bh-time:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.bh-app .bh-time.is-error{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(244,67,54,.12)!important}
.bh-app .bh-time.is-disabled{opacity:.45;pointer-events:none}

/* Doppelpunkt */
.bh-app .bh-time__colon{font-size:0.9375rem;font-weight:700;color:var(--text-muted);line-height:1;padding:0 1px;flex-shrink:0;user-select:none;transition:color .15s}
.bh-app .bh-time:focus-within .bh-time__colon{color:var(--accent)}
.bh-app .bh-time.is-error     .bh-time__colon{color:var(--err)}

/* HH + MM Inputs */
.bh-app .bh-time__input{border:none;background:transparent;font-family:var(--font-base);font-size:0.9375rem;font-weight:600;color:var(--text-primary);outline:none;text-align:center;width:44px;height:100%;padding:0 6px;-moz-appearance:textfield}
.bh-app .bh-time__input::-webkit-inner-spin-button,.bh-app .bh-time__input::-webkit-outer-spin-button{-webkit-appearance:none}
.bh-app .bh-time__input::placeholder{color:var(--text-muted);font-weight:400;font-size:0.8125rem}

/* ════════════════════════════════════════════════════════════
   BH-TOAST — System-Feedback Benachrichtigungen
   Scope: html.bh-app
   API:  showToast(msg, type, {desc, action, duration})
         type: 'ok' | 'err' | 'warn' | 'info'
════════════════════════════════════════════════════════════ */
.bh-app .bh-toast-wrap{position:fixed;bottom:24px;right:24px;z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.bh-app .bh-toast{position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--panel-bg);border:1px solid var(--border);box-shadow:0 4px 20px rgba(0,0,0,.18);font-size:0.8125rem;color:var(--text-primary);min-width:260px;max-width:360px;pointer-events:all;overflow:hidden;animation:bh-toast-in .22s cubic-bezier(.34,1.56,.64,1) both}
.bh-app .bh-toast.is-hiding{animation:bh-toast-out .2s ease forwards}
.bh-app .bh-toast__icon{font-size:1rem;flex-shrink:0;margin-top:1px}
.bh-app .bh-toast__body{flex:1;min-width:0}
.bh-app .bh-toast__title{font-weight:600;line-height:1.35}
.bh-app .bh-toast__desc{font-size:0.6875rem;color:var(--text-muted);margin-top:2px;line-height:1.4}
.bh-app .bh-toast__action{background:none;border:none;cursor:pointer;font-size:0.75rem;font-weight:700;color:var(--accent);padding:0;font-family:var(--font-base);margin-top:6px;display:block;transition:opacity .12s}
.bh-app .bh-toast__action:hover{opacity:.7}
.bh-app .bh-toast__close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:0.875rem;padding:1px;border-radius:3px;flex-shrink:0;line-height:1;transition:color .12s;margin-top:1px}
.bh-app .bh-toast__close:hover{color:var(--text-primary)}
.bh-app .bh-toast__bar{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 var(--r-md) var(--r-md);opacity:.45;animation:bh-toast-bar linear forwards}
/* Varianten */
.bh-app .bh-toast--ok{border-color:rgba(46,125,50,.3)}
.bh-app .bh-toast--ok .bh-toast__icon{color:var(--ok)}
.bh-app .bh-toast--ok .bh-toast__bar{background:var(--ok)}
.bh-app .bh-toast--err{border-color:rgba(244,67,54,.3)}
.bh-app .bh-toast--err .bh-toast__icon{color:var(--err)}
.bh-app .bh-toast--err .bh-toast__bar{background:var(--err)}
.bh-app .bh-toast--warn{border-color:rgba(255,145,0,.3)}
.bh-app .bh-toast--warn .bh-toast__icon{color:var(--warn)}
.bh-app .bh-toast--warn .bh-toast__bar{background:var(--warn)}
.bh-app .bh-toast--info{border-color:var(--accent-bd)}
.bh-app .bh-toast--info .bh-toast__icon{color:var(--accent)}
.bh-app .bh-toast--info .bh-toast__bar{background:var(--accent)}
/* Animationen */
@keyframes bh-toast-in{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes bh-toast-out{from{opacity:1;transform:translateY(0);max-height:120px;margin-bottom:0}to{opacity:0;transform:translateY(6px);max-height:0;margin-bottom:-8px;padding-top:0;padding-bottom:0}}
@keyframes bh-toast-bar{from{width:100%}to{width:0%}}

/* ════════════════════════════════════════════════════════════
   BH-EMPTY — Leerzustand für Panels / Listen
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 24px;gap:0}
.bh-app .bh-empty__icon{font-size:2.75rem;color:var(--text-muted);opacity:.35;margin-bottom:16px;line-height:1}
.bh-app .bh-empty__title{font-size:0.9375rem;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.bh-app .bh-empty__desc{font-size:0.8125rem;color:var(--text-muted);line-height:1.5;max-width:280px;margin-bottom:20px}
/* Compakt-Variante (z.B. in Sidebars) */
.bh-app .bh-empty--sm{padding:28px 16px}
.bh-app .bh-empty--sm .bh-empty__icon{font-size:1.75rem;margin-bottom:10px}
.bh-app .bh-empty--sm .bh-empty__title{font-size:0.8125rem}
.bh-app .bh-empty--sm .bh-empty__desc{font-size:0.6875rem;margin-bottom:12px}

/* ════════════════════════════════════════════════════════════
   BH-SKEL — Skeleton Loading Placeholder
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
@keyframes bh-skel-pulse{0%,100%{opacity:1}50%{opacity:.38}}
.bh-app .bh-skel{display:block;background:var(--border);border-radius:var(--r-sm);animation:bh-skel-pulse 1.6s ease-in-out infinite}
/* Größen-Modifier */
.bh-app .bh-skel--text{height:13px;border-radius:3px}
.bh-app .bh-skel--title{height:18px;border-radius:4px}
.bh-app .bh-skel--avatar{width:36px;height:36px;border-radius:var(--r-full);flex-shrink:0}
.bh-app .bh-skel--avatar-lg{width:48px;height:48px;border-radius:var(--r-full);flex-shrink:0}
.bh-app .bh-skel--badge{height:20px;width:56px;border-radius:var(--r-full)}
.bh-app .bh-skel--btn{height:32px;border-radius:var(--r-md)}
.bh-app .bh-skel--card{height:72px;border-radius:var(--r-md)}
/* Layout-Helfer */
.bh-app .bh-skel-row{display:flex;align-items:center;gap:10px}
.bh-app .bh-skel-col{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}

/* ════════════════════════════════════════════════════════════
   BH-BOTTOM-NAV — Mobile Tab-Leiste (Robin / LittleJohn)
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--panel-bg);border-top:1px solid var(--border);display:flex;align-items:stretch;z-index:var(--z-overlay);padding-bottom:env(safe-area-inset-bottom,0)}
.bh-app .bh-bottom-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:0.625rem;font-weight:600;letter-spacing:.03em;color:var(--text-muted);text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer;border:none;background:none;padding:6px 0;font-family:var(--font-base);transition:color .12s;position:relative}
.bh-app .bh-bottom-nav__item i{font-size:1.375rem;transition:transform .15s}
.bh-app .bh-bottom-nav__item.is-active{color:var(--accent)}
.bh-app .bh-bottom-nav__item.is-active i{transform:translateY(-1px)}
/* Badge auf Icon (Benachrichtigungen) */
.bh-app .bh-bottom-nav__badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:var(--r-full);background:var(--err);color:#fff;font-size:0.625rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;border:2px solid var(--panel-bg)}

/* ════════════════════════════════════════════════════════════
   BH-STEPPER — Mehrstufiger Fortschritts-Indikator
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-stepper{display:flex;align-items:flex-start;padding:8px 0 28px}
.bh-app .bh-stepper__step{display:flex;align-items:flex-start;flex:1}
.bh-app .bh-stepper__step:last-child{flex:0 0 auto}
.bh-app .bh-stepper__indicator{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.bh-app .bh-stepper__dot{width:28px;height:28px;border-radius:var(--r-full);border:2px solid var(--border);background:var(--panel-bg);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:var(--text-muted);flex-shrink:0;transition:border-color .15s,background .15s,color .15s,box-shadow .15s;position:relative;z-index:1}
.bh-app .bh-stepper__lbl{font-size:0.625rem;font-weight:600;color:var(--text-muted);white-space:normal;text-align:center;line-height:1.25;max-width:64px;transition:color .15s}
.bh-app .bh-stepper__line{flex:1;height:2px;background:var(--border);margin-top:13px;transition:background .15s}
/* States */
.bh-app .bh-stepper__step.is-done .bh-stepper__dot{background:var(--accent);border-color:var(--accent);color:var(--panel-bg)}
.bh-app .bh-stepper__step.is-done .bh-stepper__line{background:var(--accent)}
.bh-app .bh-stepper__step.is-done .bh-stepper__lbl{color:var(--accent)}
.bh-app .bh-stepper__step.is-active .bh-stepper__dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.bh-app .bh-stepper__step.is-active .bh-stepper__lbl{color:var(--text-primary);font-weight:700}

/* ════════════════════════════════════════════════════════════
   BH-DRAWER — Slide-in Panel (Bottom Sheet / Right Drawer)
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-drawer{position:fixed;inset:0;z-index:var(--z-drawer);pointer-events:none}
.bh-app .bh-drawer.is-open{pointer-events:all}
.bh-app .bh-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .22s}
.bh-app .bh-drawer.is-open .bh-drawer__backdrop{opacity:1}
.bh-app .bh-drawer__panel{position:absolute;background:var(--panel-bg);overflow-y:auto}
/* Bottom Sheet */
.bh-app .bh-drawer--bottom .bh-drawer__panel{bottom:0;left:0;right:0;border-radius:var(--r-xl) var(--r-xl) 0 0;transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);max-height:85vh;padding-bottom:env(safe-area-inset-bottom,0)}
.bh-app .bh-drawer--bottom.is-open .bh-drawer__panel{transform:translateY(0)}
/* Right Drawer */
.bh-app .bh-drawer--right .bh-drawer__panel{top:0;right:0;bottom:0;width:360px;border-left:1px solid var(--border);transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
.bh-app .bh-drawer--right.is-open .bh-drawer__panel{transform:translateX(0)}
/* Blur Overlay (Marian Zielanalyse) */
.bh-app .bh-drawer--blur .bh-drawer__backdrop{background:rgba(0,0,0,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bh-app .bh-drawer--blur .bh-drawer__panel{top:50%;left:50%;transform:translate(-50%,-44%) scale(.96);width:min(560px,90vw);max-height:80vh;border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:0 24px 64px rgba(0,0,0,.45);transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .22s}
.bh-app .bh-drawer--blur{overflow:hidden}
.bh-app .bh-drawer--blur.is-open .bh-drawer__panel{transform:translate(-50%,-50%) scale(1);opacity:1}
.bh-app .bh-drawer--blur .bh-drawer__panel{opacity:0}
/* Interne Elemente */
.bh-app .bh-drawer__handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:10px auto 2px;flex-shrink:0}
.bh-app .bh-drawer__hdr{display:flex;align-items:center;gap:10px;padding:16px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.bh-app .bh-drawer__title{flex:1;font-size:0.9375rem;font-weight:700;color:var(--text-primary)}
.bh-app .bh-drawer__subtitle{font-size:0.75rem;color:var(--text-muted);font-weight:400;margin-top:1px}
.bh-app .bh-drawer__close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.125rem;padding:4px;border-radius:var(--r-sm);line-height:1;transition:color .12s;flex-shrink:0}
.bh-app .bh-drawer__close:hover{color:var(--text-primary)}
.bh-app .bh-drawer__body{padding:16px 20px;flex:1}
.bh-app .bh-drawer__footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}

/* ════════════════════════════════════════════════════════════
   FORMULAR — Fehlerzustände + Feld-Helfer
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
/* Fehler-State auf Input / Select / Textarea */
.bh-app .f-input.is-error,.bh-app .f-select.is-error,.bh-app .f-textarea.is-error{border-color:var(--err);background:rgba(244,67,54,.04)}
.bh-app .f-input.is-error:focus,.bh-app .f-select.is-error:focus,.bh-app .f-textarea.is-error:focus{border-color:var(--err);box-shadow:0 0 0 3px rgba(244,67,54,.12)}
/* Hint + Error-Text unter dem Feld */
.bh-app .f-hint{font-size:0.6875rem;color:var(--text-muted);margin-top:4px;display:block;line-height:1.4}
.bh-app .f-err{font-size:0.6875rem;color:var(--err);margin-top:4px;display:flex;align-items:center;gap:4px;line-height:1.4}
.bh-app .f-err i{font-size:0.75rem;flex-shrink:0}
/* Label-Klasse */
.bh-app .f-label{font-size:0.75rem;font-weight:600;color:var(--text-muted);letter-spacing:.03em;display:block;margin-bottom:5px}
.bh-app .f-label .req{color:var(--err);margin-left:2px}
/* Feld-Gruppe (Label + Input + Hint/Error) */
.bh-app .f-group{display:flex;flex-direction:column;gap:0;margin-bottom:16px}
.bh-app .f-group:last-child{margin-bottom:0}
/* Inline-Zeile (zwei Felder nebeneinander) */
.bh-app .f-row{display:flex;gap:12px}
.bh-app .f-row .f-group{flex:1;margin-bottom:0}
/* Trennlinie zwischen Formular-Sektionen */
.bh-app .f-divider{border:none;border-top:1px solid var(--border);margin:20px 0}
.bh-app .f-section-title{font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin:20px 0 12px}

/* ════════════════════════════════════════════════════════════
   BH-CHECK — Styled Checkbox
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-check-wrap{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.bh-app .bh-check-wrap input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--border);border-radius:4px;background:transparent;flex-shrink:0;cursor:pointer;position:relative;transition:border-color .12s,background .12s;margin:0}
.bh-app .bh-check-wrap input[type="checkbox"]:hover{border-color:var(--accent)}
.bh-app .bh-check-wrap input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.bh-app .bh-check-wrap input[type="checkbox"]:checked::after{content:"";position:absolute;left:4px;top:1px;width:6px;height:10px;border:2px solid var(--panel-bg);border-top:none;border-left:none;transform:rotate(43deg)}
.bh-app .bh-check-wrap input[type="checkbox"]:focus-visible{outline:3px solid var(--accent-dim);outline-offset:2px}
.bh-app .bh-check-wrap input[type="checkbox"]:disabled{opacity:.4;cursor:not-allowed}
.bh-app .bh-check-wrap input[type="checkbox"]:disabled~.bh-check-lbl{opacity:.4;cursor:not-allowed}
/* Indeterminate */
.bh-app .bh-check-wrap input[type="checkbox"]:indeterminate{background:var(--accent);border-color:var(--accent)}
.bh-app .bh-check-wrap input[type="checkbox"]:indeterminate::after{content:"";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--panel-bg);border:none;transform:none}
.bh-app .bh-check-lbl{font-size:0.8125rem;color:var(--text-primary);line-height:1.3}
.bh-app .bh-check-lbl small{display:block;font-size:0.6875rem;color:var(--text-muted);font-weight:400;margin-top:1px}

/* ════════════════════════════════════════════════════════════
   BH-RADIO — Styled Radio Button
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-radio-wrap{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none}
.bh-app .bh-radio-wrap input[type="radio"],.bh-app .bh-radio-card input[type="radio"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--border);border-radius:var(--r-full);background:transparent;flex-shrink:0;cursor:pointer;position:relative;transition:border-color .12s;margin:0;margin-top:1px}
.bh-app .bh-radio-wrap input[type="radio"]:hover,.bh-app .bh-radio-card input[type="radio"]:hover{border-color:var(--accent)}
.bh-app .bh-radio-wrap input[type="radio"]:checked,.bh-app .bh-radio-card input[type="radio"]:checked{border-color:var(--accent)}
.bh-app .bh-radio-wrap input[type="radio"]:checked::after,.bh-app .bh-radio-card input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:var(--r-full);background:var(--accent)}
.bh-app .bh-radio-wrap input[type="radio"]:focus-visible,.bh-app .bh-radio-card input[type="radio"]:focus-visible{outline:3px solid var(--accent-dim);outline-offset:2px}
.bh-app .bh-radio-wrap input[type="radio"]:disabled,.bh-app .bh-radio-card input[type="radio"]:disabled{opacity:.4;cursor:not-allowed}
.bh-app .bh-radio-wrap input[type="radio"]:disabled~.bh-radio-lbl{opacity:.4;cursor:not-allowed}
.bh-app .bh-radio-lbl{font-size:0.8125rem;color:var(--text-primary);line-height:1.3}
.bh-app .bh-radio-lbl small{display:block;font-size:0.6875rem;color:var(--text-muted);font-weight:400;margin-top:1px}
/* Radio-Gruppe (Cards) */
.bh-app .bh-radio-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:border-color .12s,background .12s;user-select:none}
.bh-app .bh-radio-card:has(input:checked){border-color:var(--accent);background:var(--accent-dim)}
.bh-app .bh-radio-card:hover:not(:has(input:checked)){border-color:var(--accent-bd)}

/* ════════════════════════════════════════════════════════════
   BH-LIST — Generisches Listen-Pattern
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-list{display:flex;flex-direction:column;overflow:hidden}
.bh-app .bh-list--bordered .bh-list-item{border-bottom:1px solid var(--border)}
.bh-app .bh-list--bordered .bh-list-item:last-child{border-bottom:none}
.bh-app .bh-list-item{display:flex;align-items:center;gap:10px;padding:10px 14px;transition:background .08s;min-height:48px}
.bh-app .bh-list-item:hover{background:var(--accent-t07,rgba(0,188,212,.07))}
.bh-app .bh-list-item.is-active{background:var(--accent-dim)}
.bh-app .bh-list-item.is-selected{background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* Icon-Slot links */
.bh-app .bh-list-item__icon{font-size:1.125rem;color:var(--text-muted);flex-shrink:0;width:20px;text-align:center}
.bh-app .bh-list-item__icon.accent{color:var(--accent)}
/* Avatar-Slot links */
.bh-app .bh-list-item__avatar{width:36px;height:36px;border-radius:var(--r-full);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:0.8125rem;font-weight:700;flex-shrink:0}
/* Text-Block */
.bh-app .bh-list-item__body{flex:1;min-width:0}
.bh-app .bh-list-item__title{font-size:0.8125rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-app .bh-list-item__sub{font-size:0.6875rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* Meta rechts */
.bh-app .bh-list-item__meta{font-size:0.6875rem;color:var(--text-muted);flex-shrink:0;text-align:right}
.bh-app .bh-list-item__meta strong{display:block;font-size:0.8125rem;color:var(--text-primary);font-weight:700}
/* Chevron (navigierbare Items) */
.bh-app .bh-list-item__chevron{font-size:0.875rem;color:var(--text-muted);flex-shrink:0;transition:transform .12s}
.bh-app .bh-list-item:hover .bh-list-item__chevron{transform:translateX(2px);color:var(--accent)}
/* Sektion-Header in Listen */
.bh-app .bh-list-header{padding:8px 14px 4px;font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.bh-app .bh-check-sub{display:block;font-size:0.6875rem;color:var(--text-muted);font-weight:400;margin-top:1px}

/* ════════════════════════════════════════════════════════════
   SPINNER (.bh-spin)
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
@keyframes bh-spin { to { transform: rotate(360deg); } }
.bh-app .bh-spin{display:inline-block;width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:bh-spin .7s linear infinite;flex-shrink:0}
.bh-app .bh-spin--sm{width:14px;height:14px;border-width:2px}
.bh-app .bh-spin--lg{width:32px;height:32px;border-width:3px}
.bh-app .bh-spin--ok{border-top-color:var(--ok)}
.bh-app .bh-spin--err{border-top-color:var(--err)}
.bh-app .bh-spin--warn{border-top-color:var(--warn)}
/* Inline mit Text */
.bh-app .bh-spin-wrap{display:inline-flex;align-items:center;gap:8px;font-size:0.8125rem;color:var(--text-muted)}

/* ════════════════════════════════════════════════════════════
   TOOLTIP ([data-tip])
   Scope: html.bh-app
   Verwendung: data-tip="Text" an beliebigem Element
   Positionen: data-tip-pos="top" (default) | bottom | left | right
════════════════════════════════════════════════════════════ */
.bh-app [data-tip]{position:relative;cursor:default}
.bh-app [data-tip]::before,.bh-app [data-tip]::after{pointer-events:none;opacity:0;transition:opacity .14s,transform .14s;position:absolute;z-index:var(--z-tooltip,700)}
/* Bubble */
.bh-app [data-tip]::before{content:attr(data-tip);background:var(--navy);color:#fff;font-size:0.6875rem;font-weight:500;line-height:1.4;padding:5px 9px;border-radius:var(--r-md);white-space:nowrap;max-width:220px;white-space:normal;text-align:center}
/* Arrow */
.bh-app [data-tip]::after{content:'';border:5px solid transparent}
/* TOP (default) */
.bh-app [data-tip]:not([data-tip-pos])::before,.bh-app [data-tip][data-tip-pos="top"]::before{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px)}
.bh-app [data-tip]:not([data-tip-pos])::after,.bh-app [data-tip][data-tip-pos="top"]::after{bottom:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(4px);border-top-color:var(--navy);border-bottom:none}
/* BOTTOM */
.bh-app [data-tip][data-tip-pos="bottom"]::before{top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px)}
.bh-app [data-tip][data-tip-pos="bottom"]::after{top:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(-4px);border-bottom-color:var(--navy);border-top:none}
/* LEFT */
.bh-app [data-tip][data-tip-pos="left"]::before{right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px)}
.bh-app [data-tip][data-tip-pos="left"]::after{right:calc(100% + 3px);top:50%;transform:translateY(-50%) translateX(4px);border-left-color:var(--navy);border-right:none}
/* RIGHT */
.bh-app [data-tip][data-tip-pos="right"]::before{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-4px)}
.bh-app [data-tip][data-tip-pos="right"]::after{left:calc(100% + 3px);top:50%;transform:translateY(-50%) translateX(-4px);border-right-color:var(--navy);border-left:none}
/* Hover: einblenden + in Position schieben */
.bh-app [data-tip]:hover::before,.bh-app [data-tip]:hover::after{opacity:1}
.bh-app [data-tip]:not([data-tip-pos]):hover::before,.bh-app [data-tip][data-tip-pos="top"]:hover::before{transform:translateX(-50%) translateY(0)}
.bh-app [data-tip]:not([data-tip-pos]):hover::after,.bh-app [data-tip][data-tip-pos="top"]:hover::after{transform:translateX(-50%) translateY(0)}
.bh-app [data-tip][data-tip-pos="bottom"]:hover::before{transform:translateX(-50%) translateY(0)}
.bh-app [data-tip][data-tip-pos="bottom"]:hover::after{transform:translateX(-50%) translateY(0)}
.bh-app [data-tip][data-tip-pos="left"]:hover::before{transform:translateY(-50%) translateX(0)}
.bh-app [data-tip][data-tip-pos="left"]:hover::after{transform:translateY(-50%) translateX(0)}
.bh-app [data-tip][data-tip-pos="right"]:hover::before{transform:translateY(-50%) translateX(0)}
.bh-app [data-tip][data-tip-pos="right"]:hover::after{transform:translateY(-50%) translateX(0)}

/* ════════════════════════════════════════════════════════════
   INLINE ALERT / CALLOUT (.bh-callout)
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-callout{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-md);border:1px solid;font-size:0.8125rem;line-height:1.5}
.bh-app .bh-callout__icon{font-size:1.125rem;flex-shrink:0;margin-top:1px}
.bh-app .bh-callout__body{flex:1;min-width:0}
.bh-app .bh-callout__title{font-weight:600;margin-bottom:2px}
.bh-app .bh-callout__desc{color:var(--text-secondary);font-size:0.75rem}
/* Varianten */
.bh-app .bh-callout--info{background:var(--accent-dim);border-color:var(--accent-bd);color:var(--text-primary)}
.bh-app .bh-callout--info .bh-callout__icon{color:var(--accent)}
.bh-app .bh-callout--ok{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 25%,transparent);color:var(--text-primary)}
.bh-app .bh-callout--ok .bh-callout__icon{color:var(--ok)}
.bh-app .bh-callout--warn{background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--text-primary)}
.bh-app .bh-callout--warn .bh-callout__icon{color:var(--warn)}
.bh-app .bh-callout--err{background:color-mix(in srgb,var(--err) 10%,transparent);border-color:color-mix(in srgb,var(--err) 25%,transparent);color:var(--text-primary)}
.bh-app .bh-callout--err .bh-callout__icon{color:var(--err)}

/* ════════════════════════════════════════════════════════════
   TEXTAREA — Erweiterungen zu .f-textarea
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .f-textarea{resize:vertical;min-height:80px;line-height:1.55}
.bh-app .f-textarea--fixed{resize:none}
/* Zeichenzähler-Wrap */
.bh-app .f-char-wrap{position:relative}
.bh-app .f-char-count{position:absolute;bottom:8px;right:10px;font-size:0.625rem;color:var(--text-muted);pointer-events:none;font-family:var(--font-mono)}
.bh-app .f-char-count.is-near{color:var(--warn)}
.bh-app .f-char-count.is-over{color:var(--err)}

/* ════════════════════════════════════════════════════════════
   TAG-INPUT (.bh-tag-input)
   Scope: html.bh-app
════════════════════════════════════════════════════════════ */
.bh-app .bh-tag-input{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:5px 8px;background:rgba(255,255,255,.06);border:1.5px solid var(--border);border-radius:var(--r-md);cursor:text;transition:border-color .15s;min-height:38px}
.bh-app .bh-tag-input:focus-within{border-color:var(--accent)}
.bh-app .bh-tag-input.is-error{border-color:var(--err)}
.bh-app .bh-tag-input.is-disabled{opacity:.45;pointer-events:none}
.bh-app .bh-tag-input__tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:var(--accent-dim);border:1px solid var(--accent-bd);border-radius:var(--r-full);font-size:0.6875rem;font-weight:600;color:var(--accent);white-space:nowrap;max-width:200px}
.bh-app .bh-tag-input__tag-text{overflow:hidden;text-overflow:ellipsis}
.bh-app .bh-tag-input__remove{background:none;border:none;cursor:pointer;color:var(--accent);font-size:0.75rem;line-height:1;padding:0;display:flex;align-items:center;opacity:.7;transition:opacity .1s;flex-shrink:0}
.bh-app .bh-tag-input__remove:hover{opacity:1}
.bh-app .bh-tag-input__field{border:none;outline:none;background:transparent;color:var(--text-primary);font-size:0.75rem;font-family:var(--font-base);min-width:80px;flex:1;padding:2px 0}
.bh-app .bh-tag-input__field::placeholder{color:var(--text-muted)}

/* ════════════════════════════════════════════════════════════════════════
   Objekt-Karte (.obj-card) — kanonische Umsetzung zu 09-object-cards.md
   ════════════════════════════════════════════════════════════════════════
   Angelegt 11.09.2026. Die Doku beschreibt diese Komponente seit dem
   14.07.2026 — im Code gab es sie nie. Stattdessen stand sie dreimal
   nachgebaut in je einer Seite:
     .session-card  css/archers-nest.css   (von 6 Seiten geladen)
     .ev-card       events.html, inline
     .obj-card      operator-app.html, inline
   Jede neue App baute sie erneut nach, weil es nichts zu benutzen gab.
   Entscheidung Peter Klein, 11.09.2026: gehoert ins Shared CSS.

   ZWEI DINGE SIND HIER ANDERS ALS IN DEN DREI VORLAGEN:

   1. Akzentneutral. Die Vorlagen haben Gruen hart eingebaut
      (rgba(74,114,0,.13) und Verwandte). Hier stehen --accent und die
      Tint-Skala --accent-t05…t45 — dadurch traegt die Karte in Robin Cyan,
      in Nottingham Orange und im Betreiber-Modul Gruen, ohne eine Zeile
      Anpassung.
   2. Elevation nach 09-object-cards.md §8, nicht nach Gefuehl:
      klickbar = erhaben + Lift + Visier-Cursor, Info = flach, kein Lift.

   MIGRATIONSPFAD: .session-card und .ev-card bleiben unveraendert in Betrieb.
   Wer eine der beiden anfasst, zieht sie auf .obj-card um; ein Umbau auf
   Verdacht wuerde sechs laufende Seiten riskieren, ohne dass jemand etwas
   davon haette. */

.bh-app .obj-card{
  container-type:inline-size; container-name:obj-card;
  border-radius:var(--r-xl);
  background:var(--nm-bg); box-shadow:var(--nm-shadow-sm);
  border:1.5px solid transparent;
  transition:box-shadow .15s, border-color .15s, opacity .15s;
}
html.bh-app.dark .obj-card{
  background:var(--accent-t05); box-shadow:none;
  border-color:var(--accent-t10);
}

/* Klickbar: Lift und Visier. Der Cursor unterscheidet Pie-Menu (Visier) von
   reiner Navigation (pointer) -- §8, Cursor-Feinregel. */
.bh-app .obj-card.is-clickable{cursor:pointer}
.bh-app .obj-card.bh-pie-trigger{cursor:var(--cursor-aim,pointer)}
.bh-app .obj-card.is-clickable:hover{box-shadow:var(--nm-shadow-out); border-color:var(--accent-t30)}
html.bh-app.dark .obj-card.is-clickable:hover{box-shadow:none; border-color:var(--accent-t20)}
.bh-app .obj-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Info-Karte: flach, kein Lift, kein Zeiger -- reine Anzeige. */
.bh-app .obj-card.is-info{background:var(--nm-bg); box-shadow:none; border-color:var(--border); cursor:default}
html.bh-app.dark .obj-card.is-info{background:transparent}
.bh-app .obj-card.is-info:hover{box-shadow:none; border-color:var(--border)}

/* Verknuepfte Ansichten (Karte <-> Liste, Brushing & Linking). Aus .ev-card
   uebernommen, dort seit den Turnierkarten in Gebrauch. */
.bh-app .obj-card.is-highlighted{border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent-t15)}
.bh-app .obj-card.is-dimmed{opacity:.35}

/* Ein Element mit container-type kann sich NICHT selbst per @container
   stylen, nur seine Nachfahren (CSS-Spec, kein Bug). Alles, was die Karte
   als Ganzes umschaltet, liegt deshalb auf dem Inner-Wrapper.
   Siehe reference_container_query_self_styling (Memory). */
.bh-app .obj-card-inner{padding:14px}
.bh-app .obj-card-top{display:flex; align-items:center; gap:9px; margin-bottom:9px}

/* Icon und Badge: das Badge ist ein ECHTES Flex-Item neben dem Icon, kein
   position:absolute und kein Overlap. Sonst zaehlt es nicht zur Breite des
   Wraps, und beim Zentrieren von Icon+Badge zentriert sich nur das nackte
   Icon -- in der Session-Karte ueber sechs Runden erarbeitet (§3.4). */
.bh-app .obj-icon-wrap{display:flex; align-items:flex-start; gap:3px; flex-shrink:0}
.bh-app .obj-icon{
  width:34px; height:34px; border-radius:var(--r-lg);
  background:var(--accent-t12); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.0625rem; flex-shrink:0;
}
.bh-app .obj-badge{
  display:none; align-self:flex-start;
  padding:1px 4px; border-radius:var(--r-full);
  font-size:.625rem; font-weight:800; line-height:1.3; white-space:nowrap;
  background:var(--accent-t07); color:var(--accent);
}
.bh-app .obj-card[data-tier="mid"] .obj-badge{background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn)}
.bh-app .obj-card[data-tier="low"] .obj-badge{background:color-mix(in srgb, var(--err) 12%, transparent); color:var(--err)}

/* Titel nie hart abschneiden: Ellipsis PLUS title-Attribut im Markup (§3.3). */
.bh-app .obj-body{flex:1; min-width:0}
.bh-app .obj-title{font-size:.8125rem; font-weight:700; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bh-app .obj-meta{font-size:.6875rem; color:var(--text-muted); display:flex; gap:7px;
  margin-top:2px; flex-wrap:wrap}
.bh-app .obj-meta span{display:flex; align-items:center; gap:2px}
.bh-app .obj-meta i{font-size:.6875rem}

/* Kennzahlenreihe */
.bh-app .obj-figs{display:flex; align-items:center; justify-content:space-between; gap:8px}
.bh-app .obj-kpis{display:flex; gap:14px; align-items:center}
.bh-app .obj-fig{text-align:center}
.bh-app .obj-fig__v{font-size:1rem; font-weight:800; color:var(--accent); line-height:1;
  font-variant-numeric:tabular-nums}
.bh-app .obj-fig__k{font-size:.625rem; color:var(--text-muted); margin-top:1px}
.bh-app .obj-fig-sep{width:1px; height:24px; background:var(--border)}

/* Stufe "breit" (Karten-Innenbreite >=460px): eine Zeile statt zwei. */
@container obj-card (min-width:460px){
  .bh-app .obj-card-inner{display:flex; align-items:center; gap:12px}
  .bh-app .obj-card-top{margin-bottom:0; flex:1; min-width:0}
  .bh-app .obj-figs{flex-shrink:0}
}

/* Stufe "schmal" (<340px): Icon-Tile. Nur Icon, Titel und das wichtigste
   Metadatum bleiben; die Kennzahlen weichen dem einen Badge. Schwelle 340px
   ist gemessen, nicht geraten -- unter der ueblichen Grid-Verschachtelung
   bleibt der Karteninhalt selbst bei ~390px Fensterbreite noch bei ~300px
   (§3.5). */
@container obj-card (max-width:340px){
  .bh-app .obj-card-inner{padding:10px}
  .bh-app .obj-card-top{flex-direction:column; align-items:center; text-align:center; gap:4px; margin-bottom:0}
  .bh-app .obj-body{width:100%}
  .bh-app .obj-meta{justify-content:center}
  .bh-app .obj-meta span:not(:first-child){display:none}
  .bh-app .obj-figs{display:none}
  /* Das Badge ist breiter als das 34px-Icon; bei --r-lg bliebe zu wenig
     gerade Kante, auf der die Pille aufliegt. Radius nur in dieser Stufe
     kleiner -- in breit und mittel bleibt das Icon rund. */
  .bh-app .obj-icon{border-radius:8px}
  .bh-app .obj-badge{display:block}
}

/* Opt-in-Modifier "Icon füllt die Textzeilen" (Peter, 18./19.09.2026: "Die
   Größe des Tierbildes skalieren, so dass es in der Höhe die 3 Zeilen
   abdeckt"). ERSTER Versuch war reines CSS (align-items:stretch am
   Icon-Slot + aspect-ratio:1/1 am Icon, Breite frei nach der gestreckten
   Höhe) -- lief in der Praxis auf ins Riesenhafte: .obj-card-top hat selbst
   keine feste Höhe (sie ergibt sich aus dem Inhalt), und genau dieser Fall
   (aspect-ratio + width/height:auto + align-items:stretch OHNE definierte
   Kreuzachsen-Höhe des Elternflex) ist ein bekannter Circular-Sizing-Fall,
   den Browser unterschiedlich (und teils explodierend) aufloesen -- bei
   Peter waren es "meterweise Scrollbalken" (Review 19.09.2026). Bewusst
   NICHT an .obj-icon selbst geändert -- das würde jede zweizeilige
   Objektkarte in der App verkleinern (Sessionkarten, Turnierkarten,
   Katalogliste). Stattdessen misst renderStEditForm()/parcours() die
   tatsaechlich gerenderte Hoehe von .obj-body (JS, kein CSS-Zirkelschluss
   moeglich) und setzt Icon-Breite/-Hoehe direkt darauf -- "berechnet sich
   selbst" aus dem echten Inhalt, aber bricht garantiert nicht aus, weil
   feste Pixelwerte statt Layout-Constraints geschrieben werden. Nur fuer
   die breite/mittlere Stufe (>340px, s.o.); in der schmalen Icon-Tile-Stufe
   bleibt .obj-icon unangetastet bei festen 34px. */
.bh-app .obj-card-top.icon-fills-height .obj-icon{flex-shrink:0}

/* Listen und Grids aus Objekt-Karten: --sp-md (12px). Mit neumorph-Schatten
   wirken Abstaende unter 10px gequetscht (§8, Abstaende). */
.bh-app .obj-list{display:flex; flex-direction:column; gap:var(--sp-md)}

/* ════════════════════════════════════════════════════════════════════════
   Zustands-Sparkline (.obj-spark)
   ════════════════════════════════════════════════════════════════════════
   Neu am 11.09.2026, auf Peters Entscheidung hin ins Shared CSS statt in
   eine Seite. Sie ersetzt den frueher angedachten Level-Ring: ein Ring zeigt
   einen Momentwert, die Sparkline zeigt den VERLAUF dahin, und die
   gestrichelte Linie die Schwelle, ab der es kritisch wird. Ein Betreiber
   sieht damit nicht nur "88 %", sondern ob es von 95 kommt oder auf 80 zu.

   Die Karte gibt sie in den Icon-Slot (.obj-icon-wrap), sie ist also
   Alternative zum Icon, nicht zum Badge. Das SVG kommt aus der Anwendung --
   hier stehen nur Groesse, Farbe und Zustaende.

   Sie traegt NUR die Kurve, keine Zahl (Korrektur 11.09.2026). Vorher stand
   der aktuelle Wert gross daneben; damit war der Slot dreimal so breit wie
   das 34px-Icon, den er vertritt, und die Karte fuehrte mit einer Zahl statt
   mit ihrem Titel. Der Wert gehoert ins Badge (schmale Stufe, §3.4) oder in
   die Kennzahlenreihe -- eine Zahl, eine Stelle. */
.bh-app .obj-spark{display:block; flex-shrink:0; line-height:0}
.bh-app .obj-spark svg{display:block; width:58px; height:34px}
.bh-app .obj-spark__line{fill:none; stroke:var(--ok); stroke-width:1.6; stroke-linejoin:round}
.bh-app .obj-spark__area{stroke:none; fill:var(--ok); opacity:.16}
.bh-app .obj-spark__dot{fill:var(--ok)}
.bh-app .obj-spark__thr{stroke:var(--warn); stroke-width:1; stroke-dasharray:2 2; opacity:.6}
/* Unter der Schwelle wechselt die Kurve auf Warnfarbe -- eine Farbe, drei
   Elemente, damit der Zustand auch ohne Lesen der Zahl ankommt. */
.bh-app .obj-spark.is-warn .obj-spark__line,
.bh-app .obj-spark__line.is-warn{stroke:var(--warn)}
.bh-app .obj-spark.is-warn .obj-spark__area{fill:var(--warn)}
.bh-app .obj-spark.is-warn .obj-spark__dot,
.bh-app .obj-spark__dot.is-warn{fill:var(--warn)}
/* Ohne Datengrundlage: nur die Schwellenlinie, keine erfundene Kurve. */
.bh-app .obj-spark.is-leer{opacity:.45}

/* Variante "Verlauf mit Bezug" (.obj-spark--ref, 31.10.2026, Tuck T8;
   09-object-cards.md §Zustands-Sparkline). Ausserhalb des Icon-Slots, eine
   Zeile neben ihrer Beschriftung: Punkte = Ist, Linie = gleitendes Mittel,
   gestrichelt = Bezug (Gruppenmittel). Keine Wertungsfarbe, kein .is-warn --
   was der Verlauf bedeutet, sagt der Satz daneben. Nur Variablen, damit ein
   Theme-Wechsel ohne neues Zeichnen umfaerbt. */
.bh-app .obj-spark--ref svg{width:112px; height:32px; overflow:visible}
.bh-app .obj-spark--ref .obj-spark__pt{fill:var(--accent)}
.bh-app .obj-spark--ref .obj-spark__avg{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round}
.bh-app .obj-spark--ref .obj-spark__ref{fill:none; stroke:var(--text-muted); stroke-width:1.2; stroke-dasharray:3 2}
.bh-app .obj-spark--ref .obj-spark__base{stroke:var(--border); stroke-width:1}
/* Legendenmuster: dieselben Striche in klein neben dem Wort */
.bh-app .obj-spark--key{display:inline-block; vertical-align:middle}
.bh-app .obj-spark--key svg{width:18px; height:10px}
/* Variante "in der Tabellenzeile" (.obj-spark--ref.obj-spark--cell, 31.10.2026,
   Tuck T9a; 09-object-cards.md): je Zeile ein Verlauf, in jeder dieselbe
   gestrichelte Bezugslinie. 96 x 24, damit die Zeile nicht aufgeht; mit der Zeile
   hervorgehoben (Brushing, .bh-brush-hover/-active) wird nur die Linie kraeftiger. */
.bh-app .obj-spark--cell{display:inline-block; vertical-align:middle; line-height:0}
.bh-app .obj-spark--cell svg{width:96px; height:24px}
.bh-app :is(.bh-brush-hover,.bh-brush-active) .obj-spark--cell .obj-spark__avg{stroke-width:2.6}

/* Mosaik mit Klick-Filter (.bh-mosaic, 01.11.2026, Tuck T10a; 03-organisms.md
   §Mosaik mit Klick-Filter, Modul Websites/shared/bowhuman-mosaic.js). Kopie des
   Marian-Mosaiks (.hk-mosaic-*) mit zwei Dimensionen. Farbe nur ueber data-tone
   und Variablen -- hell und dunkel ohne neues Zeichnen. Die Deckkraft je Zelle
   setzt das Modul als Attribut (Zahl), .is-dimmed ueberstimmt sie per CSS.
   Der Fokusring ist ein Strich, weil SVG-Elemente kein outline zeichnen. */
.bh-app .bh-mosaic{position:relative; min-width:0}
.bh-app .bh-mosaic__stage{width:100%; min-width:0; overflow:hidden}
.bh-app .bh-mosaic__svg{display:block; max-width:100%; height:auto; overflow:visible}
.bh-app .bh-mosaic__cell{fill:var(--accent); stroke:var(--white); stroke-width:1; cursor:pointer;
  transition:fill-opacity .15s}
.bh-app .bh-mosaic__cell[data-tone="ok"]{fill:var(--ok)}
.bh-app .bh-mosaic__cell[data-tone="warn"]{fill:var(--warn)}
.bh-app .bh-mosaic__cell[data-tone="err"]{fill:var(--err)}
.bh-app .bh-mosaic__cell[data-tone="info"]{fill:var(--cyan-fg)}
.bh-app .bh-mosaic__cell[data-tone="muted"]{fill:var(--text-muted)}
.bh-app .bh-mosaic__cell.is-empty{fill:var(--nm-bg); stroke:var(--border); cursor:default}
.bh-app .bh-mosaic__cell.is-dimmed{fill-opacity:.12}
.bh-app .bh-mosaic__cell:hover:not(.is-empty){stroke:var(--text-primary); stroke-width:1.5}
.bh-app .bh-mosaic__cell.is-selected{stroke:var(--text-primary); stroke-width:2.5}
.bh-app .bh-mosaic__cell:focus{outline:none}
.bh-app .bh-mosaic__cell:focus-visible{stroke:var(--cyan-fg); stroke-width:3}
.bh-app .bh-mosaic__axis{font-size:0.6875rem; fill:var(--text-secondary); font-family:var(--font-base); cursor:pointer}
.bh-app .bh-mosaic__axis.is-active{fill:var(--text-primary); font-weight:var(--fw-bold)}
.bh-app .bh-mosaic__axis.is-dimmed{fill:var(--text-muted); opacity:.6}
/* Namen sind Halte der Tastatur (Pfeil hoch/links aus dem Raster, E640): Fokus als
   Farbe plus Unterstrich, weil Text im SVG keinen Strich als Ring traegt */
.bh-app .bh-mosaic__axis:focus{outline:none}
.bh-app .bh-mosaic__axis:focus-visible{fill:var(--cyan-fg); font-weight:var(--fw-bold); text-decoration:underline; text-decoration-thickness:2px}
.bh-app .bh-mosaic__corner{font-size:0.625rem; fill:var(--text-muted); font-family:var(--font-base);
  text-transform:uppercase; letter-spacing:.04em}
.bh-app .bh-mosaic__total{font-size:0.625rem; fill:var(--text-muted); font-family:var(--font-mono); pointer-events:none}
/* Zahl in der Zelle mit Hof in Hintergrundfarbe: lesbar auf jeder Fuellung, hell wie dunkel */
.bh-app .bh-mosaic__count{font-size:0.6875rem; font-family:var(--font-mono); font-weight:var(--fw-bold);
  fill:var(--text-primary); stroke:var(--white); stroke-width:3px; paint-order:stroke; pointer-events:none}
.bh-app .bh-mosaic__empty{margin:0; padding:var(--sp-lg) 0; color:var(--text-muted); font-size:var(--text-sm)}
/* Live-Region: fuer Screenreader da, auf dem Bildschirm nicht */
.bh-app .bh-mosaic__live{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ════════════════════════════════════════════════════════════════════════
   Hypergrid (.hg) — Tabellenlupe
   ════════════════════════════════════════════════════════════════════════
   Umsetzung von Vault/07 UX & Konzepte/prompt-hypergrid-profil.md,
   "Das Hypergrid-Konzept": eine Zeile aus N Zellen, jede Zelle kompakt oder
   aufgeklappt. Klappt eine Zelle auf, WAECHST ihre Spalte und die uebrigen
   schrumpfen -- kein Detailblock unter der Zeile. Genau das ist der
   Unterschied zum Akkordeon in bowhuman-table.css: dort bleibt die Zeile wie
   sie ist und darunter oeffnet sich eine zweite; hier bleibt alles in einer
   Zeile und der Platz wird umverteilt.

   KLASSISCHE TABLE LENS (Rao & Card 1994, Entscheidung Peter Klein
   11.09.2026): die Verzerrung gilt fuer die ganze Tabelle. Kopfzeile und
   alle Zeilen bekommen dieselbe fr-Liste, also bleibt die Tabelle buendig.
   Die erste Fassung verzerrte nur die Zeile mit der offenen Zelle -- dann
   steht die Kopfzeile schief ueber ihr.

   Die Breiten stehen als fr-Liste im style-Attribut (die Anwendung rechnet
   sie aus, sie haengen von der Zahl der Spalten ab und sind fuer Kopf und
   Zeilen dieselben). Die Transition auf grid-template-columns gehoert
   hierher, nicht in die Anwendung.

   Sortierung, Spaltenfilter und Filter-Popups kommen aus bowhuman-table.js /
   bowhuman-table.css (.th-sort, .th-filter, .th-filter-popup) -- das Grid
   bringt dafuer nichts Eigenes mit. */
.bh-app .hg{display:flex; flex-direction:column; container-type:inline-size; container-name:hg}
.bh-app .hg-head,
.bh-app .hg-row{display:grid; align-items:stretch;
  transition:grid-template-columns 260ms cubic-bezier(.4,0,.2,1)}

.bh-app .hg-head{border-bottom:1.5px solid var(--border);
  background:linear-gradient(var(--accent-t05),var(--accent-t05))}
.bh-app .hg-th{display:flex; align-items:center; gap:5px; padding:9px 13px;
  font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); min-width:0}

.bh-app .hg-row{border-bottom:1px solid var(--border)}
.bh-app .hg-row:last-child{border-bottom:none}
.bh-app .hg-row.is-sel{background:var(--accent-t07)}

.bh-app .hg-cell{padding:9px 13px; min-width:0; overflow:hidden; cursor:zoom-in;
  border-right:1px solid var(--border); transition:background .12s}
.bh-app .hg-cell:last-child{border-right:none}
.bh-app .hg-cell:hover{background:var(--accent-t05)}
.bh-app .hg-cell:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.bh-app .hg-cell.is-open{cursor:zoom-out; background:var(--accent-t07);
  box-shadow:inset 3px 0 0 var(--accent)}
/* Eine geschrumpfte Nachbarzelle soll andeuten, nicht abschneiden. */
.bh-app .hg-row.has-open .hg-cell:not(.is-open){opacity:.72}
.bh-app .hg-cell__min{font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bh-app .hg-cell__sub{font-size:.625rem; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.bh-app .hg-cell__full{margin-top:9px; padding-top:9px; border-top:1px dashed var(--border)}

/* Schmal: die Lupe braucht Breite. Darunter stapeln sich die Zellen und die
   aufgeklappte steht ganz oben -- dieselbe Degree-of-Interest-Regel wie bei
   der Objekt-Karte (09-object-cards.md §2). */
@container hg (max-width:640px){
  .bh-app .hg-head{display:none}
  .bh-app .hg-row{grid-template-columns:1fr!important}
  .bh-app .hg-cell{border-right:none; border-bottom:1px dashed var(--border)}
  .bh-app .hg-row.has-open .hg-cell:not(.is-open){display:none}
}

/* ── Hypergrid: Auswahl-Spalte, Sammelaktionsleiste, Bearbeiten-Platzhalter ──
   17.09.2026, Review Punkt 3: Zeilen sollen selektierbar sein (Sammel-
   loeschen) und jede offene Zelle einen Bearbeiten-Zugriff bekommen.
   Rechtsklick/Touch-Kontextmenue blieb im Review als offene Frage stehen
   ("ich sehe nicht wie..."; "vielleicht Rechtsklick... oder wir lassen den
   Workaround mit expliziten Aktionen in den Zellen") -- diese Zelle nutzt
   genau den zweiten, von Peter selbst genannten Weg: eine explizite Aktion
   in der Zelle statt eines Kontextmenues. Bearbeiten und Loeschen sind
   bewusst deaktiviert/mit Hinweistext, solange es dafuer keinen
   PATCH/DELETE-Endpunkt in routes/operators.js gibt -- ein Button, der nur
   so tut, waere ein "fertig" ohne Beleg. */
.bh-app .hg-check{display:flex; align-items:center; justify-content:center;
  padding:9px 6px; border-right:1px solid var(--border)}
.bh-app .hg-th.hg-th--check{justify-content:center; padding:9px 6px}
.bh-app .hg-cell__full{position:relative; padding-right:34px}
.bh-app .hg-edit-btn{position:absolute; top:9px; right:0; width:24px; height:24px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r-sm,4px);
  background:transparent; color:var(--text-muted); cursor:not-allowed}
.bh-app .hg-bulk{display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:var(--accent-dim); border-bottom:1px solid var(--border);
  font-size:0.75rem; font-weight:700; color:var(--accent)}
.bh-app .hg-bulk[hidden]{display:none}
.bh-app .hg-bulk > :nth-child(2){margin-left:auto}
.bh-app .hg-bulk button{font-size:0.6875rem}
/* Deaktiviert sah bislang aus wie aktiv (kein Browser-Default fuer .btn
   mit eigenem Hintergrund/Rand) -- Review nach Deploy: "Loeschen
   funktioniert nicht" war eigentlich "sieht nicht deaktiviert aus". Gleiche
   Werte wie .btn-sm[disabled], nur fuer .btn/.btn-ghost ergaenzt. */
.bh-app .btn[disabled],
.bh-app .btn-ghost[disabled]{opacity:.5; cursor:not-allowed; pointer-events:none}
.bh-app .hg-edit-btn{opacity:.5}