frontend: Mehr Abstand zwischen gestapelten Knoten (vertikal/kompakt)

In den transponierten Modi ueberlappte das Groessen-Badge (oben rechts)
eines Knotens oft mit den Namens-Tags (unten rechts) des Knotens darueber
(gemessen: nur 10 px Luecke, 6 px Ueberlappung). Jetzt +20 px Abstand
nach unten fuer gestapelte Blaetter/any-of/kompakt (Luecke 25 px, ~9 px
Freiraum); der obere 23-px-Abzweig bleibt unveraendert. Vertikal
zentrierte all-of-Zwischenknoten bekommen den Abstand symmetrisch (16 px),
damit ihr 50%-Abzweig auf der Knotenmitte bleibt.

Verifiziert (headless): keine Ueberlappung mehr; alle Abzweige treffen die
Knotenmitte (|delta| <= 1 px) in vertikal und kompakt. Horizontal
unveraendert. SPEC §9 (Geometrie-Invarianten) ergaenzt.

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

docs/SPEC.md

@@ -133,6 +133,13 @@ ist grau (`#6B7A8C`) — kein Petrol mehr im Diagramm. Der Modus ändert nur die
   deterministisch auf Knotenmitte liegen (Offset 23 px = 5 px Listenabstand
   + halbe Knotenhöhe). Abzweige zielen auf den **Knoten**, nie auf die Mitte
   des Teilbaums.
+- In den transponierten Modi (vertikal, kompakt) stehen untereinander
+  gestapelte Geschwister mit **zusätzlichem Abstand nach unten** (damit das
+  Größen-Badge oben rechts nicht mit den Tags unten rechts des darüber
+  liegenden Knotens überlappt). Der Abstand wird nur **unterhalb** ergänzt, der
+  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.
 
 ### Grafikexport des Diagramms
 Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen

frontend/index.html

@@ -464,6 +464,22 @@
   .tree.vertical li.has-and>ul.and>li.has-and:last-child::after{top:0;height:50%}
   .tree.vertical li.has-and>ul.and>li.has-and:only-child::after{border:0}
 
+  /* Mehr Luft zwischen gestapelten Knoten (transponierte Modi): sonst
+     überlappt das Größen-Badge (oben rechts) eines Knotens mit den
+     Namens-Tags (unten rechts) des Knotens darüber. Nur zusätzlicher Abstand
+     NACH unten, damit der obere 23-px-Abzweig unverändert bleibt. */
+  .tree.kompakt ul.and>li,
+  .tree.kompakt ul.or>li,
+  .tree.vertical ul.or>li,
+  .tree.vertical ul.and>li:not(.has-and){
+    padding-bottom:20px;
+  }
+  /* Zentrierte all-of-Zwischenknoten (nur vertikal) brauchen den Abstand
+     symmetrisch, damit ihr 50%-Abzweig auf der Knotenmitte bleibt. */
+  .tree.vertical li.has-and>ul.and>li.has-and{
+    padding-top:16px;padding-bottom:16px;
+  }
+
   /* 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
      wie in allen Modi. Gate-Codierung: und = durchgezogen dunkel (Tinte),