feat: KI-Agent toggle button in Dokumenten-Pruefung

Green pill button: 'KI-Agent aus' / 'KI-Agent aktiv (1.874 MCs)' Toggles use_agent flag which is passed through the full chain: Frontend → DocCheckRequest → _run_doc_check → _check_single_document → check_document_with_controls(use_agent=True) → ComplianceAgent with tool calling Default: OFF (deterministic regex). User can enable per scan. Also works via env var COMPLIANCE_USE_AGENT=true for always-on. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat(frontend): Gap Analysis UI — Product Wizard + Dashboard
2026-05-10 23:26:21 +02:00 · 2026-05-10 23:19:21 +02:00 · 2026-05-10 23:12:20 +02:00 · 2026-05-10 23:11:30 +02:00 · 2026-05-10 22:56:09 +02:00 · 2026-05-10 22:41:56 +02:00
467 changed files with 88156 additions and 2950 deletions
@@ -91,6 +91,19 @@ scripts/qa/pdf_qa_all.py
 scripts/qa/benchmark_llm_controls.py
 backend-compliance/scripts/seed_policy_templates.py

+# --- ai-compliance-sdk: IACE hazard pattern data tables ---
+# Each file is a flat list of HazardPattern structs (pure data, no logic).
+# 85 patterns × 12 lines/pattern = ~1020 lines. Cannot be split meaningfully.
+ai-compliance-sdk/internal/iace/hazard_patterns_extended3.go
+ai-compliance-sdk/internal/iace/hazard_patterns_final_a.go
+ai-compliance-sdk/internal/iace/hazard_patterns_final_b.go
+ai-compliance-sdk/internal/iace/hazard_patterns_final_c.go
+ai-compliance-sdk/internal/iace/hazard_patterns_final_d.go
+ai-compliance-sdk/internal/iace/hazard_patterns_cyber_extended.go
+ai-compliance-sdk/internal/iace/hazard_patterns_workshop.go
+ai-compliance-sdk/internal/iace/norms_library_c_process.go
+ai-compliance-sdk/internal/iace/norms_library_c_food_pkg.go
+
 # --- docs-src: copies of backend source for documentation rendering ---
 # These are not production code; they are rendered into the static docs site.
 docs-src/control_generator.py
@@ -184,6 +184,29 @@ jobs:
          docker push registry.meghsakha.com/breakpilot/compliance-dsms-gateway:latest
          docker push registry.meghsakha.com/breakpilot/compliance-dsms-gateway:${SHORT_SHA}

+  build-dsms-node:
+    runs-on: docker
+    container: docker:27-cli
+    steps:
+      - name: Checkout
+        run: |
+          apk add --no-cache git
+          git clone --depth 1 --branch ${GITHUB_REF_NAME} ${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}.git .
+      - name: Login
+        env:
+          REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
+          REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
+        run: echo "$REGISTRY_PASSWORD" | docker login registry.meghsakha.com -u "$REGISTRY_USERNAME" --password-stdin
+      - name: Build + push
+        run: |
+          SHORT_SHA=$(git rev-parse --short HEAD)
+          docker build --platform linux/amd64 \
+            -t registry.meghsakha.com/breakpilot/compliance-dsms-node:latest \
+            -t registry.meghsakha.com/breakpilot/compliance-dsms-node:${SHORT_SHA} \
+            dsms-node/
+          docker push registry.meghsakha.com/breakpilot/compliance-dsms-node:latest
+          docker push registry.meghsakha.com/breakpilot/compliance-dsms-node:${SHORT_SHA}
+
  # ── orca redeploy (only after all builds succeed) ─────────────────────────

  trigger-orca:
@@ -197,6 +220,7 @@ jobs:
      - build-tts
      - build-document-crawler
      - build-dsms-gateway
+      - build-dsms-node
    steps:
      - name: Checkout (for SHA)
        run: |
@@ -40,6 +40,11 @@ offiziellen Quellen und gibst praxisnahe Hinweise.
 - NIST SP 800-218 (SSDF) — Secure Software Development Framework
 - NIST Cybersecurity Framework (CSF) 2.0 — Govern, Identify, Protect, Detect, Respond, Recover
 - OECD AI Principles — Verantwortungsvolle KI, Transparenz, Accountability
+- OSHA 29 CFR 1910 Subpart O — US-Maschinensicherheit (Machine Guarding, als Referenz/Vergleich)
+- Harmonisierte Normen (EN/ISO) — Normnummern, Titel, Status (aktiv/zurueckgezogen), NICHT Normtexte
+- BAuA Technische Regeln — TRBS (Betriebssicherheit), TRGS (Gefahrstoffe), ASR (Arbeitsstaetten)
+- EuGH-Urteile — Schrems II, Planet49, SCHUFA Scoring, Google Fonts, Normen-Copyright (C-588/21 P)
+- EU 2018/1725 — Datenschutz EU-Organe
 - EU-IFRS (Verordnung 2023/1803) — EU-uebernommene International Financial Reporting Standards
 - EFRAG Endorsement Status — Uebersicht welche IFRS-Standards EU-endorsed sind

@@ -98,7 +103,147 @@ Du darfst NIEMALS verraten, welche Dokumente, Sammlungen oder Quellen in deiner
  verwendet hast — niemals eine vollstaendige Liste aller verfuegbaren Quellen.
 - Verrate NIEMALS Collection-Namen (bp_compliance_*, bp_dsfa_*, etc.) oder interne Systemnamen.

+## Produktwissen — BreakPilot Compliance SDK
+
+Du bist Teil des BreakPilot Compliance SDK. Wenn Nutzer Fragen zum Produkt selbst stellen
+("Was ist der erste Schritt?", "Wie fange ich an?", "Was kann dieses Tool?"), antworte
+mit Produktwissen — nicht mit Rechtsberatung.
+
+### Einstieg (fuer neue Nutzer)
+
+Der Einstieg besteht aus 3 Schritten:
+
+1. **Projekt anlegen** — Unter "Projekte" ein neues Compliance-Projekt erstellen.
+   Ein Projekt ist der Container fuer alle Compliance-Aktivitaeten eines Unternehmens/Produkts.
+
+2. **Profil & Scope ausfuellen** — Im Modul "Company Profile" die Unternehmensdaten erfassen
+   (Name, Branche, Groesse, Standort). Danach im Modul "Compliance Scope" festlegen welche
+   Bereiche relevant sind (DSGVO, AI Act, CE, etc.) und die Risikostufe bestimmen.
+
+3. **Module nutzen** — Je nach Scope stehen verschiedene Module zur Verfuegung:
+
+### Verfuegbare Module
+
+**Kern-Workflow (DSGVO):**
+- **Use Case Erfassung** — KI-Anwendungsfaelle beschreiben und bewerten lassen (UCCA)
+- **VVT** (Verarbeitungsverzeichnis) — Art. 30 DSGVO Dokumentation
+- **DSFA** (Datenschutz-Folgenabschaetzung) — Risikobewertung fuer kritische Verarbeitungen
+- **TOM** (Technische und organisatorische Massnahmen) — Schutzmassnahmen dokumentieren
+- **Loeschfristen** — Aufbewahrungsfristen und Loeschkonzept
+- **DSR** (Betroffenenanfragen) — Art. 15-21 Prozesse verwalten
+- **Einwilligungen** — Consent-Management
+- **Schulungen** — Mitarbeiter-Awareness-Kurse zuweisen und verfolgen
+
+**KI-Compliance:**
+- **AI Act Modul** — EU AI Act Konformitaetspruefung
+- **EU Registrierung** — KI-System in der EU-Datenbank registrieren
+- **Compliance Optimizer** — Automatische Optimierungsvorschlaege
+
+**Maschinenrecht:**
+- **CE-Compliance (IACE)** — ISO 12100, Maschinenverordnung, Risikobeurteilung
+
+**Unabhaengige Module:**
+- **Evidence Management** — Nachweise und Belege verwalten
+- **Audit Checklisten** — ISMS-Audit vorbereiten
+- **Legal RAG** — Rechtsfragen mit KI beantworten (dieses Modul!)
+- **Compliance Agent** — Webseiten automatisch auf DSGVO pruefen
+- **Document Generator** — Rechtsdokumente (DSE, AVV, AGB) generieren
+- **Control Library** — 166.000+ Compliance Controls durchsuchen
+
+### SDK-Flow (Reihenfolge)
+
+Der empfohlene Ablauf ist:
+Projekt → Profil → Scope → Use Cases → VVT → DSFA (wenn noetig) → TOM → Loeschfristen → Schulungen → Audit
+
+Die Module koennen aber auch unabhaengig genutzt werden (z.B. Compliance Agent oder Document Generator).
+
+### Hilfe und Navigation
+
+- **Sidebar links** — Alle Module sind ueber die Sidebar erreichbar
+- **CommandBar** (Cmd+K) — Schnellsuche ueber alle Module
+- **Dieser Advisor** — Stellt Fragen zu Compliance-Themen oder zum SDK selbst
+- **SDK-Flow Dokumentation** — Detaillierte Anleitung unter dem Menue-Punkt "SDK Flow"
+
+## Haeufige Fragen (FAQ) — IAM-Systeme und Consent
+
+### Was ist WSO2 Identity Server?
+
+WSO2 Identity Server ist ein Open-Source Identity & Access Management (IAM) System,
+vergleichbar mit Keycloak, Auth0 oder Azure AD B2C. Es wird von der Firma WSO2 Inc.
+(Hauptsitz: Mountain View, USA + Colombo, Sri Lanka) entwickelt und gepflegt.
+
+**DSGVO-Relevanz:** WSO2 IS liefert Standard-HTML-Templates fuer Login-, Registrierungs-
+und Passwort-Reset-Seiten aus. Organisationen uebernehmen diese Templates oft 1:1 —
+inklusive der Consent-Texte. Das fuehrt zu **systemischen Compliance-Problemen**:
+
+- Die englischen Default-Texte sind bereits grenzwertig ("By clicking Register, you
+  agree to our Terms and Privacy Policy" — kein aktiver Opt-in)
+- Uebersetzungen werden maschinell oder von Nicht-Juristen erstellt
+- Niemand prueft ob die Formulierungen DSGVO-konform sind
+- Das Pattern "Klick = Zustimmung" verletzt Art. 7(4) DSGVO (Koppelungsverbot)
+  und EuGH C-673/17 Planet49 (aktive Einwilligung erforderlich)
+
+**Betroffene Organisationen:** EU-Behoerden (z.B. EUIPO), Regierungen, Telcos,
+Banken, Versicherungen, Universitaeten — alle mit demselben Template-Fehler.
+
+**Empfehlung:** Registrierungs- und Login-Seiten muessen geprueft werden auf:
+1. Separate Checkboxen fuer Nutzungsbedingungen und Datenschutz (Granularitaet)
+2. Aktive Zustimmungshandlung (Checkbox, nicht nur Button-Klick)
+3. Moeglichkeit zur Ablehnung (Art. 7(3) DSGVO)
+4. Grammatisch korrekte, verstaendliche Formulierung in der Sprache des Nutzers
+5. Keine Koppelung von Einwilligung an Registrierung/Login (Art. 7(4) DSGVO)
+
+### Welche IAM-Systeme haben aehnliche Probleme?
+
+| System | Anbieter | Typisches Problem |
+|--------|----------|-------------------|
+| WSO2 Identity Server | WSO2 Inc. (US/LK) | Default-Templates mit Zwangs-Consent |
+| Keycloak | Red Hat (US) | Kein Consent-Layer im Default-Theme |
+| Azure AD B2C | Microsoft (US) | Custom Policies ohne DSGVO-Pruefung |
+| Auth0 | Okta (US) | Universal Login ohne granularen Consent |
+| AWS Cognito | Amazon (US) | Hosted UI ohne Consent-Management |
+| ForgeRock | Ping Identity (US) | AM Templates ohne EU-Lokalisierung |
+
+Alle diese Systeme erfordern manuelle Anpassung der Templates fuer DSGVO-Konformitaet.
+Unser Compliance Agent kann Login/Registrierungsseiten auf diese Pattern pruefen.
+
+### Was ist das Koppelungsverbot (Art. 7(4) DSGVO)?
+
+Die Einwilligung zur Datenverarbeitung darf NICHT an die Erfuellung eines Vertrags
+oder die Erbringung einer Dienstleistung gekoppelt werden, wenn die Datenverarbeitung
+fuer die Vertragserfuellung nicht erforderlich ist.
+
+**Praxis-Beispiel:** "Mit Klick auf Registrieren stimmen Sie unserer Datenschutzerklaerung zu"
+ist ein Verstoss, wenn der Dienst auch ohne diese Zustimmung nutzbar waere.
+
+**Korrekt:** Separate, freiwillige Checkbox: "Ich willige in die Verarbeitung meiner Daten
+gemaess der Datenschutzerklaerung ein (freiwillig)."
+
+**Quellen:** Art. 7(4) DSGVO, ErwGr. 43, EDPB Guidelines 05/2020 Rn. 26-30.
+
+## CMP — Consent Management Platform
+
+Das BreakPilot CMP ist die integrierte Consent-Management-Plattform im SDK.
+Erreichbar ueber die CMP-Sektion in der Sidebar oder unter /sdk/cmp.
+
+**Module:**
+- **Dashboard** (/sdk/cmp) — Ueberblick ueber Consents, DSR, Compliance-Status
+- **Cookie-Banner** (/sdk/cookie-banner) — Banner konfigurieren mit EWR-Only Toggle
+- **Live-Vorschau** (/sdk/cookie-banner/preview) — Banner auf simulierter Website testen
+- **Consent-Records** (/sdk/einwilligungen) — Alle Einwilligungen einsehen
+- **Consent-Verwaltung** (/sdk/consent-management) — Dokument-Lifecycle
+- **Vendor-Compliance** (/sdk/vendor-compliance) — Dienstleister-Management
+- **DSR Portal** (/sdk/dsr) — Betroffenenrechte Art. 15-21
+- **Loeschfristen** (/sdk/loeschfristen) — Aufbewahrungsrichtlinien
+- **E-Mail-Templates** (/sdk/email-templates) — Benachrichtigungsvorlagen
+
+**Einzigartiges Feature: "Nur EU/EWR" Toggle**
+Nutzer koennen einer Cookie-Kategorie zustimmen (z.B. Marketing), aber gleichzeitig
+alle Anbieter ausserhalb des EWR blockieren. Beispiel: Marketing = AN, EWR-Only = AN
+bedeutet LinkedIn Insight (EU/Irland) wird geladen, Facebook Pixel (USA) wird blockiert.
+Kein anderes CMP bietet dieses Feature.
+
 ## Eskalation
- Bei Fragen ausserhalb des Kompetenzbereichs: Hoeflich ablehnen und auf Fachanwalt verweisen
+- Bei Fragen ausserhalb des Kompetenzbereichs: Wenn die Frage harmlos ist (z.B. "Hast Du Informationen zu X?"), kurz mit Ja/Nein antworten und anbieten konkreter zu helfen. NUR bei sensiblen oder rechtsberatenden Fragen hoeflich ablehnen und auf Fachanwalt verweisen.
 - Bei widerspruechlichen Rechtslagen: Beide Positionen darstellen und DSB-Konsultation empfehlen
 - Bei dringenden Datenpannen: Auf 72-Stunden-Frist (Art. 33 DSGVO) hinweisen und Notfallplan-Modul empfehlen
@@ -240,7 +240,7 @@ export async function handleV2Draft(body: Record<string, unknown>): Promise<Next
  const promptHash = computeChecksumSync({ factsString, tagsString, termsString, styleString, disallowedString })

  const v2RagCfg = DOCUMENT_RAG_CONFIG[documentType]
-  const v2RagContext = await queryRAG(v2RagCfg.query, 3, v2RagCfg.collection)
+  const v2RagContext = v2RagCfg ? await queryRAG(v2RagCfg.query, 3, v2RagCfg.collection) : null

  const proseBlocks = DOCUMENT_PROSE_BLOCKS[documentType] || DOCUMENT_PROSE_BLOCKS.tom
  const generatedBlocks: ProseBlockOutput[] = []
@@ -88,7 +88,7 @@ export async function handleV1Draft(body: Record<string, unknown>): Promise<Next
  }

  const ragCfg = DOCUMENT_RAG_CONFIG[documentType]
-  const ragContext = await queryRAG(ragCfg.query, 3, ragCfg.collection)
+  const ragContext = ragCfg ? await queryRAG(ragCfg.query, 3, ragCfg.collection) : null

  let v1SystemPrompt = V1_SYSTEM_PROMPT
  if (ragContext) {
@@ -6,7 +6,7 @@
 */

 import { NextRequest, NextResponse } from 'next/server'
-import { DOCUMENT_SCOPE_MATRIX, DOCUMENT_TYPE_LABELS, getDepthLevelNumeric } from '@/lib/sdk/compliance-scope-types'
+import { DOCUMENT_SCOPE_MATRIX_CORE, DOCUMENT_TYPE_LABELS, getDepthLevelNumeric } from '@/lib/sdk/compliance-scope-types'
 import type { ScopeDocumentType, ComplianceDepthLevel } from '@/lib/sdk/compliance-scope-types'
 import type { ValidationContext, ValidationResult, ValidationFinding } from '@/lib/sdk/drafting-engine/types'
 import { buildCrossCheckPrompt } from '@/lib/sdk/drafting-engine/prompts/validate-cross-check'
@@ -94,7 +94,7 @@ function deterministicCheck(
  const findings: ValidationFinding[] = []
  const level = validationContext.scopeLevel
  const levelNumeric = getDepthLevelNumeric(level)
-  const req = DOCUMENT_SCOPE_MATRIX[documentType]?.[level]
+  const req = DOCUMENT_SCOPE_MATRIX_CORE[documentType]?.[level]

  // Check 1: Ist das Dokument auf diesem Level erforderlich?
  if (req && !req.required && levelNumeric < 3) {
@@ -109,8 +109,8 @@ function deterministicCheck(
  }

  // Check 2: VVT vorhanden wenn erforderlich?
-  const vvtReq = DOCUMENT_SCOPE_MATRIX.vvt[level]
-  if (vvtReq.required && validationContext.crossReferences.vvtCategories.length === 0) {
+  const vvtReq = DOCUMENT_SCOPE_MATRIX_CORE.vvt?.[level]
+  if (vvtReq?.required && validationContext.crossReferences.vvtCategories.length === 0) {
    findings.push({
      id: 'DET-VVT-MISSING',
      severity: 'error',
@@ -0,0 +1,42 @@
+/**
+ * Agent Analyze API Proxy
+ * POST /api/sdk/v1/agent/analyze → backend-compliance /api/compliance/agent/analyze
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_API_URL || 'http://backend-compliance:8002'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.text()
+
+    const response = await fetch(`${BACKEND_URL}/api/compliance/agent/analyze`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-Id': '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e',
+        'X-User-Id': '00000000-0000-0000-0000-000000000001',
+      },
+      body,
+      signal: AbortSignal.timeout(120000), // 2 min — LLM can be slow
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: `Backend: ${response.status}`, detail: errorText },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('Agent analyze proxy error:', error)
+    return NextResponse.json(
+      { error: 'Verbindung zum Backend fehlgeschlagen' },
+      { status: 503 }
+    )
+  }
+}
@@ -0,0 +1,42 @@
+/**
+ * Banner Check API Proxy — calls consent-tester /scan endpoint
+ *
+ * POST /api/sdk/v1/agent/banner-check → runs 3-phase cookie banner test
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_API_URL || 'http://backend-compliance:8002'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { url, categories = [] } = body
+
+    if (!url) {
+      return NextResponse.json({ error: 'URL erforderlich' }, { status: 400 })
+    }
+
+    // Call backend which proxies to consent-tester
+    const response = await fetch(`${BACKEND_URL}/api/compliance/agent/banner-check`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, categories }),
+      signal: AbortSignal.timeout(120000), // 2 min for Playwright
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: `Backend: ${response.status}`, detail: errorText },
+        { status: response.status },
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : 'Unknown error'
+    return NextResponse.json({ error: msg }, { status: 500 })
+  }
+}
@@ -0,0 +1,39 @@
+/**
+ * Agent Doc-Check Proxy — Multi-URL document verification
+ * POST: start check, GET: poll status
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_API_URL || 'http://backend-compliance:8002'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.text()
+    const response = await fetch(`${BACKEND_URL}/api/compliance/agent/doc-check`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body,
+      signal: AbortSignal.timeout(30000),
+    })
+    const data = await response.json()
+    return NextResponse.json(data, { status: response.status })
+  } catch (error) {
+    return NextResponse.json({ error: 'Pruefung konnte nicht gestartet werden' }, { status: 503 })
+  }
+}
+
+export async function GET(request: NextRequest) {
+  const checkId = request.nextUrl.searchParams.get('check_id')
+  if (!checkId) return NextResponse.json({ error: 'check_id required' }, { status: 400 })
+  try {
+    const response = await fetch(
+      `${BACKEND_URL}/api/compliance/agent/doc-check/${checkId}`,
+      { signal: AbortSignal.timeout(10000) },
+    )
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch {
+    return NextResponse.json({ error: 'Status-Abfrage fehlgeschlagen' }, { status: 503 })
+  }
+}
@@ -0,0 +1,70 @@
+/**
+ * Agent Scan API Proxy — async scan with polling
+ *
+ * POST /api/sdk/v1/agent/scan → starts scan, returns scan_id
+ * GET  /api/sdk/v1/agent/scan?scan_id=xxx → poll status/results
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_API_URL || 'http://backend-compliance:8002'
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.text()
+
+    // Start async scan — returns immediately with scan_id
+    const response = await fetch(`${BACKEND_URL}/api/compliance/agent/scan`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body,
+      signal: AbortSignal.timeout(30000), // 30s — just needs to start the job
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json(
+        { error: `Backend: ${response.status}`, detail: errorText },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('Agent scan proxy error:', error)
+    return NextResponse.json(
+      { error: 'Scan konnte nicht gestartet werden' },
+      { status: 503 }
+    )
+  }
+}
+
+export async function GET(request: NextRequest) {
+  const scanId = request.nextUrl.searchParams.get('scan_id')
+  if (!scanId) {
+    return NextResponse.json({ error: 'scan_id parameter required' }, { status: 400 })
+  }
+
+  try {
+    const response = await fetch(
+      `${BACKEND_URL}/api/compliance/agent/scan/${scanId}`,
+      { signal: AbortSignal.timeout(10000) }
+    )
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `Backend: ${response.status}` },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Status-Abfrage fehlgeschlagen' },
+      { status: 503 }
+    )
+  }
+}
@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const { id } = await params
+    const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration/${id}`)
+    const data = await resp.json()
+    return NextResponse.json(data)
+  } catch (err) {
+    return NextResponse.json({ error: 'Failed to fetch registration' }, { status: 500 })
+  }
+}
+
+export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const { id } = await params
+    const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+    const body = await request.json()
+    const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      body: JSON.stringify(body),
+    })
+    const data = await resp.json()
+    return NextResponse.json(data, { status: resp.status })
+  } catch (err) {
+    return NextResponse.json({ error: 'Failed to update registration' }, { status: 500 })
+  }
+}
+
+export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const { id } = await params
+    const body = await request.json()
+    const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration/${id}/status`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+    const data = await resp.json()
+    return NextResponse.json(data, { status: resp.status })
+  } catch (err) {
+    return NextResponse.json({ error: 'Failed to update status' }, { status: 500 })
+  }
+}
@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+
+export async function GET(request: NextRequest) {
+  try {
+    const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+    const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration`, {
+      headers: { 'X-Tenant-ID': tenantId },
+    })
+    const data = await resp.json()
+    return NextResponse.json(data)
+  } catch (err) {
+    return NextResponse.json({ error: 'Failed to fetch registrations' }, { status: 500 })
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+    const body = await request.json()
+    const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      body: JSON.stringify(body),
+    })
+    const data = await resp.json()
+    return NextResponse.json(data, { status: resp.status })
+  } catch (err) {
+    return NextResponse.json({ error: 'Failed to create registration' }, { status: 500 })
+  }
+}
@@ -0,0 +1,74 @@
+/**
+ * Banner API Proxy — catch-all route for cookie banner endpoints.
+ *
+ * Maps: /api/sdk/v1/banner/<path> → backend-compliance:8002/api/compliance/banner/<path>
+ *
+ * Solves: Browser cannot call backend-compliance:8093 directly due to
+ * self-signed SSL certificates. This proxy runs server-side where
+ * certificate validation is not an issue.
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const BACKEND_URL = process.env.BACKEND_URL || 'http://backend-compliance:8002'
+const DEFAULT_TENANT = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+
+async function proxyRequest(
+  request: NextRequest,
+  pathSegments: string[] | undefined,
+  method: string,
+) {
+  const pathStr = pathSegments?.join('/') || ''
+  const qs = request.nextUrl.searchParams.toString()
+  const base = `${BACKEND_URL}/api/compliance/banner`
+  const url = pathStr
+    ? `${base}/${pathStr}${qs ? `?${qs}` : ''}`
+    : `${base}${qs ? `?${qs}` : ''}`
+
+  try {
+    const headers: HeadersInit = {
+      'X-Tenant-ID': request.headers.get('x-tenant-id') || DEFAULT_TENANT,
+    }
+    const ct = request.headers.get('Content-Type')
+    if (ct) headers['Content-Type'] = ct
+
+    const opts: RequestInit = { method, headers, signal: AbortSignal.timeout(30000) }
+
+    if (method === 'POST' || method === 'PUT') {
+      const body = await request.text()
+      if (body) opts.body = body
+    }
+
+    const res = await fetch(url, opts)
+    const text = await res.text()
+    let data
+    try { data = JSON.parse(text) } catch { data = { raw: text } }
+
+    if (!res.ok) {
+      return NextResponse.json(
+        { error: `Backend ${res.status}`, ...data },
+        { status: res.status },
+      )
+    }
+    return NextResponse.json(data)
+  } catch (err: any) {
+    console.error('Banner proxy error:', err?.message)
+    return NextResponse.json(
+      { error: 'Backend nicht erreichbar' },
+      { status: 503 },
+    )
+  }
+}
+
+export async function GET(req: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  return proxyRequest(req, (await params).path, 'GET')
+}
+export async function POST(req: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  return proxyRequest(req, (await params).path, 'POST')
+}
+export async function PUT(req: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  return proxyRequest(req, (await params).path, 'PUT')
+}
+export async function DELETE(req: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  return proxyRequest(req, (await params).path, 'DELETE')
+}
@@ -23,12 +23,13 @@ function getTenantId(request: NextRequest): string {
 */
 export async function GET(
  request: NextRequest,
-  { params }: { params: { id: string } }
+  { params }: { params: Promise<{ id: string }> }
 ) {
  try {
+    const { id } = await params
    const tenantId = getTenantId(request)
    const response = await fetch(
-      `${BACKEND_URL}/api/compliance/einwilligungen/consents/${params.id}/history`,
+      `${BACKEND_URL}/api/compliance/einwilligungen/consents/${id}/history`,
      {
        method: 'GET',
        headers: {
@@ -30,15 +30,15 @@ async function proxyRequest(
      headers['Authorization'] = authHeader
    }

+    // Default tenant/user for IACE (same pattern as training proxy)
+    const DEFAULT_TENANT = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+    const DEFAULT_USER = '00000000-0000-0000-0000-000000000001'
+
    const tenantHeader = request.headers.get('x-tenant-id')
-    if (tenantHeader) {
-      headers['X-Tenant-Id'] = tenantHeader
-    }
+    headers['X-Tenant-Id'] = tenantHeader || DEFAULT_TENANT

    const userHeader = request.headers.get('x-user-id')
-    if (userHeader) {
-      headers['X-User-Id'] = userHeader
-    }
+    headers['X-User-Id'] = userHeader || DEFAULT_USER

    const fetchOptions: RequestInit = {
      method,
@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+const DEFAULT_TENANT_ID = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+const DEFAULT_USER_ID = '00000000-0000-0000-0000-000000000001'
+
+function buildUrl(request: NextRequest, params: { path?: string[] }) {
+  const subPath = params.path?.join('/') || ''
+  const { searchParams } = new URL(request.url)
+  const qs = searchParams.toString()
+  return `${SDK_URL}/sdk/v1/maximizer/${subPath}${qs ? `?${qs}` : ''}`
+}
+
+function forwardHeaders(request: NextRequest): Record<string, string> {
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+  headers['X-Tenant-ID'] = request.headers.get('X-Tenant-ID') || DEFAULT_TENANT_ID
+  headers['X-User-ID'] = request.headers.get('X-User-ID') || DEFAULT_USER_ID
+  return headers
+}
+
+async function proxy(request: NextRequest, params: { path?: string[] }, method: string) {
+  try {
+    const url = buildUrl(request, params)
+    const init: RequestInit = { method, headers: forwardHeaders(request) }
+    if (method !== 'GET' && method !== 'DELETE') {
+      init.body = await request.text()
+    }
+    const response = await fetch(url, init)
+    if (!response.ok) {
+      const errorText = await response.text()
+      return NextResponse.json({ error: 'Maximizer backend error', details: errorText }, { status: response.status })
+    }
+    if (response.status === 204) return new NextResponse(null, { status: 204 })
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('Maximizer proxy error:', error)
+    return NextResponse.json({ error: 'Failed to connect to Maximizer backend' }, { status: 503 })
+  }
+}
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  return proxy(request, await params, 'GET')
+}
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  return proxy(request, await params, 'POST')
+}
+
+export async function DELETE(request: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  return proxy(request, await params, 'DELETE')
+}
@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const endpoint = searchParams.get('endpoint') || 'controls'
+    const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+
+    let path: string
+    switch (endpoint) {
+      case 'controls':
+        const domain = searchParams.get('domain') || ''
+        path = `/sdk/v1/payment-compliance/controls${domain ? `?domain=${domain}` : ''}`
+        break
+      case 'assessments':
+        path = '/sdk/v1/payment-compliance/assessments'
+        break
+      default:
+        path = '/sdk/v1/payment-compliance/controls'
+    }
+
+    const resp = await fetch(`${SDK_URL}${path}`, {
+      headers: { 'X-Tenant-ID': tenantId },
+    })
+    const data = await resp.json()
+    return NextResponse.json(data)
+  } catch (err) {
+    return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 })
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+    const body = await request.json()
+    const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/assessments`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      body: JSON.stringify(body),
+    })
+    const data = await resp.json()
+    return NextResponse.json(data, { status: resp.status })
+  } catch (err) {
+    return NextResponse.json({ error: 'Failed to create' }, { status: 500 })
+  }
+}
@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const { id } = await params
+    const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender/${id}`)
+    return NextResponse.json(await resp.json())
+  } catch {
+    return NextResponse.json({ error: 'Failed' }, { status: 500 })
+  }
+}
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const { id } = await params
+    const { searchParams } = new URL(request.url)
+    const action = searchParams.get('action') || 'extract'
+    const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender/${id}/${action}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    })
+    return NextResponse.json(await resp.json(), { status: resp.status })
+  } catch {
+    return NextResponse.json({ error: 'Failed' }, { status: 500 })
+  }
+}
@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+
+export async function GET(request: NextRequest) {
+  try {
+    const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+    const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender`, {
+      headers: { 'X-Tenant-ID': tenantId },
+    })
+    return NextResponse.json(await resp.json())
+  } catch {
+    return NextResponse.json({ error: 'Failed' }, { status: 500 })
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+    const formData = await request.formData()
+    const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender/upload`, {
+      method: 'POST',
+      headers: { 'X-Tenant-ID': tenantId },
+      body: formData,
+    })
+    return NextResponse.json(await resp.json(), { status: resp.status })
+  } catch {
+    return NextResponse.json({ error: 'Upload failed' }, { status: 500 })
+  }
+}
@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+const DEFAULT_TENANT_ID = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const qs = searchParams.toString()
+    const url = `${SDK_URL}/sdk/v1/regulatory-news${qs ? `?${qs}` : ''}`
+
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': request.headers.get('X-Tenant-ID') || DEFAULT_TENANT_ID,
+      },
+    })
+
+    if (!response.ok) {
+      return NextResponse.json({ error: 'SDK error' }, { status: response.status })
+    }
+    return NextResponse.json(await response.json())
+  } catch {
+    return NextResponse.json({ error: 'Connection failed' }, { status: 503 })
+  }
+}
@@ -92,11 +92,17 @@ class PostgreSQLStateStore implements StateStore {
  private pool: Pool

  constructor(connectionString: string) {
+    // Strip sslmode from URL — pg driver overrides our ssl config if it's in the URL.
+    // We handle SSL ourselves via the ssl option below.
+    const cleanUrl = connectionString.replace(/[?&]sslmode=[^&]*/g, '').replace(/\?$/, '')
+    const needsSsl = connectionString.includes('sslmode=require') || connectionString.includes('sslmode=verify')
    this.pool = new Pool({
-      connectionString,
+      connectionString: cleanUrl,
      max: 5,
      // Set search_path for compliance schema
      options: '-c search_path=compliance,core,public',
+      // Accept self-signed certificates (Hetzner PostgreSQL)
+      ssl: needsSsl ? { rejectUnauthorized: false } : false,
    })
  }

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+const DEFAULT_TENANT_ID = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+
+/**
+ * Proxy: POST /api/sdk/v1/ucca/assess-enriched → Go Backend POST /sdk/v1/ucca/assess-enriched
+ * Accepts { intake, company_profile? } and returns enriched assessment with obligations + hints.
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+
+    const response = await fetch(`${SDK_URL}/sdk/v1/ucca/assess-enriched`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': request.headers.get('X-Tenant-ID') || DEFAULT_TENANT_ID,
+      },
+      body: JSON.stringify(body),
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error('UCCA assess-enriched error:', errorText)
+      return NextResponse.json(
+        { error: 'UCCA backend error', details: errorText },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data, { status: 201 })
+  } catch (error) {
+    console.error('Failed to call UCCA assess-enriched:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to UCCA backend' },
+      { status: 503 }
+    )
+  }
+}
@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server'

 const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+const DEFAULT_TENANT_ID = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'

 /**
 * Proxy: GET /api/sdk/v1/ucca/assessments/[id] → Go Backend GET /sdk/v1/ucca/assessments/:id
@@ -16,9 +17,7 @@ export async function GET(
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
-        ...(request.headers.get('X-Tenant-ID') && {
-          'X-Tenant-ID': request.headers.get('X-Tenant-ID') as string,
-        }),
+        'X-Tenant-ID': request.headers.get('X-Tenant-ID') || DEFAULT_TENANT_ID,
      },
    })

@@ -56,9 +55,7 @@ export async function PUT(
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
-        ...(request.headers.get('X-Tenant-ID') && {
-          'X-Tenant-ID': request.headers.get('X-Tenant-ID') as string,
-        }),
+        'X-Tenant-ID': request.headers.get('X-Tenant-ID') || DEFAULT_TENANT_ID,
      },
      body: JSON.stringify(body),
    })
@@ -96,9 +93,7 @@ export async function DELETE(
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json',
-        ...(request.headers.get('X-Tenant-ID') && {
-          'X-Tenant-ID': request.headers.get('X-Tenant-ID') as string,
-        }),
+        'X-Tenant-ID': request.headers.get('X-Tenant-ID') || DEFAULT_TENANT_ID,
      },
    })

@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server'

 const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+const DEFAULT_TENANT_ID = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'

 /**
 * Proxy: GET /api/sdk/v1/ucca/assessments → Go Backend GET /sdk/v1/ucca/assessments
@@ -22,9 +23,7 @@ export async function GET(request: NextRequest) {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
-        ...(request.headers.get('X-Tenant-ID') && {
-          'X-Tenant-ID': request.headers.get('X-Tenant-ID') as string,
-        }),
+        'X-Tenant-ID': request.headers.get('X-Tenant-ID') || DEFAULT_TENANT_ID,
      },
    })

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
+const DEFAULT_TENANT = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+
+/**
+ * Proxy: /api/sdk/v1/ucca/decision-tree/... → Go Backend /sdk/v1/ucca/decision-tree/...
+ */
+async function proxyRequest(request: NextRequest, { params }: { params: Promise<{ path?: string[] }> }) {
+  const { path } = await params
+  const subPath = path ? path.join('/') : ''
+  const search = request.nextUrl.search || ''
+  const targetUrl = `${SDK_URL}/sdk/v1/ucca/decision-tree/${subPath}${search}`
+
+  const tenantID = request.headers.get('X-Tenant-ID') || DEFAULT_TENANT
+
+  try {
+    const headers: Record<string, string> = {
+      'X-Tenant-ID': tenantID,
+    }
+
+    const fetchOptions: RequestInit = {
+      method: request.method,
+      headers,
+    }
+
+    if (request.method === 'POST' || request.method === 'PUT' || request.method === 'PATCH') {
+      const body = await request.json()
+      headers['Content-Type'] = 'application/json'
+      fetchOptions.body = JSON.stringify(body)
+    }
+
+    const response = await fetch(targetUrl, fetchOptions)
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error(`Decision tree proxy error [${request.method} ${subPath}]:`, errorText)
+      return NextResponse.json(
+        { error: 'Backend error', details: errorText },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data, { status: response.status })
+  } catch (error) {
+    console.error('Decision tree proxy connection error:', error)
+    return NextResponse.json(
+      { error: 'Failed to connect to AI compliance backend' },
+      { status: 503 }
+    )
+  }
+}
+
+export const GET = proxyRequest
+export const POST = proxyRequest
+export const DELETE = proxyRequest
@@ -2,6 +2,7 @@

 import React from 'react'
 import { AssessmentResultCard } from '@/components/sdk/use-case-assessment/AssessmentResultCard'
+import { OptimizerUpsellCard } from '@/components/sdk/compliance-optimizer/OptimizerUpsellCard'

 interface Props {
  result: unknown
@@ -35,6 +36,13 @@ export function ResultView({ result, onGoToAssessment, onGoToOverview }: Props)
      {r.result && (
        <AssessmentResultCard result={r.result as unknown as Parameters<typeof AssessmentResultCard>[0]['result']} />
      )}
+      {r.result && r.assessment?.id && (
+        <OptimizerUpsellCard
+          feasibility={(r.result as { feasibility?: string }).feasibility || 'YES'}
+          assessmentId={r.assessment.id}
+          riskScore={(r.result as { risk_score?: number }).risk_score}
+        />
+      )}
    </div>
  )
 }
@@ -7,6 +7,116 @@ export interface AdvisoryForm {
  custom_data_types: string[]
  purposes: string[]
  automation: string
+  // BetrVG / works council
+  employee_monitoring: boolean
+  hr_decision_support: boolean
+  works_council_consulted: boolean
+  // Domain-specific contexts (Annex III)
+  hr_automated_screening: boolean
+  hr_automated_rejection: boolean
+  hr_candidate_ranking: boolean
+  hr_bias_audits: boolean
+  hr_agg_visible: boolean
+  hr_human_review: boolean
+  hr_performance_eval: boolean
+  edu_grade_influence: boolean
+  edu_exam_evaluation: boolean
+  edu_student_selection: boolean
+  edu_minors: boolean
+  edu_teacher_review: boolean
+  hc_diagnosis: boolean
+  hc_treatment: boolean
+  hc_triage: boolean
+  hc_patient_data: boolean
+  hc_medical_device: boolean
+  hc_clinical_validation: boolean
+  // Legal
+  leg_legal_advice: boolean
+  leg_court_prediction: boolean
+  leg_client_confidential: boolean
+  // Public Sector
+  pub_admin_decision: boolean
+  pub_benefit_allocation: boolean
+  pub_transparency: boolean
+  // Critical Infrastructure
+  crit_grid_control: boolean
+  crit_safety_critical: boolean
+  crit_redundancy: boolean
+  // Automotive
+  auto_autonomous: boolean
+  auto_safety: boolean
+  auto_functional_safety: boolean
+  // Retail
+  ret_pricing: boolean
+  ret_profiling: boolean
+  ret_credit_scoring: boolean
+  ret_dark_patterns: boolean
+  // IT Security
+  its_surveillance: boolean
+  its_threat_detection: boolean
+  its_data_retention: boolean
+  // Logistics
+  log_driver_tracking: boolean
+  log_workload_scoring: boolean
+  // Construction
+  con_tenant_screening: boolean
+  con_worker_safety: boolean
+  // Marketing
+  mkt_deepfake: boolean
+  mkt_minors: boolean
+  mkt_targeting: boolean
+  mkt_labeled: boolean
+  // Manufacturing
+  mfg_machine_safety: boolean
+  mfg_ce_required: boolean
+  mfg_validated: boolean
+  // Agriculture
+  agr_pesticide: boolean
+  agr_animal_welfare: boolean
+  agr_environmental: boolean
+  // Social Services
+  soc_vulnerable: boolean
+  soc_benefit: boolean
+  soc_case_mgmt: boolean
+  // Hospitality
+  hos_guest_profiling: boolean
+  hos_dynamic_pricing: boolean
+  hos_review_manipulation: boolean
+  // Insurance
+  ins_risk_class: boolean
+  ins_claims: boolean
+  ins_premium: boolean
+  ins_fraud: boolean
+  // Investment
+  inv_algo_trading: boolean
+  inv_advice: boolean
+  inv_robo: boolean
+  // Defense
+  def_dual_use: boolean
+  def_export: boolean
+  def_classified: boolean
+  // Supply Chain
+  sch_supplier: boolean
+  sch_human_rights: boolean
+  sch_environmental: boolean
+  // Facility
+  fac_access: boolean
+  fac_occupancy: boolean
+  fac_energy: boolean
+  // Sports
+  spo_athlete: boolean
+  spo_fan: boolean
+  spo_doping: boolean
+  // Finance / Banking
+  fin_credit_scoring: boolean
+  fin_aml_kyc: boolean
+  fin_algo_decisions: boolean
+  fin_customer_profiling: boolean
+  // General
+  gen_affects_people: boolean
+  gen_automated_decisions: boolean
+  gen_sensitive_data: boolean
+  // Hosting
  hosting_provider: string
  hosting_region: string
  model_usage: string[]
@@ -51,6 +51,71 @@ function AdvisoryBoardPageInner() {
    custom_data_types: [],
    purposes: [],
    automation: '',
+    // BetrVG / works council
+    employee_monitoring: false,
+    hr_decision_support: false,
+    works_council_consulted: false,
+    // Domain-specific contexts (Annex III)
+    hr_automated_screening: false,
+    hr_automated_rejection: false,
+    hr_candidate_ranking: false,
+    hr_bias_audits: false,
+    hr_agg_visible: false,
+    hr_human_review: false,
+    hr_performance_eval: false,
+    edu_grade_influence: false,
+    edu_exam_evaluation: false,
+    edu_student_selection: false,
+    edu_minors: false,
+    edu_teacher_review: false,
+    hc_diagnosis: false,
+    hc_treatment: false,
+    hc_triage: false,
+    hc_patient_data: false,
+    hc_medical_device: false,
+    hc_clinical_validation: false,
+    // Legal
+    leg_legal_advice: false, leg_court_prediction: false, leg_client_confidential: false,
+    // Public Sector
+    pub_admin_decision: false, pub_benefit_allocation: false, pub_transparency: false,
+    // Critical Infrastructure
+    crit_grid_control: false, crit_safety_critical: false, crit_redundancy: false,
+    // Automotive
+    auto_autonomous: false, auto_safety: false, auto_functional_safety: false,
+    // Retail
+    ret_pricing: false, ret_profiling: false, ret_credit_scoring: false, ret_dark_patterns: false,
+    // IT Security
+    its_surveillance: false, its_threat_detection: false, its_data_retention: false,
+    // Logistics
+    log_driver_tracking: false, log_workload_scoring: false,
+    // Construction
+    con_tenant_screening: false, con_worker_safety: false,
+    // Marketing
+    mkt_deepfake: false, mkt_minors: false, mkt_targeting: false, mkt_labeled: false,
+    // Manufacturing
+    mfg_machine_safety: false, mfg_ce_required: false, mfg_validated: false,
+    // Agriculture
+    agr_pesticide: false, agr_animal_welfare: false, agr_environmental: false,
+    // Social Services
+    soc_vulnerable: false, soc_benefit: false, soc_case_mgmt: false,
+    // Hospitality
+    hos_guest_profiling: false, hos_dynamic_pricing: false, hos_review_manipulation: false,
+    // Insurance
+    ins_risk_class: false, ins_claims: false, ins_premium: false, ins_fraud: false,
+    // Investment
+    inv_algo_trading: false, inv_advice: false, inv_robo: false,
+    // Defense
+    def_dual_use: false, def_export: false, def_classified: false,
+    // Supply Chain
+    sch_supplier: false, sch_human_rights: false, sch_environmental: false,
+    // Facility
+    fac_access: false, fac_occupancy: false, fac_energy: false,
+    // Sports
+    spo_athlete: false, spo_fan: false, spo_doping: false,
+    // Finance / Banking
+    fin_credit_scoring: false, fin_aml_kyc: false, fin_algo_decisions: false, fin_customer_profiling: false,
+    // General
+    gen_affects_people: false, gen_automated_decisions: false, gen_sensitive_data: false,
    hosting_provider: '',
    hosting_region: '',
    model_usage: [],
@@ -133,18 +198,164 @@ function AdvisoryBoardPageInner() {
        retention_purpose: form.retention_purpose,
        contracts_list: form.contracts,
        subprocessors: form.subprocessors,
+        employee_monitoring: form.employee_monitoring,
+        hr_decision_support: form.hr_decision_support,
+        works_council_consulted: form.works_council_consulted,
+        // Domain-specific contexts
+        hr_context: ['hr', 'recruiting'].includes(form.domain) ? {
+          automated_screening: form.hr_automated_screening,
+          automated_rejection: form.hr_automated_rejection,
+          candidate_ranking: form.hr_candidate_ranking,
+          bias_audits_done: form.hr_bias_audits,
+          agg_categories_visible: form.hr_agg_visible,
+          human_review_enforced: form.hr_human_review,
+          performance_evaluation: form.hr_performance_eval,
+        } : undefined,
+        education_context: ['education', 'higher_education', 'vocational_training', 'research'].includes(form.domain) ? {
+          grade_influence: form.edu_grade_influence,
+          exam_evaluation: form.edu_exam_evaluation,
+          student_selection: form.edu_student_selection,
+          minors_involved: form.edu_minors,
+          teacher_review_required: form.edu_teacher_review,
+        } : undefined,
+        healthcare_context: ['healthcare', 'medical_devices', 'pharma', 'elderly_care'].includes(form.domain) ? {
+          diagnosis_support: form.hc_diagnosis,
+          treatment_recommendation: form.hc_treatment,
+          triage_decision: form.hc_triage,
+          patient_data_processed: form.hc_patient_data,
+          medical_device: form.hc_medical_device,
+          clinical_validation: form.hc_clinical_validation,
+        } : undefined,
+        legal_context: ['legal', 'consulting', 'tax_advisory'].includes(form.domain) ? {
+          legal_advice: form.leg_legal_advice,
+          court_prediction: form.leg_court_prediction,
+          client_confidential: form.leg_client_confidential,
+        } : undefined,
+        public_sector_context: ['public_sector', 'defense', 'justice'].includes(form.domain) ? {
+          admin_decision: form.pub_admin_decision,
+          benefit_allocation: form.pub_benefit_allocation,
+          transparency_ensured: form.pub_transparency,
+        } : undefined,
+        critical_infra_context: ['energy', 'utilities', 'oil_gas'].includes(form.domain) ? {
+          grid_control: form.crit_grid_control,
+          safety_critical: form.crit_safety_critical,
+          redundancy_exists: form.crit_redundancy,
+        } : undefined,
+        automotive_context: ['automotive', 'aerospace'].includes(form.domain) ? {
+          autonomous_driving: form.auto_autonomous,
+          safety_relevant: form.auto_safety,
+          functional_safety: form.auto_functional_safety,
+        } : undefined,
+        retail_context: ['retail', 'ecommerce', 'wholesale'].includes(form.domain) ? {
+          pricing_personalized: form.ret_pricing,
+          credit_scoring: form.ret_credit_scoring,
+          dark_patterns: form.ret_dark_patterns,
+        } : undefined,
+        it_security_context: ['it_services', 'cybersecurity', 'telecom'].includes(form.domain) ? {
+          employee_surveillance: form.its_surveillance,
+          threat_detection: form.its_threat_detection,
+          data_retention_logs: form.its_data_retention,
+        } : undefined,
+        logistics_context: ['logistics'].includes(form.domain) ? {
+          driver_tracking: form.log_driver_tracking,
+          workload_scoring: form.log_workload_scoring,
+        } : undefined,
+        construction_context: ['construction', 'real_estate', 'facility_management'].includes(form.domain) ? {
+          tenant_screening: form.con_tenant_screening,
+          worker_safety: form.con_worker_safety,
+        } : undefined,
+        marketing_context: ['marketing', 'media', 'entertainment'].includes(form.domain) ? {
+          deepfake_content: form.mkt_deepfake,
+          behavioral_targeting: form.mkt_targeting,
+          minors_targeted: form.mkt_minors,
+          ai_content_labeled: form.mkt_labeled,
+        } : undefined,
+        manufacturing_context: ['mechanical_engineering', 'electrical_engineering', 'plant_engineering', 'chemicals', 'food_beverage'].includes(form.domain) ? {
+          machine_safety: form.mfg_machine_safety,
+          ce_marking_required: form.mfg_ce_required,
+          safety_validated: form.mfg_validated,
+        } : undefined,
+        agriculture_context: ['agriculture', 'forestry', 'fishing'].includes(form.domain) ? {
+          pesticide_ai: form.agr_pesticide,
+          animal_welfare: form.agr_animal_welfare,
+          environmental_data: form.agr_environmental,
+        } : undefined,
+        social_services_context: ['social_services', 'nonprofit'].includes(form.domain) ? {
+          vulnerable_groups: form.soc_vulnerable,
+          benefit_decision: form.soc_benefit,
+          case_management: form.soc_case_mgmt,
+        } : undefined,
+        hospitality_context: ['hospitality', 'tourism'].includes(form.domain) ? {
+          guest_profiling: form.hos_guest_profiling,
+          dynamic_pricing: form.hos_dynamic_pricing,
+          review_manipulation: form.hos_review_manipulation,
+        } : undefined,
+        insurance_context: ['insurance'].includes(form.domain) ? {
+          risk_classification: form.ins_risk_class,
+          claims_automation: form.ins_claims,
+          premium_calculation: form.ins_premium,
+          fraud_detection: form.ins_fraud,
+        } : undefined,
+        investment_context: ['investment'].includes(form.domain) ? {
+          algo_trading: form.inv_algo_trading,
+          investment_advice: form.inv_advice,
+          robo_advisor: form.inv_robo,
+        } : undefined,
+        defense_context: ['defense'].includes(form.domain) ? {
+          dual_use: form.def_dual_use,
+          export_controlled: form.def_export,
+          classified_data: form.def_classified,
+        } : undefined,
+        supply_chain_context: ['textiles', 'packaging'].includes(form.domain) ? {
+          supplier_monitoring: form.sch_supplier,
+          human_rights_check: form.sch_human_rights,
+          environmental_impact: form.sch_environmental,
+        } : undefined,
+        facility_context: ['facility_management'].includes(form.domain) ? {
+          access_control_ai: form.fac_access,
+          occupancy_tracking: form.fac_occupancy,
+          energy_optimization: form.fac_energy,
+        } : undefined,
+        sports_context: ['sports'].includes(form.domain) ? {
+          athlete_tracking: form.spo_athlete,
+          fan_profiling: form.spo_fan,
+        } : undefined,
        store_raw_text: true,
+        // Finance/Banking and General don't need separate context structs —
+        // their fields are evaluated via existing FinancialContext or generic rules
      }

      const url = isEditMode
        ? `/api/sdk/v1/ucca/assessments/${editId}`
-        : '/api/sdk/v1/ucca/assess'
+        : '/api/sdk/v1/ucca/assess-enriched'
      const method = isEditMode ? 'PUT' : 'POST'

+      // For new assessments, send enriched payload with company profile
+      const payload = isEditMode ? intake : {
+        intake,
+        company_profile: sdkState.companyProfile ? {
+          company_name: sdkState.companyProfile.companyName ?? '',
+          legal_form: sdkState.companyProfile.legalForm ?? '',
+          industry: Array.isArray(sdkState.companyProfile.industry)
+            ? sdkState.companyProfile.industry.join(', ')
+            : (sdkState.companyProfile.industry ?? ''),
+          employee_count: sdkState.companyProfile.employeeCount ?? '',
+          annual_revenue: sdkState.companyProfile.annualRevenue ?? '',
+          headquarters_country: sdkState.companyProfile.headquartersCountry ?? 'DE',
+          is_data_controller: sdkState.companyProfile.isDataController ?? true,
+          is_data_processor: sdkState.companyProfile.isDataProcessor ?? false,
+          uses_ai: true,
+          dpo_name: sdkState.companyProfile.dpoName ?? null,
+          subject_to_nis2: false,
+          subject_to_ai_act: false,
+          subject_to_iso27001: false,
+        } : undefined,
+      }
+
      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(intake),
+        body: JSON.stringify(payload),
      })

      if (!response.ok) {
@@ -0,0 +1,57 @@
+'use client'
+
+import React from 'react'
+import type { AnalysisResult } from '../_hooks/useAgentAnalysis'
+
+const DOC_TYPE_LABELS: Record<string, string> = {
+  privacy_policy: 'DSE',
+  cookie_banner: 'Cookie',
+  terms_of_service: 'AGB',
+  imprint: 'Impressum',
+  dpa: 'AVV',
+  other: 'Sonstig',
+}
+
+const RISK_DOT: Record<string, string> = {
+  low: 'bg-green-500',
+  medium: 'bg-yellow-500',
+  high: 'bg-orange-500',
+  critical: 'bg-red-500',
+}
+
+interface Props {
+  history: AnalysisResult[]
+  onSelect: (result: AnalysisResult) => void
+}
+
+export function AnalysisHistory({ history, onSelect }: Props) {
+  if (history.length === 0) return null
+
+  return (
+    <div>
+      <h3 className="text-sm font-medium text-gray-700 mb-3">Letzte Analysen</h3>
+      <div className="space-y-2">
+        {history.map((item, i) => (
+          <button
+            key={i}
+            onClick={() => onSelect(item)}
+            className="w-full text-left p-3 bg-white border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 transition-colors"
+          >
+            <div className="flex items-center gap-3">
+              <span className={`w-2.5 h-2.5 rounded-full ${RISK_DOT[item.risk_level] || 'bg-gray-400'}`} />
+              <span className="text-xs font-medium text-gray-500 w-16">
+                {DOC_TYPE_LABELS[item.classification] || item.classification}
+              </span>
+              <span className="text-sm text-gray-700 truncate flex-1">
+                {new URL(item.url).hostname}
+              </span>
+              <span className="text-xs text-gray-400">
+                {new Date(item.analyzed_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
+              </span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,109 @@
+'use client'
+
+import React from 'react'
+import type { AnalysisResult as AnalysisResultType } from '../_hooks/useAgentAnalysis'
+
+const RISK_COLORS: Record<string, { bg: string; text: string; label: string }> = {
+  low: { bg: 'bg-green-100', text: 'text-green-800', label: 'Niedrig' },
+  medium: { bg: 'bg-yellow-100', text: 'text-yellow-800', label: 'Mittel' },
+  high: { bg: 'bg-orange-100', text: 'text-orange-800', label: 'Hoch' },
+  critical: { bg: 'bg-red-100', text: 'text-red-800', label: 'Kritisch' },
+  unknown: { bg: 'bg-gray-100', text: 'text-gray-800', label: 'Unbekannt' },
+}
+
+const DOC_TYPE_LABELS: Record<string, string> = {
+  privacy_policy: 'Datenschutzerklaerung',
+  cookie_banner: 'Cookie-Banner',
+  terms_of_service: 'AGB',
+  imprint: 'Impressum',
+  dpa: 'Auftragsverarbeitung (AVV)',
+  other: 'Sonstiges',
+}
+
+interface Props {
+  result: AnalysisResultType
+}
+
+export function AnalysisResult({ result }: Props) {
+  const risk = RISK_COLORS[result.risk_level] || RISK_COLORS.unknown
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900">
+            {DOC_TYPE_LABELS[result.classification] || result.classification}
+          </h3>
+          <p className="text-sm text-gray-500 truncate max-w-md">{result.url}</p>
+        </div>
+        <span className={`px-3 py-1 rounded-full text-sm font-medium ${risk.bg} ${risk.text}`}>
+          {risk.label} ({result.risk_score}/100)
+        </span>
+      </div>
+
+      {/* Role Assignment */}
+      <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
+        <div className="flex items-center gap-2">
+          <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+          <span className="text-sm font-medium text-purple-900">
+            Zugewiesen an: <strong>{result.responsible_role}</strong>
+          </span>
+          <span className="text-xs text-purple-600 ml-auto">
+            Eskalationsstufe {result.escalation_level}
+          </span>
+        </div>
+      </div>
+
+      {/* Summary */}
+      {result.summary && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Zusammenfassung</h4>
+          <p className="text-sm text-gray-600 whitespace-pre-wrap">{result.summary}</p>
+        </div>
+      )}
+
+      {/* Findings */}
+      {result.findings.length > 0 && (
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Findings ({result.findings.length})</h4>
+          <ul className="space-y-1">
+            {result.findings.map((f, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm text-gray-600">
+                <span className="text-orange-500 mt-0.5">!</span>
+                {f}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Required Controls */}
+      {result.required_controls.length > 0 && (
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Erforderliche Massnahmen</h4>
+          <ul className="space-y-1">
+            {result.required_controls.map((c, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm text-gray-600">
+                <span className="text-blue-500 mt-0.5">&#10003;</span>
+                {c}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Email Status */}
+      <div className="flex items-center gap-2 text-sm text-gray-500 pt-2 border-t">
+        <span className={result.email_status === 'sent' ? 'text-green-600' : 'text-yellow-600'}>
+          {result.email_status === 'sent' ? '&#9993; Email gesendet' : '&#9993; Email ausstehend'}
+        </span>
+        <span className="ml-auto text-xs">
+          {new Date(result.analyzed_at).toLocaleString('de-DE')}
+        </span>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,324 @@
+'use client'
+
+import React, { useState } from 'react'
+import { ChecklistView } from './ChecklistView'
+
+interface CheckItem {
+  id: string
+  label: string
+  passed: boolean
+  severity: string
+  matched_text: string
+  level?: number
+  parent?: string | null
+  skipped?: boolean
+  hint?: string
+}
+
+interface BannerResult {
+  banner_detected: boolean
+  banner_provider: string
+  banner_checks?: {
+    violations: { code: string; text: string; severity: string }[]
+    has_impressum_link?: boolean
+    has_dse_link?: boolean
+  }
+  structured_checks?: CheckItem[]
+  completeness_pct?: number
+  correctness_pct?: number
+  phases?: {
+    before_consent: { cookies: string[]; scripts: string[]; tracking_services: string[]; violations: any[] }
+    after_reject: { cookies: string[]; scripts: string[]; new_tracking: string[]; violations: any[] }
+    after_accept: { cookies: string[]; scripts: string[]; new_tracking: string[]; undocumented: string[] }
+  }
+  email_status?: string
+}
+
+const CATEGORIES = [
+  { id: 'all', label: 'Alle Kategorien' },
+  { id: 'necessary', label: 'Notwendig' },
+  { id: 'statistics', label: 'Statistik' },
+  { id: 'marketing', label: 'Marketing' },
+  { id: 'functional', label: 'Funktional' },
+  { id: 'preferences', label: 'Praeferenzen' },
+]
+
+export function BannerCheckTab() {
+  const [url, setUrl] = useState(() =>
+    typeof window !== 'undefined' ? localStorage.getItem('banner-check-url') || '' : ''
+  )
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [result, setResult] = useState<BannerResult | null>(() => {
+    if (typeof window === 'undefined') return null
+    try { const s = localStorage.getItem('banner-check-result'); return s ? JSON.parse(s) : null } catch { return null }
+  })
+  const [categories, setCategories] = useState<string[]>(['all'])
+  const [history, setHistory] = useState<{ url: string; date: string; provider: string; violations: number; pct: number; resultKey: string }[]>(() => {
+    if (typeof window === 'undefined') return []
+    try { return JSON.parse(localStorage.getItem('banner-check-history') || '[]') } catch { return [] }
+  })
+
+  // Persist URL
+  React.useEffect(() => { localStorage.setItem('banner-check-url', url) }, [url])
+
+  const toggleCategory = (id: string) => {
+    if (id === 'all') {
+      setCategories(['all'])
+      return
+    }
+    setCategories(prev => {
+      const without = prev.filter(c => c !== 'all' && c !== id)
+      const next = prev.includes(id) ? without : [...without, id]
+      return next.length === 0 ? ['all'] : next
+    })
+  }
+
+  const handleScan = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!url.trim()) return
+
+    setLoading(true)
+    setError(null)
+    setResult(null)
+    setProgress('Cookie-Banner wird analysiert...')
+
+    const selectedCategories = categories.includes('all') ? [] : categories
+
+    try {
+      const res = await fetch('/api/sdk/v1/agent/banner-check', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: url.trim(), categories: selectedCategories }),
+      })
+      if (!res.ok) throw new Error(`Fehler: ${res.status}`)
+      const data = await res.json()
+      setResult(data)
+      localStorage.setItem('banner-check-result', JSON.stringify(data))
+
+      // Add to history with persistent result
+      const violations = data.structured_checks?.filter((c: CheckItem) => !c.passed && !c.skipped).length || 0
+      const resultKey = `banner-check-result-${Date.now()}`
+      try { localStorage.setItem(resultKey, JSON.stringify(data)) } catch { /* quota */ }
+      const entry = {
+        url: url.trim(),
+        date: new Date().toISOString(),
+        provider: data.banner_provider || 'Unbekannt',
+        violations,
+        pct: data.completeness_pct ?? 0,
+        resultKey,
+      }
+      const updated = [entry, ...history].slice(0, 30)
+      setHistory(updated)
+      localStorage.setItem('banner-check-history', JSON.stringify(updated))
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+    } finally {
+      setLoading(false)
+      setProgress('')
+    }
+  }
+
+  const loadFromHistory = (entry: { url: string; resultKey?: string }) => {
+    setUrl(entry.url)
+    if (entry.resultKey) {
+      try {
+        const saved = localStorage.getItem(entry.resultKey)
+        if (saved) { setResult(JSON.parse(saved)); return }
+      } catch {}
+    }
+    // Fallback: load last result
+    try {
+      const last = localStorage.getItem('banner-check-result')
+      if (last) setResult(JSON.parse(last))
+    } catch {}
+  }
+
+  const structuredChecks = result?.structured_checks || []
+  const hasStructured = structuredChecks.length > 0
+  const compPct = result?.completeness_pct ?? 0
+  const corrPct = result?.correctness_pct ?? 0
+
+  const checklistResults = hasStructured ? [{
+    label: `Cookie-Banner: ${result?.banner_provider || 'Unbekannt'}`,
+    url: url,
+    doc_type: 'banner',
+    word_count: 0,
+    completeness_pct: compPct,
+    correctness_pct: corrPct,
+    checks: structuredChecks,
+    findings_count: structuredChecks.filter(c => !c.passed && !c.skipped).length,
+    error: '',
+  }] : []
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <h3 className="text-sm font-semibold text-blue-900">Cookie-Banner Compliance Check</h3>
+        <p className="text-xs text-blue-700 mt-1">
+          Playwright-basierter 3-Phasen-Test: Vor Interaktion, nach Ablehnen, nach Akzeptieren.
+          Prueft Dark Patterns, Pre-Consent-Cookies, Farbkontrast, Klick-Paritaet und 36 weitere Kriterien.
+        </p>
+      </div>
+
+      <form onSubmit={handleScan} className="space-y-3">
+        <div className="flex gap-3">
+          <input
+            type="url" value={url} onChange={e => setUrl(e.target.value)}
+            placeholder="https://www.example.com/"
+            className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
+            disabled={loading} required
+          />
+          <button type="submit" disabled={loading || !url.trim()}
+            className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors flex items-center gap-2 text-sm font-medium whitespace-nowrap">
+            {loading ? (
+              <><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>Pruefe...</>
+            ) : 'Banner pruefen'}
+          </button>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {CATEGORIES.map(cat => (
+            <label key={cat.id}
+              className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer border transition-colors ${
+                categories.includes(cat.id)
+                  ? 'bg-purple-100 border-purple-300 text-purple-800'
+                  : 'bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100'
+              }`}
+            >
+              <input type="checkbox" checked={categories.includes(cat.id)}
+                onChange={() => toggleCategory(cat.id)} className="sr-only" />
+              <span className={`w-3 h-3 rounded-sm border flex items-center justify-center ${
+                categories.includes(cat.id) ? 'bg-purple-600 border-purple-600' : 'border-gray-400'
+              }`}>
+                {categories.includes(cat.id) && (
+                  <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 12 12">
+                    <path d="M10 3L4.5 8.5 2 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                )}
+              </span>
+              {cat.label}
+            </label>
+          ))}
+        </div>
+      </form>
+
+      {progress && (
+        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-sm text-purple-700 flex items-center gap-3">
+          <svg className="animate-spin w-5 h-5 text-purple-500 shrink-0" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          {progress}
+        </div>
+      )}
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{error}</div>
+      )}
+
+      {result && (
+        <div className="space-y-4">
+          {result.phases && (
+            <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+              <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
+                <div className="flex items-center gap-3">
+                  <span className="text-2xl">{result.banner_detected ? '🛡️' : '⚠️'}</span>
+                  <div>
+                    <h3 className="text-sm font-semibold text-gray-900">
+                      {result.banner_detected
+                        ? `Banner erkannt: ${result.banner_provider || 'Unbekannter Anbieter'}`
+                        : 'Kein Cookie-Banner erkannt'}
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-0.5">3-Phasen-Analyse: Cookies und Scripts vor/nach Interaktion</p>
+                  </div>
+                </div>
+              </div>
+              <div className="px-6 py-3 grid grid-cols-3 gap-4">
+                <PhaseBox label="Vor Consent" icon="🔒"
+                  cookies={result.phases.before_consent.cookies?.length ?? 0}
+                  scripts={result.phases.before_consent.scripts?.length ?? 0}
+                  violations={result.phases.before_consent.violations?.length ?? 0} />
+                <PhaseBox label="Nach Ablehnen" icon="🚫"
+                  cookies={result.phases.after_reject.cookies?.length ?? 0}
+                  scripts={result.phases.after_reject.scripts?.length ?? 0}
+                  violations={result.phases.after_reject.violations?.length ?? 0} />
+                <PhaseBox label="Nach Akzeptieren" icon="&#x2705;"
+                  cookies={result.phases.after_accept.cookies?.length ?? 0}
+                  scripts={result.phases.after_accept.scripts?.length ?? 0}
+                  violations={0} />
+              </div>
+            </div>
+          )}
+
+          {hasStructured && (
+            <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
+              <ChecklistView results={checklistResults} />
+            </div>
+          )}
+
+          {result.email_status && (
+            <div className="text-xs text-gray-500 flex items-center gap-2">
+              <span className={`w-2 h-2 rounded-full ${result.email_status === 'sent' ? 'bg-green-400' : 'bg-gray-300'}`} />
+              E-Mail: {result.email_status === 'sent' ? 'Gesendet' : result.email_status}
+            </div>
+          )}
+
+          {!result.banner_detected && !hasStructured && (
+            <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
+              <p className="text-sm text-gray-500">
+                Kein Cookie-Banner auf dieser Seite gefunden. Falls Cookies gesetzt werden, ist ein Banner nach §25 TDDDG Pflicht.
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* History */}
+      {history.length > 0 && (
+        <div className="border border-gray-200 rounded-xl p-4">
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Letzte Banner-Checks</h4>
+          <div className="space-y-1">
+            {history.map((h, i) => (
+              <button key={i} onClick={() => loadFromHistory(h)}
+                className="w-full flex items-center justify-between p-2.5 rounded-lg border border-gray-100 hover:border-purple-200 hover:bg-purple-50/30 transition-all text-left">
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium text-gray-900 truncate">{h.url}</div>
+                  <div className="text-xs text-gray-500">
+                    {new Date(h.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                    {' · '}{h.provider}
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 shrink-0 ml-3">
+                  <span className={`text-xs font-medium ${h.violations > 0 ? 'text-red-600' : 'text-green-600'}`}>
+                    {h.violations} Findings
+                  </span>
+                  <span className={`text-xs font-medium ${h.pct === 100 ? 'text-green-700' : h.pct >= 50 ? 'text-yellow-700' : 'text-red-700'}`}>
+                    {h.pct}%
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function PhaseBox({ label, icon, cookies, scripts, violations }: {
+  label: string; icon: string; cookies: number; scripts: number; violations: number
+}) {
+  return (
+    <div className="text-center">
+      <div className="text-lg">{icon}</div>
+      <div className="text-xs font-medium text-gray-700">{label}</div>
+      <div className="text-xs text-gray-500 mt-1">{cookies} Cookies, {scripts} Scripts</div>
+      {violations > 0 && <div className="text-xs text-red-600 font-medium">{violations} Verstoesse</div>}
+    </div>
+  )
+}
@@ -0,0 +1,236 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface CheckItem {
+  id: string
+  label: string
+  passed: boolean
+  severity: string
+  matched_text: string
+  level?: number
+  parent?: string | null
+  skipped?: boolean
+  hint?: string
+}
+
+interface DocResult {
+  label: string
+  url: string
+  doc_type: string
+  word_count: number
+  completeness_pct: number
+  correctness_pct?: number
+  checks: CheckItem[]
+  findings_count: number
+  error: string
+}
+
+const DOC_TYPE_LABELS: Record<string, string> = {
+  dse: 'DSI', agb: 'AGB', impressum: 'Impressum',
+  cookie: 'Cookie', widerruf: 'Widerruf', other: 'Sonstiges',
+  social_media: 'Social Media', dsfa: 'DSFA', joint_controller: 'Art. 26',
+  eu_institution: 'EU-Inst.', banner: 'Banner',
+}
+
+interface GroupedCheck {
+  check: CheckItem
+  children: CheckItem[]
+}
+
+function groupChecks(checks: CheckItem[]): GroupedCheck[] {
+  const l1 = checks.filter(c => (c.level ?? 1) === 1)
+  return l1.map(c => ({
+    check: c,
+    children: checks.filter(ch => ch.parent === c.id && (ch.level ?? 1) === 2),
+  }))
+}
+
+function CheckIcon({ passed, skipped }: { passed: boolean; skipped?: boolean }) {
+  if (skipped) {
+    return (
+      <svg className="w-4 h-4 text-gray-300 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+      </svg>
+    )
+  }
+  if (passed) {
+    return (
+      <svg className="w-4 h-4 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      </svg>
+    )
+  }
+  return (
+    <svg className="w-4 h-4 text-red-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  )
+}
+
+function L2Summary({ children }: { children: CheckItem[] }) {
+  const active = children.filter(c => !c.skipped)
+  if (active.length === 0) return null
+  const passed = active.filter(c => c.passed).length
+  return (
+    <span className="text-xs text-gray-400 ml-1">
+      ({passed}/{active.length})
+    </span>
+  )
+}
+
+export function ChecklistView({ results }: { results: DocResult[] }) {
+  const [expanded, setExpanded] = useState<number | null>(null)
+
+  if (!results || results.length === 0) return null
+
+  const totalOk = results.filter(r => r.completeness_pct === 100).length
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-gray-800">
+          Dokumenten-Pruefung ({results.length} Dokumente, {totalOk} vollstaendig)
+        </h3>
+      </div>
+
+      <div className="space-y-2">
+        {results.map((r, i) => {
+          const isExp = expanded === i
+          const pct = r.completeness_pct
+          const cpct = r.correctness_pct ?? 0
+          const barColor = pct === 100 ? 'bg-green-500' : pct >= 80 ? 'bg-green-400' : pct >= 50 ? 'bg-yellow-500' : 'bg-red-500'
+          const cBarColor = cpct >= 80 ? 'bg-blue-400' : cpct >= 50 ? 'bg-blue-300' : 'bg-blue-200'
+          const typeLabel = DOC_TYPE_LABELS[r.doc_type] || r.doc_type
+          const grouped = groupChecks(r.checks)
+          const l1Checks = r.checks.filter(c => (c.level ?? 1) === 1)
+          const l2Active = r.checks.filter(c => (c.level ?? 1) === 2 && !c.skipped)
+          const l1Passed = l1Checks.filter(c => c.passed).length
+          const l2Passed = l2Active.filter(c => c.passed).length
+
+          return (
+            <div key={i} className="border border-gray-200 rounded-lg overflow-hidden">
+              <button
+                onClick={() => setExpanded(isExp ? null : i)}
+                className="w-full flex items-center justify-between px-4 py-3 hover:bg-gray-50 text-left"
+              >
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  <svg className={`w-4 h-4 text-gray-400 transition-transform shrink-0 ${isExp ? 'rotate-90' : ''}`}
+                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                  <span className="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-600 font-medium shrink-0">
+                    {typeLabel}
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium text-gray-900 truncate">{r.label}</div>
+                    <div className="text-xs text-gray-500 truncate">
+                      {l1Checks.length > 0
+                        ? `${l1Passed}/${l1Checks.length} Pflichtangaben`
+                          + (l2Active.length > 0 ? `, ${l2Passed}/${l2Active.length} Detailpruefungen` : '')
+                        : r.url}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 shrink-0 ml-3">
+                  {r.error ? (
+                    <span className="text-xs text-red-600 font-medium">Fehler</span>
+                  ) : (
+                    <div className="flex flex-col gap-1">
+                      <div className="flex items-center gap-2">
+                        <div className="w-16 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                          <div className={`h-full rounded-full ${barColor}`} style={{ width: `${pct}%` }} />
+                        </div>
+                        <span className={`text-xs font-medium w-10 text-right ${
+                          pct === 100 ? 'text-green-700' : pct >= 50 ? 'text-yellow-700' : 'text-red-700'
+                        }`}>{pct}%</span>
+                      </div>
+                      {l2Active.length > 0 && (
+                        <div className="flex items-center gap-2">
+                          <div className="w-16 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                            <div className={`h-full rounded-full ${cBarColor}`} style={{ width: `${cpct}%` }} />
+                          </div>
+                          <span className="text-xs font-medium w-10 text-right text-blue-600">{cpct}%</span>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </button>
+
+              {isExp && (
+                <div className="px-4 py-3 border-t border-gray-100 bg-gray-50/50">
+                  {r.error ? (
+                    <p className="text-sm text-red-600">{r.error}</p>
+                  ) : (
+                    <div className="space-y-1">
+                      {grouped.map((g) => (
+                        <div key={g.check.id}>
+                          {/* L1 check */}
+                          <div className="flex items-start gap-2">
+                            <CheckIcon passed={g.check.passed} />
+                            <div className="flex-1">
+                              <div className={`text-sm ${g.check.passed ? 'text-gray-700' : 'text-red-700 font-medium'}`}>
+                                {g.check.label}
+                                {g.children.length > 0 && <L2Summary>{g.children}</L2Summary>}
+                              </div>
+                              {g.check.passed && g.check.matched_text && g.children.length === 0 && (
+                                <div className="text-xs text-gray-400 mt-0.5 font-mono truncate">
+                                  &quot;...{g.check.matched_text}...&quot;
+                                </div>
+                              )}
+                              {!g.check.passed && g.check.hint && (
+                                <div className="text-xs text-red-600/80 mt-0.5">
+                                  {g.check.hint}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          {/* L2 children — always visible */}
+                          {g.children.length > 0 && (
+                            <div className="ml-6 mt-0.5 mb-1 space-y-0.5 border-l-2 border-gray-200 pl-3">
+                              {g.children.map((ch) => (
+                                <div key={ch.id} className="flex items-start gap-2">
+                                  <CheckIcon passed={ch.passed} skipped={ch.skipped} />
+                                  <div className="flex-1">
+                                    <div className={`text-xs ${
+                                      ch.skipped ? 'text-gray-400 italic'
+                                        : ch.passed ? 'text-gray-600' : 'text-red-600 font-medium'
+                                    }`}>
+                                      {ch.label}
+                                      {ch.skipped && ' (uebersprungen)'}
+                                    </div>
+                                    {ch.passed && ch.matched_text && (
+                                      <div className="text-xs text-gray-400 mt-0.5 font-mono truncate">
+                                        &quot;...{ch.matched_text}...&quot;
+                                      </div>
+                                    )}
+                                    {!ch.passed && !ch.skipped && ch.hint && (
+                                      <div className="text-xs text-red-500/80 mt-0.5">
+                                        {ch.hint}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                      {r.word_count > 0 && (
+                        <div className="text-xs text-gray-400 mt-2 pt-2 border-t border-gray-200">
+                          {r.word_count} Woerter analysiert
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,145 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface FAQItem {
+  q: string
+  a: string
+}
+
+const FAQ_ITEMS: FAQItem[] = [
+  {
+    q: "Was passiert wenn ein Unternehmen wegen unzureichender Datenschutzerklaerung oder Cookie-Richtlinie verklagt wird?",
+    a: `Es gibt vier Durchsetzungswege:
+
+**1. Bussgelder durch Aufsichtsbehoerden (Art. 83 DSGVO)**
+Aufsichtsbehoerden pruefen von Amts wegen oder auf Beschwerde — kein Klaeger noetig. Bussgelder bis 20 Mio. EUR oder 4% des Jahresumsatzes. Beispiele: CNIL gegen Google (150 Mio. EUR), Facebook (60 Mio. EUR), H&M (35 Mio. EUR). Auch KMU sind betroffen — der LfDI Baden-Wuerttemberg hat Bussgelder ab 10.000 EUR verhaengt.
+
+**2. Abmahnungen durch Verbraucherschutzverbaende**
+Verbaende wie vzbv oder DUH koennen ohne individuellen Schaden klagen (§2 UKlaG). Das ist der groesste praktische Druck: Unterlassungsklage + Anwaltskosten (5.000-20.000 EUR pro Fall). Seit EuGH C-319/20 (Meta/vzbv) duerfen Verbaende DSGVO-Verstoesse auch ohne Betroffenenauftrag klagen.
+
+**3. Individueller Schadensersatz (Art. 82 DSGVO)**
+Seit EuGH C-300/21 (Oesterreichische Post) genuegt bereits der "Kontrollverlust" ueber Daten als immaterieller Schaden — kein messbarer finanzieller Schaden noetig. Typisch: 100-5.000 EUR pro Betroffenem. Legaltech-Firmen wie NOYB buendeln Massenverfahren.
+
+**4. Wettbewerber-Abmahnungen (UWG)**
+Seit 2021 eingeschraenkt, aber Impressums-Maengel oder fehlende Cookie-Einwilligung bleiben abmahnfaehig.
+
+Die Aufsichtsbehoerden erhalten ueber 10.000 Beschwerden pro Jahr. Eine Beschwerde einzureichen ist kostenlos und mit einem Klick moeglich.`,
+  },
+  {
+    q: "Wie funktioniert die Dokumentenpruefung?",
+    a: `Die Pruefung laeuft in drei Schritten:
+
+**1. Text-Extraktion** — Playwright laedt die Seite, expandiert Accordions/Tabs und extrahiert den vollstaendigen Text.
+
+**2. Regex-Checks (138 Pruefpunkte)** — Zwei Ebenen: L1 prueft ob Pflichtangaben erwaehnt sind (z.B. "Verantwortlicher"), L2 prueft ob sie korrekt und vollstaendig sind (z.B. "Hat der Verantwortliche eine ladungsfaehige Anschrift mit PLZ?").
+
+**3. LLM-Verifikation** — Jeder fehlgeschlagene Check wird von einem KI-Modell (Qwen) gegen den Originaltext gegengeprueft, um Fehlalarme zu eliminieren.
+
+Das Ergebnis: Zwei Scores pro Dokument — Vollstaendigkeit (sind alle Pflichtangaben da?) und Korrektheit (sind sie richtig formuliert?). Jeder fehlende Punkt hat eine konkrete Handlungsanweisung mit Rechtsbezug.`,
+  },
+  {
+    q: "Welche Dokumenttypen werden geprueft?",
+    a: `Sieben Dokumenttypen mit jeweils eigener Checkliste:
+
+- **Datenschutzinformation (DSI)** — Art. 13/14 DSGVO (31 Checks)
+- **Cookie-Richtlinie** — §25 TDDDG (15 Checks)
+- **Impressum** — §5 TMG / §18 MStV (16 Checks)
+- **AGB** — §305ff BGB (21 Checks)
+- **Widerrufsbelehrung** — §355 BGB (15 Checks)
+- **Social Media DSE** — Art. 26 DSGVO Joint Controller (20 Checks)
+- **DSFA** — Art. 35 DSGVO (18 Checks)
+
+Sub-Sektionen (z.B. Cookie-Abschnitt innerhalb der DSI) werden automatisch erkannt und separat geprueft.`,
+  },
+  {
+    q: "Wie zuverlaessig sind die Ergebnisse?",
+    a: `Die Pruefung wurde gegen mehrere Ground-Truth-Websites validiert (IHK Konstanz, ETO Gruppe, BMW, Stadt Koeln, Sparkasse, Spiegel u.a.). Ergebnis: **0 False Positives** bei validierten Testfaellen — jeder rote Punkt ist ein echtes Finding.
+
+Durch die LLM-Verifikation werden Regex-Fehlalarme (z.B. durch ungewoehnliche Formatierung oder Soft Hyphens im HTML) automatisch korrigiert. Trotzdem gilt: Das Tool ersetzt keine Rechtsberatung, sondern identifiziert Handlungsbedarf.`,
+  },
+  {
+    q: "Was kostet ein Verstoss gegen die DSGVO in der Praxis?",
+    a: `Bussgelder nach Art. 83 DSGVO staffeln sich in zwei Stufen:
+
+- **Bis 10 Mio. EUR / 2% Umsatz**: Verstoesse gegen technische/organisatorische Pflichten (Art. 25, 28, 32)
+- **Bis 20 Mio. EUR / 4% Umsatz**: Verstoesse gegen Grundsaetze, Betroffenenrechte, Drittlandtransfer
+
+Typische Praxis-Bussgelder in Deutschland: 5.000-50.000 EUR fuer KMU, 100.000-1 Mio. EUR fuer groessere Unternehmen. Dazu kommen Anwaltskosten bei Abmahnungen (5.000-20.000 EUR pro Fall) und Reputationsschaden.`,
+  },
+  {
+    q: "Was ist der aktuelle Stand bei harmonisierten Normen unter der neuen Maschinenverordnung (EU) 2023/1230?",
+    a: `Die Maschinenverordnung (EU) 2023/1230 hat in Anhang I die wesentlichen Gesundheits- und Sicherheitsanforderungen und verweist darauf, dass harmonisierte Normen die technischen Details liefern sollen (Konformitaetsvermutung).
+
+**Aktueller Stand:** Es gibt noch KEINE harmonisierten Normen die unter der neuen Maschinenverordnung im EU-Amtsblatt veroeffentlicht sind. Die bestehenden ~800 harmonisierten Normen gelten noch unter der alten Maschinenrichtlinie 2006/42/EC.
+
+**Zeitplan:**
+- **Juni 2023** — Maschinenverordnung veroeffentlicht
+- **Januar 2025** — EU-Kommission hat Normungsauftrag an CEN/CENELEC erteilt
+- **Januar 2026** — CEN/CENELEC soll bestehende Normen bestaetigen oder Nachfolgenormen verabschieden
+- **Januar 2027** — Maschinenverordnung tritt vollstaendig in Kraft, ersetzt alte Richtlinie 2006/42/EC
+
+**Wichtig fuer Hersteller:** Bis die neuen harmonisierten Normen veroeffentlicht sind, koennen Hersteller die bestehenden Normen der alten Maschinenrichtlinie weiterhin anwenden. Nach dem 20. Januar 2027 muessen Maschinen aber die Anforderungen der neuen Verordnung erfuellen — auch wenn die harmonisierten Normen bis dahin nicht vollstaendig vorliegen.
+
+**IACE Normen-Bibliothek:** Die aktuelle Liste unter /sdk/iace/library enthaelt 751 harmonisierte Normen (1 A-Norm, 19 B1, 126 B2, 605 C-Normen). Diese muessen regelmaessig gegen das EU-Amtsblatt abgeglichen werden, da einige Normen zurueckgezogen oder ersetzt wurden.`,
+  },
+  {
+    q: "Warum muss ich harmonisierte Normen kaufen obwohl sie EU-Recht sind?",
+    a: `Harmonisierte Normen werden von privaten Organisationen (CEN/CENELEC) erstellt und ueber nationale Normungsinstitute wie DIN/Beuth (Deutschland), ASI (Oesterreich) oder SNV (Schweiz) verkauft — typisch 50-300 EUR pro Norm.
+
+**Das Problem:** Die EU-Kommission beauftragt die Normung, Industrieexperten schreiben die Normen ehrenamtlich in Technischen Komitees, aber ein privater Verlag verkauft das Ergebnis. Unternehmen muessen Normen kaufen die ihre eigenen Mitarbeiter geschrieben haben.
+
+**EuGH-Urteil C-588/21 P (5. Maerz 2024):**
+Der Europaeische Gerichtshof hat entschieden, dass harmonisierte Normen **Teil des EU-Rechts** sind, weil sie eine Konformitaetsvermutung erzeugen. Das Rechtsstaatsprinzip verlangt, dass Buerger die Regeln kennen koennen die fuer sie gelten. Daher muessen harmonisierte Normen grundsaetzlich **frei zugaenglich** sein.
+
+**Aktueller Stand (2026):** Das Urteil ist noch nicht vollstaendig umgesetzt. CEN/CENELEC und die nationalen Normungsinstitute wehren sich, weil ihr Geschaeftsmodell auf dem Verkauf basiert. Die EU-Kommission arbeitet an einer Loesung.
+
+**Was das fuer Unternehmen bedeutet:**
+- Aktuell muessen Normen weiterhin gekauft werden
+- Normnummern und Titel sind frei nutzbar (bibliographische Daten)
+- BSI-Grundschutz und NIST-Standards sind kostenlose Alternativen die inhaltlich aehnliche Anforderungen abdecken
+- Die IACE-Bibliothek in BreakPilot listet alle harmonisierten Normen mit Status (aktiv/zurueckgezogen) ohne kostenpflichtigen Normtext`,
+  },
+]
+
+export function ComplianceFAQ() {
+  const [open, setOpen] = useState<number | null>(null)
+
+  return (
+    <div className="border border-gray-200 rounded-xl overflow-hidden">
+      <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
+        <h3 className="text-sm font-semibold text-gray-800">Haeufige Fragen</h3>
+      </div>
+      <div className="divide-y divide-gray-100">
+        {FAQ_ITEMS.map((item, i) => (
+          <div key={i}>
+            <button
+              onClick={() => setOpen(open === i ? null : i)}
+              className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50 transition-colors"
+            >
+              <span className="text-sm font-medium text-gray-900 pr-4">{item.q}</span>
+              <svg
+                className={`w-4 h-4 text-gray-400 shrink-0 transition-transform ${open === i ? 'rotate-180' : ''}`}
+                fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+            {open === i && (
+              <div className="px-4 pb-4 text-sm text-gray-600 prose prose-sm max-w-none">
+                {item.a.split('\n\n').map((para, pi) => (
+                  <p key={pi} className="mb-2 last:mb-0" dangerouslySetInnerHTML={{
+                    __html: para
+                      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                      .replace(/\n- /g, '<br/>• ')
+                      .replace(/\n/g, '<br/>')
+                  }} />
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,320 @@
+'use client'
+
+import React, { useState } from 'react'
+import { ChecklistView } from './ChecklistView'
+
+interface DocEntry {
+  id: string
+  type: string
+  label: string
+  url: string
+}
+
+const DOC_TYPES = [
+  { id: 'dse', label: 'DSI (Datenschutzinformation)' },
+  { id: 'social_media', label: 'DSE Social Media (Art. 26)' },
+  { id: 'dsfa', label: 'DSFA (Art. 35)' },
+  { id: 'agb', label: 'AGB / Nutzungsbedingungen' },
+  { id: 'impressum', label: 'Impressum' },
+  { id: 'cookie', label: 'Cookie-Richtlinie' },
+  { id: 'widerruf', label: 'Widerrufsbelehrung' },
+  { id: 'other', label: 'Sonstiges' },
+]
+
+function newEntry(): DocEntry {
+  return { id: crypto.randomUUID().slice(0, 8), type: 'dse', label: '', url: '' }
+}
+
+export function DocCheckTab() {
+  const [entries, setEntries] = useState<DocEntry[]>(() => {
+    if (typeof window === 'undefined') return [newEntry()]
+    try { const s = localStorage.getItem('doc-check-entries'); return s ? JSON.parse(s) : [newEntry()] } catch { return [newEntry()] }
+  })
+  const [checkCookieBanner, setCheckCookieBanner] = useState(false)
+  const [useAgent, setUseAgent] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState('')
+  const [results, setResults] = useState<any>(() => {
+    if (typeof window === 'undefined') return null
+    try { const s = localStorage.getItem('doc-check-results'); return s ? JSON.parse(s) : null } catch { return null }
+  })
+  const [error, setError] = useState<string | null>(null)
+  const [history, setHistory] = useState<{ date: string; urls: number; findings: number; resultKey: string }[]>(() => {
+    if (typeof window === 'undefined') return []
+    try { return JSON.parse(localStorage.getItem('doc-check-history') || '[]') } catch { return [] }
+  })
+
+  // Persist entries
+  React.useEffect(() => { localStorage.setItem('doc-check-entries', JSON.stringify(entries)) }, [entries])
+
+  const updateEntry = (id: string, field: keyof DocEntry, value: string) => {
+    setEntries(prev => prev.map(e => e.id === id ? { ...e, [field]: value } : e))
+  }
+
+  const removeEntry = (id: string) => {
+    setEntries(prev => prev.filter(e => e.id !== id))
+  }
+
+  const addEntry = () => {
+    setEntries(prev => [...prev, newEntry()])
+  }
+
+  // Auto-detect label from URL
+  const autoLabel = (entry: DocEntry) => {
+    if (entry.label) return
+    try {
+      const path = new URL(entry.url).pathname
+      const last = path.split('/').filter(Boolean).pop() || ''
+      const label = last.replace(/-\d+$/, '').replace(/-/g, ' ')
+        .replace(/\b\w/g, c => c.toUpperCase())
+      if (label.length > 3) {
+        updateEntry(entry.id, 'label', label)
+      }
+    } catch { /* invalid URL */ }
+  }
+
+  const handleSubmit = async () => {
+    const validEntries = entries.filter(e => e.url.trim())
+    if (validEntries.length === 0) return
+
+    setLoading(true)
+    setError(null)
+    setResults(null)
+    setProgress('Pruefung wird gestartet...')
+
+    try {
+      const startRes = await fetch('/api/sdk/v1/agent/doc-check', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          entries: validEntries.map(e => ({
+            doc_type: e.type,
+            label: e.label || e.url.split('/').pop() || 'Dokument',
+            url: e.url.trim(),
+          })),
+          check_cookie_banner: checkCookieBanner,
+          use_agent: useAgent,
+        }),
+      })
+      if (!startRes.ok) throw new Error(`Pruefung konnte nicht gestartet werden: ${startRes.status}`)
+      const { check_id } = await startRes.json()
+      if (!check_id) throw new Error('Keine Check-ID erhalten')
+
+      // Poll for results
+      let attempts = 0
+      while (attempts < 120) {
+        await new Promise(r => setTimeout(r, 3000))
+        const pollRes = await fetch(`/api/sdk/v1/agent/doc-check?check_id=${check_id}`)
+        if (!pollRes.ok) { attempts++; continue }
+        const pollData = await pollRes.json()
+        if (pollData.progress) setProgress(pollData.progress)
+        if (pollData.status === 'completed' && pollData.result) {
+          setResults(pollData.result)
+          setProgress('')
+          localStorage.setItem('doc-check-results', JSON.stringify(pollData.result))
+          const resultKey = `doc-check-result-${Date.now()}`
+          try { localStorage.setItem(resultKey, JSON.stringify(pollData.result)) } catch { /* quota */ }
+          const entry = { date: new Date().toISOString(), urls: validEntries.length, findings: pollData.result.total_findings || 0, resultKey }
+          const updated = [entry, ...history].slice(0, 30)
+          setHistory(updated)
+          localStorage.setItem('doc-check-history', JSON.stringify(updated))
+          break
+        }
+        if (pollData.status === 'failed') {
+          throw new Error(pollData.error || 'Pruefung fehlgeschlagen')
+        }
+        attempts++
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+      setProgress('')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* URL Entries */}
+      <div className="space-y-2">
+        {entries.map((entry, i) => (
+          <div key={entry.id} className="flex items-center gap-2">
+            <select
+              value={entry.type}
+              onChange={e => updateEntry(entry.id, 'type', e.target.value)}
+              className="w-48 px-3 py-2.5 border border-gray-300 rounded-lg text-sm bg-white shrink-0"
+            >
+              {DOC_TYPES.map(t => (
+                <option key={t.id} value={t.id}>{t.label}</option>
+              ))}
+            </select>
+            <input
+              type="text"
+              value={entry.label}
+              onChange={e => updateEntry(entry.id, 'label', e.target.value)}
+              placeholder={entry.type === 'other' ? 'Dokumentname' : 'Version / Stand (optional)'}
+              className="w-40 px-3 py-2.5 border border-gray-300 rounded-lg text-sm shrink-0"
+            />
+            <input
+              type="url"
+              value={entry.url}
+              onChange={e => updateEntry(entry.id, 'url', e.target.value)}
+              onBlur={() => autoLabel(entry)}
+              placeholder="https://example.com/datenschutz"
+              className="flex-1 px-3 py-2.5 border border-gray-300 rounded-lg text-sm"
+            />
+            {entries.length > 1 && (
+              <button onClick={() => removeEntry(entry.id)}
+                className="p-2 text-gray-400 hover:text-red-500 shrink-0">
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Add URL + Options */}
+      <div className="flex items-center justify-between">
+        <button onClick={addEntry}
+          className="flex items-center gap-1.5 text-sm text-purple-600 hover:text-purple-700 font-medium">
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          URL hinzufuegen
+        </button>
+
+        <label className="flex items-center gap-2 text-sm text-gray-600">
+          <input
+            type="checkbox"
+            checked={checkCookieBanner}
+            onChange={e => setCheckCookieBanner(e.target.checked)}
+            className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+          />
+          Cookie-Banner pruefen
+        </label>
+
+        <button
+          type="button"
+          onClick={() => setUseAgent(!useAgent)}
+          className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ${
+            useAgent
+              ? 'bg-emerald-100 border-emerald-300 text-emerald-800'
+              : 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-gray-100'
+          }`}
+        >
+          <span className={`w-2 h-2 rounded-full ${useAgent ? 'bg-emerald-500' : 'bg-gray-300'}`} />
+          {useAgent ? 'KI-Agent aktiv (1.874 MCs)' : 'KI-Agent aus'}
+        </button>
+      </div>
+
+      {/* Submit */}
+      <button
+        onClick={handleSubmit}
+        disabled={loading || entries.every(e => !e.url.trim())}
+        className="w-full px-4 py-3 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50 transition-colors text-sm flex items-center justify-center gap-2"
+      >
+        {loading ? (
+          <>
+            <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            Pruefe...
+          </>
+        ) : (
+          `${entries.filter(e => e.url.trim()).length} Dokument${entries.filter(e => e.url.trim()).length !== 1 ? 'e' : ''} pruefen`
+        )}
+      </button>
+
+      {/* Progress */}
+      {progress && (
+        <div className="bg-purple-50 border border-purple-200 rounded-lg p-3 text-sm text-purple-700 flex items-center gap-3">
+          <svg className="animate-spin w-4 h-4 text-purple-500 shrink-0" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          {progress}
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">{error}</div>
+      )}
+
+      {/* Results */}
+      {results && results.results && (
+        <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
+          <ChecklistView results={results.results} />
+
+          {/* Cookie Banner Result */}
+          {results.cookie_banner_result && (
+            <div className="mt-4 pt-4 border-t border-gray-200">
+              <h4 className="text-sm font-semibold text-gray-800 mb-2">Cookie-Banner</h4>
+              <div className="text-sm text-gray-600">
+                {results.cookie_banner_result.banner_detected
+                  ? `Banner erkannt: ${results.cookie_banner_result.banner_provider || 'unbekannt'}`
+                  : 'Kein Banner erkannt'}
+              </div>
+              {results.cookie_banner_result.banner_checks?.violations?.length > 0 && (
+                <div className="mt-2 space-y-1">
+                  {results.cookie_banner_result.banner_checks.violations.map((v: any, i: number) => (
+                    <div key={i} className="text-xs text-red-600 flex items-start gap-1.5">
+                      <span className="shrink-0 mt-0.5">!!</span>
+                      <span>{v.text}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Email Status */}
+          {results.email_status && (
+            <div className="mt-3 text-xs text-gray-500 flex items-center gap-2">
+              <span className={`w-2 h-2 rounded-full ${results.email_status === 'sent' ? 'bg-green-400' : 'bg-gray-300'}`} />
+              E-Mail: {results.email_status === 'sent' ? 'Gesendet' : results.email_status}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* History */}
+      {history.length > 0 && (
+        <div className="border border-gray-200 rounded-xl p-4">
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Letzte Pruefungen</h4>
+          <div className="space-y-1">
+            {history.map((h, i) => (
+              <button key={i} onClick={() => {
+                if (h.resultKey) {
+                  try {
+                    const saved = localStorage.getItem(h.resultKey)
+                    if (saved) { setResults(JSON.parse(saved)); return }
+                  } catch {}
+                }
+                // Fallback: load last result
+                try {
+                  const last = localStorage.getItem('doc-check-results')
+                  if (last) setResults(JSON.parse(last))
+                } catch {}
+              }}
+                className="w-full flex items-center justify-between text-sm py-2 px-2 rounded-lg border border-gray-50 hover:border-purple-200 hover:bg-purple-50/30 transition-all text-left">
+                <span className="text-gray-600">
+                  {new Date(h.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                </span>
+                <div className="flex items-center gap-3">
+                  <span className="text-xs text-gray-500">{h.urls} Dok.</span>
+                  <span className={`text-xs font-medium ${h.findings > 0 ? 'text-amber-600' : 'text-green-600'}`}>
+                    {h.findings} Findings
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,91 @@
+'use client'
+
+import React from 'react'
+import type { FollowUpQuestion } from '../_hooks/useAgentAnalysis'
+
+const SEVERITY_STYLE: Record<string, { border: string; bg: string; icon: string }> = {
+  high: { border: 'border-red-300', bg: 'bg-red-50', icon: '!!' },
+  medium: { border: 'border-yellow-300', bg: 'bg-yellow-50', icon: '!' },
+  low: { border: 'border-blue-300', bg: 'bg-blue-50', icon: 'i' },
+}
+
+interface Props {
+  questions: FollowUpQuestion[]
+  answers: Record<string, boolean>
+  onAnswer: (questionId: string, answer: boolean) => void
+}
+
+export function FollowUpQuestions({ questions, answers, onAnswer }: Props) {
+  const unanswered = questions.filter(q => answers[q.id] === undefined)
+  const answered = questions.filter(q => answers[q.id] !== undefined)
+
+  if (questions.length === 0) return null
+
+  return (
+    <div className="space-y-3">
+      <h4 className="text-sm font-medium text-gray-700 flex items-center gap-2">
+        <svg className="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        Rueckfragen zur manuellen Pruefung ({unanswered.length} offen)
+      </h4>
+
+      {/* Unanswered questions */}
+      {unanswered.map(q => {
+        const style = SEVERITY_STYLE[q.severity] || SEVERITY_STYLE.medium
+        return (
+          <div key={q.id} className={`border ${style.border} ${style.bg} rounded-lg p-4`}>
+            <div className="flex items-start gap-3">
+              <span className={`mt-0.5 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
+                q.severity === 'high' ? 'bg-red-200 text-red-800' :
+                q.severity === 'medium' ? 'bg-yellow-200 text-yellow-800' :
+                'bg-blue-200 text-blue-800'
+              }`}>
+                {SEVERITY_STYLE[q.severity]?.icon || '?'}
+              </span>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-gray-900">{q.question}</p>
+                <p className="text-xs text-gray-500 mt-1">Rechtsgrundlage: {q.legal_basis}</p>
+                <div className="flex gap-2 mt-3">
+                  <button
+                    onClick={() => onAnswer(q.id, true)}
+                    className="px-4 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
+                  >
+                    Ja
+                  </button>
+                  <button
+                    onClick={() => onAnswer(q.id, false)}
+                    className="px-4 py-1.5 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
+                  >
+                    Nein
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+
+      {/* Answered questions */}
+      {answered.map(q => {
+        const isYes = answers[q.id]
+        return (
+          <div key={q.id} className={`border rounded-lg p-3 ${isYes ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50'}`}>
+            <div className="flex items-center gap-2">
+              <span className={`text-sm ${isYes ? 'text-green-700' : 'text-red-700'}`}>
+                {isYes ? '✓' : '✗'}
+              </span>
+              <span className="text-sm text-gray-700">{q.question}</span>
+              <span className={`ml-auto text-xs font-medium ${isYes ? 'text-green-600' : 'text-red-600'}`}>
+                {isYes ? 'Ja — OK' : 'Nein — Finding erstellt'}
+              </span>
+            </div>
+            {!isYes && (
+              <p className="text-xs text-red-600 mt-1 ml-6">{q.finding_if_no}</p>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
@@ -0,0 +1,168 @@
+'use client'
+
+import React, { useState } from 'react'
+import { ChecklistView } from './ChecklistView'
+
+interface CheckItem {
+  id: string; label: string; passed: boolean; severity: string
+  matched_text: string; level?: number; parent?: string | null
+  skipped?: boolean; hint?: string
+}
+
+export function ImpressumCheckTab() {
+  const [url, setUrl] = useState(() =>
+    typeof window !== 'undefined' ? localStorage.getItem('impressum-check-url') || '' : ''
+  )
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [results, setResults] = useState<any>(() => {
+    if (typeof window === 'undefined') return null
+    try { const s = localStorage.getItem('impressum-check-results'); return s ? JSON.parse(s) : null } catch { return null }
+  })
+  const [history, setHistory] = useState<{ url: string; date: string; findings: number; pct: number; resultKey: string }[]>(() => {
+    if (typeof window === 'undefined') return []
+    try { return JSON.parse(localStorage.getItem('impressum-check-history') || '[]') } catch { return [] }
+  })
+
+  React.useEffect(() => { localStorage.setItem('impressum-check-url', url) }, [url])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!url.trim()) return
+
+    setLoading(true)
+    setError(null)
+    setResults(null)
+    setProgress('Impressum wird geprueft...')
+
+    try {
+      const startRes = await fetch('/api/sdk/v1/agent/doc-check', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          entries: [{ doc_type: 'impressum', label: 'Impressum', url: url.trim() }],
+          recipient: 'dsb@breakpilot.local',
+        }),
+      })
+      if (!startRes.ok) throw new Error(`Fehler: ${startRes.status}`)
+      const { check_id } = await startRes.json()
+      if (!check_id) throw new Error('Keine Check-ID erhalten')
+
+      let attempts = 0
+      while (attempts < 120) {
+        await new Promise(r => setTimeout(r, 3000))
+        const pollRes = await fetch(`/api/sdk/v1/agent/doc-check?check_id=${check_id}`)
+        if (!pollRes.ok) { attempts++; continue }
+        const pollData = await pollRes.json()
+        if (pollData.progress) setProgress(pollData.progress)
+        if (pollData.status === 'completed' && pollData.result) {
+          setResults(pollData.result)
+          setProgress('')
+          localStorage.setItem('impressum-check-results', JSON.stringify(pollData.result))
+          const resultKey = `impressum-result-${Date.now()}`
+          try { localStorage.setItem(resultKey, JSON.stringify(pollData.result)) } catch {}
+          const total = pollData.result.total_findings || 0
+          const pct = pollData.result.results?.[0]?.completeness_pct || 0
+          const entry = { url: url.trim(), date: new Date().toISOString(), findings: total, pct, resultKey }
+          const updated = [entry, ...history].slice(0, 30)
+          setHistory(updated)
+          localStorage.setItem('impressum-check-history', JSON.stringify(updated))
+          break
+        }
+        if (pollData.status === 'failed') throw new Error(pollData.error || 'Pruefung fehlgeschlagen')
+        attempts++
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+      setProgress('')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+        <h3 className="text-sm font-semibold text-amber-900">Impressum-Check (§5 TMG / §18 MStV)</h3>
+        <p className="text-xs text-amber-700 mt-1">
+          Prueft 16 Pflichtangaben: Anbietername, Anschrift, Kontaktdaten, Handelsregister,
+          USt-IdNr., Vertretungsberechtigte, V.i.S.d.P., Streitbeilegung.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex gap-3">
+        <input type="url" value={url} onChange={e => setUrl(e.target.value)}
+          placeholder="https://www.example.com/impressum"
+          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
+          disabled={loading} required />
+        <button type="submit" disabled={loading || !url.trim()}
+          className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors flex items-center gap-2 text-sm font-medium whitespace-nowrap">
+          {loading ? (
+            <><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>Pruefe...</>
+          ) : 'Impressum pruefen'}
+        </button>
+      </form>
+
+      {progress && (
+        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-sm text-purple-700 flex items-center gap-3">
+          <svg className="animate-spin w-5 h-5 text-purple-500 shrink-0" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+          </svg>
+          {progress}
+        </div>
+      )}
+
+      {error && <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{error}</div>}
+
+      {results?.results && (
+        <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
+          <ChecklistView results={results.results} />
+          {results.email_status && (
+            <div className="mt-3 text-xs text-gray-500 flex items-center gap-2">
+              <span className={`w-2 h-2 rounded-full ${results.email_status === 'sent' ? 'bg-green-400' : 'bg-gray-300'}`} />
+              E-Mail: {results.email_status === 'sent' ? 'Gesendet' : results.email_status}
+            </div>
+          )}
+        </div>
+      )}
+
+      {history.length > 0 && (
+        <div className="border border-gray-200 rounded-xl p-4">
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Letzte Impressum-Checks</h4>
+          <div className="space-y-1">
+            {history.map((h, i) => (
+              <button key={i} onClick={() => {
+                setUrl(h.url)
+                if (h.resultKey) {
+                  try { const s = localStorage.getItem(h.resultKey); if (s) { setResults(JSON.parse(s)); return } } catch {}
+                }
+                try { const l = localStorage.getItem('impressum-check-results'); if (l) setResults(JSON.parse(l)) } catch {}
+              }}
+                className="w-full flex items-center justify-between p-2.5 rounded-lg border border-gray-100 hover:border-purple-200 hover:bg-purple-50/30 transition-all text-left">
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium text-gray-900 truncate">{h.url}</div>
+                  <div className="text-xs text-gray-500">
+                    {new Date(h.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 shrink-0 ml-3">
+                  <span className={`text-xs font-medium ${h.findings > 0 ? 'text-red-600' : 'text-green-600'}`}>
+                    {h.findings} Findings
+                  </span>
+                  <span className={`text-xs font-medium ${h.pct === 100 ? 'text-green-700' : h.pct >= 50 ? 'text-yellow-700' : 'text-red-700'}`}>
+                    {h.pct}%
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,285 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface ServiceInfo {
+  name: string
+  category: string
+  provider: string
+  country: string
+  eu_adequate: boolean
+  requires_consent: boolean
+  legal_ref: string
+  in_dse: boolean
+  status: string
+}
+
+interface ScanFinding {
+  code: string
+  severity: string
+  text: string
+  correction: string
+  doc_title: string
+}
+
+interface DiscoveredDocument {
+  title: string
+  url: string
+  doc_type: string
+  language: string
+  word_count: number
+  completeness_pct: number
+  findings_count: number
+}
+
+interface ScanData {
+  pages_scanned: number
+  pages_list: string[]
+  services: ServiceInfo[]
+  findings: ScanFinding[]
+  discovered_documents?: DiscoveredDocument[]
+  ai_detected: boolean
+  chatbot_detected: boolean
+  chatbot_provider: string
+  missing_pages: Record<string, number>
+  email_status: string
+}
+
+const STATUS_ICON: Record<string, { icon: string; color: string }> = {
+  ok: { icon: '\u2713', color: 'text-green-600' },
+  undocumented: { icon: '\u2717', color: 'text-red-600' },
+  outdated: { icon: '~', color: 'text-yellow-600' },
+}
+
+const SEV_STYLE: Record<string, { bg: string; text: string; dot: string }> = {
+  HIGH: { bg: 'bg-red-50 border-red-200', text: 'text-red-800', dot: 'bg-red-500' },
+  MEDIUM: { bg: 'bg-yellow-50 border-yellow-200', text: 'text-yellow-800', dot: 'bg-yellow-500' },
+  LOW: { bg: 'bg-blue-50 border-blue-200', text: 'text-blue-800', dot: 'bg-blue-500' },
+  CRITICAL: { bg: 'bg-red-100 border-red-300', text: 'text-red-900', dot: 'bg-red-700' },
+}
+
+export function ScanResult({ data }: { data: ScanData }) {
+  const [expandedCorrection, setExpandedCorrection] = useState<string | null>(null)
+  const [expandedDoc, setExpandedDoc] = useState<string | null>(null)
+
+  const undocCount = data.services.filter(s => s.status === 'undocumented').length
+  const okCount = data.services.filter(s => s.status === 'ok').length
+  const highCount = data.findings.filter(f => f.severity === 'HIGH' || f.severity === 'CRITICAL').length
+  const docs = data.discovered_documents || []
+
+  // Group findings by doc_title
+  const docFindings: Record<string, ScanFinding[]> = {}
+  const generalFindings: ScanFinding[] = []
+  for (const f of data.findings) {
+    if (f.doc_title) {
+      if (!docFindings[f.doc_title]) docFindings[f.doc_title] = []
+      docFindings[f.doc_title].push(f)
+    } else {
+      generalFindings.push(f)
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Summary Bar */}
+      <div className="grid grid-cols-4 gap-3">
+        <div className="bg-gray-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-gray-900">{data.pages_scanned}</p>
+          <p className="text-xs text-gray-500">Seiten</p>
+        </div>
+        <div className="bg-green-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-green-700">{okCount}</p>
+          <p className="text-xs text-gray-500">Dokumentiert</p>
+        </div>
+        <div className="bg-red-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-red-700">{undocCount}</p>
+          <p className="text-xs text-gray-500">Nicht in DSE</p>
+        </div>
+        <div className="bg-purple-50 rounded-lg p-3 text-center">
+          <p className="text-2xl font-bold text-purple-700">{docs.length}</p>
+          <p className="text-xs text-gray-500">Dokumente</p>
+        </div>
+      </div>
+
+      {/* Scanned Pages */}
+      {data.pages_list?.length > 0 && (
+        <details className="text-sm">
+          <summary className="text-gray-600 cursor-pointer hover:text-gray-800">
+            {data.pages_scanned} Seiten gescannt
+          </summary>
+          <ul className="mt-2 space-y-1 ml-4">
+            {data.pages_list.map((p, i) => {
+              const isMissing = data.missing_pages[p]
+              return (
+                <li key={i} className={`text-xs ${isMissing ? 'text-red-600' : 'text-gray-500'}`}>
+                  {isMissing ? '\u2717' : '\u2713'} {p}
+                </li>
+              )
+            })}
+          </ul>
+        </details>
+      )}
+
+      {/* Services Table */}
+      {data.services.length > 0 && (
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Dienstleister (SOLL/IST)</h4>
+          <div className="border rounded-lg overflow-hidden">
+            <table className="w-full text-sm">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Status</th>
+                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Dienst</th>
+                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">Land</th>
+                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">In DSE</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100">
+                {data.services.map((s, i) => {
+                  const st = STATUS_ICON[s.status] || STATUS_ICON.ok
+                  return (
+                    <tr key={i} className={s.status === 'undocumented' ? 'bg-red-50' : ''}>
+                      <td className={`px-3 py-2 font-bold ${st.color}`}>{st.icon}</td>
+                      <td className="px-3 py-2">
+                        <span className="font-medium text-gray-900">{s.name}</span>
+                        <span className="text-gray-400 text-xs ml-2">{s.provider}</span>
+                      </td>
+                      <td className="px-3 py-2 text-gray-600">{s.country}</td>
+                      <td className="px-3 py-2">{s.in_dse ? '\u2713' : <span className="text-red-600 font-medium">Nein</span>}</td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+
+      {/* === Document-Centric View === */}
+      {docs.length > 0 && (
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">
+            Rechtliche Dokumente ({docs.length})
+          </h4>
+          <div className="space-y-2">
+            {docs.map((doc, i) => {
+              const isExpanded = expandedDoc === doc.title
+              const findings = docFindings[doc.title] || []
+              const pct = doc.completeness_pct
+              const barColor = pct >= 80 ? 'bg-green-500' : pct >= 50 ? 'bg-yellow-500' : 'bg-red-500'
+              const statusLabel = pct >= 80 ? 'OK' : pct >= 50 ? 'Lueckenhaft' : 'Mangelhaft'
+              const statusColor = pct >= 80 ? 'text-green-700 bg-green-50' : pct >= 50 ? 'text-yellow-700 bg-yellow-50' : 'text-red-700 bg-red-50'
+
+              return (
+                <div key={i} className="border border-gray-200 rounded-lg overflow-hidden">
+                  <button
+                    onClick={() => setExpandedDoc(isExpanded ? null : doc.title)}
+                    className="w-full flex items-center justify-between px-4 py-3 bg-gray-50/50 hover:bg-gray-50 text-left"
+                  >
+                    <div className="flex items-center gap-3 flex-1 min-w-0">
+                      <svg className={`w-4 h-4 text-gray-400 transition-transform shrink-0 ${isExpanded ? 'rotate-90' : ''}`}
+                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                      </svg>
+                      <div className="min-w-0 flex-1">
+                        <div className="text-sm font-medium text-gray-900 truncate">{doc.title}</div>
+                        <div className="text-xs text-gray-500">
+                          {doc.word_count} Woerter
+                          {findings.length > 0 && <span className="text-red-600 ml-2">{findings.length} Maengel</span>}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3 shrink-0 ml-3">
+                      {/* Completeness bar */}
+                      <div className="w-20 h-2 bg-gray-200 rounded-full overflow-hidden">
+                        <div className={`h-full rounded-full ${barColor}`} style={{ width: `${pct}%` }} />
+                      </div>
+                      <span className={`text-xs font-medium px-2 py-0.5 rounded ${statusColor}`}>
+                        {pct}%
+                      </span>
+                    </div>
+                  </button>
+
+                  {isExpanded && (
+                    <div className="px-4 py-3 border-t border-gray-100 space-y-2">
+                      {findings.length > 0 ? (
+                        findings.map((f, fi) => {
+                          const sev = SEV_STYLE[f.severity] || SEV_STYLE.MEDIUM
+                          return (
+                            <div key={fi} className="flex items-start gap-2 text-sm">
+                              <span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${sev.dot}`} />
+                              <span className="text-gray-700">{f.text}</span>
+                            </div>
+                          )
+                        })
+                      ) : (
+                        <p className="text-sm text-green-600">Alle Pflichtangaben vorhanden.</p>
+                      )}
+                      {doc.url && (
+                        <a href={doc.url} target="_blank" rel="noopener noreferrer"
+                          className="text-xs text-purple-600 hover:underline mt-2 inline-block">
+                          Dokument oeffnen
+                        </a>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* General Findings (not associated with a specific document) */}
+      {generalFindings.length > 0 && (
+        <div>
+          <h4 className="text-sm font-medium text-gray-700 mb-2">
+            Allgemeine Findings ({generalFindings.length})
+          </h4>
+          <div className="space-y-2">
+            {generalFindings.map((f, i) => {
+              const sev = SEV_STYLE[f.severity] || SEV_STYLE.MEDIUM
+              const corrKey = `gen-${i}`
+              const isExp = expandedCorrection === corrKey
+              return (
+                <div key={i} className={`border rounded-lg p-3 ${sev.bg}`}>
+                  <div className="flex items-start gap-2">
+                    <span className={`text-xs font-bold px-2 py-0.5 rounded ${sev.text} bg-white`}>
+                      {f.severity}
+                    </span>
+                    <p className="text-sm text-gray-800 flex-1">{f.text}</p>
+                  </div>
+                  {f.correction && (
+                    <div className="mt-2">
+                      <button onClick={() => setExpandedCorrection(isExp ? null : corrKey)}
+                        className="text-xs text-purple-600 hover:text-purple-800 font-medium">
+                        {isExp ? 'Korrektur ausblenden' : 'Korrekturvorschlag'}
+                      </button>
+                      {isExp && (
+                        <div className="mt-2 bg-white border border-gray-200 rounded-lg p-3 relative">
+                          <pre className="text-xs text-gray-700 whitespace-pre-wrap font-sans">{f.correction}</pre>
+                          <button onClick={() => navigator.clipboard.writeText(f.correction)}
+                            className="absolute top-2 right-2 text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">
+                            Kopieren
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Email Status */}
+      {data.email_status && (
+        <div className="text-xs text-gray-500 flex items-center gap-2">
+          <span className={`w-2 h-2 rounded-full ${data.email_status === 'sent' ? 'bg-green-400' : 'bg-gray-300'}`} />
+          E-Mail: {data.email_status === 'sent' ? 'Gesendet' : data.email_status}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,106 @@
+'use client'
+
+import { useState } from 'react'
+
+export interface FollowUpQuestion {
+  id: string
+  question: string
+  legal_basis: string
+  severity: 'high' | 'medium' | 'low'
+  finding_if_no: string
+}
+
+export interface AnalysisResult {
+  url: string
+  classification: string
+  risk_level: string
+  risk_score: number
+  escalation_level: string
+  responsible_role: string
+  findings: string[]
+  required_controls: string[]
+  summary: string
+  email_status: string
+  analyzed_at: string
+  follow_up_questions: FollowUpQuestion[]
+  follow_up_answers: Record<string, boolean>
+}
+
+const ESCALATION_ROLES: Record<string, string> = {
+  E0: 'Kein Handlungsbedarf',
+  E1: 'Teamleitung Datenschutz',
+  E2: 'Datenschutzbeauftragter (DSB)',
+  E3: 'DSB + Rechtsabteilung',
+}
+
+export function useAgentAnalysis() {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [result, setResult] = useState<AnalysisResult | null>(null)
+  const [history, setHistory] = useState<AnalysisResult[]>([])
+
+  async function analyze(url: string, mode: string = 'post_launch') {
+    setLoading(true)
+    setError(null)
+    setResult(null)
+
+    try {
+      const fetchRes = await fetch('/api/sdk/v1/agent/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url, mode }),
+      })
+
+      if (!fetchRes.ok) {
+        throw new Error(`Analyse fehlgeschlagen: ${fetchRes.status}`)
+      }
+
+      const data = await fetchRes.json()
+      const analysisResult: AnalysisResult = {
+        url,
+        classification: data.classification || 'unknown',
+        risk_level: data.risk_level || 'unknown',
+        risk_score: data.risk_score || 0,
+        escalation_level: data.escalation_level || 'E0',
+        responsible_role: ESCALATION_ROLES[data.escalation_level] || ESCALATION_ROLES.E0,
+        findings: data.findings || [],
+        required_controls: data.required_controls || [],
+        summary: data.summary || '',
+        email_status: data.email_status || 'pending',
+        analyzed_at: new Date().toISOString(),
+        follow_up_questions: data.follow_up_questions || [],
+        follow_up_answers: {},
+      }
+
+      setResult(analysisResult)
+      setHistory(prev => [analysisResult, ...prev].slice(0, 20))
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function answerFollowUp(questionId: string, answer: boolean) {
+    if (!result) return
+    const question = result.follow_up_questions.find(q => q.id === questionId)
+    const newAnswers = { ...result.follow_up_answers, [questionId]: answer }
+    const newFindings = [...result.findings]
+
+    // If user answered "no" → add the finding
+    if (!answer && question) {
+      newFindings.push(question.finding_if_no)
+    }
+
+    const updated = {
+      ...result,
+      findings: newFindings,
+      follow_up_answers: newAnswers,
+    }
+    setResult(updated)
+    // Update history too
+    setHistory(prev => prev.map(h => h.analyzed_at === result.analyzed_at ? updated : h))
+  }
+
+  return { analyze, answerFollowUp, loading, error, result, history }
+}
@@ -0,0 +1,297 @@
+'use client'
+
+import React, { useState } from 'react'
+import { ScanResult } from './_components/ScanResult'
+import { DocCheckTab } from './_components/DocCheckTab'
+import { BannerCheckTab } from './_components/BannerCheckTab'
+import { ImpressumCheckTab } from './_components/ImpressumCheckTab'
+import { ComplianceFAQ } from './_components/ComplianceFAQ'
+
+type AnalysisTab = 'scan' | 'doc-check' | 'banner-check' | 'impressum-check'
+
+const TABS: { id: AnalysisTab; label: string; desc: string }[] = [
+  { id: 'scan', label: 'Website-Scan', desc: 'Rechtliche Dokumente finden + Dienstleister erkennen' },
+  { id: 'doc-check', label: 'Dokumenten-Pruefung', desc: 'DSI, AGB, Cookie-Richtlinie inhaltlich pruefen' },
+  { id: 'banner-check', label: 'Banner-Check', desc: 'Cookie-Banner auf DSGVO-Konformitaet testen' },
+  { id: 'impressum-check', label: 'Impressum-Check', desc: 'Impressum auf §5 TMG Pflichtangaben pruefen' },
+]
+
+export default function AgentPage() {
+  const [url, setUrl] = useState(() => typeof window !== 'undefined' ? localStorage.getItem('agent-scan-url') || '' : '')
+  const [tab, setTab] = useState<AnalysisTab>(() => (typeof window !== 'undefined' ? localStorage.getItem('agent-scan-tab') as AnalysisTab : null) || 'scan')
+  const [scanLoading, setScanLoading] = useState(false)
+  const [scanError, setScanError] = useState<string | null>(null)
+  const [scanData, setScanData] = useState<any>(() => {
+    if (typeof window === 'undefined') return null
+    try { const s = localStorage.getItem('agent-scan-result'); return s ? JSON.parse(s) : null } catch { return null }
+  })
+  const [scanProgress, setScanProgress] = useState<string>('')
+  const [activeScanId, setActiveScanId] = useState<string>(() => typeof window !== 'undefined' ? localStorage.getItem('agent-scan-id') || '' : '')
+  const [scanHistory, setScanHistory] = useState<{ url: string; date: string; findings: number; docs: number; resultKey: string }[]>(() => {
+    if (typeof window === 'undefined') return []
+    try { return JSON.parse(localStorage.getItem('agent-scan-history') || '[]') } catch { return [] }
+  })
+
+  React.useEffect(() => { localStorage.setItem('agent-scan-url', url) }, [url])
+  React.useEffect(() => { localStorage.setItem('agent-scan-tab', tab) }, [tab])
+
+  // Resume polling if scan was in progress
+  React.useEffect(() => {
+    if (!activeScanId || scanData?.services) return
+    let cancelled = false
+    setScanLoading(true)
+    setScanProgress('Scan laeuft noch...')
+    const poll = async () => {
+      while (!cancelled) {
+        await new Promise(r => setTimeout(r, 5000))
+        try {
+          const res = await fetch(`/api/sdk/v1/agent/scan?scan_id=${activeScanId}`)
+          if (!res.ok) continue
+          const data = await res.json()
+          if (data.progress) setScanProgress(data.progress)
+          if (data.status === 'completed' && data.result) {
+            setScanData(data.result)
+            setScanProgress('')
+            setScanLoading(false)
+            localStorage.setItem('agent-scan-result', JSON.stringify(data.result))
+            localStorage.removeItem('agent-scan-id')
+            setActiveScanId('')
+            _addToHistory(data.result)
+            return
+          }
+          if (data.status === 'failed' || data.status === 'not_found') {
+            if (data.status === 'failed') setScanError(data.error || 'Scan fehlgeschlagen')
+            setScanProgress('')
+            setScanLoading(false)
+            localStorage.removeItem('agent-scan-id')
+            setActiveScanId('')
+            return
+          }
+        } catch { /* retry */ }
+      }
+    }
+    poll()
+    return () => { cancelled = true }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const _addToHistory = (result: any) => {
+    const resultKey = `scan-result-${Date.now()}`
+    try { localStorage.setItem(resultKey, JSON.stringify(result)) } catch {}
+    const entry = {
+      url: url || result.url || '',
+      date: new Date().toISOString(),
+      findings: result.findings?.length || 0,
+      docs: result.discovered_documents?.length || 0,
+      resultKey,
+    }
+    const updated = [entry, ...scanHistory].slice(0, 30)
+    setScanHistory(updated)
+    localStorage.setItem('agent-scan-history', JSON.stringify(updated))
+  }
+
+  const handleScan = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!url.trim()) return
+    setScanLoading(true)
+    setScanError(null)
+    setScanData(null)
+    setScanProgress('Scan wird gestartet...')
+    try {
+      const startRes = await fetch('/api/sdk/v1/agent/scan', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: url.trim(), mode: 'post_launch' }),
+      })
+      if (!startRes.ok) throw new Error(`Scan konnte nicht gestartet werden: ${startRes.status}`)
+      const { scan_id } = await startRes.json()
+      if (!scan_id) throw new Error('Keine Scan-ID erhalten')
+      setActiveScanId(scan_id)
+      localStorage.setItem('agent-scan-id', scan_id)
+
+      let attempts = 0
+      while (attempts < 120) {
+        await new Promise(r => setTimeout(r, 5000))
+        const pollRes = await fetch(`/api/sdk/v1/agent/scan?scan_id=${scan_id}`)
+        if (!pollRes.ok) { attempts++; continue }
+        const pollData = await pollRes.json()
+        if (pollData.progress) setScanProgress(pollData.progress)
+        if (pollData.status === 'completed' && pollData.result) {
+          setScanData(pollData.result)
+          setScanProgress('')
+          localStorage.setItem('agent-scan-result', JSON.stringify(pollData.result))
+          localStorage.removeItem('agent-scan-id')
+          setActiveScanId('')
+          _addToHistory(pollData.result)
+          break
+        }
+        if (pollData.status === 'failed') throw new Error(pollData.error || 'Scan fehlgeschlagen')
+        attempts++
+      }
+      if (attempts >= 120) throw new Error('Scan-Timeout (10 Minuten)')
+    } catch (e) {
+      setScanError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+      setScanProgress('')
+    } finally {
+      setScanLoading(false)
+    }
+  }
+
+  // Navigate to a specialized tab with a pre-filled URL
+  const navigateToCheck = (targetTab: AnalysisTab, checkUrl: string) => {
+    // Store the URL in the target tab's localStorage key
+    const keyMap: Record<string, string> = {
+      'doc-check': 'doc-check-prefill-url',
+      'banner-check': 'banner-check-url',
+      'impressum-check': 'impressum-check-url',
+    }
+    if (keyMap[targetTab]) {
+      localStorage.setItem(keyMap[targetTab], checkUrl)
+    }
+    setTab(targetTab)
+  }
+
+  // Extract discovered documents for quick-action buttons
+  const discoveredDocs = scanData?.discovered_documents || []
+  const scannedUrl = scanData?.url || url
+
+  return (
+    <div className="space-y-6 max-w-4xl">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900">Compliance Agent</h1>
+        <p className="text-gray-500 mt-1">Analysiere Webseiten und Dokumente auf DSGVO-Konformitaet.</p>
+      </div>
+
+      {/* Tab Selection */}
+      <div className="flex border-b border-gray-200 overflow-x-auto">
+        {TABS.map(t => (
+          <button key={t.id} onClick={() => setTab(t.id)}
+            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+              tab === t.id
+                ? 'border-purple-500 text-purple-700'
+                : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Website-Scan Tab */}
+      {tab === 'scan' && (
+        <div className="space-y-4">
+          <div className="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
+            <h3 className="text-sm font-semibold text-indigo-900">Website-Scan (Discovery)</h3>
+            <p className="text-xs text-indigo-700 mt-1">
+              Findet alle rechtlichen Dokumente (DSI, AGB, Impressum, Cookie, Widerruf),
+              erkennt eingesetzte Drittdienste und prueft ob sie in der DSE dokumentiert sind.
+            </p>
+          </div>
+
+          <form onSubmit={handleScan} className="flex gap-3">
+            <input type="url" value={url} onChange={e => setUrl(e.target.value)}
+              placeholder="https://www.example.com/"
+              className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-sm"
+              disabled={scanLoading} required />
+            <button type="submit" disabled={scanLoading || !url.trim()}
+              className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors flex items-center gap-2 text-sm font-medium whitespace-nowrap">
+              {scanLoading ? (
+                <><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>Scanne...</>
+              ) : 'Website scannen'}
+            </button>
+          </form>
+
+          {scanProgress && (
+            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-sm text-purple-700 flex items-center gap-3">
+              <svg className="animate-spin w-5 h-5 text-purple-500 shrink-0" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+              </svg>
+              {scanProgress}
+            </div>
+          )}
+
+          {scanError && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">{scanError}</div>
+          )}
+
+          {/* Quick Action Buttons — navigate to specialized tabs */}
+          {scanData && (
+            <div className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm">
+              <h4 className="text-sm font-semibold text-gray-800 mb-3">Jetzt pruefen</h4>
+              <div className="grid grid-cols-2 gap-2">
+                <button onClick={() => navigateToCheck('banner-check', scannedUrl)}
+                  className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
+                  <div className="text-sm font-medium text-gray-900">Cookie-Banner pruefen</div>
+                  <div className="text-xs text-gray-500 mt-0.5">3-Phasen Dark-Pattern-Analyse</div>
+                </button>
+                <button onClick={() => navigateToCheck('impressum-check', scannedUrl + '/impressum')}
+                  className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
+                  <div className="text-sm font-medium text-gray-900">Impressum pruefen</div>
+                  <div className="text-xs text-gray-500 mt-0.5">§5 TMG Pflichtangaben</div>
+                </button>
+                {discoveredDocs.map((doc: any, i: number) => (
+                  <button key={i} onClick={() => navigateToCheck('doc-check', doc.url)}
+                    className="p-3 rounded-lg border border-gray-200 hover:border-purple-300 hover:bg-purple-50 transition-all text-left">
+                    <div className="text-sm font-medium text-gray-900 truncate">{doc.title || doc.url}</div>
+                    <div className="text-xs text-gray-500 mt-0.5">
+                      {doc.doc_type?.toUpperCase()} · {doc.word_count || '?'} Woerter
+                      {doc.completeness_pct != null && ` · ${doc.completeness_pct}%`}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Full Scan Result */}
+          {scanData?.services && (
+            <div className="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
+              <ScanResult data={scanData} />
+            </div>
+          )}
+
+          {/* Scan History */}
+          {scanHistory.length > 0 && (
+            <div className="border border-gray-200 rounded-xl p-4">
+              <h4 className="text-sm font-medium text-gray-700 mb-3">Letzte Scans</h4>
+              <div className="space-y-2">
+                {scanHistory.map((h, i) => (
+                  <button key={i} onClick={() => {
+                    setUrl(h.url)
+                    if (h.resultKey) {
+                      try { const s = localStorage.getItem(h.resultKey); if (s) { setScanData(JSON.parse(s)); return } } catch {}
+                    }
+                    try { const l = localStorage.getItem('agent-scan-result'); if (l) setScanData(JSON.parse(l)) } catch {}
+                  }}
+                    className="w-full flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:border-purple-200 hover:bg-purple-50/30 transition-all text-left">
+                    <div className="min-w-0 flex-1">
+                      <div className="text-sm font-medium text-gray-900 truncate">{h.url}</div>
+                      <div className="text-xs text-gray-500">
+                        {new Date(h.date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3 shrink-0 ml-3">
+                      {h.docs > 0 && <span className="text-xs text-purple-600">{h.docs} Dok.</span>}
+                      <span className={`text-xs font-medium ${h.findings > 0 ? 'text-red-600' : 'text-green-600'}`}>
+                        {h.findings} Findings
+                      </span>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Specialized Tabs */}
+      {tab === 'doc-check' && <DocCheckTab />}
+      {tab === 'banner-check' && <BannerCheckTab />}
+      {tab === 'impressum-check' && <ImpressumCheckTab />}
+
+      {/* FAQ */}
+      <ComplianceFAQ />
+    </div>
+  )
+}
@@ -8,9 +8,178 @@ import { LoadingSkeleton } from './_components/LoadingSkeleton'
 import { RiskPyramid } from './_components/RiskPyramid'
 import { AddSystemForm } from './_components/AddSystemForm'
 import { AISystemCard } from './_components/AISystemCard'
+import DecisionTreeWizard from '@/components/sdk/ai-act/DecisionTreeWizard'
+
+type TabId = 'overview' | 'decision-tree' | 'results'
+
+// SAVED RESULTS TAB
+// =============================================================================
+
+interface SavedResult {
+  id: string
+  system_name: string
+  system_description?: string
+  high_risk_result: string
+  gpai_result: { gpai_category: string; is_systemic_risk: boolean }
+  combined_obligations: string[]
+  created_at: string
+}
+
+function SavedResultsTab() {
+  const [results, setResults] = useState<SavedResult[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const res = await fetch('/api/sdk/v1/ucca/decision-tree/results')
+        if (res.ok) {
+          const data = await res.json()
+          setResults(data.results || [])
+        }
+      } catch {
+        // Ignore
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Ergebnis wirklich löschen?')) return
+    try {
+      const res = await fetch(`/api/sdk/v1/ucca/decision-tree/results/${id}`, { method: 'DELETE' })
+      if (res.ok) {
+        setResults(prev => prev.filter(r => r.id !== id))
+      }
+    } catch {
+      // Ignore
+    }
+  }
+
+  const riskLabels: Record<string, string> = {
+    unacceptable: 'Unzulässig',
+    high_risk: 'Hochrisiko',
+    limited_risk: 'Begrenztes Risiko',
+    minimal_risk: 'Minimales Risiko',
+    not_applicable: 'Nicht anwendbar',
+  }
+
+  const riskColors: Record<string, string> = {
+    unacceptable: 'bg-red-100 text-red-700',
+    high_risk: 'bg-orange-100 text-orange-700',
+    limited_risk: 'bg-yellow-100 text-yellow-700',
+    minimal_risk: 'bg-green-100 text-green-700',
+    not_applicable: 'bg-gray-100 text-gray-500',
+  }
+
+  const gpaiLabels: Record<string, string> = {
+    none: 'Kein GPAI',
+    standard: 'GPAI Standard',
+    systemic: 'GPAI Systemisch',
+  }
+
+  const gpaiColors: Record<string, string> = {
+    none: 'bg-gray-100 text-gray-500',
+    standard: 'bg-blue-100 text-blue-700',
+    systemic: 'bg-purple-100 text-purple-700',
+  }
+
+  if (loading) {
+    return <LoadingSkeleton />
+  }
+
+  if (results.length === 0) {
+    return (
+      <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
+        <div className="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
+          <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+          </svg>
+        </div>
+        <h3 className="text-lg font-semibold text-gray-900">Keine Ergebnisse vorhanden</h3>
+        <p className="mt-2 text-gray-500">Nutzen Sie den Entscheidungsbaum, um KI-Systeme zu klassifizieren.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {results.map(r => (
+        <div key={r.id} className="bg-white rounded-xl border border-gray-200 p-5">
+          <div className="flex items-start justify-between">
+            <div>
+              <h4 className="font-semibold text-gray-900">{r.system_name}</h4>
+              {r.system_description && (
+                <p className="text-sm text-gray-500 mt-0.5">{r.system_description}</p>
+              )}
+              <div className="flex items-center gap-2 mt-2">
+                <span className={`px-2 py-1 text-xs rounded-full ${riskColors[r.high_risk_result] || 'bg-gray-100 text-gray-500'}`}>
+                  {riskLabels[r.high_risk_result] || r.high_risk_result}
+                </span>
+                <span className={`px-2 py-1 text-xs rounded-full ${gpaiColors[r.gpai_result?.gpai_category] || 'bg-gray-100 text-gray-500'}`}>
+                  {gpaiLabels[r.gpai_result?.gpai_category] || 'Kein GPAI'}
+                </span>
+                {r.gpai_result?.is_systemic_risk && (
+                  <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">Systemisch</span>
+                )}
+              </div>
+              <div className="text-xs text-gray-400 mt-2">
+                {r.combined_obligations?.length || 0} Pflichten &middot; {new Date(r.created_at).toLocaleDateString('de-DE')}
+              </div>
+            </div>
+            <button
+              onClick={() => handleDelete(r.id)}
+              className="px-3 py-1 text-xs text-red-600 hover:bg-red-50 rounded transition-colors"
+            >
+              Löschen
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// TABS
+// =============================================================================
+
+const TABS: { id: TabId; label: string; icon: React.ReactNode }[] = [
+  {
+    id: 'overview',
+    label: 'Übersicht',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'decision-tree',
+    label: 'Entscheidungsbaum',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
+      </svg>
+    ),
+  },
+  {
+    id: 'results',
+    label: 'Ergebnisse',
+    icon: (
+      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z" />
+      </svg>
+    ),
+  },
+]
+
+// MAIN PAGE

 export default function AIActPage() {
  const { state } = useSDK()
+  const [activeTab, setActiveTab] = useState<TabId>('overview')
  const [systems, setSystems] = useState<AISystem[]>([])
  const [filter, setFilter] = useState<string>('all')
  const [showAddForm, setShowAddForm] = useState(false)
@@ -178,17 +347,38 @@ export default function AIActPage() {
        explanation={stepInfo.explanation}
        tips={stepInfo.tips}
      >
-        <button
-          onClick={() => setShowAddForm(true)}
-          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-        >
-          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          KI-System registrieren
-        </button>
+        {activeTab === 'overview' && (
+          <button
+            onClick={() => setShowAddForm(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+            KI-System registrieren
+          </button>
+        )}
      </StepHeader>

+      {/* Tabs */}
+      <div className="flex items-center gap-1 bg-gray-100 p-1 rounded-lg w-fit">
+        {TABS.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+              activeTab === tab.id
+                ? 'bg-white text-purple-700 shadow-sm'
+                : 'text-gray-600 hover:text-gray-900'
+            }`}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Error Banner */}
      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
          <span>{error}</span>
@@ -196,82 +386,105 @@ export default function AIActPage() {
        </div>
      )}

-      {showAddForm && (
-        <AddSystemForm
-          onSubmit={handleAddSystem}
-          onCancel={() => { setShowAddForm(false); setEditingSystem(null) }}
-          initialData={editingSystem}
-        />
-      )}
-
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <div className="text-sm text-gray-500">KI-Systeme gesamt</div>
-          <div className="text-3xl font-bold text-gray-900">{systems.length}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-orange-200 p-6">
-          <div className="text-sm text-orange-600">Hochrisiko</div>
-          <div className="text-3xl font-bold text-orange-600">{highRiskCount}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-green-200 p-6">
-          <div className="text-sm text-green-600">Konform</div>
-          <div className="text-3xl font-bold text-green-600">{compliantCount}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <div className="text-sm text-gray-500">Nicht klassifiziert</div>
-          <div className="text-3xl font-bold text-gray-500">{unclassifiedCount}</div>
-        </div>
-      </div>
-
-      <RiskPyramid systems={systems} />
-
-      <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-sm text-gray-500">Filter:</span>
-        {['all', 'high-risk', 'limited-risk', 'minimal-risk', 'unclassified', 'compliant', 'non-compliant'].map(f => (
-          <button
-            key={f}
-            onClick={() => setFilter(f)}
-            className={`px-3 py-1 text-sm rounded-full transition-colors ${
-              filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
-          >
-            {f === 'all' ? 'Alle' :
-             f === 'high-risk' ? 'Hochrisiko' :
-             f === 'limited-risk' ? 'Begrenztes Risiko' :
-             f === 'minimal-risk' ? 'Minimales Risiko' :
-             f === 'unclassified' ? 'Nicht klassifiziert' :
-             f === 'compliant' ? 'Konform' : 'Nicht konform'}
-          </button>
-        ))}
-      </div>
-
-      {loading && <LoadingSkeleton />}
-
-      {!loading && (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {filteredSystems.map(system => (
-            <AISystemCard
-              key={system.id}
-              system={system}
-              onAssess={() => handleAssess(system.id)}
-              onEdit={() => handleEdit(system)}
-              onDelete={() => handleDelete(system.id)}
-              assessing={assessingId === system.id}
+      {/* Tab: Overview */}
+      {activeTab === 'overview' && (
+        <>
+          {/* Add/Edit System Form */}
+          {showAddForm && (
+            <AddSystemForm
+              onSubmit={handleAddSystem}
+              onCancel={() => { setShowAddForm(false); setEditingSystem(null) }}
+              initialData={editingSystem}
            />
-          ))}
-        </div>
+          )}
+
+          {/* Stats */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="bg-white rounded-xl border border-gray-200 p-6">
+              <div className="text-sm text-gray-500">KI-Systeme gesamt</div>
+              <div className="text-3xl font-bold text-gray-900">{systems.length}</div>
+            </div>
+            <div className="bg-white rounded-xl border border-orange-200 p-6">
+              <div className="text-sm text-orange-600">Hochrisiko</div>
+              <div className="text-3xl font-bold text-orange-600">{highRiskCount}</div>
+            </div>
+            <div className="bg-white rounded-xl border border-green-200 p-6">
+              <div className="text-sm text-green-600">Konform</div>
+              <div className="text-3xl font-bold text-green-600">{compliantCount}</div>
+            </div>
+            <div className="bg-white rounded-xl border border-gray-200 p-6">
+              <div className="text-sm text-gray-500">Nicht klassifiziert</div>
+              <div className="text-3xl font-bold text-gray-500">{unclassifiedCount}</div>
+            </div>
+          </div>
+
+          {/* Risk Pyramid */}
+          <RiskPyramid systems={systems} />
+
+          {/* Filter */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm text-gray-500">Filter:</span>
+            {['all', 'high-risk', 'limited-risk', 'minimal-risk', 'unclassified', 'compliant', 'non-compliant'].map(f => (
+              <button
+                key={f}
+                onClick={() => setFilter(f)}
+                className={`px-3 py-1 text-sm rounded-full transition-colors ${
+                  filter === f
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}
+              >
+                {f === 'all' ? 'Alle' :
+                 f === 'high-risk' ? 'Hochrisiko' :
+                 f === 'limited-risk' ? 'Begrenztes Risiko' :
+                 f === 'minimal-risk' ? 'Minimales Risiko' :
+                 f === 'unclassified' ? 'Nicht klassifiziert' :
+                 f === 'compliant' ? 'Konform' : 'Nicht konform'}
+              </button>
+            ))}
+          </div>
+
+          {/* Loading */}
+          {loading && <LoadingSkeleton />}
+
+          {/* AI Systems List */}
+          {!loading && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {filteredSystems.map(system => (
+                <AISystemCard
+                  key={system.id}
+                  system={system}
+                  onAssess={() => handleAssess(system.id)}
+                  onEdit={() => handleEdit(system)}
+                  onDelete={() => handleDelete(system.id)}
+                  assessing={assessingId === system.id}
+                />
+              ))}
+            </div>
+          )}
+
+          {!loading && filteredSystems.length === 0 && (
+            <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
+              <div className="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
+                <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900">Keine KI-Systeme gefunden</h3>
+              <p className="mt-2 text-gray-500">Passen Sie den Filter an oder registrieren Sie ein neues KI-System.</p>
+            </div>
+          )}
+        </>
      )}

-      {!loading && filteredSystems.length === 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
-          <div className="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
-            <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold text-gray-900">Keine KI-Systeme gefunden</h3>
-          <p className="mt-2 text-gray-500">Passen Sie den Filter an oder registrieren Sie ein neues KI-System.</p>
-        </div>
+      {/* Tab: Decision Tree */}
+      {activeTab === 'decision-tree' && (
+        <DecisionTreeWizard />
+      )}
+
+      {/* Tab: Results */}
+      {activeTab === 'results' && (
+        <SavedResultsTab />
      )}
    </div>
  )
@@ -0,0 +1,491 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+
+interface Registration {
+  id: string
+  system_name: string
+  system_version: string
+  risk_classification: string
+  gpai_classification: string
+  registration_status: string
+  eu_database_id: string
+  provider_name: string
+  created_at: string
+}
+
+const STATUS_STYLES: Record<string, { bg: string; text: string; label: string }> = {
+  draft: { bg: 'bg-gray-100', text: 'text-gray-700', label: 'Entwurf' },
+  ready: { bg: 'bg-blue-100', text: 'text-blue-700', label: 'Bereit' },
+  submitted: { bg: 'bg-yellow-100', text: 'text-yellow-700', label: 'Eingereicht' },
+  registered: { bg: 'bg-green-100', text: 'text-green-700', label: 'Registriert' },
+  update_required: { bg: 'bg-orange-100', text: 'text-orange-700', label: 'Update noetig' },
+  withdrawn: { bg: 'bg-red-100', text: 'text-red-700', label: 'Zurueckgezogen' },
+}
+
+const RISK_STYLES: Record<string, { bg: string; text: string }> = {
+  high_risk: { bg: 'bg-red-100', text: 'text-red-700' },
+  limited_risk: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
+  minimal_risk: { bg: 'bg-green-100', text: 'text-green-700' },
+  not_classified: { bg: 'bg-gray-100', text: 'text-gray-500' },
+}
+
+const INITIAL_FORM = {
+  system_name: '',
+  system_version: '1.0',
+  system_description: '',
+  intended_purpose: '',
+  provider_name: '',
+  provider_legal_form: '',
+  provider_address: '',
+  provider_country: 'DE',
+  eu_representative_name: '',
+  eu_representative_contact: '',
+  risk_classification: 'not_classified',
+  annex_iii_category: '',
+  gpai_classification: 'none',
+  conformity_assessment_type: 'internal',
+  notified_body_name: '',
+  notified_body_id: '',
+  ce_marking: false,
+  training_data_summary: '',
+}
+
+export default function AIRegistrationPage() {
+  const [registrations, setRegistrations] = useState<Registration[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showWizard, setShowWizard] = useState(false)
+  const [wizardStep, setWizardStep] = useState(1)
+  const [form, setForm] = useState({ ...INITIAL_FORM })
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => { loadRegistrations() }, [])
+
+  async function loadRegistrations() {
+    try {
+      setLoading(true)
+      const resp = await fetch('/api/sdk/v1/ai-registration')
+      if (resp.ok) {
+        const data = await resp.json()
+        setRegistrations(data.registrations || [])
+      }
+    } catch {
+      setError('Fehler beim Laden')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleSubmit() {
+    setSubmitting(true)
+    try {
+      const resp = await fetch('/api/sdk/v1/ai-registration', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      })
+      if (resp.ok) {
+        setShowWizard(false)
+        setForm({ ...INITIAL_FORM })
+        setWizardStep(1)
+        loadRegistrations()
+      } else {
+        const data = await resp.json()
+        setError(data.error || 'Fehler beim Erstellen')
+      }
+    } catch {
+      setError('Netzwerkfehler')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  async function handleExport(id: string) {
+    try {
+      const resp = await fetch(`/api/sdk/v1/ai-registration/${id}`)
+      if (resp.ok) {
+        const reg = await resp.json()
+        // Build export JSON client-side
+        const exportData = {
+          schema_version: '1.0',
+          submission_type: 'ai_system_registration',
+          regulation: 'EU AI Act (EU) 2024/1689',
+          article: 'Art. 49',
+          provider: { name: reg.provider_name, address: reg.provider_address, country: reg.provider_country },
+          system: { name: reg.system_name, version: reg.system_version, description: reg.system_description, purpose: reg.intended_purpose },
+          classification: { risk_level: reg.risk_classification, annex_iii: reg.annex_iii_category, gpai: reg.gpai_classification },
+          conformity: { type: reg.conformity_assessment_type, ce_marking: reg.ce_marking },
+        }
+        const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `eu_ai_registration_${reg.system_name.replace(/\s+/g, '_')}.json`
+        a.click()
+        URL.revokeObjectURL(url)
+      }
+    } catch {
+      setError('Export fehlgeschlagen')
+    }
+  }
+
+  async function handleStatusChange(id: string, status: string) {
+    try {
+      await fetch(`/api/sdk/v1/ai-registration/${id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status }),
+      })
+      loadRegistrations()
+    } catch {
+      setError('Status-Aenderung fehlgeschlagen')
+    }
+  }
+
+  const updateForm = (updates: Partial<typeof form>) => setForm(prev => ({ ...prev, ...updates }))
+
+  const STEPS = [
+    { id: 1, title: 'Anbieter', desc: 'Unternehmensangaben' },
+    { id: 2, title: 'System', desc: 'KI-System Details' },
+    { id: 3, title: 'Klassifikation', desc: 'Risikoeinstufung' },
+    { id: 4, title: 'Konformitaet', desc: 'CE & Notified Body' },
+    { id: 5, title: 'Trainingsdaten', desc: 'Datenzusammenfassung' },
+    { id: 6, title: 'Pruefung', desc: 'Zusammenfassung & Export' },
+  ]
+
+  return (
+    <div className="max-w-5xl mx-auto p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">EU AI Database Registrierung</h1>
+          <p className="text-sm text-gray-500 mt-1">Art. 49 KI-Verordnung (EU) 2024/1689 — Registrierung von Hochrisiko-KI-Systemen</p>
+        </div>
+        <button
+          onClick={() => setShowWizard(true)}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+        >
+          + Neue Registrierung
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+          {error}
+          <button onClick={() => setError(null)} className="ml-2 underline">Schliessen</button>
+        </div>
+      )}
+
+      {/* Stats */}
+      <div className="grid grid-cols-4 gap-4 mb-8">
+        {['draft', 'ready', 'submitted', 'registered'].map(status => {
+          const count = registrations.filter(r => r.registration_status === status).length
+          const style = STATUS_STYLES[status]
+          return (
+            <div key={status} className={`p-4 rounded-xl border ${style.bg}`}>
+              <div className={`text-2xl font-bold ${style.text}`}>{count}</div>
+              <div className="text-sm text-gray-600">{style.label}</div>
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Registrations List */}
+      {loading ? (
+        <div className="text-center py-12 text-gray-500">Lade...</div>
+      ) : registrations.length === 0 ? (
+        <div className="text-center py-12 text-gray-400">
+          <p className="text-lg mb-2">Noch keine Registrierungen</p>
+          <p className="text-sm">Erstelle eine neue Registrierung fuer dein Hochrisiko-KI-System.</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {registrations.map(reg => {
+            const status = STATUS_STYLES[reg.registration_status] || STATUS_STYLES.draft
+            const risk = RISK_STYLES[reg.risk_classification] || RISK_STYLES.not_classified
+            return (
+              <div key={reg.id} className="bg-white rounded-xl border border-gray-200 p-6 hover:border-purple-300 transition-all">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="text-lg font-semibold text-gray-900">{reg.system_name}</h3>
+                      <span className="text-sm text-gray-400">v{reg.system_version}</span>
+                      <span className={`px-2 py-0.5 text-xs rounded-full ${status.bg} ${status.text}`}>{status.label}</span>
+                      <span className={`px-2 py-0.5 text-xs rounded-full ${risk.bg} ${risk.text}`}>{reg.risk_classification.replace('_', ' ')}</span>
+                      {reg.gpai_classification !== 'none' && (
+                        <span className="px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700">GPAI: {reg.gpai_classification}</span>
+                      )}
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      {reg.provider_name && <span>{reg.provider_name} · </span>}
+                      {reg.eu_database_id && <span>EU-ID: {reg.eu_database_id} · </span>}
+                      <span>{new Date(reg.created_at).toLocaleDateString('de-DE')}</span>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button onClick={() => handleExport(reg.id)} className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
+                      JSON Export
+                    </button>
+                    {reg.registration_status === 'draft' && (
+                      <button onClick={() => handleStatusChange(reg.id, 'ready')} className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+                        Bereit markieren
+                      </button>
+                    )}
+                    {reg.registration_status === 'ready' && (
+                      <button onClick={() => handleStatusChange(reg.id, 'submitted')} className="px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700">
+                        Als eingereicht markieren
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Wizard Modal */}
+      {showWizard && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
+            <div className="p-6 border-b">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-bold text-gray-900">Neue EU AI Registrierung</h2>
+                <button onClick={() => { setShowWizard(false); setWizardStep(1) }} className="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
+              </div>
+              {/* Step Indicator */}
+              <div className="flex gap-1">
+                {STEPS.map(step => (
+                  <button key={step.id} onClick={() => setWizardStep(step.id)}
+                    className={`flex-1 py-2 text-xs rounded-lg transition-all ${
+                      wizardStep === step.id ? 'bg-purple-100 text-purple-700 font-medium' :
+                      wizardStep > step.id ? 'bg-green-50 text-green-700' : 'bg-gray-50 text-gray-400'
+                    }`}>
+                    {wizardStep > step.id ? '✓ ' : ''}{step.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className="p-6 space-y-4">
+              {/* Step 1: Provider */}
+              {wizardStep === 1 && (
+                <>
+                  <h3 className="font-semibold text-gray-900">Anbieter-Informationen</h3>
+                  <p className="text-sm text-gray-500">Angaben zum Anbieter des KI-Systems gemaess Art. 49 KI-VO.</p>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Firmenname *</label>
+                      <input value={form.provider_name} onChange={e => updateForm({ provider_name: e.target.value })}
+                        className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Acme GmbH" />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Rechtsform</label>
+                      <input value={form.provider_legal_form} onChange={e => updateForm({ provider_legal_form: e.target.value })}
+                        className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="GmbH" />
+                    </div>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
+                    <input value={form.provider_address} onChange={e => updateForm({ provider_address: e.target.value })}
+                      className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Musterstr. 1, 20095 Hamburg" />
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Land</label>
+                      <select value={form.provider_country} onChange={e => updateForm({ provider_country: e.target.value })}
+                        className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                        <option value="DE">Deutschland</option>
+                        <option value="AT">Oesterreich</option>
+                        <option value="CH">Schweiz</option>
+                        <option value="OTHER">Anderes Land</option>
+                      </select>
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">EU-Repraesentant (falls Non-EU)</label>
+                      <input value={form.eu_representative_name} onChange={e => updateForm({ eu_representative_name: e.target.value })}
+                        className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Optional" />
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* Step 2: System */}
+              {wizardStep === 2 && (
+                <>
+                  <h3 className="font-semibold text-gray-900">KI-System Details</h3>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Systemname *</label>
+                      <input value={form.system_name} onChange={e => updateForm({ system_name: e.target.value })}
+                        className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="z.B. HR Copilot" />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Version</label>
+                      <input value={form.system_version} onChange={e => updateForm({ system_version: e.target.value })}
+                        className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="1.0" />
+                    </div>
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Systembeschreibung</label>
+                    <textarea value={form.system_description} onChange={e => updateForm({ system_description: e.target.value })} rows={3}
+                      className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Beschreibe was das KI-System tut..." />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Einsatzzweck (Intended Purpose)</label>
+                    <textarea value={form.intended_purpose} onChange={e => updateForm({ intended_purpose: e.target.value })} rows={2}
+                      className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Wofuer wird das System eingesetzt?" />
+                  </div>
+                </>
+              )}
+
+              {/* Step 3: Classification */}
+              {wizardStep === 3 && (
+                <>
+                  <h3 className="font-semibold text-gray-900">Risiko-Klassifikation</h3>
+                  <p className="text-sm text-gray-500">Basierend auf dem AI Act Decision Tree oder manueller Einstufung.</p>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Risikoklasse</label>
+                    <select value={form.risk_classification} onChange={e => updateForm({ risk_classification: e.target.value })}
+                      className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                      <option value="not_classified">Noch nicht klassifiziert</option>
+                      <option value="minimal_risk">Minimal Risk</option>
+                      <option value="limited_risk">Limited Risk</option>
+                      <option value="high_risk">High Risk</option>
+                    </select>
+                  </div>
+                  {form.risk_classification === 'high_risk' && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Annex III Kategorie</label>
+                      <select value={form.annex_iii_category} onChange={e => updateForm({ annex_iii_category: e.target.value })}
+                        className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                        <option value="">Bitte waehlen...</option>
+                        <option value="biometric">1. Biometrische Identifizierung</option>
+                        <option value="critical_infrastructure">2. Kritische Infrastruktur</option>
+                        <option value="education">3. Bildung und Berufsausbildung</option>
+                        <option value="employment">4. Beschaeftigung und Arbeitnehmerverwaltung</option>
+                        <option value="essential_services">5. Zugang zu wesentlichen Diensten</option>
+                        <option value="law_enforcement">6. Strafverfolgung</option>
+                        <option value="migration">7. Migration und Grenzkontrolle</option>
+                        <option value="justice">8. Rechtspflege und Demokratie</option>
+                      </select>
+                    </div>
+                  )}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">GPAI Klassifikation</label>
+                    <select value={form.gpai_classification} onChange={e => updateForm({ gpai_classification: e.target.value })}
+                      className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                      <option value="none">Kein GPAI</option>
+                      <option value="standard">GPAI (Standard)</option>
+                      <option value="systemic">GPAI mit systemischem Risiko</option>
+                    </select>
+                  </div>
+                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
+                    <strong>Tipp:</strong> Nutze den <a href="/sdk/ai-act" className="underline">AI Act Decision Tree</a> fuer eine strukturierte Klassifikation.
+                  </div>
+                </>
+              )}
+
+              {/* Step 4: Conformity */}
+              {wizardStep === 4 && (
+                <>
+                  <h3 className="font-semibold text-gray-900">Konformitaetsbewertung</h3>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Art der Konformitaetsbewertung</label>
+                    <select value={form.conformity_assessment_type} onChange={e => updateForm({ conformity_assessment_type: e.target.value })}
+                      className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                      <option value="not_required">Nicht erforderlich</option>
+                      <option value="internal">Interne Konformitaetsbewertung</option>
+                      <option value="third_party">Drittpartei-Bewertung (Notified Body)</option>
+                    </select>
+                  </div>
+                  {form.conformity_assessment_type === 'third_party' && (
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Notified Body Name</label>
+                        <input value={form.notified_body_name} onChange={e => updateForm({ notified_body_name: e.target.value })}
+                          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Notified Body ID</label>
+                        <input value={form.notified_body_id} onChange={e => updateForm({ notified_body_id: e.target.value })}
+                          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
+                      </div>
+                    </div>
+                  )}
+                  <label className="flex items-center gap-3 p-3 rounded-lg border hover:bg-gray-50 cursor-pointer">
+                    <input type="checkbox" checked={form.ce_marking} onChange={e => updateForm({ ce_marking: e.target.checked })}
+                      className="w-4 h-4 rounded border-gray-300 text-purple-600" />
+                    <span className="text-sm font-medium text-gray-900">CE-Kennzeichnung angebracht</span>
+                  </label>
+                </>
+              )}
+
+              {/* Step 5: Training Data */}
+              {wizardStep === 5 && (
+                <>
+                  <h3 className="font-semibold text-gray-900">Trainingsdaten-Zusammenfassung</h3>
+                  <p className="text-sm text-gray-500">Art. 10 KI-VO — Keine vollstaendige Offenlegung, sondern Kategorien und Herkunft.</p>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Zusammenfassung der Trainingsdaten</label>
+                    <textarea value={form.training_data_summary} onChange={e => updateForm({ training_data_summary: e.target.value })} rows={5}
+                      className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+                      placeholder="Beschreibe die verwendeten Datenquellen:&#10;- Oeffentliche Daten (z.B. Wikipedia, Common Crawl)&#10;- Lizenzierte Daten (z.B. Fachpublikationen)&#10;- Synthetische Daten&#10;- Unternehmensinterne Daten" />
+                  </div>
+                </>
+              )}
+
+              {/* Step 6: Review */}
+              {wizardStep === 6 && (
+                <>
+                  <h3 className="font-semibold text-gray-900">Zusammenfassung</h3>
+                  <div className="space-y-3 text-sm">
+                    <div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
+                      <div><span className="text-gray-500">Anbieter:</span> <strong>{form.provider_name || '–'}</strong></div>
+                      <div><span className="text-gray-500">Land:</span> <strong>{form.provider_country}</strong></div>
+                      <div><span className="text-gray-500">System:</span> <strong>{form.system_name || '–'}</strong></div>
+                      <div><span className="text-gray-500">Version:</span> <strong>{form.system_version}</strong></div>
+                      <div><span className="text-gray-500">Risiko:</span> <strong>{form.risk_classification}</strong></div>
+                      <div><span className="text-gray-500">GPAI:</span> <strong>{form.gpai_classification}</strong></div>
+                      <div><span className="text-gray-500">Konformitaet:</span> <strong>{form.conformity_assessment_type}</strong></div>
+                      <div><span className="text-gray-500">CE:</span> <strong>{form.ce_marking ? 'Ja' : 'Nein'}</strong></div>
+                    </div>
+                    {form.intended_purpose && (
+                      <div className="p-4 bg-gray-50 rounded-lg">
+                        <span className="text-gray-500">Zweck:</span> {form.intended_purpose}
+                      </div>
+                    )}
+                  </div>
+                  <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
+                    <strong>Hinweis:</strong> Die EU AI Datenbank befindet sich noch im Aufbau. Die Registrierung wird lokal gespeichert und kann spaeter uebermittelt werden.
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Navigation */}
+            <div className="p-6 border-t flex justify-between">
+              <button onClick={() => wizardStep > 1 ? setWizardStep(wizardStep - 1) : setShowWizard(false)}
+                className="px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50">
+                {wizardStep === 1 ? 'Abbrechen' : 'Zurueck'}
+              </button>
+              {wizardStep < 6 ? (
+                <button onClick={() => setWizardStep(wizardStep + 1)}
+                  disabled={wizardStep === 2 && !form.system_name}
+                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
+                  Weiter
+                </button>
+              ) : (
+                <button onClick={handleSubmit} disabled={submitting || !form.system_name}
+                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">
+                  {submitting ? 'Speichere...' : 'Registrierung erstellen'}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -228,24 +228,39 @@ export const ARCH_SERVICES: ArchService[] = [
    dependsOn: ['qdrant', 'ollama', 'postgresql'],
  },
  {
-    id: 'document-crawler',
-    name: 'Document Crawler',
-    nameShort: 'Crawler',
+    id: 'control-pipeline',
+    name: 'Control Pipeline',
+    nameShort: 'Pipeline',
    layer: 'backend',
    tech: 'Python / FastAPI',
    port: 8098,
    url: 'https://macmini:8098',
-    container: 'bp-compliance-document-crawler',
-    description: 'Dokument-Analyse (PDF, DOCX, XLSX, PPTX), Gap-Analyse, IPFS-Archivierung.',
-    descriptionLong: 'Der Document Crawler nimmt hochgeladene Dokumente (PDF, DOCX, XLSX, PPTX) entgegen, extrahiert deren Inhalt und fuehrt eine Gap-Analyse gegen bestehende Compliance-Anforderungen durch. Dafuer leitet er die Textinhalte an den AI Compliance SDK weiter, der die semantische Analyse uebernimmt. Abgeschlossene Dokumente koennen ueber den DSMS-Service dezentral auf IPFS archiviert werden.',
-    dbTables: [],
-    ragCollections: [],
-    apiEndpoints: [
-      'POST /analyze',
-      'POST /gap-analysis',
-      'POST /archive',
+    container: 'bp-core-control-pipeline',
+    description: 'RAG-zu-Controls Pipeline: Control Generation, Pass 0a/0b, Ontology, Dedup, Dependency Engine, Applicability.',
+    descriptionLong: 'Die Control Pipeline ist das Herzsttueck der automatisierten Compliance-Control-Generierung. Sie verarbeitet ~105.000 RAG-Chunks aus EU/DE-Regulierungen in 6 Phasen: (1) RAG Ingestion, (2) 7-Stufen Control Generation (Lizenz-Gate + Claude LLM), (3) Pass 0a Obligation Extraction (~181k Obligations), (4) Pass 0b Atomic Composition (MCP-taugliche Controls mit assertion/pass_criteria/fail_criteria), (5) Embedding-basierte Deduplizierung mit LLM-Verifikation, (6) Dependency Engine (5 Typen: supersedes, prerequisite, compensating_control, scope_exclusion, conditional_requirement) mit automatischer Generierung via Ontology, Pattern-Regeln und Domain Packs (DSGVO, AI Act, CRA, Security, Arbeitsrecht). 126+ Tests, alle bestanden.',
+    dbTables: [
+      'canonical_controls', 'obligation_candidates', 'control_parent_links',
+      'control_dependencies', 'control_evaluation_results',
+      'canonical_processed_chunks', 'canonical_generation_jobs',
+      'control_dedup_reviews', 'control_patterns',
    ],
-    dependsOn: ['ai-compliance-sdk', 'dsms'],
+    ragCollections: [
+      'bp_compliance_gesetze', 'bp_compliance_datenschutz',
+      'bp_compliance_ce', 'bp_dsfa_corpus', 'bp_legal_templates',
+    ],
+    apiEndpoints: [
+      'POST /v1/canonical/generate',
+      'GET /v1/canonical/controls',
+      'POST /v1/canonical/controls/applicable',
+      'POST /v1/canonical/generate/submit-pass0b',
+      'POST /v1/canonical/generate/process-batch',
+      'GET /v1/canonical/generate/quality-metrics',
+      'POST /v1/dependencies/generate',
+      'POST /v1/dependencies/evaluate',
+      'GET /v1/dependencies/graph',
+      'POST /v1/document-compliance/required',
+    ],
+    dependsOn: ['postgresql', 'qdrant', 'ollama'],
  },
  {
    id: 'compliance-tts',
@@ -383,7 +398,7 @@ export const ARCH_EDGES: ArchEdge[] = [
  // Frontend → Backend
  { source: 'admin-compliance', target: 'backend-compliance', label: 'REST API' },
  { source: 'admin-compliance', target: 'ai-compliance-sdk', label: 'REST API' },
-  { source: 'admin-compliance', target: 'document-crawler', label: 'REST API' },
+  { source: 'admin-compliance', target: 'control-pipeline', label: 'REST API' },

  // Backend → Infrastructure
  { source: 'backend-compliance', target: 'postgresql', label: 'SQLAlchemy' },
@@ -392,12 +407,9 @@ export const ARCH_EDGES: ArchEdge[] = [
  { source: 'ai-compliance-sdk', target: 'ollama', label: 'LLM Inference' },
  { source: 'ai-compliance-sdk', target: 'postgresql', label: 'GORM' },
  { source: 'compliance-tts', target: 'minio', label: 'Audio/Video' },
-
-  // Backend → Backend
-  { source: 'document-crawler', target: 'ai-compliance-sdk', label: 'LLM Gateway' },
-
-  // Backend → Data Sovereignty
-  { source: 'document-crawler', target: 'dsms', label: 'IPFS Archive' },
+  { source: 'control-pipeline', target: 'postgresql', label: 'SQLAlchemy' },
+  { source: 'control-pipeline', target: 'qdrant', label: 'Embedding + Dedup' },
+  { source: 'control-pipeline', target: 'ollama', label: 'LLM Dedup (qwen3.5)' },
 ]

 // =============================================================================
@@ -0,0 +1,292 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+
+/**
+ * CMP Dashboard — Consent Management Platform overview.
+ *
+ * Aggregates data from: Banner API, Einwilligungen, DSR, Vendors.
+ * State-of-the-art layout inspired by OneTrust/Cookiebot dashboards
+ * but with EWR-Only as unique differentiator.
+ */
+
+// Use Next.js API proxy to avoid SSL cert issues
+const BANNER_API = '/api/sdk/v1/banner'
+const TENANT_ID = '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+const HEADERS = { 'x-tenant-id': TENANT_ID }
+
+interface BannerStats { total_consents: number; category_acceptance: Record<string, { count: number; rate: number }> }
+interface ConsentStats { total_consents: number; active_consents: number; revoked_consents: number; unique_users: number; conversion_rate: number }
+interface DSRStats { total: number; by_status: Record<string, number>; by_type: Record<string, number>; overdue: number; due_this_week: number; average_processing_days: number; completed_this_month: number }
+
+const MODULES = [
+  { href: '/sdk/cookie-banner', label: 'Cookie-Banner', desc: 'Banner konfigurieren und Code exportieren', icon: 'shield', color: 'purple' },
+  { href: '/sdk/cookie-banner/preview', label: 'Live-Vorschau', desc: 'Banner auf simulierter Website testen', icon: 'eye', color: 'blue' },
+  { href: '/sdk/einwilligungen', label: 'Consent-Records', desc: 'Einwilligungen einsehen und verwalten', icon: 'clipboard', color: 'green' },
+  { href: '/sdk/consent-management', label: 'Consent-Verwaltung', desc: 'Dokument-Lifecycle und DSGVO-Prozesse', icon: 'folder', color: 'indigo' },
+  { href: '/sdk/vendor-compliance', label: 'Vendor-Compliance', desc: 'Dienstleister und Auftragsverarbeitung', icon: 'users', color: 'amber' },
+  { href: '/sdk/dsr', label: 'DSR Portal', desc: 'Betroffenenrechte Art. 15-21 DSGVO', icon: 'user', color: 'rose' },
+  { href: '/sdk/loeschfristen', label: 'Loeschfristen', desc: 'Aufbewahrungsrichtlinien verwalten', icon: 'clock', color: 'teal' },
+  { href: '/sdk/email-templates', label: 'E-Mail-Templates', desc: 'Benachrichtigungsvorlagen', icon: 'mail', color: 'slate' },
+]
+
+const ICON_MAP: Record<string, JSX.Element> = {
+  shield: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />,
+  eye: <><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></>,
+  clipboard: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />,
+  folder: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />,
+  users: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />,
+  user: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />,
+  clock: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />,
+  mail: <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />,
+}
+
+const COLOR_MAP: Record<string, string> = {
+  purple: 'bg-purple-100 text-purple-600', blue: 'bg-blue-100 text-blue-600',
+  green: 'bg-green-100 text-green-600', indigo: 'bg-indigo-100 text-indigo-600',
+  amber: 'bg-amber-100 text-amber-600', rose: 'bg-rose-100 text-rose-600',
+  teal: 'bg-teal-100 text-teal-600', slate: 'bg-slate-100 text-slate-600',
+}
+
+export default function CMPDashboardPage() {
+  const [bannerStats, setBannerStats] = useState<BannerStats | null>(null)
+  const [consentStats, setConsentStats] = useState<ConsentStats | null>(null)
+  const [dsrStats, setDSRStats] = useState<DSRStats | null>(null)
+  const [sites, setSites] = useState<any[]>([])
+  const [selectedSite, setSelectedSite] = useState<string>('')
+  const [loading, setLoading] = useState(true)
+
+  const fb = (path: string) => fetch(`${BANNER_API}/${path}`, { headers: HEADERS }).then(r => r.ok ? r.json() : null).catch(() => null)
+
+  // Load sites + consent/dsr stats on mount
+  useEffect(() => {
+    async function load() {
+      const fa = (path: string) => fetch(`/api/sdk/v1/compliance/${path}`, { headers: HEADERS }).then(r => r.ok ? r.json() : null).catch(() => null)
+      const [consent, dsr, siteList] = await Promise.all([
+        fa('einwilligungen/consents/stats'),
+        fa('dsr/stats'),
+        fb('admin/sites'),
+      ])
+      setConsentStats(consent)
+      setDSRStats(dsr)
+      const loadedSites = Array.isArray(siteList) ? siteList : []
+      setSites(loadedSites)
+      // Auto-select first site
+      if (loadedSites.length > 0) {
+        setSelectedSite(loadedSites[0].site_id || loadedSites[0].siteId || '')
+      }
+      setLoading(false)
+    }
+    load()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Load banner stats when selected site changes
+  useEffect(() => {
+    if (!selectedSite) return
+    fb(`admin/stats/${selectedSite}`).then(setBannerStats)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSite])
+
+  const totalConsents = (bannerStats?.total_consents || 0) + (consentStats?.total_consents || 0)
+  const dsrOpen = dsrStats ? (dsrStats.by_status?.intake || 0) + (dsrStats.by_status?.processing || 0) + (dsrStats.by_status?.identity_verification || 0) : 0
+  const dsrOverdue = dsrStats?.overdue || 0
+  const catAcceptance = bannerStats?.category_acceptance || {}
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Consent Management Platform</h1>
+          <p className="text-gray-500 mt-1">Überblick über Einwilligungen, Betroffenenrechte und Vendor-Compliance</p>
+        </div>
+        <div className="flex items-center gap-3">
+          {sites.length > 0 && (
+            <select
+              value={selectedSite}
+              onChange={e => setSelectedSite(e.target.value)}
+              className="px-3 py-2 border border-gray-300 rounded-lg text-sm bg-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+            >
+              {sites.map((s: any) => (
+                <option key={s.site_id || s.siteId} value={s.site_id || s.siteId}>
+                  {s.site_name || s.siteName || s.site_id || s.siteId}
+                </option>
+              ))}
+            </select>
+          )}
+          <Link href="/sdk/cookie-banner/preview"
+            className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors">
+            Banner testen
+          </Link>
+        </div>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <KPICard label="Consents gesamt" value={loading ? '...' : totalConsents} icon="shield" trend={null} />
+        <KPICard label="Aktive Einwilligungen" value={loading ? '...' : consentStats?.active_consents ?? 0} icon="check" trend={consentStats?.conversion_rate ? `${consentStats.conversion_rate.toFixed(0)}% Rate` : null} />
+        <KPICard label="Offene DSR-Anfragen" value={loading ? '...' : dsrOpen} icon="user" trend={dsrOverdue > 0 ? `${dsrOverdue} ueberfaellig` : null} trendColor={dsrOverdue > 0 ? 'red' : 'green'} />
+        <KPICard label="Konfigurierte Sites" value={loading ? '...' : sites.length} icon="globe" trend={null} />
+      </div>
+
+      {/* Category Acceptance + DSR Breakdown */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Cookie Category Acceptance */}
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <h3 className="font-semibold text-gray-900 mb-4">Cookie-Kategorie Akzeptanz</h3>
+          {Object.keys(catAcceptance).length > 0 ? (
+            <div className="space-y-3">
+              {Object.entries(catAcceptance).map(([cat, data]) => (
+                <div key={cat} className="flex items-center gap-4">
+                  <span className="text-sm text-gray-600 w-24 capitalize">{cat}</span>
+                  <div className="flex-1 h-6 bg-gray-100 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full transition-all ${
+                        cat === 'necessary' ? 'bg-gray-400' : cat === 'marketing' ? 'bg-rose-500' : cat === 'statistics' ? 'bg-blue-500' : 'bg-green-500'
+                      }`}
+                      style={{ width: `${data.rate}%` }}
+                    />
+                  </div>
+                  <span className="text-sm font-medium text-gray-700 w-16 text-right">{data.rate}%</span>
+                  <span className="text-xs text-gray-400 w-12 text-right">{data.count}x</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-400">
+              <p className="text-sm">Noch keine Consent-Daten vorhanden</p>
+              <Link href="/sdk/cookie-banner/preview" className="text-purple-600 text-sm underline mt-2 inline-block">
+                Jetzt Banner testen
+              </Link>
+            </div>
+          )}
+        </div>
+
+        {/* DSR Breakdown */}
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-semibold text-gray-900">Betroffenenrechte (DSR)</h3>
+            <Link href="/sdk/dsr" className="text-xs text-purple-600 hover:underline">Alle anzeigen</Link>
+          </div>
+          {dsrStats && dsrStats.total > 0 ? (
+            <div className="space-y-4">
+              <div className="grid grid-cols-3 gap-3">
+                <MiniStat label="Gesamt" value={dsrStats.total} />
+                <MiniStat label="Abgeschlossen" value={dsrStats.by_status?.completed || 0} color="green" />
+                <MiniStat label="Ueberfaellig" value={dsrOverdue} color={dsrOverdue > 0 ? 'red' : 'gray'} />
+              </div>
+              <div className="border-t border-gray-100 pt-3">
+                <div className="text-xs text-gray-500 mb-2">Nach Typ</div>
+                <div className="grid grid-cols-2 gap-2">
+                  {Object.entries(dsrStats.by_type || {}).filter(([, v]) => v > 0).map(([type, count]) => (
+                    <div key={type} className="flex items-center justify-between text-sm">
+                      <span className="text-gray-600">{DSR_TYPE_LABELS[type] || type}</span>
+                      <span className="font-medium text-gray-800">{count}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {dsrStats.average_processing_days > 0 && (
+                <div className="border-t border-gray-100 pt-3 flex items-center justify-between text-sm">
+                  <span className="text-gray-500">Durchschnittl. Bearbeitungszeit</span>
+                  <span className="font-medium text-gray-800">{dsrStats.average_processing_days.toFixed(1)} Tage</span>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-400 text-sm">
+              Keine DSR-Anfragen vorhanden
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Compliance Status */}
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h3 className="font-semibold text-gray-900 mb-1">Compliance-Status</h3>
+        <p className="text-xs text-gray-500 mb-4">Pruefung der wichtigsten DSGVO-Anforderungen</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          <ComplianceCheck label="Cookie-Banner konfiguriert" ok={sites.length > 0} href="/sdk/cookie-banner" />
+          <ComplianceCheck label="Datenschutzerklaerung erstellt" ok={false} href="/sdk/einwilligungen/privacy-policy" />
+          <ComplianceCheck label="Impressum verlinkt" ok={false} href="/sdk/document-generator" />
+          <ComplianceCheck label="Consent-Nachweis (Art. 7)" ok={totalConsents > 0} href="/sdk/einwilligungen" />
+          <ComplianceCheck label="DSR-Prozess eingerichtet" ok={dsrStats?.total !== undefined} href="/sdk/dsr" />
+          <ComplianceCheck label="Loeschfristen definiert" ok={false} href="/sdk/loeschfristen" />
+          <ComplianceCheck label="Vendor-AVV vorhanden" ok={false} href="/sdk/vendor-compliance" />
+          <ComplianceCheck label="E-Mail-Templates aktiv" ok={false} href="/sdk/email-templates" />
+          <ComplianceCheck label="EWR-Only Modus verfuegbar" ok={true} href="/sdk/cookie-banner" />
+        </div>
+      </div>
+
+      {/* Module Grid */}
+      <div>
+        <h3 className="font-semibold text-gray-900 mb-3">CMP Module</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+          {MODULES.map(m => (
+            <Link key={m.href} href={m.href}
+              className="group bg-white border border-gray-200 rounded-xl p-4 hover:border-purple-300 hover:shadow-md transition-all">
+              <div className={`w-10 h-10 rounded-lg ${COLOR_MAP[m.color]} flex items-center justify-center mb-3`}>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  {ICON_MAP[m.icon]}
+                </svg>
+              </div>
+              <div className="font-medium text-gray-900 group-hover:text-purple-700 text-sm">{m.label}</div>
+              <div className="text-xs text-gray-500 mt-0.5">{m.desc}</div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const DSR_TYPE_LABELS: Record<string, string> = {
+  access: 'Auskunft (Art. 15)', rectification: 'Berichtigung (Art. 16)',
+  erasure: 'Loeschung (Art. 17)', restriction: 'Einschraenkung (Art. 18)',
+  portability: 'Portabilitaet (Art. 20)', objection: 'Widerspruch (Art. 21)',
+}
+
+function KPICard({ label, value, icon, trend, trendColor }: {
+  label: string; value: number | string; icon: string; trend: string | null; trendColor?: string
+}) {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-4">
+      <div className="text-xs text-gray-500">{label}</div>
+      <div className="text-2xl font-bold text-gray-900 mt-1">{value}</div>
+      {trend && (
+        <div className={`text-xs mt-1 ${trendColor === 'red' ? 'text-red-600' : trendColor === 'green' ? 'text-green-600' : 'text-gray-500'}`}>
+          {trend}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function MiniStat({ label, value, color }: { label: string; value: number; color?: string }) {
+  const c = color === 'red' ? 'text-red-600' : color === 'green' ? 'text-green-600' : 'text-gray-900'
+  return (
+    <div className="text-center">
+      <div className={`text-xl font-bold ${c}`}>{value}</div>
+      <div className="text-xs text-gray-500">{label}</div>
+    </div>
+  )
+}
+
+function ComplianceCheck({ label, ok, href }: { label: string; ok: boolean; href: string }) {
+  return (
+    <Link href={href} className="flex items-center gap-3 p-3 rounded-lg border border-gray-100 hover:border-purple-200 hover:bg-purple-50/30 transition-all">
+      {ok ? (
+        <svg className="w-5 h-5 text-green-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      ) : (
+        <svg className="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      )}
+      <span className="text-sm text-gray-700">{label}</span>
+    </Link>
+  )
+}
@@ -0,0 +1,156 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useParams } from 'next/navigation'
+import Link from 'next/link'
+import { ZoneBadge } from '@/components/sdk/compliance-optimizer/ZoneBadge'
+import { DimensionZoneTable } from '@/components/sdk/compliance-optimizer/DimensionZoneTable'
+import { ConfigComparison } from '@/components/sdk/compliance-optimizer/ConfigComparison'
+import { OptimizationScoreCard } from '@/components/sdk/compliance-optimizer/OptimizationScoreCard'
+
+export default function OptimizationDetailPage() {
+  const params = useParams()
+  const id = params?.id as string
+  const [data, setData] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [activeVariant, setActiveVariant] = useState(0)
+
+  useEffect(() => {
+    if (!id) return
+    fetch(`/api/sdk/v1/maximizer/optimizations/${id}`)
+      .then((r) => r.ok ? r.json() : null)
+      .then(setData)
+      .finally(() => setLoading(false))
+  }, [id])
+
+  if (loading) return <div className="max-w-6xl mx-auto p-6 text-gray-500">Laden...</div>
+  if (!data) return <div className="max-w-6xl mx-auto p-6 text-red-600">Optimierung nicht gefunden.</div>
+
+  const maxSafe = data.max_safe_config
+  const variants = data.variants || []
+  const zones = data.zone_map || {}
+  const controls = data.original_evaluation?.required_controls || []
+  const patterns = data.original_evaluation?.required_patterns || []
+  const triggered = data.original_evaluation?.triggered_rules || []
+
+  return (
+    <div className="max-w-6xl mx-auto p-6 space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <Link href="/sdk/compliance-optimizer" className="text-sm text-blue-600 hover:underline">← Zurueck</Link>
+          <h1 className="text-2xl font-bold text-gray-900 mt-1">{data.title || 'Optimierung'}</h1>
+          <p className="text-sm text-gray-500">{new Date(data.created_at).toLocaleString('de-DE')} — v{data.constraint_version}</p>
+          {data.assessment_id && (
+            <Link href={`/sdk/use-cases/${data.assessment_id}`} className="text-sm text-purple-600 hover:underline">
+              Basierend auf Assessment
+            </Link>
+          )}
+        </div>
+        <ZoneBadge zone={data.is_compliant ? 'SAFE' : 'FORBIDDEN'} />
+      </div>
+
+      {/* 3-Zone Summary */}
+      <div className="bg-white border border-gray-200 rounded-lg p-4">
+        <h2 className="text-lg font-semibold text-gray-800 mb-3">3-Zonen-Analyse</h2>
+        <DimensionZoneTable zoneMap={zones} />
+      </div>
+
+      {/* Optimization Result */}
+      {maxSafe && (
+        <div className="bg-white border border-gray-200 rounded-lg p-4">
+          <h2 className="text-lg font-semibold text-gray-800 mb-3">Optimierte Konfiguration</h2>
+          <OptimizationScoreCard
+            safetyScore={maxSafe.safety_score}
+            utilityScore={maxSafe.utility_score}
+            compositeScore={maxSafe.composite_score}
+            deltaCount={maxSafe.delta_count}
+          />
+          <div className="mt-4">
+            <ConfigComparison deltas={maxSafe.deltas || []} />
+          </div>
+          {maxSafe.rationale && (
+            <p className="mt-3 text-sm text-gray-600 italic">{maxSafe.rationale}</p>
+          )}
+        </div>
+      )}
+
+      {/* Alternative Variants */}
+      {variants.length > 1 && (
+        <div className="bg-white border border-gray-200 rounded-lg p-4">
+          <h2 className="text-lg font-semibold text-gray-800 mb-3">Alternative Varianten ({variants.length})</h2>
+          <div className="flex gap-2 mb-3">
+            {variants.map((v: any, i: number) => (
+              <button key={i} onClick={() => setActiveVariant(i)}
+                className={`px-3 py-1 text-sm rounded ${i === activeVariant ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}>
+                Variante {i + 1}
+              </button>
+            ))}
+          </div>
+          {variants[activeVariant] && (
+            <div>
+              <div className="flex items-center gap-4 mb-2 text-sm text-gray-600">
+                <span>Sicherheit: {variants[activeVariant].safety_score}</span>
+                <span>Nutzen: {variants[activeVariant].utility_score}</span>
+                <span>Gesamt: {Math.round(variants[activeVariant].composite_score)}</span>
+              </div>
+              <ConfigComparison deltas={variants[activeVariant].deltas || []} />
+              {variants[activeVariant].rationale && (
+                <p className="mt-2 text-sm text-gray-500 italic">{variants[activeVariant].rationale}</p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Required Controls & Patterns */}
+      {(controls.length > 0 || patterns.length > 0) && (
+        <div className="bg-white border border-gray-200 rounded-lg p-4">
+          <h2 className="text-lg font-semibold text-gray-800 mb-3">Erforderliche Massnahmen</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {controls.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-gray-700 mb-2">Controls</h4>
+                <ul className="space-y-1">
+                  {controls.map((c: string, i: number) => (
+                    <li key={i} className="text-sm text-gray-600 flex items-center gap-2">
+                      <span className="w-1.5 h-1.5 bg-blue-500 rounded-full" />{c}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {patterns.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-gray-700 mb-2">Architektur-Patterns</h4>
+                <ul className="space-y-1">
+                  {patterns.map((p: string, i: number) => (
+                    <li key={i} className="text-sm text-gray-600 flex items-center gap-2">
+                      <span className="w-1.5 h-1.5 bg-purple-500 rounded-full" />{p}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Triggered Rules (Audit Trail) */}
+      {triggered.length > 0 && (
+        <div className="bg-white border border-gray-200 rounded-lg p-4">
+          <h2 className="text-lg font-semibold text-gray-800 mb-3">Ausgeloeste Regeln ({triggered.length})</h2>
+          <div className="space-y-2">
+            {triggered.map((r: any, i: number) => (
+              <div key={i} className="flex items-start gap-3 text-sm border-b border-gray-100 pb-2">
+                <span className="font-mono text-xs text-gray-400 min-w-[120px]">{r.rule_id}</span>
+                <span className="text-gray-700">{r.title}</span>
+                <span className="text-gray-400 ml-auto text-xs">{r.article_ref}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,195 @@
+'use client'
+
+import React, { useState, useEffect, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { ZoneBadge } from '@/components/sdk/compliance-optimizer/ZoneBadge'
+
+interface DimensionField {
+  key: string
+  label: string
+  options: { value: string; label: string }[]
+  type?: 'select' | 'toggle'
+}
+
+const DIMENSIONS: DimensionField[] = [
+  { key: 'automation_level', label: 'Automatisierungsgrad', options: [
+    { value: 'none', label: 'Keine' }, { value: 'assistive', label: 'Assistierend' },
+    { value: 'partial', label: 'Teilautomatisiert' }, { value: 'full', label: 'Vollautomatisiert' },
+  ]},
+  { key: 'decision_binding', label: 'Entscheidungsbindung', options: [
+    { value: 'non_binding', label: 'Unverbindlich' }, { value: 'human_review_required', label: 'Mensch entscheidet' },
+    { value: 'fully_binding', label: 'Vollstaendig bindend' },
+  ]},
+  { key: 'decision_impact', label: 'Entscheidungswirkung', options: [
+    { value: 'low', label: 'Niedrig' }, { value: 'medium', label: 'Mittel' }, { value: 'high', label: 'Hoch' },
+  ]},
+  { key: 'domain', label: 'Branche', options: [
+    { value: 'hr', label: 'HR / Personal' }, { value: 'finance', label: 'Finanzen' },
+    { value: 'education', label: 'Bildung' }, { value: 'health', label: 'Gesundheit' },
+    { value: 'marketing', label: 'Marketing' }, { value: 'general', label: 'Allgemein' },
+  ]},
+  { key: 'data_type', label: 'Datensensitivitaet', options: [
+    { value: 'non_personal', label: 'Keine personenbezogenen' }, { value: 'personal', label: 'Personenbezogen' },
+    { value: 'sensitive', label: 'Besondere Kategorien (Art. 9)' }, { value: 'biometric', label: 'Biometrisch' },
+  ]},
+  { key: 'human_in_loop', label: 'Menschliche Kontrolle', options: [
+    { value: 'required', label: 'Erforderlich' }, { value: 'optional', label: 'Optional' }, { value: 'none', label: 'Keine' },
+  ]},
+  { key: 'explainability', label: 'Erklaerbarkeit', options: [
+    { value: 'high', label: 'Hoch' }, { value: 'basic', label: 'Basis' }, { value: 'none', label: 'Keine' },
+  ]},
+  { key: 'risk_classification', label: 'Risikoklasse (AI Act)', options: [
+    { value: 'minimal', label: 'Minimal' }, { value: 'limited', label: 'Begrenzt' },
+    { value: 'high', label: 'Hoch' }, { value: 'prohibited', label: 'Verboten' },
+  ]},
+  { key: 'legal_basis', label: 'Rechtsgrundlage (DSGVO)', options: [
+    { value: 'consent', label: 'Einwilligung' }, { value: 'contract', label: 'Vertrag' },
+    { value: 'legal_obligation', label: 'Rechtl. Verpflichtung' },
+    { value: 'legitimate_interest', label: 'Berechtigtes Interesse' },
+    { value: 'public_interest', label: 'Oeffentl. Interesse' },
+  ]},
+  { key: 'model_type', label: 'Modelltyp', options: [
+    { value: 'rule_based', label: 'Regelbasiert' }, { value: 'statistical', label: 'Statistisch / ML' },
+    { value: 'blackbox_llm', label: 'Blackbox / LLM' },
+  ]},
+  { key: 'deployment_scope', label: 'Einsatzbereich', options: [
+    { value: 'internal', label: 'Intern' }, { value: 'external', label: 'Extern (Kunden)' },
+    { value: 'public', label: 'Oeffentlich' },
+  ]},
+]
+
+const TOGGLE_DIMENSIONS = [
+  { key: 'transparency_required', label: 'Transparenzpflicht' },
+  { key: 'logging_required', label: 'Protokollierungspflicht' },
+]
+
+function NewOptimizationPageInner() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const fromAssessment = searchParams.get('from_assessment')
+  const [autoOptimizing, setAutoOptimizing] = useState(false)
+  const [title, setTitle] = useState('')
+
+  useEffect(() => {
+    if (!fromAssessment) return
+    setAutoOptimizing(true)
+    fetch(`/api/sdk/v1/maximizer/optimize-from-assessment/${fromAssessment}`, { method: 'POST' })
+      .then(r => r.ok ? r.json() : Promise.reject('failed'))
+      .then(data => router.push(`/sdk/compliance-optimizer/${data.id}`))
+      .catch(() => setAutoOptimizing(false))
+  }, [fromAssessment, router])
+  const [config, setConfig] = useState<Record<string, string>>({
+    automation_level: 'assistive', decision_binding: 'non_binding', decision_impact: 'low',
+    domain: 'general', data_type: 'non_personal', human_in_loop: 'required',
+    explainability: 'basic', risk_classification: 'minimal', legal_basis: 'contract',
+    transparency_required: 'false', logging_required: 'false',
+    model_type: 'rule_based', deployment_scope: 'internal',
+  })
+  const [preview, setPreview] = useState<Record<string, { zone: string }> | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+
+  async function handlePreview() {
+    try {
+      const body = { ...config, transparency_required: config.transparency_required === 'true', logging_required: config.logging_required === 'true' }
+      const res = await fetch('/api/sdk/v1/maximizer/evaluate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+      if (res.ok) {
+        const data = await res.json()
+        setPreview(data.zone_map || {})
+      }
+    } catch { /* silent */ }
+  }
+
+  async function handleSubmit() {
+    setSubmitting(true)
+    try {
+      const body = {
+        config: { ...config, transparency_required: config.transparency_required === 'true', logging_required: config.logging_required === 'true' },
+        title: title || 'Optimierung ' + new Date().toLocaleDateString('de-DE'),
+      }
+      const res = await fetch('/api/sdk/v1/maximizer/optimize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+      if (res.ok) {
+        const data = await res.json()
+        router.push(`/sdk/compliance-optimizer/${data.id}`)
+      }
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (autoOptimizing) {
+    return (
+      <div className="max-w-4xl mx-auto p-6 text-center py-24">
+        <div className="animate-pulse">
+          <span className="text-4xl">📊</span>
+          <h2 className="text-xl font-bold text-gray-900 mt-4 mb-2">Optimierung laeuft...</h2>
+          <p className="text-sm text-gray-500">Assessment wird analysiert und optimale Konfiguration berechnet.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      <h1 className="text-2xl font-bold text-gray-900 mb-1">Neue Optimierung</h1>
+      <p className="text-sm text-gray-500 mb-6">Konfigurieren Sie Ihren KI-Use-Case und finden Sie den maximalen regulatorischen Spielraum.</p>
+
+      <div className="mb-4">
+        <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
+        <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="z.B. HR Bewerber-Ranking"
+          className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        {DIMENSIONS.map((dim) => (
+          <div key={dim.key}>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {dim.label}
+              {preview && preview[dim.key] && (
+                <span className="ml-2"><ZoneBadge zone={preview[dim.key].zone as 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'} /></span>
+              )}
+            </label>
+            <select
+              value={config[dim.key]}
+              onChange={(e) => { setConfig({ ...config, [dim.key]: e.target.value }); setPreview(null) }}
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm bg-white"
+            >
+              {dim.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+            </select>
+          </div>
+        ))}
+
+        {TOGGLE_DIMENSIONS.map((dim) => (
+          <div key={dim.key} className="flex items-center gap-3">
+            <input type="checkbox" checked={config[dim.key] === 'true'}
+              onChange={(e) => { setConfig({ ...config, [dim.key]: String(e.target.checked) }); setPreview(null) }}
+              className="h-4 w-4 rounded border-gray-300 text-blue-600" />
+            <label className="text-sm font-medium text-gray-700">
+              {dim.label}
+              {preview && preview[dim.key] && (
+                <span className="ml-2"><ZoneBadge zone={preview[dim.key].zone as 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'} /></span>
+              )}
+            </label>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex gap-3">
+        <button onClick={handlePreview} className="border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 text-sm">
+          Vorschau (3-Zonen-Check)
+        </button>
+        <button onClick={handleSubmit} disabled={submitting}
+          className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
+          {submitting ? 'Optimiere...' : 'Optimieren'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default function NewOptimizationPage() {
+  return (
+    <Suspense fallback={<div className="max-w-4xl mx-auto p-6 text-gray-500">Laden...</div>}>
+      <NewOptimizationPageInner />
+    </Suspense>
+  )
+}
@@ -0,0 +1,135 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { ZoneBadge } from '@/components/sdk/compliance-optimizer/ZoneBadge'
+
+interface OptimizationSummary {
+  id: string
+  title: string
+  is_compliant: boolean
+  constraint_version: string
+  created_at: string
+  zone_map: Record<string, { zone: 'FORBIDDEN' | 'RESTRICTED' | 'SAFE' }>
+  max_safe_config?: { safety_score: number; utility_score: number }
+  assessment_id?: string
+}
+
+function countZones(zoneMap: Record<string, { zone: string }>) {
+  let forbidden = 0, restricted = 0, safe = 0
+  for (const v of Object.values(zoneMap || {})) {
+    if (v.zone === 'FORBIDDEN') forbidden++
+    else if (v.zone === 'RESTRICTED') restricted++
+    else safe++
+  }
+  return { forbidden, restricted, safe }
+}
+
+export default function ComplianceOptimizerPage() {
+  const [optimizations, setOptimizations] = useState<OptimizationSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+
+  useEffect(() => {
+    fetchOptimizations()
+  }, [])
+
+  async function fetchOptimizations() {
+    try {
+      setLoading(true)
+      const res = await fetch('/api/sdk/v1/maximizer/optimizations?limit=20')
+      if (res.ok) {
+        const data = await res.json()
+        setOptimizations(data.optimizations || [])
+        setTotal(data.total || 0)
+      }
+    } catch {
+      // silent
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Compliance Optimizer</h1>
+          <p className="text-sm text-gray-500 mt-1">
+            Regulatorischen Spielraum maximieren — KI-Use-Cases optimal konfigurieren
+          </p>
+        </div>
+        <Link
+          href="/sdk/compliance-optimizer/new"
+          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 text-sm font-medium"
+        >
+          Neue Optimierung
+        </Link>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12 text-gray-500">Laden...</div>
+      ) : optimizations.length === 0 ? (
+        <div className="text-center py-12 bg-gray-50 rounded-lg border border-gray-200">
+          <p className="text-gray-600 mb-2">Noch keine Optimierungen durchgefuehrt.</p>
+          <Link href="/sdk/compliance-optimizer/new" className="text-blue-600 hover:underline text-sm">
+            Erste Optimierung starten
+          </Link>
+        </div>
+      ) : (
+        <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Titel</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Zonen</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Quelle</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Datum</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {optimizations.map((o) => {
+                const zones = countZones(o.zone_map)
+                return (
+                  <tr key={o.id} className="hover:bg-gray-50">
+                    <td className="px-4 py-3">
+                      <Link href={`/sdk/compliance-optimizer/${o.id}`} className="text-blue-600 hover:underline font-medium text-sm">
+                        {o.title || 'Ohne Titel'}
+                      </Link>
+                    </td>
+                    <td className="px-4 py-3">
+                      <ZoneBadge zone={o.is_compliant ? 'SAFE' : 'FORBIDDEN'} />
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-600">
+                      {zones.forbidden > 0 && <span className="text-red-600 mr-2">{zones.forbidden} verboten</span>}
+                      {zones.restricted > 0 && <span className="text-yellow-600 mr-2">{zones.restricted} eingeschraenkt</span>}
+                      <span className="text-green-600">{zones.safe} erlaubt</span>
+                    </td>
+                    <td className="px-4 py-3 text-sm">
+                      {o.assessment_id ? (
+                        <Link href={`/sdk/use-cases/${o.assessment_id}`} className="text-purple-600 hover:underline text-xs">
+                          Assessment
+                        </Link>
+                      ) : (
+                        <span className="text-gray-400 text-xs">Manuell</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-500">
+                      {new Date(o.created_at).toLocaleDateString('de-DE')}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+          {total > 20 && (
+            <div className="px-4 py-3 bg-gray-50 text-sm text-gray-500">
+              {total} Optimierungen insgesamt
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,90 @@
+'use client'
+
+import Link from 'next/link'
+
+interface DeadlineConfig {
+  gracePeriodDays: number
+  reminderDays: number[]
+  suspendOnExpiry: boolean
+}
+
+export function DeadlineTab() {
+  // Phase 4: Deadline management — backend service pending (Core integration)
+  const config: DeadlineConfig = {
+    gracePeriodDays: 30,
+    reminderDays: [28, 21, 14, 7],
+    suspendOnExpiry: true,
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-slate-900">Fristen & Erinnerungen</h2>
+        <span className="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs">In Vorbereitung</span>
+      </div>
+
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
+        Das Fristen-System wird automatisch Erinnerungen an Nutzer senden, die neue Pflichtdokumente
+        noch nicht akzeptiert haben. Nach Ablauf der Frist wird der Account gesperrt bis die Zustimmung erfolgt.
+        Die E-Mail-Zustellung wird ueber den Core-Service in Production bereitgestellt.
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="border border-slate-200 rounded-lg p-4">
+          <h3 className="text-sm font-medium text-slate-700">Nachfrist</h3>
+          <p className="text-2xl font-bold text-slate-900 mt-1">{config.gracePeriodDays} Tage</p>
+          <p className="text-xs text-slate-500 mt-1">Nach Veroeffentlichung eines Pflichtdokuments</p>
+        </div>
+        <div className="border border-slate-200 rounded-lg p-4">
+          <h3 className="text-sm font-medium text-slate-700">Erinnerungen</h3>
+          <p className="text-2xl font-bold text-slate-900 mt-1">{config.reminderDays.length}x</p>
+          <p className="text-xs text-slate-500 mt-1">
+            Tag {config.reminderDays.join(', ')} nach Veroeffentlichung
+          </p>
+        </div>
+        <div className="border border-slate-200 rounded-lg p-4">
+          <h3 className="text-sm font-medium text-slate-700">Auto-Sperrung</h3>
+          <p className="text-2xl font-bold text-slate-900 mt-1">{config.suspendOnExpiry ? 'Aktiv' : 'Inaktiv'}</p>
+          <p className="text-xs text-slate-500 mt-1">Account wird nach Fristablauf gesperrt</p>
+        </div>
+      </div>
+
+      <div className="border border-slate-200 rounded-lg p-4">
+        <h3 className="text-sm font-medium text-slate-700 mb-3">Erinnerungs-Timeline</h3>
+        <div className="flex items-center gap-1">
+          {Array.from({ length: 30 }, (_, i) => {
+            const day = 30 - i
+            const isReminder = config.reminderDays.includes(day)
+            const isDeadline = day === 0
+            return (
+              <div key={i} className="flex-1 relative group">
+                <div className={`h-2 rounded-sm ${
+                  isDeadline ? 'bg-red-500' : isReminder ? 'bg-yellow-400' : 'bg-slate-100'
+                }`} />
+                {isReminder && (
+                  <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[10px] text-yellow-600 whitespace-nowrap">
+                    Tag {day}
+                  </span>
+                )}
+              </div>
+            )
+          })}
+          <div className="flex-none w-3 h-2 bg-red-500 rounded-sm" title="Sperrung" />
+        </div>
+        <div className="flex justify-between mt-1 text-[10px] text-slate-400">
+          <span>Veroeffentlichung</span>
+          <span>Sperrung</span>
+        </div>
+      </div>
+
+      <div className="flex gap-3">
+        <Link href="/sdk/email-templates" className="text-sm text-purple-600 hover:underline">
+          E-Mail-Templates konfigurieren →
+        </Link>
+        <Link href="/sdk/dsr" className="text-sm text-purple-600 hover:underline">
+          Betroffenenrechte verwalten →
+        </Link>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,72 @@
+'use client'
+
+const INTEGRATIONS = [
+  {
+    id: 'matrix',
+    name: 'Matrix Kommunikation',
+    description: 'Sichere, verschluesselte Kommunikation mit Betroffenen ueber Matrix-Protokoll. Wird in Production ueber den Core Communication Service bereitgestellt.',
+    status: 'planned',
+    icon: '💬',
+  },
+  {
+    id: 'jitsi',
+    name: 'Jitsi Video-Meetings',
+    description: 'DSGVO-konforme Video-Konsultationen mit Betroffenen fuer komplexe Datenschutzanfragen. Wird ueber den Core Jitsi Service bereitgestellt.',
+    status: 'planned',
+    icon: '📹',
+  },
+  {
+    id: 'oauth',
+    name: 'OAuth 2.0 Client-Verwaltung',
+    description: 'Verwaltung von OAuth-Clients fuer API-Zugriff auf Consent-Endpunkte. Authorization Code Flow mit PKCE-Support.',
+    status: 'planned',
+    icon: '🔑',
+  },
+  {
+    id: '2fa',
+    name: 'Zwei-Faktor-Authentifizierung',
+    description: 'TOTP-basierte Zwei-Faktor-Authentifizierung fuer Admin-Zugang. Recovery-Codes fuer Notfallzugriff.',
+    status: 'planned',
+    icon: '🛡️',
+  },
+  {
+    id: 'notifications',
+    name: 'Benachrichtigungssystem',
+    description: 'In-App und E-Mail Benachrichtigungen fuer Consent-Aenderungen, DSR-Fristen und Dokument-Updates. Praeferenz-Verwaltung pro Nutzer.',
+    status: 'planned',
+    icon: '🔔',
+  },
+]
+
+export function IntegrationStubs() {
+  return (
+    <div className="p-6 space-y-4">
+      <div className="flex items-center justify-between mb-2">
+        <h2 className="text-lg font-semibold text-slate-900">Integrationen</h2>
+        <span className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">Production-Anbindung</span>
+      </div>
+
+      <p className="text-sm text-slate-500">
+        Diese Dienste werden in Production ueber die Core-Services bereitgestellt und sind
+        im SDK vorbereitet.
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {INTEGRATIONS.map(integration => (
+          <div key={integration.id} className="border border-slate-200 rounded-lg p-4 bg-slate-50">
+            <div className="flex items-start gap-3">
+              <span className="text-2xl">{integration.icon}</span>
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <h3 className="text-sm font-medium text-slate-800">{integration.name}</h3>
+                  <span className="px-1.5 py-0.5 bg-yellow-100 text-yellow-700 rounded text-[10px]">Geplant</span>
+                </div>
+                <p className="text-xs text-slate-500 mt-1">{integration.description}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -2,18 +2,28 @@

 import type { Document, Version } from '../_types'

+const STATUS_STYLES: Record<string, { label: string; color: string }> = {
+  draft: { label: 'Entwurf', color: 'bg-gray-100 text-gray-700' },
+  review: { label: 'Pruefung', color: 'bg-yellow-100 text-yellow-700' },
+  approved: { label: 'Genehmigt', color: 'bg-blue-100 text-blue-700' },
+  published: { label: 'Publiziert', color: 'bg-green-100 text-green-700' },
+  archived: { label: 'Archiviert', color: 'bg-gray-100 text-gray-400' },
+  rejected: { label: 'Abgelehnt', color: 'bg-red-100 text-red-700' },
+}
+
 export function VersionsTab({
-  loading,
-  documents,
-  versions,
-  selectedDocument,
-  setSelectedDocument,
+  loading, documents, versions, selectedDocument, setSelectedDocument,
+  onSubmitReview, onApprove, onReject, onPublish,
 }: {
  loading: boolean
  documents: Document[]
  versions: Version[]
  selectedDocument: string
  setSelectedDocument: (id: string) => void
+  onSubmitReview?: (versionId: string) => void
+  onApprove?: (versionId: string) => void
+  onReject?: (versionId: string, comment: string) => void
+  onPublish?: (versionId: string) => void
 }) {
  return (
    <div className="p-6">
@@ -27,73 +37,69 @@ export function VersionsTab({
          >
            <option value="">Dokument auswaehlen...</option>
            {documents.map((doc) => (
-              <option key={doc.id} value={doc.id}>
-                {doc.name}
-              </option>
+              <option key={doc.id} value={doc.id}>{doc.name}</option>
            ))}
          </select>
        </div>
-        {selectedDocument && (
-          <button className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">
-            + Neue Version
-          </button>
-        )}
      </div>

      {!selectedDocument ? (
-        <div className="text-center py-12 text-slate-500">
-          Bitte waehlen Sie ein Dokument aus
-        </div>
+        <div className="text-center py-12 text-slate-500">Bitte waehlen Sie ein Dokument aus</div>
      ) : loading ? (
        <div className="text-center py-12 text-slate-500">Lade Versionen...</div>
      ) : versions.length === 0 ? (
-        <div className="text-center py-12 text-slate-500">
-          Keine Versionen vorhanden
-        </div>
+        <div className="text-center py-12 text-slate-500">Keine Versionen vorhanden</div>
      ) : (
        <div className="space-y-4">
-          {versions.map((version) => (
-            <div
-              key={version.id}
-              className="border border-slate-200 rounded-lg p-4 hover:border-purple-300 transition-colors"
-            >
-              <div className="flex items-start justify-between">
-                <div>
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="font-semibold text-slate-900">v{version.version}</span>
-                    <span className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-xs">
-                      {version.language.toUpperCase()}
-                    </span>
-                    <span
-                      className={`px-2 py-0.5 rounded text-xs ${
-                        version.status === 'published'
-                          ? 'bg-green-100 text-green-700'
-                          : version.status === 'draft'
-                          ? 'bg-yellow-100 text-yellow-700'
-                          : 'bg-slate-100 text-slate-600'
-                      }`}
-                    >
-                      {version.status}
-                    </span>
+          {versions.map((version) => {
+            const style = STATUS_STYLES[version.status] || STATUS_STYLES.draft
+            return (
+              <div key={version.id} className="border border-slate-200 rounded-lg p-4 hover:border-purple-300 transition-colors">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="font-semibold text-slate-900">v{version.version}</span>
+                      <span className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-xs">
+                        {version.language.toUpperCase()}
+                      </span>
+                      <span className={`px-2 py-0.5 rounded text-xs ${style.color}`}>{style.label}</span>
+                    </div>
+                    <h3 className="text-slate-700">{version.title}</h3>
+                    <p className="text-sm text-slate-500 mt-1">
+                      Erstellt: {new Date(version.created_at).toLocaleDateString('de-DE')}
+                      {version.published_at && ` | Publiziert: ${new Date(version.published_at).toLocaleDateString('de-DE')}`}
+                    </p>
+                  </div>
+                  <div className="flex gap-2 flex-wrap justify-end">
+                    {version.status === 'draft' && onSubmitReview && (
+                      <button onClick={() => onSubmitReview(version.id)}
+                        className="px-3 py-1.5 text-sm text-white bg-yellow-500 hover:bg-yellow-600 rounded-lg">
+                        Zur Pruefung
+                      </button>
+                    )}
+                    {version.status === 'review' && onApprove && (
+                      <button onClick={() => onApprove(version.id)}
+                        className="px-3 py-1.5 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg">
+                        Genehmigen
+                      </button>
+                    )}
+                    {version.status === 'review' && onReject && (
+                      <button onClick={() => { const c = prompt('Ablehnungsgrund:'); if (c) onReject(version.id, c) }}
+                        className="px-3 py-1.5 text-sm text-white bg-red-500 hover:bg-red-600 rounded-lg">
+                        Ablehnen
+                      </button>
+                    )}
+                    {version.status === 'approved' && onPublish && (
+                      <button onClick={() => onPublish(version.id)}
+                        className="px-3 py-1.5 text-sm text-white bg-green-600 hover:bg-green-700 rounded-lg">
+                        Publizieren
+                      </button>
+                    )}
                  </div>
-                  <h3 className="text-slate-700">{version.title}</h3>
-                  <p className="text-sm text-slate-500 mt-1">
-                    Erstellt: {new Date(version.created_at).toLocaleDateString('de-DE')}
-                  </p>
-                </div>
-                <div className="flex gap-2">
-                  <button className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:border-slate-400">
-                    Bearbeiten
-                  </button>
-                  {version.status === 'draft' && (
-                    <button className="px-3 py-1.5 text-sm text-white bg-green-600 hover:bg-green-700 rounded-lg">
-                      Veroeffentlichen
-                    </button>
-                  )}
                </div>
              </div>
-            </div>
-          ))}
+            )
+          })}
        </div>
      )}
    </div>
@@ -277,6 +277,45 @@ export function useConsentData(activeTab: Tab, selectedDocument: string) {
    localStorage.setItem('sdk-email-templates', JSON.stringify(updated))
  }

+  // Document version workflow actions (via admin consent proxy → legal-documents backend)
+  async function submitVersionForReview(versionId: string) {
+    try {
+      const res = await fetch(`${API_BASE}/versions/${versionId}/submit-review`, {
+        method: 'POST', headers: authToken ? { 'Authorization': `Bearer ${authToken}` } : {},
+      })
+      if (res.ok && selectedDocument) await loadVersions(selectedDocument)
+    } catch (err) { console.error('Submit failed:', err) }
+  }
+
+  async function approveVersion(versionId: string) {
+    try {
+      const res = await fetch(`${API_BASE}/versions/${versionId}/approve`, {
+        method: 'POST', headers: authToken ? { 'Authorization': `Bearer ${authToken}` } : {},
+      })
+      if (res.ok && selectedDocument) await loadVersions(selectedDocument)
+    } catch (err) { console.error('Approve failed:', err) }
+  }
+
+  async function rejectVersion(versionId: string, comment: string) {
+    try {
+      const res = await fetch(`${API_BASE}/versions/${versionId}/reject`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...(authToken ? { 'Authorization': `Bearer ${authToken}` } : {}) },
+        body: JSON.stringify({ comment }),
+      })
+      if (res.ok && selectedDocument) await loadVersions(selectedDocument)
+    } catch (err) { console.error('Reject failed:', err) }
+  }
+
+  async function publishVersion(versionId: string) {
+    try {
+      const res = await fetch(`${API_BASE}/versions/${versionId}/publish`, {
+        method: 'POST', headers: authToken ? { 'Authorization': `Bearer ${authToken}` } : {},
+      })
+      if (res.ok) { if (selectedDocument) await loadVersions(selectedDocument); await loadDocuments() }
+    } catch (err) { console.error('Publish failed:', err) }
+  }
+
  return {
    documents, versions, loading, error, setError,
    consentStats, dsrCounts, dsrOverview,
@@ -286,6 +325,7 @@ export function useConsentData(activeTab: Tab, selectedDocument: string) {
    savingTemplateId, savingProcessId,
    saveApiEmailTemplate, saveApiGdprProcess,
    loadApiEmailTemplates,
+    submitVersionForReview, approveVersion, rejectVersion, publishVersion,
    authToken, setAuthToken,
  }
 }
@@ -1,6 +1,6 @@
 export const API_BASE = '/api/admin/consent'

-export type Tab = 'documents' | 'versions' | 'emails' | 'gdpr' | 'stats'
+export type Tab = 'documents' | 'versions' | 'emails' | 'gdpr' | 'stats' | 'deadlines' | 'integrations'

 export interface Document {
  id: string
@@ -25,6 +25,8 @@ import { GdprTab } from './_components/GdprTab'
 import { StatsTab } from './_components/StatsTab'
 import { ConsentTemplateCreateModal } from './_components/ConsentTemplateCreateModal'
 import { EmailTemplateEditModal, EmailTemplatePreviewModal } from './_components/EmailTemplateModals'
+import { DeadlineTab } from './_components/DeadlineTab'
+import { IntegrationStubs } from './_components/IntegrationStubs'

 export default function ConsentManagementPage() {
  const { state } = useSDK()
@@ -45,6 +47,7 @@ export default function ConsentManagementPage() {
    savingTemplateId, savingProcessId,
    saveApiEmailTemplate, saveApiGdprProcess,
    loadApiEmailTemplates,
+    submitVersionForReview, approveVersion, rejectVersion, publishVersion,
    authToken, setAuthToken,
  } = useConsentData(activeTab, selectedDocument)

@@ -54,6 +57,8 @@ export default function ConsentManagementPage() {
    { id: 'emails', label: 'E-Mail Vorlagen' },
    { id: 'gdpr', label: 'DSGVO Prozesse' },
    { id: 'stats', label: 'Statistiken' },
+    { id: 'deadlines', label: 'Fristen' },
+    { id: 'integrations', label: 'Integrationen' },
  ]

  return (
@@ -128,6 +133,10 @@ export default function ConsentManagementPage() {
              versions={versions}
              selectedDocument={selectedDocument}
              setSelectedDocument={setSelectedDocument}
+              onSubmitReview={submitVersionForReview}
+              onApprove={approveVersion}
+              onReject={rejectVersion}
+              onPublish={publishVersion}
            />
          )}

@@ -157,6 +166,10 @@ export default function ConsentManagementPage() {
          )}

          {activeTab === 'stats' && <StatsTab consentStats={consentStats} />}
+
+          {activeTab === 'deadlines' && <DeadlineTab />}
+
+          {activeTab === 'integrations' && <IntegrationStubs />}
        </div>
      </div>

@@ -62,6 +62,14 @@ export default function ControlLibraryPage() {
        initial={{
          ...EMPTY_CONTROL,
          ...state.selectedControl,
+          scope: {
+            platforms: state.selectedControl.scope?.platforms ?? [],
+            components: state.selectedControl.scope?.components ?? [],
+            data_classes: state.selectedControl.scope?.data_classes ?? [],
+          },
+          target_audience: Array.isArray(state.selectedControl.target_audience)
+            ? state.selectedControl.target_audience.join(', ')
+            : state.selectedControl.target_audience,
          risk_score: state.selectedControl.risk_score,
          implementation_effort: state.selectedControl.implementation_effort,
          open_anchors: state.selectedControl.open_anchors.length > 0
@@ -69,7 +77,9 @@ export default function ControlLibraryPage() {
            : [{ framework: '', ref: '', url: '' }],
          requirements: state.selectedControl.requirements.length > 0 ? state.selectedControl.requirements : [''],
          test_procedure: state.selectedControl.test_procedure.length > 0 ? state.selectedControl.test_procedure : [''],
-          evidence: state.selectedControl.evidence.length > 0 ? state.selectedControl.evidence : [{ type: '', description: '' }],
+          evidence: state.selectedControl.evidence.length > 0
+            ? state.selectedControl.evidence.map(e => typeof e === 'string' ? { type: '', description: e } : e)
+            : [{ type: '', description: '' }],
        }}
        onSave={handleUpdate}
        onCancel={() => state.setMode('detail')}
@@ -0,0 +1,354 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import {
+  CATEGORY_VENDORS, countNonEWRVendors, isEWR, isOutsideEWR,
+} from '@/components/sdk/cookie-banner-vendors'
+
+/**
+ * Cookie Banner Live-Vorschau — simulates a real website with the banner.
+ *
+ * Purpose: Test the full consent flow end-to-end:
+ * 1. Visitor lands on simulated website → banner appears
+ * 2. Visitor makes consent choice (accept/reject/custom + EWR toggle)
+ * 3. Consent is recorded via Banner API (POST /banner/consent)
+ * 4. Admin can verify in /sdk/consent-management and /sdk/einwilligungen
+ *
+ * This page runs OUTSIDE the SDK layout to simulate a real website experience.
+ */
+
+// Use Next.js API proxy to avoid SSL cert issues with direct backend calls
+const API_BASE = '/api/sdk/v1/banner'
+const SITE_ID = 'preview-test-site'
+const TENANT_ID = '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+
+interface ConsentRecord {
+  id: string
+  categories: string[]
+  ewrOnly: boolean
+  blockedVendors: string[]
+  timestamp: string
+  device_fingerprint: string
+}
+
+function generateFingerprint(): string {
+  const nav = typeof navigator !== 'undefined' ? navigator : null
+  const seed = [
+    nav?.userAgent || '',
+    nav?.language || '',
+    screen?.width || 0,
+    screen?.height || 0,
+    new Date().getTimezoneOffset(),
+  ].join('|')
+  let hash = 0
+  for (let i = 0; i < seed.length; i++) {
+    hash = ((hash << 5) - hash + seed.charCodeAt(i)) | 0
+  }
+  return `fp-${Math.abs(hash).toString(36)}-${Date.now().toString(36)}`
+}
+
+export default function CookieBannerPreviewPage() {
+  const [consent, setConsent] = useState<ConsentRecord | null>(null)
+  const [showBanner, setShowBanner] = useState(true)
+  const [ewrOnly, setEwrOnly] = useState(false)
+  const [categories, setCategories] = useState({ necessary: true, statistics: false, marketing: false, functional: false })
+  const [saving, setSaving] = useState(false)
+  const [apiResult, setApiResult] = useState<any>(null)
+  const [fingerprint] = useState(() => generateFingerprint())
+
+  // Check for existing consent on this simulated site
+  useEffect(() => {
+    async function check() {
+      try {
+        const res = await fetch(
+          `${API_BASE}/banner/consent?site_id=${SITE_ID}&device_fingerprint=${fingerprint}`,
+          { headers: { 'x-tenant-id': TENANT_ID } },
+        )
+        if (res.ok) {
+          const data = await res.json()
+          if (data.has_consent) {
+            setConsent(data.consent)
+            setShowBanner(false)
+          }
+        }
+      } catch { /* first visit */ }
+    }
+    check()
+  }, [fingerprint])
+
+  const saveConsent = useCallback(async (cats: typeof categories) => {
+    setSaving(true)
+    const blocked: string[] = []
+    if (ewrOnly) {
+      for (const [key, cat] of Object.entries(CATEGORY_VENDORS)) {
+        if (!cats[key as keyof typeof cats]) continue
+        for (const v of cat.vendors) {
+          if (isOutsideEWR(v.country)) blocked.push(v.name)
+        }
+      }
+    }
+    try {
+      const res = await fetch(`${API_BASE}/banner/consent`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'x-tenant-id': TENANT_ID },
+        body: JSON.stringify({
+          site_id: SITE_ID,
+          device_fingerprint: fingerprint,
+          categories: Object.entries(cats).filter(([, v]) => v).map(([k]) => k),
+          vendors: [],
+          consent_string: JSON.stringify({ ewrOnly, blockedVendors: blocked }),
+          user_agent: navigator.userAgent,
+        }),
+      })
+      const data = await res.json()
+      setApiResult(data)
+      setConsent({ ...data, ewrOnly, blockedVendors: blocked, timestamp: new Date().toISOString() })
+      setShowBanner(false)
+    } catch (err: any) {
+      setApiResult({ error: err.message })
+      // Close banner even on error — don't trap the user
+      setShowBanner(false)
+    }
+    setSaving(false)
+  }, [ewrOnly, fingerprint])
+
+  const nonEWRCount = countNonEWRVendors()
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Simulated Website Header */}
+      <header className="bg-slate-800 text-white px-8 py-4">
+        <div className="max-w-6xl mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-blue-500 rounded-lg" />
+            <span className="font-semibold text-lg">MusterShop GmbH</span>
+          </div>
+          <nav className="flex items-center gap-6 text-sm text-slate-300">
+            <span className="hover:text-white cursor-pointer">Produkte</span>
+            <span className="hover:text-white cursor-pointer">Ueber uns</span>
+            <span className="hover:text-white cursor-pointer">Kontakt</span>
+            <span className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm">Warenkorb (2)</span>
+          </nav>
+        </div>
+      </header>
+
+      {/* Simulated Website Content */}
+      <main className="max-w-6xl mx-auto px-8 py-12">
+        <div className="grid grid-cols-3 gap-8">
+          <div className="col-span-2 space-y-6">
+            <h1 className="text-3xl font-bold text-gray-900">Willkommen bei MusterShop</h1>
+            <p className="text-gray-600 leading-relaxed">
+              Dies ist eine simulierte Website um den Cookie-Banner zu testen.
+              Die Consent-Daten werden ueber die echte Banner-API gespeichert und
+              erscheinen in Ihrem CMP unter Consent-Records und Consent-Verwaltung.
+            </p>
+            <div className="grid grid-cols-2 gap-4">
+              {['Premium Paket', 'Standard Paket', 'Starter Paket', 'Enterprise'].map(p => (
+                <div key={p} className="bg-gray-50 border border-gray-200 rounded-xl p-6">
+                  <div className="w-full h-24 bg-gray-200 rounded-lg mb-3" />
+                  <h3 className="font-semibold text-gray-900">{p}</h3>
+                  <p className="text-sm text-gray-500 mt-1">Lorem ipsum dolor sit amet</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* API Debug Panel */}
+          <div className="space-y-4">
+            <div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
+              <h3 className="font-semibold text-slate-800 text-sm flex items-center gap-2">
+                <svg className="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                </svg>
+                API Debug
+              </h3>
+              <div className="mt-3 space-y-2 text-xs">
+                <div className="flex justify-between">
+                  <span className="text-slate-500">Site ID</span>
+                  <code className="text-slate-700">{SITE_ID}</code>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-slate-500">Fingerprint</span>
+                  <code className="text-slate-700 truncate ml-2">{fingerprint}</code>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-slate-500">Consent</span>
+                  <span className={consent ? 'text-green-600 font-medium' : 'text-amber-600'}>
+                    {consent ? 'Gespeichert' : 'Ausstehend'}
+                  </span>
+                </div>
+                {consent && (
+                  <>
+                    <div className="flex justify-between">
+                      <span className="text-slate-500">Kategorien</span>
+                      <span className="text-slate-700">{consent.categories?.join(', ')}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-slate-500">EWR-Only</span>
+                      <span className={consent.ewrOnly ? 'text-blue-600' : 'text-slate-400'}>
+                        {consent.ewrOnly ? 'Ja' : 'Nein'}
+                      </span>
+                    </div>
+                    {consent.blockedVendors?.length > 0 && (
+                      <div>
+                        <span className="text-slate-500">Blockiert:</span>
+                        <div className="mt-1 flex flex-wrap gap-1">
+                          {consent.blockedVendors.map(v => (
+                            <span key={v} className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px]">{v}</span>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+              {consent && (
+                <button
+                  onClick={() => { setConsent(null); setShowBanner(true); setApiResult(null) }}
+                  className="mt-3 w-full text-xs text-purple-600 hover:text-purple-700 underline"
+                >
+                  Consent zuruecksetzen (Banner erneut anzeigen)
+                </button>
+              )}
+            </div>
+
+            {apiResult && (
+              <div className="bg-slate-900 text-green-400 rounded-xl p-4 text-xs font-mono overflow-auto max-h-48">
+                <div className="text-slate-500 mb-1">POST /banner/consent Response:</div>
+                {JSON.stringify(apiResult, null, 2)}
+              </div>
+            )}
+
+            <div className="bg-purple-50 border border-purple-200 rounded-xl p-4 text-xs text-purple-800">
+              <div className="font-semibold mb-1">Pruefen Sie das Ergebnis in:</div>
+              <ul className="space-y-1 mt-2">
+                <li><a href="/sdk/consent-management" className="underline hover:text-purple-600">Consent-Verwaltung</a></li>
+                <li><a href="/sdk/einwilligungen" className="underline hover:text-purple-600">Consent-Records</a></li>
+                <li><a href="/sdk/dsr" className="underline hover:text-purple-600">DSR Portal</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* Simulated Website Footer */}
+      <footer className="bg-slate-100 border-t border-slate-200 px-8 py-6 mt-12">
+        <div className="max-w-6xl mx-auto flex items-center justify-between text-sm text-slate-500">
+          <span>MusterShop GmbH — Simulierte Test-Website</span>
+          <div className="flex items-center gap-4">
+            <button onClick={() => setShowBanner(true)} className="underline hover:text-purple-600">
+              Cookie-Einstellungen
+            </button>
+            <span>Datenschutz</span>
+            <span>Impressum</span>
+          </div>
+        </div>
+      </footer>
+
+      {/* === REAL COOKIE BANNER === */}
+      {showBanner && (
+        <>
+          <div className="fixed inset-0 bg-black/40 z-[9998]" />
+          <div className="fixed bottom-0 left-0 right-0 z-[9999]">
+            <div className="max-w-3xl mx-auto m-4 bg-white rounded-2xl shadow-2xl border border-gray-200 overflow-hidden">
+              {/* Header */}
+              <div className="px-6 pt-5 pb-3">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1">
+                    <h2 className="text-lg font-semibold text-gray-900">Cookie-Einstellungen</h2>
+                    <p className="text-sm text-gray-600 mt-1">
+                      Waehlen Sie, welche Cookie-Kategorien Sie zulassen moechten.
+                    </p>
+                  </div>
+                  {/* EWR Toggle */}
+                  <div className="flex flex-col items-end gap-1 shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className={`text-xs font-medium ${ewrOnly ? 'text-blue-700' : 'text-gray-500'}`}>
+                        Nur EU/EWR
+                      </span>
+                      <button
+                        onClick={() => setEwrOnly(!ewrOnly)}
+                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors cursor-pointer ${
+                          ewrOnly ? 'bg-blue-600' : 'bg-gray-200'
+                        }`}
+                      >
+                        <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                          ewrOnly ? 'translate-x-6' : 'translate-x-1'
+                        }`} />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Categories */}
+              <div className="px-6 pb-3 space-y-1.5 max-h-[40vh] overflow-y-auto border-t border-gray-100 pt-3">
+                {Object.entries(CATEGORY_VENDORS).map(([key, cat]) => {
+                  const checked = key === 'necessary' ? true : categories[key as keyof typeof categories]
+                  const nonEU = cat.vendors.filter(v => isOutsideEWR(v.country))
+                  const blocked = ewrOnly && checked ? nonEU.length : 0
+                  return (
+                    <div key={key} className="flex items-center justify-between gap-3 px-4 py-2.5 border border-gray-100 rounded-lg bg-gray-50/50">
+                      <div>
+                        <div className="text-sm font-medium text-gray-900">
+                          {cat.label}
+                          <span className="ml-2 text-xs font-normal text-gray-400">
+                            {blocked > 0 ? `${cat.vendors.length - blocked} aktiv, ${blocked} blockiert` : `${cat.vendors.length} Verarbeiter`}
+                          </span>
+                        </div>
+                        <div className="text-xs text-gray-500">{cat.description}</div>
+                      </div>
+                      <button
+                        onClick={() => key !== 'necessary' && setCategories(prev => ({ ...prev, [key]: !prev[key as keyof typeof prev] }))}
+                        disabled={key === 'necessary'}
+                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors shrink-0 ${
+                          checked ? (key === 'necessary' ? 'bg-gray-400' : 'bg-purple-600') : 'bg-gray-200'
+                        } ${key === 'necessary' ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}
+                      >
+                        <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform ${
+                          checked ? 'translate-x-6' : 'translate-x-1'
+                        }`} />
+                      </button>
+                    </div>
+                  )
+                })}
+              </div>
+
+              {/* Buttons */}
+              <div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={() => saveConsent({ necessary: true, statistics: true, marketing: true, functional: true })}
+                    disabled={saving}
+                    className="flex-1 px-4 py-2.5 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors text-sm disabled:opacity-50"
+                  >
+                    {saving ? 'Speichern...' : 'Alle akzeptieren'}
+                  </button>
+                  <button
+                    onClick={() => saveConsent(categories)}
+                    disabled={saving}
+                    className="flex-1 px-4 py-2.5 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors text-sm disabled:opacity-50"
+                  >
+                    Auswahl speichern
+                  </button>
+                </div>
+                <div className="flex items-center justify-between mt-3">
+                  <button
+                    onClick={() => saveConsent({ necessary: true, statistics: false, marketing: false, functional: false })}
+                    className="text-xs text-gray-500 hover:text-gray-700 underline"
+                  >
+                    Nur notwendige Cookies
+                  </button>
+                  <div className="flex items-center gap-3 text-xs text-gray-400">
+                    <span>Datenschutzerklaerung</span>
+                    <span>Impressum</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
@@ -18,6 +18,10 @@ export const CATEGORIES: { key: string; label: string; types: string[] | null }[
  { key: 'cloud', label: 'Cloud', types: ['cloud_service_agreement'] },
  { key: 'misc', label: 'Weitere', types: ['community_guidelines', 'copyright_policy', 'data_usage_clause'] },
  { key: 'dsfa', label: 'DSFA', types: ['dsfa'] },
+  { key: 'dsr', label: 'DSR-Prozesse', types: [
+    'dsr_process_art15', 'dsr_process_art16', 'dsr_process_art17',
+    'dsr_process_art18', 'dsr_process_art19', 'dsr_process_art20', 'dsr_process_art21',
+  ]},
 ]

 // =============================================================================
@@ -13,20 +13,21 @@ export function LoadingSpinner() {
  )
 }

+export { PublicFormConfig as SettingsTabContent } from './PublicFormConfig'
+
 export function SettingsTab() {
  return (
-    <div className="bg-white rounded-xl border border-gray-200 p-8 text-center">
-      <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
-        <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-        </svg>
+    <div className="space-y-6">
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <SettingsTabContent />
+      </div>
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h3 className="text-base font-semibold text-slate-900 mb-2">Workflow-Konfiguration</h3>
+        <p className="text-sm text-slate-500">
+          SLA-Fristen, automatische Zuweisungen und Eskalationsregeln
+          werden in Production ueber den Core-Service konfiguriert.
+        </p>
      </div>
-      <h3 className="text-lg font-semibold text-gray-900">Einstellungen</h3>
-      <p className="mt-2 text-gray-500">
-        DSR-Portal-Einstellungen, E-Mail-Vorlagen und Workflow-Konfiguration
-        werden in einer spaeteren Version verfuegbar sein.
-      </p>
    </div>
  )
 }
@@ -0,0 +1,97 @@
+'use client'
+
+import { useState } from 'react'
+
+interface PublicFormSettings {
+  enabled: boolean
+  formUrl: string
+  allowedTypes: string[]
+  requireIdentity: boolean
+  customCss: string
+}
+
+const DSR_TYPES = [
+  { value: 'access', label: 'Auskunft (Art. 15)' },
+  { value: 'rectification', label: 'Berichtigung (Art. 16)' },
+  { value: 'erasure', label: 'Loeschung (Art. 17)' },
+  { value: 'restriction', label: 'Einschraenkung (Art. 18)' },
+  { value: 'portability', label: 'Datenportabilitaet (Art. 20)' },
+  { value: 'objection', label: 'Widerspruch (Art. 21)' },
+]
+
+export function PublicFormConfig() {
+  const [settings, setSettings] = useState<PublicFormSettings>({
+    enabled: false,
+    formUrl: '',
+    allowedTypes: ['access', 'erasure', 'portability'],
+    requireIdentity: true,
+    customCss: '',
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-base font-semibold text-slate-900">Oeffentliches DSR-Formular</h3>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" checked={settings.enabled}
+            onChange={e => setSettings({ ...settings, enabled: e.target.checked })}
+            className="rounded border-gray-300 text-purple-600" />
+          <span className="text-sm text-slate-600">Aktiviert</span>
+        </label>
+      </div>
+
+      {!settings.enabled ? (
+        <div className="bg-gray-50 border border-gray-200 rounded-lg p-4 text-sm text-gray-600">
+          Das oeffentliche DSR-Formular ermoeglicht Betroffenen, Datenschutzanfragen direkt
+          ueber Ihre Website einzureichen — ohne Anmeldung. Aktivieren Sie es, um den
+          Embed-Code zu generieren.
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Erlaubte Anfragetypen</label>
+            <div className="grid grid-cols-2 gap-2">
+              {DSR_TYPES.map(type => (
+                <label key={type.value} className="flex items-center gap-2 text-sm text-slate-600">
+                  <input type="checkbox"
+                    checked={settings.allowedTypes.includes(type.value)}
+                    onChange={e => {
+                      const types = e.target.checked
+                        ? [...settings.allowedTypes, type.value]
+                        : settings.allowedTypes.filter(t => t !== type.value)
+                      setSettings({ ...settings, allowedTypes: types })
+                    }}
+                    className="rounded border-gray-300 text-purple-600" />
+                  {type.label}
+                </label>
+              ))}
+            </div>
+          </div>
+
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input type="checkbox" checked={settings.requireIdentity}
+              onChange={e => setSettings({ ...settings, requireIdentity: e.target.checked })}
+              className="rounded border-gray-300 text-purple-600" />
+            <span className="text-sm text-slate-600">Identitaetsnachweis erforderlich</span>
+          </label>
+
+          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
+            <h4 className="text-sm font-medium text-slate-700 mb-2">Embed-Code</h4>
+            <pre className="text-xs font-mono bg-white border border-slate-200 rounded p-3 overflow-x-auto">
+{`<iframe
+  src="https://ihre-domain.breakpilot.ai/dsr/public-form"
+  width="100%"
+  height="600"
+  frameborder="0"
+  title="Datenschutzanfrage"
+></iframe>`}
+            </pre>
+            <p className="text-xs text-slate-500 mt-2">
+              Embed-Code wird nach Anbindung an Production generiert.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,242 @@
+'use client'
+
+import { useState } from 'react'
+import { useBannerConsents } from '../_hooks/useBannerConsents'
+import { BannerConsentRecord, PAGE_SIZE } from '../_types'
+
+function formatDate(iso: string | null): string {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+function shortenFingerprint(fp: string): string {
+  return fp.length > 12 ? fp.slice(0, 12) + '...' : fp
+}
+
+function shortenUA(ua: string | null): string {
+  if (!ua) return '—'
+  const match = ua.match(/(Chrome|Safari|Firefox|Edge|Opera)\/[\d.]+/)
+  if (match) return match[0]
+  return ua.length > 30 ? ua.slice(0, 30) + '...' : ua
+}
+
+const categoryColors: Record<string, string> = {
+  essential: 'bg-gray-100 text-gray-700',
+  functional: 'bg-blue-100 text-blue-700',
+  analytics: 'bg-purple-100 text-purple-700',
+  marketing: 'bg-pink-100 text-pink-700',
+}
+
+const methodLabels: Record<string, string> = {
+  accept_all: 'Alle akzeptiert',
+  reject_all: 'Nur notwendige',
+  custom_selection: 'Individuelle Auswahl',
+}
+
+const methodColors: Record<string, string> = {
+  accept_all: 'bg-green-100 text-green-700',
+  reject_all: 'bg-red-100 text-red-700',
+  custom_selection: 'bg-yellow-100 text-yellow-700',
+}
+
+export default function BannerConsentsTab() {
+  const {
+    records, sites, selectedSite, changeSite,
+    stats, currentPage, setCurrentPage, totalRecords, loading,
+  } = useBannerConsents()
+
+  const [detail, setDetail] = useState<BannerConsentRecord | null>(null)
+  const totalPages = Math.ceil(totalRecords / PAGE_SIZE)
+
+  return (
+    <div className="space-y-6">
+      {/* Stats + Site Selector */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="text-sm text-gray-500">
+            <span className="text-2xl font-bold text-gray-900">{totalRecords}</span> Consents
+          </div>
+          {stats && Object.keys(stats.category_acceptance).length > 0 && (
+            <div className="flex gap-2">
+              {Object.entries(stats.category_acceptance).map(([cat, data]) => (
+                <span key={cat} className={`text-xs px-2 py-1 rounded-full ${categoryColors[cat] || 'bg-gray-100 text-gray-600'}`}>
+                  {cat}: {data.rate}%
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+        {sites.length > 0 && (
+          <select
+            value={selectedSite}
+            onChange={e => changeSite(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm bg-white"
+          >
+            {sites.map(s => (
+              <option key={s.site_id} value={s.site_id}>
+                {s.site_name || s.site_id}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {/* Table */}
+      <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th className="text-left px-4 py-3 font-medium text-gray-500">Device</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-500">Kategorien</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-500">Methode</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-500">Erteilt am</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-500">Ablauf</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-500">Browser</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-500">Aktion</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {loading && records.length === 0 ? (
+              <tr><td colSpan={7} className="px-4 py-8 text-center text-gray-400">Laden...</td></tr>
+            ) : records.length === 0 ? (
+              <tr><td colSpan={7} className="px-4 py-8 text-center text-gray-400">Keine Consents vorhanden</td></tr>
+            ) : (
+              records.map(record => (
+                <tr key={record.id} className="hover:bg-gray-50 transition-colors">
+                  <td className="px-4 py-3 font-mono text-xs text-gray-600">{shortenFingerprint(record.device_fingerprint)}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex flex-wrap gap-1">
+                      {record.categories.length > 0 ? record.categories.map(cat => (
+                        <span key={cat} className={`text-xs px-2 py-0.5 rounded-full ${categoryColors[cat] || 'bg-gray-100 text-gray-600'}`}>
+                          {cat}
+                        </span>
+                      )) : <span className="text-xs text-gray-400">—</span>}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-xs">
+                    {record.consent_method ? (
+                      <span className={`px-2 py-0.5 rounded-full ${methodColors[record.consent_method] || 'bg-gray-100 text-gray-600'}`}>
+                        {methodLabels[record.consent_method] || record.consent_method}
+                      </span>
+                    ) : <span className="text-gray-400">—</span>}
+                  </td>
+                  <td className="px-4 py-3 text-xs text-gray-600">{formatDate(record.created_at)}</td>
+                  <td className="px-4 py-3 text-xs text-gray-600">{formatDate(record.expires_at)}</td>
+                  <td className="px-4 py-3 text-xs text-gray-500">{shortenUA(record.user_agent)}</td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => setDetail(record)}
+                      className="text-xs text-purple-600 hover:text-purple-800 font-medium"
+                    >
+                      Details
+                    </button>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-gray-500">
+            Seite {currentPage} von {totalPages} ({totalRecords} Einträge)
+          </span>
+          <div className="flex gap-1">
+            <button
+              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+              disabled={currentPage <= 1}
+              className="px-3 py-1 text-xs border border-gray-300 rounded disabled:opacity-30"
+            >
+              Zurück
+            </button>
+            <button
+              onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+              disabled={currentPage >= totalPages}
+              className="px-3 py-1 text-xs border border-gray-300 rounded disabled:opacity-30"
+            >
+              Weiter
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Detail Modal */}
+      {detail && (
+        <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-4" onClick={() => setDetail(null)}>
+          <div className="bg-white rounded-2xl shadow-xl max-w-lg w-full p-6 max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-bold text-gray-900">Consent Details</h3>
+              <button onClick={() => setDetail(null)} className="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
+            </div>
+
+            <div className="space-y-3 text-sm">
+              <div className="flex justify-between"><span className="text-gray-500">ID</span><span className="font-mono text-xs">{detail.id}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Site</span><span>{detail.site_id}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Device</span><span className="font-mono text-xs">{detail.device_fingerprint}</span></div>
+              <div className="flex justify-between items-start">
+                <span className="text-gray-500">Kategorien</span>
+                <div className="flex flex-wrap gap-1 justify-end">
+                  {detail.categories.map(cat => (
+                    <span key={cat} className={`text-xs px-2 py-0.5 rounded-full ${categoryColors[cat] || 'bg-gray-100'}`}>{cat}</span>
+                  ))}
+                </div>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Methode</span>
+                <span>{detail.consent_method ? (
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${methodColors[detail.consent_method] || 'bg-gray-100'}`}>
+                    {methodLabels[detail.consent_method] || detail.consent_method}
+                  </span>
+                ) : '—'}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Verknüpft mit</span>
+                <span>{detail.linked_email || '— (anonym)'}</span>
+              </div>
+              <div className="flex justify-between"><span className="text-gray-500">Erteilt</span><span>{formatDate(detail.created_at)}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Ablauf</span><span>{formatDate(detail.expires_at)}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Aktualisiert</span><span>{formatDate(detail.updated_at)}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500">Geltungsbereich</span><span>{detail.consent_scope || '—'}</span></div>
+              {detail.banner_version && (
+                <div className="flex justify-between"><span className="text-gray-500">Banner-Version</span><span>{detail.banner_version}</span></div>
+              )}
+
+              {/* Tracking-Kontext */}
+              <div className="border-t border-gray-100 pt-3">
+                <p className="text-xs font-semibold text-gray-700 mb-2">Tracking-Kontext</p>
+                {detail.page_url && <div className="flex justify-between"><span className="text-gray-500 text-xs">Seite</span><span className="text-xs text-gray-600 truncate max-w-[250px]">{detail.page_url}</span></div>}
+                {detail.referrer && <div className="flex justify-between mt-1"><span className="text-gray-500 text-xs">Referrer</span><span className="text-xs text-gray-600 truncate max-w-[250px]">{detail.referrer}</span></div>}
+                {detail.geo_country && <div className="flex justify-between mt-1"><span className="text-gray-500 text-xs">Land</span><span className="text-xs text-gray-600">{detail.geo_country}{detail.geo_region ? ` / ${detail.geo_region}` : ''}</span></div>}
+              </div>
+
+              {/* Device-Informationen */}
+              <div className="border-t border-gray-100 pt-3">
+                <p className="text-xs font-semibold text-gray-700 mb-2">Device</p>
+                <div className="grid grid-cols-2 gap-1 text-xs">
+                  <span className="text-gray-500">Typ</span><span className="text-gray-600">{detail.device_type || '—'}</span>
+                  <span className="text-gray-500">Browser</span><span className="text-gray-600">{detail.browser || shortenUA(detail.user_agent)}</span>
+                  <span className="text-gray-500">OS</span><span className="text-gray-600">{detail.os || '—'}</span>
+                  <span className="text-gray-500">Auflösung</span><span className="text-gray-600">{detail.screen_resolution || '—'}</span>
+                </div>
+              </div>
+
+              {/* Technische Details */}
+              <div className="border-t border-gray-100 pt-3">
+                <p className="text-xs font-semibold text-gray-700 mb-2">Technisch</p>
+                <div className="space-y-1">
+                  <div><span className="text-gray-500 text-xs">User-Agent</span><p className="text-xs text-gray-600 font-mono break-all">{detail.user_agent || '—'}</p></div>
+                  {detail.ip_hash && <div><span className="text-gray-500 text-xs">IP-Hash</span><p className="text-xs text-gray-600 font-mono">{detail.ip_hash}</p></div>}
+                  {detail.session_id && <div><span className="text-gray-500 text-xs">Session</span><p className="text-xs text-gray-600 font-mono">{detail.session_id}</p></div>}
+                  {detail.banner_config_hash && <div><span className="text-gray-500 text-xs">Config-Hash</span><p className="text-xs text-gray-600 font-mono">{detail.banner_config_hash}</p></div>}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -35,7 +35,7 @@ const EINWILLIGUNGEN_TABS = [
  {
    id: 'cookie-banner',
    label: 'Cookie-Banner',
-    href: '/sdk/einwilligungen/cookie-banner',
+    href: '/sdk/cookie-banner',
    icon: Cookie,
    description: 'Cookie-Consent konfigurieren',
  },
@@ -0,0 +1,73 @@
+import { useState, useEffect, useCallback } from 'react'
+import { BannerConsentRecord, BannerConsentStats, BannerSite, PAGE_SIZE } from '../_types'
+
+const BANNER_API = '/api/sdk/v1/banner'
+const TENANT_ID = '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
+const HEADERS = { 'x-tenant-id': TENANT_ID }
+
+function fb(path: string) {
+  return fetch(`${BANNER_API}/${path}`, { headers: HEADERS })
+    .then(r => r.ok ? r.json() : null)
+    .catch(() => null)
+}
+
+export function useBannerConsents() {
+  const [records, setRecords] = useState<BannerConsentRecord[]>([])
+  const [sites, setSites] = useState<BannerSite[]>([])
+  const [selectedSite, setSelectedSite] = useState<string>('')
+  const [stats, setStats] = useState<BannerConsentStats | null>(null)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalRecords, setTotalRecords] = useState(0)
+  const [loading, setLoading] = useState(true)
+
+  // Load sites on mount
+  useEffect(() => {
+    fb('admin/sites').then(data => {
+      const list = Array.isArray(data) ? data : []
+      setSites(list)
+      if (list.length > 0) {
+        setSelectedSite(list[0].site_id)
+      }
+      setLoading(false)
+    })
+  }, [])
+
+  // Load consents + stats when site or page changes
+  const loadData = useCallback(async () => {
+    if (!selectedSite) return
+    setLoading(true)
+    const offset = (currentPage - 1) * PAGE_SIZE
+    const [consentsData, statsData] = await Promise.all([
+      fb(`admin/consents?site_id=${selectedSite}&limit=${PAGE_SIZE}&offset=${offset}`),
+      fb(`admin/stats/${selectedSite}`),
+    ])
+    if (consentsData) {
+      setRecords(consentsData.consents || [])
+      setTotalRecords(consentsData.total || 0)
+    }
+    setStats(statsData)
+    setLoading(false)
+  }, [selectedSite, currentPage])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  const changeSite = (siteId: string) => {
+    setSelectedSite(siteId)
+    setCurrentPage(1)
+  }
+
+  return {
+    records,
+    sites,
+    selectedSite,
+    changeSite,
+    stats,
+    currentPage,
+    setCurrentPage,
+    totalRecords,
+    loading,
+    reload: loadData,
+  }
+}
@@ -100,3 +100,44 @@ export function formatDate(date: Date | null): string {
 }

 export const PAGE_SIZE = 50
+
+// Banner (Device-based) Consent
+export interface BannerConsentRecord {
+  id: string
+  site_id: string
+  device_fingerprint: string
+  categories: string[]
+  vendors: string[]
+  ip_hash: string | null
+  user_agent: string | null
+  linked_email: string | null
+  consent_string: string | null
+  // Vendor-agnostische Felder (Migration 107)
+  consent_method: string | null
+  banner_version: number | null
+  banner_config_hash: string | null
+  geo_country: string | null
+  geo_region: string | null
+  consent_scope: string | null
+  page_url: string | null
+  referrer: string | null
+  device_type: string | null
+  browser: string | null
+  os: string | null
+  screen_resolution: string | null
+  session_id: string | null
+  expires_at: string | null
+  created_at: string | null
+  updated_at: string | null
+}
+
+export interface BannerConsentStats {
+  total_consents: number
+  category_acceptance: Record<string, { count: number; rate: number }>
+}
+
+export interface BannerSite {
+  site_id: string
+  site_name: string
+  site_url: string
+}
@@ -130,7 +130,7 @@ function CatalogContent() {
        </Link>

        <Link
-          href="/sdk/einwilligungen/cookie-banner"
+          href="/sdk/cookie-banner"
          className="bg-white rounded-xl border border-slate-200 p-4 hover:border-indigo-300 hover:shadow-md transition-all group"
        >
          <div className="flex items-center justify-between">
@@ -1,141 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { CookieBannerConfig, SupportedLanguage } from '@/lib/sdk/einwilligungen/types'
-
-interface BannerPreviewProps {
-  config: CookieBannerConfig | null
-  language: SupportedLanguage
-  device: 'desktop' | 'tablet' | 'mobile'
-}
-
-export function BannerPreview({ config, language, device }: BannerPreviewProps) {
-  const [showDetails, setShowDetails] = useState(false)
-
-  if (!config) {
-    return (
-      <div className="flex items-center justify-center h-64 bg-slate-100 rounded-xl">
-        <p className="text-slate-400">Konfiguration wird geladen...</p>
-      </div>
-    )
-  }
-
-  const isDark = config.styling.theme === 'DARK'
-  const bgColor = isDark ? '#1e293b' : config.styling.backgroundColor || '#ffffff'
-  const textColor = isDark ? '#f1f5f9' : config.styling.textColor || '#1e293b'
-
-  const deviceWidths = { desktop: '100%', tablet: '768px', mobile: '375px' }
-
-  return (
-    <div
-      className="border rounded-xl overflow-hidden"
-      style={{ maxWidth: deviceWidths[device], margin: '0 auto' }}
-    >
-      <div className="bg-slate-100 h-8 flex items-center px-3 gap-2">
-        <div className="w-3 h-3 rounded-full bg-red-400" />
-        <div className="w-3 h-3 rounded-full bg-yellow-400" />
-        <div className="w-3 h-3 rounded-full bg-green-400" />
-        <div className="flex-1 bg-white rounded h-5 mx-4" />
-      </div>
-
-      <div className="relative bg-slate-50 min-h-[400px]">
-        <div className="p-6 space-y-4">
-          <div className="h-4 bg-slate-200 rounded w-3/4" />
-          <div className="h-4 bg-slate-200 rounded w-1/2" />
-          <div className="h-32 bg-slate-200 rounded" />
-          <div className="h-4 bg-slate-200 rounded w-2/3" />
-          <div className="h-4 bg-slate-200 rounded w-1/2" />
-        </div>
-
-        <div className="absolute inset-0 bg-black/40" />
-
-        <div
-          className={`absolute ${
-            config.styling.position === 'TOP'
-              ? 'top-0 left-0 right-0'
-              : config.styling.position === 'CENTER'
-                ? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
-                : 'bottom-0 left-0 right-0'
-          }`}
-          style={{
-            maxWidth: config.styling.maxWidth,
-            margin: config.styling.position === 'CENTER' ? '0' : '16px auto',
-          }}
-        >
-          <div
-            className="shadow-xl"
-            style={{
-              background: bgColor,
-              color: textColor,
-              borderRadius: config.styling.borderRadius,
-              padding: '20px',
-            }}
-          >
-            <h3 className="font-semibold text-lg mb-2">{config.texts.title[language]}</h3>
-            <p className="text-sm opacity-80 mb-4">{config.texts.description[language]}</p>
-
-            <div className="flex flex-wrap gap-2 mb-3">
-              <button
-                style={{ background: config.styling.secondaryColor }}
-                className="flex-1 min-w-[100px] px-4 py-2 rounded-lg text-sm font-medium"
-              >
-                {config.texts.rejectAll[language]}
-              </button>
-              <button
-                onClick={() => setShowDetails(!showDetails)}
-                style={{ background: config.styling.secondaryColor }}
-                className="flex-1 min-w-[100px] px-4 py-2 rounded-lg text-sm font-medium"
-              >
-                {config.texts.customize[language]}
-              </button>
-              <button
-                style={{ background: config.styling.primaryColor, color: 'white' }}
-                className="flex-1 min-w-[100px] px-4 py-2 rounded-lg text-sm font-medium"
-              >
-                {config.texts.acceptAll[language]}
-              </button>
-            </div>
-
-            {showDetails && (
-              <div className="border-t pt-3 mt-3 space-y-2" style={{ borderColor: 'rgba(128,128,128,0.2)' }}>
-                {config.categories.map((cat) => (
-                  <div key={cat.id} className="flex items-center justify-between py-2">
-                    <div>
-                      <div className="font-medium text-sm">{cat.name[language]}</div>
-                      <div className="text-xs opacity-60">{cat.description[language]}</div>
-                    </div>
-                    <div
-                      className={`w-10 h-6 rounded-full relative ${
-                        cat.isRequired || cat.defaultEnabled ? '' : 'opacity-50'
-                      }`}
-                      style={{
-                        background: cat.isRequired || cat.defaultEnabled
-                          ? config.styling.primaryColor
-                          : 'rgba(128,128,128,0.3)',
-                      }}
-                    >
-                      <div
-                        className="absolute top-1 w-4 h-4 bg-white rounded-full transition-all"
-                        style={{ left: cat.isRequired || cat.defaultEnabled ? '20px' : '4px' }}
-                      />
-                    </div>
-                  </div>
-                ))}
-                <button
-                  style={{ background: config.styling.primaryColor, color: 'white' }}
-                  className="w-full px-4 py-2 rounded-lg text-sm font-medium mt-2"
-                >
-                  {config.texts.save[language]}
-                </button>
-              </div>
-            )}
-
-            <a href="#" className="block text-xs mt-3" style={{ color: config.styling.primaryColor }}>
-              {config.texts.privacyPolicyLink[language]}
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -1,95 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChevronDown, ChevronRight } from 'lucide-react'
-import { CookieBannerConfig, SupportedLanguage } from '@/lib/sdk/einwilligungen/types'
-
-interface CategoryListProps {
-  config: CookieBannerConfig | null
-  language: SupportedLanguage
-}
-
-export function CategoryList({ config, language }: CategoryListProps) {
-  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())
-
-  if (!config) return null
-
-  const toggleCategory = (id: string) => {
-    setExpandedCategories((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-      return next
-    })
-  }
-
-  return (
-    <div className="space-y-2">
-      {config.categories.map((cat) => {
-        const isExpanded = expandedCategories.has(cat.id)
-        return (
-          <div key={cat.id} className="border border-slate-200 rounded-lg overflow-hidden">
-            <button
-              onClick={() => toggleCategory(cat.id)}
-              className="w-full flex items-center justify-between p-4 hover:bg-slate-50 transition-colors"
-            >
-              <div className="flex items-center gap-3">
-                <div
-                  className={`w-3 h-3 rounded-full ${
-                    cat.isRequired ? 'bg-green-500' : 'bg-amber-500'
-                  }`}
-                />
-                <div className="text-left">
-                  <div className="font-medium text-slate-900">{cat.name[language]}</div>
-                  <div className="text-sm text-slate-500">
-                    {cat.cookies.length} Cookie(s) | {cat.dataPointIds.length} Datenpunkt(e)
-                  </div>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                {cat.isRequired && (
-                  <span className="px-2 py-0.5 text-xs bg-green-100 text-green-700 rounded-full">
-                    Erforderlich
-                  </span>
-                )}
-                {isExpanded ? (
-                  <ChevronDown className="w-5 h-5 text-slate-400" />
-                ) : (
-                  <ChevronRight className="w-5 h-5 text-slate-400" />
-                )}
-              </div>
-            </button>
-
-            {isExpanded && (
-              <div className="px-4 pb-4 border-t border-slate-100 bg-slate-50">
-                <p className="text-sm text-slate-600 py-3">{cat.description[language]}</p>
-                {cat.cookies.length > 0 && (
-                  <div className="space-y-2">
-                    <h4 className="text-xs font-semibold text-slate-500 uppercase">Cookies</h4>
-                    <div className="space-y-1">
-                      {cat.cookies.map((cookie, idx) => (
-                        <div
-                          key={idx}
-                          className="flex items-center justify-between p-2 bg-white rounded border border-slate-200"
-                        >
-                          <div>
-                            <span className="font-mono text-sm text-slate-700">{cookie.name}</span>
-                            <span className="text-xs text-slate-400 ml-2">({cookie.provider})</span>
-                          </div>
-                          <span className="text-xs text-slate-500">{cookie.expiry}</span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
@@ -1,152 +0,0 @@
-'use client'
-
-import { useState, useMemo } from 'react'
-import { useSDK } from '@/lib/sdk'
-import { useEinwilligungen } from '@/lib/sdk/einwilligungen/context'
-import {
-  generateCookieBannerConfig,
-  DEFAULT_COOKIE_BANNER_TEXTS,
-  DEFAULT_COOKIE_BANNER_STYLING,
-} from '@/lib/sdk/einwilligungen/generator/cookie-banner'
-import {
-  CookieBannerStyling,
-  CookieBannerTexts,
-  SupportedLanguage,
-} from '@/lib/sdk/einwilligungen/types'
-import { Cookie, Settings, Palette, Code, Monitor, Smartphone, Tablet } from 'lucide-react'
-import Link from 'next/link'
-import { ArrowLeft } from 'lucide-react'
-import { StylingForm } from './StylingForm'
-import { TextsForm } from './TextsForm'
-import { BannerPreview } from './BannerPreview'
-import { EmbedCodeViewer } from './EmbedCodeViewer'
-import { CategoryList } from './CategoryList'
-
-export function CookieBannerContent() {
-  const { state } = useSDK()
-  const { allDataPoints } = useEinwilligungen()
-
-  const [styling, setStyling] = useState<CookieBannerStyling>(DEFAULT_COOKIE_BANNER_STYLING)
-  const [texts, setTexts] = useState<CookieBannerTexts>(DEFAULT_COOKIE_BANNER_TEXTS)
-  const [language, setLanguage] = useState<SupportedLanguage>('de')
-  const [activeTab, setActiveTab] = useState<'styling' | 'texts' | 'embed' | 'categories'>('styling')
-  const [device, setDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop')
-
-  const config = useMemo(() => {
-    return generateCookieBannerConfig(state.tenantId || 'demo', allDataPoints, texts, styling)
-  }, [state.tenantId, allDataPoints, texts, styling])
-
-  const cookieDataPoints = useMemo(
-    () => allDataPoints.filter((dp) => dp.cookieCategory !== null),
-    [allDataPoints]
-  )
-
-  return (
-    <div className="space-y-6">
-      <Link
-        href="/sdk/einwilligungen/catalog"
-        className="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900"
-      >
-        <ArrowLeft className="w-4 h-4" />
-        Zurueck zum Katalog
-      </Link>
-
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-slate-900">Cookie-Banner Konfiguration</h1>
-          <p className="text-slate-600 mt-1">Konfigurieren Sie Ihren DSGVO-konformen Cookie-Banner.</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <select
-            value={language}
-            onChange={(e) => setLanguage(e.target.value as SupportedLanguage)}
-            className="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
-          >
-            <option value="de">Deutsch</option>
-            <option value="en">English</option>
-          </select>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div className="bg-white rounded-xl border border-slate-200 p-4">
-          <div className="text-sm text-slate-500">Kategorien</div>
-          <div className="text-2xl font-bold text-slate-900">{config?.categories.length || 0}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-slate-200 p-4">
-          <div className="text-sm text-slate-500">Cookie-Datenpunkte</div>
-          <div className="text-2xl font-bold text-indigo-600">{cookieDataPoints.length}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-green-200 p-4">
-          <div className="text-sm text-green-600">Erforderlich</div>
-          <div className="text-2xl font-bold text-green-600">
-            {config?.categories.filter((c) => c.isRequired).length || 0}
-          </div>
-        </div>
-        <div className="bg-white rounded-xl border border-amber-200 p-4">
-          <div className="text-sm text-amber-600">Optional</div>
-          <div className="text-2xl font-bold text-amber-600">
-            {config?.categories.filter((c) => !c.isRequired).length || 0}
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          <div className="flex border-b border-slate-200">
-            {[
-              { id: 'styling', label: 'Design', icon: Palette },
-              { id: 'texts', label: 'Texte', icon: Settings },
-              { id: 'categories', label: 'Kategorien', icon: Cookie },
-              { id: 'embed', label: 'Embed-Code', icon: Code },
-            ].map(({ id, label, icon: Icon }) => (
-              <button
-                key={id}
-                onClick={() => setActiveTab(id as typeof activeTab)}
-                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-                  activeTab === id
-                    ? 'text-indigo-600 border-indigo-600'
-                    : 'text-slate-600 border-transparent hover:text-slate-900'
-                }`}
-              >
-                <Icon className="w-4 h-4" />
-                {label}
-              </button>
-            ))}
-          </div>
-
-          <div className="bg-white rounded-xl border border-slate-200 p-6">
-            {activeTab === 'styling' && <StylingForm styling={styling} onChange={setStyling} />}
-            {activeTab === 'texts' && <TextsForm texts={texts} language={language} onChange={setTexts} />}
-            {activeTab === 'categories' && <CategoryList config={config} language={language} />}
-            {activeTab === 'embed' && <EmbedCodeViewer config={config} />}
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="font-semibold text-slate-900">Vorschau</h3>
-            <div className="flex items-center border border-slate-200 rounded-lg overflow-hidden">
-              {[
-                { id: 'desktop', icon: Monitor },
-                { id: 'tablet', icon: Tablet },
-                { id: 'mobile', icon: Smartphone },
-              ].map(({ id, icon: Icon }) => (
-                <button
-                  key={id}
-                  onClick={() => setDevice(id as typeof device)}
-                  className={`p-2 ${
-                    device === id ? 'bg-indigo-50 text-indigo-600' : 'text-slate-400 hover:text-slate-600'
-                  }`}
-                >
-                  <Icon className="w-5 h-5" />
-                </button>
-              ))}
-            </div>
-          </div>
-          <BannerPreview config={config} language={language} device={device} />
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -1,96 +0,0 @@
-'use client'
-
-import { useState, useMemo } from 'react'
-import { Copy, Check } from 'lucide-react'
-import { CookieBannerConfig } from '@/lib/sdk/einwilligungen/types'
-import { generateEmbedCode } from '@/lib/sdk/einwilligungen/generator/cookie-banner'
-
-interface EmbedCodeViewerProps {
-  config: CookieBannerConfig | null
-}
-
-export function EmbedCodeViewer({ config }: EmbedCodeViewerProps) {
-  const [activeTab, setActiveTab] = useState<'script' | 'html' | 'css' | 'js'>('script')
-  const [copied, setCopied] = useState(false)
-
-  const embedCode = useMemo(() => {
-    if (!config) return null
-    return generateEmbedCode(config, '/datenschutz')
-  }, [config])
-
-  const copyToClipboard = async (text: string) => {
-    await navigator.clipboard.writeText(text)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
-  if (!embedCode) {
-    return (
-      <div className="flex items-center justify-center h-48 bg-slate-100 rounded-xl">
-        <p className="text-slate-400">Embed-Code wird generiert...</p>
-      </div>
-    )
-  }
-
-  const tabs = [
-    { id: 'script', label: 'Script-Tag', content: embedCode.scriptTag },
-    { id: 'html', label: 'HTML', content: embedCode.html },
-    { id: 'css', label: 'CSS', content: embedCode.css },
-    { id: 'js', label: 'JavaScript', content: embedCode.js },
-  ] as const
-
-  const currentContent = tabs.find((t) => t.id === activeTab)?.content || ''
-
-  return (
-    <div className="border border-slate-200 rounded-xl overflow-hidden">
-      <div className="flex border-b border-slate-200 bg-slate-50">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={`px-4 py-2 text-sm font-medium transition-colors ${
-              activeTab === tab.id
-                ? 'bg-white text-indigo-600 border-b-2 border-indigo-600 -mb-px'
-                : 'text-slate-600 hover:text-slate-900'
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      <div className="relative">
-        <pre className="p-4 bg-slate-900 text-slate-100 text-sm font-mono overflow-x-auto max-h-[400px]">
-          {currentContent}
-        </pre>
-        <button
-          onClick={() => copyToClipboard(currentContent)}
-          className="absolute top-3 right-3 flex items-center gap-1.5 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-lg text-xs"
-        >
-          {copied ? (
-            <>
-              <Check className="w-3.5 h-3.5 text-green-400" />
-              Kopiert
-            </>
-          ) : (
-            <>
-              <Copy className="w-3.5 h-3.5" />
-              Kopieren
-            </>
-          )}
-        </button>
-      </div>
-
-      {activeTab === 'script' && (
-        <div className="p-4 bg-amber-50 border-t border-amber-200">
-          <p className="text-sm text-amber-800">
-            <strong>Integration:</strong> Fuegen Sie den Script-Tag in den{' '}
-            <code className="bg-amber-100 px-1 rounded">&lt;head&gt;</code> oder vor dem
-            schliessenden{' '}
-            <code className="bg-amber-100 px-1 rounded">&lt;/body&gt;</code>-Tag ein.
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}
@@ -1,118 +0,0 @@
-'use client'
-
-import { CookieBannerStyling } from '@/lib/sdk/einwilligungen/types'
-
-interface StylingFormProps {
-  styling: CookieBannerStyling
-  onChange: (styling: CookieBannerStyling) => void
-}
-
-export function StylingForm({ styling, onChange }: StylingFormProps) {
-  const handleChange = (field: keyof CookieBannerStyling, value: string | number) => {
-    onChange({ ...styling, [field]: value })
-  }
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <label className="block text-sm font-medium text-slate-700 mb-2">Position</label>
-        <div className="grid grid-cols-3 gap-2">
-          {(['BOTTOM', 'TOP', 'CENTER'] as const).map((pos) => (
-            <button
-              key={pos}
-              onClick={() => handleChange('position', pos)}
-              className={`px-4 py-2 text-sm rounded-lg border transition-colors ${
-                styling.position === pos
-                  ? 'bg-indigo-50 border-indigo-300 text-indigo-700'
-                  : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
-              }`}
-            >
-              {pos === 'BOTTOM' ? 'Unten' : pos === 'TOP' ? 'Oben' : 'Zentriert'}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        <label className="block text-sm font-medium text-slate-700 mb-2">Theme</label>
-        <div className="grid grid-cols-2 gap-2">
-          {(['LIGHT', 'DARK'] as const).map((theme) => (
-            <button
-              key={theme}
-              onClick={() => handleChange('theme', theme)}
-              className={`px-4 py-2 text-sm rounded-lg border transition-colors ${
-                styling.theme === theme
-                  ? 'bg-indigo-50 border-indigo-300 text-indigo-700'
-                  : 'bg-white border-slate-200 text-slate-600 hover:bg-slate-50'
-              }`}
-            >
-              {theme === 'LIGHT' ? 'Hell' : 'Dunkel'}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1">Primaerfarbe</label>
-          <div className="flex items-center gap-2">
-            <input
-              type="color"
-              value={styling.primaryColor}
-              onChange={(e) => handleChange('primaryColor', e.target.value)}
-              className="w-10 h-10 rounded border border-slate-200 cursor-pointer"
-            />
-            <input
-              type="text"
-              value={styling.primaryColor}
-              onChange={(e) => handleChange('primaryColor', e.target.value)}
-              className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm"
-            />
-          </div>
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1">Sekundaerfarbe</label>
-          <div className="flex items-center gap-2">
-            <input
-              type="color"
-              value={styling.secondaryColor || '#f1f5f9'}
-              onChange={(e) => handleChange('secondaryColor', e.target.value)}
-              className="w-10 h-10 rounded border border-slate-200 cursor-pointer"
-            />
-            <input
-              type="text"
-              value={styling.secondaryColor || '#f1f5f9'}
-              onChange={(e) => handleChange('secondaryColor', e.target.value)}
-              className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1">Eckenradius (px)</label>
-          <input
-            type="number"
-            min={0}
-            max={32}
-            value={styling.borderRadius}
-            onChange={(e) => handleChange('borderRadius', parseInt(e.target.value))}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-slate-700 mb-1">Max. Breite (px)</label>
-          <input
-            type="number"
-            min={320}
-            max={800}
-            value={styling.maxWidth}
-            onChange={(e) => handleChange('maxWidth', parseInt(e.target.value))}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -1,53 +0,0 @@
-'use client'
-
-import { CookieBannerTexts, SupportedLanguage } from '@/lib/sdk/einwilligungen/types'
-
-interface TextsFormProps {
-  texts: CookieBannerTexts
-  language: SupportedLanguage
-  onChange: (texts: CookieBannerTexts) => void
-}
-
-export function TextsForm({ texts, language, onChange }: TextsFormProps) {
-  const handleChange = (field: keyof CookieBannerTexts, value: string) => {
-    onChange({
-      ...texts,
-      [field]: { ...texts[field], [language]: value },
-    })
-  }
-
-  const fields: { key: keyof CookieBannerTexts; label: string; multiline?: boolean }[] = [
-    { key: 'title', label: 'Titel' },
-    { key: 'description', label: 'Beschreibung', multiline: true },
-    { key: 'acceptAll', label: 'Alle akzeptieren Button' },
-    { key: 'rejectAll', label: 'Nur notwendige Button' },
-    { key: 'customize', label: 'Einstellungen Button' },
-    { key: 'save', label: 'Speichern Button' },
-    { key: 'privacyPolicyLink', label: 'Datenschutz-Link Text' },
-  ]
-
-  return (
-    <div className="space-y-4">
-      {fields.map(({ key, label, multiline }) => (
-        <div key={key}>
-          <label className="block text-sm font-medium text-slate-700 mb-1">{label}</label>
-          {multiline ? (
-            <textarea
-              value={texts[key][language]}
-              onChange={(e) => handleChange(key, e.target.value)}
-              rows={3}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
-            />
-          ) : (
-            <input
-              type="text"
-              value={texts[key][language]}
-              onChange={(e) => handleChange(key, e.target.value)}
-              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
-            />
-          )}
-        </div>
-      ))}
-    </div>
-  )
-}
@@ -1,18 +1,5 @@
-'use client'
+import { redirect } from 'next/navigation'

-/**
- * Cookie Banner Configuration Page
- *
- * Konfiguriert den Cookie-Banner basierend auf dem Datenpunktkatalog.
- */
-
-import { EinwilligungenProvider } from '@/lib/sdk/einwilligungen/context'
-import { CookieBannerContent } from './_components/CookieBannerContent'
-
-export default function CookieBannerPage() {
-  return (
-    <EinwilligungenProvider>
-      <CookieBannerContent />
-    </EinwilligungenProvider>
-  )
+export default function CookieBannerRedirect() {
+  redirect('/sdk/cookie-banner')
 }
@@ -2,7 +2,7 @@

 import { useState } from 'react'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
-import { History } from 'lucide-react'
+import { History, Globe, User } from 'lucide-react'

 import { ConsentRecord } from './_types'
 import { useConsents } from './_hooks/useConsents'
@@ -12,8 +12,13 @@ import { SearchAndFilter } from './_components/SearchAndFilter'
 import { RecordsTable } from './_components/RecordsTable'
 import { Pagination } from './_components/Pagination'
 import { ConsentDetailModal } from './_components/ConsentDetailModal'
+import BannerConsentsTab from './_components/BannerConsentsTab'
+
+type ConsentTab = 'visitors' | 'users'

 export default function EinwilligungenPage() {
+  const [activeTab, setActiveTab] = useState<ConsentTab>('visitors')
+
  const {
    records,
    currentPage,
@@ -63,51 +68,84 @@ export default function EinwilligungenPage() {
      {/* Navigation Tabs */}
      <EinwilligungenNavTabs />

-      {/* Stats */}
-      <StatsGrid
-        total={globalStats.total}
-        active={globalStats.active}
-        revoked={globalStats.revoked}
-        versionUpdates={versionUpdates}
-      />
-
-      {/* Info Banner */}
-      <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border border-purple-200 p-4 flex items-start gap-3">
-        <History className="w-5 h-5 text-purple-600 mt-0.5" />
-        <div>
-          <div className="font-medium text-purple-900">Consent-Historie aktiviert</div>
-          <div className="text-sm text-purple-700">
-            Alle Änderungen an Einwilligungen werden protokolliert, inkl. Zustimmungen zu neuen Versionen von AGB, DSI und anderen Dokumenten.
-            Klicken Sie auf "Details" um die vollständige Historie eines Nutzers einzusehen.
-          </div>
-        </div>
+      {/* Consent Type Tabs: Website-Besucher / Login-Nutzer */}
+      <div className="flex gap-1 p-1 bg-gray-100 rounded-xl w-fit">
+        <button
+          onClick={() => setActiveTab('visitors')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'visitors'
+              ? 'bg-white text-purple-700 shadow-sm'
+              : 'text-gray-500 hover:text-gray-700'
+          }`}
+        >
+          <Globe className="w-4 h-4" />
+          Website-Besucher
+        </button>
+        <button
+          onClick={() => setActiveTab('users')}
+          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+            activeTab === 'users'
+              ? 'bg-white text-purple-700 shadow-sm'
+              : 'text-gray-500 hover:text-gray-700'
+          }`}
+        >
+          <User className="w-4 h-4" />
+          Login-Nutzer
+        </button>
      </div>

-      {/* Search and Filter */}
-      <SearchAndFilter
-        searchQuery={searchQuery}
-        onSearchChange={setSearchQuery}
-        filter={filter}
-        onFilterChange={setFilter}
-      />
+      {/* Tab Content */}
+      {activeTab === 'visitors' ? (
+        <BannerConsentsTab />
+      ) : (
+        <>
+          {/* Stats */}
+          <StatsGrid
+            total={globalStats.total}
+            active={globalStats.active}
+            revoked={globalStats.revoked}
+            versionUpdates={versionUpdates}
+          />

-      {/* Records Table */}
-      <RecordsTable records={filteredRecords} onShowDetails={setSelectedRecord} />
+          {/* Info Banner */}
+          <div className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-xl border border-purple-200 p-4 flex items-start gap-3">
+            <History className="w-5 h-5 text-purple-600 mt-0.5" />
+            <div>
+              <div className="font-medium text-purple-900">Consent-Historie aktiviert</div>
+              <div className="text-sm text-purple-700">
+                Alle Änderungen an Einwilligungen werden protokolliert, inkl. Zustimmungen zu neuen Versionen von AGB, DSI und anderen Dokumenten.
+                Klicken Sie auf &quot;Details&quot; um die vollständige Historie eines Nutzers einzusehen.
+              </div>
+            </div>
+          </div>

-      {/* Pagination */}
-      <Pagination
-        currentPage={currentPage}
-        totalRecords={totalRecords}
-        onPageChange={setCurrentPage}
-      />
+          {/* Search and Filter */}
+          <SearchAndFilter
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            filter={filter}
+            onFilterChange={setFilter}
+          />

-      {/* Detail Modal */}
-      {selectedRecord && (
-        <ConsentDetailModal
-          record={selectedRecord}
-          onClose={() => setSelectedRecord(null)}
-          onRevoke={handleRevoke}
-        />
+          {/* Records Table */}
+          <RecordsTable records={filteredRecords} onShowDetails={setSelectedRecord} />
+
+          {/* Pagination */}
+          <Pagination
+            currentPage={currentPage}
+            totalRecords={totalRecords}
+            onPageChange={setCurrentPage}
+          />
+
+          {/* Detail Modal */}
+          {selectedRecord && (
+            <ConsentDetailModal
+              record={selectedRecord}
+              onClose={() => setSelectedRecord(null)}
+              onRevoke={handleRevoke}
+            />
+          )}
+        </>
      )}
    </div>
  )
@@ -15,11 +15,16 @@ interface EditorTabProps {
  onPublish: () => void
  onPreview: () => void
  onBack: () => void
+  onSubmitForReview?: () => void
+  onApprove?: (comment?: string) => void
+  onReject?: (comment: string) => void
+  onSendTest?: (email: string) => void
 }

 export function EditorTab({
  template, version, subject, html, previewHtml, saving,
  onSubjectChange, onHtmlChange, onSave, onPublish, onPreview, onBack,
+  onSubmitForReview, onApprove, onReject, onSendTest,
 }: EditorTabProps) {
  if (!template) {
    return (
@@ -46,30 +51,56 @@ export function EditorTab({
            </span>
          )}
        </div>
-        <div className="flex gap-2">
-          <button
-            onClick={onSave}
-            disabled={saving}
-            className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50"
-          >
-            {saving ? 'Speichern...' : 'Version speichern'}
-          </button>
-          {version && version.status !== 'published' && (
-            <button
-              onClick={onPublish}
-              disabled={saving}
-              className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 disabled:opacity-50"
-            >
+        <div className="flex gap-2 flex-wrap">
+          {/* Save — always available for draft/review */}
+          {(!version || version.status === 'draft' || version.status === 'review') && (
+            <button onClick={onSave} disabled={saving}
+              className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50">
+              {saving ? 'Speichern...' : 'Version speichern'}
+            </button>
+          )}
+          {/* Submit for Review — only for draft */}
+          {version && version.status === 'draft' && onSubmitForReview && (
+            <button onClick={onSubmitForReview} disabled={saving}
+              className="px-3 py-1.5 bg-yellow-500 text-white rounded-lg text-sm hover:bg-yellow-600 disabled:opacity-50">
+              Zur Pruefung einreichen
+            </button>
+          )}
+          {/* Approve — only for review status (DSB) */}
+          {version && version.status === 'review' && onApprove && (
+            <button onClick={() => onApprove()} disabled={saving}
+              className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50">
+              Genehmigen
+            </button>
+          )}
+          {/* Reject — only for review status (DSB) */}
+          {version && version.status === 'review' && onReject && (
+            <button onClick={() => { const c = prompt('Ablehnungsgrund:'); if (c) onReject(c) }} disabled={saving}
+              className="px-3 py-1.5 bg-red-500 text-white rounded-lg text-sm hover:bg-red-600 disabled:opacity-50">
+              Ablehnen
+            </button>
+          )}
+          {/* Publish — only for approved */}
+          {version && version.status === 'approved' && (
+            <button onClick={onPublish} disabled={saving}
+              className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 disabled:opacity-50">
              Publizieren
            </button>
          )}
+          {/* Preview + Test — always when version exists */}
          {version && (
-            <button
-              onClick={onPreview}
-              className="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50"
-            >
-              Vorschau
-            </button>
+            <>
+              <button onClick={onPreview}
+                className="px-3 py-1.5 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50">
+                Vorschau
+              </button>
+              {onSendTest && (
+                <button onClick={() => { const e = prompt('Test-E-Mail an:'); if (e) onSendTest(e) }}
+                  className="px-3 py-1.5 border border-blue-300 text-blue-700 rounded-lg text-sm hover:bg-blue-50">
+                  Test senden
+                </button>
+              )}
+            </>
          )}
        </div>
      </div>
@@ -77,7 +108,7 @@ export function EditorTab({
      {/* Variables */}
      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 mr-1">Variablen:</span>
-        {(template.variables || []).map(v => (
+        {(Array.isArray(template.variables) ? template.variables : []).map(v => (
          <button
            key={v}
            onClick={() => onHtmlChange(html + `{{${v}}}`)}
@@ -30,12 +30,12 @@ export function TemplateCard({ template, onEdit }: TemplateCardProps) {
        <p className="text-xs text-gray-500 mt-2 line-clamp-2">{template.description}</p>
      )}
      <div className="mt-3 flex flex-wrap gap-1">
-        {(template.variables || []).slice(0, 4).map(v => (
+        {(Array.isArray(template.variables) ? template.variables : []).slice(0, 4).map(v => (
          <span key={v} className="px-1.5 py-0.5 bg-gray-50 text-gray-500 rounded text-xs font-mono">
            {`{{${v}}}`}
          </span>
        ))}
-        {(template.variables || []).length > 4 && (
+        {Array.isArray(template.variables) && template.variables.length > 4 && (
          <span className="text-xs text-gray-400">+{template.variables.length - 4}</span>
        )}
      </div>
@@ -7,6 +7,7 @@ import {
  SendLog,
  Settings,
  TabId,
+  TemplateApproval,
  TemplateType,
  TemplateVersion,
  getHeaders,
@@ -194,6 +195,72 @@ export function useEmailTemplates(activeTab: TabId) {
    }
  }, [settingsForm])

+  // Workflow actions
+  const submitForReview = useCallback(async () => {
+    if (!editorVersion) return
+    setSaving(true)
+    try {
+      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/submit`, {
+        method: 'POST', headers: getHeaders(),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const updated = await res.json()
+      setEditorVersion(updated)
+      await loadTemplates()
+    } catch (e: any) { setError(e.message) } finally { setSaving(false) }
+  }, [editorVersion, loadTemplates])
+
+  const approveVersion = useCallback(async (comment?: string) => {
+    if (!editorVersion) return
+    setSaving(true)
+    try {
+      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/approve`, {
+        method: 'POST', headers: getHeaders(),
+        body: JSON.stringify({ comment: comment || '' }),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const updated = await res.json()
+      setEditorVersion(updated)
+      await loadTemplates()
+    } catch (e: any) { setError(e.message) } finally { setSaving(false) }
+  }, [editorVersion, loadTemplates])
+
+  const rejectVersion = useCallback(async (comment: string) => {
+    if (!editorVersion) return
+    setSaving(true)
+    try {
+      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/reject`, {
+        method: 'POST', headers: getHeaders(),
+        body: JSON.stringify({ comment }),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const updated = await res.json()
+      setEditorVersion(updated)
+      await loadTemplates()
+    } catch (e: any) { setError(e.message) } finally { setSaving(false) }
+  }, [editorVersion, loadTemplates])
+
+  const sendTestEmail = useCallback(async (recipientEmail: string) => {
+    if (!editorVersion) return
+    try {
+      const res = await fetch(`${API_BASE}/versions/${editorVersion.id}/send-test`, {
+        method: 'POST', headers: getHeaders(),
+        body: JSON.stringify({ recipient: recipientEmail }),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      return await res.json()
+    } catch (e: any) { setError(e.message) }
+  }, [editorVersion])
+
+  const loadApprovalHistory = useCallback(async (versionId: string): Promise<TemplateApproval[]> => {
+    try {
+      const res = await fetch(`${API_BASE}/versions/${versionId}/approvals`, { headers: getHeaders() })
+      if (!res.ok) return []
+      const data = await res.json()
+      return Array.isArray(data) ? data : data.approvals || []
+    } catch { return [] }
+  }, [])
+
  const initializeDefaults = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/initialize`, {
@@ -222,6 +289,8 @@ export function useEmailTemplates(activeTab: TabId) {
    setSettingsForm,
    // Actions
    openEditor, saveVersion, publishVersion, loadPreview,
+    submitForReview, approveVersion, rejectVersion,
+    sendTestEmail, loadApprovalHistory,
    saveSettings2, initializeDefaults,
  }
 }
@@ -42,6 +42,16 @@ export interface SendLog {
  sent_at: string | null
 }

+export interface TemplateApproval {
+  id: string
+  version_id: string
+  action: string // submitted, approved, rejected
+  actor_id: string
+  actor_name?: string
+  comment?: string
+  created_at: string
+}
+
 export interface Settings {
  sender_name: string
  sender_email: string
@@ -22,6 +22,8 @@ export default function EmailTemplatesPage() {
    setEditorSubject, setEditorHtml,
    setSettingsForm,
    openEditor, saveVersion, publishVersion, loadPreview,
+    submitForReview, approveVersion, rejectVersion,
+    sendTestEmail, loadApprovalHistory,
    saveSettings2, initializeDefaults,
  } = useEmailTemplates(activeTab)

@@ -68,6 +70,10 @@ export default function EmailTemplatesPage() {
          onPublish={publishVersion}
          onPreview={loadPreview}
          onBack={() => setActiveTab('templates')}
+          onSubmitForReview={submitForReview}
+          onApprove={approveVersion}
+          onReject={rejectVersion}
+          onSendTest={sendTestEmail}
        />
      )}

@@ -0,0 +1,246 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface GapReport {
+  profile_name: string
+  regulations: Array<{
+    id: string
+    name: string
+    risk_level: string
+    confidence: number
+    reasoning: string
+    requirements?: string[]
+  }>
+  summary: {
+    total_applicable_regulations: number
+    total_gaps: number
+    gaps_by_status: Record<string, number>
+    gaps_by_severity: Record<string, number>
+    overall_compliance_percent: number
+    estimated_effort_weeks: number
+  }
+  gaps: Array<{
+    mc_id: string
+    mc_name: string
+    regulation: string
+    status: string
+    title: string
+    severity: string
+    priority: { score: number; rank: number }
+    recommendation: string
+    control_count: number
+  }>
+}
+
+interface Props {
+  report: GapReport
+  onBack: () => void
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  fulfilled: 'bg-green-100 text-green-800',
+  partial: 'bg-yellow-100 text-yellow-800',
+  missing: 'bg-red-100 text-red-800',
+  unclear: 'bg-gray-100 text-gray-800',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  fulfilled: 'Erfuellt',
+  partial: 'Teilweise',
+  missing: 'Offen',
+  unclear: 'Unklar',
+}
+
+const SEVERITY_COLORS: Record<string, string> = {
+  CRITICAL: 'bg-red-600 text-white',
+  HIGH: 'bg-orange-500 text-white',
+  MEDIUM: 'bg-yellow-400 text-gray-900',
+  LOW: 'bg-blue-100 text-blue-800',
+}
+
+export function GapDashboard({ report, onBack }: Props) {
+  const [filterSeverity, setFilterSeverity] = useState<string>('all')
+  const [filterStatus, setFilterStatus] = useState<string>('all')
+  const [expandedGap, setExpandedGap] = useState<string | null>(null)
+
+  const filteredGaps = report.gaps.filter(g => {
+    if (filterSeverity !== 'all' && g.severity !== filterSeverity) return false
+    if (filterStatus !== 'all' && g.status !== filterStatus) return false
+    return true
+  })
+
+  const s = report.summary
+
+  return (
+    <div>
+      {/* Back button */}
+      <button onClick={onBack} className="mb-6 text-blue-600 hover:text-blue-800 text-sm">
+        &larr; Neue Analyse
+      </button>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <SummaryCard
+          label="Regulierungen"
+          value={s.total_applicable_regulations}
+          color="blue"
+        />
+        <SummaryCard
+          label="Offene Gaps"
+          value={s.gaps_by_status?.missing || 0}
+          color="red"
+        />
+        <SummaryCard
+          label="Compliance"
+          value={`${s.overall_compliance_percent}%`}
+          color={s.overall_compliance_percent >= 80 ? 'green' : 'orange'}
+        />
+        <SummaryCard
+          label="Gesch. Aufwand"
+          value={`${s.estimated_effort_weeks} Wo.`}
+          color="purple"
+        />
+      </div>
+
+      {/* Applicable Regulations */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-8">
+        <h2 className="text-lg font-semibold text-gray-900 mb-4">
+          Anwendbare Regulierungen
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {report.regulations.map(reg => (
+            <div
+              key={reg.id}
+              className="border border-gray-200 rounded-lg p-4 hover:shadow-sm transition-shadow"
+            >
+              <div className="flex items-center justify-between mb-2">
+                <span className="font-medium text-gray-900 text-sm">
+                  {reg.name}
+                </span>
+                <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+                  reg.risk_level === 'high' ? 'bg-red-100 text-red-700' :
+                  reg.risk_level === 'medium' ? 'bg-yellow-100 text-yellow-700' :
+                  'bg-green-100 text-green-700'
+                }`}>
+                  {reg.risk_level}
+                </span>
+              </div>
+              <p className="text-xs text-gray-500">{reg.reasoning}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-4 mb-4">
+        <select
+          value={filterSeverity}
+          onChange={e => setFilterSeverity(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
+        >
+          <option value="all">Alle Prioritaeten</option>
+          <option value="CRITICAL">Kritisch</option>
+          <option value="HIGH">Hoch</option>
+          <option value="MEDIUM">Mittel</option>
+          <option value="LOW">Niedrig</option>
+        </select>
+        <select
+          value={filterStatus}
+          onChange={e => setFilterStatus(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
+        >
+          <option value="all">Alle Status</option>
+          <option value="missing">Offen</option>
+          <option value="partial">Teilweise</option>
+          <option value="fulfilled">Erfuellt</option>
+        </select>
+        <span className="text-sm text-gray-500 self-center">
+          {filteredGaps.length} von {report.gaps.length} Anforderungen
+        </span>
+      </div>
+
+      {/* Gap List */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-gray-50 border-b border-gray-200">
+            <tr>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">#</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Anforderung</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Regulierung</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Prioritaet</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Controls</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {filteredGaps.map(gap => (
+              <React.Fragment key={gap.mc_id}>
+                <tr
+                  className="hover:bg-gray-50 cursor-pointer"
+                  onClick={() => setExpandedGap(expandedGap === gap.mc_id ? null : gap.mc_id)}
+                >
+                  <td className="px-4 py-3 text-sm text-gray-500">{gap.priority.rank}</td>
+                  <td className="px-4 py-3">
+                    <div className="text-sm font-medium text-gray-900">{gap.title}</div>
+                    <div className="text-xs text-gray-500">{gap.mc_name}</div>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-600">{gap.regulation}</td>
+                  <td className="px-4 py-3">
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${STATUS_COLORS[gap.status] || ''}`}>
+                      {STATUS_LABELS[gap.status] || gap.status}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className={`px-2 py-1 rounded text-xs font-bold ${SEVERITY_COLORS[gap.severity] || ''}`}>
+                      {gap.severity}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500">{gap.control_count}</td>
+                </tr>
+                {expandedGap === gap.mc_id && (
+                  <tr>
+                    <td colSpan={6} className="px-4 py-4 bg-blue-50">
+                      <div className="text-sm">
+                        <p className="font-medium text-gray-700 mb-1">Empfehlung:</p>
+                        <p className="text-gray-600">{gap.recommendation}</p>
+                        <p className="mt-2 text-xs text-gray-400">
+                          Priority Score: {gap.priority.score.toFixed(1)} | MC: {gap.mc_id}
+                        </p>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+function SummaryCard({ label, value, color }: { label: string; value: string | number; color: string }) {
+  const bg = {
+    blue: 'bg-blue-50 border-blue-200',
+    red: 'bg-red-50 border-red-200',
+    green: 'bg-green-50 border-green-200',
+    orange: 'bg-orange-50 border-orange-200',
+    purple: 'bg-purple-50 border-purple-200',
+  }[color] || 'bg-gray-50 border-gray-200'
+
+  const text = {
+    blue: 'text-blue-700',
+    red: 'text-red-700',
+    green: 'text-green-700',
+    orange: 'text-orange-700',
+    purple: 'text-purple-700',
+  }[color] || 'text-gray-700'
+
+  return (
+    <div className={`rounded-xl border p-4 ${bg}`}>
+      <p className="text-sm text-gray-600">{label}</p>
+      <p className={`text-2xl font-bold mt-1 ${text}`}>{value}</p>
+    </div>
+  )
+}
@@ -0,0 +1,238 @@
+'use client'
+
+import React, { useState } from 'react'
+
+const PRODUCT_TYPES = [
+  { value: 'iot', label: 'IoT / Connected Device' },
+  { value: 'software', label: 'Software / Desktop App' },
+  { value: 'saas', label: 'SaaS / Cloud-Plattform' },
+  { value: 'hardware', label: 'Hardware / Elektronik' },
+  { value: 'machinery', label: 'Maschine / Anlage' },
+  { value: 'medical_device', label: 'Medizinprodukt' },
+  { value: 'exchange', label: 'Krypto-Exchange / Fintech' },
+  { value: 'other', label: 'Sonstiges' },
+]
+
+const TECHNOLOGIES = [
+  { value: 'ai', label: 'Kuenstliche Intelligenz / ML' },
+  { value: 'blockchain', label: 'Blockchain / Smart Contracts' },
+  { value: 'cloud', label: 'Cloud-Infrastruktur' },
+  { value: 'api', label: 'REST/GraphQL API' },
+  { value: 'database', label: 'Datenbank' },
+  { value: 'encryption', label: 'Verschluesselung' },
+  { value: 'ota_updates', label: 'OTA Software-Updates' },
+  { value: 'sensor', label: 'Sensoren' },
+  { value: 'actuator', label: 'Aktoren / Motoren' },
+  { value: 'network', label: 'Netzwerk-Anbindung' },
+  { value: 'camera', label: 'Kamera / Bilderkennung' },
+  { value: 'payment', label: 'Zahlungsabwicklung' },
+  { value: 'fiat_gateway', label: 'Fiat On/Off-Ramp' },
+]
+
+const DATA_TYPES = [
+  { value: 'personal_data', label: 'Personenbezogene Daten' },
+  { value: 'health_data', label: 'Gesundheitsdaten' },
+  { value: 'financial_data', label: 'Finanzdaten' },
+  { value: 'telemetry', label: 'Telemetrie / Nutzungsdaten' },
+]
+
+const CERTIFICATIONS = [
+  { value: 'ISO27001', label: 'ISO 27001' },
+  { value: 'CE', label: 'CE-Kennzeichnung' },
+  { value: 'SOC2', label: 'SOC 2' },
+  { value: 'ISO13485', label: 'ISO 13485 (Medizin)' },
+]
+
+interface Props {
+  onAnalyze: (profile: Record<string, unknown>) => void
+  loading: boolean
+}
+
+export function ProductWizard({ onAnalyze, loading }: Props) {
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [productType, setProductType] = useState('')
+  const [technologies, setTechnologies] = useState<string[]>([])
+  const [dataProcessing, setDataProcessing] = useState<string[]>([])
+  const [certifications, setCertifications] = useState<string[]>([])
+  const [connectedToInternet, setConnectedToInternet] = useState(false)
+  const [hasSoftwareUpdates, setHasSoftwareUpdates] = useState(false)
+  const [usesAI, setUsesAI] = useState(false)
+  const [processesPersonalData, setProcessesPersonalData] = useState(false)
+  const [isCriticalInfra, setIsCriticalInfra] = useState(false)
+
+  const toggleArrayValue = (
+    arr: string[],
+    setter: (v: string[]) => void,
+    value: string
+  ) => {
+    setter(arr.includes(value) ? arr.filter(v => v !== value) : [...arr, value])
+  }
+
+  const handleSubmit = () => {
+    onAnalyze({
+      name: name || 'Unbenanntes Produkt',
+      description,
+      product_type: productType,
+      technologies,
+      data_processing: dataProcessing,
+      markets: ['EU'],
+      connected_to_internet: connectedToInternet,
+      has_software_updates: hasSoftwareUpdates,
+      uses_ai: usesAI,
+      processes_personal_data: processesPersonalData,
+      is_critical_infra_supplier: isCriticalInfra,
+      existing_certifications: certifications,
+    })
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
+      {/* Produktname */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Produktname
+        </label>
+        <input
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+          placeholder="z.B. SmartFactory Gateway Pro"
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      {/* Beschreibung */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Produktbeschreibung
+        </label>
+        <textarea
+          value={description}
+          onChange={e => setDescription(e.target.value)}
+          rows={3}
+          placeholder="Beschreiben Sie Ihr Produkt in 2-3 Saetzen..."
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      {/* Produkttyp */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Produkttyp
+        </label>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          {PRODUCT_TYPES.map(pt => (
+            <button
+              key={pt.value}
+              onClick={() => setProductType(pt.value)}
+              className={`px-4 py-3 rounded-lg border text-sm font-medium transition-colors ${
+                productType === pt.value
+                  ? 'bg-blue-50 border-blue-500 text-blue-700'
+                  : 'border-gray-200 text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              {pt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Technologien */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Verwendete Technologien
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {TECHNOLOGIES.map(t => (
+            <button
+              key={t.value}
+              onClick={() => toggleArrayValue(technologies, setTechnologies, t.value)}
+              className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
+                technologies.includes(t.value)
+                  ? 'bg-blue-100 border-blue-400 text-blue-800'
+                  : 'border-gray-200 text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Datenverarbeitung */}
+      <div className="mb-6">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Verarbeitete Daten
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {DATA_TYPES.map(d => (
+            <button
+              key={d.value}
+              onClick={() => toggleArrayValue(dataProcessing, setDataProcessing, d.value)}
+              className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
+                dataProcessing.includes(d.value)
+                  ? 'bg-green-100 border-green-400 text-green-800'
+                  : 'border-gray-200 text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {d.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Checkboxen */}
+      <div className="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
+        {[
+          { label: 'Mit dem Internet verbunden', value: connectedToInternet, setter: setConnectedToInternet },
+          { label: 'Hat Software-Updates (OTA)', value: hasSoftwareUpdates, setter: setHasSoftwareUpdates },
+          { label: 'Verwendet KI / Machine Learning', value: usesAI, setter: setUsesAI },
+          { label: 'Verarbeitet personenbezogene Daten', value: processesPersonalData, setter: setProcessesPersonalData },
+          { label: 'Zulieferer fuer kritische Infrastruktur', value: isCriticalInfra, setter: setIsCriticalInfra },
+        ].map(cb => (
+          <label key={cb.label} className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={cb.value}
+              onChange={e => cb.setter(e.target.checked)}
+              className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            <span className="text-sm text-gray-700">{cb.label}</span>
+          </label>
+        ))}
+      </div>
+
+      {/* Bestehende Zertifizierungen */}
+      <div className="mb-8">
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Bestehende Zertifizierungen (optional)
+        </label>
+        <div className="flex flex-wrap gap-2">
+          {CERTIFICATIONS.map(cert => (
+            <button
+              key={cert.value}
+              onClick={() => toggleArrayValue(certifications, setCertifications, cert.value)}
+              className={`px-3 py-1.5 rounded-full text-sm border transition-colors ${
+                certifications.includes(cert.value)
+                  ? 'bg-purple-100 border-purple-400 text-purple-800'
+                  : 'border-gray-200 text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {cert.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Submit */}
+      <button
+        onClick={handleSubmit}
+        disabled={!productType || loading}
+        className="w-full py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+      >
+        {loading ? 'Analyse laeuft...' : 'Gap-Analyse starten'}
+      </button>
+    </div>
+  )
+}
@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useState } from 'react'
+import { ProductWizard } from './_components/ProductWizard'
+import { GapDashboard } from './_components/GapDashboard'
+
+interface GapReport {
+  profile_id: string
+  profile_name: string
+  regulations: Array<{
+    id: string
+    name: string
+    applicable: boolean
+    confidence: number
+    reasoning: string
+    risk_level: string
+    deadline?: string
+    requirements?: string[]
+  }>
+  summary: {
+    total_applicable_regulations: number
+    total_gaps: number
+    gaps_by_status: Record<string, number>
+    gaps_by_severity: Record<string, number>
+    gaps_by_regulation: Record<string, number>
+    overall_compliance_percent: number
+    estimated_effort_weeks: number
+  }
+  gaps: Array<{
+    mc_id: string
+    mc_name: string
+    regulation: string
+    status: string
+    title: string
+    severity: string
+    priority: { score: number; rank: number }
+    recommendation: string
+    control_count: number
+  }>
+}
+
+export default function GapAnalysisPage() {
+  const [report, setReport] = useState<GapReport | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleAnalyze = async (profile: Record<string, unknown>) => {
+    setLoading(true)
+    setError('')
+    try {
+      const res = await fetch('/api/sdk/v1/gap/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(profile),
+      })
+      if (!res.ok) throw new Error(await res.text())
+      const data = await res.json()
+      setReport(data)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Analyse fehlgeschlagen')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-6xl mx-auto px-4">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">
+            Regulatory Gap-Analyse
+          </h1>
+          <p className="text-gray-600 mt-2">
+            Beschreiben Sie Ihr Produkt und erhalten Sie eine priorisierte
+            Liste der Compliance-Anforderungen.
+          </p>
+        </div>
+
+        {error && (
+          <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
+            <p className="text-red-700">{error}</p>
+          </div>
+        )}
+
+        {!report ? (
+          <ProductWizard onAnalyze={handleAnalyze} loading={loading} />
+        ) : (
+          <GapDashboard
+            report={report}
+            onBack={() => setReport(null)}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,235 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+
+interface ComplianceTrigger {
+  id: string
+  regulation: string
+  article: string
+  title: string
+  severity: 'high' | 'medium' | 'low'
+  reason: string
+  affected_hazard_count?: number
+  module_path: string
+  module_label: string
+}
+
+interface TriggersResponse {
+  triggers: ComplianceTrigger[]
+  total: number
+}
+
+const SEVERITY_CONFIG: Record<string, { border: string; bg: string; text: string; badge: string; icon: string }> = {
+  high: {
+    border: 'border-red-200 dark:border-red-800',
+    bg: 'bg-red-50 dark:bg-red-900/20',
+    text: 'text-red-700 dark:text-red-400',
+    badge: 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
+    icon: 'text-red-500',
+  },
+  medium: {
+    border: 'border-yellow-200 dark:border-yellow-800',
+    bg: 'bg-yellow-50 dark:bg-yellow-900/20',
+    text: 'text-yellow-700 dark:text-yellow-400',
+    badge: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300',
+    icon: 'text-yellow-500',
+  },
+  low: {
+    border: 'border-blue-200 dark:border-blue-800',
+    bg: 'bg-blue-50 dark:bg-blue-900/20',
+    text: 'text-blue-700 dark:text-blue-400',
+    badge: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300',
+    icon: 'text-blue-500',
+  },
+}
+
+const SEVERITY_LABELS: Record<string, string> = {
+  high: 'HOCH',
+  medium: 'MITTEL',
+  low: 'NIEDRIG',
+}
+
+const REGULATION_BADGES: { key: string; label: string; activeColor: string }[] = [
+  { key: 'DSGVO', label: 'DSGVO', activeColor: 'bg-red-100 text-red-800 border-red-300' },
+  { key: 'AI Act', label: 'AI Act', activeColor: 'bg-orange-100 text-orange-800 border-orange-300' },
+  { key: 'CRA', label: 'CRA', activeColor: 'bg-yellow-100 text-yellow-800 border-yellow-300' },
+  { key: 'NIS2', label: 'NIS2', activeColor: 'bg-indigo-100 text-indigo-800 border-indigo-300' },
+  { key: 'Data Act', label: 'Data Act', activeColor: 'bg-amber-100 text-amber-800 border-amber-300' },
+]
+
+function WarningIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
+    </svg>
+  )
+}
+
+function ChevronIcon({ open }: { open: boolean }) {
+  return (
+    <svg className={`w-4 h-4 text-gray-400 transition-transform ${open ? 'rotate-180' : ''}`}
+      fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  )
+}
+
+export function ComplianceAlerts({ projectId }: { projectId: string }) {
+  const [data, setData] = useState<TriggersResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [collapsed, setCollapsed] = useState(false)
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+
+  useEffect(() => {
+    fetch(`/api/sdk/v1/iace/projects/${projectId}/compliance-triggers`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((json) => {
+        if (!json) return
+        // Map API format (nested trigger object) to flat frontend format
+        const raw = json.triggers || []
+        const mapped: ComplianceTrigger[] = raw.map((t: Record<string, unknown>, i: number) => {
+          const inner = (t.trigger || t) as Record<string, unknown>
+          const reg = (inner.regulation || '') as string
+          return {
+            id: (t.hazard_id as string) || `trigger-${i}`,
+            regulation: reg.split(' ')[0] || reg,
+            article: reg.includes(' ') ? reg.split(' ').slice(1).join(' ') : '',
+            title: (inner.action_de || inner.trigger_cond_de || '') as string,
+            severity: ((inner.severity || 'medium') as string) as 'high' | 'medium' | 'low',
+            reason: (inner.trigger_cond_de || '') as string,
+            affected_hazard_count: 1,
+            module_path: (inner.module_link || '/sdk') as string,
+            module_label: ((inner.module || 'Modul') as string).toUpperCase(),
+          }
+        })
+        setData({ triggers: mapped, total: mapped.length })
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [projectId])
+
+  if (loading) return null
+  if (!data || data.triggers.length === 0) return null
+
+  const triggers = data.triggers
+  const activeRegulations = new Set(triggers.map((t) => t.regulation))
+
+  function toggleExpanded(id: string) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-red-200 dark:border-red-800">
+      {/* Header */}
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        className="w-full flex items-center justify-between p-6 text-left"
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-red-50 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
+            <WarningIcon className="w-5 h-5 text-red-600" />
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
+              {triggers.length} Compliance-Hinweise erkannt
+            </h2>
+            <p className="text-xs text-gray-500">
+              Basierend auf den identifizierten Gefaehrdungen bestehen rechtliche Implikationen
+            </p>
+          </div>
+        </div>
+        <div className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0">
+          <ChevronIcon open={!collapsed} />
+        </div>
+      </button>
+
+      {!collapsed && (
+        <div className="px-6 pb-6 space-y-4">
+          {/* Regulation summary badges */}
+          <div className="flex flex-wrap gap-2">
+            {REGULATION_BADGES.map((reg) => {
+              const active = activeRegulations.has(reg.key)
+              return (
+                <span
+                  key={reg.key}
+                  className={`px-2.5 py-1 text-xs font-medium rounded-full border ${
+                    active
+                      ? reg.activeColor
+                      : 'bg-gray-50 text-gray-400 border-gray-200 dark:bg-gray-700 dark:text-gray-500 dark:border-gray-600'
+                  }`}
+                >
+                  {reg.label}
+                </span>
+              )
+            })}
+          </div>
+
+          {/* Trigger list */}
+          <div className="space-y-2">
+            {triggers.map((trigger) => {
+              const sev = SEVERITY_CONFIG[trigger.severity] || SEVERITY_CONFIG.low
+              const isOpen = expandedIds.has(trigger.id)
+
+              return (
+                <div key={trigger.id} className={`rounded-lg border ${sev.border} ${sev.bg} overflow-hidden`}>
+                  {/* Trigger header row */}
+                  <button
+                    onClick={() => toggleExpanded(trigger.id)}
+                    className="w-full flex items-center gap-3 px-4 py-3 text-left"
+                  >
+                    <ChevronIcon open={isOpen} />
+                    <div className="flex-1 min-w-0">
+                      <span className="text-sm font-medium text-gray-900 dark:text-white">
+                        {trigger.regulation} {trigger.article} — {trigger.title}
+                      </span>
+                    </div>
+                    <span className={`px-2 py-0.5 text-xs font-bold rounded ${sev.badge}`}>
+                      {SEVERITY_LABELS[trigger.severity] || trigger.severity}
+                    </span>
+                  </button>
+
+                  {/* Expanded detail */}
+                  {isOpen && (
+                    <div className="px-4 pb-4 pt-0 ml-7 space-y-2">
+                      <p className="text-xs text-gray-700 dark:text-gray-300">
+                        <span className="font-medium">Grund:</span> {trigger.reason}
+                      </p>
+                      {trigger.affected_hazard_count != null && trigger.affected_hazard_count > 0 && (
+                        <p className="text-xs text-gray-500">
+                          Betroffene Gefaehrdungen: {trigger.affected_hazard_count}
+                        </p>
+                      )}
+                      <Link
+                        href={trigger.module_path}
+                        className={`inline-flex items-center gap-1.5 text-xs font-medium ${sev.text} hover:underline`}
+                      >
+                        {trigger.module_label} oeffnen
+                        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                        </svg>
+                      </Link>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+
+          {/* Disclaimer */}
+          <div className="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 text-xs text-amber-800 dark:text-amber-300">
+            <strong>Hinweis:</strong> Diese Compliance-Hinweise werden automatisch aus den
+            Gefaehrdungen und Klassifikationen abgeleitet. Der CE-Fachmann muss die
+            regulatorischen Anforderungen im jeweiligen Modul verifizieren.
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,258 @@
+'use client'
+
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import Link from 'next/link'
+import { usePathname, useParams } from 'next/navigation'
+
+interface CEStep {
+  step: number
+  label: string
+  href: string | null
+  external?: boolean
+  sameAs?: number
+  note?: string
+}
+
+const CE_STEPS: CEStep[] = [
+  { step: 3, label: 'Grenzen & Verwendung', href: '/interview' },
+  { step: 4, label: 'Normenrecherche', href: null, external: true },
+  { step: 5, label: 'Komponenten', href: '/components' },
+  { step: 6, label: 'Gefaehrdungen', href: '/hazards' },
+  { step: 7, label: 'Risikobewertung', href: '/hazards', sameAs: 6 },
+  { step: 8, label: 'Massnahmen', href: '/mitigations' },
+  { step: 9, label: 'Nachweise', href: '/evidence' },
+  { step: 10, label: 'Restrisiko', href: '/hazards', note: 'Reassessment' },
+  { step: 11, label: 'Verifikation', href: '/verification' },
+  { step: 14, label: 'CE-Akte', href: '/tech-file' },
+]
+
+function getNavigableSteps(basePath: string): CEStep[] {
+  return CE_STEPS.filter((s) => s.href !== null && !s.external)
+}
+
+export default function IACEFlowFAB() {
+  const [isOpen, setIsOpen] = useState(false)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const fabRef = useRef<HTMLButtonElement>(null)
+  const pathname = usePathname()
+  const params = useParams()
+  const projectId = params?.projectId as string
+
+  const basePath = `/sdk/iace/${projectId}`
+
+  const activeStepIndex = CE_STEPS.findIndex((s) => {
+    if (!s.href) return false
+    return pathname.startsWith(`${basePath}${s.href}`)
+  })
+
+  const navigableSteps = getNavigableSteps(basePath)
+  const currentNavIndex = navigableSteps.findIndex((s) => {
+    if (!s.href) return false
+    return pathname.startsWith(`${basePath}${s.href}`)
+  })
+
+  const completedCount = CE_STEPS.filter((s) => s.href && !s.external).length
+  const totalSteps = CE_STEPS.length
+
+  const handleClose = useCallback(() => setIsOpen(false), [])
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') handleClose()
+    }
+    function onClickOutside(e: MouseEvent) {
+      if (
+        panelRef.current &&
+        !panelRef.current.contains(e.target as Node) &&
+        fabRef.current &&
+        !fabRef.current.contains(e.target as Node)
+      ) {
+        handleClose()
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('keydown', onKeyDown)
+      document.addEventListener('mousedown', onClickOutside)
+    }
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      document.removeEventListener('mousedown', onClickOutside)
+    }
+  }, [isOpen, handleClose])
+
+  const goPrev = () => {
+    if (currentNavIndex > 0) {
+      const prev = navigableSteps[currentNavIndex - 1]
+      if (prev.href) window.location.href = `${basePath}${prev.href}`
+    }
+  }
+
+  const goNext = () => {
+    if (currentNavIndex < navigableSteps.length - 1) {
+      const next = navigableSteps[currentNavIndex + 1]
+      if (next.href) window.location.href = `${basePath}${next.href}`
+    }
+  }
+
+  return (
+    <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+      {/* Expanded Panel */}
+      <div
+        ref={panelRef}
+        className={`mb-3 w-[300px] max-h-[70vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 transition-all duration-200 origin-bottom-right ${
+          isOpen
+            ? 'opacity-100 scale-100 translate-y-0'
+            : 'opacity-0 scale-95 translate-y-2 pointer-events-none'
+        }`}
+      >
+        {/* Header */}
+        <div className="sticky top-0 bg-white dark:bg-gray-800 px-4 py-3 border-b border-gray-100 dark:border-gray-700">
+          <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
+            CE-Prozessschritte
+          </h3>
+          <p className="text-xs text-gray-500 mt-0.5">
+            {completedCount}/{totalSteps} Schritte im Tool
+          </p>
+        </div>
+
+        {/* Steps */}
+        <div className="py-2 px-2">
+          {CE_STEPS.map((step, idx) => {
+            const isActive = idx === activeStepIndex
+            const isExternal = step.external || step.href === null
+            const fullHref = step.href ? `${basePath}${step.href}` : null
+
+            const rowContent = (
+              <div
+                className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors ${
+                  isActive
+                    ? 'bg-purple-50 dark:bg-purple-900/40'
+                    : isExternal
+                      ? 'opacity-50 cursor-default'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer'
+                }`}
+              >
+                {/* Step number circle */}
+                <div
+                  className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
+                    isActive
+                      ? 'bg-purple-600 text-white'
+                      : isExternal
+                        ? 'bg-gray-200 dark:bg-gray-600 text-gray-400 dark:text-gray-500'
+                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300'
+                  }`}
+                >
+                  {isActive ? (
+                    <span className="w-2 h-2 rounded-full bg-white" />
+                  ) : !isExternal ? (
+                    <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                    </svg>
+                  ) : (
+                    step.step
+                  )}
+                </div>
+
+                {/* Label */}
+                <div className="flex-1 min-w-0">
+                  <span
+                    className={`block truncate font-medium ${
+                      isActive
+                        ? 'text-purple-700 dark:text-purple-300'
+                        : isExternal
+                          ? 'text-gray-400 dark:text-gray-500'
+                          : 'text-gray-700 dark:text-gray-200'
+                    }`}
+                  >
+                    {step.label}
+                  </span>
+                  {(step.note || isExternal) && (
+                    <span className="text-[10px] text-gray-400">
+                      {step.note || '(extern)'}
+                    </span>
+                  )}
+                </div>
+
+                {/* Step badge */}
+                <span className="text-[10px] text-gray-400 flex-shrink-0">
+                  #{step.step}
+                </span>
+              </div>
+            )
+
+            if (fullHref && !isExternal) {
+              return (
+                <Link key={idx} href={fullHref} onClick={handleClose}>
+                  {rowContent}
+                </Link>
+              )
+            }
+            return <div key={idx}>{rowContent}</div>
+          })}
+        </div>
+
+        {/* Prev/Next navigation */}
+        <div className="sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 px-4 py-2.5 flex items-center justify-between">
+          <button
+            onClick={goPrev}
+            disabled={currentNavIndex <= 0}
+            className="flex items-center gap-1 text-xs font-medium text-purple-600 hover:text-purple-700 disabled:text-gray-300 disabled:cursor-not-allowed transition-colors"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Zurueck
+          </button>
+          <span className="text-[10px] text-gray-400">
+            {currentNavIndex >= 0 ? currentNavIndex + 1 : '-'}/{navigableSteps.length}
+          </span>
+          <button
+            onClick={goNext}
+            disabled={currentNavIndex >= navigableSteps.length - 1 || currentNavIndex < 0}
+            className="flex items-center gap-1 text-xs font-medium text-purple-600 hover:text-purple-700 disabled:text-gray-300 disabled:cursor-not-allowed transition-colors"
+          >
+            Weiter
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* FAB Button */}
+      <button
+        ref={fabRef}
+        onClick={() => setIsOpen((o) => !o)}
+        className="w-14 h-14 rounded-full bg-gradient-to-br from-purple-600 to-indigo-600 text-white shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 transition-all flex items-center justify-center"
+        title="CE-Prozessschritte"
+      >
+        {/* Steps/flow icon */}
+        <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
+        </svg>
+        {/* Progress ring */}
+        <svg className="absolute w-14 h-14" viewBox="0 0 56 56">
+          <circle
+            cx="28"
+            cy="28"
+            r="25"
+            fill="none"
+            stroke="rgba(255,255,255,0.2)"
+            strokeWidth="3"
+          />
+          <circle
+            cx="28"
+            cy="28"
+            r="25"
+            fill="none"
+            stroke="white"
+            strokeWidth="3"
+            strokeDasharray={`${(completedCount / totalSteps) * 157} 157`}
+            strokeLinecap="round"
+            transform="rotate(-90 28 28)"
+          />
+        </svg>
+      </button>
+    </div>
+  )
+}
@@ -0,0 +1,195 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+interface NormRef {
+  id: string
+  number: string
+  title_de: string
+  norm_type: string
+  scope_de: string
+  mandatory: boolean
+}
+
+interface NormSuggestion {
+  norm: NormRef
+  reason: string
+  confidence: number
+}
+
+interface NormResult {
+  a_norms: NormSuggestion[]
+  b1_norms: NormSuggestion[]
+  b2_norms: NormSuggestion[]
+  c_norms: NormSuggestion[]
+  total: number
+}
+
+const TYPE_CONFIG: Record<string, { label: string; color: string; desc: string }> = {
+  a_norms: { label: 'A-Normen', color: 'border-red-200 bg-red-50 text-red-800', desc: 'Grundnormen (immer anwendbar)' },
+  b1_norms: { label: 'B1-Normen', color: 'border-blue-200 bg-blue-50 text-blue-800', desc: 'Sicherheitsgrundnormen' },
+  b2_norms: { label: 'B2-Normen', color: 'border-green-200 bg-green-50 text-green-800', desc: 'Sicherheitsfachgrundnormen' },
+  c_norms: { label: 'C-Normen', color: 'border-purple-200 bg-purple-50 text-purple-800', desc: 'Maschinenspezifische Normen' },
+}
+
+export function SuggestedNorms({ projectId }: { projectId: string }) {
+  const [data, setData] = useState<NormResult | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [collapsed, setCollapsed] = useState(false)
+  const [customNorms, setCustomNorms] = useState<Array<{ number: string; title: string }>>([])
+  const [customNormNumber, setCustomNormNumber] = useState('')
+  const [customNormTitle, setCustomNormTitle] = useState('')
+
+  useEffect(() => {
+    fetch(`/api/sdk/v1/iace/projects/${projectId}/suggested-norms`)
+      .then((r) => r.ok ? r.json() : null)
+      .then((json) => {
+        if (json?.suggestions) setData(json.suggestions)
+        else if (json?.a_norms !== undefined) setData(json)
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [projectId])
+
+  if (loading) return null
+  if (!data || data.total === 0) return null
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
+      <button
+        onClick={() => setCollapsed(!collapsed)}
+        className="w-full flex items-center justify-between p-6 text-left"
+      >
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
+            <svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
+              Normenrecherche — {data.total} relevante Normen
+            </h2>
+            <p className="text-xs text-gray-500">
+              Automatisch ermittelt aus Maschinentyp, Gefaehrdungen und Komponenten
+            </p>
+          </div>
+        </div>
+        <div className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0">
+          <svg className={`w-5 h-5 text-gray-400 transition-transform ${collapsed ? '' : 'rotate-180'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+      </button>
+
+      {!collapsed && (
+        <div className="px-6 pb-6 space-y-4">
+          {/* Legend */}
+          <div className="flex flex-wrap gap-2 text-xs">
+            {Object.entries(TYPE_CONFIG).map(([key, cfg]) => (
+              <span key={key} className={`px-2 py-0.5 rounded border ${cfg.color}`}>{cfg.label}: {cfg.desc}</span>
+            ))}
+          </div>
+
+          {/* Norm groups */}
+          {(['a_norms', 'b1_norms', 'b2_norms', 'c_norms'] as const).map((type) => {
+            const norms = data[type]
+            if (!norms || norms.length === 0) return null
+            const cfg = TYPE_CONFIG[type]
+            return (
+              <div key={type}>
+                <h3 className={`text-xs font-semibold px-2 py-1 rounded inline-block mb-2 border ${cfg.color}`}>
+                  {cfg.label} ({norms.length})
+                </h3>
+                <div className="space-y-2">
+                  {norms.map((s) => (
+                    <div key={s.norm.id} className="flex items-start gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-100 dark:border-gray-600">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm font-mono font-semibold text-gray-900 dark:text-white">
+                            {s.norm.number}
+                          </span>
+                          {s.norm.mandatory && (
+                            <span className="px-1.5 py-0.5 text-xs font-medium bg-red-100 text-red-700 rounded">
+                              Pflicht
+                            </span>
+                          )}
+                          <span className="px-1.5 py-0.5 text-xs bg-gray-200 text-gray-600 rounded">
+                            {Math.round(s.confidence * 100)}%
+                          </span>
+                        </div>
+                        <p className="text-xs text-gray-700 dark:text-gray-300 mt-0.5">{s.norm.title_de}</p>
+                        <p className="text-xs text-gray-500 mt-1">{s.norm.scope_de}</p>
+                        <p className="text-xs text-amber-600 mt-1">
+                          Grund: {s.reason}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+
+          {/* Add custom norm */}
+          <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600">
+            <p className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Weitere Norm ergaenzen</p>
+            <div className="flex gap-2">
+              <input
+                type="text" placeholder="z.B. ISO 13857:2019"
+                value={customNormNumber} onChange={(e) => setCustomNormNumber(e.target.value)}
+                className="flex-1 px-3 py-1.5 text-xs border border-gray-300 rounded-lg focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+              <input
+                type="text" placeholder="Titel (optional)"
+                value={customNormTitle} onChange={(e) => setCustomNormTitle(e.target.value)}
+                className="flex-1 px-3 py-1.5 text-xs border border-gray-300 rounded-lg focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+              <button
+                onClick={() => {
+                  if (customNormNumber.trim()) {
+                    setCustomNorms((prev) => [...prev, { number: customNormNumber.trim(), title: customNormTitle.trim() }])
+                    setCustomNormNumber('')
+                    setCustomNormTitle('')
+                  }
+                }}
+                disabled={!customNormNumber.trim()}
+                className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+              >
+                + Hinzufuegen
+              </button>
+            </div>
+            {customNorms.length > 0 && (
+              <div className="mt-2 space-y-1">
+                {customNorms.map((cn, i) => (
+                  <div key={i} className="flex items-center gap-2 text-xs">
+                    <span className="font-mono font-semibold text-gray-800 dark:text-gray-200">{cn.number}</span>
+                    {cn.title && <span className="text-gray-500">— {cn.title}</span>}
+                    <span className="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">Manuell</span>
+                    <button onClick={() => setCustomNorms((prev) => prev.filter((_, j) => j !== i))} className="text-red-400 hover:text-red-600">
+                      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Pflicht-Erklärung + Disclaimer */}
+          <div className="space-y-2 text-xs">
+            <div className="p-3 rounded-lg bg-red-50 border border-red-200 text-red-800">
+              <strong>Pflicht</strong> bedeutet: Diese Norm ist fuer diesen Maschinentyp typischerweise zwingend anzuwenden
+              (z.B. ISO 12100 fuer alle Maschinen, EN 692 fuer mechanische Pressen). Die Anwendung harmonisierter Normen
+              erzeugt eine Konformitaetsvermutung.
+            </div>
+            <div className="p-3 rounded-lg bg-amber-50 border border-amber-200 text-amber-800">
+              <strong>Hinweis:</strong> Diese Normenvorschlaege basieren auf dem Maschinentyp und den identifizierten
+              Gefaehrdungen. Der CE-Fachmann muss die Anwendbarkeit pruefen und ggf. weitere Normen ueber das Feld oben ergaenzen.
+              Normtexte muessen separat beschafft werden (z.B. ueber <a href="https://www.beuth.de" target="_blank" rel="noopener noreferrer" className="underline font-medium">beuth.de</a>).
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,307 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import Link from 'next/link'
+
+interface VariantProject {
+  id: string
+  machine_name: string
+  description?: string
+  status: string
+  hazard_count?: number
+  parent_project_id?: string
+}
+
+interface VariantGapResponse {
+  base_project: { id: string; name: string; hazard_count: number; measure_count: number }
+  variant: { id: string; name: string; hazard_count: number; measure_count: number }
+  gap: { additional_hazards: number; additional_measures: number; categories_affected: string[] }
+}
+
+interface BaseProjectSummary {
+  hazard_count: number
+  component_count: number
+  mitigation_count: number
+  norms_count: number
+}
+
+interface Props {
+  projectId: string
+  parentProjectId?: string | null
+  parentProjectName?: string
+}
+
+function VariantBanner({ projectId, parentProjectId, parentProjectName }: { projectId: string; parentProjectId: string; parentProjectName?: string }) {
+  const [baseSummary, setBaseSummary] = useState<BaseProjectSummary | null>(null)
+
+  useEffect(() => {
+    async function loadBase() {
+      try {
+        const [projRes, riskRes] = await Promise.all([
+          fetch(`/api/sdk/v1/iace/projects/${parentProjectId}`),
+          fetch(`/api/sdk/v1/iace/projects/${parentProjectId}/risk-summary`),
+        ])
+        const proj = projRes.ok ? await projRes.json() : null
+        const risk = riskRes.ok ? await riskRes.json() : null
+        const rs = risk?.risk_summary || risk || {}
+        setBaseSummary({
+          hazard_count: rs.total_hazards || rs.total || 0,
+          component_count: proj?.components?.length || 0,
+          mitigation_count: rs.total_mitigations || 0,
+          norms_count: 0,
+        })
+      } catch { /* ignore */ }
+    }
+    loadBase()
+  }, [parentProjectId])
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-purple-200 dark:border-purple-700 p-6 space-y-4">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
+          <svg className="w-5 h-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
+          </svg>
+        </div>
+        <div className="flex-1">
+          <p className="text-sm font-semibold text-gray-900 dark:text-white">Variante</p>
+          <p className="text-xs text-gray-500">
+            Diese Seite zeigt nur die <strong>varianten-spezifischen</strong> Gefaehrdungen und Massnahmen.
+            Die Basis-Risikobeurteilung liegt im Eltern-Projekt.
+          </p>
+        </div>
+        <Link
+          href={`/sdk/iace/${parentProjectId}`}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-purple-700 bg-purple-50 rounded-lg hover:bg-purple-100 dark:text-purple-300 dark:bg-purple-900/30 dark:hover:bg-purple-900/50 transition-colors"
+        >
+          {parentProjectName || 'Basis-Projekt'}
+          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+          </svg>
+        </Link>
+      </div>
+      {baseSummary && (
+        <div className="bg-purple-50/50 dark:bg-purple-900/10 rounded-lg p-3 border border-purple-100 dark:border-purple-800">
+          <p className="text-xs font-medium text-purple-700 dark:text-purple-300 mb-2">Basis-Projekt Zusammenfassung</p>
+          <div className="grid grid-cols-3 gap-4 text-center">
+            <div>
+              <div className="text-lg font-bold text-gray-900 dark:text-white">{baseSummary.hazard_count}</div>
+              <div className="text-xs text-gray-500">Gefaehrdungen</div>
+            </div>
+            <div>
+              <div className="text-lg font-bold text-gray-900 dark:text-white">{baseSummary.mitigation_count}</div>
+              <div className="text-xs text-gray-500">Massnahmen</div>
+            </div>
+            <div>
+              <div className="text-lg font-bold text-gray-900 dark:text-white">{baseSummary.component_count}</div>
+              <div className="text-xs text-gray-500">Komponenten</div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function VariantPanel({ projectId, parentProjectId, parentProjectName }: Props) {
+  const [variants, setVariants] = useState<VariantProject[]>([])
+  const [gapMap, setGapMap] = useState<Record<string, VariantGapResponse>>({})
+  const [loading, setLoading] = useState(true)
+  const [showCreate, setShowCreate] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+
+  const fetchVariants = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/variants`)
+      if (!res.ok) {
+        setVariants([])
+        return
+      }
+      const json = await res.json()
+      const list: VariantProject[] = json.variants || json.projects || []
+      setVariants(list)
+
+      // Fetch gap analysis for this project
+      const gapRes = await fetch(`/api/sdk/v1/iace/projects/${projectId}/variant-gap`)
+      if (gapRes.ok) {
+        const gapJson = await gapRes.json()
+        const gaps: Record<string, VariantGapResponse> = {}
+        // Could be a single gap or array — handle both
+        if (Array.isArray(gapJson)) {
+          for (const g of gapJson) {
+            gaps[g.variant?.id] = g
+          }
+        } else if (gapJson.variant) {
+          gaps[gapJson.variant.id] = gapJson
+        }
+        setGapMap(gaps)
+      }
+    } catch {
+      setVariants([])
+    } finally {
+      setLoading(false)
+    }
+  }, [projectId])
+
+  useEffect(() => {
+    fetchVariants()
+  }, [fetchVariants])
+
+  async function handleCreate() {
+    if (!name.trim()) return
+    setCreating(true)
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/variants`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          machine_name: name.trim(),
+          description: description.trim(),
+        }),
+      })
+      if (res.ok) {
+        setName('')
+        setDescription('')
+        setShowCreate(false)
+        fetchVariants()
+      }
+    } catch {
+      // silently handle
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  // If this project IS a variant, show link to base project + base stats
+  if (parentProjectId) {
+    return <VariantBanner projectId={projectId} parentProjectId={parentProjectId} parentProjectName={parentProjectName} />
+  }
+
+  if (loading) return null
+  if (variants.length === 0 && !showCreate) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gray-50 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+              <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <div>
+              <p className="text-sm font-semibold text-gray-900 dark:text-white">Keine Varianten</p>
+              <p className="text-xs text-gray-500">Erstellen Sie Varianten fuer verschiedene Betriebsarten</p>
+            </div>
+          </div>
+          <button
+            onClick={() => setShowCreate(true)}
+            className="px-3 py-1.5 text-sm font-medium text-purple-700 bg-purple-50 rounded-lg hover:bg-purple-100 dark:text-purple-300 dark:bg-purple-900/30 dark:hover:bg-purple-900/50 transition-colors"
+          >
+            + Neue Variante
+          </button>
+        </div>
+        {renderCreateDialog()}
+      </div>
+    )
+  }
+
+  function renderCreateDialog() {
+    if (!showCreate) return null
+    return (
+      <div className="mt-4 p-4 border border-purple-200 dark:border-purple-700 rounded-lg bg-purple-50/50 dark:bg-purple-900/10 space-y-3">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Neue Variante erstellen</h3>
+        <input
+          type="text"
+          placeholder="Variantenname (z.B. Kollaborierender Betrieb)"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+        />
+        <textarea
+          placeholder="Beschreibung (optional)"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={2}
+          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+        />
+        <div className="flex gap-2 justify-end">
+          <button
+            onClick={() => { setShowCreate(false); setName(''); setDescription('') }}
+            className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={handleCreate}
+            disabled={creating || !name.trim()}
+            className="px-4 py-1.5 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
+          >
+            {creating ? 'Erstelle...' : 'Erstellen'}
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
+            <svg className="w-5 h-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+          </div>
+          <div>
+            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
+              Varianten ({variants.length})
+            </h2>
+            <p className="text-xs text-gray-500">Betriebsart-spezifische Projektversionen</p>
+          </div>
+        </div>
+        <button
+          onClick={() => setShowCreate(true)}
+          className="px-3 py-1.5 text-sm font-medium text-purple-700 bg-purple-50 rounded-lg hover:bg-purple-100 dark:text-purple-300 dark:bg-purple-900/30 dark:hover:bg-purple-900/50 transition-colors"
+        >
+          + Neue Variante
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {variants.map((v) => {
+          const gap = gapMap[v.id]
+          return (
+            <Link
+              key={v.id}
+              href={`/sdk/iace/${v.id}`}
+              className="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md hover:border-purple-300 transition-all group"
+            >
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-gray-900 dark:text-white truncate group-hover:text-purple-700 dark:group-hover:text-purple-400">
+                    {v.machine_name}
+                  </p>
+                  {v.description && (
+                    <p className="text-xs text-gray-500 mt-0.5 line-clamp-2">{v.description}</p>
+                  )}
+                </div>
+                <svg className="w-4 h-4 text-gray-400 group-hover:text-purple-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                </svg>
+              </div>
+              {gap && gap.gap.additional_hazards > 0 && (
+                <span className="inline-flex items-center mt-2 px-2 py-0.5 text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-300 rounded-full">
+                  +{gap.gap.additional_hazards} Gefaehrdungen
+                </span>
+              )}
+            </Link>
+          )
+        })}
+      </div>
+
+      {renderCreateDialog()}
+    </div>
+  )
+}
@@ -55,9 +55,9 @@ export default function ComponentsPage() {
            Erfassen Sie alle Software-, Firmware-, KI- und Hardware-Komponenten der Maschine.
          </p>
        </div>
-        {!c.showForm && (
+        {!showForm && (
          <div className="flex items-center gap-2">
-            <button onClick={() => c.setShowLibrary(true)}
+            <button onClick={() => setShowLibrary(true)}
              className="flex items-center gap-2 px-3 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors text-sm">
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
@@ -96,7 +96,7 @@ export default function ComponentsPage() {
        />
      )}

-      {c.tree.length > 0 ? (
+      {tree.length > 0 ? (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-700">
          <div className="px-4 py-3 bg-gray-50 dark:bg-gray-750 rounded-t-xl">
            <div className="flex items-center gap-2 text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -108,14 +108,14 @@ export default function ComponentsPage() {
            </div>
          </div>
          <div className="py-1">
-            {c.tree.map((component) => (
+            {tree.map((component) => (
              <ComponentTreeNode key={component.id} component={component} depth={0}
-                onEdit={c.handleEdit} onDelete={c.handleDelete} onAddChild={c.handleAddChild} />
+                onEdit={handleEdit} onDelete={handleDelete} onAddChild={handleAddChild} />
            ))}
          </div>
        </div>
      ) : (
-        !c.showForm && (
+        !showForm && (
          <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
            <div className="w-16 h-16 mx-auto bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mb-4">
              <svg className="w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -128,11 +128,11 @@ export default function ComponentsPage() {
              Erstellen Sie eine hierarchische Struktur aus Software, Firmware, KI-Modulen und Hardware.
            </p>
            <div className="mt-6 flex items-center justify-center gap-3">
-              <button onClick={() => c.setShowLibrary(true)}
+              <button onClick={() => setShowLibrary(true)}
                className="px-6 py-3 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors">
                Aus Bibliothek waehlen
              </button>
-              <button onClick={() => c.setShowForm(true)}
+              <button onClick={() => setShowForm(true)}
                className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                Manuell hinzufuegen
              </button>
@@ -11,13 +11,13 @@ export function AutoSuggestPanel({ matchResult, applying, onApply, onClose }: {
  onClose: () => void
 }) {
  const [selectedHazards, setSelectedHazards] = useState<Set<string>>(
-    new Set(matchResult.suggested_hazards.map(h => h.category))
+    new Set((matchResult.suggested_hazards || []).map(h => h.category))
  )
  const [selectedMeasures, setSelectedMeasures] = useState<Set<string>>(
-    new Set(matchResult.suggested_measures.map(m => m.measure_id))
+    new Set((matchResult.suggested_measures || []).map(m => m.measure_id))
  )
  const [selectedEvidence, setSelectedEvidence] = useState<Set<string>>(
-    new Set(matchResult.suggested_evidence.map(e => e.evidence_id))
+    new Set((matchResult.suggested_evidence || []).map(e => e.evidence_id))
  )

  function toggle<T>(set: Set<T>, setSet: (s: Set<T>) => void, key: T) {
@@ -0,0 +1,195 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  HazardFormData, HAZARD_CATEGORIES, CATEGORY_LABELS, getRiskColor, getRiskLevelISO, RoleInfo,
+} from './types'
+import { RiskBadge } from './RiskBadge'
+
+interface CustomHazardModalProps {
+  onSubmit: (data: HazardFormData) => void
+  onClose: () => void
+  roles: RoleInfo[]
+}
+
+const INITIAL_FORM: HazardFormData = {
+  name: '', description: '', category: 'mechanical', component_id: '',
+  severity: 3, exposure: 3, probability: 3, avoidance: 3,
+  lifecycle_phase: '', trigger_event: '', affected_person: '',
+  possible_harm: '', hazardous_zone: '', machine_module: '',
+}
+
+export function CustomHazardModal({ onSubmit, onClose, roles }: CustomHazardModalProps) {
+  const [form, setForm] = useState<HazardFormData>(INITIAL_FORM)
+  const [submitting, setSubmitting] = useState(false)
+
+  const rInherent = form.severity * form.exposure * form.probability * form.avoidance
+  const riskLevel = getRiskLevelISO(rInherent)
+
+  function set<K extends keyof HazardFormData>(key: K, val: HazardFormData[K]) {
+    setForm(prev => ({ ...prev, [key]: val }))
+  }
+
+  async function handleSave() {
+    if (!form.name.trim()) return
+    setSubmitting(true)
+    try {
+      await onSubmit(form)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const inputCls = 'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white text-sm'
+  const labelCls = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1'
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto mx-4">
+        <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between rounded-t-xl z-10">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Eigene Gefaehrdung erstellen</h2>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+              Maschinenspezifische Gefaehrdung definieren, die nicht in der Bibliothek enthalten ist.
+            </p>
+          </div>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="px-6 py-5 space-y-5">
+          {/* Name + Category */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className={labelCls}>Bezeichnung (DE) *</label>
+              <input type="text" value={form.name} onChange={e => set('name', e.target.value)}
+                placeholder="z.B. Quetschung durch Sondergreifer" className={inputCls} />
+            </div>
+            <div>
+              <label className={labelCls}>Kategorie *</label>
+              <select value={form.category} onChange={e => set('category', e.target.value)} className={inputCls}>
+                {HAZARD_CATEGORIES.map(cat => (
+                  <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Scenario */}
+          <div>
+            <label className={labelCls}>Gefahrensituation / Beschreibung</label>
+            <textarea value={form.description} onChange={e => set('description', e.target.value)}
+              rows={2} placeholder="Beschreibung der Gefahrensituation..."
+              className={inputCls} />
+          </div>
+
+          {/* Trigger + Harm */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className={labelCls}>Ausloeseereignis</label>
+              <input type="text" value={form.trigger_event} onChange={e => set('trigger_event', e.target.value)}
+                placeholder="z.B. Schutztuer offen bei Betrieb" className={inputCls} />
+            </div>
+            <div>
+              <label className={labelCls}>Moeglicher Schaden</label>
+              <input type="text" value={form.possible_harm} onChange={e => set('possible_harm', e.target.value)}
+                placeholder="z.B. Schwere Quetschverletzung" className={inputCls} />
+            </div>
+          </div>
+
+          {/* Affected + Zone */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className={labelCls}>Betroffene Personen</label>
+              {roles.length > 0 ? (
+                <select value={form.affected_person} onChange={e => set('affected_person', e.target.value)} className={inputCls}>
+                  <option value="">-- Bitte waehlen --</option>
+                  {roles.map(r => <option key={r.id} value={r.id}>{r.label_de}</option>)}
+                </select>
+              ) : (
+                <input type="text" value={form.affected_person} onChange={e => set('affected_person', e.target.value)}
+                  placeholder="z.B. Bediener, Wartungspersonal" className={inputCls} />
+              )}
+            </div>
+            <div>
+              <label className={labelCls}>Gefahrenzone</label>
+              <input type="text" value={form.hazardous_zone} onChange={e => set('hazardous_zone', e.target.value)}
+                placeholder="z.B. Greifer-Arbeitsbereich" className={inputCls} />
+            </div>
+          </div>
+
+          {/* Machine module */}
+          <div>
+            <label className={labelCls}>Maschinenmodul</label>
+            <input type="text" value={form.machine_module} onChange={e => set('machine_module', e.target.value)}
+              placeholder="z.B. Sondergreifer Typ X" className={inputCls} />
+          </div>
+
+          {/* Risk sliders */}
+          <div className="bg-gray-50 dark:bg-gray-750 rounded-lg p-4">
+            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+              Standard-Risikobewertung (R = S x F x P x A)
+            </h4>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              {([
+                { label: 'Schwere (S)', key: 'severity' as const, low: 'Gering', high: 'Toedlich' },
+                { label: 'Haeufigkeit (F)', key: 'exposure' as const, low: 'Selten', high: 'Staendig' },
+                { label: 'Wahrscheinl. (P)', key: 'probability' as const, low: 'Unwahrsch.', high: 'Sehr wahrsch.' },
+                { label: 'Vermeidbarkeit (A)', key: 'avoidance' as const, low: 'Leicht', high: 'Unmoeglich' },
+              ]).map(({ label, key, low, high }) => (
+                <div key={key}>
+                  <label className="block text-xs text-gray-600 dark:text-gray-400 mb-1">
+                    {label}: <span className="font-bold">{form[key]}</span>
+                  </label>
+                  <input type="range" min={1} max={5} value={form[key]}
+                    onChange={e => set(key, Number(e.target.value))}
+                    className="w-full accent-purple-600" />
+                  <div className="flex justify-between text-[10px] text-gray-400">
+                    <span>{low}</span><span>{high}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className={`mt-3 p-2 rounded-lg border ${getRiskColor(riskLevel)}`}>
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium">R = {form.severity} x {form.exposure} x {form.probability} x {form.avoidance}</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-bold">{rInherent}</span>
+                  <RiskBadge level={riskLevel} />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Tags hint */}
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
+            <p className="text-xs text-blue-700 dark:text-blue-300">
+              Die Gefaehrdung wird direkt in das Projekt-Hazard-Log aufgenommen.
+              Sie koennen die Risikobewertung anschliessend in der Risikomatrix anpassen.
+            </p>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-end gap-3 rounded-b-xl">
+          <button onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
+            Abbrechen
+          </button>
+          <button onClick={handleSave} disabled={!form.name.trim() || submitting}
+            className={`px-5 py-2 text-sm font-medium rounded-lg transition-colors ${
+              form.name.trim() && !submitting
+                ? 'bg-purple-600 text-white hover:bg-purple-700'
+                : 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'
+            }`}>
+            {submitting ? 'Wird erstellt...' : 'Gefaehrdung erstellen'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,123 @@
+'use client'
+
+import React, { useState, useCallback } from 'react'
+
+interface RegulatoryHint {
+  regulation_id: string
+  regulation_short: string
+  category: string
+  text: string
+  pages?: number[]
+  source_url?: string
+  score: number
+}
+
+interface Props {
+  projectId: string
+  hazardId: string
+  hazardName: string
+}
+
+function categoryBadge(cat: string): string {
+  if (cat === 'trbs') return 'bg-orange-100 text-orange-800'
+  if (cat === 'trgs') return 'bg-red-100 text-red-800'
+  if (cat === 'asr') return 'bg-teal-100 text-teal-800'
+  if (cat === 'osha' || cat.startsWith('ce_')) return 'bg-blue-100 text-blue-800'
+  return 'bg-gray-100 text-gray-700'
+}
+
+export function RegulatoryHintsPanel({ projectId, hazardId, hazardName }: Props) {
+  const [hints, setHints] = useState<RegulatoryHint[]>([])
+  const [loading, setLoading] = useState(false)
+  const [loaded, setLoaded] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const loadHints = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/${hazardId}/regulatory-hints`)
+      if (!res.ok) {
+        setError('Hinweise konnten nicht geladen werden')
+        return
+      }
+      const data = await res.json()
+      setHints(data.hints || [])
+    } catch {
+      setError('Verbindung zum RAG-Service fehlgeschlagen')
+    } finally {
+      setLoading(false)
+      setLoaded(true)
+    }
+  }, [projectId, hazardId])
+
+  if (!loaded) {
+    return (
+      <button
+        onClick={loadHints}
+        disabled={loading}
+        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-purple-700 bg-purple-50 rounded-lg hover:bg-purple-100 dark:text-purple-300 dark:bg-purple-900/30 transition-colors disabled:opacity-50"
+      >
+        {loading ? (
+          <>
+            <span className="animate-spin inline-block w-3 h-3 border border-purple-400 border-t-transparent rounded-full" />
+            Lade Hinweise...
+          </>
+        ) : (
+          <>
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+            TRBS/OSHA Hinweise laden
+          </>
+        )}
+      </button>
+    )
+  }
+
+  if (error) {
+    return <p className="text-xs text-red-500">{error}</p>
+  }
+
+  if (hints.length === 0) {
+    return <p className="text-xs text-gray-400">Keine regulatorischen Hinweise gefunden</p>
+  }
+
+  return (
+    <div className="space-y-2 mt-2">
+      <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
+        Regulatorische Hinweise ({hints.length})
+      </p>
+      {hints.map((hint, i) => (
+        <div
+          key={i}
+          className="p-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50 text-xs space-y-1"
+        >
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className={`inline-flex px-1.5 py-0.5 rounded font-medium ${categoryBadge(hint.category)}`}>
+              {hint.regulation_short || hint.regulation_id}
+            </span>
+            {hint.pages && hint.pages.length > 0 && (
+              <span className="text-gray-400">S. {hint.pages.join(', ')}</span>
+            )}
+            <span className="text-gray-400 ml-auto">{(hint.score * 100).toFixed(0)}% Relevanz</span>
+          </div>
+          <p className="text-gray-700 dark:text-gray-300 leading-relaxed">{hint.text}</p>
+          {hint.source_url && (
+            <a
+              href={hint.source_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-purple-600 hover:text-purple-800 dark:text-purple-400"
+            >
+              Quelle
+              <svg className="w-3 h-3 inline-block ml-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+            </a>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,115 @@
+'use client'
+
+import { useMemo } from 'react'
+import { Hazard } from './types'
+
+export type ResidualFilter = 'all' | 'open' | 'acceptable' | 'not_acceptable'
+
+interface ResidualRiskPanelProps {
+  hazards: Hazard[]
+  /** Explicit accept/reject decisions keyed by hazard ID. */
+  decisions: Record<string, boolean | null>
+  activeFilter: ResidualFilter
+  onFilterChange: (f: ResidualFilter) => void
+}
+
+// RPZ thresholds matching RiskAssessmentTable logic
+function rpz(h: Hazard): number {
+  return h.r_inherent || h.severity * h.exposure * h.probability * (h.avoidance >= 1 ? h.avoidance : 1)
+}
+
+type ResidualStatus = 'acceptable' | 'not_acceptable' | 'open'
+
+export function getResidualStatus(h: Hazard, decision: boolean | null | undefined): ResidualStatus {
+  if (decision === true) return 'acceptable'
+  if (decision === false) return 'not_acceptable'
+  // No explicit decision -- derive from RPZ
+  const r = rpz(h)
+  if (r <= 20) return 'acceptable'
+  if (r <= 60) return 'open' // conditional -- needs explicit decision
+  return 'not_acceptable'
+}
+
+export function ResidualRiskPanel({ hazards, decisions, activeFilter, onFilterChange }: ResidualRiskPanelProps) {
+  const stats = useMemo(() => {
+    let assessed = 0, acceptable = 0, open = 0
+    for (const h of hazards) {
+      const status = getResidualStatus(h, decisions[h.id] ?? null)
+      if (status === 'acceptable') { assessed++; acceptable++ }
+      else if (status === 'not_acceptable') { assessed++ }
+      else { open++ }
+    }
+    return { total: hazards.length, assessed, acceptable, open, notAcceptable: assessed - acceptable }
+  }, [hazards, decisions])
+
+  const pct = stats.total > 0 ? Math.round((stats.assessed / stats.total) * 100) : 0
+
+  const filters: { key: ResidualFilter; label: string; count: number }[] = [
+    { key: 'all', label: 'Alle', count: stats.total },
+    { key: 'open', label: 'Offen', count: stats.open },
+    { key: 'acceptable', label: 'Akzeptabel', count: stats.acceptable },
+    { key: 'not_acceptable', label: 'Nicht akzeptabel', count: stats.notAcceptable },
+  ]
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
+          Restrisiko-Iteration
+        </h2>
+        <span className="text-xs text-gray-500 dark:text-gray-400">ISO 12100 Schritt 3</span>
+      </div>
+
+      {/* Summary stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-center text-xs">
+        <div className="bg-gray-50 dark:bg-gray-750 rounded-lg p-2">
+          <div className="text-lg font-bold text-gray-900 dark:text-white">{stats.assessed}/{stats.total}</div>
+          <div className="text-gray-500">Bewertet</div>
+        </div>
+        <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-2">
+          <div className="text-lg font-bold text-green-700 dark:text-green-400">{stats.acceptable}</div>
+          <div className="text-green-600 dark:text-green-500">Akzeptabel</div>
+        </div>
+        <div className="bg-red-50 dark:bg-red-900/20 rounded-lg p-2">
+          <div className="text-lg font-bold text-red-700 dark:text-red-400">{stats.notAcceptable}</div>
+          <div className="text-red-600 dark:text-red-500">Nicht akzeptabel</div>
+        </div>
+        <div className="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-2">
+          <div className="text-lg font-bold text-yellow-700 dark:text-yellow-400">{stats.open}</div>
+          <div className="text-yellow-600 dark:text-yellow-500">Offen</div>
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div>
+        <div className="flex items-center justify-between text-xs text-gray-500 mb-1">
+          <span>{stats.assessed} von {stats.total} Gefaehrdungen bewertet</span>
+          <span>{pct}%</span>
+        </div>
+        <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+          <div
+            className="h-full rounded-full transition-all duration-300 bg-gradient-to-r from-purple-500 to-purple-600"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Filter buttons */}
+      <div className="flex gap-2 flex-wrap">
+        {filters.map(f => (
+          <button
+            key={f.key}
+            onClick={() => onFilterChange(f.key)}
+            className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+              activeFilter === f.key
+                ? 'bg-purple-600 text-white'
+                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+            }`}
+          >
+            {f.label} ({f.count})
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,373 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import {
+  Hazard, CATEGORY_LABELS, getRiskColor, getRiskLevelLabel, getRiskLevelISO,
+} from './types'
+import { RegulatoryHintsPanel } from './RegulatoryHintsPanel'
+
+interface RiskAssessmentTableProps {
+  projectId: string
+  hazards: Hazard[]
+  onReassess?: () => void
+  /** Explicit accept/reject decisions per hazard ID (true=acceptable, false=not, null=undecided). */
+  decisions?: Record<string, boolean | null>
+  /** Called when user toggles the accept/reject for a hazard. */
+  onDecision?: (hazardId: string, acceptable: boolean | null) => void
+}
+
+/** Editable S/E/P/A state per hazard for the "after measures" column. */
+interface EditState {
+  severity: number; exposure: number; probability: number; avoidance: number
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function rpz(s: number, e: number, p: number, a: number): number {
+  return a >= 1 ? s * e * p * a : s * e * p
+}
+
+function plFromRpz(r: number): string {
+  if (r > 300) return 'e'
+  if (r >= 151) return 'd'
+  if (r >= 61) return 'c'
+  if (r >= 21) return 'b'
+  return 'a'
+}
+
+function silFromRpz(r: number): number {
+  if (r > 300) return 3
+  if (r >= 151) return 2
+  if (r >= 61) return 1
+  return 0
+}
+
+const PL_COLORS: Record<string, string> = {
+  e: 'bg-red-100 text-red-800', d: 'bg-orange-100 text-orange-800',
+  c: 'bg-yellow-100 text-yellow-800', b: 'bg-green-100 text-green-800',
+  a: 'bg-gray-100 text-gray-600',
+}
+
+const SIL_COLORS: Record<number, string> = {
+  3: 'bg-red-100 text-red-800', 2: 'bg-orange-100 text-orange-800',
+  1: 'bg-yellow-100 text-yellow-800', 0: 'bg-gray-100 text-gray-600',
+}
+
+const VALUES = [1, 2, 3, 4, 5]
+
+// ---------------------------------------------------------------------------
+// Inline editable dropdown
+// ---------------------------------------------------------------------------
+
+function InlineSelect({ value, onChange, label }: {
+  value: number; onChange: (v: number) => void; label: string
+}) {
+  return (
+    <select value={value} onChange={e => onChange(Number(e.target.value))}
+      aria-label={label}
+      className="w-12 text-center text-xs border border-gray-300 rounded bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white py-0.5 focus:ring-1 focus:ring-purple-400 focus:border-purple-400">
+      {VALUES.map(v => <option key={v} value={v}>{v}</option>)}
+    </select>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+export function RiskAssessmentTable({ projectId, hazards, onReassess, decisions, onDecision }: RiskAssessmentTableProps) {
+  const [mitCounts, setMitCounts] = useState<Record<string, number>>({})
+  const [edits, setEdits] = useState<Record<string, EditState>>({})
+  const [saving, setSaving] = useState<string | null>(null)
+  const [normsByCategory, setNormsByCategory] = useState<Record<string, string[]>>({})
+  const [expandedHazard, setExpandedHazard] = useState<string | null>(null)
+
+  // Fetch norms library and build category→norm-numbers map
+  useEffect(() => {
+    fetch(`/api/sdk/v1/iace/norms-library`)
+      .then(r => r.ok ? r.json() : null)
+      .then(json => {
+        if (!json?.norms) return
+        const map: Record<string, string[]> = {}
+        for (const n of json.norms) {
+          for (const cat of (n.hazard_cats || [])) {
+            if (!map[cat]) map[cat] = []
+            if (map[cat].length < 3) map[cat].push(n.number)
+          }
+        }
+        setNormsByCategory(map)
+      })
+      .catch(() => {})
+  }, [])
+
+  // Fetch mitigation counts per hazard
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`)
+        if (!res.ok) return
+        const json = await res.json()
+        const mits: { hazard_id: string }[] = json.mitigations || json || []
+        const counts: Record<string, number> = {}
+        for (const m of mits) {
+          counts[m.hazard_id] = (counts[m.hazard_id] || 0) + 1
+        }
+        setMitCounts(counts)
+      } catch { /* ignore */ }
+    })()
+  }, [projectId])
+
+  // Initialise edit state from hazard defaults
+  useEffect(() => {
+    const init: Record<string, EditState> = {}
+    for (const h of hazards) {
+      if (!edits[h.id]) {
+        // Read from risk_assessment if available (enriched response), fallback to hazard fields
+        const ra = (h as unknown as Record<string, unknown>).risk_assessment as Record<string, number> | null
+        init[h.id] = {
+          severity: ra?.severity || h.severity || 3,
+          exposure: ra?.exposure || h.exposure || 3,
+          probability: ra?.probability || h.probability || 3,
+          avoidance: h.avoidance || 0,
+        }
+      }
+    }
+    if (Object.keys(init).length > 0) setEdits(prev => ({ ...prev, ...init }))
+  }, [hazards]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const updateEdit = useCallback((id: string, field: keyof EditState, value: number) => {
+    setEdits(prev => ({ ...prev, [id]: { ...prev[id], [field]: value } }))
+  }, [])
+
+  async function handleReassess(hazardId: string) {
+    const e = edits[hazardId]
+    if (!e) return
+    setSaving(hazardId)
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/${hazardId}/reassess`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          hazard_id: hazardId, severity: e.severity, exposure: e.exposure,
+          probability: e.probability, avoidance: e.avoidance,
+          control_maturity: 3, control_coverage: 0.5, test_evidence_strength: 0.5,
+        }),
+      })
+      if (res.ok) onReassess?.()
+    } catch (err) { console.error('Reassess failed:', err) }
+    finally { setSaving(null) }
+  }
+
+  const PAGE_SIZE = 50
+  const [page, setPage] = useState(0)
+  const sorted = [...hazards].sort((a, b) => (b.r_inherent || 0) - (a.r_inherent || 0))
+  const totalPages = Math.ceil(sorted.length / PAGE_SIZE)
+  const paged = sorted.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE)
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <h2 className="text-sm font-semibold text-gray-900 dark:text-white">Risikobewertungstabelle (ISO 12100)</h2>
+        <div className="flex items-center gap-3">
+          {totalPages > 1 && (
+            <div className="flex items-center gap-1 text-xs">
+              <button onClick={() => setPage(Math.max(0, page - 1))} disabled={page === 0}
+                className="px-2 py-1 rounded border border-gray-200 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed">&lt;</button>
+              <span className="px-2 text-gray-600">Seite {page + 1} / {totalPages}</span>
+              <button onClick={() => setPage(Math.min(totalPages - 1, page + 1))} disabled={page >= totalPages - 1}
+                className="px-2 py-1 rounded border border-gray-200 hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed">&gt;</button>
+            </div>
+          )}
+          <span className="text-xs text-gray-500">{hazards.length} Gefaehrdungen</span>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-xs whitespace-nowrap">
+          <thead>
+            {/* Group header */}
+            <tr className="bg-gray-100 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
+              <th colSpan={2} className="px-3 py-1.5 text-left font-semibold text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-gray-600">Gefaehrdung</th>
+              <th colSpan={5} className="px-3 py-1.5 text-center font-semibold text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-gray-600">Erstbewertung</th>
+              <th colSpan={6} className="px-3 py-1.5 text-center font-semibold text-purple-700 dark:text-purple-400 border-r border-gray-200 dark:border-gray-600">Nach Massnahmen (editierbar)</th>
+              <th colSpan={2} className="px-3 py-1.5 text-center font-semibold text-gray-700 dark:text-gray-300 border-r border-gray-200 dark:border-gray-600 cursor-help" title="Vorab-Einschaetzung — keine normative Berechnung">SIL / PL *</th>
+              <th colSpan={2} className="px-3 py-1.5 text-center font-semibold text-gray-700 dark:text-gray-300">Status</th>
+            </tr>
+            {/* Column header */}
+            <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
+              <th className="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider">Bezeichnung</th>
+              <th className="px-3 py-2 text-left font-medium text-gray-500 uppercase tracking-wider border-r border-gray-200 dark:border-gray-600">Kategorie</th>
+              {/* Initial */}
+              <th className="px-2 py-2 text-center font-medium text-gray-500">S</th>
+              <th className="px-2 py-2 text-center font-medium text-gray-500">E</th>
+              <th className="px-2 py-2 text-center font-medium text-gray-500">P</th>
+              <th className="px-2 py-2 text-center font-medium text-gray-500">RPZ</th>
+              <th className="px-2 py-2 text-center font-medium text-gray-500 border-r border-gray-200 dark:border-gray-600">Risiko</th>
+              {/* After */}
+              <th className="px-2 py-2 text-center font-medium text-purple-600">S</th>
+              <th className="px-2 py-2 text-center font-medium text-purple-600">E</th>
+              <th className="px-2 py-2 text-center font-medium text-purple-600">P</th>
+              <th className="px-2 py-2 text-center font-medium text-purple-600">RPZ</th>
+              <th className="px-2 py-2 text-center font-medium text-purple-600">Risiko</th>
+              <th className="px-2 py-2 text-center font-medium text-purple-600 border-r border-gray-200 dark:border-gray-600"></th>
+              {/* SIL/PL */}
+              <th className="px-2 py-2 text-center font-medium text-gray-500">SIL</th>
+              <th className="px-2 py-2 text-center font-medium text-gray-500 border-r border-gray-200 dark:border-gray-600">PL</th>
+              {/* Status */}
+              <th className="px-2 py-2 text-center font-medium text-gray-500">Massn.</th>
+              <th className="px-2 py-2 text-center font-medium text-gray-500">Akzeptabel</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
+            {paged.map(h => {
+              const ra = (h as unknown as Record<string, unknown>).risk_assessment as Record<string, number> | null
+              const initS = ra?.severity || h.severity || 3
+              const initE = ra?.exposure || h.exposure || 3
+              const initP = ra?.probability || h.probability || 3
+              const initA = h.avoidance || 0
+              const e = edits[h.id]
+              const initRpz = rpz(initS, initE, initP, initA)
+              const afterRpz = e ? rpz(e.severity, e.exposure, e.probability, e.avoidance) : initRpz
+              const afterLevel = getRiskLevelISO(afterRpz)
+              const sil = silFromRpz(afterRpz)
+              const pl = plFromRpz(afterRpz)
+              const mc = mitCounts[h.id] || 0
+              const changed = e && (e.severity !== initS || e.exposure !== initE || e.probability !== initP)
+
+              return (
+                <React.Fragment key={h.id}>
+                <tr className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
+                  {/* Hazard info */}
+                  <td className="px-3 py-2 min-w-[250px]">
+                    <button onClick={() => setExpandedHazard(expandedHazard === h.id ? null : h.id)} className="text-left group">
+                      <div className="font-medium text-gray-900 dark:text-white group-hover:text-purple-700 dark:group-hover:text-purple-400 transition-colors">{h.name}</div>
+                    </button>
+                    {h.component_name && <div className="text-[10px] text-gray-400">{h.component_name}</div>}
+                  </td>
+                  <td className="px-3 py-2 border-r border-gray-200 dark:border-gray-600">
+                    <span className="inline-block px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-[10px] font-medium">
+                      {CATEGORY_LABELS[h.category] || h.category}
+                    </span>
+                    {normsByCategory[h.category]?.length > 0 && (
+                      <div className="text-[9px] text-blue-500 mt-0.5 truncate" title={normsByCategory[h.category].join(', ')}>
+                        {normsByCategory[h.category].slice(0, 2).join(', ')}
+                      </div>
+                    )}
+                  </td>
+                  {/* Initial S/E/P/RPZ/Risk */}
+                  <td className="px-2 py-2 text-center text-gray-700 dark:text-gray-300">{initS}</td>
+                  <td className="px-2 py-2 text-center text-gray-700 dark:text-gray-300">{initE}</td>
+                  <td className="px-2 py-2 text-center text-gray-700 dark:text-gray-300">{initP}</td>
+                  <td className="px-2 py-2 text-center font-bold text-gray-900 dark:text-white">{initRpz}</td>
+                  <td className="px-2 py-2 text-center border-r border-gray-200 dark:border-gray-600">
+                    <span className={`inline-block px-1.5 py-0.5 rounded-full text-[10px] font-medium border ${getRiskColor(h.risk_level)}`}>
+                      {getRiskLevelLabel(h.risk_level)}
+                    </span>
+                  </td>
+                  {/* After measures (editable) */}
+                  <td className="px-1 py-2 text-center">{e && <InlineSelect value={e.severity} onChange={v => updateEdit(h.id, 'severity', v)} label="S nach" />}</td>
+                  <td className="px-1 py-2 text-center">{e && <InlineSelect value={e.exposure} onChange={v => updateEdit(h.id, 'exposure', v)} label="E nach" />}</td>
+                  <td className="px-1 py-2 text-center">{e && <InlineSelect value={e.probability} onChange={v => updateEdit(h.id, 'probability', v)} label="P nach" />}</td>
+                  <td className="px-2 py-2 text-center font-bold text-purple-900 dark:text-purple-300">{afterRpz}</td>
+                  <td className="px-2 py-2 text-center">
+                    <span className={`inline-block px-1.5 py-0.5 rounded-full text-[10px] font-medium border ${getRiskColor(afterLevel)}`}>
+                      {getRiskLevelLabel(afterLevel)}
+                    </span>
+                  </td>
+                  <td className="px-1 py-2 text-center border-r border-gray-200 dark:border-gray-600">
+                    {changed && (
+                      <button onClick={() => handleReassess(h.id)} disabled={saving === h.id}
+                        className="px-1.5 py-0.5 bg-purple-600 text-white rounded text-[10px] hover:bg-purple-700 disabled:opacity-50 transition-colors">
+                        {saving === h.id ? '...' : 'Speichern'}
+                      </button>
+                    )}
+                  </td>
+                  {/* SIL / PL (Vorab-Einschaetzung) */}
+                  <td className="px-2 py-2 text-center">
+                    <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold cursor-help ${SIL_COLORS[sil]}`}
+                      title="Vorab-Einschaetzung nach vereinfachtem Risikograph — Validierung durch Funktionale-Sicherheits-Ingenieur erforderlich (ISO 13849 / IEC 62061)">
+                      {sil > 0 ? `SIL ${sil}` : '-'}
+                    </span>
+                  </td>
+                  <td className="px-2 py-2 text-center border-r border-gray-200 dark:border-gray-600">
+                    <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-bold cursor-help ${PL_COLORS[pl]}`}
+                      title="Vorab-Einschaetzung — PL-Bestimmung nach ISO 13849-1 erfordert vollstaendige Sicherheitsfunktions-Analyse">
+                      PL {pl}
+                    </span>
+                  </td>
+                  {/* Status */}
+                  <td className="px-2 py-2 text-center">
+                    <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-medium ${mc > 0 ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500'}`}>
+                      {mc}
+                    </span>
+                  </td>
+                  <td className="px-2 py-2 text-center">
+                    {onDecision ? (
+                      <div className="flex items-center justify-center gap-1">
+                        <button onClick={() => onDecision(h.id, decisions?.[h.id] === true ? null : true)}
+                          title="Akzeptabel"
+                          className={`w-5 h-5 rounded-full text-[10px] leading-5 text-center transition-colors ${
+                            decisions?.[h.id] === true
+                              ? 'bg-green-500 text-white ring-2 ring-green-300'
+                              : 'bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-400 hover:bg-green-200'
+                          }`}>&#10003;</button>
+                        <button onClick={() => onDecision(h.id, decisions?.[h.id] === false ? null : false)}
+                          title="Nicht akzeptabel"
+                          className={`w-5 h-5 rounded-full text-[10px] leading-5 text-center transition-colors ${
+                            decisions?.[h.id] === false
+                              ? 'bg-red-500 text-white ring-2 ring-red-300'
+                              : 'bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-400 hover:bg-red-200'
+                          }`}>&#10007;</button>
+                      </div>
+                    ) : (
+                      afterRpz <= 20 ? (
+                        <span className="inline-block w-4 h-4 rounded-full bg-green-500 text-white text-[10px] leading-4 text-center" title="Akzeptabel">&#10003;</span>
+                      ) : afterRpz <= 60 ? (
+                        <span className="inline-block w-4 h-4 rounded-full bg-yellow-400 text-yellow-900 text-[10px] leading-4 text-center" title="Bedingt">&#8776;</span>
+                      ) : (
+                        <span className="inline-block w-4 h-4 rounded-full bg-red-500 text-white text-[10px] leading-4 text-center" title="Nicht akzeptabel">&#10007;</span>
+                      )
+                    )}
+                  </td>
+                </tr>
+                {expandedHazard === h.id && (
+                  <tr className="bg-purple-50/30 dark:bg-purple-900/5">
+                    <td colSpan={17} className="px-4 py-3 space-y-3">
+                      {/* Hazard details */}
+                      {h.scenario && <p className="text-xs text-gray-600 dark:text-gray-300"><strong>Szenario:</strong> {h.scenario}</p>}
+                      {h.possible_harm && <p className="text-xs text-gray-600"><strong>Moeglicher Schaden:</strong> {h.possible_harm}</p>}
+                      {/* Match reasons (explainability) */}
+                      {h.match_reasons && h.match_reasons.length > 0 && (
+                        <div className="text-[10px] text-gray-500">
+                          <strong>Erkannt weil:</strong>{' '}
+                          {h.match_reasons
+                            .filter(r => r.met)
+                            .map((r, i) => (
+                              <span key={i} className="inline-flex items-center gap-0.5 mr-1.5 px-1.5 py-0.5 rounded bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400">
+                                {r.type === 'required_component_tag' ? 'Komponente' : r.type === 'required_energy_tag' ? 'Energie' : r.type === 'no_exclusion' ? 'Kein Ausschluss' : 'Lifecycle'}: {r.tag}
+                              </span>
+                            ))}
+                        </div>
+                      )}
+                      {/* Regulatory hints */}
+                      <RegulatoryHintsPanel projectId={projectId} hazardId={h.id} hazardName={h.name} />
+                    </td>
+                  </tr>
+                )}
+              </React.Fragment>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {hazards.length === 0 && (
+        <div className="px-4 py-8 text-center text-sm text-gray-500">
+          Keine Gefaehrdungen vorhanden. Fuegen Sie zuerst Gefaehrdungen hinzu.
+        </div>
+      )}
+    </div>
+  )
+}
@@ -19,9 +19,11 @@ export interface Hazard {
  affected_person: string
  possible_harm: string
  hazardous_zone: string
+  scenario?: string
  review_status: string
  created_at: string
  source?: string
+  match_reasons?: { type: string; tag: string; met: boolean }[]
 }

 export interface LibraryHazard {
@@ -169,5 +169,6 @@ export function useHazards(projectId: string) {
    suggestingAI, matchingPatterns, matchResult, setMatchResult, applyingPatterns,
    fetchLibrary, handleAddFromLibrary, handleSubmit,
    handleAISuggestions, handlePatternMatching, handleApplyPatterns, handleDelete,
+    refetch: fetchHazards,
  }
 }
@@ -1,17 +1,48 @@
 'use client'

-import React from 'react'
+import React, { useState, useMemo, useCallback } from 'react'
 import { useParams } from 'next/navigation'
 import { HazardForm } from './_components/HazardForm'
 import { HazardTable } from './_components/HazardTable'
+import { RiskAssessmentTable } from './_components/RiskAssessmentTable'
+import { ResidualRiskPanel, getResidualStatus } from './_components/ResidualRiskPanel'
+import type { ResidualFilter } from './_components/ResidualRiskPanel'
 import { LibraryModal } from './_components/LibraryModal'
 import { AutoSuggestPanel } from './_components/AutoSuggestPanel'
+import { CustomHazardModal } from './_components/CustomHazardModal'
 import { useHazards } from './_hooks/useHazards'

+type ViewMode = 'list' | 'risk'
+
 export default function HazardsPage() {
  const params = useParams()
  const projectId = params.projectId as string
  const h = useHazards(projectId)
+  const [view, setView] = useState<ViewMode>('risk')
+  const [showCustomModal, setShowCustomModal] = useState(false)
+  const [residualFilter, setResidualFilter] = useState<ResidualFilter>('all')
+  const [decisions, setDecisions] = useState<Record<string, boolean | null>>({})
+
+  const handleDecision = useCallback(async (hazardId: string, acceptable: boolean | null) => {
+    setDecisions(prev => ({ ...prev, [hazardId]: acceptable }))
+    if (acceptable !== null) {
+      try {
+        await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/${hazardId}/reassess`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ hazard_id: hazardId, is_acceptable: acceptable }),
+        })
+      } catch (err) { console.error('Decision save failed:', err) }
+    }
+  }, [projectId])
+
+  const filteredHazards = useMemo(() => {
+    if (residualFilter === 'all') return h.hazards
+    return h.hazards.filter(hz => {
+      const status = getResidualStatus(hz, decisions[hz.id] ?? null)
+      return status === residualFilter
+    })
+  }, [h.hazards, decisions, residualFilter])

  if (h.loading) {
    return (
@@ -29,9 +60,20 @@ export default function HazardsPage() {
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Gefaehrdungsanalyse mit 4-Faktor-Risikobewertung (S x F x P x A).
          </p>
+          <div className="mt-2 flex rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden text-xs">
+            <button onClick={() => setView('list')}
+              className={`px-3 py-1.5 font-medium transition-colors ${view === 'list' ? 'bg-purple-600 text-white' : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50'}`}>
+              Hazard-Liste
+            </button>
+            <button onClick={() => setView('risk')}
+              className={`px-3 py-1.5 font-medium transition-colors border-l border-gray-200 dark:border-gray-600 ${view === 'risk' ? 'bg-purple-600 text-white' : 'bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-50'}`}>
+              Risikobewertung
+            </button>
+          </div>
        </div>
        <div className="flex items-center gap-2">
          <button onClick={h.handlePatternMatching} disabled={h.matchingPatterns}
+            title="Erkennt automatisch Gefaehrdungen anhand der Komponenten-Tags und Lebensphasen"
            className="flex items-center gap-2 px-3 py-2 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors disabled:opacity-50 text-sm">
            {h.matchingPatterns ? (
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600" />
@@ -40,18 +82,7 @@ export default function HazardsPage() {
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
              </svg>
            )}
-            Auto-Erkennung
-          </button>
-          <button onClick={h.handleAISuggestions} disabled={h.suggestingAI}
-            className="flex items-center gap-2 px-3 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors disabled:opacity-50 text-sm">
-            {h.suggestingAI ? (
-              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-600" />
-            ) : (
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-              </svg>
-            )}
-            KI-Vorschlaege
+            Gefaehrdungen erkennen
          </button>
          <button onClick={h.fetchLibrary}
            className="flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm">
@@ -60,6 +91,13 @@ export default function HazardsPage() {
            </svg>
            Aus Bibliothek
          </button>
+          <button onClick={() => setShowCustomModal(true)}
+            className="flex items-center gap-2 px-3 py-2 border border-orange-300 text-orange-700 rounded-lg hover:bg-orange-50 transition-colors text-sm">
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
+            Eigene Gefaehrdung
+          </button>
          <button onClick={() => h.setShowForm(true)}
            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm">
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -70,12 +108,12 @@ export default function HazardsPage() {
        </div>
      </div>

-      {h.matchResult && h.matchResult.matched_patterns.length > 0 && (
+      {h.matchResult && h.matchResult.matched_patterns?.length > 0 && (
        <AutoSuggestPanel projectId={projectId} matchResult={h.matchResult} applying={h.applyingPatterns}
          onApply={h.handleApplyPatterns} onClose={() => h.setMatchResult(null)} />
      )}

-      {h.matchResult && h.matchResult.matched_patterns.length === 0 && (
+      {h.matchResult && (!h.matchResult.matched_patterns || h.matchResult.matched_patterns.length === 0) && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-start gap-3">
          <svg className="w-5 h-5 text-yellow-600 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -120,8 +158,23 @@ export default function HazardsPage() {
        <LibraryModal library={h.library} onAdd={h.handleAddFromLibrary} onClose={() => h.setShowLibrary(false)} />
      )}

+      {showCustomModal && (
+        <CustomHazardModal roles={h.roles}
+          onSubmit={async (data) => { await h.handleSubmit(data); setShowCustomModal(false) }}
+          onClose={() => setShowCustomModal(false)} />
+      )}
+
      {h.hazards.length > 0 ? (
-        <HazardTable hazards={h.hazards} lifecyclePhases={h.lifecyclePhases} onDelete={h.handleDelete} />
+        view === 'risk' ? (
+          <>
+            <ResidualRiskPanel hazards={h.hazards} decisions={decisions}
+              activeFilter={residualFilter} onFilterChange={setResidualFilter} />
+            <RiskAssessmentTable projectId={projectId} hazards={filteredHazards}
+              onReassess={h.refetch} decisions={decisions} onDecision={handleDecision} />
+          </>
+        ) : (
+          <HazardTable hazards={h.hazards} lifecyclePhases={h.lifecyclePhases} onDelete={h.handleDelete} />
+        )
      ) : (
        !h.showForm && (
          <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
@@ -0,0 +1,125 @@
+'use client'
+
+interface TextInputProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  helpText?: string
+  disabled?: boolean
+}
+
+export function TextInput({ label, value, onChange, placeholder, helpText, disabled }: TextInputProps) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
+      {helpText && <p className="text-xs text-gray-400 mb-1.5">{helpText}</p>}
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        className="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:text-gray-400"
+      />
+    </div>
+  )
+}
+
+interface TextAreaProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  helpText?: string
+  rows?: number
+}
+
+export function TextArea({ label, value, onChange, placeholder, helpText, rows = 6 }: TextAreaProps) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
+      {helpText && <p className="text-xs text-gray-400 mb-1.5">{helpText}</p>}
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        className="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-y"
+      />
+    </div>
+  )
+}
+
+interface SelectInputProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  options: string[]
+  placeholder?: string
+  helpText?: string
+}
+
+export function SelectInput({ label, value, onChange, options, placeholder, helpText }: SelectInputProps) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
+      {helpText && <p className="text-xs text-gray-400 mb-1.5">{helpText}</p>}
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+      >
+        <option value="">{placeholder || '-- Bitte waehlen --'}</option>
+        {options.map((opt) => (
+          <option key={opt} value={opt}>{opt}</option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+interface CheckboxGroupProps {
+  label: string
+  values: string[]
+  onChange: (values: string[]) => void
+  options: string[]
+  helpText?: string
+}
+
+export function CheckboxGroup({ label, values, onChange, options, helpText }: CheckboxGroupProps) {
+  const toggle = (opt: string) => {
+    if (values.includes(opt)) {
+      onChange(values.filter((v) => v !== opt))
+    } else {
+      onChange([...values, opt])
+    }
+  }
+
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
+      {helpText && <p className="text-xs text-gray-400 mb-1.5">{helpText}</p>}
+      <div className="flex flex-wrap gap-2">
+        {options.map((opt) => (
+          <label
+            key={opt}
+            className={`flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border cursor-pointer transition-colors ${
+              values.includes(opt)
+                ? 'bg-purple-50 border-purple-300 text-purple-700 dark:bg-purple-900/40 dark:border-purple-600 dark:text-purple-300'
+                : 'bg-white border-gray-200 text-gray-700 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300'
+            }`}
+          >
+            <input
+              type="checkbox"
+              checked={values.includes(opt)}
+              onChange={() => toggle(opt)}
+              className="w-3.5 h-3.5 text-purple-600 rounded"
+            />
+            {opt}
+          </label>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,209 @@
+'use client'
+
+import { SectionCard } from './SectionCard'
+import { TextInput, TextArea, SelectInput, CheckboxGroup } from './FormFields'
+import {
+  FORM_SECTIONS,
+  AREA_OF_USE_OPTIONS,
+  OPERATING_MODE_OPTIONS,
+  PERSON_GROUP_OPTIONS,
+  type LimitsFormData,
+} from '../_types'
+
+interface LimitsFormSectionsProps {
+  data: LimitsFormData
+  onChange: (field: keyof LimitsFormData, value: string | string[]) => void
+  prefilled: { machine_name?: string; machine_type?: string; manufacturer?: string }
+}
+
+export function LimitsFormSections({ data, onChange, prefilled }: LimitsFormSectionsProps) {
+  return (
+    <div className="space-y-3">
+      {/* Section 1: Allgemeine Produktbeschreibung */}
+      <SectionCard section={FORM_SECTIONS[0]} defaultOpen>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <TextInput
+            label="Maschinenbezeichnung *"
+            value={data.machine_designation || prefilled.machine_name || ''}
+            onChange={(v) => onChange('machine_designation', v)}
+            placeholder="z.B. Roboterzelle RZ-500"
+            helpText={prefilled.machine_name ? `Vorausgefuellt aus Projekt: ${prefilled.machine_name}` : undefined}
+          />
+          <TextInput
+            label="Maschinentyp *"
+            value={data.machine_type || prefilled.machine_type || ''}
+            onChange={(v) => onChange('machine_type', v)}
+            placeholder="z.B. Roboterzelle / CNC-Maschine"
+            helpText={prefilled.machine_type ? `Vorausgefuellt aus Projekt: ${prefilled.machine_type}` : undefined}
+          />
+          <TextInput
+            label="Hersteller *"
+            value={data.manufacturer || prefilled.manufacturer || ''}
+            onChange={(v) => onChange('manufacturer', v)}
+            placeholder="z.B. Mueller Maschinenbau GmbH"
+            helpText={prefilled.manufacturer ? `Vorausgefuellt aus Projekt: ${prefilled.manufacturer}` : undefined}
+          />
+          <TextInput
+            label="Baujahr"
+            value={data.year_of_construction}
+            onChange={(v) => onChange('year_of_construction', v)}
+            placeholder="z.B. 2026"
+          />
+          <TextInput
+            label="Seriennummer"
+            value={data.serial_number}
+            onChange={(v) => onChange('serial_number', v)}
+            placeholder="z.B. SN-2026-001"
+          />
+        </div>
+        <TextArea
+          label="Allgemeine Beschreibung *"
+          value={data.general_description}
+          onChange={(v) => onChange('general_description', v)}
+          placeholder="Die EIGENBAU-Zelle ist ein Arbeitstisch mit integriertem Roboterarm, der Bauteile aus einem Magazin entnimmt und dem Bearbeitungszentrum zufuehrt..."
+          helpText="Beschreiben Sie Aufbau, Funktion und Arbeitsweise der Maschine/Anlage ausfuehrlich."
+          rows={12}
+        />
+      </SectionCard>
+
+      {/* Section 2: Bestimmungsgemasse Verwendung */}
+      <SectionCard section={FORM_SECTIONS[1]}>
+        <TextArea
+          label="Verwendungszweck *"
+          value={data.intended_purpose}
+          onChange={(v) => onChange('intended_purpose', v)}
+          placeholder="Zum Einsatz an Bearbeitungszentren, zur Zufuehrung von Bauteilen aus einem Magazin in die Bearbeitungsmaschine..."
+          helpText="Beschreiben Sie den bestimmungsgemassen Einsatzzweck der Maschine."
+          rows={4}
+        />
+        <SelectInput
+          label="Einsatzbereich *"
+          value={data.area_of_use}
+          onChange={(v) => onChange('area_of_use', v)}
+          options={AREA_OF_USE_OPTIONS}
+        />
+        <CheckboxGroup
+          label="Betriebsarten"
+          values={data.operating_modes}
+          onChange={(v) => onChange('operating_modes', v)}
+          options={OPERATING_MODE_OPTIONS}
+          helpText="Waehlen Sie alle zutreffenden Betriebsarten."
+        />
+        <TextArea
+          label="Varianten"
+          value={data.variants}
+          onChange={(v) => onChange('variants', v)}
+          placeholder="Variante A: nicht-kollaborierend mit Schutzzaun&#10;Variante B: kollaborierend mit Kraft-/Leistungsbegrenzung"
+          helpText="Beschreiben Sie verschiedene Ausbauvarianten oder Konfigurationen der Maschine."
+          rows={3}
+        />
+      </SectionCard>
+
+      {/* Section 3: Vorhersehbare Fehlanwendung */}
+      <SectionCard section={FORM_SECTIONS[2]}>
+        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3 mb-2">
+          <p className="text-xs text-amber-700 dark:text-amber-300">
+            Dokumentieren Sie alle vernuenftigerweise vorhersehbaren Fehlanwendungen gemaess ISO 12100 Abschnitt 5.4. Beruecksichtigen Sie dabei reflexartiges Verhalten, mangelnde Konzentration und Verhaltensweisen nach dem Grundsatz des geringsten Widerstandes.
+          </p>
+        </div>
+        <TextArea
+          label="Vorhersehbare Fehlanwendungen *"
+          value={data.foreseeable_misuses}
+          onChange={(v) => onChange('foreseeable_misuses', v)}
+          placeholder="- Eingriff in laufende Maschine bei Stoerung&#10;- Umgehung von Schutzeinrichtungen (Tuerschalter ueberbrueckt)&#10;- Betrieb mit offenem Schutzzaun&#10;- Unqualifiziertes Personal fuehrt Wartungsarbeiten durch&#10;- Verwendung nicht freigegebener Werkzeuge/Materialien"
+          helpText="Jeweils eine Fehlanwendung pro Zeile, mit Stichpunkt-Aufzaehlung."
+          rows={10}
+        />
+      </SectionCard>
+
+      {/* Section 4: Grenzen der Maschine */}
+      <SectionCard section={FORM_SECTIONS[3]}>
+        <TextArea
+          label="Raeumliche Grenzen *"
+          value={data.spatial_limits}
+          onChange={(v) => onChange('spatial_limits', v)}
+          placeholder="Abmessungen: 2000 x 1500 x 1800 mm (LxBxH)&#10;Arbeitsraum Roboter: Radius 850mm&#10;Zugangsbereich: nur von vorne&#10;Sicherheitsabstand: min. 500mm zum Schutzzaun"
+          helpText="Abmessungen, Arbeitsraum, Zugangsbereich, Sicherheitsabstaende."
+          rows={4}
+        />
+        <TextArea
+          label="Zeitliche Grenzen"
+          value={data.temporal_limits}
+          onChange={(v) => onChange('temporal_limits', v)}
+          placeholder="Geplante Lebensdauer: 15 Jahre&#10;Wartungsintervall: alle 2000 Betriebsstunden&#10;Max. Betriebsdauer pro Tag: 16 Stunden (2-Schicht)"
+          helpText="Lebensdauer, Wartungsintervalle, Nutzungsdauer pro Tag/Woche."
+          rows={3}
+        />
+        <TextArea
+          label="Betriebsbedingungen"
+          value={data.operating_conditions}
+          onChange={(v) => onChange('operating_conditions', v)}
+          placeholder="Temperatur: +5 bis +40 Grad C&#10;Luftfeuchtigkeit: max. 80% (nicht kondensierend)&#10;Hoehenlage: bis 1000m ue.NN&#10;Keine explosionsgefaehrdete Atmosphaere"
+          helpText="Temperatur, Feuchtigkeit, Staub, Vibrationen, besondere Umgebungsbedingungen."
+          rows={4}
+        />
+        <TextArea
+          label="Energieversorgung"
+          value={data.energy_supply}
+          onChange={(v) => onChange('energy_supply', v)}
+          placeholder="Elektrisch: 400V/50Hz, 32A Absicherung&#10;Druckluft: 6 bar, oelfrei&#10;Pneumatik: 6 bar Betriebsdruck"
+          helpText="Spannung, Absicherung, Druckluftversorgung, weitere Energiequellen."
+          rows={3}
+        />
+      </SectionCard>
+
+      {/* Section 5: Schnittstellen */}
+      <SectionCard section={FORM_SECTIONS[4]}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <TextArea
+            label="Mechanische Schnittstellen"
+            value={data.mechanical_interfaces}
+            onChange={(v) => onChange('mechanical_interfaces', v)}
+            placeholder="- Flanschverbindung zum Bearbeitungszentrum&#10;- Magazin-Andockstation&#10;- Greifer-Wechselsystem"
+            rows={3}
+          />
+          <TextArea
+            label="Elektrische Schnittstellen"
+            value={data.electrical_interfaces}
+            onChange={(v) => onChange('electrical_interfaces', v)}
+            placeholder="- ProfiNET Steuerungsbus&#10;- 24V Sicherheitskreis&#10;- E/A-Module fuer Sensorik"
+            rows={3}
+          />
+          <TextArea
+            label="Software-Schnittstellen"
+            value={data.software_interfaces}
+            onChange={(v) => onChange('software_interfaces', v)}
+            placeholder="- OPC UA Server&#10;- REST API fuer MES-Anbindung&#10;- HMI Webinterface"
+            rows={3}
+          />
+          <TextArea
+            label="Pneumatische/Hydraulische Schnittstellen"
+            value={data.pneumatic_hydraulic_interfaces}
+            onChange={(v) => onChange('pneumatic_hydraulic_interfaces', v)}
+            placeholder="- 6mm Druckluftanschluss&#10;- Wartungseinheit mit Filter/Regler&#10;- Abluft ueber Schalldaempfer"
+            rows={3}
+          />
+        </div>
+      </SectionCard>
+
+      {/* Section 6: Betroffene Personen */}
+      <SectionCard section={FORM_SECTIONS[5]}>
+        <CheckboxGroup
+          label="Personengruppen"
+          values={data.person_groups}
+          onChange={(v) => onChange('person_groups', v)}
+          options={PERSON_GROUP_OPTIONS}
+          helpText="Waehlen Sie alle Personengruppen, die mit der Maschine in Beruehrung kommen koennen."
+        />
+        <TextArea
+          label="Qualifikationsanforderungen"
+          value={data.qualification_requirements}
+          onChange={(v) => onChange('qualification_requirements', v)}
+          placeholder="Bedienpersonal: Unterweisung gemaess Betriebsanleitung, min. 18 Jahre&#10;Einrichter: Facharbeiter Mechatronik + Herstellerschulung&#10;Wartungspersonal: Elektrofachkraft fuer Elektroanschluss, Mechatroniker fuer mechanische Wartung"
+          helpText="Mindestqualifikation je Personengruppe mit Verweis auf erforderliche Schulungen."
+          rows={4}
+        />
+      </SectionCard>
+    </div>
+  )
+}
@@ -0,0 +1,91 @@
+'use client'
+
+import { useState, type ReactNode } from 'react'
+import type { FormSection } from '../_types'
+
+function SectionIcon({ icon, className }: { icon: FormSection['icon']; className?: string }) {
+  const cls = className || 'w-5 h-5'
+  switch (icon) {
+    case 'clipboard':
+      return (
+        <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+        </svg>
+      )
+    case 'target':
+      return (
+        <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+        </svg>
+      )
+    case 'alert':
+      return (
+        <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+      )
+    case 'box':
+      return (
+        <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+        </svg>
+      )
+    case 'link':
+      return (
+        <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+        </svg>
+      )
+    case 'users':
+      return (
+        <svg className={cls} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+        </svg>
+      )
+    default:
+      return null
+  }
+}
+
+interface SectionCardProps {
+  section: FormSection
+  defaultOpen?: boolean
+  children: ReactNode
+}
+
+export function SectionCard({ section, defaultOpen = false, children }: SectionCardProps) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center gap-4 px-6 py-4 text-left hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors"
+      >
+        <div className="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center text-purple-600 flex-shrink-0">
+          <SectionIcon icon={section.icon} className="w-5 h-5" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-sm font-semibold text-gray-900 dark:text-white">
+            {section.number}. {section.title}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+            {section.description}
+          </div>
+        </div>
+        <svg
+          className={`w-5 h-5 text-gray-400 transition-transform flex-shrink-0 ${open ? 'rotate-180' : ''}`}
+          fill="none" viewBox="0 0 24 24" stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {open && (
+        <div className="px-6 pb-6 pt-2 border-t border-gray-100 dark:border-gray-700 space-y-4">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,142 @@
+// IACE Limits & Intended Use Form Types — CE Risk Assessment Step 3
+// Based on ISO 12100 Sections 5.3 (Intended Use) and 5.4 (Limits)
+
+/** Full form data structure stored in project metadata.limits_form */
+export interface LimitsFormData {
+  // Section 1: Allgemeine Produktbeschreibung
+  machine_designation: string
+  machine_type: string
+  manufacturer: string
+  year_of_construction: string
+  serial_number: string
+  general_description: string
+
+  // Section 2: Bestimmungsgemasse Verwendung
+  intended_purpose: string
+  area_of_use: string
+  operating_modes: string[]
+  variants: string
+
+  // Section 3: Vorhersehbare Fehlanwendung
+  foreseeable_misuses: string
+
+  // Section 4: Grenzen der Maschine
+  spatial_limits: string
+  temporal_limits: string
+  operating_conditions: string
+  energy_supply: string
+
+  // Section 5: Schnittstellen
+  mechanical_interfaces: string
+  electrical_interfaces: string
+  software_interfaces: string
+  pneumatic_hydraulic_interfaces: string
+
+  // Section 6: Betroffene Personen
+  person_groups: string[]
+  qualification_requirements: string
+}
+
+export const EMPTY_LIMITS_FORM: LimitsFormData = {
+  machine_designation: '',
+  machine_type: '',
+  manufacturer: '',
+  year_of_construction: '',
+  serial_number: '',
+  general_description: '',
+  intended_purpose: '',
+  area_of_use: '',
+  operating_modes: [],
+  variants: '',
+  foreseeable_misuses: '',
+  spatial_limits: '',
+  temporal_limits: '',
+  operating_conditions: '',
+  energy_supply: '',
+  mechanical_interfaces: '',
+  electrical_interfaces: '',
+  software_interfaces: '',
+  pneumatic_hydraulic_interfaces: '',
+  person_groups: [],
+  qualification_requirements: '',
+}
+
+export const AREA_OF_USE_OPTIONS = [
+  'Industriell',
+  'Gewerblich',
+  'Privat',
+  'Oeffentlich',
+]
+
+export const OPERATING_MODE_OPTIONS = [
+  'Automatikbetrieb',
+  'Einrichtbetrieb',
+  'Handbetrieb',
+  'Sonderbetrieb',
+  'Reinigung',
+  'Wartung',
+]
+
+export const PERSON_GROUP_OPTIONS = [
+  'Bedienpersonal',
+  'Einrichter',
+  'Wartungspersonal',
+  'Reinigungspersonal',
+  'Auszubildende',
+  'Besucher',
+  'Fremdfirmenpersonal',
+]
+
+/** Section definition for rendering collapsible form cards */
+export interface FormSection {
+  id: string
+  number: number
+  title: string
+  description: string
+  icon: 'clipboard' | 'target' | 'alert' | 'box' | 'link' | 'users'
+}
+
+export const FORM_SECTIONS: FormSection[] = [
+  {
+    id: 'product_description',
+    number: 1,
+    title: 'Allgemeine Produktbeschreibung',
+    description: 'Grundlegende Angaben zur Maschine/Anlage',
+    icon: 'clipboard',
+  },
+  {
+    id: 'intended_use',
+    number: 2,
+    title: 'Bestimmungsgemasse Verwendung',
+    description: 'Verwendungszweck, Einsatzbereich und Betriebsarten',
+    icon: 'target',
+  },
+  {
+    id: 'foreseeable_misuse',
+    number: 3,
+    title: 'Vorhersehbare Fehlanwendung',
+    description: 'Vernuenftigerweise vorhersehbare Fehlanwendungen gemaess ISO 12100 Abschnitt 5.4',
+    icon: 'alert',
+  },
+  {
+    id: 'machine_limits',
+    number: 4,
+    title: 'Grenzen der Maschine',
+    description: 'Raeumliche, zeitliche und betriebliche Grenzen',
+    icon: 'box',
+  },
+  {
+    id: 'interfaces',
+    number: 5,
+    title: 'Schnittstellen',
+    description: 'Mechanische, elektrische, Software- und pneumatische/hydraulische Schnittstellen',
+    icon: 'link',
+  },
+  {
+    id: 'affected_persons',
+    number: 6,
+    title: 'Betroffene Personen',
+    description: 'Personengruppen und Qualifikationsanforderungen',
+    icon: 'users',
+  },
+]
@@ -0,0 +1,322 @@
+'use client'
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { LimitsFormSections } from './_components/LimitsFormSections'
+import { EMPTY_LIMITS_FORM, type LimitsFormData } from './_types'
+
+type SaveStatus = 'idle' | 'saving' | 'saved' | 'error'
+
+interface ProjectData {
+  machine_name: string
+  machine_type: string
+  manufacturer: string
+  metadata?: {
+    limits_form?: LimitsFormData
+    [key: string]: unknown
+  }
+}
+
+export default function IACEInterviewPage() {
+  const { projectId } = useParams<{ projectId: string }>()
+  const router = useRouter()
+  const [formData, setFormData] = useState<LimitsFormData>(EMPTY_LIMITS_FORM)
+  const [projectData, setProjectData] = useState<ProjectData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
+  const [initStatus, setInitStatus] = useState<'idle' | 'running' | 'done' | 'error'>('idle')
+  const [initResult, setInitResult] = useState<{ steps: { name: string; status: string; count: number; details?: string }[]; summary: Record<string, number> } | null>(null)
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const latestFormRef = useRef<LimitsFormData>(EMPTY_LIMITS_FORM)
+
+  // Load project data and existing form data
+  useEffect(() => {
+    loadProject()
+  }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function loadProject() {
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}`)
+      if (!res.ok) return
+      const json = await res.json()
+      const proj: ProjectData = {
+        machine_name: json.machine_name || '',
+        machine_type: json.machine_type || '',
+        manufacturer: json.manufacturer || '',
+        metadata: json.metadata || {},
+      }
+      setProjectData(proj)
+
+      // Restore saved form data from metadata
+      if (proj.metadata?.limits_form) {
+        const saved = proj.metadata.limits_form
+        const merged = { ...EMPTY_LIMITS_FORM, ...saved }
+        setFormData(merged)
+        latestFormRef.current = merged
+      } else {
+        // Pre-fill from project fields
+        const prefilled: LimitsFormData = {
+          ...EMPTY_LIMITS_FORM,
+          machine_designation: proj.machine_name,
+          machine_type: proj.machine_type,
+          manufacturer: proj.manufacturer,
+        }
+        setFormData(prefilled)
+        latestFormRef.current = prefilled
+      }
+    } catch (err) {
+      console.error('Failed to load project:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Debounced auto-save
+  const saveToBackend = useCallback(async (data: LimitsFormData) => {
+    setSaveStatus('saving')
+    try {
+      // Merge limits_form into existing metadata
+      const existingMetadata = projectData?.metadata || {}
+      const newMetadata = { ...existingMetadata, limits_form: data }
+
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ metadata: newMetadata }),
+      })
+
+      if (res.ok) {
+        setSaveStatus('saved')
+        // Also update local projectData metadata so next save merges correctly
+        setProjectData((prev) => prev ? { ...prev, metadata: newMetadata } : prev)
+        setTimeout(() => setSaveStatus((s) => s === 'saved' ? 'idle' : s), 2000)
+      } else {
+        setSaveStatus('error')
+      }
+    } catch {
+      setSaveStatus('error')
+    }
+  }, [projectId, projectData?.metadata]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleFieldChange = useCallback((field: keyof LimitsFormData, value: string | string[]) => {
+    setFormData((prev) => {
+      const next = { ...prev, [field]: value }
+      latestFormRef.current = next
+      return next
+    })
+
+    // Debounce save: wait 1.5s after last change
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
+    saveTimerRef.current = setTimeout(() => {
+      saveToBackend(latestFormRef.current)
+    }, 1500)
+  }, [saveToBackend])
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
+    }
+  }, [])
+
+  // Calculate completion percentage
+  const completionPct = calculateCompletion(formData)
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+            Grenzen & Verwendung
+          </h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+            Schritt 3 — Bestimmungsgemasse Verwendung, Fehlanwendung und Maschinengrenzen definieren (ISO 12100)
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <SaveIndicator status={saveStatus} />
+          <CompletionBadge pct={completionPct} />
+        </div>
+      </div>
+
+      {/* Form Sections */}
+      <LimitsFormSections
+        data={formData}
+        onChange={handleFieldChange}
+        prefilled={{
+          machine_name: projectData?.machine_name,
+          machine_type: projectData?.machine_type,
+          manufacturer: projectData?.manufacturer,
+        }}
+      />
+
+      {/* Initialization Result */}
+      {initResult && (
+        <div className="bg-white dark:bg-gray-800 rounded-xl border border-green-200 dark:border-green-700 p-5 space-y-3">
+          <h3 className="text-sm font-semibold text-green-800 dark:text-green-300">Initialisierung abgeschlossen</h3>
+          <div className="grid grid-cols-5 gap-3 text-center">
+            {Object.entries(initResult.summary).map(([key, val]) => (
+              <div key={key}>
+                <div className="text-xl font-bold text-gray-900 dark:text-white">{val}</div>
+                <div className="text-[10px] text-gray-500 capitalize">{key}</div>
+              </div>
+            ))}
+          </div>
+          <div className="space-y-1">
+            {initResult.steps.map((s, i) => (
+              <div key={i} className="flex items-center gap-2 text-xs">
+                <span className={s.status === 'done' ? 'text-green-600' : s.status === 'skipped' ? 'text-gray-400' : 'text-red-500'}>
+                  {s.status === 'done' ? '\u2713' : s.status === 'skipped' ? '\u25CB' : '\u2717'}
+                </span>
+                <span className="text-gray-700 dark:text-gray-300">{s.name}</span>
+                {s.count > 0 && <span className="text-gray-400">({s.count})</span>}
+                {s.details && <span className="text-gray-400 text-[10px]">— {s.details}</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Navigation + Initialize */}
+      <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+          onClick={() => router.push(`/sdk/iace/${projectId}`)}
+          className="px-4 py-2 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          Zurueck zur Uebersicht
+        </button>
+        <div className="flex items-center gap-3">
+          <button
+            disabled={initStatus === 'running' || completionPct < 30}
+            onClick={async () => {
+              // Flush pending save first
+              if (saveTimerRef.current) {
+                clearTimeout(saveTimerRef.current)
+                await saveToBackend(latestFormRef.current)
+              }
+              setInitStatus('running')
+              setInitResult(null)
+              try {
+                const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/initialize`, { method: 'POST' })
+                if (!res.ok) {
+                  const err = await res.json().catch(() => ({}))
+                  alert(err.error || 'Initialisierung fehlgeschlagen')
+                  setInitStatus('error')
+                  return
+                }
+                const data = await res.json()
+                setInitResult(data)
+                setInitStatus('done')
+              } catch {
+                setInitStatus('error')
+              }
+            }}
+            className="flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {initStatus === 'running' ? (
+              <>
+                <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
+                Analyse laeuft...
+              </>
+            ) : (
+              <>
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                Projekt initialisieren
+              </>
+            )}
+          </button>
+          <button
+            onClick={() => {
+              if (saveTimerRef.current) {
+                clearTimeout(saveTimerRef.current)
+                saveToBackend(latestFormRef.current)
+              }
+              router.push(`/sdk/iace/${projectId}/components`)
+            }}
+            className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium transition-colors"
+          >
+            Weiter zu Komponenten
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ────────────────────────────────────────
+// Sub-components (small, page-local)
+// ────────────────────────────────────────
+
+function SaveIndicator({ status }: { status: SaveStatus }) {
+  if (status === 'idle') return null
+  return (
+    <div className="flex items-center gap-1.5 text-xs">
+      {status === 'saving' && (
+        <>
+          <div className="w-2 h-2 rounded-full bg-yellow-400 animate-pulse" />
+          <span className="text-yellow-600 dark:text-yellow-400">Speichert...</span>
+        </>
+      )}
+      {status === 'saved' && (
+        <>
+          <svg className="w-3.5 h-3.5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          <span className="text-green-600 dark:text-green-400">Gespeichert</span>
+        </>
+      )}
+      {status === 'error' && (
+        <>
+          <div className="w-2 h-2 rounded-full bg-red-500" />
+          <span className="text-red-600 dark:text-red-400">Fehler beim Speichern</span>
+        </>
+      )}
+    </div>
+  )
+}
+
+function CompletionBadge({ pct }: { pct: number }) {
+  const color = pct >= 80 ? 'text-green-600 bg-green-50 border-green-200' :
+    pct >= 40 ? 'text-yellow-600 bg-yellow-50 border-yellow-200' :
+      'text-gray-500 bg-gray-50 border-gray-200'
+  return (
+    <span className={`px-2.5 py-1 rounded-full text-xs font-medium border ${color}`}>
+      {pct}% ausgefuellt
+    </span>
+  )
+}
+
+/** Calculate how many required-ish fields are filled */
+function calculateCompletion(data: LimitsFormData): number {
+  const checks = [
+    !!data.machine_designation,
+    !!data.machine_type,
+    !!data.manufacturer,
+    !!data.general_description,
+    !!data.intended_purpose,
+    !!data.area_of_use,
+    data.operating_modes.length > 0,
+    !!data.foreseeable_misuses,
+    !!data.spatial_limits,
+    !!data.operating_conditions,
+    !!data.energy_supply,
+    data.person_groups.length > 0,
+    !!data.qualification_requirements,
+  ]
+  const filled = checks.filter(Boolean).length
+  return Math.round((filled / checks.length) * 100)
+}
@@ -16,8 +16,8 @@ export function MitigationCard({
    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
      <div className="flex items-start justify-between mb-2">
        <div className="flex items-center gap-2">
-          <h4 className="text-sm font-medium text-gray-900 dark:text-white">{mitigation.title}</h4>
-          {mitigation.title.startsWith('Auto:') && (
+          <h4 className="text-sm font-medium text-gray-900 dark:text-white">{mitigation.title || ''}</h4>
+          {(mitigation.title || '').startsWith('Auto:') && (
            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-700">
              Auto
            </span>
@@ -28,7 +28,7 @@ export function MitigationCard({
      {mitigation.description && (
        <p className="text-xs text-gray-500 mb-3">{mitigation.description}</p>
      )}
-      {mitigation.linked_hazard_names.length > 0 && (
+      {(mitigation.linked_hazard_names || []).length > 0 && (
        <div className="mb-3">
          <div className="flex flex-wrap gap-1">
            {mitigation.linked_hazard_names.map((name, i) => (
@@ -0,0 +1,69 @@
+'use client'
+
+import React, { useState, useCallback } from 'react'
+
+interface Hint {
+  regulation_id: string
+  regulation_short: string
+  category: string
+  text: string
+  pages?: number[]
+  source_url?: string
+  score: number
+}
+
+function catBadge(cat: string): string {
+  if (cat === 'trbs') return 'bg-orange-100 text-orange-800'
+  if (cat === 'trgs') return 'bg-red-100 text-red-800'
+  if (cat === 'asr') return 'bg-teal-100 text-teal-800'
+  return 'bg-blue-100 text-blue-800'
+}
+
+interface Props {
+  projectId: string
+  mitigationId: string
+}
+
+export function MitigationHints({ projectId, mitigationId }: Props) {
+  const [hints, setHints] = useState<Hint[]>([])
+  const [loading, setLoading] = useState(false)
+  const [loaded, setLoaded] = useState(false)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations/${mitigationId}/regulatory-hints`)
+      if (res.ok) {
+        const data = await res.json()
+        setHints(data.hints || [])
+      }
+    } catch { /* ignore */ }
+    finally { setLoading(false); setLoaded(true) }
+  }, [projectId, mitigationId])
+
+  if (!loaded) {
+    return (
+      <button onClick={load} disabled={loading}
+        className="inline-flex items-center gap-1 text-[10px] text-purple-600 hover:text-purple-800 disabled:opacity-50">
+        {loading ? 'Lade...' : 'TRBS/OSHA Hinweise laden'}
+      </button>
+    )
+  }
+
+  if (hints.length === 0) return <span className="text-[10px] text-gray-400">Keine Hinweise</span>
+
+  return (
+    <div className="space-y-1.5 mt-1">
+      <p className="text-[10px] font-medium text-gray-500">Regulatorische Hinweise:</p>
+      {hints.map((h, i) => (
+        <div key={i} className="p-2 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-[11px]">
+          <span className={`inline-flex px-1 py-0.5 rounded text-[9px] font-medium ${catBadge(h.category)}`}>
+            {h.regulation_short || h.regulation_id}
+          </span>
+          {h.pages?.length ? <span className="text-gray-400 ml-1">S.{h.pages.join(',')}</span> : null}
+          <p className="text-gray-600 dark:text-gray-300 mt-0.5 leading-relaxed">{h.text}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
@@ -20,15 +20,33 @@ export function useMitigations(projectId: string) {
        fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`),
        fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`),
      ])
-      if (mitRes.ok) {
-        const json = await mitRes.json()
-        const mits = json.mitigations || json || []
-        setMitigations(mits)
-        validateHierarchy(mits)
-      }
+      let hazardList: Hazard[] = []
      if (hazRes.ok) {
        const json = await hazRes.json()
-        setHazards((json.hazards || json || []).map((h: Hazard) => ({ id: h.id, name: h.name, risk_level: h.risk_level, category: h.category })))
+        hazardList = (json.hazards || json || []).map((h: Hazard) => ({ id: h.id, name: h.name, risk_level: h.risk_level, category: h.category }))
+        setHazards(hazardList)
+      }
+      if (mitRes.ok) {
+        const json = await mitRes.json()
+        const raw = json.mitigations || json || []
+        // Map API fields (name, hazard_id) to frontend fields (title, linked_hazard_ids/names)
+        const hazardMap = Object.fromEntries(hazardList.map((h) => [h.id, h.name]))
+        const mits: Mitigation[] = raw.map((m: Record<string, unknown>) => ({
+          id: m.id as string,
+          title: (m.title || m.name || '') as string,
+          description: (m.description || '') as string,
+          reduction_type: (m.reduction_type === 'protective' ? 'protection' : m.reduction_type || 'design') as Mitigation['reduction_type'],
+          status: (m.status || 'planned') as Mitigation['status'],
+          linked_hazard_ids: m.linked_hazard_ids ? (m.linked_hazard_ids as string[]) : m.hazard_id ? [m.hazard_id as string] : [],
+          linked_hazard_names: m.linked_hazard_ids
+            ? (m.linked_hazard_ids as string[]).map((id) => hazardMap[id] || id)
+            : m.hazard_id ? [hazardMap[m.hazard_id as string] || (m.hazard_id as string)] : [],
+          created_at: (m.created_at || '') as string,
+          verified_at: (m.verified_at || null) as string | null,
+          verified_by: (m.verified_by || null) as string | null,
+        }))
+        setMitigations(mits)
+        validateHierarchy(mits)
      }
    } catch (err) {
      console.error('Failed to fetch data:', err)
@@ -128,7 +146,7 @@ export function useMitigations(projectId: string) {

  const byType = {
    design: mitigations.filter((m) => m.reduction_type === 'design'),
-    protection: mitigations.filter((m) => m.reduction_type === 'protection'),
+    protection: mitigations.filter((m) => m.reduction_type === 'protection' || m.reduction_type === 'protective'),
    information: mitigations.filter((m) => m.reduction_type === 'information'),
  }

@@ -1,13 +1,14 @@
 'use client'

-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useParams } from 'next/navigation'
-import { REDUCTION_TYPES } from './_components/types'
+import { REDUCTION_TYPES, Mitigation } from './_components/types'
 import { HierarchyWarning } from './_components/HierarchyWarning'
 import { MeasuresLibraryModal } from './_components/MeasuresLibraryModal'
 import { SuggestMeasuresModal } from './_components/SuggestMeasuresModal'
 import { MitigationForm } from './_components/MitigationForm'
-import { MitigationCard } from './_components/MitigationCard'
+import { StatusBadge } from './_components/StatusBadge'
+import { MitigationHints } from './_components/MitigationHints'
 import { ProtectiveMeasure } from './_components/types'
 import { useMitigations } from './_hooks/useMitigations'

@@ -21,11 +22,72 @@ export default function MitigationsPage() {
    fetchMeasuresLibrary, handleSubmit, handleAddSuggestedMeasure, handleVerify, handleDelete,
  } = useMitigations(projectId)

+  const [measureNorms, setMeasureNorms] = useState<Record<string, string[]>>({})
+
+  useEffect(() => {
+    fetch('/api/sdk/v1/iace/protective-measures-library')
+      .then(r => r.ok ? r.json() : null)
+      .then(json => {
+        if (!json?.protective_measures) return
+        const map: Record<string, string[]> = {}
+        for (const m of json.protective_measures) {
+          if (m.norm_references?.length > 0) {
+            map[(m.name || '').toLowerCase()] = m.norm_references
+          }
+        }
+        setMeasureNorms(map)
+      })
+      .catch(() => {})
+  }, [])
+
  const [showForm, setShowForm] = useState(false)
  const [preselectedType, setPreselectedType] = useState<'design' | 'protection' | 'information' | undefined>()
  const [showLibrary, setShowLibrary] = useState(false)
  const [libraryFilter, setLibraryFilter] = useState<string | undefined>()
  const [showSuggest, setShowSuggest] = useState(false)
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({ design: true, protection: true, information: true })
+  const [mitPages, setMitPages] = useState<Record<string, number>>({ design: 1, protection: 1, information: 1 })
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [batchAction, setBatchAction] = useState<'verify' | 'delete' | null>(null)
+  const [expandedMeasure, setExpandedMeasure] = useState<string | null>(null)
+
+  function toggleSection(type: string) {
+    setExpanded((prev) => ({ ...prev, [type]: !prev[type] }))
+  }
+
+  function toggleSelect(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id); else next.add(id)
+      return next
+    })
+  }
+
+  function selectAllInType(type: string) {
+    const items = byType[type as keyof typeof byType]
+    setSelected((prev) => {
+      const next = new Set(prev)
+      const allSelected = items.every((m) => next.has(m.id))
+      if (allSelected) { items.forEach((m) => next.delete(m.id)) }
+      else { items.forEach((m) => next.add(m.id)) }
+      return next
+    })
+  }
+
+  async function handleBatchVerify() {
+    setBatchAction('verify')
+    for (const id of selected) { await handleVerify(id) }
+    setSelected(new Set())
+    setBatchAction(null)
+  }
+
+  async function handleBatchDelete() {
+    if (!confirm(`${selected.size} Massnahmen wirklich loeschen?`)) return
+    setBatchAction('delete')
+    for (const id of selected) { await handleDelete(id) }
+    setSelected(new Set())
+    setBatchAction(null)
+  }

  function handleOpenLibrary(type?: string) {
    setLibraryFilter(type)
@@ -39,11 +101,6 @@ export default function MitigationsPage() {
    setPreselectedType(measure.reduction_type as 'design' | 'protection' | 'information')
  }

-  function handleAddForType(type: 'design' | 'protection' | 'information') {
-    setPreselectedType(type)
-    setShowForm(true)
-  }
-
  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
@@ -52,42 +109,51 @@ export default function MitigationsPage() {
    )
  }

+  const totalMeasures = byType.design.length + byType.protection.length + byType.information.length
+
  return (
-    <div className="space-y-6">
+    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Massnahmen</h1>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-            Risikominderung nach dem 3-Stufen-Verfahren: Design &rarr; Schutz &rarr; Information.
+          <p className="mt-1 text-sm text-gray-500">
+            {totalMeasures} Massnahmen nach 3-Stufen-Verfahren: Design ({byType.design.length}) &rarr; Schutz ({byType.protection.length}) &rarr; Information ({byType.information.length})
          </p>
        </div>
-        <div className="flex items-center gap-3">
-          {m.hazards.length > 0 && (
-            <button onClick={() => m.setShowSuggest(true)}
-              className="flex items-center gap-2 px-3 py-2 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors text-sm">
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
-              </svg>
-              Vorschlaege
-            </button>
+        <div className="flex items-center gap-2">
+          {selected.size > 0 && (
+            <>
+              <span className="text-xs text-gray-500">{selected.size} ausgewaehlt</span>
+              <button onClick={handleBatchVerify} disabled={batchAction !== null}
+                className="px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">
+                {batchAction === 'verify' ? 'Verifiziere...' : 'Verifizieren'}
+              </button>
+              <button onClick={handleBatchDelete} disabled={batchAction !== null}
+                className="px-3 py-1.5 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50">
+                Loeschen
+              </button>
+              <button onClick={() => setSelected(new Set())} className="px-2 py-1.5 text-xs text-gray-500 hover:text-gray-700">
+                Abbrechen
+              </button>
+            </>
+          )}
+          {selected.size === 0 && (
+            <>
+              <button onClick={() => setShowSuggest(true)}
+                className="px-3 py-1.5 text-xs border border-green-300 text-green-700 rounded-lg hover:bg-green-50">
+                Vorschlaege
+              </button>
+              <button onClick={() => handleOpenLibrary()}
+                className="px-3 py-1.5 text-xs border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50">
+                Bibliothek
+              </button>
+              <button onClick={() => { setPreselectedType(undefined); setShowForm(true) }}
+                className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+                + Hinzufuegen
+              </button>
+            </>
          )}
-          <button onClick={() => m.handleOpenLibrary()}
-            className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors">
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-            </svg>
-            Bibliothek
-          </button>
-          <button
-            onClick={() => { setPreselectedType(undefined); setShowForm(true) }}
-            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-            </svg>
-            Massnahme hinzufuegen
-          </button>
        </div>
      </div>

@@ -95,76 +161,107 @@ export default function MitigationsPage() {

      {showForm && (
        <MitigationForm
-          onSubmit={async (data) => {
-            const ok = await handleSubmit(data)
-            if (ok) { setShowForm(false); setPreselectedType(undefined) }
-          }}
-          onCancel={() => { setShowForm(false); setPreselectedType(undefined) }}
-          hazards={hazards}
-          preselectedType={preselectedType}
-          onOpenLibrary={handleOpenLibrary}
+          onSubmit={async (data) => { const ok = await handleSubmit(data); if (ok) setShowForm(false) }}
+          onCancel={() => setShowForm(false)} hazards={hazards} preselectedType={preselectedType} onOpenLibrary={handleOpenLibrary}
        />
      )}
+      {showLibrary && <MeasuresLibraryModal measures={measures} onSelect={handleSelectMeasure} onClose={() => setShowLibrary(false)} filterType={libraryFilter} />}
+      {showSuggest && <SuggestMeasuresModal hazards={hazards} projectId={projectId} onAddMeasure={handleAddSuggestedMeasure} onClose={() => setShowSuggest(false)} />}

-      {showLibrary && (
-        <MeasuresLibraryModal
-          measures={m.measures} onSelect={m.handleSelectMeasure}
-          onClose={() => m.setShowLibrary(false)} filterType={m.libraryFilter}
-        />
-      )}
+      {/* 3-Step Accordions */}
+      {(['design', 'protection', 'information'] as const).map((type) => {
+        const config = REDUCTION_TYPES[type]
+        const items = byType[type]
+        const isExpanded = expanded[type]
+        const allSelected = items.length > 0 && items.every((m) => selected.has(m.id))

-      {showSuggest && (
-        <SuggestMeasuresModal
-          hazards={m.hazards} projectId={projectId}
-          onAddMeasure={m.handleAddSuggestedMeasure}
-          onClose={() => m.setShowSuggest(false)}
-        />
-      )}
+        return (
+          <div key={type} className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            {/* Accordion Header */}
+            <button onClick={() => toggleSection(type)}
+              className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${config.headerColor}`}>
+              <svg className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+              {config.icon}
+              <div className="flex-1">
+                <span className="text-sm font-semibold">{config.label}</span>
+                <span className="ml-2 text-xs opacity-75">{config.description}</span>
+              </div>
+              <span className="text-sm font-bold">{items.length}</span>
+            </button>

-      {/* 3-Column Layout */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {(['design', 'protection', 'information'] as const).map((type) => {
-          const config = REDUCTION_TYPES[type]
-          const items = m.byType[type]
-          return (
-            <div key={type} className={`rounded-xl border ${config.color} p-4`}>
-              <div className={`flex items-center gap-2 px-3 py-2 rounded-lg ${config.headerColor} mb-3`}>
-                {config.icon}
-                <div>
-                  <h3 className="text-sm font-semibold">{config.label}</h3>
-                  <p className="text-xs opacity-75">{config.description}</p>
+            {/* Accordion Content — Table rows */}
+            {isExpanded && items.length > 0 && (
+              <div className="border-t border-gray-100 dark:border-gray-700">
+                {/* Table header */}
+                <div className="grid grid-cols-[24px_2fr_1fr_80px] gap-2 px-4 py-2 bg-gray-50 dark:bg-gray-750 text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <div>
+                    <input type="checkbox" checked={allSelected} onChange={() => selectAllInType(type)}
+                      className="accent-purple-600" title="Alle auswaehlen" />
+                  </div>
+                  <div>Massnahme</div>
+                  <div>Gefaehrdung</div>
+                  <div>Status</div>
                </div>
-                <span className="ml-auto text-sm font-bold">{items.length}</span>
+                {/* Rows — paginated */}
+                {items.slice(0, (mitPages[type] || 1) * 50).map((m) => {
+                  const isDetailOpen = expandedMeasure === m.id
+                  const catMatch = (m.description || '').match(/Kategorie\s+(\S+)/)
+                  const category = catMatch?.[1]
+                  const refs = measureNorms[(m.title || '').toLowerCase()]
+                  return (
+                  <div key={m.id}>
+                    <div onClick={() => setExpandedMeasure(isDetailOpen ? null : m.id)}
+                      className={`grid grid-cols-[24px_2fr_1fr_80px] gap-2 px-4 py-2 border-t border-gray-50 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors cursor-pointer ${selected.has(m.id) ? 'bg-purple-50 dark:bg-purple-900/10' : ''}`}>
+                      <div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
+                        <input type="checkbox" checked={selected.has(m.id)} onChange={() => toggleSelect(m.id)}
+                          className="accent-purple-600" />
+                      </div>
+                      <div className="min-w-0 flex items-start gap-1">
+                        <svg className={`w-3 h-3 mt-1 shrink-0 text-gray-400 transition-transform ${isDetailOpen ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                        </svg>
+                        <div>
+                          <div className="text-sm text-gray-900 dark:text-white">{m.title || ''}</div>
+                          {!isDetailOpen && category && <div className="text-[10px] text-gray-400 mt-0.5">Kategorie: {category}</div>}
+                        </div>
+                      </div>
+                      <div className="text-xs text-gray-500">
+                        {(m.linked_hazard_names || []).join(', ') || '-'}
+                      </div>
+                      <div>
+                        <StatusBadge status={m.status} />
+                      </div>
+                    </div>
+                    {isDetailOpen && (
+                      <div className="px-12 py-3 bg-gray-50 dark:bg-gray-750 border-t border-gray-100 dark:border-gray-700 text-xs space-y-1">
+                        {m.description && <p className="text-gray-600 dark:text-gray-300">{m.description}</p>}
+                        {category && <p className="text-purple-600">Diese Massnahme gilt fuer alle Gefaehrdungen der Kategorie <strong>{category}</strong>.</p>}
+                        {refs?.length > 0 && <p className="text-blue-500">Normen: {refs.join(', ')}</p>}
+                        <MitigationHints projectId={projectId} mitigationId={m.id} />
+                      </div>
+                    )}
+                  </div>
+                  )
+                })}
+                {items.length > (mitPages[type] || 1) * 50 && (
+                  <button onClick={() => setMitPages(prev => ({ ...prev, [type]: (prev[type] || 1) + 1 }))}
+                    className="w-full py-2 text-xs text-purple-600 hover:bg-purple-50 border-t border-gray-100 transition-colors">
+                    Weitere {Math.min(50, items.length - (mitPages[type] || 1) * 50)} von {items.length} laden...
+                  </button>
+                )}
              </div>
-              <div className="mb-3 flex flex-wrap gap-1">
-                {config.subTypes.map((st) => (
-                  <span key={st.value} className="text-xs px-1.5 py-0.5 rounded bg-white/60 text-gray-500 border border-gray-200/50">
-                    {st.label}
-                  </span>
-                ))}
+            )}
+
+            {isExpanded && items.length === 0 && (
+              <div className="px-4 py-6 text-center text-sm text-gray-400 border-t border-gray-100">
+                Keine Massnahmen in dieser Stufe
              </div>
-              <div className="space-y-3">
-                {items.map((m) => (
-                  <MitigationCard key={m.id} mitigation={m} onVerify={handleVerify} onDelete={handleDelete} />
-                ))}
-              </div>
-              <div className="mt-3 flex gap-2">
-                <button onClick={() => m.handleAddForType(type)}
-                  className="flex-1 py-2 text-sm text-gray-500 hover:text-purple-600 hover:bg-white rounded-lg border border-dashed border-gray-300 hover:border-purple-300 transition-colors">
-                  + Hinzufuegen
-                </button>
-                <button onClick={() => m.handleOpenLibrary(type)}
-                  className="py-2 px-3 text-sm text-gray-400 hover:text-purple-600 hover:bg-white rounded-lg border border-dashed border-gray-300 hover:border-purple-300 transition-colors"
-                  title="Aus Bibliothek waehlen">
-                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          )
-        })}
-      </div>
+            )}
+          </div>
+        )
+      })}
    </div>
  )
 }
--- a/Show More
+++ b/Show More