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>
+  )
+}