BauIN/docs/plaene/AP13-designsystem.md

# AP13 – Designsystem aus Claude Design

| | |
|---|---|
| Status | detailliert, wartet auf Freigabe |
| Aufwand | 0,5 PW |
| Zeitraum | KW 43 |
| Meilenstein | M1 |
| Freigabe | offen |

## Ziel

Die Anwendung sieht aus wie der Prototyp von Claude Design: Farben, Schriften, Abstände,
Statussysteme, App-Rahmen. Bestehende und künftige Seiten nutzen dieselben Bausteine.

## Umfang

**Enthalten:**
- Design-Tokens mit Hell- und Dunkelmodus
- Schriften und Icons lokal
- TallStackUI anpassen
- Eigene Komponenten für die Statussysteme
- Sidebar und Topbar
- Musterseite zum Abgleich

**Nicht enthalten:** Einzelne Fachseiten; diese entstehen in ihren Arbeitspaketen mit den hier
gebauten Bausteinen.

## Voraussetzungen

Erfüllt am 05.10.: **Stand 0.3** von Claude Design mit unseren Änderungen 1–26 und einer
UX-Überarbeitung. Er liegt im Planungsordner unter `claude-design/2026-10-05_Stand-0.3/`:
- `Uebergabe.md`: maßgebliche Spezifikation, Abschnitte 0–9
- `README.md`: Zusammenfassung mit Design-Tokens
- `prototyp/`: `.dc.html`-Dateien mit `support.js`, im Browser zu öffnen
- `screenshots/`: 27 PNG, ein Bild je Zustand, 1440 px breit, für den Abgleich
- `icons/`: Phosphor 2.1.1 als SVG
- `logo/`: Logo-SVGs

Der Stand ist **verbindlich** (High-Fidelity): Farben, Schriften, Abstände, Texte und Zustände
werden genau übernommen. Bei Widerspruch gilt der Prototyp vor den Screenshots.

## Entscheidungen

| Nr. | Frage | Vorschlag | Entschieden |
|---|---|---|---|
| E13.1 | Schriften | League Spartan und IBM Plex über `@fontsource`-Pakete, lokal gebündelt. Sie sind nicht im Übergabepaket | offen |
| E13.2 | Icons | Die gelieferten SVGs (Phosphor 2.1.1, MIT) als lokales Icon-Set; TallStackUI erlaubt eigene SVG-Komponenten. Alternative: Blade-Paket `codeat3/blade-phosphor-icons`, dann Version gegen 2.1.1 prüfen | offen |
| E13.3 | Ablage der Entwürfe im Repository | Stand 0.3 vollständig nach `docs/design/` (nur erfundene Daten, rund 5 MB), damit Claude Code bei jeder Seite nachsehen kann | offen |

## Schritte

- [ ] **13.1** Stand 0.3 in `docs/design/` ablegen (E13.3). Unterschiede zur Rückmeldung und zu
  den Antworten sind schon notiert (Abschnitt „Abgleich Stand 0.3“)
- [ ] **13.2** Design-Tokens als CSS-Variablen (hell und dunkel) und Tailwind-Theme
- [ ] **13.3** Schriften (E13.1) und Icons (E13.2) einbinden; `NoExternalResourcesTest` bleibt grün
- [ ] **13.4** TallStackUI anpassen: Buttons, Eingabefelder, Select, Karte, Dialog, Tabelle,
  Toast, Badge (Radien, Farben, Größen)
- [ ] **13.5** Eigene Komponenten:
  - KI-Sicherheit (`x-confidence`)
  - Prüfergebnis-Plakette
  - Regelstatus-Etikett
  - Bearbeitungsstand mit 5 Punkten
  - KI-Vorschlag-Pille
  - Zustände leer, lädt, Fehler, kein Zugriff
- [ ] **13.6** App-Rahmen: Sidebar mit Gruppen Arbeit, Wissen, System; Topbar mit Suche,
  Benachrichtigungen, Benutzer; Länderwahl nur bei mehreren Ländern
- [ ] **13.7** Musterseite „Designsystem“ (nur in der Entwicklung) und Abgleich mit dem Prototyp
  per Screenshot; bestehende Seiten (Login, Einstellungen, AP1-Seiten) umstellen

## Abgleich Stand 0.3 (05.10.)

**Passt zu Plan und Entscheidungen:**
- TallStackUI 4 mit Präfix `ts-`, eigene Komponenten ohne Präfix (`x-confidence`,
  `x-review-question`, `x-source-choice`, `x-contract-coverage`, `x-coachmark`)
- Schriften und Icons in der Anwendung lokal; der Prototyp lädt sie nur zur Ansicht von fremden Servern
- Gliederung Projekt → PFA → Vertrag → LVs, Nachträge am Vertrag, MKA nur als Verweis (A8)
- Nur „dem Grunde nach“: keine Mengen, Preise oder Anspruchsgrundlage. Höhe und Regelwerk sind
  nicht entworfen; die Quellenanzeige in Spalte 3 ist für den späteren Chat wiederverwendbar.
- Suchbereiche: Vertrag, andere Verträge im PFA per Schalter, andere PFA nur als Hinweis mit EP,
  nie projektübergreifend (A10, A11)
- Rollen Administrator, Projektleiter, Bearbeiter, Leser. „Kein Zugriff“ verrät nicht, ob es das
  Objekt gibt (A25, AP1).
- Länderwahl nur bei mehreren Ländern (A26: Österreich in Phase 2)
- Benachrichtigungen nur in der Anwendung (B3)
- Ergebnisliste mit Excel-Export; Bewertungsmatrix deaktiviert, bis die Vorlage da ist (OP1)

**Abweichungen und wie wir sie behandeln** (Vorschlag, bitte bestätigen):

| Stelle im Prototyp | Widerspricht | Umgang |
|---|---|---|
| Projekt anlegen v3 · 2b „Ablage für Dateien oder ZIP mit Ordnern“; Übergabe 6.8 „Upload allgemein … ZIP“ | B4: kein ZIP | Nur Mehrfach-Upload, Text ohne „ZIP“ |
| Ergebnisliste v2: Export „Stellungnahme (Word)“, deaktiviert; Übergabe 6.8: Export-Vorlage Stellungnahme | A15: Phase 2 | Weglassen |
| Regeldialog v3: „Freigabe immer durch den Projektleiter“, keine Einstellung | A24-Vorschlag „ohne Freigabe“, Gesamtplan „einstellbare Freigaben“ | Entscheidung E8.1 in AP8 |
| Projektdetail v2: Reiter nur PFA & Verträge · Nachträge · Berechtigungen · Einstellungen; Übersicht, Dokumente und Protokoll aus Rückmeldung 19 fehlen | – | Prototyp gilt; Protokoll unter Verwaltung (AP1, 1.11). Falls A2 weitere Vertragsunterlagen bringt, braucht es dafür einen Ort |
| Projektdetail v2 · Einstellungen: nur „Andere Verträge im selben PFA einbeziehen“; „Andere PFAs“ und „Nur gleicher Auftragnehmer“ entfallen | A10 noch offen | Prototyp gilt, bis A10 etwas anderes ergibt; Datenmodell in AP1, 1.4b |
| Projekt anlegen v3 ohne Vertragsgrundlage | `projekte.vertragsgrundlage` im Datenmodell | Feld bleibt mit Standardwert, nicht im Formular (AP1, 1.4b) |
| Zielgruppe „nur deutschsprachig“ | Oberfläche Deutsch und Englisch | Kein Widerspruch: Die deutschen Texte werden wörtlich übernommen, Englisch bleibt als Übersetzung |
| Logo: Wortmarke als Text, „ein finales Logo gibt es noch nicht“ | – | Vorläufig verwenden, vor dem Einsatz in Pfade umwandeln |
| „Passt / Passt nicht“ aus unserer Rückmeldung (7, 9, 11) | – | In 0.3 ersetzt durch Auswahl der Fundstelle und Ja / Nein; AP6 angepasst |

Nicht im Paket und auch nicht nötig: die Archivordner „Stand 0.1/0.2“ und die Schriftdateien.
Wenn die Abweichungen bestätigt sind, geht eine kurze Rückmeldung im Format von Abschnitt 9 an
Claude Design (ZIP und Stellungnahme entfernen, E8.1).

## Abnahmekriterien

- Die Musterseite entspricht dem Designsystem des Prototyps in Hell und Dunkel.
- Alle Statussysteme sind ohne Farbe unterscheidbar (Symbol und Text).
- Es werden keine externen Ressourcen geladen.

## Tests

- `NoExternalResourcesTest` auf allen Seiten
- Blade-Komponenten-Tests für Status und Zustände
- Übersetzungsabdeckung

## Risiken

- Weitere Stände von Claude Design während der Umsetzung: Nur übernehmen, was im
  Änderungsprotokoll der Übergabe (Abschnitt 8) steht, und Tokens zentral halten.