frontend: Vertikal — any-of-Alternative mit all-of-Kindern an Abzweig anbinden

Im vertikalen Modus zentriert li.has-and den Alternativknoten (z. B. „Web+Nativ")
vertikal mittig zu seinem Rechts-Fächer; der einkommende any-of-Abzweig saß aber
weiter bei 23 px und traf den Knoten nicht mehr — er war von seiner Linie von
oben abgetrennt. Fix nur für .tree.vertical ul.or>li.has-and: symmetrisches
Padding hält die Knotenmitte bei 50 %, Abzweig (::before) und Rail-Endkante
(:last-child::after) auf 50 %. Horizontal/kompakt unberührt. D18 nachgeführt.

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

docs/DECISIONS.md

@@ -195,5 +195,14 @@ breite horizontale Fächer den Alternativknoten zentrieren und samt Elternbaum
 weit nach rechts schieben. Deshalb wird dieser Teilbaum **nur horizontal**
 schmal **transponiert** gestapelt (Kinder untereinander, linker solider
 Verteiler — wie im kompakten Modus), passend zur gestapelten any-of-Spalte
-darüber. Vertikal/kompakt haben ihre eigene `ul.and`-Behandlung und bleiben
+darüber. Kompakt führt all-of ohnehin nach unten (Knoten bleibt oben,
-unberührt.
+Abzweig bei 23 px passt).
+
+**Vertikal** dagegen behält den zentrierten Rechts-Fächer: `li.has-and` legt
+den Alternativknoten `align-items:center` **vertikal mittig** zu seiner
+Kindergruppe. Dann sitzt aber auch der **einkommende** any-of-Abzweig nicht mehr
+bei 23 px, sondern muss auf die **Knotenmitte (50 %)** zeigen — sonst ist der
+Knoten von seiner Linie von oben abgetrennt. Fix: `ul.or>li.has-and` bekommt
+vertikal **symmetrisches** Padding (Mitte bleibt bei 50 %), der Abzweig
+(`::before`) und die Rail-Endkante (`:last-child::after`) werden auf 50 %
+gesetzt — analog zu den bereits zentrierten all-of-Zwischenknoten.

frontend/index.html

@@ -533,6 +533,14 @@
   .tree.vertical li.has-and>ul.and>li.has-and{
     padding-top:16px;padding-bottom:16px;
   }
+  /* Vertikal + any-of-Alternative, die selbst all-of zerlegt (z. B. „Web+Nativ“):
+     Der Knoten sitzt vertikal mittig zu seinem Rechts-Fächer, also muss auch der
+     EINKOMMENDE any-of-Abzweig auf die Knotenmitte (50 %) zeigen statt auf 23 px —
+     sonst ist der Knoten von seiner Linie von oben abgetrennt. Symmetrisches
+     Padding hält die Mitte bei 50 % (überschreibt das asymmetrische ul.or>li). */
+  .tree.vertical ul.or>li.has-and{padding-top:16px;padding-bottom:16px}
+  .tree.vertical ul.or>li.has-and::before{top:50%}
+  .tree.vertical ul.or>li.has-and:last-child::after{height:50%}
 
   /* Kompakt: auch All-of läuft nach unten (spart Breite) — kein Rechts-Fächer.
      Die graue, gestrichelte Any-of-Führung kommt aus der Basis und gilt hier