diff --git a/admin-compliance/app/layout.tsx b/admin-compliance/app/layout.tsx index ccf2f814..53bcf349 100644 --- a/admin-compliance/app/layout.tsx +++ b/admin-compliance/app/layout.tsx @@ -1,8 +1,13 @@ import type { Metadata } from 'next' -import { Inter } from 'next/font/google' +import { Inter, Public_Sans, Source_Serif_4, IBM_Plex_Mono } from 'next/font/google' import './globals.css' const inter = Inter({ subsets: ['latin'] }) +// Redesign fonts (design/redesign) — exposed as CSS variables; the new +// design-language components opt in via Tailwind font-publicSans/-sourceSerif/-plexMono. +const publicSans = Public_Sans({ subsets: ['latin'], weight: ['400', '500', '600', '700', '800'], variable: '--font-public-sans' }) +const sourceSerif = Source_Serif_4({ subsets: ['latin'], weight: ['400', '500', '600'], style: ['normal', 'italic'], variable: '--font-source-serif' }) +const plexMono = IBM_Plex_Mono({ subsets: ['latin'], weight: ['400', '500', '600'], variable: '--font-plex-mono' }) export const metadata: Metadata = { title: 'BreakPilot Admin Compliance', @@ -15,7 +20,7 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - + {children} ) diff --git a/admin-compliance/app/sdk/design-system/page.tsx b/admin-compliance/app/sdk/design-system/page.tsx new file mode 100644 index 00000000..8905e110 --- /dev/null +++ b/admin-compliance/app/sdk/design-system/page.tsx @@ -0,0 +1,114 @@ +'use client' + +// Design-system showcase (Schritt A verification). Renders the redesign tokens + +// chips so the design language can be reviewed in isolation. Internal reference +// page (not in the customer sidebar). + +import { GeltungChip, SeverityChip, DomainTag, MonoId } from '@/components/redesign/Chips' +import { COLORS, DOMAIN } from '@/components/redesign/tokens' + +function Section({ title, children }: { title: string; children: React.ReactNode }) { + return ( +
+

{title}

+
{children}
+
+ ) +} + +function Swatch({ name, hex }: { name: string; hex: string }) { + return ( +
+
+
{name}
+
{hex}
+
+ ) +} + +export default function DesignSystemPage() { + return ( +
+
+

+ Design-Sprache +

+

+ Schritt A — Tokens & Bausteine des Redesigns (Geltung, Severity, Domänen, Typografie). + Referenz: design/redesign/HANDOFF_README.md. +

+ +
+
+ + + + + Klartext-Maßnahme + M542 +
+
+ +
+
+ + + + +
+
+ +
+
+ + + +
+
+ {(['safety', 'cyber', 'bridge'] as const).map((k) => ( +
+
{DOMAIN[k].label}
+
{DOMAIN[k].accent}
+
+ ))} +
+
+ +
+
+
Public Sans — UI & Überschriften (800)
+
Source Serif 4 — Normzitate / rechtliche Texte (kursiv)
+
IBM Plex Mono — interne IDs · CRA-AI-8 · R = S × (F + W + P)
+
+
+ +
+
+ + + + + +
+
+ +
+
+
    + {[ + '3 Ebenen pro Screen: Überblick → Cyber×Safety → Technik (eingeklappt).', + 'Klartext führt. Interne IDs nur in Monospace nachgestellt.', + 'Co-Pilot statt Roboter-Anwalt — keine Panik-Rot-Blöcke.', + 'Pflicht / Empfehlung / Kann immer visuell getrennt.', + ].map((t, i) => ( +
  1. + {i + 1} + {t} +
    2. + ))} +
+
+
+
+
+ ) +} diff --git a/admin-compliance/app/sdk/iace/[projectId]/cra/_components/CyberMeetsSafety.tsx b/admin-compliance/app/sdk/iace/[projectId]/cra/_components/CyberMeetsSafety.tsx new file mode 100644 index 00000000..42457ed6 --- /dev/null +++ b/admin-compliance/app/sdk/iace/[projectId]/cra/_components/CyberMeetsSafety.tsx @@ -0,0 +1,189 @@ +'use client' + +// Ebene 2 — "Cyber trifft Safety" (Redesign-Herzstück / USP). +// Macht sichtbar, wo ein Cyber-Befund eine bereits mechanisch gemilderte +// CE-Gefährdung wieder aufreißt. Bindet an die ECHTEN Bridge-Daten (cross_links) +// + findings + open_measures aus useCRA. Design nach design/redesign/HANDOFF_README.md. +// Additiv: ersetzt den bestehenden CRACyberView NICHT. + +import { useState } from 'react' +import { CRADemo, CrossLink, CRAFinding, Measure } from '../_hooks/useCRADemo' +import { GeltungChip, MonoId } from '@/components/redesign/Chips' +import { COLORS, DOMAIN, Geltung } from '@/components/redesign/tokens' + +// Maßnahme → Geltung: technische Schutzmaßnahmen = Pflicht; Info/Hardening-Guides +// = Empfehlung. Heuristik (kein Geltung-Feld in den Daten); nie still „Kann". +function measureGeltung(name: string, id: string): Geltung { + const hay = `${id} ${name}`.toLowerCase() + return /info|guide|hardening|dokumentation|beilegen|hinweis|schulung/.test(hay) ? 'empfehlung' : 'pflicht' +} + +function ChainNode({ tone, marker, label, text }: { + tone: 'ce' | 'cyber' | 'residual'; marker: string; label: string; text: string +}) { + const s = tone === 'ce' + ? { bg: DOMAIN.safety.tint, border: DOMAIN.safety.border, accent: DOMAIN.safety.accent } + : tone === 'cyber' + ? { bg: DOMAIN.cyber.tint, border: DOMAIN.cyber.border, accent: DOMAIN.cyber.accent } + : { bg: '#FBECEA', border: '#F3D2CC', accent: '#A23323' } + return ( +
+
+ {marker}{label} +
+
{text}
+
+ ) +} + +function HazardCard({ link, findings, measures, defaultOpen }: { + link: CrossLink; findings: CRAFinding[]; measures: Measure[]; defaultOpen: boolean +}) { + const [open, setOpen] = useState(defaultOpen) + const triggers = findings.filter((f) => link.cyber_finding_ids.includes(f.id)) + const cyberText = triggers.map((f) => f.title).join(' · ') || link.cyber_finding_ids.join(', ') + const measureIds = Array.from(new Set(triggers.flatMap((f) => f.measures))) + const measureObjs = measureIds.map((id) => measures.find((m) => m.id === id) || { id, name: id, description: '', norm_refs: [] }) + const normPills = Array.from(new Set(triggers.flatMap((f) => [f.annex_anchor, ...f.requirement_ids, ...f.iso27001_ref]).filter(Boolean))) + + return ( +
+
+
+
Mechanische Gefährdung
+

{link.safety_hazard}

+
+ + + Restrisiko: wieder offen + +
+ +
+ + → + + → + +
+ +
+ Warum: + {link.cyber_breaks_it} +
+ + {measureObjs.length > 0 && ( +
+
Empfohlene Maßnahmen
+
    + {measureObjs.map((m) => ( +
  • + + {m.name} + {m.id} +
    • + ))} +
+
+ )} + +
+ + {open && ( +
+
+
Auslösende Cyber-Befunde
+
+ {triggers.map((f) => {f.location || f.id})} +
+
+
+
Norm- & Annex-Bezug
+
+ {normPills.map((n) => ( + {n} + ))} +
+
+
+ )} +
+
+ ) +} + +export function CyberMeetsSafety({ data }: { data: CRADemo }) { + const links = data.cross_links || [] + const measures = data.open_measures || [] + const [filter, setFilter] = useState<'alle' | 'pflicht' | 'empfehlung'>('alle') + + if (links.length === 0) { + return ( +
+
Cyber trifft Safety
+

+ Aktuell keine Cyber-Befunde, die eine CE-Gefährdung wieder öffnen. Sobald Befunde vorliegen, erscheinen sie hier. +

+
+ ) + } + + const backlog = measures.map((m) => ({ m, g: measureGeltung(m.name, m.id) })) + .filter((x) => filter === 'alle' || x.g === filter) + + return ( +
+ {/* Domänen-Bar */} +
+
+
Safety (Maschine / CE)
+
Mechanisch gemilderte Gefährdungen
+
+
+
⚡
+
{links.length} wieder geöffnet
+
+
+
Cyber (CRA)
+
Befunde, die Schutzfunktionen aushebeln
+
+
+ + {links.map((link, i) => ( + + ))} + + {/* Maßnahmen-Backlog */} +
+
+
+ Maßnahmen-Backlog · {measures.length} Maßnahmen · nach Geltung +
+
+ {(['alle', 'pflicht', 'empfehlung'] as const).map((f) => ( + + ))} +
+
+
    + {backlog.map(({ m, g }) => ( +
  • + + {m.name} + {m.norm_refs?.[0] || 'Sicherheit'} + {m.id} +
    • + ))} + {backlog.length === 0 &&
  • Keine Maßnahmen in diesem Filter.
    • } +
+
+
+ ) +} diff --git a/admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx b/admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx index 61c0b968..0693183b 100644 --- a/admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx +++ b/admin-compliance/app/sdk/iace/[projectId]/cra/page.tsx @@ -3,6 +3,7 @@ import { useParams } from 'next/navigation' import { useCRA } from './_hooks/useCRA' import { CRACyberView } from './_components/CRACyberView' +import { CyberMeetsSafety } from './_components/CyberMeetsSafety' import { WeightsControl } from './_components/WeightsControl' import { SnapshotPanel } from './_components/SnapshotPanel' import { ScannerRepoPicker } from './_components/ScannerRepoPicker' @@ -31,7 +32,22 @@ export default function CRAPage() { )} - + + {/* Ebene 2 — Cyber trifft Safety (Redesign, neue Design-Sprache) */} +
+

+ Cyber trifft Safety +

+ +
+ + {/* Bisherige Detailansicht (bleibt erhalten, bis das Redesign 100% abdeckt) */} +
+ Bisherige Detailansicht (CRACyberView) +
+ +
+
) diff --git a/admin-compliance/components/redesign/Chips.tsx b/admin-compliance/components/redesign/Chips.tsx new file mode 100644 index 00000000..aded5fa8 --- /dev/null +++ b/admin-compliance/components/redesign/Chips.tsx @@ -0,0 +1,64 @@ +'use client' + +// Reusable design-language chips. Geltung (Pflicht/Empfehlung/Kann) and Severity +// follow the handoff specs exactly (bg/text/border + marker glyph). Klartext label +// leads; internal IDs are never shown by the chip itself. See ./tokens. + +import { + GELTUNG, PFLICHT_MARKER, SEVERITY, DOMAIN, + normalizeGeltung, normalizeSeverity, Geltung, Severity, Domain, +} from './tokens' + +function GeltungMarker({ g }: { g: Geltung }) { + const m = GELTUNG[g].marker + if (m === 'square') { + return + } + // diamond ◇ (Empfehlung) / circle ○ (Kann) — open glyphs in the chip text color + return {m === 'diamond' ? '◇' : '○'} +} + +export function GeltungChip({ value, className = '' }: { value: Geltung | string; className?: string }) { + const g = normalizeGeltung(value) + const t = GELTUNG[g] + return ( + + + {t.label} + + ) +} + +export function SeverityChip({ value, className = '' }: { value: Severity | string; className?: string }) { + const s = normalizeSeverity(value) + const t = SEVERITY[s] + return ( + + {t.label} + + ) +} + +// Small domain tag (Safety / Cyber / Schnittstelle) — tinted, not neon. +export function DomainTag({ value, label, className = '' }: { value: Domain; label?: string; className?: string }) { + const d = DOMAIN[value] + return ( + + {label || d.label} + + ) +} + +// Monospace internal ID — IDs are ALWAYS secondary/nachgestellt, never a heading. +export function MonoId({ children, className = '' }: { children: React.ReactNode; className?: string }) { + return {children} +} diff --git a/admin-compliance/components/redesign/tokens.ts b/admin-compliance/components/redesign/tokens.ts new file mode 100644 index 00000000..c2ff19b3 --- /dev/null +++ b/admin-compliance/components/redesign/tokens.ts @@ -0,0 +1,55 @@ +// Design-language tokens — single source of truth for the redesign. +// Mirrors design/redesign/HANDOFF_README.md (Claude Design handoff). The same +// values are mirrored into tailwind.config.ts (namespaces re/geltung/severity/domain) +// for utility-class use; components that need the exact chip look import from here. + +export const COLORS = { + page: '#EDEFF3', surface: '#FFFFFF', border: '#E4E7EE', borderSoft: '#F0F1F5', + ink: '#1A1D29', muted: '#5A6273', muted2: '#6B7184', faint: '#8089A0', fainter: '#9AA1B2', + brand: '#4338CA', brandText: '#3B36B0', brandTint: '#EEF0FF', brandTint2: '#F6F4FF', + panel: '#15182A', panelText: '#E8EAF2', panelText2: '#C7CBDA', panelAccent: '#9B8BF5', +} as const + +// --- Geltung: Pflicht / Empfehlung / Kann (the core 3-tier obligation system) --- +export type Geltung = 'pflicht' | 'empfehlung' | 'kann' +export const GELTUNG: Record = { + pflicht: { label: 'Pflicht', bg: '#FBECEA', text: '#A23323', border: '#F3D2CC', marker: 'square' }, + empfehlung: { label: 'Empfehlung', bg: '#EEF0FF', text: '#3B36B0', border: '#DAD9F7', marker: 'diamond' }, + kann: { label: 'Kann', bg: '#F1F3F7', text: '#5A6273', border: '#E2E6EE', marker: 'circle' }, +} +export const PFLICHT_MARKER = '#C0362C' // filled square color + +export function normalizeGeltung(v: string | Geltung): Geltung { + const s = String(v || '').toLowerCase() + if (['pflicht', 'mandatory', 'required', 'must', 'core'].includes(s)) return 'pflicht' + if (['empfehlung', 'recommended', 'should', 'review'].includes(s)) return 'empfehlung' + if (['kann', 'optional', 'may', 'can'].includes(s)) return 'kann' + return 'empfehlung' // unknown → recommendation (never silently drop; never over-state as Pflicht) +} + +// --- Severity (Dringlichkeit) --- +export type Severity = 'kritisch' | 'hoch' | 'mittel' | 'niedrig' +export const SEVERITY: Record = { + kritisch: { label: 'Kritisch', bg: '#FBE9E7', text: '#B5362A' }, + hoch: { label: 'Hoch', bg: '#FBF1E0', text: '#9A6410' }, + mittel: { label: 'Mittel', bg: '#FAF6DD', text: '#897209' }, + niedrig: { label: 'Niedrig', bg: '#E9F5EF', text: '#2C7A52' }, +} +export function normalizeSeverity(v: string | Severity): Severity { + const s = String(v || '').toLowerCase() + if (['kritisch', 'critical'].includes(s)) return 'kritisch' + if (['hoch', 'high'].includes(s)) return 'hoch' + if (['mittel', 'medium', 'moderate'].includes(s)) return 'mittel' + if (['niedrig', 'low', 'minor'].includes(s)) return 'niedrig' + return 'mittel' +} + +// --- Domains (Safety / Cyber / Schnittstelle) --- +export type Domain = 'safety' | 'cyber' | 'bridge' +export const DOMAIN: Record = { + safety: { label: 'Safety (Maschine/CE)', accent: '#0E8A66', tint: '#F3FAF7', border: '#D7ECE3' }, + cyber: { label: 'Cyber (CRA)', accent: '#6A43D6', tint: '#F6F1FE', border: '#E4D8F7' }, + bridge: { label: 'Cyber × Safety', accent: '#BE7714', tint: '#FCF6EF', border: '#F2E6D5', warn: '#9A6410' }, +} diff --git a/admin-compliance/tailwind.config.ts b/admin-compliance/tailwind.config.ts index 0532d33c..a92c4ea1 100644 --- a/admin-compliance/tailwind.config.ts +++ b/admin-compliance/tailwind.config.ts @@ -48,9 +48,39 @@ const config: Config = { 900: '#0c4a6e', 950: '#082f49', }, + + // === Redesign design-language tokens (2026-06, see design/redesign) === + // Additive + namespaced ('re', 'geltung', 'severity', 'domain') so nothing + // existing is overridden. Single source of truth: components/redesign/tokens.ts. + re: { + page: '#EDEFF3', surface: '#FFFFFF', border: '#E4E7EE', 'border-soft': '#F0F1F5', + ink: '#1A1D29', muted: '#5A6273', 'muted-2': '#6B7184', faint: '#8089A0', fainter: '#9AA1B2', + brand: '#4338CA', 'brand-text': '#3B36B0', 'brand-tint': '#EEF0FF', 'brand-tint-2': '#F6F4FF', + panel: '#15182A', 'panel-text': '#E8EAF2', 'panel-text-2': '#C7CBDA', 'panel-accent': '#9B8BF5', + }, + geltung: { + pflicht: { bg: '#FBECEA', text: '#A23323', border: '#F3D2CC', marker: '#C0362C' }, + empfehlung: { bg: '#EEF0FF', text: '#3B36B0', border: '#DAD9F7' }, + kann: { bg: '#F1F3F7', text: '#5A6273', border: '#E2E6EE' }, + }, + severity: { + kritisch: { bg: '#FBE9E7', text: '#B5362A' }, + hoch: { bg: '#FBF1E0', text: '#9A6410' }, + mittel: { bg: '#FAF6DD', text: '#897209' }, + niedrig: { bg: '#E9F5EF', text: '#2C7A52' }, + }, + domain: { + safety: '#0E8A66', 'safety-tint': '#F3FAF7', 'safety-border': '#D7ECE3', + cyber: '#6A43D6', 'cyber-tint': '#F6F1FE', 'cyber-border': '#E4D8F7', + bridge: '#BE7714', 'bridge-tint': '#FCF6EF', 'bridge-border': '#F2E6D5', 'bridge-warn': '#9A6410', + }, }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], + // Redesign fonts (loaded via next/font in app/layout.tsx as CSS variables). + publicSans: ['var(--font-public-sans)', 'Inter', 'system-ui', 'sans-serif'], + sourceSerif: ['var(--font-source-serif)', 'Georgia', 'serif'], + plexMono: ['var(--font-plex-mono)', 'ui-monospace', 'SFMono-Regular', 'monospace'], }, }, }, diff --git a/design/redesign/Arbeitsbereich.dc.html b/design/redesign/Arbeitsbereich.dc.html new file mode 100644 index 00000000..134e4475 --- /dev/null +++ b/design/redesign/Arbeitsbereich.dc.html @@ -0,0 +1,501 @@ + + + + + + + + + + + + + + + + +
+
+ + +
+ + ◈ + BreakPilot + + / + Produkt-Compliance + / + DEMO Kistenhub CRA + REDESIGN-VORSCHLAG +
+ +
+
+
+ Entwurf + V001 +
+

DEMO Kistenhub CRA

+

Vernetztes Kistenhubgerät mit App-Parametrierung und Fernwartung — Produkt-Compliance an der Schnittstelle von Maschinensicherheit (CE) und Cyber-Resilienz (CRA).

+
+ 🧭 + Wir analysieren — Sie entscheiden mit DSB / Anwalt. Nichts wird automatisch als Verstoß gewertet. +
+
+
+
+ Konformität + 38% +
+
+
+
+
541
+
Tage bis CE-Pflicht
+
+
+
85
+
Tage bis Reporting-Pflicht
+
+
+
+
+ + +
+ + +
+
DREI EBENEN
+ + + +
+ +
+ + +
+ + +
+
+ 1 +

Überblick

+ Was trifft das Produkt — in einem Blick. +
+ +
+ +
+
GELTUNG
+
Fällt unter CRA & Maschinenverordnung
+
Vernetzt & mit Software-Updates → „Produkt mit digitalem Element".
+ +
+ +
+
FRISTEN
+
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.
+
+ +
+
OFFENE PUNKTE
+
6 kritische Anforderungen offen
+
von 40 CRA-Anforderungen. Dazu: 2 Safety-Gefährdungen durch Cyber wieder geöffnet.
+ +
+ +
+
KONFORMITÄTSPFAD
+
Selbstbewertung (Modul A)
+
Kein externes Audit nötig. Technische Doku + Konformitätserklärung bleiben Pflicht.
+
Klassifikation: Standard
+
+
+
+ + +
+
+ 2 +

Cyber trifft Safety

+
+

Der USP sichtbar gemacht: Wo ein Cyber-Befund eine bereits mechanisch gemilderte Gefährdung wieder aufreißt — der Schnittpunkt von Maschinenverordnung und Cyber Resilience Act.

+ + +
+
+
MASCHINENSICHERHEIT · CE
+
3 Gefährdungen bewertet · Risikomatrix: 0 kritisch, 2 mittel
+
+
+
+
⚡
+
2 wieder geöffnet
+
+
+
+
CYBER-RESILIENZ · CRA
+
CRA-Readiness 78% · 6 kritische Befunde offen
+
+
+ + + +
+ +
+
+
+
{{ hz.domain }}
+

{{ hz.name }}

+
+ Restrisiko: wieder offen +
+
+ +
+
+
✓CE — GEMILDERT
+
{{ hz.ce }}
+
+
→
+
+
⚡CYBER-BEFUND
+
{{ hz.cyber }}
+
+
→
+
+
!RESTRISIKO
+
Schutzfunktion aushebelbar — Gefährdung wieder offen
+
+
+ +
+
Warum: {{ hz.mechanism }}
+
+ +
+
EMPFOHLENE MASSNAHMEN
+ +
+ Pflicht + ◇ Empfehlung + {{ m.text }} + {{ m.id }} +
+ +
+ +
+ + +
+
+
AUSLÖSENDE CYBER-BEFUNDE
+
+ + {{ f }} + +
+
+
+
NORM- & ANNEX-BEZUG
+
+ + {{ n }} + +
+
+
+ +
+
+ + + +
+
+

Maßnahmen-Backlog

+ {{ backlogCount }} Maßnahmen · nach Geltung +
+ + + +
+
+ +
+ Pflicht + ◇ Empfehlung + ○ Kann + {{ b.text }} + {{ b.kat }} + {{ b.aufwand }} + {{ b.id }} +
+ +
+
+ + +
+
+ 3 +

Technische Tiefe

+ Für Auditor:innen & Ingenieur:innen — standardmäßig eingeklappt. + +
+ + +
+ +
+
Norm- & Annex-Referenzen
+
+ ISO 12100:2010 + Pflicht + Grundnorm +
+
+ EN 62061 + B-Norm + SIL/Steuerung +
+
+ CRA · Annex I 1(3)(d) + CRA-AI-8 + Auth +
+
+ CRA · Annex I 1(4) + CRA-AI-29 + Updates +
+
Normtexte werden nie reproduziert — nur Nummern, Titel & Abschnitts­verweise. Beschaffung separat (z. B. beuth.de).
+
+ +
+
Risiko-Modelle (zwei pro Gefährdung)
+
+
EN-62061-Stilmittel
+
R = S × (F + W + P) = 3 × (2+3+4) = 27
+
+
+
Fine-Kinney (US)möglich
+
R = P × E × C = 3 × 3 × 7 = 63
+
+
Begründete Vorschlagswerte aus öffentlichen Datenquellen (ESAW/NIOSH/OSHA) — vom Sachverständigen anpassbar.
+
+ +
+
Deterministische Pipelinereproduzierbar ohne LLM
+
+ + {{ p }} + +
+
+
+ + +
Normen, Risiko-Formeln, Pipeline-Trace & Nachweise — eingeklappt.
+ +
+ + +
+
+ ◑ +

Design-Sprache

+
+

Ein konsistentes System für beide Zielgruppen — Anwält:innen/DSB und Ingenieur:innen.

+ +
+ +
+
Geltung — was ist verbindlich?
+
PflichtRechtlich zwingend — gefüllter Marker
+
◇ EmpfehlungBest Practice — Raute, offen
+
○ KannOptional — neutraler Kreis
+
+ +
+
Severity — wie dringend?
+
+ Kritisch + Hoch + Mittel + Niedrig +
+
Getönte Flächen statt Neon-Blöcke — Severity informiert, sie schüchtert nicht ein. Rot ist echten kritischen Punkten und Fristen vorbehalten.
+
+ +
+
Domänen-Farben
+
+
SafetyMaschine / CE
+
CyberCRA / Resilienz
+
SchnittstelleCyber × Safety
+
+
+ +
+
Typografie
+
Public Sans
Klartext führt — Überschriften & UI
+
Source Serif 4
Normzitate & rechtliche Texte
+
CRA-AI-8 · M542
Interne IDs in Mono — nie als Überschrift
+
+ +
+
Leitprinzipien
+
+
①3 Ebenen pro Screen — Überblick → Cyber×Safety → technische Tiefe einklappbar.
+
②Klartext führt — interne IDs nie als Überschrift, in Mono nachgestellt.
+
③Co-Pilot, kein Roboter-Anwalt — keine Panik-Rot-Blöcke, keine Bußgeld-Drohung zuerst.
+
④Pflicht / Empfehlung / Kann — immer visuell getrennt, durchgängig konsistent.
+
+
+
+
+ +
+
+
+
+ + + + diff --git a/design/redesign/CONTENT_INVENTORY.md b/design/redesign/CONTENT_INVENTORY.md new file mode 100644 index 00000000..2692fb35 --- /dev/null +++ b/design/redesign/CONTENT_INVENTORY.md @@ -0,0 +1,81 @@ +# Content-Inventar & Mapping — Redesign-Guardrail (IACE + CRA + Gap) + +> **Zweck:** Sicherstellen, dass das Frontend-Redesign **keine Inhalte verliert.** +> Jeder bestehende Screen/Tab ist hier mit seinen Inhalten erfasst und einem +> neuen Zuhause zugeordnet. Was kein klares Zuhause hat, steht unter +> **„Waisen / Aktiv entscheiden"** — nichts wird stillschweigend entfernt. +> Stand 2026-06-18. Quellen: `ux-screenshots/` + Code (`admin-compliance/app/sdk/…`). + +## Redesign-Modell (so verlieren wir nichts) +1. **Design-Sprache (Tokens) auf ALLE Screens** anwenden — reines Re-Skin, kein Inhaltsverlust. +2. **Projekt-Dashboard → „Arbeitsbereich"** mit 3 Ebenen (Überblick → Cyber×Safety → Technik, eingeklappt). Konsolidiert die *Übersicht*, **verlinkt** in die Detail-Tabs. +3. **Detail-Tabs bleiben** als (re-skinned) Deep-Dive-Seiten, erreichbar aus dem Arbeitsbereich. **Keine Tab-Löschung** ohne explizite Freigabe. +4. **Additiv bauen:** alte Routen bleiben, bis der neue View nachweislich 100 % abdeckt. + +Neue Heimat-Codes: **E1** = Ebene 1 Überblick · **E2** = Ebene 2 Cyber×Safety · **E3** = Ebene 3 Technik · **D** = bleibt Detail-/Deep-Dive-Seite (re-skinned) · **?** = Entscheidung nötig. + +--- + +## IACE — Maschinensicherheit (CE) + +| Screen / Tab | Wesentliche Inhalte (dürfen nicht verloren gehen) | Neue Heimat | +|---|---|---| +| `/iace` (Liste) | Projektkarten (Maschinenname/-typ/Hersteller, Status, Vollständigkeit %, Risiko-Summary), Schnellzugriff Linien+Bibliothek, Prozess-Flow, Neu-Projekt-Form, Init aus Firmenprofil | **D** (Projektliste, re-skinned) | +| `/iace/library` | Tabs Normen / Patterns / Maßnahmen / Dokumente (Counts) | **D** (intern/Referenz) | +| `/iace/lines` + `/lines/[lineId]` | Produktionslinien: Stationen, Aggregat-Panel, Stationsfluss/Transfer | **D** | +| `/iace/[projectId]` (Dashboard) | Statusworkflow, Maschineninfos, Risikozusammenfassung, 6-Schritt-Fortschritt, Compliance-Alerts, Varianten-Panel, Suggested-Norms, 8 Quick-Actions | **→ Arbeitsbereich E1** (Überblick) + Nav | +| `…/order` | Auftraggeber/Auftrag/Angebot/Notizen | **D** | +| `…/interview` (Grenzen) | ISO-12100-Grenzenformular (Bezeichnung, Zweck, Betriebsarten, Fehlanwendungen, räuml./zeitl. Grenzen, Personengruppen…), Init/Reinit | **D** (E1 verlinkt „Grenzen") | +| `…/clarifications` | Klärungen mit Anlagenbauer (Frage, Quelle, Status, Antwort, Begründung, Kommentare, Historie), CSV/PDF-Export, CRA-Banner | **D** | +| `…/classification` | Reg-Klassifikation (AI-Act/MaschVO/CRA/NIS2): Ergebnis, Risiko-Level, Konfidenz, Begründung | **E1** (Geltung) + **D** Detail | +| `…/components` | Komponentenbaum (SW/FW/AI/HMI/HW), present/nicht_vorhanden/gelöscht, CE-Marked, Bibliothek-Import | **D** | +| `…/hazards` | Hazard-Log, 4-Faktor-Risiko (S×F×P×A), Pattern-Match, Bibliothek, KI-Gap-Review, 3 Views (Liste/Risiko/Blöcke), Restrisiko-Filter | **D** (Kern-Detail) | +| `…/mitigations` | Maßnahmen (Design→Schutz→Information), Status, Relevanz, Norm-Refs, OSHA-Abstände, Vorschläge | **D** | +| `…/risikobewertung` | EN-62061 + Fine-Kinney-Modelle, Risiko-Matrix, ESAW/NIOSH/OSHA-Vorschläge, Live-Formeln | **E3** (Risiko-Modelle) + **D** | +| `…/fmea` | FMEA-Worksheet (S×O×D=RPZ), KI-Vorschlag je Komponente, Quelldokumente/Provenienz, Export | **D** | +| `…/operational-states` | 9 ISO-Betriebszustände, Übergänge, Delta-Analyse, Init | **D** | +| `…/verification` | Verifikation (Kundenstandard / Nachweis-Referenz), Stats, Verify-Modal | **D** | +| `…/norms` | Normenrecherche A/B/C, Suggested-Norms, Dokument-Upload | **E3** (Norm-Bezug) + **D** | +| `…/evidence` | Nachweise (Upload, Verknüpfung zu Maßnahmen/Verifikation) | **D** | +| `…/customer-standards` | Maßnahmen aus früheren Kundenprojekten übernehmen (Bulk) | **D** | +| `…/tech-file` | CE-Akte: Sektionen, Generierung, Approval, CID, Export (PDF/Word/HTML) | **D** | +| `…/knowledge-graph` | Komponenten→Gefährdung→Maßnahme als Graph | **E3** / **?** (Auditor-Tool) | +| `…/architektur` | Engine-Architektur, Pipeline-Stufen, Wissensbasen, Datenquellen/Lizenzen | **E3** / **?** (Auditor/intern) | +| `…/benchmark` | Ground-Truth-Vergleich (Coverage %, Korrelation, Abstände) | **?** (Dev/QA — intern gaten?) | +| `…/monitoring` | Post-Market: Ereignisse (Incident/Update/Reg-Change/Feedback), Stats, Resolve | **D** | +| `…/cra` (CE×Cyber) | **Bridge:** CE-Gefährdung durch Cyber wieder geöffnet; ScannerRepoPicker, Weights, CRACyberView, Snapshots | **→ Arbeitsbereich E2 (HERO)** + **D** | + +--- + +## CRA — Cyber Resilience + Gap + Meldewesen + +| Screen / Tab | Wesentliche Inhalte | Neue Heimat | +|---|---|---| +| `/gap-analysis` | Standortbestimmung: ProductWizard, GapDashboard (anwendbare Vorschriften, Lücken, Compliance %, Aufwand), Filter, DSMS-Archiv-CID | **E1**-Einstieg / **D** · **?** Überschneidung mit Intake/Scope | +| `/cra` (Liste) | ReadinessCheck (Producer-Type, Fragen, Verdict, Evidence → Klassifikation), DatasheetExtract, Projektkarten (Klassifikation, Konformitätspfad, Status), Neu-Modal | **D** (Liste + Eingangstür) | +| `/cra/[projectId]` (Dashboard) | Status-Stepper, KPIs (Annex-I-Count, Critical, Tage bis CE-Pflicht, Compliance %), Top-10-Backlog, Info-Karten (Intake/Klassifikation/Pfad/Status), Next-Step | **→ Arbeitsbereich E1** + Nav | +| `…/intake` | Software-Profil (Name, Zweck, Repo, Sprache, Flags: Firmware/Internet/Updates/PII/KRITIS) | **D** | +| `…/scope` | Annex-III/IV-Klassifikation, Begründung | **E1** (Geltung) + **D** | +| `…/path` | Konformitätspfad (Modul A / Harm. Norm / EUCC / Modul B+C), Details, Auswahl | **D** | +| `…/requirements` | 59 Annex-I-Anforderungen, Filter, ISO-27001-Mapping, Maßnahmen, Aufwand | **E3** + **D** | +| `…/backlog` | Priorisierung (Severity×Frist×Aufwand), Score, Maßnahmen, Jira-Export | **E2** (Maßnahmen-Backlog) + **D** | +| `…/checks` | Automatisierte Checks (security.txt/TLS/Update-Policy/CVD), Status, Run | **D** | +| `…/sbom` | SBOM-Upload (CycloneDX/SPDX), Versionen, Scan-Status | **D** | +| `…/vuln` | Schwachstellen + CRA-Meldefristen (24h/72h), CVSS, Reporter, Status | **D** (+ E2-Hinweis) | +| `…/documents` | CRA-Dok-Generierung (DoC, TechDoc, CVD-Policy, Update-Policy, SBOM-Report), Approval, Download | **D** | +| `…/monitoring` | CRA-Stichtage, Reporting-Verstöße, KPIs, Post-Market-Checkliste | **D** | +| `/cra-meldewesen` | Art.-14-Kaskade 24h/72h/14d, Vorfall-Form, Fristen-Countdown, ENISA-Export | **D** (eigener Workflow) | + +--- + +## ⚠️ Waisen / Aktiv entscheiden (vor dem Bau) + +1. **20-Tab-Konsolidierung (IACE):** Der „Arbeitsbereich" ist EIN Screen mit 3 Ebenen — IACE hat 20 Tabs. **Vorschlag:** Tabs bleiben als Detail-Seiten, im Arbeitsbereich nach den bestehenden Flow-Paketen gruppiert (Vorbereitung / Analyse / Doku / Betrieb) statt 20 gleichwertige Tabs. → **Bestätigen.** +2. **Auditor/Dev-Tabs `architektur`, `benchmark`, `knowledge-graph`:** kundenseitig sichtbar lassen oder intern gaten (wie Screening, per `visibleWhen`)? → **Entscheidung.** +3. **Ebene 2 im STANDALONE-CRA-Projekt:** Der echte CE×Cyber-Bridge braucht eine IACE-Maschine (Gefährdungen). Ein reines CRA-Projekt (nur Software) hat keine CE-Gefährdungen. **Was zeigt Ebene 2 dort?** (z. B. „nur Cyber-Risiken" + Hinweis „mit CE-Projekt verknüpfen"). → **Entscheidung.** +4. **Doppelte CRA-Sicht:** `/cra/[projectId]` (standalone CRA-Flow) **und** `/iace/[projectId]/cra` (CE×Cyber im Maschinenprojekt). Beide behalten + klar abgrenzen, oder zusammenführen? → **Entscheidung (kein Löschen ohne OK).** +5. **`gap-analysis` vs. `intake`/`scope`:** beide beantworten „welche Pflichten treffen das Produkt?". Beide behalten (Gap = produktübergreifend, Intake/Scope = pro CRA-Projekt) oder Einstieg zusammenführen? → **Entscheidung.** +6. **`library` (IACE):** Referenz-/Kuratierungs-Tool — kundenseitig oder intern? → **Entscheidung.** + +## Abdeckungs-Zusage +Jeder oben gelistete Screen ist **entweder** einer Ebene (E1/E2/E3) zugeordnet **oder** bleibt als Detail-Seite (**D**) erhalten. Kein Element ist als „entfällt" markiert. Reduktionen passieren nur über die **Waisen-Liste** mit deiner ausdrücklichen Entscheidung. diff --git a/design/redesign/HANDOFF_README.md b/design/redesign/HANDOFF_README.md new file mode 100644 index 00000000..bcf36919 --- /dev/null +++ b/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 `. + +### 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."