Das Protokoll steht jetzt da, statt sich holen zu lassen

Vorher: eine Liste von Tagen, je Tag drei Knöpfe, und erst nach „Ansehen"
stand irgendwo Text. Wer wissen wollte, was gerade schiefgeht, brauchte
drei Handgriffe für eine Antwort, die auf der ersten Seite hätte stehen
können.

Jetzt ist „Protokolle" eine Liste von Ereignissen, wie man sie aus Home
Assistant kennt: der heutige Tag sofort und offen, neueste Zeile oben —
damit man zum Mitlesen nicht scrollen muss —, und alle vier Sekunden
kommt dazu, was dazugekommen ist. Fehler und Warnungen tragen die Farbe
am Rand statt im Text; eine ganze Zeile in Rot liest sich schlechter als
eine in Grau mit rotem Strich.

Die früheren Tage stehen darunter als Kacheln zum Herunterladen. Der
heutige nicht: er steht schon oben, und eine zweite Tür zum selben Raum
ist keine Hilfe.

Mehrzeiliges — ffmpeg schreibt gern vier Zeilen — hat keinen eigenen
Zeitstempel und gehört zur Zeile darüber. Es wird eingerückt gezeigt
statt verworfen.

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

web/app/src/style.css

@@ -1312,6 +1312,46 @@ body:has(.pl.pl-klein) .auswahlleiste { bottom: 92px; }
   word-break: break-word;
 }
 
+/* **Das Protokoll als Liste, nicht als Textblock.**
+ *
+ * Eine Zeile je Eintrag, neueste oben, Zeit links. So liest es sich wie
+ * eine Liste von Ereignissen — und nicht wie eine Datei, in der man die
+ * Stelle erst suchen muss. */
+.protokollliste {
+  margin-top: var(--s-regular);
+  border: 1px solid var(--line);
+  border-radius: var(--r-control);
+  background: var(--canvas);
+  max-height: 60vh;
+  overflow: auto;
+}
+.protokollzeile {
+  display: flex; gap: var(--s-regular);
+  padding: 7px var(--s-regular);
+  border-bottom: 1px solid var(--line);
+  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--text-dim);
+}
+.protokollzeile:last-child { border-bottom: 0; }
+.protokollzeit { flex: 0 0 auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+.protokolltext { flex: 1; white-space: pre-wrap; word-break: break-word; }
+
+/* Fehler und Warnungen tragen die Farbe am Rand, nicht im Text: eine ganze
+   Zeile in Rot liest sich schlechter als eine in Grau mit rotem Strich. */
+.protokollzeile.fehler { border-left: 3px solid var(--danger, #e5484d); color: var(--text); }
+.protokollzeile.warnung { border-left: 3px solid #d9a441; }
+.protokollzeile.fortsetzung { padding-left: calc(var(--s-regular) * 2 + 52px); }
+
+.protokolltage { margin-top: var(--s-regular); }
+.protokollkacheln { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
+.protokollkachel {
+  display: flex; flex-direction: column; gap: 2px;
+  padding: 8px 12px;
+  border: 1px solid var(--line); border-radius: var(--r-control);
+  color: var(--text); text-decoration: none;
+}
+.protokollkachel:hover { background: var(--hover, rgba(255, 255, 255, .06)); }
+
 /* Der Originaltitel unter dem übersetzten — leiser, aber lesbar. */
 .originaltitel {
   margin-top: 2px;