feat(cra): Eingangstür-Frontend — neutrales Verdict + Hersteller-Typ + Presets

ReadinessCheck erweitert: Hersteller-Typ-Weiche (Komponente/Endgeraet/Anlage-
Maschine/Software-App), Verkauf-ab-2027- und Kunden-Nachfrage-Fragen, Checkliste
vorhandener Nachweise. Neuer Ergebnis-View (ReadinessResult): 3-Tier-Verdict
(zwingend/ratsam/nicht betroffen, Co-Pilot-Ton ohne Panik-Rot) + Reifegrad-%
+ fehlende Nachweise + gefundene digitale Elemente + Pflichten-Uebersicht.
Zwei Demo-Presets (OWIS PS90+ Komponente, ZwickRoell roboTest Anlage+SW).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

admin-compliance/app/sdk/cra/_components/ReadinessCheck.tsx

@@ -1,103 +1,122 @@
 'use client'
 
 import { useState } from 'react'
+import { READINESS_PRESETS, ReadinessPreset } from './readiness-presets'
+import { ReadinessResultView, ReadinessResult } from './ReadinessResult'
 
-interface GuidelineItem {
+const PRODUCER_TYPES = [
-  req_id: string
+  { v: 'component', label: 'Komponente / Zulieferteil', hint: 'z. B. Steuerung, Sensor (B2B)' },
-  title: string
+  { v: 'end_device', label: 'Endgerät', hint: 'fertiges Produkt' },
-  category: string
+  { v: 'machine_integrator', label: 'Anlage / Maschine', hint: 'Integrator — Vernetzung/OTA meist gegeben' },
-  annex_anchor: string
+  { v: 'software_app', label: 'Software / App / Cloud', hint: 'keine eigene Hardware' },
-  severity: string
+]
-  effort_days?: number
+const QUESTIONS = [
-  measures: { id: string; name: string }[]
+  { k: 'is_machinery', label: 'Ist das Produkt eine Maschine oder Anlage?' },
-  source?: string
+  { k: 'connected_to_internet', label: 'Mit Netzwerk / Internet verbunden?' },
-}
+  { k: 'has_firmware', label: 'Enthält Software oder Firmware?' },
-interface ReadinessResult {
+  { k: 'has_software_updates', label: 'Werden Updates bereitgestellt?' },
-  in_scope: boolean
+  { k: 'remote_maintenance', label: 'Gibt es Fernwartungszugänge?' },
-  classification: string
+  { k: 'user_parameter_app', label: 'App / Weboberfläche für Nutzer?' },
-  rationale: string[]
+  { k: 'processes_personal_data', label: 'Werden personenbezogene Daten verarbeitet?' },
-  conformity_path_hint: string
+  { k: 'is_critical_infra_supplier', label: 'Einsatz in kritischen Umgebungen?' },
-  regulations: string[]
+]
-  guideline: { code: GuidelineItem[]; process: GuidelineItem[]; document: GuidelineItem[] }
+const EVIDENCE = [
-  counts: { code: number; process: number; document: number }
+  { k: 'sbom', label: 'SBOM' },
-  total_effort_days: number
+  { k: 'vdp', label: 'Vulnerability-Disclosure-Policy' },
-  deadlines: { date: string; label: string }[]
+  { k: 'patch_process', label: 'Patch-/Update-Prozess' },
-}
+  { k: 'support_lifecycle', label: 'Support-Lifecycle' },
-
+  { k: 'threat_model', label: 'Threat Model' },
-const CLASS_LABEL: Record<string, string> = {
+  { k: 'security_logging', label: 'Security-Logging' },
-  CRITICAL: 'Kritisch', IMPORTANT_II: 'Wichtig (Klasse II)', IMPORTANT_I: 'Wichtig (Klasse I)',
+  { k: 'auth_concept', label: 'Auth-/Passwortkonzept' },
-  STANDARD: 'Standard', NOT_IN_SCOPE: 'Nicht im CRA-Anwendungsbereich',
+  { k: 'incident_process', label: 'Incident-/Meldeprozess' },
-}
-const BUCKETS: { key: 'code' | 'process' | 'document'; label: string; hint: string }[] = [
-  { key: 'code', label: 'Code / Technik', hint: 'im Produkt umzusetzen' },
-  { key: 'process', label: 'Prozesse', hint: 'organisatorisch zu etablieren' },
-  { key: 'document', label: 'Dokumentation', hint: 'nachzuweisen / beizulegen' },
 ]
 
 export function ReadinessCheck({ onCreateProject }: { onCreateProject?: () => void }) {
   const [intendedUse, setIntendedUse] = useState('')
+  const [producerType, setProducerType] = useState('')
   const [flags, setFlags] = useState<Record<string, boolean>>({})
+  const [after2027, setAfter2027] = useState(true)
+  const [customersAsk, setCustomersAsk] = useState(false)
+  const [evidence, setEvidence] = useState<Record<string, boolean>>({})
+  const [digitalElements, setDigitalElements] = useState<string[]>([])
   const [result, setResult] = useState<ReadinessResult | null>(null)
   const [loading, setLoading] = useState(false)
 
   const toggle = (k: string) => setFlags((f) => ({ ...f, [k]: !f[k] }))
+  const toggleEv = (k: string) => setEvidence((e) => ({ ...e, [k]: !e[k] }))
+
+  const applyPreset = (p: ReadinessPreset) => {
+    setIntendedUse(p.intended_use)
+    setProducerType(p.producer_type)
+    setFlags({ ...p.flags })
+    setAfter2027(p.placed_on_market_after_2027)
+    setCustomersAsk(p.customers_request_cra_evidence)
+    setEvidence(Object.fromEntries(p.provided_evidence.map((k) => [k, true])))
+    setDigitalElements(p.digital_elements)
+    setResult(null)
+  }
 
   const run = async () => {
     setLoading(true)
     try {
       const res = await fetch('/api/v1/cra/readiness', {
         method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ intended_use: intendedUse, ...flags }),
+        body: JSON.stringify({
+          intended_use: intendedUse,
+          producer_type: producerType,
+          placed_on_market_after_2027: after2027,
+          customers_request_cra_evidence: customersAsk,
+          provided_evidence: Object.keys(evidence).filter((k) => evidence[k]),
+          digital_elements: digitalElements,
+          ...flags,
+        }),
       })
       setResult(res.ok ? await res.json() : null)
     } finally { setLoading(false) }
   }
 
-  const QUESTIONS: { k: string; label: string }[] = [
-    { k: 'is_machinery', label: 'Ist das Produkt eine Maschine oder Anlage?' },
-    { k: 'connected_to_internet', label: 'Ist das Produkt mit Netzwerken oder dem Internet verbunden?' },
-    { k: 'has_firmware', label: 'Enthält das Produkt Software oder Firmware?' },
-    { k: 'has_software_updates', label: 'Werden Software- oder Firmware-Updates bereitgestellt?' },
-    { k: 'remote_maintenance', label: 'Gibt es Fernwartungszugänge?' },
-    { k: 'user_parameter_app', label: 'Gibt es eine App oder Weboberfläche für Nutzer?' },
-    { k: 'processes_personal_data', label: 'Werden personenbezogene Daten verarbeitet?' },
-    { k: 'is_critical_infra_supplier', label: 'Wird das Produkt in kritischen Umgebungen oder Infrastrukturen eingesetzt?' },
-  ]
-
   return (
     <div className="rounded-xl border border-purple-200 dark:border-purple-800 bg-purple-50/50 dark:bg-purple-900/20 p-5 mb-6">
       <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">CRA-Readiness-Check</h2>
       <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
-        Vernetzte Produkte und Maschinen treffen ab 2027 gleich zwei neue regulatorische Anforderungen:
+        Neutrale Erst-Einschätzung: Fällt Ihr Produkt unter den CRA (Pflicht ab 11.12.2027) oder die
-      </p>
+        Maschinenverordnung — und welche Nachweise fehlen noch? Maßgeblich ist das <span className="font-medium">Inverkehrbringen</span>,
-      <ul className="text-sm text-gray-600 dark:text-gray-300 mt-1 ml-1 space-y-0.5">
+        nicht der Entwicklungszeitpunkt. Auch Bestandsprodukte, die nach 2027 noch verkauft werden, sind betroffen.
-        <li>• <span className="font-medium">Cyber Resilience Act (CRA)</span> — Herstellerpflichten ab 11.12.2027</li>
-        <li>• <span className="font-medium">Maschinenverordnung (EU) 2023/1230</span> — Anwendung ab 20.01.2027</li>
-      </ul>
-      <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
-        Während der CRA die Cybersecurity vernetzter Produkte über ihren gesamten Lebenszyklus regelt, verlangt die
-        neue Maschinenverordnung Schutzmaßnahmen gegen <span className="font-medium">digitale Manipulationen, soweit diese
-        Auswirkungen auf die Sicherheit von Personen</span> haben können.
-      </p>
-      <p className="text-xs text-gray-500 mt-2">
-        Mit wenigen Fragen erhalten Sie eine erste Einschätzung, welche Anforderungen für Ihr Produkt relevant werden
-        und welche Maßnahmen in den Bereichen Entwicklung, Dokumentation, Risikobeurteilung, Updates und Prozesse erforderlich sind.
-      </p>
-      <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">
-        Der CRA verlangt mehr als einen jährlichen Penetrationstest: Hersteller müssen Cyber-Risiken über den gesamten
-        Produktlebenszyklus bewerten, dokumentieren und behandeln — von der Entwicklung bis zur Bereitstellung von Sicherheitsupdates.
-      </p>
-      <p className="text-xs text-purple-700 dark:text-purple-300 font-medium mt-2 mb-4">
-        Wir prüfen nicht nur die CRA-Konformität — wir übersetzen regulatorische Anforderungen direkt in Risiken,
-        Maßnahmen, Tickets, Evidenzen und technische Umsetzungsaufgaben. (We turn regulation into code.)
       </p>
 
+      {/* Demo-Presets */}
+      <div className="flex flex-wrap items-center gap-2 mt-3">
+        <span className="text-xs text-gray-500">Beispiel laden:</span>
+        {READINESS_PRESETS.map((p) => (
+          <button key={p.id} onClick={() => applyPreset(p)} title={p.sublabel}
+            className="rounded border border-purple-300 dark:border-purple-700 bg-white dark:bg-gray-800 text-purple-700 dark:text-purple-300 text-xs px-2 py-1 hover:bg-purple-100">
+            {p.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Hersteller-Typ */}
+      <p className="text-xs font-medium text-gray-600 dark:text-gray-300 mt-4 mb-1">Was bringen Sie in Verkehr?</p>
+      <div className="grid sm:grid-cols-4 gap-2">
+        {PRODUCER_TYPES.map((t) => (
+          <button key={t.v} onClick={() => setProducerType(t.v)}
+            className={`rounded border p-2 text-left text-xs ${
+              producerType === t.v
+                ? 'border-purple-500 bg-purple-100 dark:bg-purple-900/40'
+                : 'border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 hover:border-purple-300'}`}>
+            <span className="font-medium text-gray-800 dark:text-gray-200">{t.label}</span>
+            <span className="block text-[10px] text-gray-400">{t.hint}</span>
+          </button>
+        ))}
+      </div>
+
       <textarea
         value={intendedUse} onChange={(e) => setIntendedUse(e.target.value)}
-        placeholder="Was tut das Produkt? (z. B. vernetztes Kistenhubgerät mit App-Steuerung und Fernwartung)"
+        placeholder="Was tut das Produkt? (Schnittstellen, Software, Vernetzung …)"
-        className="w-full text-sm rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 p-2 mb-3" rows={2}
+        className="w-full text-sm rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 p-2 mt-3 mb-3" rows={2}
       />
-      <div className="grid sm:grid-cols-2 gap-2 mb-4">
+
+      <div className="grid sm:grid-cols-2 gap-2 mb-3">
         {QUESTIONS.map((q) => (
           <label key={q.k} className="flex items-center gap-2 text-xs text-gray-700 dark:text-gray-300">
             <input type="checkbox" checked={!!flags[q.k]} onChange={() => toggle(q.k)} className="rounded" />
@@ -105,79 +124,36 @@ export function ReadinessCheck({ onCreateProject }: { onCreateProject?: () => vo
           </label>
         ))}
       </div>
+
+      {/* Verdict-relevante Fragen */}
+      <div className="grid sm:grid-cols-2 gap-2 mb-3">
+        <label className="flex items-center gap-2 text-xs font-medium text-gray-700 dark:text-gray-300">
+          <input type="checkbox" checked={after2027} onChange={() => setAfter2027((b) => !b)} className="rounded" />
+          Wird ab dem 11.12.2027 (noch) verkauft / in Verkehr gebracht?
+        </label>
+        <label className="flex items-center gap-2 text-xs font-medium text-gray-700 dark:text-gray-300">
+          <input type="checkbox" checked={customersAsk} onChange={() => setCustomersAsk((b) => !b)} className="rounded" />
+          Fragen Kunden bereits CRA-Nachweise an?
+        </label>
+      </div>
+
+      {/* Vorhandene Nachweise → Reifegrad */}
+      <p className="text-xs text-gray-500 mb-1">Welche Nachweise haben Sie bereits?</p>
+      <div className="grid sm:grid-cols-4 gap-1.5 mb-4">
+        {EVIDENCE.map((e) => (
+          <label key={e.k} className="flex items-center gap-1.5 text-[11px] text-gray-700 dark:text-gray-300">
+            <input type="checkbox" checked={!!evidence[e.k]} onChange={() => toggleEv(e.k)} className="rounded" />
+            {e.label}
+          </label>
+        ))}
+      </div>
+
       <button onClick={run} disabled={loading}
         className="rounded bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white text-sm px-4 py-2">
         {loading ? 'Prüfe …' : 'CRA-Readiness prüfen'}
       </button>
 
-      {result && (
+      {result && <ReadinessResultView result={result} onCreateProject={onCreateProject} />}
-        <div className="mt-5">
-          {!result.in_scope ? (
-            <p className="text-sm text-gray-700 dark:text-gray-200">
-              Nach diesen Angaben fällt das Produkt <span className="font-semibold">nicht in den CRA-Anwendungsbereich</span>
-              {' '}(kein digitales Element erkannt). Sobald es vernetzt ist oder Updates bekommt, ändert sich das.
-            </p>
-          ) : (
-            <>
-              <div className="flex flex-wrap items-center gap-2 mb-1">
-                <span className="text-sm text-gray-600 dark:text-gray-300">Einstufung:</span>
-                <span className="rounded px-2 py-0.5 text-xs font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
-                  {CLASS_LABEL[result.classification] || result.classification}
-                </span>
-                <span className="text-xs text-gray-500">· Konformität: {result.conformity_path_hint}</span>
-              </div>
-              <div className="flex flex-wrap items-center gap-1 mb-1">
-                <span className="text-xs text-gray-500">Betroffene Verordnungen:</span>
-                {result.regulations.map((r) => (
-                  <span key={r} className="rounded px-1.5 py-0.5 text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">{r}</span>
-                ))}
-              </div>
-              <p className="text-xs text-gray-500 mb-3">
-                {result.counts.code + result.counts.process + result.counts.document} Pflichten · grobe Schätzung
-                ~{result.total_effort_days} Personentage. Das ist ein Überblick zur Klärung — keine Rechtsberatung.
-              </p>
-
-              <div className="grid md:grid-cols-3 gap-3">
-                {BUCKETS.map((b) => (
-                  <div key={b.key} className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
-                    <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200">{b.label}
-                      <span className="ml-1 text-[10px] font-normal text-gray-400">({result.counts[b.key]} · {b.hint})</span>
-                    </h3>
-                    <ul className="mt-2 space-y-1.5">
-                      {result.guideline[b.key].map((it) => (
-                        <li key={it.req_id} className="text-[11px] text-gray-600 dark:text-gray-300">
-                          {it.source === 'Maschinen-VO' && (
-                            <span className="inline-block rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300 px-1 py-0.5 text-[9px] font-medium mr-1">MaschVO</span>
-                          )}
-                          <span className="font-medium text-gray-800 dark:text-gray-200">{it.title}</span>
-                          <span className="text-gray-400"> · {it.annex_anchor}</span>
-                          {it.measures.length > 0 && (
-                            <span className="text-gray-400"> · {it.measures.map((m) => m.id).join(', ')}</span>
-                          )}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                ))}
-              </div>
-
-              <div className="flex flex-wrap gap-3 mt-3 text-[11px] text-gray-500">
-                <span className="font-medium text-gray-600 dark:text-gray-300">CRA-Fristen:</span>
-                {result.deadlines.map((d) => (
-                  <span key={d.date}><span className="font-mono">{d.date}</span> {d.label}</span>
-                ))}
-              </div>
-
-              {onCreateProject && (
-                <button onClick={onCreateProject}
-                  className="mt-4 rounded bg-purple-600 hover:bg-purple-700 text-white text-sm px-4 py-2">
-                  Projekt anlegen & Checkliste abarbeiten — wir setzen es mit Ihnen um
-                </button>
-              )}
-            </>
-          )}
-        </div>
-      )}
     </div>
   )
 }

admin-compliance/app/sdk/cra/_components/ReadinessResult.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+interface GuidelineItem {
+  req_id: string
+  title: string
+  annex_anchor: string
+  measures: { id: string; name: string }[]
+  source?: string
+}
+interface EvidenceItem { key: string; label: string }
+export interface ReadinessResult {
+  in_scope: boolean
+  classification: string
+  rationale: string[]
+  conformity_path_hint: string
+  regulations: string[]
+  guideline: { code: GuidelineItem[]; process: GuidelineItem[]; document: GuidelineItem[] }
+  counts: { code: number; process: number; document: number }
+  total_effort_days: number
+  deadlines: { date: string; label: string }[]
+  verdict?: {
+    tier: string
+    label: string
+    in_scope: boolean
+    market_pull: boolean
+    cra_class: string
+    cutoff: string
+    reasons: string[]
+  }
+  maturity?: { pct: number; present: EvidenceItem[]; missing: EvidenceItem[]; total: number }
+  digital_elements?: string[]
+  producer_type?: string
+}
+
+const CLASS_LABEL: Record<string, string> = {
+  CRITICAL: 'Kritisch', IMPORTANT_II: 'Wichtig (Klasse II)', IMPORTANT_I: 'Wichtig (Klasse I)',
+  STANDARD: 'Standard', NOT_IN_SCOPE: 'Nicht im CRA-Anwendungsbereich',
+}
+const BUCKETS: { key: 'code' | 'process' | 'document'; label: string; hint: string }[] = [
+  { key: 'code', label: 'Code / Technik', hint: 'im Produkt umzusetzen' },
+  { key: 'process', label: 'Prozesse', hint: 'organisatorisch zu etablieren' },
+  { key: 'document', label: 'Dokumentation', hint: 'nachzuweisen / beizulegen' },
+]
+// Neutral, Co-Pilot tone — no panic red. zwingend = attention (amber), ratsam =
+// advisory (blue), nicht betroffen = positive (emerald).
+const TIER_STYLE: Record<string, string> = {
+  zwingend: 'border-amber-300 bg-amber-50 dark:bg-amber-900/20 text-amber-900 dark:text-amber-200',
+  ratsam: 'border-blue-300 bg-blue-50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-200',
+  nicht_betroffen: 'border-emerald-300 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-900 dark:text-emerald-200',
+}
+
+export function ReadinessResultView({ result, onCreateProject }: { result: ReadinessResult; onCreateProject?: () => void }) {
+  const v = result.verdict
+  const m = result.maturity
+
+  return (
+    <div className="mt-5 space-y-4">
+      {/* Neutrales Verdict — Rechtspflicht vs. Marktzwang */}
+      {v && (
+        <div className={`rounded-xl border p-4 ${TIER_STYLE[v.tier] || TIER_STYLE.ratsam}`}>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-base font-semibold">{v.label}</span>
+            {v.market_pull && (
+              <span className="rounded bg-white/60 dark:bg-black/20 px-2 py-0.5 text-xs font-medium">Markt-Druck: Kunden fordern Nachweise</span>
+            )}
+          </div>
+          <ul className="mt-2 space-y-0.5 text-sm">
+            {v.reasons.map((r, i) => <li key={i}>• {r}</li>)}
+          </ul>
+          <p className="mt-2 text-xs opacity-80">
+            Hinweis: Maßgeblich ist das <strong>Inverkehrbringen</strong> (ab {v.cutoff}), nicht der Entwicklungszeitpunkt.
+            Das ist eine erste Einschätzung zur Klärung mit DSB/Anwalt — keine Rechtsberatung.
+          </p>
+        </div>
+      )}
+
+      {/* Reifegrad + digitale Elemente */}
+      <div className="grid md:grid-cols-2 gap-3">
+        {m && (
+          <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
+            <div className="flex items-baseline justify-between">
+              <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Reifegrad (CRA-Nachweise)</h3>
+              <span className="text-2xl font-bold text-gray-900 dark:text-gray-100">{m.pct}%</span>
+            </div>
+            <div className="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+              <div className="h-2 bg-emerald-500" style={{ width: `${m.pct}%` }} />
+            </div>
+            {m.missing.length > 0 && (
+              <div className="mt-2">
+                <p className="text-xs text-gray-500 mb-1">Fehlende Nachweise:</p>
+                <ul className="space-y-0.5">
+                  {m.missing.map((e) => (
+                    <li key={e.key} className="text-xs text-gray-700 dark:text-gray-300">• {e.label}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+        {result.digital_elements && result.digital_elements.length > 0 && (
+          <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
+            <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200">
+              Gefundene digitale Elemente <span className="text-gray-400 font-normal">({result.digital_elements.length})</span>
+            </h3>
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {result.digital_elements.map((d) => (
+                <span key={d} className="rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 px-2 py-0.5 text-xs">{d}</span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Einstufung + Pflichten-Übersicht (wie bisher) */}
+      {result.in_scope && (
+        <>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-sm text-gray-600 dark:text-gray-300">CRA-Einstufung:</span>
+            <span className="rounded px-2 py-0.5 text-xs font-semibold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
+              {CLASS_LABEL[result.classification] || result.classification}
+            </span>
+            <span className="text-xs text-gray-500">· Konformität: {result.conformity_path_hint}</span>
+            {result.regulations.map((r) => (
+              <span key={r} className="rounded px-1.5 py-0.5 text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">{r}</span>
+            ))}
+          </div>
+          <p className="text-xs text-gray-500">
+            {result.counts.code + result.counts.process + result.counts.document} Pflichten · grobe Schätzung
+            ~{result.total_effort_days} Personentage.
+          </p>
+          <div className="grid md:grid-cols-3 gap-3">
+            {BUCKETS.map((b) => (
+              <div key={b.key} className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3">
+                <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200">{b.label}
+                  <span className="ml-1 text-[10px] font-normal text-gray-400">({result.counts[b.key]} · {b.hint})</span>
+                </h3>
+                <ul className="mt-2 space-y-1.5">
+                  {result.guideline[b.key].map((it) => (
+                    <li key={it.req_id} className="text-[11px] text-gray-600 dark:text-gray-300">
+                      {it.source === 'Maschinen-VO' && (
+                        <span className="inline-block rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300 px-1 py-0.5 text-[9px] font-medium mr-1">MaschVO</span>
+                      )}
+                      <span className="font-medium text-gray-800 dark:text-gray-200">{it.title}</span>
+                      <span className="text-gray-400"> · {it.annex_anchor}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+          <div className="flex flex-wrap gap-3 text-[11px] text-gray-500">
+            <span className="font-medium text-gray-600 dark:text-gray-300">CRA-Fristen:</span>
+            {result.deadlines.map((d) => (
+              <span key={d.date}><span className="font-mono">{d.date}</span> {d.label}</span>
+            ))}
+          </div>
+        </>
+      )}
+
+      {onCreateProject && (
+        <button onClick={onCreateProject}
+          className="rounded bg-purple-600 hover:bg-purple-700 text-white text-sm px-4 py-2">
+          Projekt anlegen & Cyber-Akte aufbauen — wir setzen es mit Ihnen um
+        </button>
+      )}
+    </div>
+  )
+}

admin-compliance/app/sdk/cra/_components/readiness-presets.ts

@@ -0,0 +1,54 @@
+// Demo presets for the CRA readiness entrance door — two real, contrasting
+// manufacturer archetypes so the flow is tangible. Data grounded in public
+// datasheets (owis.eu PS 90+, zwickroell.com roboTest / testXpert).
+
+export interface ReadinessPreset {
+  id: string
+  label: string
+  sublabel: string
+  intended_use: string
+  producer_type: string
+  flags: Record<string, boolean>
+  placed_on_market_after_2027: boolean
+  customers_request_cra_evidence: boolean
+  digital_elements: string[]
+  provided_evidence: string[]
+}
+
+export const READINESS_PRESETS: ReadinessPreset[] = [
+  {
+    id: 'owis',
+    label: 'OWIS PS 90+',
+    sublabel: 'Positioniersteuerung — Komponente',
+    intended_use:
+      'Universelle Positioniersteuerung (bis 9 Achsen) zur Ansteuerung von Motoren und Bremsen in Automatisierungsanlagen — mit Ethernet, USB, RS232, optionalem Anybus (Modbus/TCP), SPS-I/O, Triggerfunktionen und Software-SDK.',
+    producer_type: 'component',
+    flags: { connected_to_internet: true, has_firmware: true, has_software_updates: true },
+    placed_on_market_after_2027: true,
+    customers_request_cra_evidence: true,
+    digital_elements: [
+      'Ethernet', 'USB', 'RS232', 'Anybus (Modbus/TCP)', 'SDK (C/C++/C#/LabView)',
+      'SPS-I/O', 'Firmware', 'OWISoft', 'Triggerfunktionen',
+    ],
+    provided_evidence: [],
+  },
+  {
+    id: 'zwick',
+    label: 'ZwickRoell roboTest',
+    sublabel: 'Automatisiertes Prüfsystem + testXpert — Anlage & Software',
+    intended_use:
+      'Automatisiertes Prüfsystem mit Roboter-Probenhandling (24/7-Betrieb), Software autoEdition + testXpert (Windows), volle Prozesssteuerung per Browser, Status auf Tablet-PCs, direkte Datenanbindung an Host-Systeme sowie Benutzer- und Rechteverwaltung.',
+    producer_type: 'machine_integrator',
+    flags: {
+      is_machinery: true, connected_to_internet: true, has_firmware: true,
+      has_software_updates: true, remote_maintenance: true, user_parameter_app: true,
+    },
+    placed_on_market_after_2027: true,
+    customers_request_cra_evidence: false,
+    digital_elements: [
+      'Roboter-Steuerung', 'autoEdition', 'testXpert (Windows)', 'Browser-Prozesssteuerung',
+      'Tablet-Status', 'Host-System-Anbindung', 'Benutzer-/Rechteverwaltung', 'Barcode/QR-Scanner',
+    ],
+    provided_evidence: ['support_lifecycle'],
+  },
+]