frontend: Vertikale Darstellung als zentrierten LR-Baum

Der vertikale Modus zeigt all-of jetzt als exakt transponierten
Organigramm-Fächer: der Überknoten sitzt vertikal mittig zu seiner
Kindergruppe, die Verbindung tritt rechts auf halber Höhe aus und
verteilt über eine Sammelleiste (erste bis letzte Kindmitte) auf die
Kinder. Horizontal und kompakt bleiben unverändert. SPEC §9 angepasst.

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

docs/SPEC.md

@@ -113,9 +113,11 @@ ist grau (`#6B7A8C`) — kein Petrol mehr im Diagramm. Der Modus ändert nur die
   unterhalb des Parents, gestrichelte graue Abzweige zu den Alternativen.
 
 ### Vertikal (transponiert)
-- **all of:** Linie tritt **rechts auf halber Höhe** aus dem Parent aus
+- **all of:** exakter transponierter Organigramm-Fächer (horizontal um 90°
-  (entspricht Richtung LR), vertikale Sammelleiste, durchgezogene Abzweige;
+  gedreht): Der Parent sitzt **vertikal mittig** zu seiner Kindergruppe, die
-  Kinder rechts eingerückt untereinander.
+  Linie tritt **rechts auf halber Höhe** aus (entspricht Richtung LR), eine
+  vertikale Sammelleiste (von erster bis letzter Kindmitte) verteilt mit
+  durchgezogenen Abzweigen; Kinder rechts untereinander.
 - **any of:** Austritt **unten links**, gestrichelte graue Abzweige.
 - Merkregel: Austrittsseite codiert das Gate (rechts = und, unten = oder),
   Linienstil bestätigt es.

frontend/index.html

@@ -413,16 +413,22 @@
   }
   .tree.vertical ul.and>li:last-child::after, .tree.kompakt ul.and>li:last-child::after{height:23px}
 
-  /* Nur vertikal: All-of tritt rechts aus dem Überknoten heraus (wie Richtung LR),
+  /* Nur vertikal: echter transponierter, ZENTRIERTER LR-Baum — analog zur
-     Any-of bleibt unten-links — klar unterscheidbare Austrittsseiten, aber breit. */
+     horizontalen Darstellung, nur um 90° gedreht. Der Überknoten sitzt
-  .tree.vertical li.has-and{flex-direction:row;align-items:flex-start}
+     vertikal mittig zu seiner Kindergruppe; die all-of-Verbindung tritt rechts
+     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}
+  /* Stub von der Parent-Mitte (halbe Höhe) zur vertikalen Sammelleiste */
   .tree.vertical li.has-and>ul.and::before{
-    left:0;top:17px;width:9px;height:0;
+    left:0;top:50%;width:9px;height:0;
     border-left:0;border-top:2px solid var(--line);
   }
-  .tree.vertical li.has-and>ul.and>li:first-child::after{top:17px;height:calc(100% - 17px)}
+  /* Sammelleiste nur von erster bis letzter Kindmitte (23-px-Offset);
-  .tree.vertical li.has-and>ul.and>li:only-child::after{top:17px;height:6px}
+     mittlere Kinder tragen die volle Höhe (Basis), Rand-Kinder halbieren. */
+  .tree.vertical li.has-and>ul.and>li:first-child::after{top:23px;height:calc(100% - 23px)}
+  .tree.vertical li.has-and>ul.and>li:only-child::after{border:0}
 
   /* 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