Kategorien ein-/ausklappbar, Badge-Darstellung in Tabellenzellen korrigiert

Kategorien:
- Oberkategorien lassen sich per Pfeil zuklappen; ihre Unterkategorien
  verschwinden dann aus der Liste. Ausgeblendet wird ueber die gesamte
  Vorfahrenkette, nicht nur eine Ebene, damit auch mehrstufige Baeume stimmen.
- Ist eine Kategorie zugeklappt, zeigt ein Badge, wie viele Eintraege darunter
  liegen - sonst waere nicht erkennbar, dass dort noch etwas ist.
- Zeilen ohne Unterkategorien bekommen einen Platzhalter, damit alle Namen
  buendig stehen.

Badges in Zellen:
- In der Karten-Ansicht verteilte das Raster mehrere Elemente einer Zelle auf
  zwei Rasterzellen - deshalb rutschte "eingebaut" unter die Beschriftung.
  Jetzt Flexfluss, alle Teile stehen hinter der Beschriftung.
- Einheiten-Tabelle: Name und "eingebaut" liegen in einer Zeile zusammen.

Geprueft: "npm run build" laeuft durch.

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

web/src/styles.css

@@ -269,6 +269,13 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 /* Beschriftung mit Erklaerung im Tooltip: die gepunktete Linie zeigt an, dass
    dort etwas steht - so bleibt das Formular kurz, ohne Wissen zu verstecken. */
 .tip { border-bottom: 1px dotted var(--border-strong); }
+
+/* Auf-/Zuklappen von Unterkategorien */
+.tree-toggle { padding: 2px; flex: 0 0 auto; }
+.tree-toggle .icon { transition: transform 0.12s ease; }
+.tree-toggle .icon.rotated { transform: rotate(90deg); }
+/* Platzhalter, damit Zeilen ohne Unterkategorien buendig zu denen mit stehen. */
+.tree-spacer { display: inline-block; flex: 0 0 auto; width: 24px; }
 /* In Zahlenspalten sitzt der Inhalt rechts, passend zur Ausrichtung der Spalte. */
 .table td.num .cell-row { justify-content: flex-end; }
 .table tbody tr:last-child td { border-bottom: none; }
@@ -363,18 +370,18 @@ td select { width: auto; min-width: 0; max-width: 100%; }
     padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
     background: var(--surface);
   }
-  /* Zwei feste Spalten statt "space-between": Beschriftung links, Wert direkt
-     daneben. Vorher wurde der Wert an den rechten Rand geschoben, wodurch
-     Beschriftung und Wert weit auseinanderstanden und die Zeile unruhig wirkte. */
+  /* Beschriftung links, Wert direkt daneben. Bewusst Flex statt Raster: bei
+     einem Raster landet ein zweites Element in der Zelle (z.B. das Badge
+     "eingebaut") in der naechsten Rasterzelle - also unter der Beschriftung.
+     Im Flexfluss reihen sich alle Teile hinter der Beschriftung auf. */
   .table td {
     border: none; padding: 4px 0;
-    display: grid;
-    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
-    align-items: baseline;
-    gap: var(--sp-3); text-align: left;
+    display: flex; align-items: baseline;
+    gap: var(--sp-2); text-align: left; flex-wrap: wrap;
   }
   .table td::before {
     content: attr(data-label);
+    flex: 0 0 84px;
     color: var(--muted); font-size: 0.7rem; font-weight: 600;
     text-transform: uppercase; letter-spacing: 0.05em;
   }