Erreichbarkeits-Balken auf der Server-Seite

Ein Strich pro Stunde ueber 7 Tage, gruen/gelb/rot je nachdem, ob in der Stunde
alle, ein Teil oder keine Messung erreichbar war.

Die Daten lagen laengst da: player_history haelt 7 Tage vor, die API schnitt
aber auf 24 Stunden ab. Statt Rohdaten (ueber eine Woche rund 5000 Zeilen pro
Server) fasst uptimeBuckets() in SQL stundenweise zusammen — hoechstens 168
Zeilen.

- Stunden ohne Messung werden als Luecke gezeichnet, nicht als "online". Sonst
  saehe eine Bot-Auszeit aus wie ein einwandfrei laufender Server.
- Die alte 24h-Uptime-Zahl neben dem Peak ist raus: zweimal dieselbe Groesse
  ueber verschiedene Zeitraeume verwirrt nur.
- Tooltip zeigt Ortszeit. Die Eimer werden in UTC abgeglichen (SQLite rechnet
  so), angezeigt wird lokal — sonst stuende dort eine Stunde, die niemand
  wiedererkennt.

Zwei Fehler beim Bauen gefunden und behoben:
- .srv-card ist ein Grid-Item mit min-width:auto und wuchs durch die 168
  Striche auf 724 statt 335 px, die Karte sprengte auf dem Handy das Raster.
- "Uhr" stand hart deutsch im Tooltip.

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

frontend/src/style.css

@@ -1736,6 +1736,40 @@ label.toggle {
 .srv-checked { font-family: var(--mono); font-size: .62rem; color: var(--muted2); margin-top: .8rem; }
 
 /* ── AUDIT-LOG ─────────────────────────────────────── */
+/* ── 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
+   Matsch zu verschmelzen. */
+/* Ohne das sprengt der Balken auf schmalen Schirmen die ganze Karte: Grid-Items
+   haben min-width:auto und schrumpfen nicht unter ihren Inhalt — 168 Striche à
+   3 px sind rund 840 px, und die Karte wuchs auf 724 statt 335 px. */
+.srv-card { min-width: 0; }
+.up-track-wrap { margin-top: .9rem; min-width: 0; }
+.up-track {
+    display: flex; gap: 1px; align-items: stretch;
+    height: 30px; overflow-x: auto; overflow-y: hidden;
+    scrollbar-width: none;
+}
+.up-track::-webkit-scrollbar { display: none; }
+.up-tick {
+    flex: 1 0 3px; min-width: 3px; border-radius: 1px;
+    background: var(--success, #3ba55d);
+    transition: transform .1s ease;
+}
+.up-tick:hover { transform: scaleY(1.15); }
+.up-tick.teil { background: var(--neon); }
+.up-tick.aus { background: #f23f43; }
+/* Keine Messung ist kein „läuft" — deshalb sichtbar leer statt grün */
+.up-tick.leer { background: rgba(255, 255, 255, .07); }
+
+.up-track-foot {
+    display: flex; justify-content: space-between; align-items: baseline;
+    font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
+    color: var(--muted2); margin-top: .45rem;
+}
+.up-track-foot .up-good { color: var(--success, #3ba55d); }
+.up-track-foot .up-bad { color: #f23f43; }
+
 /* ── SPRACHUMSCHALTER ──────────────────────────────── */
 .lang-switch {
     display: inline-flex;