feat: Querverbindungen der Abhängigkeiten — gekrümmt, blassgrau, Pfeil aufs Gebrauchte (SPEC §9, D41)

Eigene Zeichenebene wie der Pfad-Spline (Overlay-SVGs, /zoom): Kanten aus
den neuen data-id/data-deps-Attributen des Renderers, dünn und blassgrau
HINTER den Knoten — das Unterscheidungsmerkmal zu den orthogonalen
Baumlinien ist die Krümmung, keine neue Farbe (die Palette ist vergeben,
Rot bewusst nicht). Pfeilspitze zeigt auf das Gebrauchte, Endpunkte auf
den Knotenkanten. Die Kanten des ausgewählten Knotens (Tastaturfokus,
sonst Cursor-Zeile) liegen hervorgehoben in Tinte auf einer vorderen
Ebene. Kanten zu verborgenen Zielen entfallen; erste ID-Vergabe gewinnt;
Selbst-Abhängigkeiten zeichnen nichts. Basis-Kanten auch im SVG-Export
(Schritt 1a) und im Druck, die Hervorhebung nicht. Browser-geprüft in
allen drei Modi; Renderer-Attribute testgedeckt.

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

frontend/CLAUDE.md

@@ -292,6 +292,15 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
   Knoten-Referenzen; der Parser prüft nur Existenz (`unknownDep`), Zyklen
   werden bewusst nicht einmal erkannt (zulässig, „gemeinsam fertig"). Keine
   Diagramm-Darstellung — nur Tooltip (`→ #a, #b`) und `a11yDeps`.
+- Querverbindungen (SPEC §9, D41): `drawDepLinks()` zeichnet die
+  Abhängigkeits-Kanten als Overlay-SVGs (wie `drawCheapPath`, `/zoom`
+  umrechnen) aus den Renderer-Attributen `data-id`/`data-deps` — gekrümmt
+  (Merkmal gegenüber den orthogonalen Baumlinien), blassgrau hinter den
+  Knoten, Pfeil aufs Gebrauchte; Hervorhebung (Fokus bzw. Cursor-Zeile,
+  `activeDepNode()`) in Tinte auf der vorderen Ebene. Aufgerufen aus
+  `highlightCurrentNode()` (läuft in jedem `render()`), `applyLayout()` und
+  den focusin/focusout-Handlern — NICHT doppelt in `render()` einhängen.
+  Export zeichnet nur die Basis-Kanten (Schritt 1a).
 - Effektiver Status (SPEC §4/§9, D39): `effectiveStatus(roots)` in model.js
   liefert NUR die Diskrepanzen (Map Knoten → effektiver Status-Key; Minimum
   des Fortschritts-Rangs über die Abhängigkeits-Hülle, Fixpunkt — Zyklen

frontend/src/app.js

@@ -127,6 +127,8 @@ function render(){
   applyOptStairs();   /* muss vor dem Messen laufen — es verschiebt Knoten */
   alignStems();
   drawCheapPath();
+  /* Querverbindungen (D41) zeichnet highlightCurrentNode() unten mit —
+     es kennt die zweite Hälfte der Auswahl (Cursor-Zeile). */
   /* Der Baum ist neu gebaut — die Markierung der Cursor-Zeile neu setzen (D25).
      Ohne Scrollen: beim Tippen soll das Diagramm stehen bleiben. */
   highlightCurrentNode(false);
@@ -277,6 +279,95 @@ function drawCheapPath(){
   out.appendChild(front);
 }
 
+/* ---------- Querverbindungen der Abhängigkeiten (SPEC §9, D41) ----------
+   Die erste Linienart, die nicht der Zerlegung folgt — deshalb eine eigene
+   Zeichenebene wie beim Pfad-Spline. Basis-Kanten dünn, blassgrau und
+   GEKRÜMMT (die Krümmung unterscheidet sie von den orthogonalen Baumlinien),
+   hinter den Knoten, mit Pfeilspitze auf das Gebrauchte. Die Kanten des
+   fokussierten Knotens bzw. der Cursor-Zeile liegen hervorgehoben in Tinte
+   auf einer vorderen Ebene. */
+function depEdges(){
+  const byId = new Map();
+  out.querySelectorAll('.node[data-id]').forEach(el => {
+    if(!byId.has(el.dataset.id)) byId.set(el.dataset.id, el);   /* erste Vergabe gewinnt (D36) */
+  });
+  const edges = [];
+  out.querySelectorAll('.node[data-deps]').forEach(el => {
+    for(const d of el.dataset.deps.split(' ')){
+      const target = byId.get(d);
+      /* verborgene (eingeklappte/ausgeblendete) oder unbekannte Ziele: keine Kante */
+      if(target && target !== el) edges.push([el, target]);
+    }
+  });
+  return edges;
+}
+/* Gekrümmte Kante zwischen zwei Knotenkästen: Endpunkte auf den Kanten
+   (Strahl von Mitte zu Mitte, am Rechteck geklippt), Kontrollpunkt senkrecht
+   zur Verbindung versetzt. */
+function depCurve(a, b){
+  const dx = b.cx - a.cx, dy = b.cy - a.cy;
+  const len = Math.hypot(dx, dy) || 1;
+  const clip = (r, tx, ty) => {
+    const ex = tx - r.cx, ey = ty - r.cy;
+    const sx = ex ? (r.w/2) / Math.abs(ex) : Infinity;
+    const sy = ey ? (r.h/2) / Math.abs(ey) : Infinity;
+    const s = Math.min(sx, sy, 1);
+    return {x: r.cx + ex*s, y: r.cy + ey*s};
+  };
+  const p1 = clip(a, b.cx, b.cy), p2 = clip(b, a.cx, a.cy);
+  const bow = Math.min(40, len/4);
+  const ctrl = {x:(p1.x + p2.x)/2 - dy/len*bow, y:(p1.y + p2.y)/2 + dx/len*bow};
+  return {d:`M${p1.x.toFixed(1)},${p1.y.toFixed(1)} Q${ctrl.x.toFixed(1)},${ctrl.y.toFixed(1)} ${p2.x.toFixed(1)},${p2.y.toFixed(1)}`,
+          end:p2, ctrl};
+}
+function depArrow(end, from){
+  const dx = end.x - from.x, dy = end.y - from.y;
+  const l = Math.hypot(dx, dy) || 1;
+  const ux = dx/l, uy = dy/l, s = 5;
+  const a = {x: end.x - ux*s*1.8 - uy*s, y: end.y - uy*s*1.8 + ux*s};
+  const b = {x: end.x - ux*s*1.8 + uy*s, y: end.y - uy*s*1.8 - ux*s};
+  return `M${end.x.toFixed(1)},${end.y.toFixed(1)} L${a.x.toFixed(1)},${a.y.toFixed(1)} L${b.x.toFixed(1)},${b.y.toFixed(1)} Z`;
+}
+/* „Ausgewählt" heißt: Tastaturfokus im Diagramm, sonst der Knoten der
+   Cursor-Zeile (D25) — beide Lesarten von „ich schaue auf diesen Knoten". */
+function activeDepNode(){
+  const f = document.activeElement;
+  if(f && out.contains(f) && f.closest) {
+    const n = f.closest('.node[data-line]');
+    if(n) return n;
+  }
+  return currentNodeEl;
+}
+function drawDepLinks(){
+  out.querySelectorAll('svg.dep-overlay').forEach(e => e.remove());
+  const edges = depEdges();
+  if(!edges.length) return;
+  const outRect = out.getBoundingClientRect();
+  if(!outRect.width || !outRect.height) return;   /* Panel eingeklappt */
+  const z = zoom || 1;
+  const rect = el => { const r = el.getBoundingClientRect();
+    return {x:(r.left - outRect.left)/z, y:(r.top - outRect.top)/z,
+            w:r.width/z, h:r.height/z,
+            cx:(r.left - outRect.left + r.width/2)/z,
+            cy:(r.top - outRect.top + r.height/2)/z}; };
+  const w = outRect.width/z, h = outRect.height/z;
+  const back = overlaySvg('dep-overlay dep-back', w, h);
+  const front = overlaySvg('dep-overlay dep-front', w, h);
+  const hi = activeDepNode();
+  for(const [from, to] of edges){
+    const hl = hi && (from === hi || to === hi);
+    const c = depCurve(rect(from), rect(to));
+    const layer = hl ? front : back;
+    layer.appendChild(svgEl('path', {class:'dep-edge' + (hl ? ' hl' : ''), d:c.d}));
+    layer.appendChild(svgEl('path', {class:'dep-arrow' + (hl ? ' hl' : ''), d:depArrow(c.end, c.ctrl)}));
+  }
+  out.insertBefore(back, out.firstChild);
+  if(front.childNodes.length) out.appendChild(front);
+}
+/* Hervorhebung folgt dem Fokus; die Basis-Kanten selbst ändern sich nicht. */
+out.addEventListener('focusin', drawDepLinks);
+out.addEventListener('focusout', () => setTimeout(drawDepLinks, 0));
+
 /* ---------- Diagramm als Grafik (SVG → PNG) ---------- */
 /* Das gerenderte Diagramm wird aus der Live-Geometrie in ein eigenständiges
    SVG (nur Formen + Text, keine externen Ressourcen) nachgezeichnet und als
@@ -383,6 +474,14 @@ function diagramToSvg(){
     });
   });
 
+  /* 1a) Querverbindungen der Abhängigkeiten (D41) — Basis-Kanten hinter den
+     Knoten; die Fokus-Hervorhebung ist Interaktion und wird nicht exportiert. */
+  depEdges().forEach(([from, to]) => {
+    const c = depCurve(R(from), R(to));
+    parts.push(`<path d="${c.d}" fill="none" stroke="#6B7A8C" stroke-width="1.5" opacity="0.35" stroke-linecap="round"/>`);
+    parts.push(`<path d="${depArrow(c.end, c.ctrl)}" fill="#6B7A8C" opacity="0.35"/>`);
+  });
+
   /* 1b) Günstigster-Pfad: kräftige Linie hinter den Knoten */
   if(cheapPts.length >= 2) parts.push(cheapLine('0.9'));
 
@@ -814,8 +913,11 @@ function highlightCurrentNode(scroll){
   currentNodeEl = caretLine == null
     ? null
     : out.querySelector('.node[data-line="' + caretLine + '"]');
-  if(!currentNodeEl) return;
+  if(!currentNodeEl){ drawDepLinks(); return; }
   currentNodeEl.classList.add('current');
+  /* Die Cursor-Zeile ist die zweite Lesart von „ausgewählt" — ihre
+     Abhängigkeits-Kanten hervorheben (D41). */
+  drawDepLinks();
   /* Nur beim Zeilenwechsel scrollen, sonst ruckelte das Diagramm beim Tippen. */
   if(scroll) currentNodeEl.scrollIntoView({block:'nearest', inline:'nearest', behavior:'smooth'});
 }
@@ -873,6 +975,7 @@ function applyLayout(mode){
   applyOptStairs();   /* Treppe gilt nur im Fächer — beim Moduswechsel bauen/auflösen */
   alignStems();       /* Stiel gilt nur im Fächer — beim Moduswechsel neu setzen/löschen */
   drawCheapPath();    /* Blatt-Positionen ändern sich mit dem Modus */
+  drawDepLinks();     /* Knoten-Positionen ebenso (D41) */
 }
 document.querySelectorAll('input[name="layout"]').forEach(radio => {
   radio.addEventListener('change', () => { if(radio.checked) applyLayout(radio.value); });

frontend/src/render.js

@@ -91,6 +91,10 @@ function nodeHtml(n, extra, opts, fold){
      für die Gegenrichtung (Cursor-Zeile -> Knoten hervorheben). Der Hinweis im
      Tooltip macht die sonst unsichtbare Alt-Klick-Geste auffindbar. */
   const lineAttr = n.line ? ` data-line="${n.line}"` : '';
+  /* ID und Abhängigkeiten als data-Attribute (D41): Grundlage für die
+     Querverbindungs-Ebene und den Export — beide arbeiten auf dem DOM. */
+  const idAttr = n.id ? ` data-id="${attr(n.id)}"` : '';
+  const depsAttr = n.deps && n.deps.length ? ` data-deps="${attr(n.deps.join(' '))}"` : '';
   /* Beschreibung zuerst im Tooltip (mehrzeilig, D40), dann die Kurz-Fakten. */
   const tip = [n.desc || '',
                n.id ? '#' + n.id : '',
@@ -139,8 +143,8 @@ function nodeHtml(n, extra, opts, fold){
                 ownChip;
   const aria = ` aria-label="${attr(nodeAria(n, opts, fold))}"`;
   const html = n.url
-    ? `<a class="${cls}" href="${attr(n.url)}" target="_blank" rel="noopener"${lineAttr}${aria}${expanded}${title}>${inner}</a>`
-    : `<div class="${cls}" tabindex="0"${lineAttr}${aria}${expanded}${title}>${inner}</div>`;
+    ? `<a class="${cls}" href="${attr(n.url)}" target="_blank" rel="noopener"${lineAttr}${idAttr}${depsAttr}${aria}${expanded}${title}>${inner}</a>`
+    : `<div class="${cls}" tabindex="0"${lineAttr}${idAttr}${depsAttr}${aria}${expanded}${title}>${inner}</div>`;
   const ghostTip = attr(t('ghostTooltip'));
   const ghost = `<div class="ghost-node" aria-label="${ghostTip}" title="${ghostTip}">${esc(t('ghost'))}</div>`;
   return html + (need ? ghost : '');

frontend/src/style.css

@@ -702,6 +702,14 @@
      Blättern zeigen, welche Knoten wirklich auf dem Pfad enden — durchquerte
      Fremdknoten tragen keinen Punkt. Reihenfolge im DOM steuert vorn/hinten. */
   .cheap-overlay{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  /* Querverbindungen der Abhängigkeiten (SPEC §9, D41): dünn, blassgrau,
+     gekrümmt — die Krümmung unterscheidet sie von den orthogonalen Baumlinien.
+     Hervorgehobene Kanten (fokussierter Knoten/Cursor-Zeile) in Tinte. */
+  .dep-overlay{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
+  .dep-edge{fill:none;stroke:var(--muted);stroke-width:1.5;opacity:.35;stroke-linecap:round}
+  .dep-arrow{fill:var(--muted);opacity:.35}
+  .dep-edge.hl{stroke:var(--line);stroke-width:2;opacity:.9}
+  .dep-arrow.hl{fill:var(--line);opacity:.9}
   .cheap-path{fill:none;stroke:var(--or);stroke-width:2.5;stroke-linecap:round;
               stroke-dasharray:8 6;opacity:.9}
   .cheap-path.faint{opacity:.2}

frontend/tests/deps.test.js

@@ -79,4 +79,13 @@ describe('Darstellung — Tooltip und aria, kein eigenes Zeichen', () => {
     expect(html).not.toContain('a11yDeps');
     expect(html).not.toContain('→');
   });
+
+  /* Grundlage der Querverbindungs-Ebene (D41): sie arbeitet auf dem DOM und
+     braucht ID und Abhängigkeiten als data-Attribute. */
+  it('schreibt data-id und data-deps an die Knoten', () => {
+    const {html} = render(`[ ] A #a\n[ ] B #b\n[ ] C :#a,#b`);
+    expect(html).toContain('data-id="a"');
+    expect(html).toContain('data-deps="a b"');
+    expect(html).not.toContain('data-deps=""');
+  });
 });