feat(redesign): Design-Tokens + Ebene-2 "Cyber trifft Safety" (additiv)

Schritt A (Tokens): zentrale Design-Sprache aus dem Claude-Design-Handoff —
Tailwind-Tokens (re/geltung/severity/domain) + Fonts (Public Sans / Source
Serif 4 / IBM Plex Mono) + components/redesign/{tokens.ts,Chips.tsx}
(GeltungChip, SeverityChip, DomainTag, MonoId) + Showcase /sdk/design-system.
Bestehende Farben/sans unangetastet.

Schritt B (Ebene 2): CyberMeetsSafety als USP-Hero im CRA/Cyber-Tab
(/sdk/iace/[id]/cra) — Domaenen-Bar, Hazard-Karten (CE-gemildert -> Cyber-Befund
-> Restrisiko, Warum-Box, Pflicht/Empfehlung-Massnahmen, aufklappbarer
Norm-Bezug), Massnahmen-Backlog mit Geltung-Filter. Gebunden an echte
cross_links/findings/open_measures. Bisheriger CRACyberView bleibt eingeklappt
erhalten -> kein Inhaltsverlust.

Guardrail-Doku: design/redesign/ (HANDOFF_README, CONTENT_INVENTORY mit
40-Screen-Mapping + Waisen-Liste, Arbeitsbereich.dc.html-Referenz).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

design/redesign/HANDOFF_README.md

@@ -0,0 +1,254 @@
+# 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."