breakpilot-compliance/design/redesign/HANDOFF_README.md

# Handoff: BreakPilot Compliance — Redesign (Design-Sprache + Projekt-Arbeitsbereich)

> Sprache: Deutsch (UI-Texte sind Teil der Spezifikation). Diese README ist
> selbsttragend — sie reicht aus, um das Redesign ohne Kenntnis des
> ursprünglichen Gesprächs umzusetzen.

## Overview
Redesign der Compliance-Plattform „BreakPilot" (Produkt-Compliance physischer
Produkte mit digitalen Elementen — Verbindung von Maschinensicherheit/CE und
Cyber-Sicherheit/CRA). Ziel: eine Oberfläche, die **zwei Zielgruppen** gleichzeitig
bedient — (1) Jurist:innen/DSB (Nachvollziehbarkeit, Normbezug, Versionierung,
Pflicht-vs-Empfehlung) und (2) Ingenieur:innen (Bauteile, Gefährdungen,
Schutzfunktionen, konkrete Maßnahmen, ohne Jurist:in zu sein).

Dieser Handoff enthält die **durchgängige Design-Sprache** und einen
**vollständig spezifizierten Referenz-Screen** (Projekt-Arbeitsbereich), der alle
Prinzipien demonstriert — inklusive des USP „Cyber trifft Safety".

## About the Design Files
Die Datei `Arbeitsbereich.dc.html` ist eine **Design-Referenz in HTML** — ein
Prototyp, der Aussehen und Verhalten zeigt, **kein** direkt zu kopierender
Produktionscode. Aufgabe: dieses Design in der **bestehenden Codebasis**
(React/Next + eurem Styling-Stack) mit euren etablierten Patterns nachbauen.
Alle Layout-/Farb-/Typo-Werte stehen als Inline-Styles im Markup und sind hier
unten zusätzlich als Tokens dokumentiert.

> Hinweis zur Datei: `Arbeitsbereich.dc.html` ist als „Design Component" gebaut
> und braucht zum Rendern eine Plattform-Laufzeit (`support.js`), die **nicht**
> Teil dieses Pakets ist. Für die Umsetzung ist das egal — Struktur, Inline-Styles
> und Daten/Logik sind im Klartext lesbar. Die dynamischen Stellen sind als
> `{{ … }}`-Platzhalter markiert; die zugehörigen Daten stehen in der Logik-Klasse
> am Ende der Datei (`class Component extends DCLogic`).

## Fidelity
**High-fidelity.** Finale Farben (Hex), Typografie, Abstände und Interaktionen.
Pixelnah nachbauen, aber mit euren vorhandenen Komponenten/Bibliotheken.

---

## Leitprinzipien (gelten als Akzeptanzkriterien)
1. **3 Ebenen pro Screen** (progressive disclosure):
   Ebene 1 Überblick (Management/Klartext) → Ebene 2 Cyber × Safety → Ebene 3
   technische Tiefe (standardmäßig **eingeklappt**).
2. **Klartext führt.** Interne IDs (`CRA-AI-8`, `M542`) nie als Überschrift —
   immer in Monospace **nachgestellt/sekundär**.
3. **Co-Pilot statt Roboter-Anwalt.** Keine Panik-Rot-Blöcke, keine
   Bußgeld-Drohung zuerst. Leitsatz sichtbar: „Wir analysieren — Sie entscheiden
   mit DSB/Anwalt."
4. **Pflicht / Empfehlung / Kann** immer visuell getrennt und durchgängig
   konsistent (eigenes Chip-System, siehe Tokens).
5. **Status/Fortschritt sichtbar** (geführter Flow, nicht 30 gleichwertige Tabs).
6. Rot ist **echten kritischen Punkten und Fristen** vorbehalten — Severity wird
   sonst über getönte Flächen kommuniziert, nicht über Neon-Blöcke.

---

## Design Tokens

### Farben — Neutrale / Flächen
| Token | Hex | Verwendung |
|---|---|---|
| `bg/page` | `#EDEFF3` | Seitenhintergrund |
| `surface` | `#FFFFFF` | Karten |
| `border` | `#E4E7EE` | Standard-Kartenrahmen |
| `border/soft` | `#F0F1F5` | Trennlinien in Listen |
| `ink` | `#1A1D29` | Primärtext |
| `text/muted` | `#5A6273` | Fließtext sekundär |
| `text/muted-2` | `#6B7184` | Labels |
| `text/faint` | `#8089A0` | Hilfstext |
| `text/fainter` | `#9AA1B2` | Versions-/Metainfo |

### Farben — Marke (Indigo)
| Token | Hex | Verwendung |
|---|---|---|
| `primary` | `#4338CA` | Primär-Button-Fläche |
| `primary/text` | `#3B36B0` | Links, aktive Zustände, betonte Marke |
| `primary/grad` | `#5B52E0 → #4338CA` | Fortschrittsbalken (linear 90deg) |
| `primary/tint` | `#EEF0FF` | Chip-/Badge-Hintergrund |
| `primary/tint-2` | `#F6F4FF` / `#F0EBFD` | Co-Pilot-Banner / Marken-Badge |

### Farben — Geltung (Pflicht / Empfehlung / Kann) — Kernsystem
| Stufe | bg | text | border | Marker |
|---|---|---|---|---|
| **Pflicht** | `#FBECEA` | `#A23323` | `#F3D2CC` | gefülltes Quadrat `#C0362C` (7×7px, radius 2px) |
| **Empfehlung** | `#EEF0FF` | `#3B36B0` | `#DAD9F7` | Glyph `◇` (offene Raute) |
| **Kann** | `#F1F3F7` | `#5A6273` | `#E2E6EE` | Glyph `○` (offener Kreis) |

Chip-Form: `padding:3px 9px; border-radius:6px; font-weight:700; font-size:11px; 1px solid <border>`.

### Farben — Severity (Dringlichkeit)
| Stufe | bg | text |
|---|---|---|
| Kritisch | `#FBE9E7` | `#B5362A` |
| Hoch | `#FBF1E0` | `#9A6410` |
| Mittel | `#FAF6DD` | `#897209` |
| Niedrig | `#E9F5EF` | `#2C7A52` |

Chip-Form: `padding:4px 11px; border-radius:7px; font-weight:700; font-size:12px`. Getönte Flächen, kein Neon.

### Farben — Domänen
| Domäne | Akzent | bg-tint | border |
|---|---|---|---|
| **Safety** (Maschine/CE) | `#0E8A66` | `#F3FAF7` | `#D7ECE3` |
| **Cyber** (CRA/Resilienz) | `#6A43D6` | `#F6F1FE` | `#E4D8F7` |
| **Schnittstelle** (Cyber × Safety) | `#BE7714` | `#FCF6EF` | `#F2E6D5` (Warntext `#9A6410`) |

### Dark-Panel (Leitprinzipien-Block)
bg `#15182A` · Text `#E8EAF2` (stark) / `#C7CBDA` (normal) · Akzent-Ziffern `#9B8BF5`.

### Typografie
- **Public Sans** (Google Fonts; 400/500/600/700/800) — gesamte UI & Überschriften.
- **Source Serif 4** (Google Fonts; italic) — Normzitate / rechtliche Texte.
- **IBM Plex Mono** (Google Fonts; 400/500/600) — interne IDs, Codes, Risiko-Formeln.

| Rolle | Größe / Gewicht / Tracking |
|---|---|
| H1 (Projektname) | 30px / 800 / -0.02em / line-height 1.1 |
| H2 (Ebenen-Titel) | 19px / 800 / -0.01em |
| Kartentitel | 17–18px / 700–800 / -0.01em |
| Body | 13–15px / 400–500 / line-height 1.45–1.5 |
| Label/Caption | 11.5–12.5px / 600–700, `letter-spacing:.04–.08em` für Großbuchstaben-Labels |
| Mono (IDs) | 11.5–12.5px |

### Radius / Schatten / Spacing
- Radius: Header `18px` · Hazard-Karten `16px` · Standardkarten `14px` · innere Boxen `10–11px` · Controls `7–10px` · Pills/Chips `6px`/`999px`.
- Schatten: nur sehr dezent — `0 1px 2px rgba(20,24,40,.04)` auf der Header-Karte; Karten sonst flach mit Border.
- Spacing-Basis 8px. Karten-Gaps `14px`; Sektionsabstand `margin-top:38–44px`; Karten-Padding `18–20px` (Standard) bzw. `22–26px` (groß).

---

## Layout
- Container: `max-width:1320px; margin:0 auto`. Seiten-Padding `30px 24px 90px`.
- **Header-Karte** (volle Breite): links Projektinfo (Status-Pill „Entwurf", Version
  `V001` in Mono, H1, Beschreibung, Co-Pilot-Banner), rechts (280px) Konformitäts-%
  + Fortschrittsbalken + zwei Frist-Kacheln (Tage bis CE-Pflicht / Tage bis
  Reporting-Pflicht).
- **Body**: `display:flex; gap:24px; align-items:flex-start`.
  - **Linke Nav** (212px, `position:sticky; top:20px`): die drei Ebenen als
    Sprungmarken (nummerierte Quadrat-Icons in den Ebenen-Farben) + „Design-Sprache".
    Klick scrollt sanft zur Sektion (`window.scrollTo`, **nicht** `scrollIntoView`).
  - **Main** (`flex:1`): vier Sektionen gestapelt (Ebene 1 → 2 → 3 → Design-Sprache).

---

## Screens / Views (eine Seite, vier Sektionen)

### Sektion „Ebene 1 — Überblick"
- **Zweck:** Management-Blick: Was trifft das Produkt?
- **Layout:** 2×2-Grid (`grid-template-columns:repeat(2,1fr); gap:14px`) aus 4 Kacheln.
- **Kacheln** (je: farbiges Großbuchstaben-Label, plakative Klartext-Aussage,
  1 Zeile Erklärung, optional „Warum?"-Link in `primary/text`):
  1. **GELTUNG** (Label `#0E8A66`): „Fällt unter CRA & Maschinenverordnung" · „Vernetzt & mit Software-Updates → Produkt mit digitalem Element." · Link „Warum? → Begründung & Quellen".
  2. **FRISTEN** (Label `#9A6410`): „CE-Pflicht ab 11.12.2027" · „Vulnerability-Reporting (24h/72h) bereits ab **11.09.2026** — in 85 Tagen." · „Maßgeblich: das Inverkehrbringen, nicht der Entwicklungszeitpunkt."
  3. **OFFENE PUNKTE** (Label `#B5362A`): „6 kritische Anforderungen offen" · „von 40 CRA-Anforderungen. Dazu: **2 Safety-Gefährdungen durch Cyber wieder geöffnet.**" (Hervorhebung in `#BE7714`) · Link „Zu den 2 Punkten →".
  4. **KONFORMITÄTSPFAD** (Label `#3B36B0`): „Selbstbewertung (Modul A)" · „Kein externes Audit nötig. Technische Doku + Konformitätserklärung bleiben Pflicht." · grüner Status-Dot „Klassifikation: Standard".

### Sektion „Ebene 2 — Cyber trifft Safety" (Herzstück / USP)
- **Zweck:** sichtbar machen, wo ein **Cyber-Befund** eine bereits mechanisch
  **gemilderte Gefährdung wieder aufreißt**.
- **Domänen-Bar** (eine Karte, 3 Spalten, `flex`): links Safety-Panel (Border-left
  4px `#0E8A66`), Mitte Schnittstellen-Knoten (bg `#FCF6EF`, ⚡-Icon, „2 wieder
  geöffnet" in `#BE7714`), rechts Cyber-Panel (Border-left 4px `#6A43D6`).
- **Hazard-Karten** (eine pro betroffener Gefährdung), Aufbau von oben nach unten:
  1. **Kopf:** kleines Domänen-Label (z. B. „Mechanische Gefährdung", grau) + H3
     Klartext-Name; rechts Pill „Restrisiko: wieder offen" (bg `#FBECEA`, Text
     `#A23323`, gefülltes Quadrat-Marker).
  2. **Kette (3 Knoten + Pfeile `→`):**
     `[CE — GEMILDERT]` (Safety-tint, ✓-Kreis, z. B. „Zweihandschaltung +
     trennende Schutzeinrichtung (PL d)") → `[CYBER-BEFUND]` (Cyber-tint, ⚡, z. B.
     „Authentifizierungs-Umgehung · manipulierte Firmware") → `[RESTRISIKO]`
     (Severity-rot-tint, !-Kreis, „Schutzfunktion aushebelbar — Gefährdung wieder
     offen"). Knoten `flex:1; min-width:200px; border-radius:12px`, Pfeile in
     `#C5A86F`. Auf schmal umbrechend.
  3. **„Warum:"-Box** (Schnittstellen-tint `#FBFAF7`/`#EFEADF`): Mechanismus in
     Klartext, z. B. „Über eine Authentifizierungs-Umgehung oder manipulierte
     Firmware lässt sich die Zweihandschaltung aushebeln — die mechanisch
     gemilderte Quetschgefahr ist damit wieder offen."
  4. **EMPFOHLENE MASSNAHMEN:** Liste, je Zeile [Geltung-Chip] + Klartext-Maßnahme
     + Mono-ID rechts (`#A2A8B8`).
  5. **Ebene-3-Aufklapper** (Fuß der Karte, bg `#FBFBFC`): Button „▸/▾ Auslösende
     Befunde & Norm-Bezug (Ebene 3)". Aufgeklappt: 2 Spalten —
     „AUSLÖSENDE CYBER-BEFUNDE" (Mono-Pills, z. B. `Hub-Steuerung_(SPS)-ctrl-noauth`)
     und „NORM- & ANNEX-BEZUG" (Mono-Pills in `primary`-tint, z. B.
     `ISO 12100:2010`, `CRA-AI-8 · Annex I 1(3)(d)`).
- **Maßnahmen-Backlog** (Karte): Titel + Zähler „{n} Maßnahmen · nach Geltung";
  rechts Segmented-Filter **Alle / Pflicht / Empfehlung** (aktiv = gefüllter
  Indigo-Dot vor dem Label). Tabelle: [Geltung-Chip 96px] · Maßnahme · Kategorie
  (150px, grau) · Aufwand (z. B. „2 PT") · Mono-ID rechts. Filter blendet Zeilen
  nach Geltung.

### Sektion „Ebene 3 — Technische Tiefe"
- **Zweck:** Auditor:innen & Ingenieur:innen; standardmäßig **eingeklappt**.
- Toggle-Button rechts „Technische Details anzeigen/ausblenden". Eingeklappt: gestrichelte
  Platzhalter-Karte mit Inline-„Anzeigen". Aufgeklappt: 2-Spalten-Grid mit
  - **Norm- & Annex-Referenzen** (Tabelle: Mono-Norm-ID · Geltungs-/Typ-Badge ·
    Kurzlabel) + Serif-Hinweis kursiv: „Normtexte werden nie reproduziert — nur
    Nummern, Titel & Abschnittsverweise."
  - **Risiko-Modelle**: zwei Boxen, Formeln in Mono — `R = S × (F + W + P) = 27`
    (EN-62061-Stil) und `R = P × E × C = 63` (Fine-Kinney).
  - **Deterministische Pipeline** (volle Breite): 10 Mono-Step-Pills + grünes Badge
    „reproduzierbar ohne LLM".

### Sektion „Design-Sprache"
Referenz-Legende: Geltung (3 Chips + Bedeutung), Severity (4 Chips), Domänen-Farben
(3 Swatches), Typografie (3 Specimens), und ein dunkler **Leitprinzipien**-Block (4 Punkte).

---

## Interactions & Behavior
- **Linke Nav → Sprung:** sanftes Scrollen zur Sektion via
  `window.scrollTo({top: el.getBoundingClientRect().top + scrollY - 16, behavior:'smooth'})`.
  **Niemals `scrollIntoView`.**
- **Hazard-Aufklapper:** pro Karte unabhängig auf/zu (Caret ▸/▾).
- **Technik-Toggle:** globaler Show/Hide für Ebene-3-Inhalte; Button-Label wechselt.
- **Geltung-Filter:** Alle/Pflicht/Empfehlung filtert den Backlog; aktiver Zustand
  via gefülltem Indigo-Dot (kein Layout-Shift).
- **Hover:** Nav-Items bekommen weißen Hintergrund; Buttons leichte
  Farb-/Rahmen-Verschiebung. Transitionen ~120–160ms.

## State Management
| State | Typ | Trigger / Default |
|---|---|---|
| `showTech` | bool | Technik-Toggle · default `false` |
| `geltung` | `'alle' \| 'pflicht' \| 'empfehlung'` | Filter-Buttons · default `'alle'` |
| `open[hazardIndex]` | bool-Map | Hazard-Aufklapper · default: erste Karte offen |

Konfigurierbare Defaults (im Prototyp als Props): `technikDefault`,
`startFilter`, `hazardOpen` (`erste`/`alle`/`keine`).

## Beispiel-Daten (im Prototyp hinterlegt — als Platzhalter ersetzen)
Zwei Hazards: „Quetschen zwischen Last und Rahmen" (CE: Zweihandschaltung +
trennende Schutzeinrichtung PL d; Cyber: Authentifizierungs-Umgehung/Firmware;
Maßnahmen M542 Pflicht, M541 Pflicht, M-INFO-2 Empfehlung) und „Lastabsturz durch
Überlast" (CE: Überlastsicherung/Lastmomentbegrenzer; Cyber: manipulierte
Signale/Parameter; Maßnahmen M547 Pflicht, M601 Pflicht, M-INFO-5 Empfehlung).
Backlog-Top-6, Norm-Refs und Pipeline-Steps siehe `renderVals()` in der Datei.

## Assets
Keine Bilddateien. Icons sind Unicode-Glyphen (◈ ◑ ◇ ○ ✓ ! ⚡ → 🧭) — im
Zielsystem durch euer Icon-Set ersetzen. Fonts via Google Fonts (s. o.).

## Files
- `Arbeitsbereich.dc.html` — Referenz-Markup (Inline-Styles) + Daten/Logik am Ende.

---

## Vorschlag für den ersten Claude-Code-Prompt
> „Implementiere die Sektion *Ebene 2 — Cyber trifft Safety* aus
> `design_handoff_breakpilot_redesign/README.md` als React-Komponente in unserem
> bestehenden Stack. Nutze unsere vorhandenen Card-/Badge-/Button-Komponenten,
> aber führe das **Geltung-Chip-System** (Pflicht/Empfehlung/Kann) und die
> **Domänen-Farben** (Safety/Cyber/Schnittstelle) exakt nach den Tokens ein.
> Halte die 3-Ebenen-Hierarchie und den Co-Pilot-Ton ein. IDs nur in Monospace
> nachgestellt, nie als Überschrift."