/* ════════════════════════════════════════════════════════════
   ARCHERS NEST — Seitenspezifische Styles
   sherwood.bowhuman.eu/archers_nest.html

   Setzt bowhuman-tokens.css + bowhuman-app.css voraus.
   Nur hier: Auth-States, Dashboard-Layout, Profile, Sessions,
   Equipment, Achievements, Events, Hypergrid, Privacy-Modal-Inhalt.
════════════════════════════════════════════════════════════ */

/* ── Sherwood Accent-Override (bowhuman-app.css setzt --accent:cyan, sherwood=green) ──
   Bugfix 2026-07-19 (Peter, Live-Test: Pie-Menu-Icons im Hell-Theme immer noch
   Neon-Lime, obwohl bowhuman-tokens.css bereits auf --green-fg korrigiert war) —
   diese Zeile hier hat den globalen Fix lokal wieder zurücküberschrieben, indem
   sie --accent erneut hart auf --green (Neon-Lime, nur Dark-BG-tauglich) setzte.
   Jetzt dieselbe Logik wie im globalen Token: --accent auf das theme-adaptive
   --green-fg, --accent-dk auf das stabile Mid-Tone --green-dk (Gradient-Stop,
   soll NICHT mit dem Theme kippen — vorher stand hier fälschlich --green-fg,
   also die theme-kippende Variable an der falschen Stelle). */
html.bh-app{--accent:var(--green-fg);--accent-dk:var(--green-dk);--accent-dark-bg:var(--green);
  /* 28.08.2026, zweiter Anlauf: Hier stand der Satz, sherwood.css setze
     --accent-on theme-abhaengig. Fuer diese Seiten stimmt er nicht —
     archers_nest, equipment, sessions und profile-edit laden sherwood.css
     ueberhaupt nicht. Uebrig blieb der bh-app-Default (#fff), im Dunkeln
     also weisse Schrift auf Neon-Lime, 1.21:1 (Peters "Hochladen"-Knopf).
     Das Paar steht jetzt unten fuer beide Themes, mit doppelter Klasse,
     damit keine Ladereihenfolge es mehr kippen kann. */
  /* Fix 2026-07-19: --accent-t* mitgesetzt (Seite lädt bowhuman-components.css nicht,
     sonst Cyan-Fallback). Aus --accent abgeleitet → theme-adaptiv. */
  --accent-t07:color-mix(in srgb,var(--accent) 7%,transparent);
  --accent-t12:color-mix(in srgb,var(--accent) 12%,transparent);
  --accent-t15:color-mix(in srgb,var(--accent) 15%,transparent);
  --accent-t25:color-mix(in srgb,var(--accent) 25%,transparent);}
/* 2026-08-19 (Peter-Feedback nach Deploy, "Hochladen"-Button wirkt zu dunkel):
   --accent-on stand oben statisch auf --navy für beide Modi. Im Dark Mode
   passt das (dunkler Text auf hellem Neon-Lime-Grün). Im Hell-Modus wird
   --accent aber zu --green-fg — ein dunkles Oliv, ursprünglich als Textfarbe
   AUF hellem Grund gedacht, nicht als Button-Fläche. Dunkler Navy-Text
   darauf ergibt Dunkel-auf-Dunkel = matt/"zu dunkel". CRM
   (admin/crm/index.html) hat für exakt dasselbe Grün bereits pro Modus
   unterschiedlichen --accent-on (dunkel im Dark Mode, weiß im Hell-Modus) —
   hier an dasselbe, bereits bewährte Muster angeglichen. */
html.bh-app:not(.dark){--accent-on:#fff;
  /* 2026-08-19 (Peter-Feedback): Primary-Buttons zeigten im Hell-Modus einen
     deutlich sichtbaren Verlauf (--accent-grad geht von --accent #4A7200 zu
     --accent-dk #7AB800 — großer Helligkeitssprung), im Dark Mode wirkt der
     gleiche Verlauf (--accent #B4FF2E zu --accent-dk #7AB800) dagegen fast
     einfarbig. Zusätzlicher Fund: #7AB800 (der helle Verlaufs-Stop) hat mit
     weißem Text nur ~2.4:1 Kontrast — WCAG-Verstoß am helleren Rand des
     Buttons. Fix: im Hell-Modus flach auf --accent (5.7:1 mit Weiß, AA-fest)
     statt Verlauf — sieht dem Dark-Mode-Look angeglichen aus UND behebt den
     Kontrast-Rand. */
  --accent-grad:var(--accent);}
/* Gegenstueck zum Hell-Zweig: im Dunkeln ist --accent = --green (Neon-Lime),
   das traegt dunkle Schrift (15.58:1). html.bh-app.dark schlaegt jedes
   html.dark aus einer anderen Datei, unabhaengig von der Reihenfolge. */
html.bh-app.dark{--accent-on:var(--navy);}

/* ── Body-Override: Seite scrollt (kein App-Shell-Overflow) ── */
html.bh-app body{
  padding-top:60px;
  overflow:auto;
  min-height:100vh;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
html{scroll-behavior:smooth;scroll-padding-top:60px}

/* ═══════════════════════ AUTH STATE ═══════════════════════ */
.state-out{display:block;}.state-in{display:none;}
body.logged-in .state-out{display:none;}
body.logged-in .state-in{display:block;}
body.logged-in .state-in-flex{display:flex !important;}

/* ═══════════════════════ GUEST HERO ═══════════════════════ */
/* Theme-feste Flaeche: --navy in BEIDEN Themes, kein light/dark-Override.
   Der Hero selbst ist durchgehend theme-fest gebaut (#fff, rohes --green,
   --text-muted-dark-bg). Generische Bauteile bringen aber ihr adaptives Token
   von aussen mit: .btn-ghost setzt color:var(--text-secondary)
   (bowhuman-app.css:401), im Hellmodus #4a5568 auf #0d1117 = 2.51:1 --
   gemessen auf 10 Seiten ("Zur Startseite"). Deshalb bindet die Flaeche die
   Textfarben um, wie .app-topbar und .nav/.footer es tun.
   --accent bleibt bewusst unangetastet: das waere eine sichtbare
   Gestaltungsaenderung am Primaer-Button, keine Kontrastreparatur.
   Siehe 00-foundations.md "Theme-feste Flaechen". 09.09.2026 */
.guest-hero{--text-secondary:var(--text-muted-dark-bg);--text-muted:var(--text-muted-dark-bg)}
.guest-hero{min-height:calc(100vh - 60px);background:var(--navy);position:relative;overflow:hidden;display:flex;align-items:center;padding:80px 24px;}
.guest-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 68% 45%, color-mix(in srgb, var(--green) 8%, transparent) 0%, transparent 65%);pointer-events:none;}
.guest-hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb, var(--green) 3%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--green) 3%, transparent) 1px,transparent 1px);background-size:64px 64px;pointer-events:none;}
.guest-hero-inner{width:100%;max-width:560px;margin:0 auto;position:relative;z-index:1;text-align:center;}
.hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:0.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);border:1px solid color-mix(in srgb, var(--green) 30%, transparent);background:color-mix(in srgb, var(--green) 8%, transparent);padding:4px 12px;border-radius:var(--r-full);margin-bottom:20px;}
.guest-title{font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.1;color:#fff;margin-bottom:18px;letter-spacing:-.02em;}
.guest-title .hl{color:var(--green);}
.guest-desc{font-size:1.0625rem;color:rgba(255,255,255,.58);line-height:1.7;margin-bottom:36px;}
.guest-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:36px;}
/* 2026-08-19 (Peter-Feedback, Mitgliederübersicht-Button-Audit): nutzte noch
   die feste (nicht theme-adaptive) --grad-green/--navy-Kombination — exakt
   derselbe Bug, der beim Dashboard-Hochladen-Button (P8) und bei .btn-primary
   in equipment.html/profile-edit.html (P9) schon gefunden wurde. Diese Regel
   hier war praktisch "totes" CSS, weil .bh-app .btn-primary in
   bowhuman-app.css (höhere Specificity: 2 statt 1 Klasse) auf jeder Seite,
   die auch bowhuman-app.css lädt, ohnehin gewinnt — aber genau das macht sie
   zur Falle für jede Seite, die archers-nest.css OHNE bowhuman-app.css lädt
   (z.B. ältere, nicht auf P9 migrierte Seiten). Auf dieselbe Logik wie
   .btn-sm-primary umgestellt. */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:var(--r-xl);background:var(--accent-grad);color:var(--intent-primary-on,var(--accent-on));font-size:0.9375rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 20px color-mix(in srgb,var(--accent) 25%,transparent);}
.btn-primary:hover{opacity:.9;}
/* .btn-secondary entfernt 2026-09-07 — Button-Vereinheitlichung, kanonisch jetzt .btn-ghost in bowhuman-app.css */

/* Login-Card */
.login-card{padding:28px;border-radius:var(--r-2xl);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:left;}
.login-card h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:5px;}
.login-card p{font-size:0.8125rem;color:var(--text-muted-dark-bg);margin-bottom:20px;}
.login-form{display:flex;flex-direction:column;gap:10px;}
.form-field{display:flex;flex-direction:column;gap:4px;}
.form-field label{font-size:0.6875rem;font-weight:600;color:var(--text-muted-dark-bg);letter-spacing:.06em;text-transform:uppercase;}
.form-field input{padding:10px 14px;border-radius:var(--r-lg);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:0.875rem;font-family:var(--font-base);outline:none;}
.form-field input:focus{border-color:color-mix(in srgb, var(--green) 45%, transparent);}
.form-field input::placeholder{color:var(--text-muted-dark-bg);}
.form-divider{display:flex;align-items:center;gap:12px;color:var(--text-muted-dark-bg);font-size:0.75rem;margin:4px 0;}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1);}
.btn-social{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--r-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7);font-size:0.8125rem;font-weight:600;cursor:pointer;}
.login-hint{margin-top:12px;text-align:center;font-size:0.75rem;color:var(--text-muted-dark-bg);}
.login-hint a{color:var(--green);text-decoration:none;}
.api-hint{margin-top:18px;padding:12px 14px;border-radius:var(--r-lg);background:color-mix(in srgb, var(--green) 6%, transparent);border:1px solid color-mix(in srgb, var(--green) 18%, transparent);font-family:var(--font-mono);font-size:0.6875rem;color:color-mix(in srgb, var(--green) 85%, transparent);line-height:1.7;}
.api-hint-label{font-size:0.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--green) 55%, transparent);margin-bottom:5px;}

/* ═══════════════════════ DASHBOARD ═══════════════════════ */
.dashboard{max-width:var(--content-max);margin:0 auto;padding:32px 24px 80px;}

/* Profil-Header */
.profile-header{border-radius:var(--r-2xl);overflow:hidden;margin-bottom:28px;background:var(--navy);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 40px rgba(0,0,0,.25);}
.profile-header-bg{height:90px;background:linear-gradient(135deg,#071209 0%,#0a1e0a 50%,#071409 100%);background-image:linear-gradient(color-mix(in srgb, var(--green) 4%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--green) 4%, transparent) 1px,transparent 1px);background-size:48px 48px;position:relative;}
.profile-header-bg::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,transparent,var(--navy));}
.profile-header-body{padding:0 28px 20px;display:flex;align-items:flex-end;gap:18px;margin-top:-32px;position:relative;z-index:1;flex-wrap:wrap;}
.profile-avatar-wrap{position:relative;flex-shrink:0;}
.profile-avatar{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.625rem;font-weight:800;color:var(--navy);border:3px solid var(--navy);}
.profile-online{position:absolute;bottom:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#4caf50;border:2px solid var(--navy);}
.profile-meta{flex:1;min-width:200px;}
.profile-name{font-size:1.1875rem;font-weight:800;color:#fff;margin-bottom:1px;}
.profile-displayname{font-size:0.75rem;color:var(--text-muted-dark-bg);font-family:var(--font-mono);margin-bottom:5px;}
.profile-displayname span{color:color-mix(in srgb, var(--green) 60%, transparent);}
/* Claim (Spruch/Motto) — 2026-08-19, s. Kommentar in archers_nest.html.
   Farbwerte/Stil an .profile-claim aus archer.html angelehnt (dort bereits
   für denselben Zweck bei fremden Profilen im Einsatz), hier auf die
   dunkle Profil-Header-Karte abgestimmt (immer dunkel, s. Kommentar unten
   zu .bow-chip/.age-class-chip). */
.profile-claim{font-size:0.75rem;font-style:italic;color:var(--text-muted-dark-bg);margin-bottom:5px;}
.profile-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:0.75rem;color:var(--text-muted-dark-bg);}
.profile-sub-item{display:flex;align-items:center;gap:4px;}
.profile-sub-item i{font-size:0.75rem;}
/* 2026-08-19 (Peter-Feedback nach Deploy): .bow-chip/.age-class-chip sitzen
   ausschließlich im Profil-Header, der unabhängig vom Light/Dark-Toggle
   immer dunkel ist (--navy, s. .profile-header). Vorher nahm die Textfarbe
   im Hell-Modus trotzdem var(--green-fg) (dunkles Oliv, für HELLE
   Flächen gedacht) an und wurde auf dem dauerhaft dunklen Header fast
   unsichtbar — derselbe Fehlertyp wie unten bei .btn-sm-ghost. Fest auf
   die für dunklen Untergrund gedachte Farbe gesetzt, ohne Theme-Abhängigkeit. */
.bow-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);background:color-mix(in srgb, var(--green) 10%, transparent);border:1px solid color-mix(in srgb, var(--green) 20%, transparent);color:var(--green);font-size:0.6875rem;font-weight:700;}
.age-class-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);background:color-mix(in srgb, var(--green) 10%, transparent);border:1px solid color-mix(in srgb, var(--green) 20%, transparent);color:var(--green);font-size:0.6875rem;font-weight:700;}
.robin-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);background:rgba(255,165,0,.1);border:1px solid rgba(255,165,0,.25);color:#c87800;font-size:0.6875rem;font-weight:700;}
html.dark .robin-chip{color:#ffb347;background:rgba(255,165,0,.12);border-color:rgba(255,165,0,.3);}
.profile-actions{display:flex;gap:8px;align-items:flex-end;padding-bottom:2px;flex-wrap:wrap;}
/* ── 3-Ebenen-Button-Hierarchie (2026-08-19, Button-Pill-Konsolidierung) ──
   Primary = Hauptaktion des Screens, volltonig, 32px (Fitts' Law).
   Secondary (.btn-sm-ghost) = Werkzeuge/Abbrechen, dezente Outline, 28px.
   Danger = destruktive Bestätigung, gleiche Höhe wie Secondary.
   .btn-sm-privacy (bisher für "Profil" UND "Privatsphäre" zweckentfremdet,
   obwohl beides eigentlich Secondary-Aktionen sind) entfällt zugunsten von
   .btn-sm-ghost — s. Umsetzung unten in .profile-actions. */
/* .btn-sm (Basisgröße) entfernt 2026-09-07 — jetzt in bowhuman-app.css konsolidiert */
.btn-sm-primary{height:32px;background:var(--accent-grad);color:var(--intent-primary-on,var(--accent-on));}
/* .btn-sm-ghost (Basis) entfernt 2026-09-07 — jetzt in bowhuman-app.css konsolidiert. .profile-actions .btn-sm-ghost unten bleibt als Kontext-Override. */
/* 2026-08-19 (Peter-Feedback nach Deploy): .btn-sm-ghost ist theme-adaptiv
   gebaut (dunkle Schrift im Hell-Modus, helle Schrift im Dark-Modus) — das
   passt für die Modals weiter unten (Privacy/Session-Löschen/Equip-Löschen/
   Share), die auf normalen, theme-folgenden Karten liegen. Im Profil-Header
   sitzt .btn-sm-ghost aber auf .profile-header, der IMMER dunkel ist
   (--navy, unabhängig vom Toggle) — dort nahm die Schrift im Hell-Modus
   var(--text-secondary) an (dunkelgrau, für helle Flächen gedacht) und war
   auf dem Header fast unsichtbar. Hier fest auf die Dark-Surface-Variante
   gesetzt, ohne Theme-Abhängigkeit — in Dark Mode identisch zum bisherigen
   Ergebnis, keine Regression dort. */
.profile-actions .btn-sm-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.65);}
.profile-actions .btn-sm-ghost:hover{background:rgba(255,255,255,.1);color:#fff;}

/* Stats-Strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.07);}
.stat-cell{padding:14px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.07);}
.stat-cell:last-child{border-right:none;}
.stat-val{font-size:1.3125rem;font-weight:800;color:var(--green);}
.stat-lbl{font-size:0.625rem;color:var(--text-muted-dark-bg);margin-top:2px;}

/* Grid-Layout */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px;}
.dash-col-full{grid-column:1/-1;}
/* min-width:0 auf ALLEN direkten Grid-Items — nicht nur .dash-card selbst
   (Fund 2026-07-17, Fortsetzung des min-width-Fixes oben): das zweite
   Grid-Item ist ein unstyled Wrapper-Div (Events+Ausrüstung gestapelt, s.
   archers_nest.html Z.363, nur inline style, keine Klasse). Bei <900px
   kollabiert .dash-grid auf eine Spalte — Sessions-Karte UND dieser
   Wrapper teilen sich dann dieselbe Spalten-Breite. Ohne min-width:0 auf
   BEIDEN Items bestimmt das jeweils breitere Item (hier: der Termine-
   Wrapper) die gemeinsame Spaltenbreite, unabhängig vom Fix an .dash-card
   allein. */
.dash-grid > *{min-width:0;}
/* min-width:0 — Grid-Items haben per Spec einen impliziten min-width:auto
   (= Content-Breite), dadurch läuft die Karte bei schmalen Viewports seitlich
   über statt zu schrumpfen. Gefunden 2026-07-17 beim Debuggen des Semantic-
   Zoom-Bugs bei "Letzte Sessions": .session-card-inner maß 371px bei 300px
   Viewport-Breite, obwohl die @container-Regel in .session-card korrekt war —
   die Container Query rechnete nur mit der (falschen, übergroßen) gerenderten
   Breite. Root Cause war hier, nicht im Container-Query-Code selbst. */
.dash-card{border-radius:var(--r-2xl);padding:20px;background:var(--nm-bg);box-shadow:var(--nm-shadow-sm);min-width:0;}
html.dark .dash-card{background:rgba(255,255,255,.03);box-shadow:none;border:1px solid rgba(255,255,255,.08);}

/* Abschnitts-Header */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.sec-hdr-left{display:flex;align-items:center;gap:7px;}
.sec-label-chip{display:inline-flex;align-items:center;gap:4px;font-size:0.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-fg);}
html.dark .sec-label-chip{color:var(--green);}
.sec-label-chip i{font-size:0.75rem;}
.sec-title-sm{font-size:0.8125rem;font-weight:700;color:var(--text-primary);}
html.dark .sec-title-sm{color:#fff;}
.sec-link{font-size:0.75rem;color:var(--green-fg);text-decoration:none;font-weight:600;display:flex;align-items:center;gap:3px;}
html.dark .sec-link{color:var(--green);}
.sec-link:hover{text-decoration:underline;}

/* ═══════════════════════ SESSION CARDS ═══════════════════════ */
.sessions-list{display:flex;flex-direction:column;gap:var(--sp-md);}
/* Semantischer Zoom: die Card selbst ist der Query-Container, damit sie
   auf ihre eigene Breite reagiert statt auf den Viewport — funktioniert
   dadurch unverändert in jedem Kontext (Dashboard-Grid heute, ggf.
   schmalere Panels/Sidebar später). Peter, 2026-07-14.
   Wichtig: ein Element mit container-type kann sich per @container NICHT
   selbst stylen, nur seine Nachfahren (CSS-Spec-Vorgabe) — deshalb liegt
   Padding/Flex-Umschaltung auf .session-card-inner, nicht auf .session-card
   selbst (sonst greift die "breite" Stufe unten gar nicht). */
.session-card{container-type:inline-size;container-name:session-card;border-radius:var(--r-xl);background:var(--nm-bg);box-shadow:var(--nm-shadow-sm);cursor:default;}
html.dark .session-card{background:color-mix(in srgb, var(--green) 3%, transparent);box-shadow:none;border:1px solid color-mix(in srgb, var(--green) 8%, transparent);}
.session-card:hover{box-shadow:var(--nm-shadow-out);}
html.dark .session-card:hover{border-color:color-mix(in srgb, var(--green) 18%, transparent);}
.session-card-inner{padding:14px;}
.session-card-top{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.session-icon-wrap{display:flex;align-items:flex-start;gap:3px;flex-shrink:0;}
.session-icon{width:34px;height:34px;border-radius:var(--r-lg);background:rgba(74,114,0,.13);display:flex;align-items:center;justify-content:center;color:var(--green-fg);font-size:1.0625rem;flex-shrink:0;}
html.dark .session-icon{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green);}
.session-info{flex:1;min-width:0;}
.session-name{font-size:0.8125rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.session-meta{font-size:0.6875rem;color:var(--text-muted);display:flex;gap:7px;margin-top:2px;flex-wrap:wrap;}
.session-meta span{display:flex;align-items:center;gap:2px;}
.session-meta i{font-size:0.6875rem;}
.session-equip-tag{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:var(--r-full);background:color-mix(in srgb, var(--green) 8%, transparent);border:1px solid color-mix(in srgb, var(--green) 15%, transparent);color:var(--green-fg);font-size:0.625rem;font-weight:600;}
html.dark .session-equip-tag{color:var(--accent);}
.session-score-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.session-kpis{display:flex;gap:14px;align-items:center;}
.session-kpi{text-align:center;}
.session-kpi-val{font-size:1rem;font-weight:800;color:var(--green-fg);line-height:1;}
html.dark .session-kpi-val{color:var(--green);}
.session-kpi-lbl{font-size:0.625rem;color:var(--text-muted);margin-top:1px;}
.session-kpi-sep{width:1px;height:24px;background:var(--border);}
.session-bars{display:flex;gap:2px;align-items:flex-end;height:26px;}
.session-bar{flex:1;border-radius:2px;background:rgba(74,114,0,.18);}
.session-bar.hit{background:var(--green-dk);}
html.dark .session-bar{background:color-mix(in srgb, var(--green) 14%, transparent);}

/* Score-Badge — nur in der schmalen Card-Stufe sichtbar (dort einziger
   verbliebener Kennwert, "wie die Zahl im Email-App-Icon", Peter
   2026-07-14). Bewusst EINE Zahl, EINE Ecke statt mehrerer Mehrfach-
   Badges — Farbe der Ecke transportiert zusätzlich die Einordnung.
   6. Korrekturrunde (Peters Referenz-Diagramm, 2026-07-14): kein
   Overlap ins Icon hinein — Badge sitzt als eigenständiges Element
   DIREKT NEBEN dem Icon (oben bündig), nicht darüber. Einfaches
   Flex-Item in .session-icon-wrap ohne negative margin — dadurch
   automatisch auch Teil der Gesamtbreite, an der die Karte den ganzen
   Block (Icon+Badge) zentriert (s. Kommentar an .session-icon-wrap). */
.session-score-badge{display:none;align-self:flex-start;padding:1px 4px;border-radius:var(--r-full);font-size:0.625rem;font-weight:800;line-height:1.3;white-space:nowrap;background:var(--accent-t07);color:var(--green-fg);}
html.dark .session-score-badge{color:var(--green);}
.session-card[data-score-tier="mid"] .session-score-badge{background:color-mix(in srgb, var(--orange) 15%, transparent);color:var(--orange-dk);}
html.dark .session-card[data-score-tier="mid"] .session-score-badge{color:var(--orange);}
.session-card[data-score-tier="low"] .session-score-badge{background:rgba(244,67,54,.12);color:#c62828;}
html.dark .session-card[data-score-tier="low"] .session-score-badge{color:#ef5350;background:rgba(239,83,80,.12);}

/* Stufe "breit" (Card-Innenbreite ≥460px): eine Zeile statt zwei
   gestapelter — Icon/Titel/Meta links, KPIs+Balken rechts. */
@container session-card (min-width:460px){
  .session-card-inner{display:flex;align-items:center;gap:12px;}
  .session-card-top{margin-bottom:0;flex:1;min-width:0;}
  .session-score-row{flex-shrink:0;}
}

/* Stufe "schmal" (Card-Innenbreite <340px): Icon-Tile — nur Icon, Titel
   (Ellipsis) und Datum bleiben, KPIs/Balken/Zusatz-Meta verschwinden,
   Score wandert als Eck-Badge auf die Karte. Schwelle bewusst auf 340px
   (statt ursprünglich 219px) — live nachgemessen: unter der aktuellen
   Grid-Architektur (.dashboard→.dash-grid→.dash-card→.session-card,
   je 24/22/20px Padding/Gap) bleibt der Karteninhalt selbst bei ~390px
   Fensterbreite noch bei ~300px, 219px wäre real nie erreichbar gewesen
   außer bei Fenstern <300px. Peter, 2026-07-14: "das wird mit meinen
   Browsern nicht angezeigt". */
@container session-card (max-width:340px){
  .session-card-inner{padding:10px;}
  .session-card-top{flex-direction:column;align-items:center;text-align:center;gap:4px;margin-bottom:0;}
  .session-info{width:100%;}
  .session-meta{justify-content:center;}
  .session-meta span:not(:first-child){display:none;}
  .session-equip-tag{display:none;}
  .session-score-row{display:none;}
  /* Badge (35px+ breit) ist selbst breiter als das 34px-Icon — bei
     --r-lg (12px) Eckenradius bleibt kaum sichtbare Fläche übrig, auf
     der die Pille aufliegen kann (rechnerisch überlappend, optisch
     "abgehängt", Peter 2026-07-14 mehrfach bestätigt trotz korrekter
     top/right-Werte). Radius hier gezielt kleiner, nur in dieser
     Stufe — Icon bleibt in breiter/mittlerer Stufe unverändert rund. */
  .session-icon{border-radius:8px;}
  .session-score-badge{display:block;}
}
html.dark .session-bar.hit{background:var(--green);}
/* .session-marian-link entfernt (2026-07-14) — Aktion "In Marian analysieren"
   ist ins Pie-Menu der Session-Karte gewandert, kein sichtbarer Button mehr. */

/* ═══════════════ SESSION MODALS (Details / Editieren / Löschen) ═══════════════
   OOUI/Pie-Menu-Refactoring, 2026-07-14. Tabellen-Markup bewusst identisch zum
   bestehenden Marian-Analyse-Gold-Standard (app-table/tgt-num/arrow-pill/
   zone-badge/score-num/time-mono aus bowhuman-app.css, s. marian-analyse.js) —
   keine neuen Tabellen-Klassen erfunden, nur Editier-spezifische Ergänzungen. */
.modal-body-scroll{max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.modal-body-scroll::-webkit-scrollbar{width:6px;}
.modal-body-scroll::-webkit-scrollbar-track{background:transparent;}
.modal-body-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.modal-body-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}

/* Teilen-Dialog: Checkbox stylen (Peter, 2026-07-19, QA-Runde 3 — native
   Checkbox/Scrollbar im Live-Screenshot ungestylt). */
.share-chk{-webkit-appearance:none;appearance:none;width:18px;height:18px;flex-shrink:0;
  border:1.5px solid var(--border);border-radius:5px;background:var(--white);cursor:pointer;
  position:relative;transition:border-color .15s,background .15s;margin:0;}
.share-chk:hover{border-color:var(--accent);}
.share-chk:checked{background:var(--grad-green);border-color:transparent;}
.share-chk:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg);}
.share-chk:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.share-archer-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r-lg);cursor:pointer;transition:background .12s;}
.share-archer-row:hover{background:rgba(0,0,0,.04);}
html.dark .share-archer-row:hover{background:rgba(255,255,255,.05);}
.session-summary-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--r-lg);background:rgba(74,114,0,.06);border:1px solid rgba(74,114,0,.15);margin-bottom:12px;font-size:0.75rem;color:var(--text-secondary);}
html.dark .session-summary-bar{background:color-mix(in srgb, var(--green) 5%, transparent);border-color:color-mix(in srgb, var(--green) 12%, transparent);}
.session-summary-bar strong{font-weight:800;font-family:var(--font-mono);color:var(--text-primary);}
html.dark .session-summary-bar strong{color:#fff;}
.session-edited-note{display:flex;align-items:center;gap:6px;font-size:0.6875rem;color:var(--text-muted);margin-bottom:10px;}
.session-edited-note i{font-size:0.8125rem;color:var(--green-fg);}
html.dark .session-edited-note i{color:var(--green);}
.tgt-table-wrap{overflow-x:auto;}
.tgt-select{padding:3px 6px;border-radius:6px;border:1px solid var(--border);background:var(--nm-bg);color:var(--text-primary);font-size:0.6875rem;font-family:var(--font-base);cursor:pointer;}
/* color-scheme:dark (2026-07-14, Peter: "Dropdown im Modal entspricht
   nicht unserem Styleguide") — das AUFGEKLAPPTE <option>-Listbox eines
   nativen <select> lässt sich per CSS nicht markenkonform durchstylen
   (Browser-Grenze, kein reines Klassen-/Token-Problem). color-scheme:dark
   weist den Browser an, für native Formularelemente (inkl. der Options-
   Liste) die OS-Dark-Variante statt der erzwungenen hellen Standard-
   darstellung zu nutzen — kein pixelgenauer Marken-Look, aber beseitigt
   den hellen Fremdkörper im Dark-Theme ohne einen kompletten Custom-
   Listbox-Widget zu bauen (Editieren ist laut Peter ein 1%-Fall, dafür
   unverhältnismäßiger Aufwand). Vollständiges Redesign des Dropdowns wäre
   Teil der separaten Farb-/Styleguide-Session, falls gewünscht. */
html.dark .tgt-select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);color:#fff;color-scheme:dark;}
.tgt-select:focus{outline:none;border-color:var(--green-fg);}
html.dark .tgt-select:focus{border-color:var(--green);}
.session-delete-warning{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-lg);background:rgba(244,67,54,.08);border:1px solid rgba(244,67,54,.2);font-size:0.8125rem;color:var(--text-secondary);line-height:1.5;}
.session-delete-warning i{font-size:1.125rem;color:#c62828;flex-shrink:0;margin-top:1px;}
html.dark .session-delete-warning i{color:#ef5350;}
.btn-sm-danger{background:rgba(244,67,54,.1);border:1px solid rgba(244,67,54,.3);color:#c62828;}
.btn-sm-danger:hover{background:rgba(244,67,54,.18);}
html.dark .btn-sm-danger{color:#ef5350;background:rgba(239,83,80,.12);border-color:rgba(239,83,80,.3);}
/* .btn-sm[disabled] entfernt 2026-09-07 — jetzt in bowhuman-app.css konsolidiert */
.modal-error{font-size:0.75rem;color:#c62828;background:rgba(244,67,54,.08);border:1px solid rgba(244,67,54,.2);border-radius:var(--r-md);padding:8px 10px;margin-bottom:10px;display:none;}
html.dark .modal-error{color:#ef5350;background:rgba(239,83,80,.1);border-color:rgba(239,83,80,.25);}
.modal-error.show{display:block;}

/* ═══════════════════════ EQUIPMENT ═══════════════════════ */
.eq-active{padding:14px;border-radius:var(--r-xl);background:rgba(74,114,0,.07);border:1px solid rgba(74,114,0,.18);margin-bottom:12px;}
html.dark .eq-active{background:color-mix(in srgb, var(--green) 5%, transparent);border-color:color-mix(in srgb, var(--green) 15%, transparent);}
.eq-active-label{font-size:0.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-fg);margin-bottom:8px;display:flex;align-items:center;gap:4px;}
html.dark .eq-active-label{color:var(--green);}
.eq-set-name{font-size:0.875rem;font-weight:800;color:var(--text-primary);margin-bottom:8px;}
html.dark .eq-set-name{color:#fff;}
.eq-two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.eq-item{padding:8px 10px;border-radius:var(--r-lg);background:var(--nm-bg);box-shadow:var(--nm-shadow-sm);}
html.dark .eq-item{background:rgba(255,255,255,.04);box-shadow:none;border:1px solid rgba(255,255,255,.07);}
.eq-item-type{font-size:0.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px;display:flex;align-items:center;gap:3px;}
.eq-item-type i{font-size:0.6875rem;}
.eq-item-name{font-size:0.75rem;font-weight:700;margin-bottom:2px;}
/* 2026-08-19 (Usability-Review, Punkt 3 "Zettelkasten-Effekt" auf den
   Ausrüstungs-Kacheln): 10px→11px — das ist die eigentliche Ausrüstungs-
   Angabe (Zuggewicht, Spine, Länge etc.), keine Kategorie-Eyebrow wie
   .eq-item-type darüber, die als Desktop-Fließtext lesbar sein muss. */
.eq-item-detail{font-size:0.6875rem;color:var(--text-muted);line-height:1.5;}
.eq-list{display:flex;flex-direction:column;gap:var(--sp-md);}
.eq-list-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-lg);background:var(--nm-bg);box-shadow:var(--nm-shadow-sm);cursor:pointer;}
html.dark .eq-list-item{background:rgba(255,255,255,.03);box-shadow:none;border:1px solid rgba(255,255,255,.07);}
.eq-list-item:hover{box-shadow:var(--nm-shadow-out);}
html.dark .eq-list-item:hover{border-color:rgba(255,255,255,.15);}

/* "Mit mir geteilt" — s. renderSharedWithMe() in archers_nest.html */
.shared-item:hover{background:color-mix(in srgb, var(--cyan) 6%, transparent);}
html.dark .shared-item:hover{background:color-mix(in srgb, var(--cyan) 8%, transparent);}
.eq-list-dot{width:8px;height:8px;border-radius:50%;background:var(--border);flex-shrink:0;}
.eq-list-dot.active{background:var(--green-dk);}
html.dark .eq-list-dot.active{background:var(--green);}
.eq-list-name{flex:1;font-size:0.75rem;font-weight:600;}
.eq-list-sub{font-size:0.6875rem;color:var(--text-muted);}
.eq-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:var(--r-lg);border:1px dashed var(--border);background:transparent;color:var(--text-muted);font-size:0.75rem;cursor:pointer;font-family:var(--font-base);width:100%;margin-top:6px;}
.eq-add-btn:hover{border-color:var(--green-fg);color:var(--green-fg);}
html.dark .eq-add-btn:hover{border-color:var(--green);color:var(--green);}

/* ═══════════════════════ ACHIEVEMENTS ═══════════════════════ */
/* 2026-08-19 (Peter-Feedback nach Deploy): Badges standen je nach Zeilenzahl
   der Beschreibung (1–3 Zeilen) auf unterschiedlicher Höhe pro Kachel — jede
   .ach-card war bisher ein eigenständiger Block, dessen Höhe nur von ihrem
   eigenen Inhalt abhing. Fix per CSS Subgrid (statt manuell fixierter
   Zeilenhöhen): .ach-grid definiert 4 Zeilen-Tracks (Icon/Name/Beschreibung/
   Badge), jede .ach-card spannt sie via grid-template-rows:subgrid — Icon,
   Name, Beschreibung und Badge landen dadurch reihenweise exakt auf
   derselben Höhe wie bei den Nachbar-Kacheln in derselben Bildschirmzeile,
   unabhängig von unterschiedlich langem Text. */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-auto-rows:auto auto auto auto;gap:var(--sp-md);}
/* Info-Kachel (nicht klickbar): flach mit Hairline-Border, KEIN Schatten, KEIN Hover-Lift */
.ach-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;padding:13px 11px;border-radius:var(--r-xl);text-align:center;background:var(--nm-bg);border:1px solid var(--border);}
html.dark .ach-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);}
.ach-card.locked{opacity:.35;filter:grayscale(.8);}
.ach-icon{font-size:1.625rem;margin-bottom:5px;display:block;line-height:1;}
.ach-name{font-size:0.6875rem;font-weight:700;margin-bottom:2px;}
.ach-desc{font-size:0.625rem;color:var(--text-muted);line-height:1.4;}
html.dark .ach-desc{color:var(--text-muted-dark-bg);}
.ach-badge{display:inline-flex;align-items:center;gap:3px;margin-top:5px;padding:2px 7px;border-radius:var(--r-full);font-size:0.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.ach-badge.gold{background:rgba(255,193,7,.18);color:#d97706;}
html.dark .ach-badge.gold{color:#fbbf24;}
.ach-badge.silver{background:rgba(176,190,197,.18);color:#607d8b;}
html.dark .ach-badge.silver{color:#cfd8dc;}
.ach-badge.bronze{background:rgba(255,152,0,.18);color:#ea580c;}
html.dark .ach-badge.bronze{color:#fb923c;}
.ach-badge.locked{background:rgba(120,130,140,.1);color:var(--text-muted);}

/* ═══════════════════════ EVENTS ═══════════════════════ */
.event-list{display:flex;flex-direction:column;gap:var(--sp-md);}
/* Klickbare Kachel (Aufforderung): neumorph erhaben + Hover-Lift, s. Kachel-Definition */
.event-item{cursor:pointer;text-decoration:none;color:var(--text-primary);display:flex;align-items:flex-start;gap:11px;padding:10px 11px;border-radius:var(--r-lg);background:var(--nm-bg);box-shadow:var(--nm-shadow-sm);transition:box-shadow .15s;}
.event-item:hover{box-shadow:var(--nm-shadow-out);}
html.dark .event-item{color:var(--text-primary);background:rgba(255,255,255,.03);box-shadow:none;border:1px solid rgba(255,255,255,.07);}
html.dark .event-item:hover{border-color:rgba(255,255,255,.15);}
.event-date-box{min-width:34px;text-align:center;background:rgba(74,114,0,.12);border-radius:var(--r-md);padding:3px;flex-shrink:0;}
html.dark .event-date-box{background:color-mix(in srgb, var(--green) 10%, transparent);}
.event-day{font-size:1rem;font-weight:800;color:var(--green-fg);line-height:1;}
html.dark .event-day{color:var(--green);}
.event-mon{font-size:0.5625rem;font-weight:700;color:rgba(74,114,0,.6);text-transform:uppercase;letter-spacing:.06em;}
html.dark .event-mon{color:color-mix(in srgb, var(--green) 60%, transparent);}
.event-info{flex:1;min-width:0;}
.event-name{font-size:0.75rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.event-loc{font-size:0.625rem;color:var(--text-muted);display:flex;align-items:center;gap:3px;margin-top:2px;}
.event-type-chip{font-size:0.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-full);flex-shrink:0;}
.chip-turnier{background:rgba(74,114,0,.15);color:var(--green-fg);}
html.dark .chip-turnier{color:var(--green);background:color-mix(in srgb, var(--green) 12%, transparent);}
.chip-event{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green-fg);}
html.dark .chip-event{color:var(--accent);}
.chip-training{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green-fg);}
html.dark .chip-training{color:var(--accent);}
.event-meta-row{display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:wrap;}
.event-meta-pill{display:inline-flex;align-items:center;gap:3px;font-size:0.625rem;font-weight:700;padding:1px 6px;border-radius:var(--r-full);background:rgba(0,0,0,.05);color:var(--text-muted);white-space:nowrap;}
html.dark .event-meta-pill{background:rgba(255,255,255,.07);}
.event-meta-pill i{font-size:0.625rem;}
.event-bow-match{background:rgba(74,114,0,.1);color:var(--green-fg);}
html.dark .event-bow-match{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green);}
.event-multiday{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green-fg);}
html.dark .event-multiday{color:var(--accent);}
.event-camping{background:color-mix(in srgb, var(--green) 8%, transparent);color:var(--green-fg);}
html.dark .event-camping{color:var(--accent);}
.event-deadline-soon{background:rgba(244,67,54,.1);color:#c62828;}
html.dark .event-deadline-soon{color:#ef9a9a;}
.event-distance{font-size:0.625rem;font-weight:700;color:var(--text-muted);white-space:nowrap;flex-shrink:0;align-self:center;}
.event-no-location{padding:16px;text-align:center;font-size:0.75rem;color:var(--text-muted);}
.event-no-location a{color:var(--green-fg);font-weight:600;text-decoration:none;}
html.dark .event-no-location a{color:var(--green);}

/* ═══════════════════════ GEFOLGTE SCHÜTZEN (Archer-Karten) ═══════════════════════
   Umbau von Hypergrid-Tabelle (Klick-zum-Aufklappen, keine Sortierung/
   Filterung) zu Karten im Session-Card-Pattern: Pie-Menü + Semantic Zoom
   (Peter, 2026-07-17: "werden jeden Schützen so gestalten wie eine Session:
   Pie Menü, Semantic Zoom"). Markup in buildHgRows() nutzt bewusst die
   .session-card/-inner/-top/-info/-name/-meta/-score-row/-kpi-* Klassen 1:1
   (gleicher @container-Name "session-card", identische Breakpoints/Ellipsis/
   Meta-Wrap-Regeln oben) — nur .hg-mini-avatar ersetzt das Session-Icon.
   Verbleibende Klassen hier: Toolbar (Suche+Zähler), Avatar, Aktivitäts-Punkt,
   Bogenklassen-Chip, Suchtreffer-Highlight. */
.hg-wrap{border-radius:var(--r-xl);background:var(--nm-bg);box-shadow:var(--nm-shadow-sm);overflow:hidden;}
html.dark .hg-wrap{background:rgba(255,255,255,.02);box-shadow:none;border:1px solid rgba(255,255,255,.08);}
.hg-toolbar{padding:9px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--nm-bg);}
html.dark .hg-toolbar{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.07);}
.hg-search-wrap{position:relative;flex:1;}
.hg-search-wrap > i{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:0.75rem;color:var(--text-muted);pointer-events:none;}
.hg-search{width:100%;padding:6px 9px 6px 28px;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--white);color:var(--text-primary);font-size:0.75rem;font-family:var(--font-base);outline:none;}
html.dark .hg-search{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff;}
.hg-search:focus{border-color:var(--green-fg);}
html.dark .hg-search:focus{border-color:var(--green);}
.hg-count{font-size:0.6875rem;color:var(--text-muted);white-space:nowrap;font-family:var(--font-mono);}
.hg-table{display:flex;flex-direction:column;gap:var(--sp-md);padding:9px;}
.hg-mini-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;color:var(--navy);}
.hg-activity-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;}
.hg-activity-dot.is-active{background:#4caf50;}
.hg-activity-dot.is-mid{background:#ffa726;}
.hg-activity-dot.is-low{background:#b0bec5;}
/* 2026-08-19 (Peter-Feedback): Hintergrund/Rand nutzten ein fest verdrahtetes
   rgba(180,255,46,X) (Neon-Lime) unabhängig vom Modus. Auf dunklem Grund (Dark
   Mode) sichtbar genug, auf hellem Grund (Listen-Karten im Hell-Modus) fast
   unsichtbar — 8%/18% Neon-Lime auf hellgrau ≈ kein Unterschied zum Hintergrund.
   Fix: theme-adaptive --accent-t* Tokens (aus --accent abgeleitet, s.o.) statt
   fester Neon-Lime-rgba — im Hell-Modus dadurch sichtbarer Oliv-Ton statt
   unsichtbarem Lime-Hauch, im Dark Mode weiterhin Lime-Ton. Rand kräftiger
   (25% statt 18%) für klare Abgrenzung; Fläche bewusst nur 7% (nicht 12%) —
   bei 12% sinkt der Text/Chip-Kontrast im Hell-Modus (--green-fg ist exakt
   auf 4.5:1 zu #eef0f3 austariert) auf ~4.25:1 unter AA, bei 7% bleibt er bei
   ~4.54:1 knapp über AA UND die Fläche ist deutlich sichtbarer als vorher. */
.hg-bow-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:var(--r-full);background:var(--accent-t07);border:1px solid var(--accent-t25);color:var(--green-fg);font-size:0.625rem;font-weight:600;white-space:nowrap;}
html.dark .hg-bow-chip{color:var(--accent);}
mark.hg-mark{background:color-mix(in srgb, var(--green) 35%, transparent);color:inherit;border-radius:2px;padding:0 1px;}
html.dark mark.hg-mark{background:color-mix(in srgb, var(--green) 25%, transparent);}
/* .hg-bow-chip ist wie .session-equip-tag ein .session-meta-Kind-Span ohne
   :first-child — verschwindet dadurch automatisch in der schmalen
   .session-card-Stufe über die bestehende Regel
   ".session-meta span:not(:first-child){display:none}" oben, kein eigener
   @container-Block nötig. */

/* ═══════════════════════ PRIVACY-MODAL (Inhalt) ═══════════════════════ */
/* Generische .modal-* Klassen sind in bowhuman-app.css */
.privacy-section-label{
  font-size:0.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);padding:10px 0 6px;
  border-bottom:1px solid var(--border);margin-bottom:4px;
}
html.dark .privacy-section-label{border-bottom-color:rgba(255,255,255,.07);}

/* Privacy-Row */
.privacy-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;row-gap:8px;padding:9px 0;border-bottom:1px solid var(--border);}
html.dark .privacy-row{border-bottom-color:rgba(255,255,255,.06);}
.privacy-row:last-child{border-bottom:none;}
.privacy-row-left{display:flex;align-items:center;gap:9px;}
.privacy-row-icon{width:30px;height:30px;border-radius:var(--r-md);background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;font-size:0.875rem;color:var(--text-secondary);flex-shrink:0;}
html.dark .privacy-row-icon{background:rgba(255,255,255,.06);color:var(--text-muted-dark-bg);}
.privacy-row-label{font-size:0.8125rem;font-weight:600;color:var(--text-primary);}
html.dark .privacy-row-label{color:#fff;}
.privacy-row-sub{font-size:0.6875rem;color:var(--text-muted);}

/* Segmented-Control Sichtbarkeit */
.vis-control{display:flex;margin-left:auto;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);flex-shrink:0;}
html.dark .vis-control{border-color:rgba(255,255,255,.1);}
.vis-opt{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;font-size:0.625rem;font-weight:600;cursor:pointer;background:transparent;border:none;font-family:var(--font-base);color:var(--text-muted);border-left:1px solid var(--border);transition:background .15s,color .15s;}
.vis-opt i{font-size:0.625rem;}
html.dark .vis-opt{border-left-color:rgba(255,255,255,.1);color:var(--text-muted-dark-bg);}
.vis-opt:first-child{border-left:none;}
.vis-opt.active{background:var(--green-fg);color:#fff;}
html.dark .vis-opt.active{background:var(--green);color:var(--navy);}

/* ═══════════════════════ WETTKAMPFKLASSEN-MODAL (Inhalt) ═══════════════════════ */
.class-modal-note{padding:10px 14px;border-radius:var(--r-lg);background:color-mix(in srgb, var(--green) 6%, transparent);border:1px solid color-mix(in srgb, var(--green) 15%, transparent);font-size:0.75rem;color:var(--text-secondary);line-height:1.6;margin-bottom:14px;}
html.dark .class-modal-note{color:rgba(255,255,255,.55);}
.class-modal-note strong{color:var(--accent);}
.radio-group{display:flex;flex-direction:column;gap:6px;}
.radio-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-lg);border:1px solid var(--border);cursor:pointer;transition:border-color .15s,background .15s;}
html.dark .radio-opt{border-color:rgba(255,255,255,.1);}
.radio-opt:hover{border-color:var(--green-fg);}
html.dark .radio-opt:hover{border-color:var(--green);}
.radio-opt.selected{border-color:var(--green-fg);background:rgba(74,114,0,.06);}
html.dark .radio-opt.selected{border-color:var(--green);background:color-mix(in srgb, var(--green) 6%, transparent);}
.radio-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
html.dark .radio-dot{border-color:rgba(255,255,255,.2);}
.radio-opt.selected .radio-dot{border-color:var(--green-fg);background:var(--green-fg);}
html.dark .radio-opt.selected .radio-dot{border-color:var(--green);background:var(--green);}
.radio-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff;display:none;}
.radio-opt.selected .radio-dot::after{display:block;}
.radio-label{flex:1;}
.radio-name{font-size:0.8125rem;font-weight:700;}
.radio-sub{font-size:0.6875rem;color:var(--text-muted);}
.radio-nr{font-size:0.6875rem;font-weight:700;color:var(--text-muted);font-family:var(--font-mono);}
.radio-auto-badge{font-size:0.625rem;font-weight:700;padding:2px 6px;border-radius:var(--r-full);background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green-fg);margin-left:4px;}
html.dark .radio-auto-badge{color:var(--accent);}

/* ═══════════════════════ MISC ═══════════════════════ */
.empty-state{padding:28px 20px;text-align:center;color:var(--text-muted);}
.empty-state i{font-size:1.875rem;margin-bottom:9px;display:block;opacity:.38;}
.empty-state p{font-size:0.8125rem;}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media(max-width:900px){
  .dash-grid{grid-template-columns:1fr;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .ach-grid{grid-template-columns:repeat(3,1fr);}
  .eq-two-col{grid-template-columns:1fr;}
}

/* ── Mini-Entwicklungs-Trend (Dashboard-Sessions-Karte) ──────────────
   Kompakte parcoursübergreifende Trendlinie (Ø-Score je Ziel) über die
   letzten Runden. Klick → sessions.html (dort die volle Version).
   Inline-SVG, äquidistante Punkte (Muster aus Robin summary.js). */
.mini-trend{
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:10px 12px 6px;margin-bottom:12px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.mini-trend:hover{border-color:var(--green-fg);background:rgba(74,114,0,.03);}
html.dark .mini-trend:hover{border-color:var(--green);background:color-mix(in srgb, var(--green) 4%, transparent);}
.mini-trend__hdr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px;}
.mini-trend__title{font-size:0.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:5px;}
.mini-trend__title i{font-size:0.75rem;}
.mini-trend__delta{font-size:0.6875rem;font-weight:700;font-family:var(--font-mono);}
.mini-trend__delta.up{color:var(--green-fg);}
html.dark .mini-trend__delta.up{color:var(--green);}
.mini-trend__delta.down{color:var(--orange-dk);}
html.dark .mini-trend__delta.down{color:var(--orange);}
.mini-trend__delta.flat{color:var(--text-muted);}
.mini-trend__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.mini-trend__scroll::-webkit-scrollbar{display:none;}
.mini-trend__scroll svg{display:block;overflow:visible;}

/* ══════════════════════════════════════════════════════════════════
   MEIN VEREIN — Mitgliedskarte im Nest (14.09.2026)
   Keine neuen Controls: die Karte selbst ist .dash-card, die Kopfzeile
   .sec-hdr, die Knoepfe .btn-sm/.btn-sm-ghost aus bowhuman-app.css, der
   Leerzustand .empty-state. Hier stehen nur die Modifier, die es dafuer
   sonst nirgends gibt.
   ══════════════════════════════════════════════════════════════════ */
.club-chips{display:flex;gap:6px;flex-wrap:wrap;}
.club-chip{border:1px solid var(--border);background:transparent;color:var(--text-secondary);
  border-radius:var(--r-full);padding:2px 10px;font-size:0.6875rem;font-weight:700;
  cursor:pointer;font-family:var(--font-base);}
.club-chip.is-on{background:var(--accent-t07);border-color:var(--accent-t15);color:var(--green-fg);}

.club-name{font-size:0.9375rem;font-weight:800;color:var(--text-primary);margin-bottom:4px;}
.club-status{display:flex;align-items:center;gap:7px;font-size:0.75rem;
  color:var(--text-secondary);padding-bottom:14px;}
.club-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}

.club-block{border-top:1px solid var(--border);padding-top:12px;margin-top:2px;}
.club-block + .club-block{margin-top:14px;}
.club-block-hd{font-size:0.625rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;}

.club-fee{display:flex;align-items:baseline;gap:7px;}
.club-fee-amt{font-size:1.375rem;font-weight:800;color:var(--text-primary);line-height:1.1;}
.club-fee-lbl{font-size:0.75rem;color:var(--text-secondary);}
.club-fee-ok{font-size:0.8125rem;font-weight:700;color:var(--green-fg);}
.club-fee-sub{font-size:0.6875rem;color:var(--text-muted);margin-top:2px;}

.club-toggle{margin-top:8px;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-base);font-size:0.6875rem;font-weight:700;
  color:var(--text-secondary);display:inline-flex;align-items:center;gap:4px;}
.club-toggle:hover{color:var(--text-primary);}
.club-bookings{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.club-booking{display:grid;grid-template-columns:1fr auto auto;gap:10px;
  font-size:0.6875rem;color:var(--text-secondary);padding:4px 0;
  border-bottom:1px solid var(--border);}
.club-booking:last-child{border-bottom:none;}
.club-booking-amt{font-weight:700;color:var(--text-primary);}

.club-termin{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--border);}
.club-termin:last-child{border-bottom:none;}
.club-termin-date{flex:0 0 46px;text-align:center;font-size:0.625rem;
  color:var(--text-muted);line-height:1.3;}
.club-termin-date b{display:block;font-size:0.6875rem;color:var(--text-secondary);}
.club-termin-main{flex:1;min-width:0;}
.club-termin-title{font-size:0.8125rem;font-weight:700;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.club-termin-sub{font-size:0.6875rem;color:var(--text-muted);}
.club-wait-n{color:var(--orange-fg);}
.club-btn{flex:0 0 auto;}
.club-btn.is-on{color:var(--green-fg);border-color:var(--accent-t15);}
.club-btn.is-wait{color:var(--orange-fg);}
.club-btn[disabled]{opacity:.45;cursor:not-allowed;}

@media (max-width:560px){
  .club-termin{flex-wrap:wrap;}
  .club-btn{margin-left:56px;}
}