Workspace: lange Protokoll-Listen aufklappbar, zugeklappt vier Zeilen

Die "Letzten Ereignisse" im Personen-Bereich fuellten mit 25 Zeilen die
halbe Seite, obwohl sie Nachschlagewerk sind und kein Startbild. Jetzt
stehen nur die vier neuesten da, der Rest kommt auf Knopfdruck.

Der Knopf sagt, was er TUT ("Alle 25 zeigen" / "Nur die letzten 4") und
nennt die Zahl, damit man weiss, was dahintersteckt. Bei hoechstens vier
Eintraegen bleibt er ganz weg -- ein Knopf, der nichts verbirgt, verwirrt
nur. Der Pfeil dreht sich, aria-expanded stimmt.

Gemeinsamer Helfer in kopf.js statt zweimal derselbe Block: Dieselbe
Liste gab es auf der Automationen-Seite ("Zuletzt automatisch passiert"),
die verhaelt sich jetzt genauso. Zugeklappt wird per CSS
([data-klapp="zu"]) statt durch Entfernen von Zeilen -- das Aufklappen
braucht so weder Neuaufbau noch zweite Abfrage.

Der Zuhoerer wird nur einmal gesetzt (die Listen werden bei jeder
Aktualisierung neu aufgebaut), und die Anzahl wird bei jedem Umschalten
frisch gelesen statt in der Fassung des ersten Durchlaufs festzuhaengen.

Geprueft: beide Seiten, Computer und Handy, zweimaliges Hin- und
Herklappen, Gegenprobe mit drei Eintraegen -- server/pruef-protokoll-klappe.mjs

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/start.css

@@ -159,6 +159,34 @@ body.start {
 
 .leise { color: var(--text-still); font-weight: 400; }
 
+/* ---------- Auf- und Zuklappen ------------------------------------------
+   Lange Listen (Protokoll, Verlauf) stehen zugeklappt da und zeigen nur
+   die neuesten Zeilen. Der Pfeil dreht sich beim Aufklappen -- er zeigt
+   die Richtung, der Text daneben sagt, was der Knopf TUT.
+
+   Steht hier und nicht in einer Seiten-Datei: Er wird an mehreren
+   Stellen gebraucht, und genau so sind schon dreimal Regeln dort
+   gelandet, wo eine Seite sie gar nicht laedt. */
+
+.klapp-kopf {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
+}
+.klapp-kopf > .feldschild, .klapp-kopf > .block__titel { margin: 0; }
+
+.klapp-pfeil {
+  width: 14px; height: 14px; flex: 0 0 auto;
+  fill: none; stroke: currentColor;
+  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
+  transition: transform var(--tempo);
+}
+[aria-expanded="true"] > .klapp-pfeil { transform: rotate(180deg); }
+
+/* Zugeklappt bleiben die vier neuesten Zeilen stehen. Bewusst ueber CSS
+   statt ueber das Entfernen von Zeilen: Das Aufklappen braucht dann
+   weder einen neuen Aufbau noch eine zweite Abfrage. */
+[data-klapp="zu"] > *:nth-child(n+5) { display: none; }
+
 .willkommen { margin-bottom: 38px; }
 .willkommen .titel { margin-bottom: 6px; }