diff --git a/docs/SPEC.md b/docs/SPEC.md
index c9c2495..c1e15dd 100644
--- a/docs/SPEC.md
+++ b/docs/SPEC.md
@@ -411,6 +411,13 @@ Siehe D29.
   23-px-Abzweig oben bleibt unverändert; die vertikal **zentrierten**
   all-of-Zwischenknoten bekommen ihn **symmetrisch**, damit ihr Abzweig
   (50 %-Höhe) weiterhin auf der Knotenmitte liegt.
+- Im **vertikalen** Modus tritt die all-of-Verbindung rechts aus dem Knoten aus;
+  die senkrechte Sammelleiste steht deshalb **weiter vom Knoten ab** als in den
+  übrigen Anordnungen (20 statt 9 px). Größen-Badge und Tag-Pillen ragen an der
+  rechten Knotenkante über den Knoten hinaus und lägen sonst unmittelbar an der
+  Leiste — mit ihrem hellen Rand sähe die Linie dort aus, als risse sie ab.
+  Betroffen ist nur der Rechts-Fächer: kompakt führt all-of nach unten, dort
+  treffen Badge und Leiste nie aufeinander.
 
 ### Kleiner Bildschirm (mobil)
 Ab schmaler Breite (≤ 640 px, z. B. Smartphone) ist **immer genau ein Bereich**
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 59e9b6a..cee4b04 100644
--- a/frontend/src/style.css
+++ b/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: