/* Aus dem <style>-Block von konto.html (CSP style-src Schritt 5, Bericht C44), Regeln unverändert. */
/* Fallliste: sichtbarer Fokus an den Knöpfen ohne Bootstrap-Variante (Bootstrap setzt dort outline:0) und Mindestgröße der
   Favoriten- und Statusziele (WCAG 2.4.7, 2.5.8; accessibility-auditor zu Bericht 2026-09-28-18). */
#faelle-liste .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: none; }
#faelle-liste .fav-btn { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
#faelle-liste .form-select-sm { min-height: 24px; }
#faelle-anzahl:focus { outline: none; }
.plan-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.konto-tab {
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.konto-tab:hover { color: var(--color-primary); }
.konto-tab.active { color: var(--color-primary); font-weight: 600; border-bottom-color: var(--color-primary); }
/* Mobil (Befund Jens 26.09.2026, Bericht 2026-09-26-23): Reiter waagerecht wischbar statt Seitenverbreiterung,
   Inhalte ohne Überbreite, lange Adressen brechen um. */
.konto-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.konto-tab { flex: 0 0 auto; white-space: nowrap; }
.konto-tab-panel { min-width: 0; overflow-wrap: break-word; }
.konto-tab-panel .content-card { min-width: 0; }
@media (max-width: 575.98px) {
  .konto-tab { padding: 0.7rem 0.85rem; }
}
/* Reiter „Statistik“ (nur Admin, js/statistik.js; Bericht C19). Kacheln brechen auf dem Handy untereinander um,
   Diagramme laufen über die volle Breite (C19 B8). Eigenes SVG, keine fremde Bibliothek (B7). */
.st-steuerung { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.st-steuerung[hidden] { display: none; }
.st-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.st-kachel { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem; background: #fff; min-width: 0; }
.st-kachel__titel { font-size: 0.8rem; color: var(--color-text-muted); }
.st-kachel__wert { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-kachel--leer .st-kachel__wert { font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); padding: 0.45rem 0; }
.st-kachel__art { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); }
.st-kachel--stufe1 { border-style: dashed; }
.st-kachel__hinweis { font-size: 0.75rem; color: var(--color-text-muted); }
.st-block { border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; background: #fff; min-width: 0; }
.st-block > summary { cursor: pointer; margin: 0; }
.st-block[open] > summary { margin-bottom: 0.75rem; }
.st-block--test { border-style: dashed; }
.st-untertitel { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin: 0.75rem 0 0.25rem; }
.st-diagramm { display: block; width: 100%; height: 120px; }
.st-saeule { fill: var(--color-primary); }
.st-saeule--laufend { fill-opacity: 0.45; }
.st-ziel { fill: transparent; }
.st-ziel:hover { fill: rgba(30, 58, 138, 0.06); }
.st-nicht-erfasst { fill: #eef0f3; }
.st-achse { stroke: var(--color-border); stroke-width: 1; }
.st-release { stroke: #b45309; stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.st-achse-text { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--color-text-muted); }
.st-trichter { padding-left: 1.25rem; font-size: 0.875rem; }
.st-trichter li { border-bottom: 1px solid var(--color-border); padding: 0.3rem 0; }
.st-trichter li > span:first-child { font-weight: 600; margin-right: 0.75rem; }
.st-tabelle { font-size: 0.8rem; }
.st-tabelle th, .st-tabelle td { white-space: nowrap; }
.st-code { font-family: ui-monospace, monospace; font-size: 0.7rem; color: var(--color-text-muted); }
/* C22: großer Verlauf, Ranglisten-Karten (Balken = Anteil an der Gruppe), auf dem Handy untereinander in voller Breite. */
.st-diagramm--gross { height: 220px; }
.st-verlauf-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.st-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.st-karte { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem; background: #fff; min-width: 0; }
.st-karte__titel { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.4rem; }
.st-karte__kopf { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.st-rangliste { list-style: none; padding: 0; margin: 0; }
.st-rang { position: relative; display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; min-height: 1.9rem; padding: 0.2rem 0.4rem; margin-bottom: 2px; font-size: 0.82rem; }
.st-rang__balken { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(30, 58, 138, 0.10); border-radius: 4px; z-index: 0; }
.st-rang__name, .st-rang__wert { position: relative; z-index: 1; }
.st-rang__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rang__wert { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.st-rang__anteil { color: var(--color-text-muted); margin-left: 0.5rem; font-size: 0.75rem; }
.st-alle > summary { font-size: 0.8rem; cursor: pointer; color: var(--color-primary); margin-top: 0.25rem; }
.st-tabelle--gsc .st-gsc-name { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; }

/* Ersatz für style= in konto.html (CSP style-src Schritt 5, Bericht C44). !important, weil ein style-Attribut jede Regel ohne
   !important schlug; so bleibt die Wirkung gleich. Die Ladeanzeige ohne !important, weil js/konto.js sie über
   style.display = 'none' ausblendet. */
#konto-loading { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.konto-hero { padding: 1.25rem 0 1.5rem !important; margin-bottom: 0 !important; }
.konto-hero-breadcrumb { margin-bottom: 0.5rem !important; }
.konto-hero-link { color: rgba(255,255,255,.6) !important; }
.konto-hero-kopf { display: flex !important; align-items: center !important; gap: 1rem !important; }
.konto-hero-avatar { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255,255,255,.15) !important; border: 2px solid rgba(255,255,255,.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1rem !important; font-weight: 700 !important; color: white !important; flex-shrink: 0 !important; }
.konto-hero-text { min-width: 0 !important; }
.konto-hero-titel { font-size: 1.2rem !important; font-weight: 800 !important; margin: 0 0 0.2rem !important; color: white !important; }
.konto-hero-zeile { display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-wrap: wrap !important; min-width: 0 !important; }
.konto-hero-email { font-size: 0.82rem !important; color: rgba(255,255,255,.7) !important; overflow-wrap: anywhere !important; min-width: 0 !important; }
.konto-plan-admin { background: #e0e7ff !important; color: #3730a3 !important; }
.konto-tabs-band { background: white !important; border-bottom: 1px solid var(--color-border) !important; }
.konto-logo-vorschau { max-height: 60px !important; max-width: 200px !important; object-fit: contain !important; border: 1px solid var(--color-border) !important; border-radius: 4px !important; padding: 4px !important; }
.konto-totp-qr { min-height: 200px !important; background: #f8fafc !important; }