Benjamin Bönisch
42d4b4d9c5
CI / detect-changes (push) Successful in 19s
CI / branch-name (push) Has been skipped
CI / guardrail-integrity (push) Has been skipped
CI / secret-scan (push) Has been skipped
CI / dep-audit (push) Has been skipped
CI / sbom-scan (push) Has been skipped
CI / build-sha-integrity (push) Successful in 7s
CI / validate-canonical-controls (push) Successful in 4s
CI / loc-budget (push) Successful in 21s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / nodejs-build (push) Successful in 3m13s
CI / test-go (push) Has been skipped
CI / iace-gt-coverage (push) Has been skipped
CI / test-python-backend (push) Has been skipped
CI / test-python-document-crawler (push) Has been skipped
CI / test-python-dsms-gateway (push) Has been skipped
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>
502 lines
43 KiB
HTML
502 lines
43 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*{box-sizing:border-box}
|
||
html,body{margin:0;padding:0}
|
||
body{background:#EDEFF3;font-family:'Public Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;color:#1A1D29}
|
||
::selection{background:#DCD8FB}
|
||
a{color:inherit}
|
||
button{font-family:inherit}
|
||
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||
</style>
|
||
</helmet>
|
||
|
||
<div style="min-height:100vh;background:#EDEFF3;padding:30px 24px 90px;">
|
||
<div style="max-width:1320px;margin:0 auto;">
|
||
|
||
<!-- ============ HEADER / KONTEXT ============ -->
|
||
<div style="display:flex;align-items:center;gap:10px;font-size:12.5px;color:#6B7184;font-weight:500;margin-bottom:14px;">
|
||
<span style="display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#3B36B0;">
|
||
<span style="width:22px;height:22px;border-radius:7px;background:#4338CA;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;">◈</span>
|
||
BreakPilot
|
||
</span>
|
||
<span style="color:#C3C7D2;">/</span>
|
||
<span>Produkt-Compliance</span>
|
||
<span style="color:#C3C7D2;">/</span>
|
||
<span style="color:#1A1D29;font-weight:600;">DEMO Kistenhub CRA</span>
|
||
<span style="margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:#F0EBFD;color:#5B34C7;font-weight:700;font-size:11.5px;letter-spacing:.02em;">REDESIGN-VORSCHLAG</span>
|
||
</div>
|
||
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:18px;padding:26px 30px;box-shadow:0 1px 2px rgba(20,24,40,.04);display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap;">
|
||
<div style="flex:1;min-width:340px;">
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;">
|
||
<span style="display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:#F1F3F7;color:#5A6273;font-weight:600;font-size:12px;"><span style="width:7px;height:7px;border-radius:50%;background:#9AA1B2;"></span>Entwurf</span>
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9AA1B2;">V001</span>
|
||
</div>
|
||
<h1 style="margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;">DEMO Kistenhub CRA</h1>
|
||
<p style="margin:8px 0 0;font-size:15px;color:#5A6273;max-width:560px;line-height:1.5;">Vernetztes Kistenhubgerät mit App-Parametrierung und Fernwartung — Produkt-Compliance an der Schnittstelle von Maschinensicherheit (CE) und Cyber-Resilienz (CRA).</p>
|
||
<div style="margin-top:14px;display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:11px;background:#F6F4FF;border:1px solid #E7E1FB;font-size:13.5px;color:#4A4570;">
|
||
<span style="font-size:15px;">🧭</span>
|
||
<span><strong style="color:#3B36B0;">Wir analysieren — Sie entscheiden</strong> mit DSB / Anwalt. Nichts wird automatisch als Verstoß gewertet.</span>
|
||
</div>
|
||
</div>
|
||
<div style="width:280px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;">
|
||
<span style="font-size:12.5px;font-weight:600;color:#6B7184;">Konformität</span>
|
||
<span style="font-size:20px;font-weight:800;color:#4338CA;">38<span style="font-size:13px;">%</span></span>
|
||
</div>
|
||
<div style="height:8px;border-radius:999px;background:#ECEEF3;overflow:hidden;"><div style="width:38%;height:100%;background:linear-gradient(90deg,#5B52E0,#4338CA);border-radius:999px;"></div></div>
|
||
<div style="margin-top:14px;display:flex;gap:8px;">
|
||
<div style="flex:1;border:1px solid #E8EAF0;border-radius:11px;padding:10px 12px;">
|
||
<div style="font-size:19px;font-weight:800;letter-spacing:-.02em;">541</div>
|
||
<div style="font-size:11.5px;color:#6B7184;line-height:1.3;margin-top:2px;">Tage bis CE-Pflicht</div>
|
||
</div>
|
||
<div style="flex:1;border:1px solid #F2DFD0;background:#FCF6EF;border-radius:11px;padding:10px 12px;">
|
||
<div style="font-size:19px;font-weight:800;letter-spacing:-.02em;color:#9A6410;">85</div>
|
||
<div style="font-size:11.5px;color:#9A6410;line-height:1.3;margin-top:2px;">Tage bis Reporting-Pflicht</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ BODY: NAV + MAIN ============ -->
|
||
<div style="display:flex;gap:24px;margin-top:24px;align-items:flex-start;">
|
||
|
||
<!-- LEFT EBENEN-NAV -->
|
||
<div style="width:212px;flex:none;position:sticky;top:20px;">
|
||
<div style="font-size:11px;font-weight:700;letter-spacing:.08em;color:#9AA1B2;padding:0 6px 10px;">DREI EBENEN</div>
|
||
<button onClick="{{ goE1 }}" style="width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:11px 12px;border-radius:11px;display:flex;gap:11px;align-items:flex-start;" style-hover="background:#fff;">
|
||
<span style="width:24px;height:24px;flex:none;border-radius:8px;background:#EEF0FF;color:#3B36B0;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;">1</span>
|
||
<span><span style="display:block;font-weight:700;font-size:13.5px;">Überblick</span><span style="display:block;font-size:11.5px;color:#8089A0;margin-top:1px;">Management · Klartext</span></span>
|
||
</button>
|
||
<button onClick="{{ goE2 }}" style="width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:11px 12px;border-radius:11px;display:flex;gap:11px;align-items:flex-start;" style-hover="background:#fff;">
|
||
<span style="width:24px;height:24px;flex:none;border-radius:8px;background:#FBF1DF;color:#9A6410;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;">2</span>
|
||
<span><span style="display:block;font-weight:700;font-size:13.5px;">Cyber × Safety</span><span style="display:block;font-size:11.5px;color:#8089A0;margin-top:1px;">Die Schnittstelle</span></span>
|
||
</button>
|
||
<button onClick="{{ goE3 }}" style="width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:11px 12px;border-radius:11px;display:flex;gap:11px;align-items:flex-start;" style-hover="background:#fff;">
|
||
<span style="width:24px;height:24px;flex:none;border-radius:8px;background:#EEF1F5;color:#5A6273;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;">3</span>
|
||
<span><span style="display:block;font-weight:700;font-size:13.5px;">Technische Tiefe</span><span style="display:block;font-size:11.5px;color:#8089A0;margin-top:1px;">Normen · Audit</span></span>
|
||
</button>
|
||
<div style="height:1px;background:#E2E5EC;margin:14px 8px;"></div>
|
||
<button onClick="{{ goSys }}" style="width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:11px 12px;border-radius:11px;display:flex;gap:11px;align-items:center;" style-hover="background:#fff;">
|
||
<span style="width:24px;height:24px;flex:none;border-radius:8px;background:#E9F5EF;color:#0E8A66;font-size:13px;display:inline-flex;align-items:center;justify-content:center;">◑</span>
|
||
<span style="font-weight:700;font-size:13.5px;">Design-Sprache</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- MAIN -->
|
||
<div style="flex:1;min-width:0;">
|
||
|
||
<!-- ===== EBENE 1 — ÜBERBLICK ===== -->
|
||
<section ref="{{ refE1 }}">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
|
||
<span style="width:26px;height:26px;border-radius:8px;background:#EEF0FF;color:#3B36B0;font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;">1</span>
|
||
<h2 style="margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;">Überblick</h2>
|
||
<span style="font-size:13px;color:#8089A0;">Was trifft das Produkt — in einem Blick.</span>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px;">
|
||
<!-- Tile: Geltung -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#0E8A66;margin-bottom:8px;">GELTUNG</div>
|
||
<div style="font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;">Fällt unter CRA <span style="color:#C3C7D2;">&</span> Maschinenverordnung</div>
|
||
<div style="font-size:13px;color:#5A6273;margin-top:7px;line-height:1.45;">Vernetzt & mit Software-Updates → „Produkt mit digitalem Element".</div>
|
||
<button onClick="{{ goE3 }}" style="margin-top:11px;background:none;border:none;padding:0;cursor:pointer;font-size:12.5px;font-weight:600;color:#3B36B0;">Warum? → Begründung & Quellen</button>
|
||
</div>
|
||
<!-- Tile: Frist -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#9A6410;margin-bottom:8px;">FRISTEN</div>
|
||
<div style="font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;">CE-Pflicht ab 11.12.2027</div>
|
||
<div style="font-size:13px;color:#5A6273;margin-top:7px;line-height:1.45;">Vulnerability-Reporting (24h / 72h) bereits ab <strong style="color:#9A6410;">11.09.2026</strong> — in 85 Tagen.</div>
|
||
<div style="margin-top:11px;font-size:12.5px;color:#8089A0;">Maßgeblich: das Inverkehrbringen, nicht der Entwicklungszeitpunkt.</div>
|
||
</div>
|
||
<!-- Tile: Lage (attention) -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#B5362A;margin-bottom:8px;">OFFENE PUNKTE</div>
|
||
<div style="font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;">6 kritische Anforderungen offen</div>
|
||
<div style="font-size:13px;color:#5A6273;margin-top:7px;line-height:1.45;">von 40 CRA-Anforderungen. Dazu: <strong style="color:#BE7714;">2 Safety-Gefährdungen durch Cyber wieder geöffnet.</strong></div>
|
||
<button onClick="{{ goE2 }}" style="margin-top:11px;background:none;border:none;padding:0;cursor:pointer;font-size:12.5px;font-weight:600;color:#3B36B0;">Zu den 2 Punkten →</button>
|
||
</div>
|
||
<!-- Tile: Pfad (good) -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#3B36B0;margin-bottom:8px;">KONFORMITÄTSPFAD</div>
|
||
<div style="font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25;">Selbstbewertung <span style="font-weight:500;color:#8089A0;">(Modul A)</span></div>
|
||
<div style="font-size:13px;color:#5A6273;margin-top:7px;line-height:1.45;">Kein externes Audit nötig. Technische Doku + Konformitätserklärung bleiben Pflicht.</div>
|
||
<div style="margin-top:11px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#0E8A66;"><span style="width:7px;height:7px;border-radius:50%;background:#0E8A66;"></span>Klassifikation: Standard</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== EBENE 2 — CYBER × SAFETY ===== -->
|
||
<section ref="{{ refE2 }}" style="margin-top:38px;">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
|
||
<span style="width:26px;height:26px;border-radius:8px;background:#FBF1DF;color:#9A6410;font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;">2</span>
|
||
<h2 style="margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;">Cyber trifft Safety</h2>
|
||
</div>
|
||
<p style="margin:0 0 16px 36px;font-size:13.5px;color:#5A6273;max-width:680px;line-height:1.5;">Der USP sichtbar gemacht: Wo ein <strong>Cyber-Befund</strong> eine bereits mechanisch <strong>gemilderte Gefährdung wieder aufreißt</strong> — der Schnittpunkt von Maschinenverordnung und Cyber Resilience Act.</p>
|
||
|
||
<!-- Domänen-Bar -->
|
||
<div style="display:flex;align-items:stretch;gap:0;background:#fff;border:1px solid #E4E7EE;border-radius:14px;overflow:hidden;margin-bottom:18px;flex-wrap:wrap;">
|
||
<div style="flex:1;min-width:220px;padding:16px 20px;border-left:4px solid #0E8A66;">
|
||
<div style="font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#0E8A66;">MASCHINENSICHERHEIT · CE</div>
|
||
<div style="font-size:14px;color:#3A4053;margin-top:6px;line-height:1.45;">3 Gefährdungen bewertet · Risikomatrix: <strong>0 kritisch, 2 mittel</strong></div>
|
||
</div>
|
||
<div style="flex:none;display:flex;align-items:center;justify-content:center;padding:0 18px;background:#FCF6EF;border-left:1px solid #F2E6D5;border-right:1px solid #F2E6D5;">
|
||
<div style="text-align:center;">
|
||
<div style="font-size:22px;line-height:1;">⚡</div>
|
||
<div style="font-size:11.5px;font-weight:700;color:#BE7714;margin-top:6px;max-width:120px;line-height:1.3;">2 wieder geöffnet</div>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;min-width:220px;padding:16px 20px;border-left:4px solid #6A43D6;">
|
||
<div style="font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#6A43D6;">CYBER-RESILIENZ · CRA</div>
|
||
<div style="font-size:14px;color:#3A4053;margin-top:6px;line-height:1.45;">CRA-Readiness <strong>78%</strong> · 6 kritische Befunde offen</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HAZARD CARDS -->
|
||
<sc-for list="{{ hazards }}" as="hz" hint-placeholder-count="2">
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:16px;padding:0;margin-bottom:14px;overflow:hidden;">
|
||
<!-- header strip -->
|
||
<div style="padding:18px 22px 0;">
|
||
<div style="display:flex;align-items:flex-start;gap:12px;">
|
||
<div style="flex:1;">
|
||
<div style="font-size:11.5px;font-weight:600;color:#8089A0;">{{ hz.domain }}</div>
|
||
<h3 style="margin:3px 0 0;font-size:18px;font-weight:800;letter-spacing:-.01em;">{{ hz.name }}</h3>
|
||
</div>
|
||
<span style="flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#FBECEA;color:#A23323;font-weight:700;font-size:12px;"><span style="width:7px;height:7px;border-radius:2px;background:#C0362C;"></span>Restrisiko: wieder offen</span>
|
||
</div>
|
||
</div>
|
||
<!-- chain -->
|
||
<div style="padding:16px 22px;display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;">
|
||
<div style="flex:1;min-width:200px;border:1px solid #D7ECE3;background:#F3FAF7;border-radius:12px;padding:13px 15px;">
|
||
<div style="display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#0E8A66;"><span style="width:16px;height:16px;border-radius:50%;background:#0E8A66;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;">✓</span>CE — GEMILDERT</div>
|
||
<div style="font-size:13.5px;color:#33503F;margin-top:7px;line-height:1.4;">{{ hz.ce }}</div>
|
||
</div>
|
||
<div style="flex:none;display:flex;align-items:center;color:#C5A86F;font-size:20px;">→</div>
|
||
<div style="flex:1;min-width:200px;border:1px solid #E4D8F7;background:#F6F1FE;border-radius:12px;padding:13px 15px;">
|
||
<div style="display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#6A43D6;"><span style="font-size:13px;">⚡</span>CYBER-BEFUND</div>
|
||
<div style="font-size:13.5px;color:#473463;margin-top:7px;line-height:1.4;">{{ hz.cyber }}</div>
|
||
</div>
|
||
<div style="flex:none;display:flex;align-items:center;color:#C5A86F;font-size:20px;">→</div>
|
||
<div style="flex:1;min-width:200px;border:1px solid #F2D9D4;background:#FCF3F1;border-radius:12px;padding:13px 15px;">
|
||
<div style="display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#B5362A;"><span style="width:16px;height:16px;border-radius:50%;background:#C0362C;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;">!</span>RESTRISIKO</div>
|
||
<div style="font-size:13.5px;color:#7A2E26;margin-top:7px;line-height:1.4;">Schutzfunktion aushebelbar — Gefährdung wieder offen</div>
|
||
</div>
|
||
</div>
|
||
<!-- mechanism -->
|
||
<div style="padding:0 22px 16px;">
|
||
<div style="background:#FBFAF7;border:1px solid #EFEADF;border-radius:11px;padding:13px 16px;font-size:13.5px;color:#4A4536;line-height:1.5;"><strong style="color:#9A6410;">Warum:</strong> {{ hz.mechanism }}</div>
|
||
</div>
|
||
<!-- measures -->
|
||
<div style="padding:0 22px 18px;">
|
||
<div style="font-size:12px;font-weight:700;letter-spacing:.04em;color:#6B7184;margin-bottom:9px;">EMPFOHLENE MASSNAHMEN</div>
|
||
<sc-for list="{{ hz.measures }}" as="m" hint-placeholder-count="2">
|
||
<div style="display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid #F0F1F5;">
|
||
<sc-if value="{{ m.isPflicht }}" hint-placeholder-val="{{ true }}"><span style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#FBECEA;color:#A23323;border:1px solid #F3D2CC;font-weight:700;font-size:11px;"><span style="width:7px;height:7px;border-radius:2px;background:#C0362C;"></span>Pflicht</span></sc-if>
|
||
<sc-if value="{{ m.isEmpf }}"><span style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#EEF0FF;color:#3B36B0;border:1px solid #DAD9F7;font-weight:700;font-size:11px;">◇ Empfehlung</span></sc-if>
|
||
<span style="flex:1;font-size:14px;color:#272B38;">{{ m.text }}</span>
|
||
<span style="flex:none;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#A2A8B8;">{{ m.id }}</span>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
<!-- tech detail toggle -->
|
||
<div style="border-top:1px solid #EEF0F4;background:#FBFBFC;padding:0 22px;">
|
||
<button onClick="{{ hz.toggle }}" style="width:100%;background:none;border:none;cursor:pointer;padding:13px 0;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#6B7184;">
|
||
<span style="font-family:'IBM Plex Mono',monospace;">{{ hz.caret }}</span> Auslösende Befunde & Norm-Bezug (Ebene 3)
|
||
</button>
|
||
<sc-if value="{{ hz.open }}" hint-placeholder-val="{{ true }}">
|
||
<div style="padding:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:18px;">
|
||
<div>
|
||
<div style="font-size:11px;font-weight:700;letter-spacing:.05em;color:#9AA1B2;margin-bottom:8px;">AUSLÖSENDE CYBER-BEFUNDE</div>
|
||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||
<sc-for list="{{ hz.findings }}" as="f" hint-placeholder-count="3">
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#5A6273;background:#fff;border:1px solid #E6E8EE;border-radius:6px;padding:5px 9px;">{{ f }}</span>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:11px;font-weight:700;letter-spacing:.05em;color:#9AA1B2;margin-bottom:8px;">NORM- & ANNEX-BEZUG</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||
<sc-for list="{{ hz.norms }}" as="n" hint-placeholder-count="3">
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#3B36B0;background:#F4F4FE;border:1px solid #E1E0F6;border-radius:6px;padding:5px 9px;">{{ n }}</span>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</sc-if>
|
||
</div>
|
||
</div>
|
||
</sc-for>
|
||
|
||
<!-- MASSNAHMEN-BACKLOG mit Geltung-Filter -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:16px;padding:20px 22px;margin-top:6px;">
|
||
<div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;">
|
||
<h3 style="margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em;">Maßnahmen-Backlog</h3>
|
||
<span style="font-size:13px;color:#8089A0;">{{ backlogCount }} Maßnahmen · nach Geltung</span>
|
||
<div style="margin-left:auto;display:inline-flex;gap:6px;background:#F2F3F7;padding:4px;border-radius:10px;">
|
||
<sc-for list="{{ filters }}" as="f" hint-placeholder-count="3">
|
||
<button onClick="{{ f.setFn }}" style="background:none;border:none;cursor:pointer;padding:6px 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:#5A6273;display:inline-flex;align-items:center;gap:6px;" style-hover="color:#1A1D29;">
|
||
<sc-if value="{{ f.active }}" hint-placeholder-val="{{ true }}"><span style="width:6px;height:6px;border-radius:50%;background:#4338CA;"></span></sc-if>
|
||
{{ f.label }}
|
||
</button>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
<sc-for list="{{ backlog }}" as="b" hint-placeholder-count="6">
|
||
<div style="display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #F0F1F5;">
|
||
<sc-if value="{{ b.isPflicht }}" hint-placeholder-val="{{ true }}"><span style="flex:none;width:96px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#FBECEA;color:#A23323;border:1px solid #F3D2CC;font-weight:700;font-size:11px;"><span style="width:7px;height:7px;border-radius:2px;background:#C0362C;"></span>Pflicht</span></sc-if>
|
||
<sc-if value="{{ b.isEmpf }}"><span style="flex:none;width:96px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#EEF0FF;color:#3B36B0;border:1px solid #DAD9F7;font-weight:700;font-size:11px;">◇ Empfehlung</span></sc-if>
|
||
<sc-if value="{{ b.isKann }}"><span style="flex:none;width:96px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#F1F3F7;color:#5A6273;border:1px solid #E2E6EE;font-weight:700;font-size:11px;">○ Kann</span></sc-if>
|
||
<span style="flex:1;font-size:14px;font-weight:500;color:#1A1D29;">{{ b.text }}</span>
|
||
<span style="flex:none;font-size:12.5px;color:#8089A0;width:150px;">{{ b.kat }}</span>
|
||
<span style="flex:none;font-size:12.5px;color:#5A6273;width:44px;text-align:right;">{{ b.aufwand }}</span>
|
||
<span style="flex:none;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#A2A8B8;width:64px;text-align:right;">{{ b.id }}</span>
|
||
</div>
|
||
</sc-for>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== EBENE 3 — TECHNISCHE TIEFE ===== -->
|
||
<section ref="{{ refE3 }}" style="margin-top:38px;">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;">
|
||
<span style="width:26px;height:26px;border-radius:8px;background:#EEF1F5;color:#5A6273;font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;">3</span>
|
||
<h2 style="margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;">Technische Tiefe</h2>
|
||
<span style="font-size:13px;color:#8089A0;">Für Auditor:innen & Ingenieur:innen — standardmäßig eingeklappt.</span>
|
||
<button onClick="{{ toggleTech }}" style="margin-left:auto;background:#fff;border:1px solid #D7DAE3;cursor:pointer;padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:600;color:#272B38;" style-hover="border-color:#4338CA;color:#3B36B0;">{{ techLabel }}</button>
|
||
</div>
|
||
|
||
<sc-if value="{{ showTech }}">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
|
||
<!-- Normen -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:13px;font-weight:700;margin-bottom:12px;">Norm- & Annex-Referenzen</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F0F1F5;">
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#1A1D29;flex:1;">ISO 12100:2010</span>
|
||
<span style="padding:2px 8px;border-radius:5px;background:#FBECEA;color:#A23323;font-weight:700;font-size:10.5px;">Pflicht</span>
|
||
<span style="font-size:11.5px;color:#8089A0;">Grundnorm</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F0F1F5;">
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#1A1D29;flex:1;">EN 62061</span>
|
||
<span style="padding:2px 8px;border-radius:5px;background:#E9F5EF;color:#0E8A66;font-weight:700;font-size:10.5px;">B-Norm</span>
|
||
<span style="font-size:11.5px;color:#8089A0;">SIL/Steuerung</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F0F1F5;">
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#1A1D29;flex:1;">CRA · Annex I 1(3)(d)</span>
|
||
<span style="padding:2px 8px;border-radius:5px;background:#F4F4FE;color:#3B36B0;font-weight:700;font-size:10.5px;">CRA-AI-8</span>
|
||
<span style="font-size:11.5px;color:#8089A0;">Auth</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #F0F1F5;">
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#1A1D29;flex:1;">CRA · Annex I 1(4)</span>
|
||
<span style="padding:2px 8px;border-radius:5px;background:#F4F4FE;color:#3B36B0;font-weight:700;font-size:10.5px;">CRA-AI-29</span>
|
||
<span style="font-size:11.5px;color:#8089A0;">Updates</span>
|
||
</div>
|
||
<div style="margin-top:12px;background:#FBFAF7;border:1px solid #EFEADF;border-radius:9px;padding:10px 13px;font-family:'Source Serif 4',serif;font-size:12.5px;color:#5A5340;line-height:1.5;font-style:italic;">Normtexte werden nie reproduziert — nur Nummern, Titel & Abschnittsverweise. Beschaffung separat (z. B. beuth.de).</div>
|
||
</div>
|
||
<!-- Risiko-Formeln -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:13px;font-weight:700;margin-bottom:12px;">Risiko-Modelle (zwei pro Gefährdung)</div>
|
||
<div style="border:1px solid #ECEEF3;border-radius:10px;padding:12px 14px;margin-bottom:10px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;"><span style="font-weight:700;font-size:13px;">EN-62061-Stil</span><span style="padding:2px 8px;border-radius:5px;background:#FAF6DD;color:#897209;font-weight:700;font-size:10.5px;">mittel</span></div>
|
||
<div style="font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#3A4053;margin-top:8px;">R = S × (F + W + P) = 3 × (2+3+4) = <strong>27</strong></div>
|
||
</div>
|
||
<div style="border:1px solid #ECEEF3;border-radius:10px;padding:12px 14px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;"><span style="font-weight:700;font-size:13px;">Fine-Kinney (US)</span><span style="padding:2px 8px;border-radius:5px;background:#FBF1E0;color:#9A6410;font-weight:700;font-size:10.5px;">möglich</span></div>
|
||
<div style="font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:#3A4053;margin-top:8px;">R = P × E × C = 3 × 3 × 7 = <strong>63</strong></div>
|
||
</div>
|
||
<div style="margin-top:12px;font-size:12px;color:#8089A0;line-height:1.5;">Begründete Vorschlagswerte aus öffentlichen Datenquellen (ESAW/NIOSH/OSHA) — vom Sachverständigen anpassbar.</div>
|
||
</div>
|
||
<!-- Pipeline -->
|
||
<div style="grid-column:1 / -1;background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;"><span style="font-size:13px;font-weight:700;">Deterministische Pipeline</span><span style="font-size:11.5px;color:#0E8A66;font-weight:600;background:#E9F5EF;padding:2px 8px;border-radius:5px;">reproduzierbar ohne LLM</span></div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:7px;">
|
||
<sc-for list="{{ pipeline }}" as="p" hint-placeholder-count="8">
|
||
<span style="font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#5A6273;background:#F7F8FA;border:1px solid #E6E8EE;border-radius:6px;padding:5px 9px;">{{ p }}</span>
|
||
</sc-for>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</sc-if>
|
||
<sc-if value="{{ techHidden }}">
|
||
<div style="background:#fff;border:1px dashed #D7DAE3;border-radius:14px;padding:26px;text-align:center;color:#8089A0;font-size:13.5px;">Normen, Risiko-Formeln, Pipeline-Trace & Nachweise — eingeklappt. <button onClick="{{ toggleTech }}" style="background:none;border:none;cursor:pointer;color:#3B36B0;font-weight:600;font-size:13.5px;padding:0;">Anzeigen</button></div>
|
||
</sc-if>
|
||
</section>
|
||
|
||
<!-- ===== DESIGN-SPRACHE ===== -->
|
||
<section ref="{{ refSys }}" style="margin-top:44px;">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
|
||
<span style="width:26px;height:26px;border-radius:8px;background:#E9F5EF;color:#0E8A66;font-size:14px;display:inline-flex;align-items:center;justify-content:center;">◑</span>
|
||
<h2 style="margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;">Design-Sprache</h2>
|
||
</div>
|
||
<p style="margin:0 0 16px 36px;font-size:13.5px;color:#5A6273;max-width:680px;line-height:1.5;">Ein konsistentes System für beide Zielgruppen — Anwält:innen/DSB und Ingenieur:innen.</p>
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
|
||
<!-- Geltung -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:13px;font-weight:700;margin-bottom:13px;">Geltung — was ist verbindlich?</div>
|
||
<div style="display:flex;align-items:center;gap:11px;margin-bottom:11px;"><span style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#FBECEA;color:#A23323;border:1px solid #F3D2CC;font-weight:700;font-size:11px;"><span style="width:7px;height:7px;border-radius:2px;background:#C0362C;"></span>Pflicht</span><span style="font-size:13px;color:#5A6273;">Rechtlich zwingend — gefüllter Marker</span></div>
|
||
<div style="display:flex;align-items:center;gap:11px;margin-bottom:11px;"><span style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#EEF0FF;color:#3B36B0;border:1px solid #DAD9F7;font-weight:700;font-size:11px;">◇ Empfehlung</span><span style="font-size:13px;color:#5A6273;">Best Practice — Raute, offen</span></div>
|
||
<div style="display:flex;align-items:center;gap:11px;"><span style="flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;background:#F1F3F7;color:#5A6273;border:1px solid #E2E6EE;font-weight:700;font-size:11px;">○ Kann</span><span style="font-size:13px;color:#5A6273;">Optional — neutraler Kreis</span></div>
|
||
</div>
|
||
<!-- Severity -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:13px;font-weight:700;margin-bottom:13px;">Severity — wie dringend?</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:8px;">
|
||
<span style="padding:4px 11px;border-radius:7px;background:#FBE9E7;color:#B5362A;font-weight:700;font-size:12px;">Kritisch</span>
|
||
<span style="padding:4px 11px;border-radius:7px;background:#FBF1E0;color:#9A6410;font-weight:700;font-size:12px;">Hoch</span>
|
||
<span style="padding:4px 11px;border-radius:7px;background:#FAF6DD;color:#897209;font-weight:700;font-size:12px;">Mittel</span>
|
||
<span style="padding:4px 11px;border-radius:7px;background:#E9F5EF;color:#2C7A52;font-weight:700;font-size:12px;">Niedrig</span>
|
||
</div>
|
||
<div style="margin-top:14px;font-size:12px;color:#8089A0;line-height:1.5;">Getönte Flächen statt Neon-Blöcke — Severity informiert, sie schüchtert nicht ein. Rot ist echten kritischen Punkten und Fristen vorbehalten.</div>
|
||
</div>
|
||
<!-- Domänen -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:13px;font-weight:700;margin-bottom:13px;">Domänen-Farben</div>
|
||
<div style="display:flex;gap:10px;">
|
||
<div style="flex:1;border-radius:10px;border:1px solid #D7ECE3;background:#F3FAF7;padding:12px;"><span style="display:block;width:18px;height:18px;border-radius:6px;background:#0E8A66;margin-bottom:8px;"></span><span style="font-size:12px;font-weight:700;color:#0E8A66;">Safety</span><span style="display:block;font-size:11px;color:#5A6273;margin-top:2px;">Maschine / CE</span></div>
|
||
<div style="flex:1;border-radius:10px;border:1px solid #E4D8F7;background:#F6F1FE;padding:12px;"><span style="display:block;width:18px;height:18px;border-radius:6px;background:#6A43D6;margin-bottom:8px;"></span><span style="font-size:12px;font-weight:700;color:#6A43D6;">Cyber</span><span style="display:block;font-size:11px;color:#5A6273;margin-top:2px;">CRA / Resilienz</span></div>
|
||
<div style="flex:1;border-radius:10px;border:1px solid #F2E6D5;background:#FCF6EF;padding:12px;"><span style="display:block;width:18px;height:18px;border-radius:6px;background:#BE7714;margin-bottom:8px;"></span><span style="font-size:12px;font-weight:700;color:#BE7714;">Schnittstelle</span><span style="display:block;font-size:11px;color:#5A6273;margin-top:2px;">Cyber × Safety</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- Typo -->
|
||
<div style="background:#fff;border:1px solid #E4E7EE;border-radius:14px;padding:18px 20px;">
|
||
<div style="font-size:13px;font-weight:700;margin-bottom:13px;">Typografie</div>
|
||
<div style="margin-bottom:12px;"><div style="font-size:18px;font-weight:800;letter-spacing:-.01em;">Public Sans</div><div style="font-size:11.5px;color:#8089A0;">Klartext führt — Überschriften & UI</div></div>
|
||
<div style="margin-bottom:12px;"><div style="font-family:'Source Serif 4',serif;font-size:17px;">Source Serif 4</div><div style="font-size:11.5px;color:#8089A0;">Normzitate & rechtliche Texte</div></div>
|
||
<div><div style="font-family:'IBM Plex Mono',monospace;font-size:15px;">CRA-AI-8 · M542</div><div style="font-size:11.5px;color:#8089A0;">Interne IDs in Mono — nie als Überschrift</div></div>
|
||
</div>
|
||
<!-- Prinzipien -->
|
||
<div style="grid-column:1 / -1;background:#15182A;border:1px solid #15182A;border-radius:14px;padding:22px 24px;color:#E8EAF2;">
|
||
<div style="font-size:13px;font-weight:700;margin-bottom:16px;color:#fff;">Leitprinzipien</div>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;">
|
||
<div style="display:flex;gap:11px;"><span style="color:#9B8BF5;font-size:15px;">①</span><span style="font-size:13.5px;line-height:1.5;color:#C7CBDA;"><strong style="color:#fff;">3 Ebenen pro Screen</strong> — Überblick → Cyber×Safety → technische Tiefe einklappbar.</span></div>
|
||
<div style="display:flex;gap:11px;"><span style="color:#9B8BF5;font-size:15px;">②</span><span style="font-size:13.5px;line-height:1.5;color:#C7CBDA;"><strong style="color:#fff;">Klartext führt</strong> — interne IDs nie als Überschrift, in Mono nachgestellt.</span></div>
|
||
<div style="display:flex;gap:11px;"><span style="color:#9B8BF5;font-size:15px;">③</span><span style="font-size:13.5px;line-height:1.5;color:#C7CBDA;"><strong style="color:#fff;">Co-Pilot, kein Roboter-Anwalt</strong> — keine Panik-Rot-Blöcke, keine Bußgeld-Drohung zuerst.</span></div>
|
||
<div style="display:flex;gap:11px;"><span style="color:#9B8BF5;font-size:15px;">④</span><span style="font-size:13.5px;line-height:1.5;color:#C7CBDA;"><strong style="color:#fff;">Pflicht / Empfehlung / Kann</strong> — immer visuell getrennt, durchgängig konsistent.</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{
|
||
"$preview": { "width": 1320, "height": 1040 },
|
||
"technikDefault": { "editor": "boolean", "default": false, "tsType": "boolean" },
|
||
"startFilter": { "editor": "enum", "options": ["alle", "pflicht", "empfehlung"], "default": "alle", "tsType": "string" },
|
||
"hazardOpen": { "editor": "enum", "options": ["erste", "alle", "keine"], "default": "erste", "tsType": "string" }
|
||
}">
|
||
class Component extends DCLogic {
|
||
state = {
|
||
showTech: this.props.technikDefault ?? false,
|
||
geltung: this.props.startFilter ?? 'alle',
|
||
open: this._initOpen(this.props.hazardOpen ?? 'erste')
|
||
};
|
||
|
||
_initOpen(mode) {
|
||
if (mode === 'alle') return { 0: true, 1: true };
|
||
if (mode === 'keine') return {};
|
||
return { 0: true };
|
||
}
|
||
|
||
_refs = {};
|
||
setRef(id) { return (el) => { if (el) this._refs[id] = el; }; }
|
||
scrollToEl(id) {
|
||
const el = this._refs[id];
|
||
if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 16, behavior: 'smooth' });
|
||
}
|
||
|
||
toggleTech() { this.setState(s => ({ showTech: !s.showTech })); }
|
||
toggleHazard(i) { this.setState(s => ({ open: { ...s.open, [i]: !s.open[i] } })); }
|
||
setGeltung(g) { this.setState({ geltung: g }); }
|
||
|
||
renderVals() {
|
||
const open = this.state.open;
|
||
const hazardData = [
|
||
{
|
||
name: 'Quetschen zwischen Last und Rahmen',
|
||
domain: 'Mechanische Gefährdung',
|
||
ce: 'Zweihandschaltung + trennende Schutzeinrichtung (PL d)',
|
||
cyber: 'Authentifizierungs-Umgehung · manipulierte Firmware',
|
||
mechanism: 'Über eine Authentifizierungs-Umgehung oder manipulierte Firmware lässt sich die Zweihandschaltung aushebeln — die mechanisch gemilderte Quetschgefahr ist damit wieder offen.',
|
||
findings: ['Bedienpanel_(HMI)-hmi-cleartext', 'Hub-Steuerung_(SPS)-ctrl-noauth', 'Fernwartungs-Gateway-gw-bruteforce'],
|
||
norms: ['ISO 12100:2010', 'EN 62061', 'CRA-AI-8 · Annex I 1(3)(d)', 'CRA-AI-29 · Annex I 1(4)'],
|
||
measures: [
|
||
{ text: 'Initiale Default-Passwörter beim ersten Start erzwingen', geltung: 'pflicht', id: 'M542' },
|
||
{ text: 'Signierte Firmware-Updates mit Rollback-Schutz', geltung: 'pflicht', id: 'M541' },
|
||
{ text: 'Cybersecurity-Hardening-Guide für den Anwender belegen', geltung: 'empfehlung', id: 'M-INFO-2' }
|
||
]
|
||
},
|
||
{
|
||
name: 'Lastabsturz durch Überlast',
|
||
domain: 'Mechanische Gefährdung',
|
||
ce: 'Überlastsicherung / Lastmomentbegrenzer',
|
||
cyber: 'manipulierte Signale / Parameter',
|
||
mechanism: 'Über manipulierte Firmware oder verfälschte Sensor-Parameter lässt sich die Überlastsicherung übersteuern — die mechanisch gemilderte Absturzgefahr ist damit wieder offen.',
|
||
findings: ['Hub-Steuerung_(SPS)-ctrl-fw', 'Fernwartungs-Gateway-gw-telemetry', 'Hub-Steuerung_(SPS)-ctrl-debug'],
|
||
norms: ['ISO 12100:2010', 'EN 62061', 'CRA-AI-30 · Annex I 1(4)', 'CRA-AI-15 · Annex I 1(3)(e)'],
|
||
measures: [
|
||
{ text: 'Updates über authentisierten Kanal mit Integritätsprüfung', geltung: 'pflicht', id: 'M547' },
|
||
{ text: 'Sichere Systemarchitektur mit Netzwerkzonen', geltung: 'pflicht', id: 'M601' },
|
||
{ text: 'Sensor-Plausibilisierung dokumentieren', geltung: 'empfehlung', id: 'M-INFO-5' }
|
||
]
|
||
}
|
||
];
|
||
const hazards = hazardData.map((h, i) => ({
|
||
...h,
|
||
open: !!open[i],
|
||
caret: open[i] ? '▾' : '▸',
|
||
toggle: () => this.toggleHazard(i),
|
||
measures: h.measures.map(m => ({ ...m, isPflicht: m.geltung === 'pflicht', isEmpf: m.geltung === 'empfehlung' }))
|
||
}));
|
||
|
||
const allBacklog = [
|
||
{ text: 'Keine Default-Passwörter', kat: 'Authentifizierung', id: 'M542', aufwand: '2 PT', geltung: 'pflicht' },
|
||
{ text: 'Software Bill of Materials (SBOM)', kat: 'Supply Chain', id: 'M540', aufwand: '2 PT', geltung: 'pflicht' },
|
||
{ text: 'Coordinated Vulnerability Disclosure', kat: 'Vulnerability Handling', id: 'M543', aufwand: '2 PT', geltung: 'pflicht' },
|
||
{ text: 'Signierte Updates mit Rollback-Schutz', kat: 'Updates', id: 'M541', aufwand: '3 PT', geltung: 'pflicht' },
|
||
{ text: 'Cybersecurity-Hardening-Guide für Anwender', kat: 'Information', id: 'M-INFO-2', aufwand: '3 PT', geltung: 'empfehlung' },
|
||
{ text: 'Sensor-Plausibilisierung dokumentieren', kat: 'Architektur', id: 'M-INFO-5', aufwand: '2 PT', geltung: 'kann' }
|
||
];
|
||
const g = this.state.geltung;
|
||
const backlog = (g === 'alle' ? allBacklog : allBacklog.filter(b => b.geltung === g))
|
||
.map(b => ({ ...b, isPflicht: b.geltung === 'pflicht', isEmpf: b.geltung === 'empfehlung', isKann: b.geltung === 'kann' }));
|
||
|
||
const filters = [
|
||
{ key: 'alle', label: 'Alle' },
|
||
{ key: 'pflicht', label: 'Pflicht' },
|
||
{ key: 'empfehlung', label: 'Empfehlung' }
|
||
].map(f => ({ ...f, active: g === f.key, setFn: () => this.setGeltung(f.key) }));
|
||
|
||
return {
|
||
hazards,
|
||
backlog,
|
||
backlogCount: backlog.length,
|
||
filters,
|
||
showTech: this.state.showTech,
|
||
techHidden: !this.state.showTech,
|
||
techLabel: this.state.showTech ? 'Technische Details ausblenden' : 'Technische Details anzeigen',
|
||
toggleTech: () => this.toggleTech(),
|
||
pipeline: ['1 · Grenzen-Formular', '2 · ParseNarrative', '3 · Pattern-Engine (Gates)', '4 · Relevanz-Backstop', '5 · Kategorie-Caps', '6 · Gefährdungen', '7 · Maßnahmen', '8 · Risiko (S/F/W/P)', '9 · Normen (A/B/C)', '10 · Risiko-Matrix / Benchmark'],
|
||
refE1: this.setRef('e1'), refE2: this.setRef('e2'), refE3: this.setRef('e3'), refSys: this.setRef('sys'),
|
||
goE1: () => this.scrollToEl('e1'), goE2: () => this.scrollToEl('e2'), goE3: () => this.scrollToEl('e3'), goSys: () => this.scrollToEl('sys')
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|