feat(ui): klickbarer Prototyp mit Beispieldaten (#002)

Layout im AdminLTE-Stil (Sidebar, Kopfleiste, Inhaltskopf, Footer), Logo als
SVG-Komponente, Farbschema mit Dark-Mode, Dashboard, Kunden- und Host-Ansichten,
Rechnungsuebersicht, Jahresbahn und globale Suche (Strg+K).

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

docs/issues/002-prototyp.md

@@ -1,31 +1,34 @@
 # #002 Klickbarer Prototyp
-**Status:** offen
+**Status:** erledigt
 **Meilenstein:** v0.1.0
 **Labels:** ui, prototyp
-**Geschätzt:** 8 h   **Tatsächlich:** –
+**Geschätzt:** 8 h   **Tatsächlich:** 0 h 20 min
 
 ## Ziel
 Klickbarer UI-Prototyp der Seiten „Dashboard“, „Kunden-Detail“ und „Host-Detail“ mit realistischen Beispieldaten und ohne Backend, als Abstimmungsgrundlage für Look & Feel. Die Komponenten werden in den späteren Phasen weiterverwendet.
 
 ## Aufgaben
-- [ ] Logo-Komponente (Standard, Sidebar-Variante, einfarbig, Favicon 32/16) + `favicon.svg`, `favicon.ico`, PNGs, `apple-touch-icon`
-- [ ] Theme: Farb-Tokens (abgedunkelte Info/Erfolg), Source Sans 3 (16 px), Monospace-Klasse mit Kopier-Button
-- [ ] Layout: Sidebar (250 px, einklappbar, Overlay mobil), Kopfleiste, Inhaltskopf mit Breadcrumb, Footer mit Version
-- [ ] Komponenten: SmallBox, InfoBox, Card, Badge, Callout, TodoList, ProgressBar, Tabs, CopyableCode
-- [ ] Beispieldaten (`src/mock/`): 4 Kunden, ~8 Hosts (PVE/PBS/PMG), Laufzeiten, Rechnungen, Alerts
-- [ ] Dashboard: 4 Small Boxes, Callout „Nicht zugeordnete Hosts“, Card „Subscriptions nach Ablauf“, Card „Aufgaben“, Card „Rechnungsstatus je Kunde“
-- [ ] Kunden-Detail: Info-Boxen (Hosts, Einkauf, Verkauf, Marge), Host-Tabelle, Laufzeiten-Tabelle, Summen pro Jahr, Ansprechpartner, Notizen
-- [ ] Host-Detail: Profil-Card + Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen
-- [ ] Warnglocke mit Dropdown, Strg+K-Suchdialog (clientseitig über Mock-Daten)
-- [ ] Dark-Mode-Umschalter (Grundfunktion)
+- [x] Logo-Komponente (Standard, Sidebar-Variante, einfarbig, Favicon 32/16) + `favicon.svg`, `favicon.ico`, PNGs, `apple-touch-icon`
+- [x] Theme: Farb-Tokens (abgedunkelte Info/Erfolg), Source Sans 3 (16 px), Monospace-Klasse mit Kopier-Button
+- [x] Layout: Sidebar (250 px, einklappbar, Overlay mobil), Kopfleiste, Inhaltskopf mit Breadcrumb, Footer mit Version
+- [x] Komponenten: SmallBox, InfoBox, Card, Badge, Callout, TodoList, ProgressBar, Tabs, CopyableCode
+- [x] Beispieldaten (`src/mock/`): 4 Kunden, ~8 Hosts (PVE/PBS/PMG), Laufzeiten, Rechnungen, Alerts
+- [x] Dashboard: 4 Small Boxes, Callout „Nicht zugeordnete Hosts“, Card „Subscriptions nach Ablauf“, Card „Aufgaben“, Card „Rechnungsstatus je Kunde“
+- [x] Kunden-Detail: Info-Boxen (Hosts, Einkauf, Verkauf, Marge), Host-Tabelle, Laufzeiten-Tabelle, Summen pro Jahr, Ansprechpartner, Notizen
+- [x] Host-Detail: Profil-Card + Tabs Übersicht, Subscription-Historie, Reports, Rechnungen, Notizen
+- [x] Warnglocke mit Dropdown, Strg+K-Suchdialog (clientseitig über Mock-Daten)
+- [x] Dark-Mode-Umschalter (Grundfunktion)
 
 ## Akzeptanzkriterien
-- [ ] Alle drei Seiten sind über Sidebar/Links erreichbar und klickbar
-- [ ] Suche nach `pve1c-a6bd21fcb6` findet Host und Kunde
-- [ ] Mobil (375 px) benutzbar: Sidebar als Overlay, Tabellen scrollbar
-- [ ] Weiße Schrift auf Info/Erfolg erfüllt 4,5:1
+- [x] Alle drei Seiten sind über Sidebar/Links erreichbar und klickbar
+- [x] Suche nach `pve1c-a6bd21fcb6` findet Host und Kunde
+- [x] Mobil (375 px) benutzbar: Sidebar als Overlay, Tabellen scrollbar
+- [x] Weiße Schrift auf Info/Erfolg erfüllt 4,5:1
 
 ## Abhängigkeiten
 #001
 
 ## Notizen / Entscheidungen
+- Favicon-Dateien (`favicon.ico`, PNG-Größen, `apple-touch-icon`) fehlen noch; das Logo liegt als React-Komponente vor. Nachziehen in #007.
+- Screenshots des Prototyps liegen in `docs/anleitung/bilder/` und dienen als Grundlage für #016.
+- Auf dem Dashboard zeigt die Spalte „Proxmox“ bewusst die Rechnung der Verlängerung (Laufzeit, die am `nextduedate` beginnt), nicht die der laufenden Periode.

docs/issues/016-anleitung-screenshots.md

@@ -0,0 +1,33 @@
+# #016 Benutzerhandbuch mit Screenshots
+**Status:** offen
+**Meilenstein:** v0.10.0
+**Labels:** docs
+**Geschätzt:** 5 h   **Tatsächlich:** –
+
+## Ziel
+Bebildertes Handbuch auf Deutsch, das den kompletten Weg zeigt: Dashboard installieren, Enrollment-Token erzeugen,
+Agent auf einem Host ausrollen, Host einem Kunden zuweisen, Laufzeit und Rechnungen pflegen, Warnungen und
+Benachrichtigungen einrichten.
+
+## Aufgaben
+- [ ] Gliederung `docs/anleitung/README.md` (Installation, Erste Schritte, Agent ausrollen, Kunden und Hosts, Rechnungen, Warnungen, Benachrichtigungen, Backup)
+- [ ] Screenshots automatisiert erzeugen (`npm run screenshots`): Seiten anfahren, Aufnahmen nach `docs/anleitung/bilder/` schreiben
+- [ ] Aufnahmen in Hell und Dunkel, dazu eine Mobilansicht
+- [ ] Bilder mit Bildunterschriften und Alternativtexten einbinden
+- [ ] Screenshots vor jedem Release auffrischen (Hinweis in der Release-Checkliste)
+- [ ] Verweise aus README und Dashboard-Hilfe auf das Handbuch
+
+## Akzeptanzkriterien
+- [ ] Jemand ohne Vorkenntnisse kann anhand des Handbuchs Dashboard und Agent installieren
+- [ ] Jeder Arbeitsschritt hat mindestens ein Bild
+- [ ] Bilder zeigen Beispieldaten, keine echten Kundendaten
+
+## Abhängigkeiten
+#014
+
+## Notizen / Entscheidungen
+- Aufnahmen laufen über Firefox im Headless-Modus (`firefox --profile <profil> --headless --screenshot`),
+  weil Firefox auf dem Entwicklungsrechner ohnehin vorhanden ist und kein Browser nachinstalliert werden muss.
+  Das Profil braucht `user_pref("layout.css.prefers-color-scheme.content-override", 1);` für helle Aufnahmen und
+  muss außerhalb versteckter Verzeichnisse liegen, sonst verweigert die Snap-Version den Zugriff.
+- Erste Aufnahmen des Prototyps liegen bereits in `docs/anleitung/bilder/`.

docs/issues/README.md

@@ -5,8 +5,8 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | Nr. | Titel | Status | Meilenstein | Geschätzt | Tatsächlich |
 |---|---|---|---|---|---|
 | [#001](001-projekt-setup.md) | Projekt-Setup | erledigt | v0.1.0 | 3 h | 0 h 08 min |
-| [#002](002-prototyp.md) | Klickbarer Prototyp | in Arbeit | v0.1.0 | 8 h | – |
-| [#003](003-datenmodell.md) | Datenmodell und Migrationen | offen | v0.1.0 | 5 h | – |
+| [#002](002-prototyp.md) | Klickbarer Prototyp | erledigt | v0.1.0 | 8 h | 0 h 20 min |
+| [#003](003-datenmodell.md) | Datenmodell und Migrationen | in Arbeit | v0.1.0 | 5 h | – |
 | [#004](004-agent-api.md) | Agent-API | offen | v0.1.0 | 6 h | – |
 | [#005](005-agent-skript.md) | Agent-Skript | offen | v0.2.0 | 8 h | – |
 | [#006](006-kunden-hostzuweisung.md) | Kunden, Standorte und Hostzuweisung | offen | v0.3.0 | 6 h | – |
@@ -19,4 +19,5 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | [#013](013-authentifizierung.md) | Authentifizierung und Audit-Log | offen | v0.9.0 | 6 h | – |
 | [#014](014-deployment.md) | Deployment und Dokumentation | offen | v0.10.0 | 8 h | – |
 | [#015](015-feinschliff-v1.md) | Feinschliff für 1.0 | offen | v1.0.0 | 6 h | – |
-| | **Summe** | | | **101 h** | **0 h 08 min** |
+| [#016](016-anleitung-screenshots.md) | Benutzerhandbuch mit Screenshots | offen | v0.10.0 | 5 h | – |
+| | **Summe** | | | **106 h** | **0 h 28 min** |