/* ══ PraeLux · Komponenten ═══════════════════════════════════════════════
 * Diese Datei ist die Uebersetzung des freigegebenen Entwurfs
 * (Kommandozentrale, Teil 1 und 2) in echtes CSS. Sie ist mit Absicht
 * keine Tailwind-Nachbildung: jede Regel steht hier so, wie sie im
 * Entwurf steht, damit die Bildschirme 1:1 gleich aussehen. Wer eine
 * Abmessung aendern will, aendert sie hier — nicht in einer Seite.
 *
 * Der Entwurf setzt die Breite ueber [data-w] am Rahmen. Hier tun das
 * Medienabfragen:
 *   Tablet = bis 1023px   (Leiste auf Symbolbreite)
 *   Handy  = bis 767px    (Leiste weg, Kopf und Leiste unten)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Diagramm-Primitive ───────────────────────────────────────────── */
.chart {display:block;width:100%;height:auto;overflow:visible}
.chart .grid {stroke:var(--c-grid);stroke-width:1;fill:none}
.chart .axis {fill:var(--c-ink-3);font-size:11px;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace}
.chart .axis.b {fill:var(--c-ink);font-weight:600}
.chart .axis.sm {font-size:10px}
.chart .ln1 {stroke:var(--s1);fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .ln2 {stroke:var(--s2);fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:6 4}
.chart .ln3 {stroke:var(--s3);fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2 3}
.chart .ar1 {fill:var(--s1);opacity:.12;stroke:none}
.chart .d1 {fill:var(--s1);stroke:var(--c-surface);stroke-width:2}
.chart .d2 {fill:var(--s2);stroke:var(--c-surface);stroke-width:2}
.chart .d3 {fill:var(--s3);stroke:var(--c-surface);stroke-width:2}
.chart .lb1 {fill:var(--s1)}
.chart .lb2 {fill:var(--s2)}
.chart .lb3 {fill:var(--s3)}
.chart .lb1, .chart .lb2, .chart .lb3 {font-size:11px;font-weight:600;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.chart .bar1 {fill:var(--s1)}
.chart .bar2 {fill:var(--s2)}
.chart .tgt {stroke:var(--c-ink-3);stroke-width:1.5;stroke-dasharray:4 4;fill:none}
.chart .anno {stroke:var(--c-ink-3);stroke-width:1;stroke-dasharray:2 3;fill:none}
.chart .annotxt {fill:var(--c-ink-3);font-size:10px;font-family:"IBM Plex Mono",monospace}
.chart .hit {fill:transparent;cursor:crosshair}
.chart .cross {stroke:var(--c-ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.chart .cross.on {opacity:.7}
.chartwrap {position:relative}
.tip {position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
  background:var(--c-tip);color:var(--c-tip-ink);border:1px solid var(--c-tip-line);
  border-radius:7px;padding:7px 10px;font-size:12px;line-height:1.45;white-space:nowrap;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.35);z-index:5;transition:opacity .12s;}
.tip.on {opacity:1}
.tip b {font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace}
.tip .r {display:flex;align-items:center;gap:7px}
.tip .r i {width:9px;height:3px;border-radius:2px;display:block;flex-shrink:0}
.tip .r i.k1 {background:var(--s1)}
.tip .r i.k2 {background:var(--s2)}
.tip .r i.k3 {background:var(--s3)}
.spark {display:block;overflow:visible}
.spark path {fill:none;stroke:var(--s1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark circle {fill:var(--s1)}
.legend {display:flex;gap:15px;flex-wrap:wrap;align-items:center}
.legend span {display:flex;align-items:center;gap:6px;font-size:12px;color:var(--c-ink-2)}
.legend i {width:15px;height:3px;border-radius:2px;display:block;flex-shrink:0}
.legend i.k1 {background:var(--s1)}
.legend i.k2 {background:repeating-linear-gradient(90deg,var(--s2) 0 6px,transparent 6px 10px)}
.legend i.k3 {background:repeating-linear-gradient(90deg,var(--s3) 0 2px,transparent 2px 5px)}
.legend i.solid2 {background:var(--s2)}
.legend i.tgtl {background:repeating-linear-gradient(90deg,var(--c-ink-3) 0 4px,transparent 4px 8px)}
/* ── Zustands-Bausteine ───────────────────────────────────────────── */
.pill {display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;line-height:1.5}
.pill svg {width:11px;height:11px;stroke-width:2.4}
.pill.ok {background:var(--st-ok-bg);color:var(--st-ok)}
.pill.warn {background:var(--st-warn-bg);color:var(--st-warn)}
.pill.bad {background:var(--st-bad-bg);color:var(--st-bad)}
.pill.neu {background:var(--c-tint);color:var(--c-ink-2)}
/* UiChip kennt den Ton „info" schon, .pill hatte ihn nicht — ein
   Zustand wie „Offen" stand damit als Abzeichen ohne Flaeche da. */
.pill.info {background:var(--c-accent-soft);color:var(--c-accent)}
.delta {display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace}
.delta svg {width:13px;height:13px;stroke-width:2.4}
.delta.up {color:var(--st-ok)}
.delta.down {color:var(--st-bad)}
.av {width:32px;height:32px;border-radius:99px;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0;background:var(--c-av);color:var(--c-av-ink);box-shadow:0 0 0 1px rgba(255,255,255,.28)}
/* ── Gerüst: Leiste + Hauptbereich ───────────────────────────────── */
.b-shell {display:grid;grid-template-columns:246px minmax(0,1fr)}
.b-rail {background:var(--c-rail);color:var(--c-rail-ink);display:flex;flex-direction:column}
.b-rt {display:flex;align-items:center;gap:10px;padding:14px 16px 12px}
.b-rt .plmark {width:28px;height:28px}
.b-rt b {font-size:14.5px;font-weight:600}
.b-rt .env {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;padding:2px 6px;border-radius:4px;background:var(--c-rail-hover);color:var(--c-rail-ink-2)}
.b-search {margin:0 12px 14px;display:flex;align-items:center;gap:8px;background:var(--c-rail-hover);border:1px solid var(--c-rail-line);border-radius:7px;padding:8px 9px;color:var(--c-rail-ink-2);font-size:13px;transition:border-color .18s;min-height:36px}
.b-search:hover {border-color:rgba(255,255,255,.2)}
.b-search svg {width:14px;height:14px}
.b-search kbd {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;border:1px solid var(--c-rail-line);border-radius:4px;padding:1px 5px}
.b-nav {flex:1;padding:0 8px 12px;overflow:hidden}
.b-grp {margin-bottom:14px}
.b-grp>span {display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c-rail-ink-2);padding:0 8px 6px}
.b-nav a {display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--c-rail-ink-2);font-size:13px;padding:6px 8px;border-radius:6px;transition:background .18s,color .18s}
.b-nav a:hover {background:var(--c-rail-hover);color:var(--c-rail-ink)}
.b-nav a[aria-current] {background:var(--c-rail-active);color:var(--c-rail-ink);font-weight:600}
.b-nav a svg {width:15px;height:15px;opacity:.75;flex-shrink:0}
.b-nav a[aria-current] svg {opacity:1;color:var(--c-rail-accent)}
.b-nav a .ct {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-rail-ink-2);background:var(--c-rail-hover);padding:1px 6px;border-radius:99px}
.b-nav a .dot {margin-left:auto;width:6px;height:6px;border-radius:99px;background:var(--st-warn);flex-shrink:0}
.b-ru {border-top:1px solid var(--c-rail-line);padding:11px 14px;display:flex;align-items:center;gap:10px}
.b-ru .t {line-height:1.3;min-width:0}
.b-ru .t b {display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-ru .t span {font-size:11px;color:var(--c-rail-ink-2)}
.b-ru button {margin-left:auto;color:var(--c-rail-ink-2);display:grid;place-items:center;width:28px;height:28px;border-radius:6px}
.b-ru button:hover {background:var(--c-rail-hover);color:var(--c-rail-ink)}
.b-ru button svg {width:15px;height:15px}
.b-main {min-width:0;display:flex;flex-direction:column}
.b-top {min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 18px;background:var(--c-surface);border-bottom:1px solid var(--c-line);flex-wrap:wrap}
.b-top h1 {font-size:15px;font-weight:600;margin-right:6px;white-space:nowrap}
.b-crumb {display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--c-ink-3);white-space:nowrap}
.b-crumb svg {width:12px;height:12px}
.b-fil {display:flex;align-items:center;gap:7px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:99px;padding:5px 11px;font-size:12.5px;color:var(--c-ink-2);white-space:nowrap;min-height:32px;transition:border-color .18s,color .18s}
.b-fil:hover {border-color:var(--c-ink-3);color:var(--c-ink)}
.b-fil b {color:var(--c-ink);font-weight:600}
.b-fil svg {width:12px;height:12px;color:var(--c-ink-3)}
.b-topr {margin-left:auto;display:flex;align-items:center;gap:5px}
.b-ib {width:32px;height:32px;border-radius:7px;display:grid;place-items:center;color:var(--c-ink-3);position:relative;transition:background .18s,color .18s}
.b-ib:hover {background:var(--c-tint);color:var(--c-ink)}
.b-ib svg {width:16px;height:16px}
.b-ib .badge {position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:99px;background:var(--st-bad);border:1.5px solid var(--c-surface)}
.b-body {padding:14px 18px 20px;display:grid;gap:12px;align-content:start}
/* Handy: Statusleiste, Kopf, Chips, Leiste unten */
.ph-status {display:none;height:38px;background:var(--c-surface);align-items:center;padding:0 18px;flex-shrink:0}
.ph-status b {font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;color:var(--c-ink-2)}
.ph-top {display:none;align-items:center;gap:10px;padding:9px 14px;background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.ph-top .plmark {width:26px;height:26px}
.ph-top h1 {font-size:15.5px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-top .r {margin-left:auto;display:flex;align-items:center;gap:3px}
.ph-top .av {width:29px;height:29px;font-size:11px}
.ph-chips {display:none;gap:7px;padding:9px 14px;background:var(--c-surface);border-bottom:1px solid var(--c-line);overflow-x:auto}
.ph-chips .b-fil {flex-shrink:0}
.ph-tabs {display:none;grid-template-columns:repeat(5,1fr);background:var(--c-surface);border-top:1px solid var(--c-line);position:sticky;bottom:0;z-index:6}
.ph-tabs a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px;text-decoration:none;color:var(--c-ink-3);font-size:9.5px;font-weight:600;min-height:50px;transition:color .18s}
.ph-tabs a svg {width:19px;height:19px;stroke-width:1.9}
.ph-tabs a[aria-current] {color:var(--c-accent)}
.ph-tabs a span {position:relative}
.ph-tabs a .bdg {position:absolute;transform:translate(12px,-11px);background:var(--st-warn);color:#fff;font-size:8.5px;font-weight:700;min-width:15px;height:15px;border-radius:99px;display:grid;place-items:center;padding:0 3px}
.ph-safe {display:none;height:20px;background:var(--c-surface)}
/* Laufband der Monatsbesten — heute ein animierter News-Ticker */
.b-ticker {display:flex;align-items:center;gap:12px;padding:7px 18px;background:var(--c-rail);color:var(--c-rail-ink);overflow:hidden}
.b-ticker .lab {font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c-rail-ink-2);flex-shrink:0}
.b-ticker .track {display:flex;gap:22px;font-size:12.5px;white-space:nowrap;overflow:hidden;min-width:0;
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);}
.b-ticker .track span {display:flex;align-items:center;gap:6px;flex-shrink:0}
.b-ticker .track b {font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.b-ticker .track em {font-style:normal;color:var(--c-rail-ink-2)}
.b-ticker .track .hof {color:var(--c-rail-accent);font-weight:600}
/* ── Panels ──────────────────────────────────────────────────────── */
.b-p {background:var(--c-surface);border:1px solid var(--c-line);border-radius:8px;box-shadow:var(--sh);display:flex;flex-direction:column;min-width:0}
.b-p.lift {box-shadow:var(--sh-lift)}
.b-ph {display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--c-line);flex-wrap:wrap}
.b-ph h3 {font-size:13.5px;font-weight:600}
.b-ph .unit {font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)}
.b-ph .r {margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-seg {display:flex;border:1px solid var(--c-line);border-radius:6px;overflow:hidden;background:var(--c-surface-2)}
.b-seg button {font-size:11.5px;font-weight:600;padding:4px 10px;color:var(--c-ink-3);transition:background .18s,color .18s;min-height:28px}
.b-seg button:hover {color:var(--c-ink)}
.b-seg button[aria-pressed="true"] {background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh)}
.b-pb {padding:13px 14px 14px;flex:1;min-width:0}
.b-pf {padding:9px 14px;border-top:1px solid var(--c-line);font-size:12px;color:var(--c-ink-3);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.b-pf b {color:var(--c-ink)}
.b-lnk {color:var(--c-accent);text-decoration:none;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:5px}
.b-lnk:hover {text-decoration:underline}
.b-lnk svg {width:12px;height:12px}
.b-btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--c-accent);color:var(--c-accent-ink);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:var(--sh);transition:filter .18s;min-height:36px}
.b-btn:hover {filter:brightness(1.08)}
.b-btn svg {width:14px;height:14px}
.b-btn.ghost {background:transparent;color:var(--c-ink-2);border:1px solid var(--c-line);box-shadow:none}
.b-btn.ghost:hover {border-color:var(--c-ink-3);color:var(--c-ink)}
/* ── Raster, die umbrechen ───────────────────────────────────────── */
.g4 {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.g6 {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.g3 {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g21 {display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
/* Wenn die Karten sehr unterschiedlich hoch sind, nicht dehnen —
   sonst entsteht neben der kuerzeren eine Leerflaeche. */
.g21.ragged {align-items:start}
.g12 {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px}
.g11 {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* ── Kennzahl-Kacheln ────────────────────────────────────────────── */
.b-kpi {background:var(--c-surface);border:1px solid var(--c-line);border-radius:8px;padding:12px 14px 13px;box-shadow:var(--sh);min-width:0;display:flex;flex-direction:column}
.b-kpi .lab {display:flex;align-items:flex-start;gap:6px;font-size:11px;font-weight:600;color:var(--c-ink-3);text-transform:uppercase;letter-spacing:.06em;line-height:1.35;min-height:2.7em}
.b-kpi .lab svg {width:12px;height:12px;flex-shrink:0;margin-top:2px}
.b-kpi .v {display:flex;align-items:baseline;gap:6px;margin-top:2px}
.b-kpi .v b {font-family:"IBM Plex Mono",monospace;font-size:23px;font-weight:600;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.b-kpi .v small {font-size:11.5px;color:var(--c-ink-3);font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.b-kpi .foot {display:flex;align-items:center;gap:9px;margin-top:9px}
.b-kpi .foot .ago {font-size:12px;color:var(--c-ink-3);white-space:nowrap}
.b-kpi .foot .sp {margin-left:auto;flex-shrink:0}
/* ── Ziel-Bullets ────────────────────────────────────────────────── */
.b-bul {background:var(--c-surface);border:1px solid var(--c-line);border-radius:8px;padding:12px 14px 13px;box-shadow:var(--sh);min-width:0}
.b-bul .h {display:flex;align-items:baseline;gap:8px}
.b-bul .h span {font-size:11.5px;font-weight:600;color:var(--c-ink-3);text-transform:uppercase;letter-spacing:.05em}
.b-bul .h .pct {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600}
.b-bul .v {display:flex;align-items:baseline;gap:7px;margin:7px 0 9px}
.b-bul .v b {font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.b-bul .v small {font-size:11.5px;color:var(--c-ink-3);font-family:"IBM Plex Mono",monospace}
.b-bul svg {display:block;width:100%;height:auto}
/* ── Kleine Vielfache ────────────────────────────────────────────── */
.b-sm {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--c-line)}
.b-sm>div {background:var(--c-surface);padding:13px 15px 12px;min-width:0}
.b-sm .h {display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.b-sm .h h4 {font-size:12.5px;font-weight:600;line-height:1.35}
.b-sm .h .u {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--c-ink-3);white-space:nowrap}
.b-sm .now {display:flex;align-items:baseline;gap:8px;margin:6px 0 8px;flex-wrap:wrap}
.b-sm .now b {font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* ── Fortschrittsreihen ──────────────────────────────────────────── */
.b-prog {display:flex;flex-direction:column;gap:13px}
.b-prog .row {display:grid;gap:5px}
.b-prog .t {display:flex;align-items:baseline;gap:10px;font-size:13px}
.b-prog .t span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-prog .t b {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12.5px;flex-shrink:0}
.b-prog .track {height:7px;border-radius:99px;background:var(--c-tint);overflow:hidden;position:relative}
.b-prog .fill {height:100%;border-radius:99px;background:var(--s1)}
.b-prog .mark {position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--c-ink);border-radius:1px}
.b-prog .meta {font-size:11.5px;color:var(--c-ink-3)}
/* ── Tabellen ────────────────────────────────────────────────────── */
.b-tw {overflow-x:auto;overflow-y:hidden}
.b-t {width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.b-t th {text-align:left;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3);font-weight:500;padding:8px 10px;background:var(--c-surface-2);border-bottom:1px solid var(--c-line);white-space:nowrap;position:sticky;top:0}
.b-t th button {display:flex;align-items:center;gap:5px;color:inherit;font:inherit}
.b-t th button:hover {color:var(--c-ink)}
.b-t th svg {width:11px;height:11px;opacity:.55}
.b-t th[aria-sort] button {color:var(--c-ink)}
.b-t th[aria-sort] svg {opacity:1;color:var(--c-accent)}
.b-t th.r, .b-t td.r {text-align:right}
.b-t td {padding:8px 10px;border-bottom:1px solid var(--c-line);white-space:nowrap;color:var(--c-ink)}
.b-t tbody tr {transition:background .15s}
.b-t tbody tr:hover {background:var(--c-tint)}
.b-t tbody tr:last-child td {border-bottom:0}
.b-t td.nm {font-weight:600}
.b-t td.mut {color:var(--c-ink-3)}
.b-t td.nm .u {display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.05em;color:var(--c-ink-3);font-weight:400;margin-top:1px}
.b-t .who {display:flex;align-items:center;gap:9px}
.b-t .who .av {width:26px;height:26px;font-size:10.5px}
.b-t .who .t {line-height:1.3}
.b-t .who .t b {display:block;font-size:12.5px;font-weight:600;color:var(--c-ink)}
.b-t .who .t span {font-size:11px;color:var(--c-ink-3);font-weight:400}
.b-t td.tot {font-weight:600}
.ph-hint {display:none;align-items:center;gap:6px;font-size:11px;color:var(--c-ink-3);padding:8px 13px 0}
.ph-hint svg {width:12px;height:12px;flex-shrink:0}
/* ── Listen ──────────────────────────────────────────────────────── */
.b-sl {display:flex;flex-direction:column;margin:0;padding:0}
.b-sl li {display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--c-line);list-style:none}
.b-sl li:last-child {border-bottom:0;padding-bottom:0}
.b-sl .t {min-width:0;line-height:1.35}
.b-sl .t b {display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-sl .t span {font-size:11px;color:var(--c-ink-3)}
.b-sl .n {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;flex-shrink:0}
/* Zwei bis drei Verweise am rechten Rand einer Listenzeile. */
.kz-zwei {margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
/* Eine Liste, die unter etwas anderem steht und sich davon absetzt. */
.kz-abgesetzt {margin-top:16px;padding-top:13px;border-top:1px solid var(--c-line)}
/* ── Weg zur naechsten Position ──────────────────────────────────── */
.kz-weg {display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.kz-weg .unit {margin:0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)}
.kz-weg .pos {margin:3px 0 0;font-size:15px;font-weight:600}
.kz-weg .pos.ziel {color:var(--c-accent)}
.kz-weg .pfeil {width:16px;height:16px;color:var(--c-ink-3);margin-top:22px;flex-shrink:0}
/* ── Bester eigener Monat ────────────────────────────────────────── */
.kz-rekord {margin-top:14px;padding-top:13px;border-top:1px solid var(--c-line)}
.kz-rekord .kopf {display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kz-rekord h4 {font-size:12.5px;font-weight:600;margin:0}
.kz-rekord .kopf .n {font-size:13px}
.kz-rekord .unit {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--c-ink-3)}
.kz-rekord .meta {display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 0;font-size:11px;color:var(--c-ink-3)}
.b-news {display:flex;flex-direction:column;margin:0;padding:0}
.b-news li {display:grid;grid-template-columns:3px 1fr;gap:11px;padding:10px 0;border-bottom:1px solid var(--c-line);list-style:none}
.b-news li:last-child {border-bottom:0;padding-bottom:0}
.b-news .stripe {border-radius:2px;background:var(--c-line)}
.b-news .p1 .stripe {background:var(--c-accent)}
.b-news .p2 .stripe {background:var(--st-warn)}
.b-news .p3 .stripe {background:var(--st-bad)}
.b-news h4 {font-size:13px;font-weight:600;line-height:1.4}
.b-news p {font-size:12px;color:var(--c-ink-2);margin-top:3px;line-height:1.5}
.b-news time {font-size:11px;color:var(--c-ink-3);font-variant-numeric:tabular-nums;display:block;margin-top:4px}
.b-rank {display:flex;flex-direction:column;gap:11px}
.b-rank .row {display:grid;gap:5px}
.b-rank .t {display:flex;align-items:baseline;gap:10px;font-size:12.5px}
.b-rank .t span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-rank .t b {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:12.5px;color:var(--st-ok);flex-shrink:0}
.b-rank .track {height:7px;border-radius:99px;background:var(--c-tint);overflow:hidden}
.b-rank .fill {height:100%;border-radius:99px;background:var(--s1)}
.b-lb {display:flex;flex-direction:column;margin:0;padding:0}
.b-lb li {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--c-line);list-style:none}
.b-lb li:last-child {border-bottom:0}
.b-lb .rk {width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;background:var(--c-tint);color:var(--c-ink-2)}
.b-lb li.lead .rk {background:var(--c-accent);color:var(--c-accent-ink)}
.b-lb li.self {background:var(--c-accent-soft);margin:0 -10px;padding:8px 10px;border-radius:7px;border-bottom:0}
.b-lb .nm {font-size:12.5px;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-lb .nm em {font-style:normal;font-size:10.5px;color:var(--c-ink-3);display:block}
.b-lb .lbsc {font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.b-ag {display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.b-ag li {display:grid;grid-template-columns:48px 1fr;gap:11px;list-style:none;align-items:baseline}
.b-ag .tm {font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--c-accent);font-variant-numeric:tabular-nums}
.b-ag .ev b {display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.b-ag .ev span {font-size:11px;color:var(--c-ink-3)}
/* ── Leer- und Fehlerzustände ────────────────────────────────────── */
.b-empty {display:grid;place-items:center;padding:44px 24px;text-align:center}
.b-empty .ico {width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--c-tint);color:var(--c-ink-3);margin-bottom:15px}
.b-empty .ico svg {width:21px;height:21px;stroke-width:1.6}
.b-empty h3 {font-size:15px;font-weight:600}
.b-empty p {font-size:13px;color:var(--c-ink-2);margin-top:7px;max-width:44ch;line-height:1.55}
.b-empty .acts {display:flex;gap:9px;margin-top:17px;flex-wrap:wrap;justify-content:center}
.b-note {display:flex;gap:10px;padding:11px 14px;border-radius:8px;background:var(--c-surface-2);border:1px solid var(--c-line);font-size:12px;color:var(--c-ink-2);line-height:1.55}
.b-note>svg {width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--c-ink-3);stroke-width:1.9}
.b-note b {color:var(--c-ink);font-weight:600}
/* Tonlagen einer Hinweiszeile. UiNote gibt sie schon aus (warn/ok/bad),
   gestaltet waren sie bisher nur innerhalb einer Fehlerkarte — eine
   Warnung sah damit aus wie ein Hinweis. */
.b-note.warn {background:var(--st-warn-bg);border-color:var(--st-warn-fill)}
.b-note.warn>svg {color:var(--st-warn)}
.b-note.ok {background:var(--st-ok-bg);border-color:var(--st-ok-fill)}
.b-note.ok>svg {color:var(--st-ok)}
.b-note.bad {background:var(--st-bad-bg);border-color:var(--st-bad-fill)}
.b-note.bad>svg {color:var(--st-bad)}
/* ── Formulare / Anmeldung ───────────────────────────────────────── */
.fld {display:grid;gap:6px}
.fld>label {font-size:13px;font-weight:600;color:var(--c-ink-2)}
.inp {display:flex;align-items:center;gap:9px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:9px;padding:0 11px;height:44px;transition:border-color .18s,box-shadow .18s}
.inp:focus-within {border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft)}
.inp>svg {width:16px;height:16px;color:var(--c-ink-3);flex-shrink:0}
.inp input {flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:inherit;font-size:14px;height:100%;outline:none}
.inp input::placeholder {color:var(--c-ink-3)}
.inp button {color:var(--c-ink-3);display:grid;place-items:center;width:30px;height:30px;border-radius:7px;flex-shrink:0;transition:background .18s,color .18s}
.inp button:hover {color:var(--c-ink);background:var(--c-tint)}
.inp button svg {width:16px;height:16px}
.fld .hint {font-size:12px;color:var(--c-ink-3);line-height:1.45}
.fld .err {font-size:12.5px;color:var(--st-bad);display:flex;align-items:flex-start;gap:5px;font-weight:600;line-height:1.45}
.fld .err svg {width:12px;height:12px;stroke-width:2.4;flex-shrink:0;margin-top:3px}
.fld.bad .inp {border-color:var(--st-bad)}
.cb {display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--c-ink-2);cursor:pointer;line-height:1.45}
.cb>i {width:17px;height:17px;border:1.5px solid var(--c-line);border-radius:5px;flex-shrink:0;margin-top:1px;display:grid;place-items:center;background:var(--c-surface);font-style:normal;transition:border-color .18s}
.cb:hover>i {border-color:var(--c-ink-3)}
.sub {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:9px;background:var(--c-accent);color:var(--c-accent-ink);font-weight:600;font-size:14px;transition:filter .18s,transform .18s}
.sub:hover {filter:brightness(1.07)}
.sub:active {transform:translateY(1px)}
/* Ein zerstoerender Hauptknopf — „Loeschen" in einer Rueckfrage. Der
   Baukasten hatte dafuer nur den Akzentknopf, und der sagt „weiter", nicht
   „das ist weg". */
.sub.bad {background:var(--st-bad);color:#fff}
.sub svg {width:15px;height:15px}
.ghostbtn {display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:40px;border-radius:9px;border:1px solid var(--c-line);color:var(--c-ink-2);font-weight:600;font-size:13px;transition:border-color .18s,color .18s}
.ghostbtn:hover {border-color:var(--c-ink-3);color:var(--c-ink)}
.ghostbtn svg {width:14px;height:14px}
.al {display:flex;gap:9px;padding:11px 12px;border-radius:9px;font-size:12.5px;line-height:1.5}
.al>svg {width:15px;height:15px;flex-shrink:0;margin-top:2px;stroke-width:2}
.al b {display:block;font-weight:600;margin-bottom:1px}
.al.warn {background:var(--st-warn-bg);color:var(--st-warn)}
.al.bad {background:var(--st-bad-bg);color:var(--st-bad)}
.otp {display:flex;gap:8px}
.otp>i {width:46px;height:54px;border:1px solid var(--c-line);border-radius:9px;background:var(--c-surface);display:grid;place-items:center;font-style:normal;font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-ink)}
.otp>i.on {border-color:var(--c-accent)}
.otp>i.cur {border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-soft)}
.otp>i.empty {color:var(--c-ink-3)}
.authlink {color:var(--c-accent);text-decoration:none;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:5px}
.authlink:hover {text-decoration:underline}
.authlink svg {width:13px;height:13px}
.authfoot {display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--c-ink-3)}
.authfoot a {color:var(--c-ink-3);text-decoration:none}
.authfoot a:hover {color:var(--c-ink-2);text-decoration:underline}
/* Anmeldung: geteilter Schirm, der auf schmal zusammenklappt */
.lg {display:grid;grid-template-columns:minmax(0,1fr) 520px;min-height:600px}
.lg-side {background:var(--c-rail);color:var(--c-rail-ink);padding:30px 34px;display:flex;flex-direction:column}
.lg-side .bt {display:flex;align-items:center;gap:10px}
.lg-side .bt .plmark {width:30px;height:30px}
.lg-side .bt b {font-size:15.5px;font-weight:600}
.lg-side .bt .env {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;padding:2px 7px;border-radius:5px;background:var(--c-rail-hover);color:var(--c-rail-ink-2)}
.lg-side h2 {font-size:26px;font-weight:600;letter-spacing:-.022em;line-height:1.18;margin-top:auto;max-width:17ch}
.lg-side .lede {font-size:13.5px;color:var(--c-rail-ink-2);margin-top:12px;max-width:42ch;line-height:1.6}
.lg-stat {margin-top:26px;display:grid;border-top:1px solid var(--c-rail-line)}
.lg-stat div {display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-rail-line)}
.lg-stat dt {font-size:12.5px;color:var(--c-rail-ink-2)}
.lg-stat dd {margin:0;font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:7px;white-space:nowrap}
.lg-stat dd .lampe {width:7px;height:7px;border-radius:99px;flex-shrink:0}
.lg-stat dd .lampe.ok {background:var(--st-ok)}
.lg-stat dd .lampe.warn {background:var(--st-warn)}
.lg-side .meta {margin-top:20px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--c-rail-ink-2)}
.lg-form {background:var(--c-surface);display:grid;place-items:center;padding:40px 44px}
.lg-inner {width:100%;max-width:376px}
.lg-inner h3 {font-size:19px;font-weight:600;letter-spacing:-.012em}
.lg-inner .lede {font-size:13.5px;color:var(--c-ink-2);margin-top:5px;line-height:1.5}
.lg-fields {display:grid;gap:15px;margin-top:20px}
.lg-row {display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lg-row .authlink {margin-left:auto}
.lg-foot {margin-top:20px;padding-top:15px;border-top:1px solid var(--c-line)}
/* Live-Pruefliste der Passwortregeln — existiert heute in reset.blade.php */
.rules {display:grid;gap:6px;margin-top:2px}
.rules li {display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-ink-3);list-style:none}
.rules li svg {width:14px;height:14px;flex-shrink:0;stroke-width:2.4}
.rules li.done {color:var(--st-ok)}
.rules li.open svg {color:var(--c-ink-3);opacity:.5}
.rules ul {margin:0;padding:0}
.cap {display:flex;align-items:center;gap:11px;padding:10px 22px;background:var(--c-canvas);border-top:1px dashed var(--c-line);border-bottom:1px dashed var(--c-line);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c-ink-3);font-weight:600}
.cap svg {width:12px;height:12px;stroke-width:2.2}
/* ── Dialog (global) ─────────────────────────────────────────────── */
.dlgwrap {position:relative;min-height:420px;display:grid;place-items:center;padding:24px;background:var(--c-canvas)}
.scrim {position:absolute;inset:0;background:var(--c-scrim);backdrop-filter:blur(2px)}
.dlg {position:relative;width:100%;max-width:428px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;box-shadow:var(--sh-dlg);padding:26px 22px 20px;overflow:hidden}
.dlg .x {position:absolute;top:14px;right:12px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--c-ink-3)}
.dlg .x:hover {background:var(--c-tint);color:var(--c-ink)}
.dlg .x svg {width:16px;height:16px}
.dlg h3 {font-size:16.5px;font-weight:600;letter-spacing:-.012em;padding-right:28px}
.dlg .lede {font-size:13px;color:var(--c-ink-2);margin-top:7px;line-height:1.55}
.dlg .body {margin-top:17px;display:grid;gap:14px}
.dlg .acts {display:flex;gap:9px;margin-top:20px;align-items:stretch;
  padding-top:16px;border-top:1px solid var(--c-line)}
.dlg .acts .sub {width:auto;padding:0 20px;flex:1;order:2;box-shadow:var(--sh-lift)}
.dlg .acts .ghostbtn {width:auto;padding:0 18px;flex:0 0 auto;order:1;
  border-color:var(--c-ink-3);color:var(--c-ink)}
/* Beide Knoepfe einer Aktionszeile gleich hoch — .ghostbtn bringt 40 px
   mit, .sub 44 px; ohne diese Zeile stehen sie ungleich. */
.dlg .acts .ghostbtn, .dlg .acts .sub {height:44px;font-size:14px}
.dlg .acts .ghostbtn:hover {background:var(--c-tint)}
/* randlos an der Oberkante — kein Zusammenstoss mit dem Schliesskreuz */
.dlg .dsteps {position:absolute;top:0;left:0;right:0;display:flex;gap:2px;margin:0}
.dlg .dsteps i {height:3px;border-radius:0;flex:1;background:var(--c-line);display:block}
.dlg .dsteps i.on {background:var(--c-accent)}
/* ── Breite Modale und Unteransichten ───────────────────────── */
.dlg.wide {max-width:720px}
.dlg.xwide {max-width:1040px}
.dlg.plain {padding:0;overflow:visible}
.dlg.plain .dhead {display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--c-line);flex-wrap:wrap}
.dlg.plain .dhead h3 {font-size:16px;font-weight:600;letter-spacing:-.012em}
.dlg.plain .dhead .r {margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dlg.plain .dbody {padding:15px 18px}
.dlg.plain .dbody.flush {padding:0}
.dlg.plain .dfoot {display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--c-line);font-size:12px;color:var(--c-ink-3)}
.dlg.plain .dfoot .r {margin-left:auto;display:flex;gap:9px}
.dlg .x.onhead {top:15px;right:14px}
/* Organigramm */
.org {background:var(--c-canvas);padding:20px 16px;overflow-x:auto}
.orgtree {display:flex;flex-direction:column;align-items:center;gap:0;min-width:660px}
.orgrow {display:flex;justify-content:center;gap:14px;position:relative}
.orgrow.lvl2::before, .orgrow.lvl3::before {content:"";position:absolute;top:-14px;left:12%;right:12%;height:1px;background:var(--c-line)}
.orgstem {width:1px;height:14px;background:var(--c-line)}
.orgnode {width:150px;border-radius:9px;padding:9px 10px;background:var(--c-surface);
  border:1px solid var(--c-line);box-shadow:var(--sh);position:relative;}
.orgnode.hit {outline:2px solid var(--c-accent);outline-offset:2px}
.orgnode .rank {height:3px;border-radius:2px;margin:-2px -4px 7px;display:block}
.orgnode b {display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.orgnode span {display:block;font-size:11px;color:var(--c-ink-3);margin-top:2px}
.orgnode .vm {position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:99px;background:var(--s2)}
.orglegend {display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;justify-content:center;font-size:11.5px;color:var(--c-ink-2)}
.orglegend span {display:flex;align-items:center;gap:6px}
.orglegend i {width:14px;height:3px;border-radius:2px;display:block}
.zoomctl {display:flex;align-items:center;gap:9px;font-size:12px;color:var(--c-ink-3)}
.zoomctl input[type=range] {width:110px;accent-color:var(--c-accent)}
/* Aufklappliste */
.acc {display:flex;flex-direction:column}
.acc>div {border-bottom:1px solid var(--c-line)}
.acc>div:last-child {border-bottom:0}
.acc .head {display:flex;align-items:center;gap:10px;padding:11px 14px;width:100%;text-align:left;font-size:13px;font-weight:600}
.acc .head:hover {background:var(--c-tint)}
.acc .head svg {width:13px;height:13px;color:var(--c-ink-3);flex-shrink:0}
.acc .head .ct {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--c-ink-3);font-weight:400}
.acc .panel {border-top:1px solid var(--c-line);background:var(--c-surface-2)}
.at-search {display:flex;align-items:center;gap:8px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:99px;padding:0 12px;height:34px;min-width:0;max-width:280px}
.at-search svg {width:14px;height:14px;color:var(--c-ink-3);flex-shrink:0}
.at-search input {flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:inherit;font-size:12.5px;outline:none}
.at-canvas {background:var(--c-canvas);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);overflow:auto;position:relative}
/* Feste Canvas-Hoehe statt flex:1 — die Rahmenhoehe kommt aus der Seitenleiste,
   und flex-grow auf einem gestreckten Grid-Kind laesst sie davonlaufen. 575px
   fuellt den Rest, sodass die Fusszeile am unteren Rand sitzt. */
.at-canvas.fill {height:575px}
/* Fusszeile immer am unteren Rand, auch bei kurzem Panel */
.b-foot {margin-top:auto}
.at-hint {display:flex;align-items:center;gap:7px;padding:8px 14px;font-size:11.5px;color:var(--c-ink-3);background:var(--c-surface-2);border-bottom:1px solid var(--c-line)}
.at-hint svg {width:13px;height:13px;flex-shrink:0}
.at-legend {display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;font-size:11.5px;color:var(--c-ink-2);border-top:1px solid var(--c-line)}
.at-legend span {display:flex;align-items:center;gap:6px}
.at-legend i {width:12px;height:12px;border-radius:3px;display:block;flex-shrink:0}
/* Organigramm */
.at-org {padding:22px 18px;display:flex;flex-direction:column;align-items:center;min-width:820px}
.at-row {display:flex;justify-content:center;gap:12px;position:relative}
.at-row.at-kids::before {content:"";position:absolute;top:-15px;left:9%;right:9%;height:1px;background:var(--c-line)}
.at-stem {width:1px;height:15px;background:var(--c-line)}
.at-node {width:152px;border-radius:10px;background:var(--c-surface);border:1px solid var(--c-line);
  box-shadow:var(--sh);padding:10px 11px 9px;position:relative;text-align:left;}
.at-node.root {width:196px;box-shadow:var(--sh-lift)}
.at-node .pos {display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.04em;}
.at-node b {display:block;font-size:12.5px;font-weight:600;line-height:1.3;margin-top:6px}
.at-node .sub2 {display:block;font-size:10.5px;color:var(--c-ink-3);margin-top:2px;font-family:"IBM Plex Mono",monospace}
.at-node .exp {position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  width:22px;height:22px;border-radius:99px;background:var(--c-surface);
  border:1px solid var(--c-line);display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;color:var(--c-ink-2);
  box-shadow:var(--sh);cursor:pointer;}
.at-node .exp:hover {border-color:var(--c-accent);color:var(--c-accent)}
/* Strukturbaum */
.at-tree {padding:12px 0;min-width:640px}
.at-trow {display:flex;align-items:center;gap:9px;padding:7px 16px;border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.at-trow:hover {background:var(--c-tint)}
.at-trow .tw {width:15px;height:15px;display:grid;place-items:center;color:var(--c-ink-3);flex-shrink:0}
.at-trow .tw svg {width:12px;height:12px}
.at-trow .pos {flex-shrink:0}
.at-trow .nm {font-size:12.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.at-trow .cnt {margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--c-ink-3);flex-shrink:0}
.at-trow.self {background:var(--c-accent-soft)}
/* Auswertung */
.at-pyr {display:flex;flex-direction:column;gap:4px}
.at-pyr .row {display:grid;grid-template-columns:26px 1fr 54px;gap:9px;align-items:center}
.at-pyr .lv {font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3);text-align:right}
.at-pyr .bar {height:14px;border-radius:3px;background:var(--s1);min-width:2px}
.at-pyr .n {font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right}
/* 6 × 6 = 43 */
.at-gauge {display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.at-gauge .ring {position:relative;width:124px;height:124px;flex-shrink:0}
.at-gauge .ring svg {transform:rotate(-90deg);display:block}
.at-gauge .ring .bg {fill:none;stroke:var(--c-tint);stroke-width:10}
.at-gauge .ring .fg {fill:none;stroke:var(--s1);stroke-width:10;stroke-linecap:round}
.at-gauge .ring .txt {position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.at-gauge .ring .txt b {display:block;font-family:"IBM Plex Mono",monospace;font-size:24px;font-weight:600;letter-spacing:-.03em}
.at-gauge .ring .txt span {font-size:10px;color:var(--c-ink-3);letter-spacing:.05em;text-transform:uppercase}
.at-tiles {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.at-tile {background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:8px;padding:9px 10px}
.at-tile b {display:block;font-size:11.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-tile .track {height:5px;border-radius:99px;background:var(--c-tint);overflow:hidden;margin-top:7px}
.at-tile .fill {height:100%;border-radius:99px;background:var(--s1)}
.at-tile .n {font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--c-ink-3);margin-top:4px;display:block}
/* ── Fussleiste ──────────────────────────────────────────────────── */
.b-foot {padding:11px 18px;border-top:1px solid var(--c-line);background:var(--c-surface);display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--c-ink-3);flex-wrap:wrap}
.b-foot .v {margin-left:auto;font-family:"IBM Plex Mono",monospace}
/* ── Struktur-Atlas: fuenf Ansichten in einem Rahmen ──────────────────
   display:contents haelt die Panel-Huelle aus dem Layout heraus, damit
   Hinweiszeile, Canvas und Legende weiter direkte Flex-Kinder von
   .b-main sind. [hidden] muss explizit gewinnen, sonst schlaegt
   display:contents die UA-Regel. */
.at-view {display:contents}
.at-view[hidden] {display:none}
.at-node .exp[aria-expanded="true"] {background:var(--c-accent);border-color:var(--c-accent);color:var(--c-accent-ink)}
.at-node.hit {border-color:var(--c-accent);box-shadow:0 0 0 2px var(--c-accent-soft),var(--sh)}
.at-sub {display:flex;flex-direction:column;align-items:center}
.at-cap {font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3);letter-spacing:.03em;margin:7px 0 9px}
.at-trow .pos {display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:4px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;flex-shrink:0}
.at-trow.hit {background:var(--c-accent-soft)}
.at-trow .tw:hover {color:var(--c-accent)}
.at-empty {padding:30px 16px;text-align:center;font-size:12.5px;color:var(--c-ink-3)}
/* Sekundaere Filterleiste unter der Reiterleiste */
.b-ph2 {padding:10px 14px;border-bottom:1px solid var(--c-line);background:var(--c-surface-2)}
.b-fils {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-fil select {font:inherit;font-size:12px;border:0;background:transparent;color:var(--c-ink);outline:none;max-width:160px}
.b-fil.grow {flex:1;min-width:190px}
.b-fil.grow select {flex:1;max-width:none}
/* .sub und .ghostbtn sind fuer Formulare 100 % breit — hier die Leistenform */
.sub.sm, .ghostbtn.sm {width:auto;height:30px;padding:0 12px;font-size:12px;border-radius:7px;flex-shrink:0}
.sub.sm svg, .ghostbtn.sm svg {width:12px;height:12px}
/* Umschaltgruppe */
.b-tg {display:flex;border:1px solid var(--c-line);border-radius:7px;overflow:hidden;background:var(--c-surface);flex-shrink:0}
.b-tg button {min-height:30px;padding:0 9px;font-size:11.5px;font-weight:600;color:var(--c-ink-3);display:flex;align-items:center;gap:5px}
.b-tg button svg {width:13px;height:13px}
.b-tg button[aria-pressed="true"] {background:var(--c-accent-soft);color:var(--c-accent)}
.b-tg button+button {border-left:1px solid var(--c-line)}
/* Kompakte Tabelle — die AzA-Listen haben bis zu 16 Spalten */
.b-t.comp {font-size:12px}
.b-t.comp th {padding:7px 9px;font-size:9.5px;letter-spacing:.06em}
.b-t.comp td {padding:6px 9px}
.b-tw.scroll {box-shadow:inset -15px 0 12px -15px rgba(11,32,56,.3)}
.b-t td .sub2 {display:block;font-size:10px;font-family:"IBM Plex Mono",monospace;color:var(--c-ink-3);margin-top:1px}
.b-t td.del-up {color:var(--st-ok)}
.b-t td.del-dn {color:var(--st-bad)}
.b-t tr.tr-danger>td {background:var(--st-bad-bg)}
.b-t tr.tr-warn>td {background:var(--st-warn-bg)}
.b-t tr.tr-info>td {background:var(--c-accent-soft)}
.b-t tr.tr-qm>td {background:var(--tr-qm)}
/* Statuschip */
.chip {display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px 2px 6px;border-radius:99px;background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-ink-2);white-space:nowrap}
.chip i {width:6px;height:6px;border-radius:50%;background:var(--c-ink-3);flex-shrink:0}
.chip.ok i {background:var(--st-ok-fill)}
.chip.warn i {background:var(--st-warn-fill)}
.chip.bad i {background:var(--st-bad-fill)}
.chip.info i {background:var(--c-accent)}
/* Anklickbare Einstiegskarte */
.b-p.act {text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
.b-p.act:hover {border-color:var(--c-accent);box-shadow:var(--sh-lift)}
.b-p.act .b-pb {display:flex;flex-direction:column;gap:4px}
.b-p.act .ico {width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--c-accent-soft);color:var(--c-accent);margin-bottom:5px}
.b-p.act .ico svg {width:17px;height:17px}
.b-p.act b {font-size:14px;font-weight:600}
.b-p.act .b-pb>span:last-child {font-size:12px;color:var(--c-ink-3);line-height:1.45}
/* Formularraster */
.b-form {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.b-form .fs {grid-column:1/-1;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--c-ink-3);padding-bottom:6px;border-bottom:1px solid var(--c-line)}
.b-form label {display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--c-ink-2);min-width:0}
.b-form .rq {color:var(--st-bad)}
.b-form input, .b-form select, .b-form textarea {font:inherit;font-size:12.5px;padding:7px 9px;border:1px solid var(--c-line);border-radius:7px;background:var(--c-surface);color:var(--c-ink);min-width:0;width:100%}
.b-form input::placeholder, .b-form textarea::placeholder {color:var(--c-ink-3)}
.b-form label.wide {grid-column:span 2}
.b-form label.full {grid-column:1/-1}
.b-form .tip {font-size:10.5px;color:var(--c-ink-3);font-style:italic}
/* Zwei Wege zur Auswahl */
.b-pick {display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.b-pick .sub, .b-pick .ghostbtn {width:auto;padding:0 16px;flex-shrink:0}
.b-pick .or {font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--c-ink-3);letter-spacing:.06em}
/* Dokumentkarten */
.b-drop {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.b-dc {border:1px dashed var(--c-line);border-radius:9px;padding:10px 11px;background:var(--c-surface-2);display:flex;flex-direction:column;gap:8px;min-width:0}
.b-dc .t {display:flex;align-items:flex-start;gap:8px}
.b-dc .t b {font-size:12px;font-weight:600;line-height:1.3;min-width:0}
.b-dc .need {margin-left:auto;flex-shrink:0;font-family:"IBM Plex Mono",monospace;font-size:9.5px;padding:2px 6px;border-radius:4px;background:var(--c-tint);color:var(--c-ink-3)}
.b-dc.on {border-style:solid;border-color:var(--st-ok-fill);background:var(--st-ok-bg)}
.b-dc.on .need {background:var(--st-ok-fill);color:#fff}
.b-dc .f {display:flex;align-items:center;gap:6px;font-size:11px;color:var(--c-ink-3);font-family:"IBM Plex Mono",monospace;min-width:0}
.b-dc .f svg {width:12px;height:12px;flex-shrink:0}
.b-dc .f span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.st-row{grid-template-columns:30px minmax(0,1fr);gap:4px 12px}.st-row>:last-child{grid-column:2}}
/* Kalender (Termintafel) */
.b-cal {display:grid;grid-template-columns:58px repeat(5,minmax(0,1fr));border:1px solid var(--c-line);border-radius:9px;overflow:hidden;background:var(--c-surface)}
.b-cal .hd {padding:8px 9px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);background:var(--c-surface-2);border-bottom:1px solid var(--c-line);text-align:center}
.b-cal .hd.l {text-align:left}
.b-cal .tm {padding:6px 8px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3);border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);text-align:right}
.b-cal .cl {border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);padding:3px;min-height:34px;display:flex;flex-direction:column;gap:3px}
.b-cal .cl:nth-child(6n) {border-right:0}
.b-ev {border-radius:5px;padding:3px 6px;font-size:10.5px;line-height:1.3;border-left:3px solid var(--c-accent);background:var(--c-accent-soft);color:var(--c-ink);min-width:0;overflow:hidden}
.b-ev b {display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-ev span {font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--c-ink-3)}
.b-ev.ok {border-left-color:var(--st-ok-fill);background:var(--st-ok-bg)}
.b-ev.warn {border-left-color:var(--st-warn-fill);background:var(--st-warn-bg)}
.b-ev.bad {border-left-color:var(--st-bad-fill);background:var(--st-bad-bg)}
/* Stufenanzeige (Personalentwicklung, Wettkampf) */
.b-lvl {display:flex;gap:8px;flex-wrap:wrap}
.b-lvl .s {flex:1;min-width:110px;border:1px solid var(--c-line);border-radius:8px;padding:9px 11px;background:var(--c-surface-2)}
.b-lvl .s b {display:block;font-size:12px;font-weight:600}
.b-lvl .s .n {font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;letter-spacing:-.03em;display:block;margin-top:3px}
.b-lvl .s.on {border-color:var(--c-accent);background:var(--c-accent-soft)}
.b-lvl .s .u {font-size:10.5px;color:var(--c-ink-3);display:block;margin-top:2px}
/* Medaillenrang */
.b-med {display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;flex-shrink:0}
.b-med.g {background:#C8A227;color:#2A1F00}
.b-med.s {background:#B6BCC4;color:#1B2129}
.b-med.b {background:#B07A47;color:#22150A}
/* Videokacheln */
.b-vid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.b-vc {border:1px solid var(--c-line);border-radius:9px;overflow:hidden;background:var(--c-surface);min-width:0}
.b-vc .th {aspect-ratio:16/9;background:var(--c-canvas);display:grid;place-items:center;border-bottom:1px solid var(--c-line);position:relative}
.b-vc .th svg {width:30px;height:30px;color:var(--c-ink-3)}
.b-vc .m {padding:9px 11px}
.b-vc .m b {display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.b-vc .m span {font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3);display:block;margin-top:3px}
.b-t .vh {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.b-t tr.tr-teal>td {background:#DCF2F1}
/* Termintafel: senkrecht die Hierarchie, waagerecht die Kalendertage.
   Die beiden linken Spalten bleiben beim Querscrollen stehen. */
.b-tt {width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px;background:var(--c-surface)}
.b-tt thead th {background:var(--c-surface-2);border-bottom:1px solid var(--c-line);border-right:1px solid var(--c-line);padding:0;text-align:center;font-weight:500}
.b-tt thead th button {width:100%;padding:5px 3px;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--c-ink-3);display:block;line-height:1.25}
.b-tt thead th button:hover {color:var(--c-ink);background:var(--c-tint)}
.b-tt thead th .dw {display:block;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.b-tt thead th.today button {color:var(--c-accent);font-weight:600}
.b-tt th.nm {position:sticky;left:0;z-index:3;background:var(--c-surface-2);text-align:left;padding:7px 10px;min-width:172px;border-right:1px solid var(--c-line);font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);white-space:nowrap}
.b-tt th.cv {position:sticky;left:172px;z-index:3;background:var(--c-surface-2);width:26px;border-right:1px solid var(--c-line)}
.b-tt td {border-bottom:1px solid var(--c-line);border-right:1px solid var(--c-line);color:var(--c-ink)}
.b-tt td.nm {position:sticky;left:0;z-index:2;background:var(--c-surface);text-align:left;padding:6px 10px;min-width:172px;white-space:nowrap}
.b-tt td.cv {position:sticky;left:172px;z-index:2;background:var(--c-surface);width:26px;text-align:center}
.b-tt td.cv button {width:22px;height:22px;display:grid;place-items:center;color:var(--c-ink-3);margin:0 auto}
.b-tt td.cv svg {width:12px;height:12px}
.b-tt td.d {padding:2px;text-align:center;height:28px;vertical-align:middle;line-height:1}
.b-tt tr.sb>td {background:var(--c-tint);font-weight:600}
.b-tt tr.vm td.nm {padding-left:26px;color:var(--c-ink-2);font-size:11px;font-weight:400}
.b-tt tbody td.d.near {background:var(--c-surface-2)}
.b-tt tbody td.d.today {background:var(--c-accent-soft)}
.b-tt.wide td.d {height:42px}
.tp {display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:15px;padding:0 3px;border-radius:4px;font-family:"IBM Plex Mono",monospace;font-size:8.5px;font-weight:600;line-height:1;margin:1px}
.tp.t1 {background:var(--s1);color:#fff}
.tp.t2 {background:transparent;box-shadow:inset 0 0 0 1.5px var(--s1);color:var(--s1)}
.tp.t3 {background:var(--s3);color:#fff}
.tp.sv {background:var(--s2);color:#fff}
.tp.im {background:var(--s4);color:#fff}
.tp.off {background:var(--c-tint);color:var(--c-ink-3);text-decoration:line-through}
.at-legend .tp {margin-right:3px}
.b-t .tp {margin-right:4px}
/* Verhaeltnisbalken — ersetzt die Zweisegment-Donuts */
.ratio {display:flex;flex-direction:column;gap:9px}
.ratio .bar {display:flex;height:13px;border-radius:99px;overflow:hidden;background:var(--c-tint);gap:2px}
.ratio .bar i {display:block}
.ratio .rlg {display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--c-ink-2)}
.ratio .rlg span {display:flex;align-items:center;gap:6px}
.ratio .rlg i {width:10px;height:10px;border-radius:3px;flex-shrink:0}
.ratio .rlg b {font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--c-ink)}
.ratio .tot {font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3)}
/* Wettkampf: Spielstand, Countdown, Optionskarten, Ziehlisten */
.b-score {display:flex;align-items:center;justify-content:center;gap:18px;padding:14px 0 6px}
.b-score .t {text-align:center;min-width:0}
.b-score .t b {display:block;font-size:12.5px;font-weight:600}
.b-score .t .p {font-family:"IBM Plex Mono",monospace;font-size:36px;font-weight:600;letter-spacing:-.04em;line-height:1.05;display:block}
.b-score .vs {font-family:"IBM Plex Mono",monospace;font-size:22px;color:var(--c-ink-3)}
.b-cd {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--c-line);border:1px solid var(--c-line);border-radius:8px;overflow:hidden;margin-top:10px}
.b-cd div {background:var(--c-surface-2);padding:8px 4px;text-align:center}
.b-cd b {display:block;font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;letter-spacing:-.03em}
.b-cd span {font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink-3)}
.b-opts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.b-oc {border:1px solid var(--c-line);border-radius:9px;padding:12px 13px;background:var(--c-surface-2);min-width:0;text-align:left}
.b-oc.on {border-color:var(--c-accent);background:var(--c-accent-soft);box-shadow:var(--sh)}
.b-oc .ico {width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--c-surface);color:var(--c-accent);margin-bottom:8px}
.b-oc .ico svg {width:15px;height:15px}
.b-oc b {display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.b-oc span {font-size:11.5px;color:var(--c-ink-2);line-height:1.5;display:block}
.b-lbl {font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:7px;display:flex;gap:8px;align-items:baseline}
.b-pool {list-style:none;margin:0;padding:0;border:1px dashed var(--c-line);border-radius:9px;background:var(--c-surface-2);min-height:120px;display:flex;flex-direction:column}
.b-pool li {display:flex;align-items:center;gap:8px;padding:7px 11px;font-size:12px;border-bottom:1px solid var(--c-line);cursor:grab}
.b-pool li:last-child {border-bottom:0}
.b-pool li svg {width:12px;height:12px;color:var(--c-ink-3);flex-shrink:0}
.b-errs {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.b-errs li {display:flex;gap:9px;font-size:12.5px;color:var(--c-ink-2);padding:9px 11px;border-radius:8px;background:var(--st-bad-bg);border:1px solid var(--c-line);line-height:1.5}
.b-errs li::before {content:"!";font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--st-bad);flex-shrink:0}
.b-tl {display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.b-tl i {display:block;width:11px;height:15px;border-radius:2px;background:var(--s1)}
.b-tl i.r {width:5px}
.b-tl em {font-family:"IBM Plex Mono",monospace;font-size:11px;font-style:normal;color:var(--c-ink-3);margin-left:5px}
/* Kleiner Fortschrittsbalken in Tabellenzellen */
.track2 {display:inline-block;vertical-align:middle;width:44px;height:5px;border-radius:99px;background:var(--c-tint);overflow:hidden;margin-left:6px}
.track2.wide {width:78px}
.track2 i {display:block;height:100%;border-radius:99px;background:var(--s1)}
/* Summe direkt im Spaltenkopf, wie im Bestand */
.b-t th .sum {display:block;font-size:9.5px;color:var(--c-ink);font-weight:600;letter-spacing:0;text-transform:none;margin-top:2px}
/* Datumsbox des ABW-Karussells */
.b-fil.on {border-color:var(--c-accent);background:var(--c-accent-soft);color:var(--c-accent)}
.b-fil.on b {color:var(--c-accent)}
.b-fil span {display:inline-flex;align-items:center;gap:4px;font-family:"IBM Plex Mono",monospace;font-size:11px}
.b-fil span svg {width:11px;height:11px}
/* Layoutfehler aus Teil 1: .b-body ist ein Grid ohne Spaltenangabe, die
   implizite Spalte ist damit auto-breit. Eine Tabelle mit 23 Spalten und
   nowrap zieht so den ganzen Rahmen in die Breite. minmax(0,1fr) bindet
   die Spalte an den Container, die Tabelle scrollt in ihrem Kasten. */
.b-body {grid-template-columns:minmax(0,1fr)}
/* Teil 2 macht die kleinen Vielfachen flexibel (auto-fit ab 190px),
   damit Module mit vier oder fünf Kacheln umbrechen. Im Entwurf lief
   das in einem 1240px-Rahmen und ergab drei Spalten; auf einem echten
   1440px-Bildschirm werden daraus sechs, und dann schneidet jede
   Kachel ihre letzte Jahresmarke ab. 330px als Untergrenze trifft
   wieder drei Spalten bei 1440 und zwei bei 1000 — und lässt die
   Flexibilität, um die es Teil 2 ging. */
.b-sm {grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
/* Kontrollkaestchenliste (Dokumenteportal) */
.b-cbl {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.b-cbl li {display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--c-ink-2);padding:4px 0;line-height:1.45}
/* Werkzeugleiste und Textfeld des Formatierungseditors */
.b-tb {display:flex;gap:2px;flex-wrap:wrap;border:1px solid var(--c-line);border-bottom:0;border-radius:8px 8px 0 0;padding:6px 8px;background:var(--c-surface-2);margin-top:12px}
.b-tb span {font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--c-ink-2);padding:3px 7px;border-radius:5px;background:var(--c-surface);border:1px solid var(--c-line)}
.b-ed {border:1px solid var(--c-line);border-radius:0 0 8px 8px;padding:12px 13px;min-height:110px;font-size:13px;line-height:1.65;color:var(--c-ink-3);background:var(--c-surface)}
/* Die vier Kennzahlenkarten sollen nicht auf die Hoehe der hoechsten
   wachsen — Verhaeltnisbalken brauchen nur wenig Platz. */
.g4.ragged, .g21.ragged {align-items:start}
/* Erklaertexte in scrollenden Leisten duerfen nicht umbrechen; auf dem
   Handy entfallen sie, weil sie in der Fusszeile des Panels stehen. */
.b-fils .unit, .b-ph .r .unit {flex-shrink:0;white-space:nowrap}
/* Beschriftung-Wert-Paare (Protokolldetails, Profil, Textbausteine) */
.b-kv {display:flex;flex-direction:column}
/* Die Beschriftungsspalte darf schrumpfen. Mit festen 150px bleiben in
   einem 243px breiten Panel 49px für den Wert; ein Chip mit nowrap ist
   110px breit und schiebt dann das ganze Dokument nach rechts. Gemessen
   bei 1024px in „Zugänge und Rechte". minmax(0,150px) allein reicht
   nicht: das Raster gibt der zweiten Spur nur den Rest und zwingt die
   erste nicht zum Schrumpfen. Erst min-content als Untergrenze der
   Wertspalte dreht das um — ein Chip mit nowrap bekommt dann seinen
   Platz, und die Beschriftung weicht. */
.b-kv .row {display:grid;grid-template-columns:minmax(0,150px) minmax(min-content,1fr);gap:14px;padding:8px 0;border-bottom:1px solid var(--c-line);font-size:12.5px;line-height:1.55}
.b-kv .row:last-child {border-bottom:0}
.b-kv .k {font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink-3);padding-top:2px}
.b-kv .v {color:var(--c-ink)}
/* Hierarchie-Ketten */
.b-chain {list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.b-chain li {display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--c-line);font-size:12px}
.b-chain li:last-child {border-bottom:0}
.b-chain .lnk {display:inline-flex;align-items:center;gap:6px;color:var(--c-ink)}
.b-chain .lnk i {width:6px;height:6px;border-radius:50%;background:var(--st-ok-fill);flex-shrink:0}
.b-chain .lnk.off {color:var(--st-bad)}
.b-chain .lnk.off i {background:var(--st-bad-fill)}
.b-chain .ar {color:var(--c-ink-3);display:inline-flex}
.b-chain .ar svg {width:11px;height:11px}
/* Die Rahmenhoehe kommt aus der Seitenleiste. Ist ein Panel kuerzer,
   blieb die Fusszeile mitten im Rahmen haengen — .b-main ist eine
   Flex-Spalte, margin-top:auto schiebt das letzte Kind nach unten. */
.b-foot {margin-top:auto}
.vs-h {display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.vs-h a:hover {text-decoration:underline}
.vs-n {display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.vs-n b.ok {background:#DFF0E4;color:#1C5730}
.vs-n b.mv {background:#E2EAF6;color:#1B3E70}
.vs-n b.op {background:#F6E7D8;color:#6E3D10}
.vs ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.vs li i {font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;width:16px;flex-shrink:0;text-align:center}
.vs li.ok i {color:#2E7D4F}
.vs li.mv i {color:#2B62B8}
.vs li.op i {color:#B4761C}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .vs-n b.ok{background:#183524;color:#8FD3A6}
  :root:not([data-theme="light"]) .vs-n b.mv{background:#16233A;color:#9CC0F0}
  :root:not([data-theme="light"]) .vs-n b.op{background:#33260F;color:#E0B274}
}
:root[data-theme="dark"] .vs-n b.ok {background:#183524;color:#8FD3A6}
:root[data-theme="dark"] .vs-n b.mv {background:#16233A;color:#9CC0F0}
:root[data-theme="dark"] .vs-n b.op {background:#33260F;color:#E0B274}
/* Pferderennen (Wettkampftool ab drei Teams) */
.b-race {display:flex;flex-direction:column;gap:1px;background:var(--c-line);border:1px solid var(--c-line);border-radius:8px;overflow:hidden}
.b-race .rw {display:grid;grid-template-columns:112px repeat(11,minmax(0,1fr)) 96px;background:var(--c-surface);align-items:center}
.b-race .rw.hd {background:var(--c-surface-2)}
.b-race .nm {padding:7px 10px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-race .st {height:30px;display:grid;place-items:center;border-left:1px solid var(--c-line);font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--c-ink-3)}
.b-race .rw.hd .st {height:24px}
.b-race .rw:not(.hd) .st.on {background:var(--st-ok-bg)}
.b-race .st svg {width:13px;height:13px;color:var(--st-ok)}
.b-race .pt {padding:7px 10px;border-left:1px solid var(--c-line);font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--c-ink-3);text-align:right;white-space:nowrap}
.b-race .pt b {font-size:12.5px;color:var(--c-ink)}
.b-race .rf {grid-column:1/-1;background:var(--c-surface-2);padding:7px 11px;font-size:11px;color:var(--c-ink-3)}
.fn-row .lo {font-family:"IBM Plex Mono",monospace;font-size:11px}
@media (max-width:720px){.fn-row{grid-template-columns:minmax(0,1fr);gap:3px}.fn-row.h{display:none}}

/* ── Tablet: bis 1023px ──────────────────────────────────────────── */
@media (max-width:1023px){
.b-shell {grid-template-columns:64px minmax(0,1fr)}
.b-rt {justify-content:center;padding:14px 0 12px}
.b-rt b, .b-rt .env, .b-grp>span, .b-search kbd, .b-search .lbl, .b-nav a .lbl, .b-nav a .ct, .b-ru .t, .b-ru button {display:none}
.b-search {margin:0 auto 12px;width:40px;height:40px;padding:0;gap:0;
  justify-content:center;border-radius:8px;}
.b-search svg {width:16px;height:16px}
.b-nav {padding:0 10px 12px}
.b-nav a {justify-content:center;padding:9px 0;position:relative}
.b-nav a .dot {position:absolute;top:7px;right:9px;margin:0}
.b-grp {margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--c-rail-line)}
.b-grp:last-child {border-bottom:0}
.b-ru {justify-content:center;padding:11px 0}
.g4 {grid-template-columns:repeat(2,minmax(0,1fr))}
.g6 {grid-template-columns:repeat(3,minmax(0,1fr))}
.g3, .g21, .g12 {grid-template-columns:minmax(0,1fr)}
.b-sm {grid-template-columns:repeat(2,minmax(0,1fr))}
.lg {grid-template-columns:minmax(0,1fr) 420px;min-height:560px}
.lg-form {padding:34px 32px}
.at-tiles {grid-template-columns:repeat(3,minmax(0,1fr))}
.b-form, .b-drop {grid-template-columns:repeat(2,minmax(0,1fr))}
.b-vid {grid-template-columns:repeat(2,minmax(0,1fr))}
.b-ph {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.b-ph::-webkit-scrollbar {height:0}
.b-seg {flex-shrink:0}
.b-ph .r {flex-shrink:0}
.b-fils {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.b-fils::-webkit-scrollbar {height:0}
.b-drop, .b-opts {grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Handy: bis 767px ────────────────────────────────────────────── */
@media (max-width:767px){
.b-shell {grid-template-columns:1fr}
.b-rail {display:none}
.b-crumb {display:none}
.b-body {padding:12px 14px 18px}
.ph-status {display:flex}
.ph-top {display:flex}
.b-top {display:none}
.ph-chips {display:flex}
.ph-tabs {display:grid}
.ph-safe {display:block}
.b-ticker {padding:7px 14px}
.g4 {grid-template-columns:repeat(2,minmax(0,1fr))}
.g6 {grid-template-columns:repeat(2,minmax(0,1fr))}
.g3, .g21, .g12, .g11 {grid-template-columns:minmax(0,1fr)}
.b-kpi .v b {font-size:19px}
.b-kpi .foot .sp {display:none}
.b-kpi .lab {min-height:3.4em;font-size:10px;letter-spacing:.03em;overflow-wrap:anywhere}
.b-kpi .foot .ago {font-size:11px}
.b-sm {grid-template-columns:minmax(0,1fr)}
.b-t {min-width:600px}
.b-t th:first-child, .b-t td:first-child {position:sticky;left:0;z-index:2;min-width:146px;background:var(--c-surface);box-shadow:1px 0 0 var(--c-line)}
.b-t th:first-child {background:var(--c-surface-2);z-index:3}
.b-t tbody tr:hover {background:transparent}
.ph-hint {display:flex}
.otp {gap:6px}
.otp>i {width:100%;height:48px;font-size:19px}
.lg {grid-template-columns:1fr;min-height:0}
.lg-side {padding:22px 20px 24px}
.lg-side h2 {font-size:21px;margin-top:20px;max-width:24ch}
.lg-stat {margin-top:18px}
.lg-side .meta {display:none}
.lg-form {padding:24px 20px 30px}
.at-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}
.b-foot {display:none}
.b-form, .b-drop, .at-tiles {grid-template-columns:minmax(0,1fr)}
.b-vid {grid-template-columns:minmax(0,1fr)}
.b-opts, .b-cd {grid-template-columns:repeat(2,minmax(0,1fr))}
.b-ph {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.b-ph::-webkit-scrollbar {height:0}
.b-seg {flex-shrink:0}
.b-ph .r {flex-shrink:0}
.b-ph {padding:9px 14px}
.b-fils {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.b-fils::-webkit-scrollbar {height:0}
.b-ph2 {padding:9px 14px}
.b-p .b-ph {flex-wrap:wrap;overflow:visible}
.b-cd {grid-template-columns:repeat(4,minmax(0,1fr))}
.b-score .t .p {font-size:30px}
.b-tt {min-width:640px}
.b-tt th.nm, .b-tt td.nm {min-width:132px}
.b-tt th.cv, .b-tt td.cv {left:132px}
.st-row {grid-template-columns:26px minmax(0,1fr)}
.b-fils .unit, .b-ph>.r .unit {display:none}
.b-kv .row {grid-template-columns:minmax(0,1fr);gap:3px}
.b-race {overflow-x:auto}
.b-race .rw {grid-template-columns:96px repeat(11,26px) 84px;min-width:560px}
}

/* ── Anpassungen fuer das echte Frontend ─────────────────────────────
   Im Entwurf sass die Anwendung in einem Rahmen mit fester Hoehe. Hier
   traegt die Schale die Bildschirmhoehe, die Leiste bleibt stehen und
   die Modulspalte scrollt. Sonst nichts. */
.b-shell{min-height:100dvh}
.b-rail{position:sticky;top:0;height:100dvh}
.b-main{min-height:100dvh}
.b-nav{overflow-y:auto;overflow-x:hidden}
.b-foot{margin-top:auto}
.b-body{flex:1}
.ph-tabs{padding-bottom:env(safe-area-inset-bottom)}
@media (max-width:767px){
  .b-main{min-height:auto}
  .b-shell{grid-template-columns:minmax(0,1fr)}
}
/* Die Einstellungen sind ein Link, kein Knopf — dieselbe Form. */
.b-ru a{margin-left:auto;color:var(--c-rail-ink-2);display:grid;place-items:center;width:28px;height:28px;border-radius:6px}
.b-ru a:hover{background:var(--c-rail-hover);color:var(--c-rail-ink)}
.b-ru a svg{width:15px;height:15px}
@media (max-width:1023px){.b-ru a{display:none}}
/* Im Entwurf stand die Einheit im Kopf als Inline-Stil — hier als Regel. */
.b-top .unit{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3)}
@media (max-width:1023px){.b-top .unit{display:none}}
/* Summenzeile im Tabellenkopf (OWE-Auswertung) und Leerzeile in der Tabelle */
.b-t th .sum{display:block;margin-top:2px;font-size:9.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--c-ink)}
.b-t td.tblempty{padding:32px 14px;text-align:center;color:var(--c-ink-3);white-space:normal}
/* Erste Spalte stehen lassen. Im Entwurf tat das nur die Handyregel; im
   Frontend brauchen die breiten Listen (Challenges, AzA) es auch am
   Schreibtisch. */
.b-t.stick th:first-child,.b-t.stick td:first-child{position:sticky;left:0;z-index:2;background:var(--c-surface);box-shadow:1px 0 0 var(--c-line)}
.b-t.stick th:first-child{background:var(--c-surface-2);z-index:3}
/* Hinweis rechts in der Filterleiste (Zeitraum, Stand) */
.b-fils .fils-note{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-3);white-space:nowrap}
@media (max-width:767px){.b-fils{overflow-x:auto;flex-wrap:nowrap}.b-fils .fils-note{display:none}}
/* Das Kästchen zeigt seinen Zustand. Im Entwurf war es ein Standbild. */
.cb input{position:absolute;width:1px;height:1px;opacity:0}
.cb input:checked+i{border-color:var(--c-accent);background:var(--c-accent)}
.cb input:checked+i::after{content:"";width:9px;height:5px;border-left:2px solid var(--c-accent-ink);border-bottom:2px solid var(--c-accent-ink);transform:rotate(-45deg) translateY(-1px)}
.cb input:focus-visible+i{outline:2px solid var(--c-accent);outline-offset:2px}

/* ── Zellbausteine als eigenständige Klassen ─────────────────────────
   Im Entwurf waren „gedämpft“ und „Delta“ Zustände einer Tabellenzelle
   (.b-t td.mut). utils/fmt.ts setzt sie als <span> in beliebige Zellen und
   Fließtexte — deshalb hier auch ohne Zellenbindung. */
.mut{color:var(--c-ink-3)}
.del-up{color:var(--st-ok);font-weight:600}
.del-dn{color:var(--st-bad);font-weight:600}
.sub2{display:block;font-size:10px;font-family:"IBM Plex Mono",monospace;color:var(--c-ink-3);margin-top:1px}

/* ── Dialoge über der Seite ──────────────────────────────────────────
   Im Entwurf war .dlgwrap eine Fläche in der Präsentationsseite; hier
   liegt der Dialog über der Anwendung. Die Maße des Dialogs selbst
   bleiben unverändert. */
.dlgwrap.fixed{position:fixed;inset:0;z-index:80;min-height:0;background:transparent;overflow-y:auto}
.dlgwrap.fixed .scrim{position:fixed}
.dlgwrap.fixed .dlg{margin:auto}
@media (max-width:767px){
  .dlgwrap.fixed{padding:14px;align-items:end}
  .dlg{max-width:100%}
  .dlg .acts{flex-direction:column-reverse}
  .dlg .acts .sub,.dlg .acts .ghostbtn{width:100%}
}

/* ── Fehlerseiten ────────────────────────────────────────────────────
   Eigene Schale: bei einem Fehler in der Anwendungsschale wäre die
   Fehlerseite sonst selbst betroffen. Bauteile sind die des Entwurfs. */
.errpage{min-height:100dvh;display:flex;flex-direction:column;background:var(--c-canvas)}
.err-top{padding:14px 18px;background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.err-top .bt{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--c-ink)}
.err-top .bt b{font-size:14.5px;font-weight:600}
.err-top .bt .env{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;padding:2px 6px;border-radius:4px;background:var(--c-tint);color:var(--c-ink-3)}
.err-main{flex:1;display:grid;place-items:center;padding:clamp(20px,5vw,56px) 18px}
.err-card{width:100%;max-width:620px}
.err-card .b-pb{padding:26px 26px 24px}
.err-code{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.err-code>span:first-child{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--c-ink-3)}
.err-card h1{font-size:21px;font-weight:600;letter-spacing:-.018em;line-height:1.2}
.err-card .lede{font-size:13.5px;color:var(--c-ink-2);margin-top:9px;line-height:1.6;max-width:58ch}
.err-card .b-note{margin-top:16px}
.err-card .b-note.warn{background:var(--st-warn-bg);border-color:var(--st-warn-fill)}
.err-card .b-note.bad{background:var(--st-bad-bg);border-color:var(--st-bad-fill)}
.err-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.err-toggle{margin-top:18px}
@media (max-width:767px){
  .err-card .b-pb{padding:18px 16px 16px}
  .err-code>span:first-child{font-size:34px}
  .err-acts .b-btn{flex:1 1 auto;justify-content:center}
}
/* Eine Nachrichtenzeile ist anklickbar (markiert als gelesen) — der Knopf
   füllt die Zeile, ohne ihre Gliederung zu ändern. */
.b-news .news-hit{display:block;width:100%;text-align:left}
.b-news .news-hit h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-news .news-hit:hover h4{color:var(--c-accent)}
/* Im Kopf der breiten Unteransicht sitzt rechts das Schließkreuz — die
   Steuerelemente halten Abstand, sonst liegt das Kreuz auf dem letzten
   Knopf. Im Entwurf stand dafür ein Inline-Stil an jeder Stelle. */
.dlg.plain .dhead .r{margin-right:36px}

/* ── Nachrichtenverlauf ──────────────────────────────────────────────
   Der Entwurf nennt den Dialog „Nachbearbeitung", zeichnet ihn aber
   nicht aus. Diese Bauteile sind deshalb neu — gebaut aus denselben
   Tokens und Maßen wie der übrige Satz. Die Seite des Absenders trägt
   die Ausrichtung, seine Rolle steht zusätzlich als Wort da: eine
   Systemnachricht darf nicht nur an der Farbe zu erkennen sein. */
.b-msg{display:flex;flex-direction:column;gap:12px}
.b-msg .m{display:grid;gap:5px;max-width:min(78%,560px)}
.b-msg .m.vp{margin-left:auto}
.b-msg .m .who{display:flex;align-items:baseline;gap:8px;font-size:11px;color:var(--c-ink-3);flex-wrap:wrap}
.b-msg .m .who b{font-size:12px;font-weight:600;color:var(--c-ink)}
.b-msg .m .who time{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.b-msg .m .bub{border:1px solid var(--c-line);border-radius:10px;background:var(--c-surface-2);padding:9px 12px;font-size:12.5px;line-height:1.55;color:var(--c-ink)}
.b-msg .m.vp .bub{background:var(--c-accent-soft);border-color:var(--c-accent-soft)}
.b-msg .m.sys{max-width:100%;margin:0 auto;text-align:center}
.b-msg .m.sys .bub{background:transparent;border-style:dashed;color:var(--c-ink-2);font-size:12px}
.b-msg .m .files{display:flex;flex-wrap:wrap;gap:6px}
.b-msg .m .files a{display:inline-flex;align-items:center;gap:5px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:2px 7px;border-radius:5px;background:var(--c-tint);color:var(--c-ink-2);text-decoration:none}
.b-msg .m .files a:hover{color:var(--c-accent)}
.b-msg .m .files svg{width:11px;height:11px}

/* Verfassen-Zeile unter dem Verlauf */
.b-compose{display:grid;gap:8px;border-top:1px solid var(--c-line);padding-top:12px;margin-top:14px}
.b-compose textarea{font:inherit;font-size:12.5px;padding:9px 11px;border:1px solid var(--c-line);border-radius:9px;background:var(--c-surface);color:var(--c-ink);resize:vertical;min-height:64px;width:100%}
.b-compose textarea::placeholder{color:var(--c-ink-3)}
.b-compose .r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.b-compose .r .sp{margin-left:auto}
/* Aktionsspalte: mehrere Symbolknöpfe in einer Zelle, dicht gesetzt */
.b-acts{display:inline-flex;gap:2px}
.b-acts .b-ib{width:26px;height:26px;border-radius:6px}
.b-acts .b-ib svg{width:14px;height:14px}
.b-t td .b-lnk svg{margin-right:4px}

/* ── Laufband: die Bewegung ──────────────────────────────────────────
   Der Entwurf nennt das Band einen „animierten News-Ticker", zeigt im
   Standbild aber nur die Verblendung am rechten Rand. Hier läuft es:
   die Spur steht doppelt im Markup und wird um eine Kopienbreite
   verschoben, deshalb ist der Übergang nahtlos. Die Maske bleibt, damit
   der Text am Rand nicht abgeschnitten wirkt. */
.b-ticker .rail{
  min-width:0;flex:1;overflow:hidden;
  mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent 100%);
}
.b-ticker .rail .track{
  mask-image:none;-webkit-mask-image:none;overflow:visible;
  width:max-content;animation:b-ticker-run 60s linear infinite;
}
.b-ticker:hover .rail .track{animation-play-state:paused}
@keyframes b-ticker-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .b-ticker .rail{overflow-x:auto}
  .b-ticker .rail .track{animation:none}
}

/* ── Eventliste im Dialog ────────────────────────────────────────────
   Drei Spalten: wann, was, Rückmeldung. Auf schmaler Breite bricht sie
   auf eine Spalte, damit der Text nicht in eine Rinne läuft. */
.b-evlist{display:flex;flex-direction:column;margin:0;padding:0}
.b-evlist li{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:14px;padding:12px 0;border-bottom:1px solid var(--c-line);list-style:none;align-items:start}
.b-evlist li:last-child{border-bottom:0}
.b-evlist .when b{display:block;font-size:12.5px;font-weight:600}
.b-evlist .when span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3);margin-top:2px}
.b-evlist .what b{display:block;font-size:13px;font-weight:600}
.b-evlist .what>span{display:block;font-size:12px;color:var(--c-ink-2);line-height:1.5;margin-top:3px}
.b-evlist .what .meta{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3);margin-top:5px}
.b-evlist .act{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:767px){
  .b-evlist li{grid-template-columns:minmax(0,1fr);gap:6px}
  .b-evlist .act{justify-content:flex-start}
}

/* ── Pflichtzeichen und abgeschaltete Bedienelemente ─────────────────
   Beides fehlte: das rote Sternchen galt nur innerhalb von `.b-form`,
   und ein abgeschalteter Knopf sah aus wie ein bedienbarer. Ein Knopf,
   der nichts tut und trotzdem wie ein Knopf aussieht, ist der Fehler,
   den wir im Bestand an zwölf Stellen gefunden haben. */
.rq{color:var(--st-bad)}

:where(button, a, input, select, textarea)[disabled],
:where(button, a)[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;
}
.b-seg button[disabled],.b-tg button[disabled]{color:var(--c-ink-3);background:transparent}
.b-seg button[disabled]:hover,.b-tg button[disabled]:hover{color:var(--c-ink-3)}
.b-btn[disabled]:hover,.sub[disabled]:hover{filter:none}
.ghostbtn[disabled]:hover,.b-btn.ghost[disabled]:hover{border-color:var(--c-line);color:var(--c-ink-2)}
.b-ib[disabled]:hover{background:transparent;color:var(--c-ink-3)}
.inp:has(input[disabled]){background:var(--c-surface-2)}

/* Rangliste: dieselbe Form wie die Fortschrittsreihe, aber enger und mit
   grünem Wert — im Entwurf `.b-rank`. */
.b-prog.rank{gap:11px}
.b-prog.rank .t{font-size:12.5px}
.b-prog.rank .t b{color:var(--st-ok)}

/* ── Ziel-Bullets auf schmaler Breite ────────────────────────────────
   Auf Handybreite steht die `.g4` zweispaltig, je Kachel bleiben rund
   147px. „1,24 Mio €" und der Zielwert daneben brauchen mehr — ohne
   Umbruch läuft der Zielwert aus der Kachel. Und ein umbrechendes
   Prozentzeichen macht eine Kachel eine Zeile höher als ihre Nachbarin,
   dann stehen die Balken versetzt. Beides gilt für jedes Bullet im
   System, nicht nur für die Leistungsfähigkeit. */
.b-bul .v{flex-wrap:wrap}
.b-bul .h .pct{white-space:nowrap}

/* ── Nutzermenü ──────────────────────────────────────────────────────
   Ein Ziel, ein Weg: das Nutzerzeichen am Fuß der Leiste (auf dem Handy
   in der Kopfzeile) öffnet dieses Menü. Es liegt über allem, schließt
   beim Klick daneben und mit Escape. */
.um-wrap{position:fixed;inset:0;z-index:70}
.um-scrim{position:absolute;inset:0;width:100%;height:100%;background:transparent;cursor:default}
.um{
  position:absolute;left:12px;bottom:64px;width:250px;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:10px;
  box-shadow:var(--sh-lift);padding:6px;display:flex;flex-direction:column;gap:1px;
}
.um-id{display:flex;align-items:center;gap:10px;padding:9px 9px 11px;border-bottom:1px solid var(--c-line);margin-bottom:5px}
.um-id .t{min-width:0;line-height:1.35}
.um-id .t b{display:block;font-size:12.5px;font-weight:600}
.um-id .t span{display:block;font-size:10.5px;color:var(--c-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  font-size:12.5px;color:var(--c-ink-2);text-decoration:none;transition:background .18s,color .18s;
}
.um-item:hover{background:var(--c-tint);color:var(--c-ink)}
.um-item svg{width:14px;height:14px;color:var(--c-ink-3);flex-shrink:0}
.um-item:hover svg{color:var(--c-accent)}
@media (max-width:1023px){.um{left:8px;width:230px}}
@media (max-width:767px){.um{left:auto;right:12px;top:56px;bottom:auto}}

/* Der Fuß der Leiste ist jetzt ein Knopf, kein Textblock mit Zahnrad. */
.b-ru.as-button{width:100%;text-align:left;transition:background .18s}
.b-ru.as-button:hover{background:var(--c-rail-hover)}
.b-ru.as-button .chev{margin-left:auto;color:var(--c-rail-ink-2);flex-shrink:0}
.b-ru.as-button .chev svg{width:14px;height:14px}
@media (max-width:1023px){.b-ru.as-button .chev{display:none}}

/* ── Zwei Nachbesserungen am Satz ────────────────────────────────────
   1. Der Dialog nimmt beim Öffnen den Fokus (tabindex="-1"), damit
      Escape und Tab sofort greifen. Das ist ein programmatischer Fokus,
      kein getippter — ein blauer Rahmen um den ganzen Dialog sagt dem
      Nutzer nichts. Die Bedienelemente im Dialog behalten ihren.
   2. Bei vielen Ansichten brachen die Beschriftungen im Umschalter
      zweizeilig um. Die Reiterleiste scrollt stattdessen seitlich. */
.dlg:focus{outline:none}
.dlg:focus-visible{outline:none}
.b-seg button{white-space:nowrap}
/* Ein Umschalter ist immer eine waagerechte Leiste. Passt sie nicht,
   scrollt sie — sie darf niemals ihren Rahmen aufdrücken. Auf
   Handybreite hat das die Challenges-Karte 272px breiter gemacht als
   den Bildschirm. */
.b-seg{max-width:100%;overflow-x:auto}
/* Der Panelkopf bricht um (flex-wrap), und ein umgebrochenes Kind nimmt
   sonst seine Inhaltsbreite — bei fünf Reitern werden daraus 633px in
   einem 390px breiten Bildschirm. max-width bindet jedes Kind an den
   Kopf, min-width:0 erlaubt ihm zu schrumpfen. */
.b-ph{min-width:0}
.b-ph>*{max-width:100%;min-width:0}

/* Das Ankreuzfeld ist per .vh versteckt; ohne diese Regel sieht man beim
   Tabben nicht, wo man steht. */
.cb input:focus-visible+i,.cb:focus-within>i{outline:2px solid var(--c-accent);outline-offset:2px}

/* Dieselbe Falle wie seinerzeit bei `.b-body`: ein Raster ohne
   Spaltenangabe bekommt eine implizite `auto`-Spalte, und die wird so
   breit wie ihr breitester Inhalt. Eine lange Beschriftung in einer
   Fortschritts- oder Ranglistenzeile drückt damit die ganze Seite auf. */
.b-prog .row,.b-rank .row{grid-template-columns:minmax(0,1fr)}

/* Zweispaltige Fassung des Formularrasters — der Entwurf kennt nur die
   dreispaltige, manche Formulare brauchen breitere Felder. */
.b-form.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:767px){.b-form.c2{grid-template-columns:minmax(0,1fr)}}
/* Nur-Lese-Felder heben sich ab, ohne wie gesperrt auszusehen. */
.b-form input[readonly]{color:var(--c-ink-3);background:var(--c-surface-2)}

/* Der Entwurf zeichnet Balken in zwei Reihenfarben; die kleinen Vielfachen
   brauchen alle vier. Dieselben geprüften Töne, gleiche Benennung. */
.chart .bar3{fill:var(--s3)}
.chart .bar4{fill:var(--s4)}
/* Einheit neben einer Kennzahl in den kleinen Vielfachen */
.b-sm .now .u{font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;font-size:10.5px;font-weight:400;color:var(--c-ink-3)}
/* Gedämpfte Säule — im Entwurf hebt „bester eigener Monat" genau eine
   hervor, die übrigen treten zurück. */
.chart .bar1.mut,.chart .bar2.mut{opacity:.3}

/* ── Modulsuche (⌘K) ─────────────────────────────────────────────────
   Der Entwurf zeigt den Knopf in der Leiste, nicht die Fläche dahinter.
   Maße und Formen folgen deshalb dem Dialog. */
.cmdk-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;background:var(--c-scrim)}
.cmdk{width:100%;max-width:520px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--sh-dlg);overflow:hidden}
.cmdk-feld{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--c-line)}
.cmdk-feld svg{width:16px;height:16px;color:var(--c-ink-3);flex-shrink:0}
.cmdk-feld input{flex:1;min-width:0;border:0;background:transparent;color:var(--c-ink);font:inherit;font-size:13.5px;outline:none}
.cmdk-feld input::placeholder{color:var(--c-ink-3)}
.cmdk-feld kbd{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--c-ink-3);border:1px solid var(--c-line);border-radius:4px;padding:1px 5px}
.cmdk-liste{list-style:none;margin:0;padding:6px 0;max-height:52vh;overflow-y:auto}
.cmdk-liste button{display:flex;width:100%;align-items:center;gap:10px;padding:8px 15px;font-size:13px;color:var(--c-ink-2);transition:background .15s,color .15s}
.cmdk-liste button:hover{background:var(--c-tint)}
.cmdk-liste button.on{background:var(--c-accent-soft);color:var(--c-accent)}
.cmdk-liste button svg{width:15px;height:15px;flex-shrink:0}
.cmdk-liste .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cmdk-liste .wo{flex-shrink:0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--c-ink-3)}
.cmdk-leer{padding:24px 15px;text-align:center;font-size:12.5px;color:var(--c-ink-3)}
/* Die Adresse unter dem Modulnamen und die Marken darunter */
.b-p.act .b-pb .fig{font-size:10.5px;color:var(--c-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-p.act .marken{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
/* Eine Zahl in der Liste, die selbst der Einstieg ist — im Bestand steht
   dort nur ein Abzeichen ohne Ziel. */
.b-sl .n.zahl{color:var(--c-accent)}
.b-sl .n.zahl:hover{text-decoration:underline}

/* ── Textfarben in Zellen und Fließtext ──────────────────────────────
   Der Entwurf färbt Text nur über Bauteile (.chip, .pill, .del-up).
   In Tabellenzellen, die als Zeichenkette entstehen, braucht es
   trotzdem einen Namen — diese drei sind er. Sie färben nur, sie
   tragen keine Bedeutung allein: daneben steht immer ein Wort. */
.t-ok{color:var(--st-ok)}
.t-warn{color:var(--st-warn)}
.t-bad{color:var(--st-bad)}
/* Eingabe- und Auswahlfelder direkt in einer Tabellenzelle — dieselbe
   Form wie im Formularraster, nur ohne dessen Spaltenraster. */
.b-t .zf{font:inherit;font-size:11.5px;padding:5px 8px;border:1px solid var(--c-line);border-radius:7px;background:var(--c-surface);color:var(--c-ink);min-width:0}
.b-t .zf::placeholder{color:var(--c-ink-3)}
/* „– ODER –“ zwischen zwei gleichrangigen Wegen (.b-pick im Entwurf) */
.or{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--c-ink-3);letter-spacing:.06em}
/* Verbindungslinie in einem Netzdiagramm — der Entwurf hat Linien für
   Reihen (.ln1) und Raster (.grid), aber keine für Kanten. */
.chart .link{fill:none;stroke:var(--c-line);stroke-width:.7;opacity:.85}

/* Der Prozentsatz über einem Ziel-Bullet trägt die Zustandsfarbe. Im
   Entwurf steht dort ein Inline-Stil; als Klasse ist es dasselbe. */
.b-bul .h .pct.ok{color:var(--st-ok)}
.b-bul .h .pct.warn{color:var(--st-warn)}
.b-bul .h .pct.bad{color:var(--st-bad)}