feat(diagram): #-Umschalter blendet die Knoten-IDs vor dem Titel ein

Die ID ist die Adresse eines Knotens — Ziel der Abhängigkeiten, Schlüssel der
Beschreibungsblöcke —, stand im Diagramm aber nur im Tooltip (D36). Jetzt
umschaltbar und geschrieben wie im Text: `#some.id: Titel`.

- Als RENDERER-Option, nicht per CSS versteckt: `diagramToSvg()` zieht den
  Knotentext aus `textContent`, ein `display:none` hätte die IDs trotzdem in
  jeden Export geschrieben. Nachgemessen im SVG: `>#not.line: Line format<`
  mit Umschalter, `>Line format<` ohne.
- Zurückgenommen dargestellt (Mono wie im Textfeld, --muted), `aria-hidden` —
  der Screenreader bekommt die ID über a11yId (D36). Zustand persistiert.

Das zehnte Bedienelement hat die Kopfzeile gekippt, zweimal dieselbe Rechnung
wie D17-Nachtrag 5:
- Schreibtisch: 738 nötig, 728 da -> 82 statt 49 px. Nicht die Knöpfe (566 px
  für elf Elemente), sondern zehn Lücken à 14 px = 140 px. `gap:10` gibt
  40 px zurück; danach 698 von 728 und wieder 49 px mit UND ohne Knopf.
- Telefon (375 px): alle Ziele schon auf 29 px, Lücken auf 6 — ein zehntes
  passt arithmetisch nicht (386 gegen 359). D50s Umbruch-Schwelle wandert von
  360 auf 440 px. Greift nur mit dem „Was ist neu?"-Knopf: mit allen zehn
  78 px/zwei Reihen, ohne ihn 49 px/eine Reihe.

SPEC §9 + D56; Plan: #ed.showids [x] (160 Knoten, 0 Warnungen).
293 Tests grün (288+5); i18n `idsTooltip` in 9 Sprachen.

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

frontend/tests/render.test.js

@@ -141,3 +141,42 @@ describe('renderTreeHtml — data-line je Knoten (D25)', () => {
     expect(html).not.toMatch(/ghost-node[^>]*data-line/);
   });
 });
+
+/* Knoten-IDs im Diagramm (D56). Als Renderer-Option gebaut und nicht per CSS
+   versteckt — nur so folgt der Grafikexport, der den Knotentext ausliest. */
+describe('showIds — die ID vor dem Titel, geschrieben wie im Text', () => {
+  const ids = (text, showIds) => renderTreeHtml(parse(text).roots,
+    {t, showDiscarded: false, cheapPath: false, cheapSet: new Set(), showIds}).html;
+
+  it('bleibt ohne Umschalter aus dem Knotentext heraus', () => {
+    const html = ids('#auth: Backend', false);
+    expect(html).toContain('>Backend<');
+    expect(html).not.toContain('nid');
+  });
+
+  it('stellt die ID mit Doppelpunkt und Leerzeichen davor', () => {
+    expect(ids('#auth: Backend', true))
+      .toContain('<span class="nid" aria-hidden="true">#auth:</span> Backend');
+  });
+
+  it('lässt Knoten ohne ID unangetastet', () => {
+    const html = ids('- [x] Ohne ID', true);
+    expect(html).toContain('>Ohne ID<');
+    expect(html).not.toContain('nid');
+  });
+
+  /* Die ID steht ohnehin im aria-label (D36) — sichtbar doppelt vorgelesen
+     würde sie sonst. */
+  it('versteckt die sichtbare ID vor dem Screenreader', () => {
+    expect(ids('#auth: Backend', true)).toContain('<span class="nid" aria-hidden="true">');
+  });
+
+  /* Markup kann in einer ID gar nicht vorkommen — `<`, `&` und `"` gehören
+     nicht zur Zeichenmenge (SPEC §1), die ID endet dort. Geprüft wird deshalb
+     genau das: `#a<b` ergibt die ID `a`, der Rest bleibt (escaped) im Label. */
+  it('endet an einem Zeichen außerhalb der ID-Zeichenmenge', () => {
+    const html = ids('#a<b: X', true);
+    expect(html).toContain('<span class="nid" aria-hidden="true">#a:</span>');
+    expect(html).toContain('&lt;b: X');
+  });
+});