Status-Seite wird ein Dashboard

Statt sieben flacher Kacheln jetzt: Kopfzeile mit Bot-Identitaet und Laufzeit,
vier Kennzahlen mit Nebenzeile, Aktivitaetsverlauf und Modul-Zustand pro
Bereich. Die Bereichs-Zeilen sind klickbar und springen in den Modul-Ueberblick.

Fast alles war schon da und musste nur zusammengestellt werden. Neu am Server
sind zwei Zeitstempel in archiveStats(): lastDevlog und lastCommit. Reine
Zaehler sagen nicht, ob noch etwas passiert — "142 Devlogs, zuletzt vor zwei
Tagen" schon.

Der Mitglieder-Zuwachs kommt aus joins/leaves der Tagesdaten, der Verlauf
fuellt fehlende Tage mit 0 statt sie wegzulassen, sonst staucht er sich.

Beim Bauen gefunden: die Spalte in commits heisst committed_at, nicht ts. Da
better-sqlite3 beim Vorbereiten sofort auswertet, waere der Bot beim Start
abgestuerzt. Beide neuen Abfragen gegen das echte Schema geprueft.

Dazu ein Dev-Server-Eintrag in launch.json: der Build ist minifiziert, im
Fehlerfall steht dort nur "at bp". Mit dem Dev-Server kommt der Komponenten-
und Zeilenverweis — genau das hat den Weg zur Ursache abgekuerzt.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/style.css

@@ -1736,6 +1736,85 @@ label.toggle {
 .srv-checked { font-family: var(--mono); font-size: .62rem; color: var(--muted2); margin-top: .8rem; }
 
 /* ── AUDIT-LOG ─────────────────────────────────────── */
+/* ── STATUS-DASHBOARD ──────────────────────────────── */
+.dash-head {
+    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
+    margin-bottom: 1.2rem;
+}
+.dash-avatar {
+    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
+    border: 1px solid color-mix(in srgb, var(--neon) 35%, transparent);
+}
+.dash-avatar.leer {
+    display: grid; place-items: center;
+    background: rgba(255, 255, 255, .05); color: var(--muted);
+}
+.dash-ident { display: flex; flex-direction: column; gap: .35rem; }
+.dash-name { font-weight: 700; font-size: 1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
+.dash-tag { font-family: var(--mono); font-size: .62rem; color: var(--muted2); letter-spacing: .06em; }
+.dash-pill {
+    display: inline-flex; align-items: center; gap: .4rem; width: fit-content;
+    font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
+    padding: .16rem .5rem; border-radius: 999px;
+    border: 1px solid rgba(59, 165, 93, .45); color: #3ba55d;
+}
+.dash-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
+.dash-uptime {
+    margin-left: auto; font-family: var(--mono);
+    font-size: .64rem; letter-spacing: .08em; color: var(--muted2);
+}
+
+.dash-kpis { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); }
+.dash-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; min-width: 0; }
+.dash-v { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
+.dash-of { font-size: .85rem; color: var(--muted2); font-weight: 400; }
+.dash-l {
+    font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
+    text-transform: uppercase; color: var(--muted);
+}
+/* Nebenzeile: min-height, damit Karten ohne Wert nicht kürzer werden */
+.dash-t {
+    font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
+    color: var(--muted2); margin-top: .35rem; min-height: 1em;
+}
+.dash-t.gut { color: #3ba55d; }
+.dash-t.warn { color: var(--neon2); }
+
+.dash-spark {
+    display: flex; align-items: flex-end; gap: 2px;
+    height: 70px; margin-top: 1rem;
+}
+.dash-bar {
+    flex: 1; min-width: 2px; border-radius: 2px 2px 0 0;
+    background: linear-gradient(180deg, var(--neon), color-mix(in srgb, var(--neon) 15%, transparent));
+}
+.dash-bar:hover { background: var(--neon2); }
+
+.dash-groups { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
+.dash-group {
+    display: flex; align-items: center; gap: .8rem;
+    background: none; border: none; padding: .25rem 0; cursor: pointer;
+    font-size: .82rem; color: var(--muted); text-align: left;
+}
+.dash-group:hover { color: var(--text); }
+.dash-group-name { flex: 0 0 12rem; }
+.dash-group-bar {
+    flex: 1; height: 5px; border-radius: 3px;
+    background: rgba(255, 255, 255, .07); overflow: hidden;
+}
+.dash-group-bar i { display: block; height: 100%; background: var(--neon); }
+.dash-group-bar.warn i { background: var(--neon2); }
+.dash-group-n {
+    font-family: var(--mono); font-size: .64rem; color: var(--muted2);
+    flex: 0 0 3rem; text-align: right;
+}
+
+@media (max-width: 820px) {
+    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
+    .dash-uptime { margin-left: 0; width: 100%; }
+    .dash-group-name { flex-basis: 7rem; }
+}
+
 /* ── ERREICHBARKEITS-BALKEN ────────────────────────── */
 /* Ein Strich pro Stunde, 168 Stück. Auf schmalen Schirmen werden die Striche
    dünner als ein Pixel — deshalb scrollt der Balken dort lieber, statt zu