docs: Bildstrecke der Anwendung in die Anleitung

16 Screenshots in docs/bilder/, eingebunden in die Benutzeranleitung und als
Aufmacher im README: Opportunities (Kachel und Pipeline), Kalender (Monat
und Woche), Kontakte (Kachel, Netzwerk, Dialog), Aus Mails samt
Feldauswahl, Postfach mit Zuordnungen, Kontakt-Vorschläge, Scanner
(Dashboard, Suchagenten, Börsen-Konten), Einstellungen und eine Ansicht im
dunklen Design.

Aufgenommen mit Playwright gegen ein Stub-Backend mit **erfundenen**
Beispieldaten, nicht gegen die Live-Instanz: echte Kontakt- und
Umsatzdaten haben in Screenshots im Repo-Verlauf nichts zu suchen, und
erfundene Daten lassen sich jederzeit identisch neu erzeugen. Ein Hinweis
darauf steht in der Anleitung und im README.

Feste Fenstergröße 1440x900 ohne Skalierung, PNG, zusammen 2,0 MB - lesbar,
aber klein genug fürs Repo. Die Pipeline ist mit 1760 Breite aufgenommen,
weil sie sechs Spalten hat.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

README.md

@@ -4,6 +4,12 @@ CRM im perinco Corporate Design. Vite/React-Frontend, Express-Backend, MariaDB.
 Enthält den portierten *Projekt Scanner* und die lesende Anbindung des
 Vertriebspostfachs `crm@perinco.de` über Microsoft Graph.
 
+![Opportunities im perinco CRM](docs/bilder/opportunities-kacheln.png)
+
+*Beispieldaten - Firmen, Personen und Zahlen in allen Abbildungen sind erfunden.
+Die Bildstrecke aller Bereiche steht in der
+[Anleitung für Benutzer](docs/07-anleitung-benutzer.md).*
+
 > **Dokumentation mit Funktionszeichnungen:** [`docs/`](docs/README.md)
 > — Architektur, Datenmodell, Scanner-Ablauf, Diktat, Frontend, Betrieb,
 > [Postfachanbindung](docs/11-postfach.md).

docs/07-anleitung-benutzer.md

@@ -53,10 +53,15 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich.
   zusammen - hilfreich auf kleinen Bildschirmen.
 * Rechts oben schaltet zwischen hellem und dunklem Design. Ein **Doppelklick**
   auf den Schalter folgt wieder der Systemeinstellung.
+
+  ![Dieselbe Ansicht im dunklen Design](bilder/aus-mails-dunkel.png)
 * Die Menüpunkte **Kontakte** und **Scanner** klappen beim Anklicken ihre
   Unterpunkte auf. Die Zahl neben *Aus Mails* sagt, wie viele Funde aus dem
   Postfach noch auf eine Entscheidung warten.
 
+> Alle Abbildungen in dieser Anleitung zeigen die Anwendung mit **erfundenen
+> Beispieldaten**. Firmen, Personen und Zahlen darin gibt es nicht.
+
 ## Opportunities
 
 Der Startbereich: eine Opportunity ist ein Geschäft in Arbeit. Oben rechts
@@ -68,6 +73,13 @@ wechselt man die Darstellung:
 | **Liste** | viele Einträge vergleichen, Spaltenköpfe sortieren |
 | **Pipeline** | Fortschritt durch die Phasen, Karten per Maus verschieben |
 
+![Opportunities in der Kachelansicht](bilder/opportunities-kacheln.png)
+
+Die **Pipeline** zeigt dieselben Opportunities nach Phasen sortiert. Über jeder
+Spalte steht ihr Volumen; eine Karte wird per Maus in die nächste Phase gezogen.
+
+![Pipeline-Ansicht mit den Phasen von Neu bis Verloren](bilder/opportunities-pipeline.png)
+
 **Volumen** rechnet die Anwendung selbst: Tagessatz x Personentage. Das
 **gewichtete** Volumen multipliziert das noch mit der Abschlusswahrscheinlichkeit.
 Beide Zahlen stehen live im Formular, auf jeder Karte, als Summe über der Liste,
@@ -88,6 +100,8 @@ Auswahlfeld direkt auf der Karte ändern.
 Ein **gemeinsamer** Teamkalender - alle sehen dieselben Termine, jeder darf
 eintragen.
 
+![Monatsansicht des Kalenders](bilder/kalender-monat.png)
+
 * **Monat, Woche, Tag** oben umschalten, `Heute` und die Pfeile blättern.
 * Klick auf einen Monatstag oder eine Stundenzelle legt sofort einen Termin an.
 * Klick auf einen Wochentagskopf springt in die Tagesansicht.
@@ -108,6 +122,12 @@ eintragen.
 * Rechts stehen die **nächsten Termine**, nach Tagen gruppiert. Vergangenes
   fliegt aus der Liste, bleibt im Kalender aber erhalten.
 
+![Wochenansicht des Kalenders mit Terminen dreier Benutzer](bilder/kalender-woche.png)
+
+Die Farbe eines Termins gehört zu seinem Ersteller - die Legende unter dem
+Kalender löst auf, welche Farbe zu wem gehört. Rechts stehen die nächsten
+Termine mit Beschreibung, Teilnehmern und den markierten Personen.
+
 Ändern und löschen darf nur der **Ersteller** oder ein **Administrator**.
 Anlegen darf jeder.
 
@@ -121,11 +141,20 @@ Drei Ansichten, davon eine besondere:
 | **Liste** | sortierbar, viele Einträge |
 | **Netzwerk** | wer steht mit wem in Kontakt |
 
+![Kontakte in der Kachelansicht](bilder/kontakte-kacheln.png)
+
+Ein Klick auf eine Karte öffnet den Kontakt zum Bearbeiten - mit Foto, Anschrift,
+Status, Zuständigkeit, Tags, Notizen und den Verbindungen zu anderen Kontakten.
+
+![Dialog "Neuer Kontakt" mit allen Feldern](bilder/kontakt-dialog.png)
+
 Im **Netzwerk** sind Kreise Kontakte (Farbe = Status, Größe = Anzahl
 Verbindungen) und Quadrate Benutzer, die Kontakte angelegt haben. Grüne Linien
 verbinden Kontakte untereinander, graue gestrichelte den Ersteller mit seinem
 Kontakt.
 
+![Netzwerkansicht mit Kontakten, Verbindungen und Erstellern](bilder/kontakte-netzwerk.png)
+
 Bedienung: Hintergrund ziehen verschiebt, Mausrad zoomt, einen Knoten ziehen
 setzt ihn fest (grüner Punkt), Doppelklick löst ihn wieder. Über *Verbindung
 erstellen* zwei Kontakte anklicken, um eine Verbindung anzulegen; `Esc` bricht ab.
@@ -145,6 +174,8 @@ hat. **Sie sind noch keine Kontakte**: sie erscheinen nicht in der Kontaktliste,
 nicht in Opportunities und nicht im Kalender. Jede Karte zeigt alle gefundenen
 Angaben und darunter, aus welcher Mail sie stammen.
 
+![Vorbereich "Aus Mails" mit zwei neuen Personen und einer gold markierten Dublette](bilder/aus-mails.png)
+
 Zwei Fälle:
 
 * **Weiße Karte** - die Person ist neu. *In Kontakte übernehmen* legt sie als
@@ -158,6 +189,8 @@ Zwei Fälle:
   kann aus einer alten Signatur stammen. *Neu anlegen* erzeugt trotz Dublette
   einen zweiten Kontakt, etwa wenn es zwei Personen mit demselben Namen gibt.
 
+![Feldauswahl: eine überschreibende Adresse und eine ergänzende Mobilnummer](bilder/aus-mails-feldauswahl.png)
+
 Weitere Bedienelemente:
 
 * **Alle neuen übernehmen** legt alle weißen Karten auf einmal als Kontakte an;
@@ -189,6 +222,8 @@ Listeneintrag sagen, was noch zu tun ist:
 | **2 Kontakte** | so viele Kontakt-Vorschläge warten noch auf eine Entscheidung |
 | 📎 | Anhänge vorhanden (im Postfach, nicht im CRM) |
 
+![Postfachansicht: Mailliste links, gewählte Mail mit Zuordnungen rechts](bilder/mails-postfach.png)
+
 Das Auswahlfeld filtert die Liste. **Nicht zugeordnet** ist die eigentliche
 Arbeitsliste: alles, was noch nirgends hängt. Die Suche geht über Betreff,
 Absender und den kompletten Mailtext; mehrere Wörter wirken als ein Suchbegriff.
@@ -218,6 +253,8 @@ Der Balken rechts ist die Zuversicht: je voller und grüner, je verlässlicher d
 Angaben. Das Kennzeichen darunter sagt, woher sie stammen (*Absender*,
 *Empfänger*, *Signatur*, *Im Text genannt*).
 
+![Reiter Kontakt-Vorschläge mit Zuversicht und Herkunft je Vorschlag](bilder/mails-vorschlaege.png)
+
 Zwei Knöpfe:
 
 * **Als Kontakt anlegen** - es entsteht sofort ein richtiger Kontakt mit Herkunft
@@ -263,6 +300,8 @@ KI-Auswertung mit Pro und Contra, dazu die Knöpfe *Gesehen*, *Beworben*,
 Über der Liste steht der Betriebszustand: *automatische Suche aktiv*, *nur
 manuelle Suche*, *pausiert* oder *Suchlauf läuft*.
 
+![Scanner-Dashboard mit Kennzahlen und bewerteten Treffern](bilder/scanner-dashboard.png)
+
 ### Ton bei neuen Treffern
 
 Findet der Scanner einen Treffer über dem Wert *Hinweis ab %*, spielt das
@@ -296,6 +335,8 @@ Ein Suchagent ist ein Berater:
 | **Lebenslauf (PDF)** | wird als Text ausgelesen und gegen jedes Projekt bewertet |
 | **aktiv** | nur aktive Agenten suchen im Hintergrund |
 
+![Liste der Suchagenten mit Suchbegriffen und Lebenslauf](bilder/scanner-suchagenten.png)
+
 Ohne Lebenslauf kann ein Agent nichts bewerten. Die Ausschluss-Begriffe sind
 nicht nur Bequemlichkeit: sie greifen **vor** der KI-Bewertung und sparen damit
 echte Kosten. „Arbeitnehmerüberlassung" oder „Festanstellung" sind typische
@@ -318,6 +359,8 @@ Zeigt für jede Börse, ob die Verbindung steht. Zwei Arten:
   Browser-Erweiterung *Cookie-Editor* als JSON und fügt sie unter
   **Cookie-Import** ein.
 
+![Börsen-Konten mit Verbindungsstatus je Portal](bilder/scanner-boersen.png)
+
 *Jetzt prüfen* testet eine Verbindung sofort. Steht dort **Abgelaufen /
 CAPTCHA**, hilft nur ein neuer Cookie-Import.
 
@@ -349,6 +392,8 @@ Zugriff auf `crm@perinco.de`. Schlägt etwas fehl, nennt die Meldung den
 wahrscheinlichen Grund. Darunter lassen sich Intervall, Zeitraum des ersten
 Durchlaufs und die automatische Kontaktübernahme einstellen.
 
+![Einstellungen, Reiter Postfach: Zustand des Abgleichs und Schalter](bilder/einstellungen-postfach.png)
+
 Die Zugangsdaten selbst stehen **nicht** in der Oberfläche, sondern in der
 Serverkonfiguration - sie werden beim Start gelesen. Fehlt einer, sagt die Seite
 welcher.