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>

docs/DECISIONS.md

@@ -3922,3 +3922,55 @@ erste `#`-Token, zeichengenaue Erhaltung von Einrückung, Zeichen, Statusbox
 und Faltmarke, und dass das Ergebnis denselben Baum ergibt wie die von Hand
 ausgeschriebene Fassung). Das Zusammenspiel mit dem Textfeld bleibt
 Browser-Sache — die Lehre aus D54-Nachtrag 3.
+
+## D56 — `#`-Umschalter: die Knoten-ID vor dem Titel, geschrieben wie im Text
+Die ID ist die **Adresse** eines Knotens — Ziel der Abhängigkeiten (§1), Schlüssel
+der Beschreibungsblöcke, und seit D55 auch das, was man beim Tippen abkürzt. Im
+Diagramm stand sie bisher nur im Tooltip (D36: „eine eigene Darstellung hat sie
+(noch) nicht"). Wer Text und Bild nebeneinander liest, musste jeden Knoten
+antippen, um zu wissen, welcher er ist.
+
+Ein Umschalter im Diagramm-Kopf blendet sie ein, **geschrieben wie im Text**:
+`#some.id: Titel`, mit Doppelpunkt und Leerzeichen. Dieselbe Schreibweise auf
+beiden Seiten ist der ganze Zweck — eine eigene Darstellung (Badge in der Ecke,
+Klammern, Kapitälchen) wäre eine zweite Konvention für dieselbe Sache.
+
+**Als Renderer-Option, nicht per CSS versteckt.** Der naheliegende Weg wäre eine
+Klasse an `#out` und `display:none` gewesen. Dann aber stünde die ID trotzdem im
+`textContent` — und genau daraus zieht `diagramToSvg()` den Knotentext. Der
+Export hätte die IDs also **immer** enthalten, egal was auf dem Schirm steht.
+Als Option in `renderTreeHtml(roots, {…, showIds})` folgt er von selbst;
+nachgemessen im ausgegebenen SVG: `>#not.line: Line format</text>` mit
+Umschalter, `>Line format</text>` ohne. Das entspricht der Hausregel, UI-State
+als **Parameter** zu übergeben (frontend/CLAUDE.md), und der Linie von D38/D44:
+Export und Druck zeigen, was sichtbar ist.
+
+**Zurückgenommen dargestellt:** Mono-Schrift wie im Textfeld, 0,86 em, in
+`--muted` (am dunklen Wurzelknoten in Weiß mit 75 %). Die ID ist die Adresse,
+nicht der Name — der Titel soll die Zeile weiter anführen. `aria-hidden`, weil
+der Screenreader sie über `a11yId` ohnehin bekommt (D36) und sie sonst doppelt
+vorläse. Der Zustand gehört zur Ansicht und wird wie Modus, Zoom und Aufteilung
+global gemerkt (D22).
+
+**Der Knopf trägt das Zeichen selbst.** Ein gezeichnetes Icon sagte hier
+weniger als `#` — dasselbe Argument wie beim Fenster-Wähler in D31, nur
+umgekehrt: Wo es ein etabliertes Schriftzeichen gibt, ist es das beste Symbol.
+
+**Das zehnte Bedienelement hat die Kopfzeile gekippt — zweimal dieselbe
+Rechnung wie D17-Nachtrag 5.** Nachgemessen statt geschätzt:
+
+- **Schreibtisch:** 738 px nötig, 728 verfügbar — 10 px zu wenig, die Zeile ging
+  auf 82 statt 49 px. Nicht die Knöpfe waren das Problem (566 px für elf
+  Elemente), sondern der Weißraum: zehn Lücken à 14 px sind 140 px. `gap:10`
+  statt `14` gibt 40 px zurück, also fast genau die Breite des neuen Knopfes;
+  danach 698 von 728 und wieder 49 px — mit **und** ohne den Knopf.
+- **Telefon (375 px):** Dort sind alle Ziele schon auf dem 29-px-Fingerminimum
+  und die Lücken auf 6 px; ein zehntes passt arithmetisch nicht (386 gegen
+  359 px). Die Umbruch-Schwelle aus D50 wandert deshalb von 360 auf 440 px —
+  dieselbe Rechnung, ein Element mehr. Sie greift auch nur dann wirklich: Der
+  „Was ist neu?"-Knopf (44 px) erscheint nur bei Neuigkeiten, ohne ihn bleiben
+  336 px und damit eine Reihe. Gemessen: mit allen zehn 78 px und zwei Reihen,
+  alles innerhalb; ohne den Neuigkeiten-Knopf 49 px und eine Reihe.
+
+Ein `overflow` an der Kopfzeile bleibt weiterhin ausgeschlossen — es klippt die
+beiden Aufklapp-Menüs (D50).

docs/SPEC.md

@@ -703,6 +703,17 @@ verknüpft (siehe D25):
 - Die Hervorhebung ist eine reine Editierhilfe: nicht im Grafikexport, nicht im
   Druck.
 
+### Knoten-IDs im Diagramm einblenden (`#`)
+Ein Umschalter im Diagramm-Kopf stellt die Knoten-ID **vor den Titel**, in
+derselben Schreibweise wie im Text (§1/D36): `#some.id: Titel`. Dargestellt in
+der Mono-Schrift des Textfelds und zurückgenommen gefärbt — die ID ist die
+Adresse, der Titel führt die Zeile weiter an. Der Zustand wird gemerkt.
+
+**Grafikexport und Druck folgen dem Umschalter** (wie beim „verworfene
+einblenden"-Filter und der Faltung): Ist er an, stehen die IDs auch im
+ausgegebenen Bild. Für Screenreader ändert sich nichts — sie bekommen die ID
+ohnehin über das `aria-label`. Siehe D56.
+
 ### Kurzschreibweise der Knoten-ID beim Tippen (`#.name`)
 Eine **Eingabehilfe**, keine Notation: Wer `#.kc` unter einem Knoten mit der ID
 `#prod-stage` schreibt, findet beim **Verlassen der Zeile** `#prod-stage.kc` im

docs/examples/werkbaum.werkbaum

@@ -68,6 +68,7 @@
     - [^] #ed.jump: Jump between diagram and text (S)
     - [^] #ed.lineno: Line numbers in the text editor (XS)  %% the warnings name them
     - [x] #ed.shortid: Type #.kc under #prod-stage, get #prod-stage.kc (XS)  %% an input aid, not notation
+    - [x] #ed.showids: A # button shows the ids before the titles (XS)  %% written as in the text, with a colon
       - [^] #ed.lineno.tip: The warning is the tooltip of its number (XS)  %% no hunting in the list
     - [^] #ed.fold: Collapsible subtrees (M)
       - [^] #ed.fold.marks: Initial state from the text: > collapses, < re-opens (S)
@@ -498,6 +499,11 @@
   typing, not while parsing: the file keeps the full id, so it stays greppable
   and survives re-ordering, which is what the :#... references rely on.
 
+#ed.showids
+  The id is the address of a node, but the diagram only carried it in the
+  tooltip. The switch writes it before the title the same way the text does,
+  so both can be read side by side; the graphic export follows the switch.
+
 #ed.fold
   A large plan is unreadable unless parts of it can be put away. Folding is
   view only — warnings from folded subtrees are still reported, because they