docs(tutorial): add 20 screenshots (taken as Nadia on prod), wire them into the chapters

Before/after pair for chapter 4 via temporary version rollback; the two
remaining placeholders (notification inbox, live cursors) need a second
account and are deferred.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC

docs/de/tutorial/02-konto-und-teich.md

@@ -15,7 +15,7 @@ etwas dafür zu tun, deinen ersten eigenen Teich geschenkt.
 3. Dorfteich schickt dir eine **Bestätigungsmail**. Klick auf den Link
    darin — fertig.
 
-_[Screenshot folgt: das Registrierungsformular]_
+![Das Registrierungsformular von Dorfteich](img/02-registrierung.png)
 
 Mit der Bestätigung passiert etwas Schönes im Hintergrund: Dein
 **persönlicher Teich** wird angelegt. Das ist dein eigener Raum. Niemand

docs/de/tutorial/03-deine-erste-seite.md

@@ -17,7 +17,7 @@ gibt **keinen Speichern-Knopf** — und das ist ein Feature.
    braucht eine erste Seite nicht.
 3. Tippe los.
 
-_[Screenshot folgt: leere neue Seite im Bearbeitungsmodus]_
+![Eine frisch angelegte Seite im Bearbeitungsmodus](img/03-neue-seite.png)
 
 ## Es gibt keinen Speichern-Knopf
 

docs/de/tutorial/04-text-gestalten.md

@@ -44,10 +44,13 @@ Nadia hat einige ihrer Seiten genau mit diesen Werkzeugen ausgebaut:
   begrüßen dich jetzt **Fotos** — eine alte Schreibmaschine für die
   Literatur und ein sehr direkter Trainingsbefehl für den Sport.
 
-_[Screenshot folgt: Vorher/Nachher von „Wartung und Schrauberei" —
-Fließtext gegen Checkliste]_
+So sah „Wartung und Schrauberei" vorher aus — und so mit Checkliste:
 
-_[Screenshot folgt: die Werkzeugleiste im Bearbeitungsmodus, beschriftet]_
+![Vorher: die Seite als reiner Fließtext](img/04-wartung-vorher.png)
+
+![Nachher: dieselbe Seite mit Aufgabenliste zum Abhaken](img/04-wartung-nachher.png)
+
+![Die Werkzeugleiste des Editors im Bearbeitungsmodus](img/04-toolbar.png)
 
 ## Probier es aus
 

docs/de/tutorial/05-wikilinks.md

@@ -16,7 +16,7 @@ Der angezeigte Text lässt sich anpassen: Aus `[[mascha-kaleko]]` kannst
 du im Fließtext auch „die Dichterin Mascha Kaléko" machen — der Link
 bleibt derselbe.
 
-_[Screenshot folgt: die Vorschlagsliste nach dem Tippen von „[["]_
+![Die Wikilink-Vorschlagsliste im Editor](img/05-wikilink-vorschlaege.png)
 
 ## Verlinken, was es noch gar nicht gibt
 

docs/de/tutorial/06-wissensgraph.md

@@ -18,10 +18,10 @@ Du kannst im Graph:
 - **zoomen** — mit dem Mausrad oder zwei Fingern hinein- und
   hinauszoomen.
 
-_[Screenshot folgt: Nadias Wissensgraph mit den vier Themen-Wolken]_
+![Nadias Wissensgraph mit den vier Themen-Wolken](img/06-graph.png)
 
-Nadias Graph ist ein schönes Beispiel: 58 Seiten, 173 Verbindungen. Man
-erkennt vier Wolken — Musik, Literatur, Sport, Filme — und dazwischen
+Nadias Graph ist ein schönes Beispiel: rund 60 Seiten, über 170
+Verbindungen. Man erkennt vier Wolken — Musik, Literatur, Sport, Filme — und dazwischen
 genau die Brücken, die du in Kapitel 5 kennengelernt hast, etwa
 DOTA–Kaléko–Rennrad.
 

docs/de/tutorial/07-seitenbaum.md

@@ -40,7 +40,7 @@ Wichtig zu wissen: **Verschieben ändert nie die Adresse einer Seite.**
 Alle Links und Wikilinks funktionieren danach weiter, als wäre nichts
 gewesen.
 
-_[Screenshot folgt: Nadias aufgeklappter Seitenbaum in der Seitenleiste]_
+![Nadias aufgeklappter Seitenbaum in der Seitenleiste](img/07-seitenbaum.png)
 
 ## Sortierung
 

docs/de/tutorial/08-labels.md

@@ -50,8 +50,7 @@ Labels sind mehr als Deko, du kannst mit ihnen arbeiten:
   mehrfach, Seiten ohne Label sammeln sich unter „Ohne Label"). Der
   Umschalter gilt nur für dich.
 
-_[Screenshot folgt: dieselbe Seitenleiste in Ordner- und Label-Ansicht
-nebeneinander]_
+![Die Seitenleiste in der Label-Ansicht — Seiten gruppiert unter ihren Labels](img/08-label-ansicht.png)
 
 Und noch ein Versprechen wird eingelöst: **Die Farben im Wissensgraphen
 aus Kapitel 6 sind Label-Farben.** Öffne Nadias Graph noch einmal — die

docs/de/tutorial/09-favoriten-und-suche.md

@@ -19,8 +19,7 @@ Neben der Ansichts-Umschaltung der Seitenleiste findest du den Knopf
 **Favoriten**: Er filtert die Seitenliste auf deine markierten Seiten.
 So wird aus hundert Seiten wieder eine Handvoll.
 
-_[Screenshot folgt: gefüllter Stern in der Kopfleiste + goldene
-Seiten-Symbole im Baum]_
+![Der goldene Favoriten-Stern in der Kopfleiste](img/09-favoriten.png)
 
 ## Die Suche
 

docs/de/tutorial/10-versionen.md

@@ -42,8 +42,7 @@ kannst also auch das Wiederherstellen rückgängig machen. Es gibt in
 diesem System keinen Weg, sich wirklich in die Sackgasse zu manövrieren
 — und genau deshalb darfst du beim Schreiben mutig sein.
 
-_[Screenshot folgt: der Versionsverlauf mit benannter Version und
-Wiederherstellen-Knopf]_
+![Der Versionsverlauf einer Seite](img/10-versionen.png)
 
 ## Probier es aus
 

docs/de/tutorial/11-papierkorb.md

@@ -31,8 +31,7 @@ Zum Aufräumen in größerem Stil gibt es **Checkboxen**: Wähle mehrere
 Seiten aus (oder **Alle auswählen**) und stelle sie gesammelt wieder
 her — oder lösche sie gesammelt endgültig.
 
-_[Screenshot folgt: der Papierkorb mit ausgewählten Seiten und den
-Sammel-Knöpfen]_
+![Der Papierkorb mit Mehrfachauswahl und Sammel-Knöpfen](img/11-papierkorb.png)
 
 ## Endgültig löschen
 

docs/de/tutorial/14-kommentare.md

@@ -33,8 +33,7 @@ Die Sprechblase in der Kopfleiste zeigt übrigens einen Zähler für
 ungelesene Kommentare — und weil du Seiten, die du kommentierst,
 automatisch beobachtest (Kapitel 12), verpasst du Antworten nicht.
 
-_[Screenshot folgt: Kommentar-Panel mit einem Faden und
-Erledigen-Knopf]_
+![Das Kommentar-Panel einer Seite](img/14-kommentare.png)
 
 ## Wer darf kommentieren?
 

docs/de/tutorial/15-veroeffentlichen.md

@@ -36,8 +36,7 @@ Suchmaschinen. Die gute Nachricht: Es gilt **nur, was du freigibst**.
 Alles andere bleibt so privat wie vorher, und du kannst die Regel
 jederzeit wieder entfernen.
 
-_[Screenshot folgt: der Zugriffsregeln-Dialog mit der
-Öffentlich-Warnung]_
+![Die Zugriffsregeln in den Teich-Einstellungen — hier wohnt die öffentliche Freigabe](img/15-zugriffsregeln.png)
 
 ## Wie das bei Nadia aussieht
 

docs/de/tutorial/16-importieren.md

@@ -21,7 +21,7 @@ Danach ist die Seite eine ganz normale Dorfteich-Seite: Du kannst sie
 in den Baum einsortieren (Kapitel 7), verschlagworten (Kapitel 8) und
 mit Wikilinks ins Netz einweben (Kapitel 5).
 
-_[Screenshot folgt: der Import-Dialog mit Fortschrittsanzeige]_
+![Der Dokument-Import](img/16-import-dialog.png)
 
 Ein Szenario aus Nadias Teich: Ihre alten Konzert-Notizen lebten als
 Word-Datei auf der Festplatte. Ein Import später stehen sie als Seite

docs/de/tutorial/17-exportieren.md

@@ -41,7 +41,7 @@ Daten verschwinden dabei; was du in gemeinsamen Teichen beigetragen
 hast, bleibt für die anderen erhalten, trägt aber nicht mehr deinen
 Namen.
 
-_[Screenshot folgt: das …-Menü mit den Export-Formaten]_
+![Das Menü mit den Export-Formaten](img/17-export-menue.png)
 
 ## Probier es aus
 

docs/de/tutorial/19-standard-bausteine.md

@@ -17,7 +17,7 @@ In Nadias Teich zeichnet ein Mermaid-Block den Wochenplan auf ihrer
 Seite
 [Marathon-Training](https://dorfteich.online/public/nadia-morgenstern/marathon-training).
 
-_[Screenshot folgt: das Trainingsplan-Diagramm auf Nadias Seite]_
+![Der Mermaid-Trainingsplan auf Nadias Marathon-Seite](img/19-mermaid-marathon.png)
 
 ## draw.io-Diagramm — frei zeichnen
 
@@ -31,6 +31,8 @@ Nadia hat damit die Route ihrer liebsten Schotterrunde auf der Seite
 [Gravel](https://dorfteich.online/public/nadia-morgenstern/gravel)
 skizziert.
 
+![Nadias Routen-Skizze aus dem draw.io-Baustein](img/19-drawio-gravel.png)
+
 ## Inhaltsverzeichnis — lange Seiten gliedern
 
 Ein **Seiten-Werkzeug**: Es sitzt hinter dem Werkzeug-Symbol in der
@@ -41,6 +43,8 @@ nächsten Öffnen einfach da. Probier es auf Nadias Seite
 [Konzert-Notizen](https://dorfteich.online/public/nadia-morgenstern/konzert-notizen),
 die mit ihren Zwischenüberschriften genau dafür gebaut ist.
 
+![Das Inhaltsverzeichnis als Seiten-Werkzeug auf den Konzert-Notizen](img/19-inhaltsverzeichnis.png)
+
 ## Seitenindex — den Teich auflisten
 
 Das zweite **Seiten-Werkzeug**: eine automatisch aktuelle Liste der

docs/de/tutorial/20-profil-einstellungen.md

@@ -26,8 +26,7 @@ sich dir gegenüber verhält:
   Schlag. Wenn dir je ein Gerät abhandenkommt, ist das der Knopf, den
   du suchst.
 
-_[Screenshot folgt: die Einstellungen mit Profil und Aktiven
-Sitzungen]_
+![Die Einstellungen mit Profil und aktiven Sitzungen](img/20-einstellungen.png)
 
 ## Deine beobachteten Seiten