/* Hilfsklassen — Ersatz fuer Inline-Stile in den Panels (Schnitt H, 16.09.2026)
   Teil der Kaskade (AK 60). Vorher standen 188 `style="…"` in `public/js`; was einen
   festen Wert hatte, ist jetzt eine Klasse hier. Dynamische Werte (Fortschrittsbreite,
   Segmentbreite) bleiben Inline — die Liste steht in `tests/optik-inline.test.js`. */

.u-flex { display: flex; }
.u-flex-mitte { display: flex; align-items: center; gap: var(--ab-2); }
.u-flex-oben { display: flex; align-items: flex-start; gap: var(--ab-alt-10); }
.u-flex-spalte { display: flex; flex-direction: column; gap: var(--ab-2); }
.u-flex1 { flex: 1; min-width: 0; }
.u-luecke-8 { gap: var(--ab-2); }
.u-luecke-12 { gap: var(--ab-3); }
.u-umbruch { flex-wrap: wrap; }
.u-nowrap { white-space: nowrap; }
.u-ohne-rand { margin: 0; }
.u-unten-8 { margin-bottom: var(--ab-2); }
.u-unten-12 { margin-bottom: var(--ab-3); }
.u-unten-16 { margin-bottom: var(--ab-4); }
.u-oben-8 { margin-top: var(--ab-2); }
.u-oben-12 { margin-top: var(--ab-3); }
.u-oben-16 { margin-top: var(--ab-4); }
.u-innen-8-12 { padding: var(--ab-2) var(--ab-3); }
.u-innen-16 { padding: var(--ab-4); }
.u-breite-300 { max-width: 300px; }
.u-breite-voll { width: 100%; }
.u-klein { font-size: var(--gr-klein); color: var(--text-muted); }
.u-leise { color: var(--text-muted); }
.u-mini { font-size: var(--gr-alt-13); color: var(--text-muted); }
.u-fett { font-weight: 600; }
.u-rot { color: var(--danger-text); }
.u-gruen { color: var(--success-text); }
.u-orange { color: var(--warning-text); }
.u-blau { color: var(--info); }
.u-vorformatiert { white-space: pre-wrap; font-size: var(--gr-alt-15); }
.u-rechts { text-align: right; }
.u-zeiger { cursor: pointer; }
.u-versteckt { display: none; }

/* Fortschrittsbalken (Auftraege, Baustellen) — die Breite bleibt Inline (dynamisch) */
.fortschritt { height: 8px; background: var(--bg-surface); border-radius: 4px; overflow: hidden; }
.fortschritt-balken { height: 100%; background: var(--text-primary); border-radius: 4px; }
.fortschritt-balken.success { background: var(--success); }
.fortschritt-balken.warning { background: var(--warning); }
.fortschritt-balken.info { background: var(--info); }
.fortschritt-zeile { display: flex; justify-content: space-between; font-size: var(--gr-alt-13); color: var(--text-muted); margin-bottom: var(--ab-1); }

/* Die KI-Leiste der Uebersicht — ein stiller Bereich, keine Signalfarbe */
.ki-leiste { margin: var(--ab-2) 0 var(--ab-4); }
.ki-titel { font-size: var(--gr-klein); font-weight: 600; color: var(--text-muted); margin-bottom: var(--ab-1); }
.ki-eintrag { display: flex; align-items: flex-start; gap: var(--ab-alt-10); padding: var(--ab-alt-10) var(--ab-alt-14); margin-bottom: var(--ab-2); border-radius: var(--radius-sm); border: 1px solid var(--border); border-left-width: 4px; background: var(--bg-card); }
.ki-eintrag.ki-warnung { border-left-color: var(--warning); }
.ki-eintrag.ki-info { border-left-color: var(--info); }
.ki-eintrag.ki-erfolg { border-left-color: var(--success); }
.ki-eintrag-titel { font-weight: 600; color: var(--text-primary); }
.ki-eintrag-text { font-size: var(--gr-klein); color: var(--text-muted); }
.ki-eintrag-text.hinweis-stummel { font-style: italic; }

/* Kennzahlenzeile der Uebersicht (die drei W2-Zahlen) — schmaler als die Befundreihe */
.kpi-grid-schmal .kpi-card { padding: var(--ab-alt-10) var(--ab-4); display: flex; align-items: baseline; gap: var(--ab-alt-10); }
.kpi-grid-schmal .kpi-value { font-size: var(--gr-titel); margin: 0; }
.kpi-grid-schmal .kpi-label { font-size: var(--gr-klein); font-weight: 500; color: var(--text-muted); }

/* Diagrammflaeche unter zwei Werten: ein Satz statt eines Rings mit einem Segment (H-7) */
.diagramm-satz { font-size: var(--gr-text); color: var(--text-secondary); padding: var(--ab-2) 0; }

/* Tabellen breiter als der Schirm laufen in ihrem eigenen Rahmen (nie die Seite) */
.u-tabelle-scroll { overflow-x: auto; }
.mm-ausgemustert td { color: var(--text-muted); }

/* Erste Schritte (Uebersicht, Leitung) — vier Zeilen, aus dem Bestand gezaehlt */
.erste-schritte-liste { list-style: none; display: flex; flex-direction: column; gap: var(--ab-2); }
.erste-schritte-zeile { display: flex; align-items: center; gap: var(--ab-3); flex-wrap: wrap; min-height: 44px; }
.erste-schritte-nr { flex: 0 0 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--text-primary); font-size: var(--gr-alt-15); }
.erste-schritte-zeile.erledigt .erste-schritte-nr { background: var(--success-text); border-color: var(--success-text); color: #ffffff; }
.erste-schritte-text { flex: 1 1 240px; }
.erste-schritte-zeile.erledigt .erste-schritte-text { color: var(--text-muted); text-decoration: line-through; }
.erste-schritte-haken { color: var(--success-text); font-weight: 600; }

/* Rechtstexte — Fuss der Anmeldung, des Seitenrands und des Bogens */
.rechts-fuss { margin-top: auto; padding: var(--ab-4) var(--ab-3) 0; font-size: var(--gr-alt-13); color: var(--text-muted); }
.rechts-fuss a { color: var(--text-muted); min-height: 44px; display: inline-flex; align-items: center; }
.login-box .rechts-fuss { padding: var(--ab-4) 0 0; text-align: center; }

/* Lizenzhinweis unter dem Kopf (Schnitt J): Probezeit endet, abgelaufen, Verzug — nie ein Zaun, ein Satz mit Weg */
.lizenz-hinweis { display: flex; align-items: center; gap: var(--ab-3); flex-wrap: wrap; padding: var(--ab-alt-10) var(--ab-alt-20); font-size: var(--gr-alt-15); border-bottom: 1px solid var(--border); background: var(--bg-card); }
.lizenz-hinweis[hidden] { display: none; }
.lizenz-hinweis-gelb { border-left: 6px solid var(--accent); }
.lizenz-hinweis-rot { border-left: 6px solid var(--danger); color: var(--danger-text); font-weight: 600; }
.u-breite-klein { width: 90px; display: inline-block; }

/* Netzzustand (Schnitt W7-a): „offline" faellt in der Kopfzeile auf, „online" bleibt unauffaellig */
.header-badge-offline { background: var(--danger-text); color: #ffffff; }