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/src/render.js

@@ -90,7 +90,7 @@ function nodeAria(n, opts, fold){
 }
 
 function nodeHtml(n, extra, opts, fold){
-  const { t, cheapPath } = opts;
+  const { t, cheapPath, showIds } = opts;
   const need = needsBreakdown(n);
   /* Die Knotenfarbe zeigt den EFFEKTIVEN Status (SPEC §9/D39); bei Diskrepanz
      trägt die Marke unten links die eigene Statusbox in den eigenen Farben. */
@@ -163,7 +163,16 @@ function nodeHtml(n, extra, opts, fold){
   const ownChip = effKey
     ? `<span class="chip ownst st-${n.status.key}" aria-hidden="true">[${n.status.code}]</span>`
     : '';
+  /* ID vor dem Titel, mit `: ` abgetrennt — dieselbe Schreibweise wie im Text
+     (SPEC §1/D36), damit man beides nebeneinander lesen kann. Umschaltbar im
+     Diagramm-Kopf; als Renderer-Option und nicht per CSS versteckt, damit der
+     Grafikexport (er liest den Knotentext) von selbst folgt. `aria-hidden`:
+     Der Screenreader bekommt die ID schon über `a11yId` (D56). */
+  const idHtml = showIds && n.id
+    ? `<span class="nid" aria-hidden="true">#${esc(n.id)}:</span> `
+    : '';
   const inner = foldHtml +
+                idHtml +
                 esc(n.label) +
                 /* ”-Marke (D40): macht die sonst unsichtbare Beschreibung
                    auffindbar (Lehre aus D25) — spiegelt das "-Zeichen der