fix: Sammelleiste im vertikalen Modus rückt vom Knoten ab

Gemeldet: In der vertikalen Ansicht liegt der Abzweig rechts vom Knoten zu
dicht am Knoten, das Größen-Badge rendert in die senkrechte Linie hinein und
die verschwindet dort.

Nachgemessen im Werkbaum-Plan: Das Badge sitzt per `right:-9px` an der
Knotenecke und endet 8 px hinter der Knotenkante, die Sammelleiste beginnt bei
9 px — **1 px Luft**. Dazu trägt das Badge einen 1,5 px breiten Rand in
Kartenfarbe, der die verbleibende Trennung optisch auffrisst; dieselbe Enge
gilt für die Tag-Pillen unten rechts.

Behoben wie vorgeschlagen: Der Stub aus dem Elternknoten wird länger, die
Leiste rückt von 9 auf 20 px. Umgesetzt über eine Variable `--rail` auf der
`ul.and` — Leiste, Abzweig und Zellen-Innenabstand lesen sie gemeinsam, der
21-px-Ast zum Kind bleibt unverändert. Damit trifft die Änderung nur den
vertikalen Rechts-Fächer; **kompakt** teilt sich zwar die Basisregeln, behält
aber 9 px (dort läuft all-of nach unten, Badge und Leiste begegnen sich nie).

Nachgemessen nach der Änderung: 12 px Luft, alle 122 Abzweige treffen weiter
die Knotenmitte (0 daneben), alle 69 Stationspunkte des günstigsten Pfads
liegen exakt auf ihren Blattknoten (Abweichung 0 px, in vertikal wie
horizontal). Kompakt: `--rail` 9 px, Innenabstand 30 px — unverändert.
222 Tests grün.

SPEC §9 (Geometrie-Invarianten) hält die Regel fest.

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

frontend/src/style.css

@@ -1000,15 +1000,15 @@
      Abzweig auf Knotenmitte (23-px-Offset). */
   .tree.vertical, .tree.kompakt{margin:0}
   .tree.vertical li, .tree.kompakt li{align-items:flex-start}
-  .tree.vertical ul.and, .tree.kompakt ul.and{flex-direction:column;align-items:flex-start;padding-top:14px}
-  .tree.vertical ul.and::before, .tree.kompakt ul.and::before{left:9px;height:14px}
-  .tree.vertical ul.and>li, .tree.kompakt ul.and>li{padding:5px 0 5px 30px}
+  .tree.vertical ul.and, .tree.kompakt ul.and{--rail:9px;flex-direction:column;align-items:flex-start;padding-top:14px}
+  .tree.vertical ul.and::before, .tree.kompakt ul.and::before{left:var(--rail);height:14px}
+  .tree.vertical ul.and>li, .tree.kompakt ul.and>li{padding:5px 0 5px calc(var(--rail) + 21px)}
   .tree.vertical ul.and>li::before, .tree.kompakt ul.and>li::before{
-    left:9px;right:auto;top:23px;width:21px;height:0;
+    left:var(--rail);right:auto;top:23px;width:21px;height:0;
     border:0;border-top:2px solid var(--line);border-radius:0;
   }
   .tree.vertical ul.and>li::after, .tree.kompakt ul.and>li::after{
-    left:9px;right:auto;top:0;width:0;height:100%;
+    left:var(--rail);right:auto;top:0;width:0;height:100%;
     border:0;border-left:2px solid var(--line);border-radius:0;
   }
   .tree.vertical ul.and>li:last-child::after, .tree.kompakt ul.and>li:last-child::after{height:23px}
@@ -1019,10 +1019,16 @@
      auf halber Höhe aus, eine vertikale Sammelleiste verteilt auf die Kinder.
      Kompakt bleibt unberührt (führt all-of nach unten). */
   .tree.vertical li.has-and{flex-direction:row;align-items:center}
-  .tree.vertical li.has-and>ul.and{padding-top:0}
+  /* Der Stub ist hier länger als die 9 px der gemeinsamen Basis: Das
+     Größen-Badge (oben rechts) und die Tag-Pillen (unten rechts) ragen 8 px
+     über die Knotenkante hinaus und standen mit 1 px Luft an der
+     Sammelleiste — mit ihrem weißen Rand fraßen sie die Linie optisch auf.
+     20 px lassen 12 px Luft. Nur vertikal: kompakt führt all-of nach unten,
+     dort treffen Badge und Leiste nie aufeinander. */
+  .tree.vertical li.has-and>ul.and{--rail:20px;padding-top:0}
   /* Stub von der Parent-Mitte (halbe Höhe) zur vertikalen Sammelleiste */
   .tree.vertical li.has-and>ul.and::before{
-    left:0;top:50%;width:9px;height:0;
+    left:0;top:50%;width:var(--rail);height:0;
     border-left:0;border-top:2px solid var(--line);
   }
   /* Abzweig trifft die tatsächliche Knotenmitte des Kindes: