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/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>
   )