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/index.html

@@ -192,6 +192,12 @@
       <button type="button" class="copybtn togglebtn" id="foldSmallBtn" aria-pressed="false" data-i18n-title="foldSmallTooltip" data-i18n-aria="foldSmallTooltip" title="Knoten der Größe M und kleiner zuklappen – erneut drücken klappt alle wieder auf" aria-label="Knoten der Größe M und kleiner zuklappen – erneut drücken klappt alle wieder auf">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21V3M8 8l4 4 4-4M8 16l4-4 4 4"/></svg>
       </button>
+      <!-- Knoten-IDs vor dem Titel einblenden (SPEC §9, D56) — geschrieben wie
+           im Text: `#some.id: Titel`. Das Zeichen selbst ist das Symbol; ein
+           gezeichnetes Icon sagte hier weniger als das `#`. -->
+      <button type="button" class="copybtn togglebtn idsbtn" id="idsBtn" aria-pressed="false" data-i18n-title="idsTooltip" data-i18n-aria="idsTooltip" title="Knoten-IDs vor dem Titel einblenden" aria-label="Knoten-IDs vor dem Titel einblenden">
+        <span aria-hidden="true">#</span>
+      </button>
       <div class="seg" role="radiogroup" aria-label="Darstellung">
         <label data-i18n-title="modeHorizontal" title="Horizontal – Organigramm, Diagramm über dem Editor">
           <input type="radio" name="layout" value="horizontal" checked data-i18n-aria="modeHorizontal" aria-label="Horizontal – Organigramm">