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."