Seitenleiste: die vier Bestandslisten klappen zusammen

Lebensmittel, Gegenstaende, Einzelstuecke und Chargen stehen jetzt unter
einer Gruppe "Listen". Sie ist der laengste Block der Leiste und wird im
Alltag selten gebraucht - wer einlagert, nimmt die Knoepfe darueber.
Vorgabe ist zugeklappt, der Zustand bleibt im Browser (wie die
Spalteneinstellungen der Tabellen).

Steht man auf einer dieser Seiten, klappt die Gruppe auf, ohne den
gemerkten Zustand zu ueberschreiben - sonst saehe man nicht, wo man ist.

Die Eintraege bleiben dabei im Dokument und werden nur per Klasse
verborgen: Auf schmalen Bildschirmen wird die Leiste waagerecht, dort gibt
es keine Abschnitte und kein Platzproblem, also blendet die CSS sie wieder
ein und die Gruppe selbst aus. Waeren sie ausgehaengt, waeren sie dort weg.

Die Mobil-Regeln brauchen `.sidebar` davor: Ein Media-Query erhoeht die
Spezifitaet nicht, und die Grundregeln stehen weiter unten in der Datei -
ohne das gewinnt die spaetere Regel und die Ausnahme greift nie.

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

web/src/styles.css

@@ -1036,6 +1036,15 @@ select.zeitraum:hover { color: var(--text); }
   .sidebar-brand { padding: var(--sp-3) var(--sp-4); }
   .sidebar-nav { flex-direction: row; overflow-x: auto; padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
   .nav-section { display: none; }
+  /* Waagerechte Leiste: Zuklappen loest hier kein Platzproblem, und
+     untereinander ist ohnehin kein Platz. Die Gruppe verschwindet, ihre
+     Eintraege stehen flach zwischen den anderen – wie vorher.
+     Mit `.sidebar` davor, weil die Grundregeln weiter unten in der Datei
+     stehen: ein Media-Query erhoeht die Spezifitaet nicht, und bei
+     Gleichstand gewinnt die spaetere Regel. */
+  .sidebar .nav-group { display: none; }
+  .sidebar .nav-link.nav-zu { display: flex; }
+  .sidebar .nav-link.nav-child { padding-left: 8px; }
   .nav-link { white-space: nowrap; }
   .nav-link span.label { display: none; }
   .nav-link { padding: 8px; }
@@ -1088,6 +1097,21 @@ select.zeitraum:hover { color: var(--text); }
 }
 .nav-link.sub.active { font-weight: 600; }
 
+/* Zuklappbare Gruppe in der Seitenleiste: sieht aus wie eine
+   Abschnittsueberschrift, ist aber ein Knopf. */
+.nav-group {
+  display: flex; align-items: center; gap: var(--sp-2);
+  width: 100%; background: none; border: none; cursor: pointer;
+  padding: var(--sp-4) var(--sp-3) var(--sp-1);
+  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
+  text-transform: uppercase; color: var(--muted); opacity: 0.7;
+  font-family: inherit; text-align: left;
+}
+.nav-group:hover { opacity: 1; }
+/* Eingerueckt wie die Dashboard-Unterpunkte, aber mit Platz fuers Symbol. */
+.nav-link.nav-child { padding-left: 26px; font-size: 0.86rem; }
+.nav-link.nav-zu { display: none; }
+
 /* ---- Aktionskarten: Ein- und Auslagern ohne Seitenwechsel ---- */
 .aktion-karte { gap: 10px; }