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>

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 (
+    <section style={{ marginTop: 38 }}>
+      <h2 className="font-publicSans" style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.01em', color: COLORS.ink }}>{title}</h2>
+      <div style={{ marginTop: 14 }}>{children}</div>
+    </section>
+  )
+}
+
+function Swatch({ name, hex }: { name: string; hex: string }) {
+  return (
+    <div className="font-publicSans" style={{ fontSize: 12 }}>
+      <div style={{ height: 44, borderRadius: 10, background: hex, border: `1px solid ${COLORS.border}` }} />
+      <div style={{ marginTop: 6, color: COLORS.ink, fontWeight: 600 }}>{name}</div>
+      <div className="font-plexMono" style={{ color: COLORS.faint, fontSize: 11 }}>{hex}</div>
+    </div>
+  )
+}
+
+export default function DesignSystemPage() {
+  return (
+    <div className="font-publicSans" style={{ background: COLORS.page, minHeight: '100%', margin: -24, padding: '30px 24px 90px' }}>
+      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
+        <h1 style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.02em', color: COLORS.ink, lineHeight: 1.1 }}>
+          Design-Sprache
+        </h1>
+        <p style={{ marginTop: 8, color: COLORS.muted, fontSize: 14, maxWidth: 640 }}>
+          Schritt A — Tokens & Bausteine des Redesigns (Geltung, Severity, Domänen, Typografie).
+          Referenz: <span className="font-plexMono" style={{ fontSize: 12 }}>design/redesign/HANDOFF_README.md</span>.
+        </p>
+
+        <Section title="Geltung — Pflicht / Empfehlung / Kann">
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+            <GeltungChip value="pflicht" />
+            <GeltungChip value="empfehlung" />
+            <GeltungChip value="kann" />
+            <span style={{ color: COLORS.faint, fontSize: 12 }}>+ Klartext-Maßnahme</span>
+            <MonoId>M542</MonoId>
+          </div>
+        </Section>
+
+        <Section title="Severity — Dringlichkeit (getönt, kein Neon)">
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
+            <SeverityChip value="kritisch" />
+            <SeverityChip value="hoch" />
+            <SeverityChip value="mittel" />
+            <SeverityChip value="niedrig" />
+          </div>
+        </Section>
+
+        <Section title="Domänen — Safety / Cyber / Schnittstelle">
+          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 14 }}>
+            <DomainTag value="safety" />
+            <DomainTag value="cyber" />
+            <DomainTag value="bridge" />
+          </div>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
+            {(['safety', 'cyber', 'bridge'] as const).map((k) => (
+              <div key={k} style={{ background: DOMAIN[k].tint, border: `1px solid ${DOMAIN[k].border}`, borderLeft: `4px solid ${DOMAIN[k].accent}`, borderRadius: 12, padding: 14 }}>
+                <div style={{ fontWeight: 700, color: DOMAIN[k].accent, fontSize: 13 }}>{DOMAIN[k].label}</div>
+                <div className="font-plexMono" style={{ color: COLORS.faint, fontSize: 11, marginTop: 4 }}>{DOMAIN[k].accent}</div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        <Section title="Typografie">
+          <div style={{ display: 'grid', gap: 10 }}>
+            <div className="font-publicSans" style={{ fontSize: 18, fontWeight: 800, color: COLORS.ink }}>Public Sans — UI & Überschriften (800)</div>
+            <div className="font-sourceSerif" style={{ fontSize: 15, fontStyle: 'italic', color: COLORS.muted }}>Source Serif 4 — Normzitate / rechtliche Texte (kursiv)</div>
+            <div className="font-plexMono" style={{ fontSize: 13, color: COLORS.muted }}>IBM Plex Mono — interne IDs · CRA-AI-8 · R = S × (F + W + P)</div>
+          </div>
+        </Section>
+
+        <Section title="Neutrale & Marke">
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12 }}>
+            <Swatch name="bg/page" hex={COLORS.page} />
+            <Swatch name="surface" hex={COLORS.surface} />
+            <Swatch name="border" hex={COLORS.border} />
+            <Swatch name="ink" hex={COLORS.ink} />
+            <Swatch name="primary" hex={COLORS.brand} />
+          </div>
+        </Section>
+
+        <Section title="Leitprinzipien">
+          <div style={{ background: COLORS.panel, borderRadius: 14, padding: 22 }}>
+            <ol style={{ color: COLORS.panelText2, fontSize: 13, lineHeight: 1.7, paddingLeft: 0, listStyle: 'none' }}>
+              {[
+                '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) => (
+                <li key={i} style={{ display: 'flex', gap: 10, marginBottom: 6 }}>
+                  <span className="font-plexMono" style={{ color: COLORS.panelAccent, fontWeight: 600 }}>{i + 1}</span>
+                  <span style={{ color: COLORS.panelText }}>{t}</span>
+                </li>
+              ))}
+            </ol>
+          </div>
+        </Section>
+      </div>
+    </div>
+  )
+}

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 (
+    <div style={{ flex: 1, minWidth: 200, background: s.bg, border: `1px solid ${s.border}`, borderRadius: 12, padding: '12px 14px' }}>
+      <div className="font-publicSans" style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: s.accent }}>
+        <span aria-hidden>{marker}</span>{label}
+      </div>
+      <div className="font-publicSans" style={{ marginTop: 6, fontSize: 12.5, color: COLORS.ink, lineHeight: 1.4 }}>{text}</div>
+    </div>
+  )
+}
+
+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 (
+    <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 16, padding: 20 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' }}>
+        <div>
+          <div className="font-publicSans" style={{ fontSize: 11, color: COLORS.muted2, fontWeight: 600 }}>Mechanische Gefährdung</div>
+          <h3 className="font-publicSans" style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.01em', color: COLORS.ink, marginTop: 2 }}>{link.safety_hazard}</h3>
+        </div>
+        <span className="font-publicSans" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#FBECEA', color: '#A23323', border: '1px solid #F3D2CC', borderRadius: 999, padding: '4px 11px', fontSize: 11.5, fontWeight: 700 }}>
+          <span aria-hidden style={{ width: 7, height: 7, borderRadius: 2, background: '#C0362C', display: 'inline-block' }} />
+          Restrisiko: wieder offen
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
+        <ChainNode tone="ce" marker="✓" label="CE — gemildert" text={link.original_measure} />
+        <span aria-hidden style={{ color: '#C5A86F', fontSize: 18 }}>→</span>
+        <ChainNode tone="cyber" marker="⚡" label="Cyber-Befund" text={cyberText} />
+        <span aria-hidden style={{ color: '#C5A86F', fontSize: 18 }}>→</span>
+        <ChainNode tone="residual" marker="!" label="Restrisiko" text="Schutzfunktion aushebelbar — Gefährdung wieder offen" />
+      </div>
+
+      <div style={{ marginTop: 14, background: '#FBFAF7', border: '1px solid #EFEADF', borderRadius: 11, padding: '12px 14px' }}>
+        <span className="font-publicSans" style={{ fontWeight: 700, color: DOMAIN.bridge.warn, fontSize: 12.5 }}>Warum: </span>
+        <span className="font-publicSans" style={{ color: COLORS.ink, fontSize: 13, lineHeight: 1.5 }}>{link.cyber_breaks_it}</span>
+      </div>
+
+      {measureObjs.length > 0 && (
+        <div style={{ marginTop: 14 }}>
+          <div className="font-publicSans" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: COLORS.muted2, marginBottom: 8 }}>Empfohlene Maßnahmen</div>
+          <ul style={{ display: 'grid', gap: 8, margin: 0, padding: 0, listStyle: 'none' }}>
+            {measureObjs.map((m) => (
+              <li key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                <GeltungChip value={measureGeltung(m.name, m.id)} />
+                <span className="font-publicSans" style={{ flex: 1, fontSize: 13, color: COLORS.ink }}>{m.name}</span>
+                <MonoId>{m.id}</MonoId>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <div style={{ marginTop: 14, borderTop: `1px solid ${COLORS.borderSoft}`, paddingTop: 12 }}>
+        <button onClick={() => setOpen((v) => !v)} className="font-publicSans" style={{ background: 'none', border: 'none', cursor: 'pointer', color: COLORS.brandText, fontSize: 12.5, fontWeight: 600, padding: 0 }}>
+          {open ? '▾' : '▸'} Auslösende Befunde & Norm-Bezug (Ebene 3)
+        </button>
+        {open && (
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 16, marginTop: 12 }}>
+            <div>
+              <div className="font-publicSans" style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: COLORS.muted2, marginBottom: 6 }}>Auslösende Cyber-Befunde</div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                {triggers.map((f) => <MonoId key={f.id} className="rounded px-2 py-1" >{f.location || f.id}</MonoId>)}
+              </div>
+            </div>
+            <div>
+              <div className="font-publicSans" style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: COLORS.muted2, marginBottom: 6 }}>Norm- & Annex-Bezug</div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+                {normPills.map((n) => (
+                  <span key={n} className="font-plexMono" style={{ fontSize: 11, background: COLORS.brandTint, color: COLORS.brandText, borderRadius: 6, padding: '3px 8px' }}>{n}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+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 (
+      <div style={{ background: DOMAIN.cyber.tint, border: `1px solid ${DOMAIN.cyber.border}`, borderRadius: 14, padding: 18 }}>
+        <div className="font-publicSans" style={{ fontWeight: 700, color: COLORS.ink }}>Cyber trifft Safety</div>
+        <p className="font-publicSans" style={{ fontSize: 13, color: COLORS.muted, marginTop: 4 }}>
+          Aktuell keine Cyber-Befunde, die eine CE-Gefährdung wieder öffnen. Sobald Befunde vorliegen, erscheinen sie hier.
+        </p>
+      </div>
+    )
+  }
+
+  const backlog = measures.map((m) => ({ m, g: measureGeltung(m.name, m.id) }))
+    .filter((x) => filter === 'alle' || x.g === filter)
+
+  return (
+    <section style={{ display: 'grid', gap: 14 }}>
+      {/* Domänen-Bar */}
+      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 16, display: 'flex', gap: 12, alignItems: 'stretch', flexWrap: 'wrap' }}>
+        <div style={{ flex: 1, minWidth: 180, borderLeft: `4px solid ${DOMAIN.safety.accent}`, paddingLeft: 12 }}>
+          <div className="font-publicSans" style={{ fontWeight: 700, color: DOMAIN.safety.accent, fontSize: 13 }}>Safety (Maschine / CE)</div>
+          <div className="font-publicSans" style={{ fontSize: 12, color: COLORS.muted, marginTop: 2 }}>Mechanisch gemilderte Gefährdungen</div>
+        </div>
+        <div style={{ minWidth: 180, background: DOMAIN.bridge.tint, border: `1px solid ${DOMAIN.bridge.border}`, borderRadius: 10, padding: '10px 14px', textAlign: 'center' }}>
+          <div className="font-publicSans" style={{ fontSize: 20 }} aria-hidden>⚡</div>
+          <div className="font-publicSans" style={{ fontWeight: 800, color: DOMAIN.bridge.warn, fontSize: 14 }}>{links.length} wieder geöffnet</div>
+        </div>
+        <div style={{ flex: 1, minWidth: 180, borderLeft: `4px solid ${DOMAIN.cyber.accent}`, paddingLeft: 12 }}>
+          <div className="font-publicSans" style={{ fontWeight: 700, color: DOMAIN.cyber.accent, fontSize: 13 }}>Cyber (CRA)</div>
+          <div className="font-publicSans" style={{ fontSize: 12, color: COLORS.muted, marginTop: 2 }}>Befunde, die Schutzfunktionen aushebeln</div>
+        </div>
+      </div>
+
+      {links.map((link, i) => (
+        <HazardCard key={i} link={link} findings={data.findings} measures={measures} defaultOpen={i === 0} />
+      ))}
+
+      {/* Maßnahmen-Backlog */}
+      <div style={{ background: COLORS.surface, border: `1px solid ${COLORS.border}`, borderRadius: 14, padding: 18 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+          <div className="font-publicSans" style={{ fontWeight: 800, color: COLORS.ink, fontSize: 15 }}>
+            Maßnahmen-Backlog <span style={{ fontWeight: 500, color: COLORS.faint }}>· {measures.length} Maßnahmen · nach Geltung</span>
+          </div>
+          <div style={{ display: 'flex', gap: 4, background: COLORS.page, borderRadius: 8, padding: 3 }}>
+            {(['alle', 'pflicht', 'empfehlung'] as const).map((f) => (
+              <button key={f} onClick={() => setFilter(f)} className="font-publicSans"
+                style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: 'none', cursor: 'pointer', borderRadius: 6, padding: '4px 10px', fontSize: 12, fontWeight: 600,
+                  background: filter === f ? COLORS.surface : 'transparent', color: filter === f ? COLORS.ink : COLORS.muted }}>
+                {filter === f && <span aria-hidden style={{ width: 6, height: 6, borderRadius: 999, background: COLORS.brand, display: 'inline-block' }} />}
+                {f === 'alle' ? 'Alle' : f === 'pflicht' ? 'Pflicht' : 'Empfehlung'}
+              </button>
+            ))}
+          </div>
+        </div>
+        <ul style={{ marginTop: 12, display: 'grid', gap: 2, padding: 0, listStyle: 'none' }}>
+          {backlog.map(({ m, g }) => (
+            <li key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0', borderTop: `1px solid ${COLORS.borderSoft}` }}>
+              <span style={{ width: 96 }}><GeltungChip value={g} /></span>
+              <span className="font-publicSans" style={{ flex: 1, fontSize: 13, color: COLORS.ink }}>{m.name}</span>
+              <span className="font-publicSans" style={{ width: 200, fontSize: 12, color: COLORS.faint }}>{m.norm_refs?.[0] || 'Sicherheit'}</span>
+              <MonoId>{m.id}</MonoId>
+            </li>
+          ))}
+          {backlog.length === 0 && <li className="font-publicSans" style={{ fontSize: 13, color: COLORS.faint, paddingTop: 8 }}>Keine Maßnahmen in diesem Filter.</li>}
+        </ul>
+      </div>
+    </section>
+  )
+}

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() {
       )}
       <ScannerRepoPicker value={scannerRepo} onChange={setScannerRepo} />
       <WeightsControl weights={weights} onChange={setWeights} />
-      <CRACyberView data={data} scannerRepo={scannerRepo} />
+
+      {/* Ebene 2 — Cyber trifft Safety (Redesign, neue Design-Sprache) */}
+      <div>
+        <h2 className="font-publicSans" style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.01em', color: '#1A1D29', marginBottom: 12 }}>
+          Cyber trifft Safety
+        </h2>
+        <CyberMeetsSafety data={data} />
+      </div>
+
+      {/* Bisherige Detailansicht (bleibt erhalten, bis das Redesign 100% abdeckt) */}
+      <details className="rounded-lg border border-gray-200 dark:border-gray-700">
+        <summary className="cursor-pointer px-4 py-2 text-sm text-gray-500">Bisherige Detailansicht (CRACyberView)</summary>
+        <div className="p-1">
+          <CRACyberView data={data} scannerRepo={scannerRepo} />
+        </div>
+      </details>
       <SnapshotPanel snapshots={snapshots} onSave={saveSnapshot} onView={viewSnapshot} />
     </div>
   )