From 37ab1ba47d21ddde9c9295798943e6389aee8850 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Fri, 2 Oct 2026 12:49:37 +0200
Subject: [PATCH] Seitenleiste: "Listen" ist ein Eintrag wie jeder andere

Die Gruppe sah aus wie eine Abschnittsueberschrift - klein, versal,
gedaempft - und stand damit optisch neben der Leiste statt darin. Jetzt
traegt sie die Klasse .nav-link wie alle anderen Eintraege und misst sich
genauso; nur das Verhalten ist anders, sie klappt auf statt zu navigieren.

In der CSS bleiben deshalb nur die Eigenheiten, die ein <button> braucht.
Alles Sichtbare kommt von .nav-link, damit die Hoehe nicht auseinanderlaeuft,
sobald dort jemand etwas aendert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/App.jsx    |  6 +++---
 web/src/styles.css | 13 +++++--------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/web/src/App.jsx b/web/src/App.jsx
index 0fa5d20..66e512e 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -113,11 +113,11 @@ function Sidebar() {
         {/* Auf schmalen Bildschirmen wird die Leiste waagerecht; dort gibt es
             keine Abschnitte (styles.css) und die Eintraege stehen flach
             nebeneinander – zuklappen loest dort kein Platzproblem. */}
-        <button type="button" className="nav-group" onClick={klappeListen}
+        <button type="button" className="nav-link nav-group" onClick={klappeListen}
           aria-expanded={listenOffen || aufEinerListe}>
-          <Icon name="chevron" size={14}
+          <Icon name="chevron" size={17}
             className={listenOffen || aufEinerListe ? "" : "rot-90"} />
-          <span>Listen</span>
+          <span className="label">Listen</span>
         </button>
         {LISTEN.map((e) => (
           <NavLink key={e.to} to={e.to}
diff --git a/web/src/styles.css b/web/src/styles.css
index 7c726ba..edd097a 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1097,17 +1097,14 @@ 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. */
+/* Zuklappbare Gruppe: sieht aus und misst sich wie jeder andere Eintrag
+   (.nav-link), ist aber ein Knopf. Hier stehen deshalb nur die Eigenheiten,
+   die ein <button> braucht – alles Sichtbare kommt von .nav-link, damit die
+   Hoehe nicht auseinanderlaeuft, sobald dort jemand etwas aendert. */
 .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;
+  font: 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; }