From ef8284dff5ea748a34b40f4f61c43424e31f2193 Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Sat, 11 Apr 2026 18:51:54 +0200
Subject: [PATCH] refactor(admin): split dsfa/[id] and notfallplan page.tsx
 into colocated components

dsfa/[id]/page.tsx (1893 LOC -> 350 LOC) split into 9 components:
Section1-5Editor, SDMCoverageOverview, RAGSearchPanel, AddRiskModal,
AddMitigationModal. Page is now a thin orchestrator.

notfallplan/page.tsx (1890 LOC -> 435 LOC) split into 8 modules:
types.ts, ConfigTab, IncidentsTab, TemplatesTab, ExercisesTab, Modals,
ApiSections. All under the 500-line hard cap.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../[id]/_components/AddMitigationModal.tsx   |  205 ++
 .../dsfa/[id]/_components/AddRiskModal.tsx    |  182 ++
 .../dsfa/[id]/_components/RAGSearchPanel.tsx  |  194 ++
 .../[id]/_components/SDMCoverageOverview.tsx  |   83 +
 .../dsfa/[id]/_components/Section1Editor.tsx  |  216 ++
 .../dsfa/[id]/_components/Section2Editor.tsx  |   91 +
 .../dsfa/[id]/_components/Section3Editor.tsx  |  189 ++
 .../dsfa/[id]/_components/Section4Editor.tsx  |  159 ++
 .../dsfa/[id]/_components/Section5Editor.tsx  |  161 ++
 .../app/sdk/dsfa/[id]/_components/index.ts    |    9 +
 admin-compliance/app/sdk/dsfa/[id]/page.tsx   | 1755 +----------------
 .../notfallplan/_components/ApiSections.tsx   |  137 ++
 .../sdk/notfallplan/_components/ConfigTab.tsx |  203 ++
 .../notfallplan/_components/ExercisesTab.tsx  |  207 ++
 .../notfallplan/_components/IncidentsTab.tsx  |  292 +++
 .../sdk/notfallplan/_components/Modals.tsx    |  296 +++
 .../notfallplan/_components/TemplatesTab.tsx  |   73 +
 .../app/sdk/notfallplan/_components/index.ts  |    7 +
 .../app/sdk/notfallplan/_components/types.ts  |  307 +++
 admin-compliance/app/sdk/notfallplan/page.tsx | 1637 +--------------
 20 files changed, 3208 insertions(+), 3195 deletions(-)
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/AddMitigationModal.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/AddRiskModal.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/RAGSearchPanel.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/SDMCoverageOverview.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/Section1Editor.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/Section2Editor.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/Section3Editor.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/Section4Editor.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/Section5Editor.tsx
 create mode 100644 admin-compliance/app/sdk/dsfa/[id]/_components/index.ts
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/ApiSections.tsx
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/ConfigTab.tsx
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/ExercisesTab.tsx
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/IncidentsTab.tsx
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/Modals.tsx
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/TemplatesTab.tsx
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/index.ts
 create mode 100644 admin-compliance/app/sdk/notfallplan/_components/types.ts

diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/AddMitigationModal.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/AddMitigationModal.tsx
new file mode 100644
index 0000000..14bf16c
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/AddMitigationModal.tsx
@@ -0,0 +1,205 @@
+'use client'
+
+import React, { useState } from 'react'
+import { DSFARisk } from '@/lib/sdk/dsfa/types'
+import type { SDMGoal } from '@/lib/sdk/dsfa/types'
+import {
+  MITIGATION_LIBRARY,
+  MITIGATION_TYPE_LABELS,
+  SDM_GOAL_LABELS,
+  EFFECTIVENESS_LABELS,
+} from '@/lib/sdk/dsfa/mitigation-library'
+import type { CatalogMitigation } from '@/lib/sdk/dsfa/mitigation-library'
+
+export function AddMitigationModal({
+  risks,
+  onClose,
+  onAdd,
+}: {
+  risks: DSFARisk[]
+  onClose: () => void
+  onAdd: (data: { risk_id: string; description: string; type: string; responsible_party: string }) => void
+}) {
+  const [mode, setMode] = useState<'library' | 'manual'>('library')
+  const [riskId, setRiskId] = useState(risks[0]?.id || '')
+  const [type, setType] = useState('technical')
+  const [description, setDescription] = useState('')
+  const [responsibleParty, setResponsibleParty] = useState('')
+  const [typeFilter, setTypeFilter] = useState<'all' | 'technical' | 'organizational' | 'legal'>('all')
+  const [sdmFilter, setSdmFilter] = useState<SDMGoal | 'all'>('all')
+
+  const filteredLibrary = MITIGATION_LIBRARY.filter(m => {
+    if (typeFilter !== 'all' && m.type !== typeFilter) return false
+    if (sdmFilter !== 'all' && !m.sdmGoals.includes(sdmFilter)) return false
+    return true
+  })
+
+  function selectCatalogMitigation(m: CatalogMitigation) {
+    setType(m.type)
+    setDescription(`${m.title}\n\n${m.description}\n\nRechtsgrundlage: ${m.legalBasis}`)
+    setMode('manual')
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Massnahme hinzufuegen</h3>
+
+        {/* Tab Toggle */}
+        <div className="flex border-b mb-4">
+          <button
+            onClick={() => setMode('library')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
+              mode === 'library' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            Aus Bibliothek waehlen ({MITIGATION_LIBRARY.length})
+          </button>
+          <button
+            onClick={() => setMode('manual')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
+              mode === 'manual' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            Manuell eingeben
+          </button>
+        </div>
+
+        {mode === 'library' ? (
+          <div className="space-y-3">
+            {/* Filters */}
+            <div className="flex gap-2">
+              <select
+                value={typeFilter}
+                onChange={e => setTypeFilter(e.target.value as typeof typeFilter)}
+                className="text-sm border rounded px-2 py-1"
+              >
+                <option value="all">Alle Typen</option>
+                {Object.entries(MITIGATION_TYPE_LABELS).map(([key, label]) => (
+                  <option key={key} value={key}>{label}</option>
+                ))}
+              </select>
+              <select
+                value={sdmFilter}
+                onChange={e => setSdmFilter(e.target.value as SDMGoal | 'all')}
+                className="text-sm border rounded px-2 py-1"
+              >
+                <option value="all">Alle SDM-Ziele</option>
+                {Object.entries(SDM_GOAL_LABELS).map(([key, label]) => (
+                  <option key={key} value={key}>{label}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* Library List */}
+            <div className="max-h-[40vh] overflow-y-auto space-y-2">
+              {filteredLibrary.map(m => (
+                <button
+                  key={m.id}
+                  onClick={() => selectCatalogMitigation(m)}
+                  className="w-full text-left p-3 rounded-lg border hover:border-purple-300 hover:bg-purple-50 transition-colors"
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs font-mono text-gray-400">{m.id}</span>
+                    <span className={`text-xs px-2 py-0.5 rounded-full ${
+                      m.type === 'technical' ? 'bg-blue-50 text-blue-600' :
+                      m.type === 'organizational' ? 'bg-green-50 text-green-600' :
+                      'bg-purple-50 text-purple-600'
+                    }`}>
+                      {MITIGATION_TYPE_LABELS[m.type]}
+                    </span>
+                    {m.sdmGoals.map(g => (
+                      <span key={g} className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
+                        {SDM_GOAL_LABELS[g]}
+                      </span>
+                    ))}
+                    <span className={`text-xs px-2 py-0.5 rounded-full ${
+                      m.effectiveness === 'high' ? 'bg-green-50 text-green-700' :
+                      m.effectiveness === 'medium' ? 'bg-yellow-50 text-yellow-700' :
+                      'bg-gray-50 text-gray-500'
+                    }`}>
+                      {EFFECTIVENESS_LABELS[m.effectiveness]}
+                    </span>
+                  </div>
+                  <div className="text-sm font-medium text-gray-900">{m.title}</div>
+                  <div className="text-xs text-gray-500 mt-1 line-clamp-2">{m.description}</div>
+                </button>
+              ))}
+            </div>
+            {filteredLibrary.length === 0 && (
+              <p className="text-sm text-gray-500 text-center py-4">Keine Massnahmen fuer die gewaehlten Filter.</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Zugehoeriges Risiko</label>
+              <select
+                value={riskId}
+                onChange={(e) => setRiskId(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+              >
+                {risks.map(risk => (
+                  <option key={risk.id} value={risk.id}>
+                    {risk.description.substring(0, 50)}...
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Typ</label>
+              <select
+                value={type}
+                onChange={(e) => setType(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+              >
+                <option value="technical">Technisch</option>
+                <option value="organizational">Organisatorisch</option>
+                <option value="legal">Rechtlich</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                rows={3}
+                placeholder="Beschreiben Sie die Massnahme..."
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Verantwortlich</label>
+              <input
+                type="text"
+                value={responsibleParty}
+                onChange={(e) => setResponsibleParty(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                placeholder="Name oder Rolle..."
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-3 mt-6">
+          <button
+            onClick={onClose}
+            className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={() => onAdd({ risk_id: riskId, description, type, responsible_party: responsibleParty })}
+            disabled={!description.trim() || mode === 'library'}
+            className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
+          >
+            Hinzufuegen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/AddRiskModal.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/AddRiskModal.tsx
new file mode 100644
index 0000000..1b92304
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/AddRiskModal.tsx
@@ -0,0 +1,182 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  DSFA_RISK_LEVEL_LABELS,
+  calculateRiskLevel,
+} from '@/lib/sdk/dsfa/types'
+import type { DSFARiskCategory } from '@/lib/sdk/dsfa/types'
+import type { SDMGoal } from '@/lib/sdk/dsfa/types'
+import {
+  RISK_CATALOG,
+  RISK_CATEGORY_LABELS,
+} from '@/lib/sdk/dsfa/risk-catalog'
+import type { CatalogRisk } from '@/lib/sdk/dsfa/risk-catalog'
+import { SDM_GOAL_LABELS } from '@/lib/sdk/dsfa/mitigation-library'
+
+export function AddRiskModal({
+  likelihood,
+  impact,
+  onClose,
+  onAdd,
+}: {
+  likelihood: 'low' | 'medium' | 'high'
+  impact: 'low' | 'medium' | 'high'
+  onClose: () => void
+  onAdd: (data: { category: string; description: string }) => void
+}) {
+  const [mode, setMode] = useState<'catalog' | 'manual'>('catalog')
+  const [category, setCategory] = useState('confidentiality')
+  const [description, setDescription] = useState('')
+  const [catalogFilter, setCatalogFilter] = useState<DSFARiskCategory | 'all'>('all')
+  const [sdmFilter, setSdmFilter] = useState<SDMGoal | 'all'>('all')
+
+  const { level } = calculateRiskLevel(likelihood, impact)
+
+  const filteredCatalog = RISK_CATALOG.filter(r => {
+    if (catalogFilter !== 'all' && r.category !== catalogFilter) return false
+    if (sdmFilter !== 'all' && r.sdmGoal !== sdmFilter) return false
+    return true
+  })
+
+  function selectCatalogRisk(risk: CatalogRisk) {
+    setCategory(risk.category)
+    setDescription(`${risk.title}\n\n${risk.description}`)
+    setMode('manual')
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Risiko hinzufuegen</h3>
+
+        <div className="mb-4 p-3 rounded-lg bg-gray-50">
+          <div className="text-sm text-gray-500">
+            Eintrittswahrscheinlichkeit: <span className="font-medium text-gray-700">{likelihood === 'low' ? 'Niedrig' : likelihood === 'medium' ? 'Mittel' : 'Hoch'}</span>
+            {' | '}
+            Auswirkung: <span className="font-medium text-gray-700">{impact === 'low' ? 'Niedrig' : impact === 'medium' ? 'Mittel' : 'Hoch'}</span>
+            {' | '}
+            Risikostufe: <span className="font-medium">{DSFA_RISK_LEVEL_LABELS[level]}</span>
+          </div>
+        </div>
+
+        {/* Tab Toggle */}
+        <div className="flex border-b mb-4">
+          <button
+            onClick={() => setMode('catalog')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
+              mode === 'catalog' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            Aus Katalog waehlen ({RISK_CATALOG.length})
+          </button>
+          <button
+            onClick={() => setMode('manual')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
+              mode === 'manual' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            Manuell eingeben
+          </button>
+        </div>
+
+        {mode === 'catalog' ? (
+          <div className="space-y-3">
+            {/* Filters */}
+            <div className="flex gap-2">
+              <select
+                value={catalogFilter}
+                onChange={e => setCatalogFilter(e.target.value as DSFARiskCategory | 'all')}
+                className="text-sm border rounded px-2 py-1"
+              >
+                <option value="all">Alle Kategorien</option>
+                {Object.entries(RISK_CATEGORY_LABELS).map(([key, label]) => (
+                  <option key={key} value={key}>{label}</option>
+                ))}
+              </select>
+              <select
+                value={sdmFilter}
+                onChange={e => setSdmFilter(e.target.value as SDMGoal | 'all')}
+                className="text-sm border rounded px-2 py-1"
+              >
+                <option value="all">Alle SDM-Ziele</option>
+                {Object.entries(SDM_GOAL_LABELS).map(([key, label]) => (
+                  <option key={key} value={key}>{label}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* Catalog List */}
+            <div className="max-h-[40vh] overflow-y-auto space-y-2">
+              {filteredCatalog.map(risk => (
+                <button
+                  key={risk.id}
+                  onClick={() => selectCatalogRisk(risk)}
+                  className="w-full text-left p-3 rounded-lg border hover:border-purple-300 hover:bg-purple-50 transition-colors"
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs font-mono text-gray-400">{risk.id}</span>
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
+                      {RISK_CATEGORY_LABELS[risk.category]}
+                    </span>
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
+                      {SDM_GOAL_LABELS[risk.sdmGoal]}
+                    </span>
+                  </div>
+                  <div className="text-sm font-medium text-gray-900">{risk.title}</div>
+                  <div className="text-xs text-gray-500 mt-1 line-clamp-2">{risk.description}</div>
+                </button>
+              ))}
+            </div>
+            {filteredCatalog.length === 0 && (
+              <p className="text-sm text-gray-500 text-center py-4">Keine Risiken fuer die gewaehlten Filter.</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Kategorie</label>
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+              >
+                <option value="confidentiality">Vertraulichkeit</option>
+                <option value="integrity">Integritaet</option>
+                <option value="availability">Verfuegbarkeit</option>
+                <option value="rights_freedoms">Rechte & Freiheiten</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+                rows={4}
+                placeholder="Beschreiben Sie das Risiko..."
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="flex gap-3 mt-6">
+          <button
+            onClick={onClose}
+            className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={() => onAdd({ category, description })}
+            disabled={!description.trim() || mode === 'catalog'}
+            className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
+          >
+            Hinzufuegen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/RAGSearchPanel.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/RAGSearchPanel.tsx
new file mode 100644
index 0000000..1a220ce
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/RAGSearchPanel.tsx
@@ -0,0 +1,194 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface RAGSearchResult {
+  text: string
+  regulation_code: string
+  regulation_name: string
+  regulation_short: string
+  category: string
+  article?: string
+  source_url?: string
+  score: number
+}
+
+interface RAGSearchResponse {
+  query: string
+  results: RAGSearchResult[]
+  count: number
+}
+
+export function RAGSearchPanel({
+  context,
+  categories,
+  onInsertText,
+}: {
+  context: string
+  categories?: string[]
+  onInsertText?: (text: string) => void
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [isSearching, setIsSearching] = useState(false)
+  const [results, setResults] = useState<RAGSearchResponse | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+
+  const buildQuery = () => {
+    if (query.trim()) return query.trim()
+    return context.substring(0, 200)
+  }
+
+  const handleSearch = async () => {
+    const searchQuery = buildQuery()
+    if (!searchQuery || searchQuery.length < 3) return
+
+    setIsSearching(true)
+    setError(null)
+
+    try {
+      const response = await fetch('/api/sdk/v1/rag/search', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          query: searchQuery,
+          collection: 'bp_dsfa_corpus',
+          top_k: 5,
+        }),
+      })
+      if (!response.ok) throw new Error(`Suche fehlgeschlagen (${response.status})`)
+      const data: RAGSearchResponse = await response.json()
+      setResults(data)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Suche fehlgeschlagen')
+      setResults(null)
+    } finally {
+      setIsSearching(false)
+    }
+  }
+
+  const handleInsert = (text: string, resultId: string) => {
+    if (onInsertText) {
+      onInsertText(text)
+    } else {
+      navigator.clipboard.writeText(text)
+    }
+    setCopiedId(resultId)
+    setTimeout(() => setCopiedId(null), 2000)
+  }
+
+  if (!isOpen) {
+    return (
+      <button
+        onClick={() => setIsOpen(true)}
+        className="flex items-center gap-2 px-4 py-2 text-sm bg-indigo-50 text-indigo-700 rounded-lg border border-indigo-200 hover:bg-indigo-100 transition-colors"
+      >
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+        Empfehlung suchen (RAG)
+      </button>
+    )
+  }
+
+  return (
+    <div className="bg-indigo-50 border border-indigo-200 rounded-xl p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-medium text-indigo-800 flex items-center gap-2">
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+          DSFA-Wissenssuche (RAG)
+        </h4>
+        <button
+          onClick={() => { setIsOpen(false); setResults(null); setError(null) }}
+          className="text-indigo-400 hover:text-indigo-600"
+        >
+          <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>
+
+      {/* Search Input */}
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && handleSearch()}
+          placeholder={`Suchbegriff (oder leer fuer automatische Kontextsuche)...`}
+          className="flex-1 px-3 py-2 text-sm border border-indigo-300 rounded-lg bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+        />
+        <button
+          onClick={handleSearch}
+          disabled={isSearching}
+          className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+        >
+          {isSearching ? 'Suche...' : 'Suchen'}
+        </button>
+      </div>
+
+      {/* Error */}
+      {error && (
+        <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3">
+          {error}
+        </div>
+      )}
+
+      {/* Results */}
+      {results && results.results.length > 0 && (
+        <div className="space-y-3">
+          <p className="text-xs text-indigo-600">{results.count} Ergebnis(se) gefunden</p>
+
+          {results.results.map((r, idx) => {
+            const resultId = `${r.regulation_code}-${idx}`
+            return (
+              <div key={resultId} className="bg-white rounded-lg border border-indigo-100 p-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="text-xs font-medium text-indigo-600 mb-1">
+                      {r.regulation_name}{r.article ? ` — ${r.article}` : ''}
+                    </div>
+                    <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-line">
+                      {r.text.length > 400 ? r.text.substring(0, 400) + '...' : r.text}
+                    </p>
+                    <div className="flex items-center gap-2 mt-2">
+                      <span className="text-xs text-gray-400 font-mono">
+                        {r.regulation_short || r.regulation_code} ({(r.score * 100).toFixed(0)}%)
+                      </span>
+                      {r.category && (
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{r.category}</span>
+                      )}
+                      {r.source_url && (
+                        <a href={r.source_url} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 hover:underline">Quelle</a>
+                      )}
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleInsert(r.text, resultId)}
+                    className={`flex-shrink-0 px-3 py-1.5 text-xs rounded-lg transition-colors ${
+                      copiedId === resultId
+                        ? 'bg-green-100 text-green-700'
+                        : 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200'
+                    }`}
+                    title="In Beschreibung uebernehmen"
+                  >
+                    {copiedId === resultId ? 'Kopiert!' : 'Uebernehmen'}
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {results && results.results.length === 0 && (
+        <div className="text-sm text-indigo-600 text-center py-4">
+          Keine Ergebnisse gefunden. Versuchen Sie einen anderen Suchbegriff.
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/SDMCoverageOverview.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/SDMCoverageOverview.tsx
new file mode 100644
index 0000000..7cb3d13
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/SDMCoverageOverview.tsx
@@ -0,0 +1,83 @@
+'use client'
+
+import React from 'react'
+import { DSFA, SDM_GOALS } from '@/lib/sdk/dsfa/types'
+import type { SDMGoal } from '@/lib/sdk/dsfa/types'
+import { RISK_CATALOG } from '@/lib/sdk/dsfa/risk-catalog'
+import { MITIGATION_LIBRARY } from '@/lib/sdk/dsfa/mitigation-library'
+
+export function SDMCoverageOverview({ dsfa }: { dsfa: DSFA }) {
+  const goals = Object.keys(SDM_GOALS) as SDMGoal[]
+
+  const goalCoverage = goals.map(goal => {
+    const catalogRisks = RISK_CATALOG.filter(r => r.sdmGoal === goal)
+    const catalogMitigations = MITIGATION_LIBRARY.filter(m => m.sdmGoals.includes(goal))
+
+    const matchedRisks = catalogRisks.filter(cr =>
+      dsfa.risks?.some(r => r.description?.includes(cr.title))
+    ).length
+
+    const matchedMitigations = catalogMitigations.filter(cm =>
+      dsfa.mitigations?.some(m => m.description?.includes(cm.title))
+    ).length
+
+    const hasRisks = matchedRisks > 0 || dsfa.risks?.some(r => {
+      const cat = r.category
+      if (goal === 'vertraulichkeit' && cat === 'confidentiality') return true
+      if (goal === 'integritaet' && cat === 'integrity') return true
+      if (goal === 'verfuegbarkeit' && cat === 'availability') return true
+      if (goal === 'nichtverkettung' && cat === 'rights_freedoms') return true
+      return false
+    })
+
+    const coverage = matchedMitigations > 0 ? 'covered' :
+                     hasRisks ? 'gaps' : 'no_data'
+
+    return {
+      goal,
+      info: SDM_GOALS[goal],
+      matchedRisks,
+      matchedMitigations,
+      coverage,
+    }
+  })
+
+  return (
+    <div className="mt-6 bg-white rounded-xl border p-6">
+      <h3 className="text-md font-semibold text-gray-900 mb-1">SDM-Abdeckung (Gewaehrleistungsziele)</h3>
+      <p className="text-xs text-gray-500 mb-4">Uebersicht ueber die Abdeckung der 7 Gewaehrleistungsziele des Standard-Datenschutzmodells.</p>
+
+      <div className="grid grid-cols-7 gap-2">
+        {goalCoverage.map(({ goal, info, matchedRisks, matchedMitigations, coverage }) => (
+          <div
+            key={goal}
+            className={`p-3 rounded-lg text-center border ${
+              coverage === 'covered' ? 'bg-green-50 border-green-200' :
+              coverage === 'gaps' ? 'bg-yellow-50 border-yellow-200' :
+              'bg-gray-50 border-gray-200'
+            }`}
+          >
+            <div className={`text-lg mb-1 ${
+              coverage === 'covered' ? 'text-green-600' :
+              coverage === 'gaps' ? 'text-yellow-600' :
+              'text-gray-400'
+            }`}>
+              {coverage === 'covered' ? '\u2713' : coverage === 'gaps' ? '!' : '\u2013'}
+            </div>
+            <div className="text-xs font-medium text-gray-900 leading-tight">{info.name}</div>
+            <div className="text-[10px] text-gray-500 mt-1">
+              {matchedRisks}R / {matchedMitigations}M
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-4 mt-3 text-xs text-gray-500">
+        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-green-500"></span> Abgedeckt</span>
+        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-yellow-500"></span> Luecken</span>
+        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-gray-300"></span> Keine Daten</span>
+        <span className="ml-auto">R = Risiken, M = Massnahmen</span>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/Section1Editor.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/Section1Editor.tsx
new file mode 100644
index 0000000..1dc2fbf
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/Section1Editor.tsx
@@ -0,0 +1,216 @@
+'use client'
+
+import React, { useState } from 'react'
+import { DSFA, DSFA_LEGAL_BASES } from '@/lib/sdk/dsfa/types'
+
+interface SectionProps {
+  dsfa: DSFA
+  onUpdate: (data: Record<string, unknown>) => Promise<void>
+  isSubmitting: boolean
+}
+
+export function Section1Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
+  const [formData, setFormData] = useState({
+    processing_description: dsfa.processing_description || '',
+    processing_purpose: dsfa.processing_purpose || '',
+    data_categories: dsfa.data_categories || [],
+    data_subjects: dsfa.data_subjects || [],
+    recipients: dsfa.recipients || [],
+    legal_basis: dsfa.legal_basis || '',
+    legal_basis_details: dsfa.legal_basis_details || '',
+  })
+  const [newCategory, setNewCategory] = useState('')
+  const [newSubject, setNewSubject] = useState('')
+  const [newRecipient, setNewRecipient] = useState('')
+
+  const handleSave = () => {
+    onUpdate(formData)
+  }
+
+  const addItem = (field: 'data_categories' | 'data_subjects' | 'recipients', value: string, setter: (v: string) => void) => {
+    if (value.trim()) {
+      setFormData(prev => ({
+        ...prev,
+        [field]: [...prev[field], value.trim()]
+      }))
+      setter('')
+    }
+  }
+
+  const removeItem = (field: 'data_categories' | 'data_subjects' | 'recipients', index: number) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: prev[field].filter((_, i) => i !== index)
+    }))
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Processing Purpose */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Verarbeitungszweck *
+        </label>
+        <textarea
+          value={formData.processing_purpose}
+          onChange={(e) => setFormData(prev => ({ ...prev, processing_purpose: e.target.value }))}
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          rows={3}
+          placeholder="Beschreiben Sie den Zweck der Datenverarbeitung..."
+        />
+      </div>
+
+      {/* Processing Description */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Beschreibung der Verarbeitung *
+        </label>
+        <textarea
+          value={formData.processing_description}
+          onChange={(e) => setFormData(prev => ({ ...prev, processing_description: e.target.value }))}
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          rows={4}
+          placeholder="Detaillierte Beschreibung der Verarbeitungsvorgaenge..."
+        />
+      </div>
+
+      {/* Data Categories */}
+      <TagListField
+        label="Datenkategorien *"
+        items={formData.data_categories}
+        newValue={newCategory}
+        onNewValueChange={setNewCategory}
+        onAdd={() => addItem('data_categories', newCategory, setNewCategory)}
+        onRemove={(idx) => removeItem('data_categories', idx)}
+        placeholder="Kategorie hinzufuegen..."
+        colorClass="bg-blue-100 text-blue-700"
+        hoverClass="hover:text-blue-900"
+      />
+
+      {/* Data Subjects */}
+      <TagListField
+        label="Betroffene Personen *"
+        items={formData.data_subjects}
+        newValue={newSubject}
+        onNewValueChange={setNewSubject}
+        onAdd={() => addItem('data_subjects', newSubject, setNewSubject)}
+        onRemove={(idx) => removeItem('data_subjects', idx)}
+        placeholder="z.B. Kunden, Mitarbeiter..."
+        colorClass="bg-green-100 text-green-700"
+        hoverClass="hover:text-green-900"
+      />
+
+      {/* Recipients */}
+      <TagListField
+        label="Empfaenger"
+        items={formData.recipients}
+        newValue={newRecipient}
+        onNewValueChange={setNewRecipient}
+        onAdd={() => addItem('recipients', newRecipient, setNewRecipient)}
+        onRemove={(idx) => removeItem('recipients', idx)}
+        placeholder="Empfaenger hinzufuegen..."
+        colorClass="bg-orange-100 text-orange-700"
+        hoverClass="hover:text-orange-900"
+      />
+
+      {/* Legal Basis */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Rechtsgrundlage *
+        </label>
+        <select
+          value={formData.legal_basis}
+          onChange={(e) => setFormData(prev => ({ ...prev, legal_basis: e.target.value }))}
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+        >
+          <option value="">Bitte waehlen...</option>
+          {Object.entries(DSFA_LEGAL_BASES).map(([key, label]) => (
+            <option key={key} value={key}>{label}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Legal Basis Details */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Begruendung der Rechtsgrundlage
+        </label>
+        <textarea
+          value={formData.legal_basis_details}
+          onChange={(e) => setFormData(prev => ({ ...prev, legal_basis_details: e.target.value }))}
+          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          rows={3}
+          placeholder="Erlaeutern Sie, warum diese Rechtsgrundlage anwendbar ist..."
+        />
+      </div>
+
+      {/* Save Button */}
+      <div className="flex justify-end pt-4 border-t border-gray-200">
+        <button
+          onClick={handleSave}
+          disabled={isSubmitting}
+          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
+        >
+          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+/** Reusable tag-list input used for data_categories, data_subjects, recipients */
+function TagListField({
+  label,
+  items,
+  newValue,
+  onNewValueChange,
+  onAdd,
+  onRemove,
+  placeholder,
+  colorClass,
+  hoverClass,
+}: {
+  label: string
+  items: string[]
+  newValue: string
+  onNewValueChange: (v: string) => void
+  onAdd: () => void
+  onRemove: (idx: number) => void
+  placeholder: string
+  colorClass: string
+  hoverClass: string
+}) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
+      <div className="flex flex-wrap gap-2 mb-2">
+        {items.map((item, idx) => (
+          <span key={idx} className={`px-3 py-1 ${colorClass} rounded-full text-sm flex items-center gap-2`}>
+            {item}
+            <button onClick={() => onRemove(idx)} className={hoverClass}>
+              <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>
+          </span>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={newValue}
+          onChange={(e) => onNewValueChange(e.target.value)}
+          onKeyPress={(e) => e.key === 'Enter' && onAdd()}
+          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
+          placeholder={placeholder}
+        />
+        <button
+          onClick={onAdd}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+        >
+          +
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/Section2Editor.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/Section2Editor.tsx
new file mode 100644
index 0000000..0dcfff7
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/Section2Editor.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import React, { useState } from 'react'
+import { DSFA } from '@/lib/sdk/dsfa/types'
+
+interface SectionProps {
+  dsfa: DSFA
+  onUpdate: (data: Record<string, unknown>) => Promise<void>
+  isSubmitting: boolean
+}
+
+export function Section2Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
+  const [formData, setFormData] = useState({
+    necessity_assessment: dsfa.necessity_assessment || '',
+    proportionality_assessment: dsfa.proportionality_assessment || '',
+    data_minimization: dsfa.data_minimization || '',
+    alternatives_considered: dsfa.alternatives_considered || '',
+    retention_justification: dsfa.retention_justification || '',
+  })
+
+  const handleSave = () => {
+    onUpdate(formData)
+  }
+
+  const fields = [
+    {
+      key: 'necessity_assessment',
+      label: 'Notwendigkeit der Verarbeitung *',
+      hint: 'Erklaeren Sie, warum die Verarbeitung fuer den angegebenen Zweck notwendig ist.',
+      placeholder: 'Beschreiben Sie die Notwendigkeit...',
+      rows: 4,
+    },
+    {
+      key: 'proportionality_assessment',
+      label: 'Verhaeltnismaessigkeit *',
+      hint: 'Begruenden Sie, warum der Eingriff in die Rechte der Betroffenen verhaeltnismaessig ist.',
+      placeholder: 'Beschreiben Sie die Verhaeltnismaessigkeit...',
+      rows: 4,
+    },
+    {
+      key: 'data_minimization',
+      label: 'Datenminimierung',
+      hint: 'Welche Massnahmen wurden ergriffen, um nur die notwendigen Daten zu erheben?',
+      placeholder: 'Beschreiben Sie die Datenminimierungsmassnahmen...',
+      rows: 3,
+    },
+    {
+      key: 'alternatives_considered',
+      label: 'Gepruefe Alternativen',
+      hint: 'Welche weniger eingriffsintensiven Alternativen wurden geprueft?',
+      placeholder: 'Beschreiben Sie gepruefe Alternativen...',
+      rows: 3,
+    },
+    {
+      key: 'retention_justification',
+      label: 'Speicherdauer / Loeschfristen',
+      hint: undefined,
+      placeholder: 'Begruenden Sie die geplante Speicherdauer...',
+      rows: 3,
+    },
+  ] as const
+
+  return (
+    <div className="space-y-6">
+      {fields.map(({ key, label, hint, placeholder, rows }) => (
+        <div key={key}>
+          <label className="block text-sm font-medium text-gray-700 mb-2">{label}</label>
+          {hint && <p className="text-xs text-gray-500 mb-2">{hint}</p>}
+          <textarea
+            value={formData[key]}
+            onChange={(e) => setFormData(prev => ({ ...prev, [key]: e.target.value }))}
+            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            rows={rows}
+            placeholder={placeholder}
+          />
+        </div>
+      ))}
+
+      {/* Save Button */}
+      <div className="flex justify-end pt-4 border-t border-gray-200">
+        <button
+          onClick={handleSave}
+          disabled={isSubmitting}
+          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
+        >
+          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/Section3Editor.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/Section3Editor.tsx
new file mode 100644
index 0000000..562f58f
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/Section3Editor.tsx
@@ -0,0 +1,189 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  DSFA,
+  DSFARisk,
+  DSFA_RISK_LEVEL_LABELS,
+  DSFA_AFFECTED_RIGHTS,
+  calculateRiskLevel,
+} from '@/lib/sdk/dsfa/types'
+import { RiskMatrix } from '@/components/sdk/dsfa'
+import { RAGSearchPanel } from './RAGSearchPanel'
+import { AddRiskModal } from './AddRiskModal'
+
+interface SectionProps {
+  dsfa: DSFA
+  onUpdate: (data: Record<string, unknown>) => Promise<void>
+  isSubmitting: boolean
+}
+
+export function Section3Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
+  const [selectedRisk, setSelectedRisk] = useState<DSFARisk | null>(null)
+  const [showAddRiskModal, setShowAddRiskModal] = useState(false)
+  const [newRiskLikelihood, setNewRiskLikelihood] = useState<'low' | 'medium' | 'high'>('medium')
+  const [newRiskImpact, setNewRiskImpact] = useState<'low' | 'medium' | 'high'>('medium')
+  const [affectedRights, setAffectedRights] = useState<string[]>(dsfa.affected_rights || [])
+
+  const handleAddRisk = (likelihood: 'low' | 'medium' | 'high', impact: 'low' | 'medium' | 'high') => {
+    setNewRiskLikelihood(likelihood)
+    setNewRiskImpact(impact)
+    setShowAddRiskModal(true)
+  }
+
+  const toggleAffectedRight = (rightId: string) => {
+    setAffectedRights(prev =>
+      prev.includes(rightId)
+        ? prev.filter(r => r !== rightId)
+        : [...prev, rightId]
+    )
+  }
+
+  const handleSaveSection = () => {
+    onUpdate({
+      affected_rights: affectedRights,
+      overall_risk_level: dsfa.overall_risk_level,
+    })
+  }
+
+  const levelColors = {
+    low: 'bg-green-100 text-green-700 border-green-200',
+    medium: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    high: 'bg-orange-100 text-orange-700 border-orange-200',
+    very_high: 'bg-red-100 text-red-700 border-red-200',
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Risk Matrix */}
+      <div className="bg-gray-50 rounded-xl p-6">
+        <RiskMatrix
+          risks={dsfa.risks || []}
+          onRiskSelect={(risk) => setSelectedRisk(risk)}
+          onAddRisk={handleAddRisk}
+          selectedRiskId={selectedRisk?.id}
+          readOnly={dsfa.status !== 'draft' && dsfa.status !== 'needs_update'}
+        />
+      </div>
+
+      {/* Triggered Rules from UCCA */}
+      {dsfa.triggered_rule_codes && dsfa.triggered_rule_codes.length > 0 && (
+        <div className="bg-red-50 border border-red-200 rounded-xl p-4">
+          <h4 className="text-sm font-medium text-red-800 mb-2">
+            DSFA-ausloesende Regeln (aus UCCA)
+          </h4>
+          <div className="flex flex-wrap gap-2">
+            {dsfa.triggered_rule_codes.map(code => (
+              <span key={code} className="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">
+                {code}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Risk List */}
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-3">Identifizierte Risiken ({(dsfa.risks || []).length})</h4>
+        {(dsfa.risks || []).length === 0 ? (
+          <div className="text-center py-8 text-gray-500">
+            <svg className="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+            <p>Noch keine Risiken erfasst</p>
+            <p className="text-sm mt-1">Klicken Sie in der Matrix auf eine Zelle, um ein Risiko hinzuzufuegen.</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {(dsfa.risks || []).map(risk => {
+              const { level } = calculateRiskLevel(risk.likelihood, risk.impact)
+              return (
+                <div
+                  key={risk.id}
+                  className={`p-4 rounded-xl border cursor-pointer transition-all ${
+                    selectedRisk?.id === risk.id ? 'ring-2 ring-purple-500' : ''
+                  } ${levelColors[level]}`}
+                  onClick={() => setSelectedRisk(risk)}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="font-medium">{risk.description}</div>
+                      <div className="text-sm mt-1 opacity-75">
+                        Kategorie: {risk.category === 'confidentiality' ? 'Vertraulichkeit' :
+                                    risk.category === 'integrity' ? 'Integritaet' :
+                                    risk.category === 'availability' ? 'Verfuegbarkeit' :
+                                    'Rechte & Freiheiten'}
+                      </div>
+                      <div className="text-sm opacity-75">
+                        Eintrittswahrscheinlichkeit: {risk.likelihood === 'low' ? 'Niedrig' : risk.likelihood === 'medium' ? 'Mittel' : 'Hoch'} |
+                        Auswirkung: {risk.impact === 'low' ? 'Niedrig' : risk.impact === 'medium' ? 'Mittel' : 'Hoch'}
+                      </div>
+                    </div>
+                    <span className={`px-2 py-1 rounded text-xs font-medium ${levelColors[level]}`}>
+                      {DSFA_RISK_LEVEL_LABELS[level]}
+                    </span>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* RAG Search for Risks */}
+      <RAGSearchPanel
+        context={`Risiken Datenschutz-Folgenabschaetzung ${dsfa.processing_description || ''} ${dsfa.processing_purpose || ''}`}
+        categories={['risk_assessment', 'threshold_analysis']}
+      />
+
+      {/* Affected Rights */}
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-3">Betroffene Rechte & Freiheiten</h4>
+        <div className="grid grid-cols-2 gap-2">
+          {DSFA_AFFECTED_RIGHTS.map(right => (
+            <label
+              key={right.id}
+              className={`flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
+                affectedRights.includes(right.id)
+                  ? 'bg-purple-50 border-purple-300'
+                  : 'bg-white border-gray-200 hover:bg-gray-50'
+              }`}
+            >
+              <input
+                type="checkbox"
+                checked={affectedRights.includes(right.id)}
+                onChange={() => toggleAffectedRight(right.id)}
+                className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+              />
+              <span className="text-sm">{right.label}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* Save Button */}
+      <div className="flex justify-end pt-4 border-t border-gray-200">
+        <button
+          onClick={handleSaveSection}
+          disabled={isSubmitting}
+          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
+        >
+          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
+        </button>
+      </div>
+
+      {/* Add Risk Modal */}
+      {showAddRiskModal && (
+        <AddRiskModal
+          likelihood={newRiskLikelihood}
+          impact={newRiskImpact}
+          onClose={() => setShowAddRiskModal(false)}
+          onAdd={async (riskData) => {
+            // This would call the API
+            setShowAddRiskModal(false)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/Section4Editor.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/Section4Editor.tsx
new file mode 100644
index 0000000..ff3f811
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/Section4Editor.tsx
@@ -0,0 +1,159 @@
+'use client'
+
+import React, { useState } from 'react'
+import { DSFA, DSFAMitigation } from '@/lib/sdk/dsfa/types'
+import { RAGSearchPanel } from './RAGSearchPanel'
+import { AddMitigationModal } from './AddMitigationModal'
+
+interface SectionProps {
+  dsfa: DSFA
+  onUpdate: (data: Record<string, unknown>) => Promise<void>
+  isSubmitting: boolean
+}
+
+export function Section4Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
+  const [showAddMitigation, setShowAddMitigation] = useState(false)
+
+  const mitigationsByType = {
+    technical: (dsfa.mitigations || []).filter(m => m.type === 'technical'),
+    organizational: (dsfa.mitigations || []).filter(m => m.type === 'organizational'),
+    legal: (dsfa.mitigations || []).filter(m => m.type === 'legal'),
+  }
+
+  const getStatusBadge = (status: string) => {
+    const styles = {
+      planned: 'bg-gray-100 text-gray-600',
+      in_progress: 'bg-yellow-100 text-yellow-700',
+      implemented: 'bg-blue-100 text-blue-700',
+      verified: 'bg-green-100 text-green-700',
+    }
+    const labels = {
+      planned: 'Geplant',
+      in_progress: 'In Umsetzung',
+      implemented: 'Umgesetzt',
+      verified: 'Verifiziert',
+    }
+    return (
+      <span className={`px-2 py-1 rounded text-xs font-medium ${styles[status as keyof typeof styles] || styles.planned}`}>
+        {labels[status as keyof typeof labels] || status}
+      </span>
+    )
+  }
+
+  const renderMitigationSection = (
+    title: string,
+    icon: React.ReactNode,
+    mitigations: DSFAMitigation[],
+    bgColor: string
+  ) => (
+    <div>
+      <div className="flex items-center gap-2 mb-3">
+        {icon}
+        <h4 className="text-sm font-medium text-gray-700">{title} ({mitigations.length})</h4>
+      </div>
+      {mitigations.length === 0 ? (
+        <div className={`p-4 rounded-lg ${bgColor} text-center text-sm text-gray-500`}>
+          Keine Massnahmen definiert
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {mitigations.map(m => (
+            <div key={m.id} className={`p-4 rounded-lg ${bgColor} border border-gray-200`}>
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="font-medium text-gray-900">{m.description}</div>
+                  <div className="text-sm text-gray-500 mt-1">
+                    Verantwortlich: {m.responsible_party || '-'}
+                    {m.tom_reference && ` | TOM: ${m.tom_reference}`}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  {getStatusBadge(m.status)}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="space-y-6">
+      {/* Add Mitigation Button */}
+      <div className="flex justify-end">
+        <button
+          onClick={() => setShowAddMitigation(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 4v16m8-8H4" />
+          </svg>
+          Massnahme hinzufuegen
+        </button>
+      </div>
+
+      {/* Technical Measures */}
+      {renderMitigationSection(
+        'Technische Massnahmen',
+        <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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>,
+        mitigationsByType.technical,
+        'bg-blue-50'
+      )}
+
+      {/* Organizational Measures */}
+      {renderMitigationSection(
+        'Organisatorische Massnahmen',
+        <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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>,
+        mitigationsByType.organizational,
+        'bg-green-50'
+      )}
+
+      {/* Legal Measures */}
+      {renderMitigationSection(
+        'Rechtliche Massnahmen',
+        <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
+        </svg>,
+        mitigationsByType.legal,
+        'bg-purple-50'
+      )}
+
+      {/* RAG Search for Mitigations */}
+      <RAGSearchPanel
+        context={`Massnahmen Datenschutz-Folgenabschaetzung ${dsfa.processing_description || ''} ${dsfa.processing_purpose || ''}`}
+        categories={['mitigation', 'risk_assessment']}
+      />
+
+      {/* TOM References */}
+      {dsfa.tom_references && dsfa.tom_references.length > 0 && (
+        <div className="bg-gray-50 rounded-xl p-4">
+          <h4 className="text-sm font-medium text-gray-700 mb-2">Verknuepfte TOM-Eintraege</h4>
+          <div className="flex flex-wrap gap-2">
+            {dsfa.tom_references.map((ref, idx) => (
+              <span key={idx} className="px-3 py-1 bg-white border border-gray-200 rounded-full text-sm text-gray-600">
+                {ref}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Add Mitigation Modal */}
+      {showAddMitigation && (
+        <AddMitigationModal
+          risks={dsfa.risks || []}
+          onClose={() => setShowAddMitigation(false)}
+          onAdd={async (mitigationData) => {
+            // This would call the API
+            setShowAddMitigation(false)
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/Section5Editor.tsx b/admin-compliance/app/sdk/dsfa/[id]/_components/Section5Editor.tsx
new file mode 100644
index 0000000..5b7bb50
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/Section5Editor.tsx
@@ -0,0 +1,161 @@
+'use client'
+
+import React, { useState } from 'react'
+import { DSFA } from '@/lib/sdk/dsfa/types'
+
+interface SectionProps {
+  dsfa: DSFA
+  onUpdate: (data: Record<string, unknown>) => Promise<void>
+  isSubmitting: boolean
+}
+
+export function Section5Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
+  const [formData, setFormData] = useState({
+    dpo_consulted: dsfa.dpo_consulted || false,
+    dpo_name: dsfa.dpo_name || '',
+    dpo_opinion: dsfa.dpo_opinion || '',
+    authority_consulted: dsfa.authority_consulted || false,
+    authority_reference: dsfa.authority_reference || '',
+    authority_decision: dsfa.authority_decision || '',
+  })
+
+  const handleSave = () => {
+    onUpdate(formData)
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* DPO Consultation */}
+      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
+        <div className="flex items-start gap-4">
+          <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
+            <svg className="w-6 h-6 text-blue-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>
+          </div>
+          <div className="flex-1">
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.dpo_consulted}
+                onChange={(e) => setFormData(prev => ({ ...prev, dpo_consulted: e.target.checked }))}
+                className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              />
+              <span className="font-medium text-blue-800">
+                Datenschutzbeauftragter wurde konsultiert
+              </span>
+            </label>
+            <p className="text-sm text-blue-600 mt-2">
+              Gemaess Art. 35 Abs. 2 DSGVO muss bei einer DSFA der Rat des DSB eingeholt werden.
+            </p>
+          </div>
+        </div>
+
+        {formData.dpo_consulted && (
+          <div className="mt-4 space-y-4 pt-4 border-t border-blue-200">
+            <div>
+              <label className="block text-sm font-medium text-blue-800 mb-2">Name des DSB</label>
+              <input
+                type="text"
+                value={formData.dpo_name}
+                onChange={(e) => setFormData(prev => ({ ...prev, dpo_name: e.target.value }))}
+                className="w-full px-4 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
+                placeholder="Name des Datenschutzbeauftragten"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-blue-800 mb-2">Stellungnahme des DSB</label>
+              <textarea
+                value={formData.dpo_opinion}
+                onChange={(e) => setFormData(prev => ({ ...prev, dpo_opinion: e.target.value }))}
+                className="w-full px-4 py-3 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
+                rows={4}
+                placeholder="Stellungnahme und Empfehlungen des DSB..."
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Authority Consultation */}
+      <div className="bg-orange-50 border border-orange-200 rounded-xl p-6">
+        <div className="flex items-start gap-4">
+          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
+            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+            </svg>
+          </div>
+          <div className="flex-1">
+            <label className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                checked={formData.authority_consulted}
+                onChange={(e) => setFormData(prev => ({ ...prev, authority_consulted: e.target.checked }))}
+                className="w-5 h-5 rounded border-gray-300 text-orange-600 focus:ring-orange-500"
+              />
+              <span className="font-medium text-orange-800">
+                Aufsichtsbehoerde wurde konsultiert (Art. 36)
+              </span>
+            </label>
+            <p className="text-sm text-orange-600 mt-2">
+              Falls nach Durchfuehrung der Massnahmen weiterhin ein hohes Risiko besteht, ist die Aufsichtsbehoerde zu konsultieren.
+            </p>
+          </div>
+        </div>
+
+        {formData.authority_consulted && (
+          <div className="mt-4 space-y-4 pt-4 border-t border-orange-200">
+            <div>
+              <label className="block text-sm font-medium text-orange-800 mb-2">Aktenzeichen / Referenz</label>
+              <input
+                type="text"
+                value={formData.authority_reference}
+                onChange={(e) => setFormData(prev => ({ ...prev, authority_reference: e.target.value }))}
+                className="w-full px-4 py-2 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
+                placeholder="Aktenzeichen der Behoerde"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-orange-800 mb-2">Entscheidung der Behoerde</label>
+              <textarea
+                value={formData.authority_decision}
+                onChange={(e) => setFormData(prev => ({ ...prev, authority_decision: e.target.value }))}
+                className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
+                rows={4}
+                placeholder="Entscheidung und Auflagen der Aufsichtsbehoerde..."
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Info Box */}
+      <div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
+        <div className="flex items-start gap-3">
+          <svg className="w-5 h-5 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <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" />
+          </svg>
+          <div className="text-sm text-gray-600">
+            <p className="font-medium text-gray-700 mb-1">Hinweis zur Konsultation</p>
+            <p>
+              Die Konsultation der Aufsichtsbehoerde ist nur erforderlich, wenn nach Umsetzung der
+              geplanten Massnahmen weiterhin ein hohes Risiko fuer die Rechte und Freiheiten der
+              betroffenen Personen besteht.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Save Button */}
+      <div className="flex justify-end pt-4 border-t border-gray-200">
+        <button
+          onClick={handleSave}
+          disabled={isSubmitting}
+          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
+        >
+          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/dsfa/[id]/_components/index.ts b/admin-compliance/app/sdk/dsfa/[id]/_components/index.ts
new file mode 100644
index 0000000..15215d5
--- /dev/null
+++ b/admin-compliance/app/sdk/dsfa/[id]/_components/index.ts
@@ -0,0 +1,9 @@
+export { Section1Editor } from './Section1Editor'
+export { Section2Editor } from './Section2Editor'
+export { Section3Editor } from './Section3Editor'
+export { Section4Editor } from './Section4Editor'
+export { Section5Editor } from './Section5Editor'
+export { SDMCoverageOverview } from './SDMCoverageOverview'
+export { RAGSearchPanel } from './RAGSearchPanel'
+export { AddRiskModal } from './AddRiskModal'
+export { AddMitigationModal } from './AddMitigationModal'
diff --git a/admin-compliance/app/sdk/dsfa/[id]/page.tsx b/admin-compliance/app/sdk/dsfa/[id]/page.tsx
index dc18008..71d412f 100644
--- a/admin-compliance/app/sdk/dsfa/[id]/page.tsx
+++ b/admin-compliance/app/sdk/dsfa/[id]/page.tsx
@@ -5,47 +5,16 @@ import Link from 'next/link'
 import { useParams, useRouter } from 'next/navigation'
 import {
   DSFA,
-  DSFARisk,
-  DSFAMitigation,
   DSFA_SECTIONS,
   DSFA_STATUS_LABELS,
   DSFA_RISK_LEVEL_LABELS,
-  DSFA_LEGAL_BASES,
-  DSFA_AFFECTED_RIGHTS,
-  calculateRiskLevel,
-  SDM_GOALS,
 } from '@/lib/sdk/dsfa/types'
-import type { SDMGoal, DSFARiskCategory } from '@/lib/sdk/dsfa/types'
-import {
-  RISK_CATALOG,
-  RISK_CATEGORY_LABELS,
-  COMPONENT_FAMILY_LABELS,
-  getRisksByCategory,
-  getRisksBySDMGoal,
-} from '@/lib/sdk/dsfa/risk-catalog'
-import type { CatalogRisk } from '@/lib/sdk/dsfa/risk-catalog'
-import {
-  MITIGATION_LIBRARY,
-  MITIGATION_TYPE_LABELS,
-  SDM_GOAL_LABELS,
-  EFFECTIVENESS_LABELS,
-  getMitigationsBySDMGoal,
-  getMitigationsByType,
-  getMitigationsForRisk,
-} from '@/lib/sdk/dsfa/mitigation-library'
-import type { CatalogMitigation } from '@/lib/sdk/dsfa/mitigation-library'
 import {
   getDSFA,
   updateDSFASection,
-  addDSFARisk,
-  removeDSFARisk,
-  addDSFAMitigation,
-  updateDSFAMitigationStatus,
   updateDSFA,
 } from '@/lib/sdk/dsfa/api'
 import {
-  RiskMatrix,
-  ApprovalPanel,
   DSFASidebar,
   ThresholdAnalysisSection,
   StakeholderConsultationSection,
@@ -53,1473 +22,14 @@ import {
   ReviewScheduleSection,
   AIUseCaseSection,
 } from '@/components/sdk/dsfa'
-
-// =============================================================================
-// SECTION EDITORS
-// =============================================================================
-
-interface SectionProps {
-  dsfa: DSFA
-  onUpdate: (data: Record<string, unknown>) => Promise<void>
-  isSubmitting: boolean
-}
-
-// Section 1: Systematische Beschreibung (Art. 35 Abs. 7 lit. a)
-function Section1Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
-  const [formData, setFormData] = useState({
-    processing_description: dsfa.processing_description || '',
-    processing_purpose: dsfa.processing_purpose || '',
-    data_categories: dsfa.data_categories || [],
-    data_subjects: dsfa.data_subjects || [],
-    recipients: dsfa.recipients || [],
-    legal_basis: dsfa.legal_basis || '',
-    legal_basis_details: dsfa.legal_basis_details || '',
-  })
-  const [newCategory, setNewCategory] = useState('')
-  const [newSubject, setNewSubject] = useState('')
-  const [newRecipient, setNewRecipient] = useState('')
-
-  const handleSave = () => {
-    onUpdate(formData)
-  }
-
-  const addItem = (field: 'data_categories' | 'data_subjects' | 'recipients', value: string, setter: (v: string) => void) => {
-    if (value.trim()) {
-      setFormData(prev => ({
-        ...prev,
-        [field]: [...prev[field], value.trim()]
-      }))
-      setter('')
-    }
-  }
-
-  const removeItem = (field: 'data_categories' | 'data_subjects' | 'recipients', index: number) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: prev[field].filter((_, i) => i !== index)
-    }))
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Processing Purpose */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Verarbeitungszweck *
-        </label>
-        <textarea
-          value={formData.processing_purpose}
-          onChange={(e) => setFormData(prev => ({ ...prev, processing_purpose: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={3}
-          placeholder="Beschreiben Sie den Zweck der Datenverarbeitung..."
-        />
-      </div>
-
-      {/* Processing Description */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Beschreibung der Verarbeitung *
-        </label>
-        <textarea
-          value={formData.processing_description}
-          onChange={(e) => setFormData(prev => ({ ...prev, processing_description: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={4}
-          placeholder="Detaillierte Beschreibung der Verarbeitungsvorgaenge..."
-        />
-      </div>
-
-      {/* Data Categories */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Datenkategorien *
-        </label>
-        <div className="flex flex-wrap gap-2 mb-2">
-          {formData.data_categories.map((cat, idx) => (
-            <span key={idx} className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm flex items-center gap-2">
-              {cat}
-              <button onClick={() => removeItem('data_categories', idx)} className="hover:text-blue-900">
-                <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>
-            </span>
-          ))}
-        </div>
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={newCategory}
-            onChange={(e) => setNewCategory(e.target.value)}
-            onKeyPress={(e) => e.key === 'Enter' && addItem('data_categories', newCategory, setNewCategory)}
-            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-            placeholder="Kategorie hinzufuegen..."
-          />
-          <button
-            onClick={() => addItem('data_categories', newCategory, setNewCategory)}
-            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-          >
-            +
-          </button>
-        </div>
-      </div>
-
-      {/* Data Subjects */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Betroffene Personen *
-        </label>
-        <div className="flex flex-wrap gap-2 mb-2">
-          {formData.data_subjects.map((subj, idx) => (
-            <span key={idx} className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm flex items-center gap-2">
-              {subj}
-              <button onClick={() => removeItem('data_subjects', idx)} className="hover:text-green-900">
-                <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>
-            </span>
-          ))}
-        </div>
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={newSubject}
-            onChange={(e) => setNewSubject(e.target.value)}
-            onKeyPress={(e) => e.key === 'Enter' && addItem('data_subjects', newSubject, setNewSubject)}
-            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-            placeholder="z.B. Kunden, Mitarbeiter..."
-          />
-          <button
-            onClick={() => addItem('data_subjects', newSubject, setNewSubject)}
-            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-          >
-            +
-          </button>
-        </div>
-      </div>
-
-      {/* Recipients */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Empfaenger
-        </label>
-        <div className="flex flex-wrap gap-2 mb-2">
-          {formData.recipients.map((rec, idx) => (
-            <span key={idx} className="px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm flex items-center gap-2">
-              {rec}
-              <button onClick={() => removeItem('recipients', idx)} className="hover:text-orange-900">
-                <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>
-            </span>
-          ))}
-        </div>
-        <div className="flex gap-2">
-          <input
-            type="text"
-            value={newRecipient}
-            onChange={(e) => setNewRecipient(e.target.value)}
-            onKeyPress={(e) => e.key === 'Enter' && addItem('recipients', newRecipient, setNewRecipient)}
-            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-            placeholder="Empfaenger hinzufuegen..."
-          />
-          <button
-            onClick={() => addItem('recipients', newRecipient, setNewRecipient)}
-            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-          >
-            +
-          </button>
-        </div>
-      </div>
-
-      {/* Legal Basis */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Rechtsgrundlage *
-        </label>
-        <select
-          value={formData.legal_basis}
-          onChange={(e) => setFormData(prev => ({ ...prev, legal_basis: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-        >
-          <option value="">Bitte waehlen...</option>
-          {Object.entries(DSFA_LEGAL_BASES).map(([key, label]) => (
-            <option key={key} value={key}>{label}</option>
-          ))}
-        </select>
-      </div>
-
-      {/* Legal Basis Details */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Begruendung der Rechtsgrundlage
-        </label>
-        <textarea
-          value={formData.legal_basis_details}
-          onChange={(e) => setFormData(prev => ({ ...prev, legal_basis_details: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={3}
-          placeholder="Erlaeutern Sie, warum diese Rechtsgrundlage anwendbar ist..."
-        />
-      </div>
-
-      {/* Save Button */}
-      <div className="flex justify-end pt-4 border-t border-gray-200">
-        <button
-          onClick={handleSave}
-          disabled={isSubmitting}
-          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
-        >
-          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-// Section 2: Notwendigkeit & Verhaeltnismaessigkeit (Art. 35 Abs. 7 lit. b)
-function Section2Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
-  const [formData, setFormData] = useState({
-    necessity_assessment: dsfa.necessity_assessment || '',
-    proportionality_assessment: dsfa.proportionality_assessment || '',
-    data_minimization: dsfa.data_minimization || '',
-    alternatives_considered: dsfa.alternatives_considered || '',
-    retention_justification: dsfa.retention_justification || '',
-  })
-
-  const handleSave = () => {
-    onUpdate(formData)
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Necessity */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Notwendigkeit der Verarbeitung *
-        </label>
-        <p className="text-xs text-gray-500 mb-2">
-          Erklaeren Sie, warum die Verarbeitung fuer den angegebenen Zweck notwendig ist.
-        </p>
-        <textarea
-          value={formData.necessity_assessment}
-          onChange={(e) => setFormData(prev => ({ ...prev, necessity_assessment: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={4}
-          placeholder="Beschreiben Sie die Notwendigkeit..."
-        />
-      </div>
-
-      {/* Proportionality */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Verhaeltnismaessigkeit *
-        </label>
-        <p className="text-xs text-gray-500 mb-2">
-          Begruenden Sie, warum der Eingriff in die Rechte der Betroffenen verhaeltnismaessig ist.
-        </p>
-        <textarea
-          value={formData.proportionality_assessment}
-          onChange={(e) => setFormData(prev => ({ ...prev, proportionality_assessment: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={4}
-          placeholder="Beschreiben Sie die Verhaeltnismaessigkeit..."
-        />
-      </div>
-
-      {/* Data Minimization */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Datenminimierung
-        </label>
-        <p className="text-xs text-gray-500 mb-2">
-          Welche Massnahmen wurden ergriffen, um nur die notwendigen Daten zu erheben?
-        </p>
-        <textarea
-          value={formData.data_minimization}
-          onChange={(e) => setFormData(prev => ({ ...prev, data_minimization: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={3}
-          placeholder="Beschreiben Sie die Datenminimierungsmassnahmen..."
-        />
-      </div>
-
-      {/* Alternatives */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Gepruefe Alternativen
-        </label>
-        <p className="text-xs text-gray-500 mb-2">
-          Welche weniger eingriffsintensiven Alternativen wurden geprueft?
-        </p>
-        <textarea
-          value={formData.alternatives_considered}
-          onChange={(e) => setFormData(prev => ({ ...prev, alternatives_considered: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={3}
-          placeholder="Beschreiben Sie gepruefe Alternativen..."
-        />
-      </div>
-
-      {/* Retention */}
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
-          Speicherdauer / Loeschfristen
-        </label>
-        <textarea
-          value={formData.retention_justification}
-          onChange={(e) => setFormData(prev => ({ ...prev, retention_justification: e.target.value }))}
-          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          rows={3}
-          placeholder="Begruenden Sie die geplante Speicherdauer..."
-        />
-      </div>
-
-      {/* Save Button */}
-      <div className="flex justify-end pt-4 border-t border-gray-200">
-        <button
-          onClick={handleSave}
-          disabled={isSubmitting}
-          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
-        >
-          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-// Section 3: Risikobewertung (Art. 35 Abs. 7 lit. c)
-function Section3Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
-  const [selectedRisk, setSelectedRisk] = useState<DSFARisk | null>(null)
-  const [showAddRiskModal, setShowAddRiskModal] = useState(false)
-  const [newRiskLikelihood, setNewRiskLikelihood] = useState<'low' | 'medium' | 'high'>('medium')
-  const [newRiskImpact, setNewRiskImpact] = useState<'low' | 'medium' | 'high'>('medium')
-  const [affectedRights, setAffectedRights] = useState<string[]>(dsfa.affected_rights || [])
-
-  const handleAddRisk = (likelihood: 'low' | 'medium' | 'high', impact: 'low' | 'medium' | 'high') => {
-    setNewRiskLikelihood(likelihood)
-    setNewRiskImpact(impact)
-    setShowAddRiskModal(true)
-  }
-
-  const toggleAffectedRight = (rightId: string) => {
-    setAffectedRights(prev =>
-      prev.includes(rightId)
-        ? prev.filter(r => r !== rightId)
-        : [...prev, rightId]
-    )
-  }
-
-  const handleSaveSection = () => {
-    onUpdate({
-      affected_rights: affectedRights,
-      overall_risk_level: dsfa.overall_risk_level,
-    })
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Risk Matrix */}
-      <div className="bg-gray-50 rounded-xl p-6">
-        <RiskMatrix
-          risks={dsfa.risks || []}
-          onRiskSelect={(risk) => setSelectedRisk(risk)}
-          onAddRisk={handleAddRisk}
-          selectedRiskId={selectedRisk?.id}
-          readOnly={dsfa.status !== 'draft' && dsfa.status !== 'needs_update'}
-        />
-      </div>
-
-      {/* Triggered Rules from UCCA */}
-      {dsfa.triggered_rule_codes && dsfa.triggered_rule_codes.length > 0 && (
-        <div className="bg-red-50 border border-red-200 rounded-xl p-4">
-          <h4 className="text-sm font-medium text-red-800 mb-2">
-            DSFA-ausloesende Regeln (aus UCCA)
-          </h4>
-          <div className="flex flex-wrap gap-2">
-            {dsfa.triggered_rule_codes.map(code => (
-              <span key={code} className="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">
-                {code}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Risk List */}
-      <div>
-        <h4 className="text-sm font-medium text-gray-700 mb-3">Identifizierte Risiken ({(dsfa.risks || []).length})</h4>
-        {(dsfa.risks || []).length === 0 ? (
-          <div className="text-center py-8 text-gray-500">
-            <svg className="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <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>
-            <p>Noch keine Risiken erfasst</p>
-            <p className="text-sm mt-1">Klicken Sie in der Matrix auf eine Zelle, um ein Risiko hinzuzufuegen.</p>
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {(dsfa.risks || []).map(risk => {
-              const { level } = calculateRiskLevel(risk.likelihood, risk.impact)
-              const levelColors = {
-                low: 'bg-green-100 text-green-700 border-green-200',
-                medium: 'bg-yellow-100 text-yellow-700 border-yellow-200',
-                high: 'bg-orange-100 text-orange-700 border-orange-200',
-                very_high: 'bg-red-100 text-red-700 border-red-200',
-              }
-              return (
-                <div
-                  key={risk.id}
-                  className={`p-4 rounded-xl border cursor-pointer transition-all ${
-                    selectedRisk?.id === risk.id ? 'ring-2 ring-purple-500' : ''
-                  } ${levelColors[level]}`}
-                  onClick={() => setSelectedRisk(risk)}
-                >
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <div className="font-medium">{risk.description}</div>
-                      <div className="text-sm mt-1 opacity-75">
-                        Kategorie: {risk.category === 'confidentiality' ? 'Vertraulichkeit' :
-                                    risk.category === 'integrity' ? 'Integritaet' :
-                                    risk.category === 'availability' ? 'Verfuegbarkeit' :
-                                    'Rechte & Freiheiten'}
-                      </div>
-                      <div className="text-sm opacity-75">
-                        Eintrittswahrscheinlichkeit: {risk.likelihood === 'low' ? 'Niedrig' : risk.likelihood === 'medium' ? 'Mittel' : 'Hoch'} |
-                        Auswirkung: {risk.impact === 'low' ? 'Niedrig' : risk.impact === 'medium' ? 'Mittel' : 'Hoch'}
-                      </div>
-                    </div>
-                    <span className={`px-2 py-1 rounded text-xs font-medium ${levelColors[level]}`}>
-                      {DSFA_RISK_LEVEL_LABELS[level]}
-                    </span>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* RAG Search for Risks */}
-      <RAGSearchPanel
-        context={`Risiken Datenschutz-Folgenabschaetzung ${dsfa.processing_description || ''} ${dsfa.processing_purpose || ''}`}
-        categories={['risk_assessment', 'threshold_analysis']}
-      />
-
-      {/* Affected Rights */}
-      <div>
-        <h4 className="text-sm font-medium text-gray-700 mb-3">Betroffene Rechte & Freiheiten</h4>
-        <div className="grid grid-cols-2 gap-2">
-          {DSFA_AFFECTED_RIGHTS.map(right => (
-            <label
-              key={right.id}
-              className={`flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
-                affectedRights.includes(right.id)
-                  ? 'bg-purple-50 border-purple-300'
-                  : 'bg-white border-gray-200 hover:bg-gray-50'
-              }`}
-            >
-              <input
-                type="checkbox"
-                checked={affectedRights.includes(right.id)}
-                onChange={() => toggleAffectedRight(right.id)}
-                className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
-              />
-              <span className="text-sm">{right.label}</span>
-            </label>
-          ))}
-        </div>
-      </div>
-
-      {/* Save Button */}
-      <div className="flex justify-end pt-4 border-t border-gray-200">
-        <button
-          onClick={handleSaveSection}
-          disabled={isSubmitting}
-          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
-        >
-          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
-        </button>
-      </div>
-
-      {/* Add Risk Modal */}
-      {showAddRiskModal && (
-        <AddRiskModal
-          likelihood={newRiskLikelihood}
-          impact={newRiskImpact}
-          onClose={() => setShowAddRiskModal(false)}
-          onAdd={async (riskData) => {
-            // This would call the API
-            setShowAddRiskModal(false)
-          }}
-        />
-      )}
-    </div>
-  )
-}
-
-// Section 4: Abhilfemassnahmen (Art. 35 Abs. 7 lit. d)
-function Section4Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
-  const [showAddMitigation, setShowAddMitigation] = useState(false)
-
-  const mitigationsByType = {
-    technical: (dsfa.mitigations || []).filter(m => m.type === 'technical'),
-    organizational: (dsfa.mitigations || []).filter(m => m.type === 'organizational'),
-    legal: (dsfa.mitigations || []).filter(m => m.type === 'legal'),
-  }
-
-  const getStatusBadge = (status: string) => {
-    const styles = {
-      planned: 'bg-gray-100 text-gray-600',
-      in_progress: 'bg-yellow-100 text-yellow-700',
-      implemented: 'bg-blue-100 text-blue-700',
-      verified: 'bg-green-100 text-green-700',
-    }
-    const labels = {
-      planned: 'Geplant',
-      in_progress: 'In Umsetzung',
-      implemented: 'Umgesetzt',
-      verified: 'Verifiziert',
-    }
-    return (
-      <span className={`px-2 py-1 rounded text-xs font-medium ${styles[status as keyof typeof styles] || styles.planned}`}>
-        {labels[status as keyof typeof labels] || status}
-      </span>
-    )
-  }
-
-  const renderMitigationSection = (
-    title: string,
-    icon: React.ReactNode,
-    mitigations: DSFAMitigation[],
-    bgColor: string
-  ) => (
-    <div>
-      <div className="flex items-center gap-2 mb-3">
-        {icon}
-        <h4 className="text-sm font-medium text-gray-700">{title} ({mitigations.length})</h4>
-      </div>
-      {mitigations.length === 0 ? (
-        <div className={`p-4 rounded-lg ${bgColor} text-center text-sm text-gray-500`}>
-          Keine Massnahmen definiert
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {mitigations.map(m => (
-            <div key={m.id} className={`p-4 rounded-lg ${bgColor} border border-gray-200`}>
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <div className="font-medium text-gray-900">{m.description}</div>
-                  <div className="text-sm text-gray-500 mt-1">
-                    Verantwortlich: {m.responsible_party || '-'}
-                    {m.tom_reference && ` | TOM: ${m.tom_reference}`}
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  {getStatusBadge(m.status)}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-
-  return (
-    <div className="space-y-6">
-      {/* Add Mitigation Button */}
-      <div className="flex justify-end">
-        <button
-          onClick={() => setShowAddMitigation(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 4v16m8-8H4" />
-          </svg>
-          Massnahme hinzufuegen
-        </button>
-      </div>
-
-      {/* Technical Measures */}
-      {renderMitigationSection(
-        'Technische Massnahmen',
-        <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <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>,
-        mitigationsByType.technical,
-        'bg-blue-50'
-      )}
-
-      {/* Organizational Measures */}
-      {renderMitigationSection(
-        'Organisatorische Massnahmen',
-        <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <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>,
-        mitigationsByType.organizational,
-        'bg-green-50'
-      )}
-
-      {/* Legal Measures */}
-      {renderMitigationSection(
-        'Rechtliche Massnahmen',
-        <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
-        </svg>,
-        mitigationsByType.legal,
-        'bg-purple-50'
-      )}
-
-      {/* RAG Search for Mitigations */}
-      <RAGSearchPanel
-        context={`Massnahmen Datenschutz-Folgenabschaetzung ${dsfa.processing_description || ''} ${dsfa.processing_purpose || ''}`}
-        categories={['mitigation', 'risk_assessment']}
-      />
-
-      {/* TOM References */}
-      {dsfa.tom_references && dsfa.tom_references.length > 0 && (
-        <div className="bg-gray-50 rounded-xl p-4">
-          <h4 className="text-sm font-medium text-gray-700 mb-2">Verknuepfte TOM-Eintraege</h4>
-          <div className="flex flex-wrap gap-2">
-            {dsfa.tom_references.map((ref, idx) => (
-              <span key={idx} className="px-3 py-1 bg-white border border-gray-200 rounded-full text-sm text-gray-600">
-                {ref}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Add Mitigation Modal */}
-      {showAddMitigation && (
-        <AddMitigationModal
-          risks={dsfa.risks || []}
-          onClose={() => setShowAddMitigation(false)}
-          onAdd={async (mitigationData) => {
-            // This would call the API
-            setShowAddMitigation(false)
-          }}
-        />
-      )}
-    </div>
-  )
-}
-
-// Section 5: Stellungnahme DSB (Art. 35 Abs. 2 + Art. 36)
-function Section5Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
-  const [formData, setFormData] = useState({
-    dpo_consulted: dsfa.dpo_consulted || false,
-    dpo_name: dsfa.dpo_name || '',
-    dpo_opinion: dsfa.dpo_opinion || '',
-    authority_consulted: dsfa.authority_consulted || false,
-    authority_reference: dsfa.authority_reference || '',
-    authority_decision: dsfa.authority_decision || '',
-  })
-
-  const handleSave = () => {
-    onUpdate(formData)
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* DPO Consultation */}
-      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
-        <div className="flex items-start gap-4">
-          <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
-            <svg className="w-6 h-6 text-blue-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>
-          </div>
-          <div className="flex-1">
-            <label className="flex items-center gap-3">
-              <input
-                type="checkbox"
-                checked={formData.dpo_consulted}
-                onChange={(e) => setFormData(prev => ({ ...prev, dpo_consulted: e.target.checked }))}
-                className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-              />
-              <span className="font-medium text-blue-800">
-                Datenschutzbeauftragter wurde konsultiert
-              </span>
-            </label>
-            <p className="text-sm text-blue-600 mt-2">
-              Gemaess Art. 35 Abs. 2 DSGVO muss bei einer DSFA der Rat des DSB eingeholt werden.
-            </p>
-          </div>
-        </div>
-
-        {formData.dpo_consulted && (
-          <div className="mt-4 space-y-4 pt-4 border-t border-blue-200">
-            <div>
-              <label className="block text-sm font-medium text-blue-800 mb-2">
-                Name des DSB
-              </label>
-              <input
-                type="text"
-                value={formData.dpo_name}
-                onChange={(e) => setFormData(prev => ({ ...prev, dpo_name: e.target.value }))}
-                className="w-full px-4 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
-                placeholder="Name des Datenschutzbeauftragten"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-blue-800 mb-2">
-                Stellungnahme des DSB
-              </label>
-              <textarea
-                value={formData.dpo_opinion}
-                onChange={(e) => setFormData(prev => ({ ...prev, dpo_opinion: e.target.value }))}
-                className="w-full px-4 py-3 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
-                rows={4}
-                placeholder="Stellungnahme und Empfehlungen des DSB..."
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Authority Consultation */}
-      <div className="bg-orange-50 border border-orange-200 rounded-xl p-6">
-        <div className="flex items-start gap-4">
-          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
-            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-            </svg>
-          </div>
-          <div className="flex-1">
-            <label className="flex items-center gap-3">
-              <input
-                type="checkbox"
-                checked={formData.authority_consulted}
-                onChange={(e) => setFormData(prev => ({ ...prev, authority_consulted: e.target.checked }))}
-                className="w-5 h-5 rounded border-gray-300 text-orange-600 focus:ring-orange-500"
-              />
-              <span className="font-medium text-orange-800">
-                Aufsichtsbehoerde wurde konsultiert (Art. 36)
-              </span>
-            </label>
-            <p className="text-sm text-orange-600 mt-2">
-              Falls nach Durchfuehrung der Massnahmen weiterhin ein hohes Risiko besteht, ist die Aufsichtsbehoerde zu konsultieren.
-            </p>
-          </div>
-        </div>
-
-        {formData.authority_consulted && (
-          <div className="mt-4 space-y-4 pt-4 border-t border-orange-200">
-            <div>
-              <label className="block text-sm font-medium text-orange-800 mb-2">
-                Aktenzeichen / Referenz
-              </label>
-              <input
-                type="text"
-                value={formData.authority_reference}
-                onChange={(e) => setFormData(prev => ({ ...prev, authority_reference: e.target.value }))}
-                className="w-full px-4 py-2 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
-                placeholder="Aktenzeichen der Behoerde"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-orange-800 mb-2">
-                Entscheidung der Behoerde
-              </label>
-              <textarea
-                value={formData.authority_decision}
-                onChange={(e) => setFormData(prev => ({ ...prev, authority_decision: e.target.value }))}
-                className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
-                rows={4}
-                placeholder="Entscheidung und Auflagen der Aufsichtsbehoerde..."
-              />
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Info Box */}
-      <div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
-        <div className="flex items-start gap-3">
-          <svg className="w-5 h-5 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <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" />
-          </svg>
-          <div className="text-sm text-gray-600">
-            <p className="font-medium text-gray-700 mb-1">Hinweis zur Konsultation</p>
-            <p>
-              Die Konsultation der Aufsichtsbehoerde ist nur erforderlich, wenn nach Umsetzung der
-              geplanten Massnahmen weiterhin ein hohes Risiko fuer die Rechte und Freiheiten der
-              betroffenen Personen besteht.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      {/* Save Button */}
-      <div className="flex justify-end pt-4 border-t border-gray-200">
-        <button
-          onClick={handleSave}
-          disabled={isSubmitting}
-          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
-        >
-          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// SDM COVERAGE OVERVIEW
-// =============================================================================
-
-function SDMCoverageOverview({ dsfa }: { dsfa: DSFA }) {
-  const goals = Object.keys(SDM_GOALS) as SDMGoal[]
-  const riskCount = dsfa.risks?.length || 0
-  const mitigationCount = dsfa.mitigations?.length || 0
-
-  // Count catalog risks and mitigations per SDM goal by matching descriptions
-  const goalCoverage = goals.map(goal => {
-    const catalogRisks = RISK_CATALOG.filter(r => r.sdmGoal === goal)
-    const catalogMitigations = MITIGATION_LIBRARY.filter(m => m.sdmGoals.includes(goal))
-
-    // Check if any DSFA risk descriptions contain catalog risk titles for this goal
-    const matchedRisks = catalogRisks.filter(cr =>
-      dsfa.risks?.some(r => r.description?.includes(cr.title))
-    ).length
-
-    // Check if any DSFA mitigation descriptions contain catalog mitigation titles for this goal
-    const matchedMitigations = catalogMitigations.filter(cm =>
-      dsfa.mitigations?.some(m => m.description?.includes(cm.title))
-    ).length
-
-    const totalCatalogRisks = catalogRisks.length
-    const totalCatalogMitigations = catalogMitigations.length
-
-    // Coverage: simple heuristic based on whether there are mitigations for risks in this area
-    const hasRisks = matchedRisks > 0 || dsfa.risks?.some(r => {
-      const cat = r.category
-      if (goal === 'vertraulichkeit' && cat === 'confidentiality') return true
-      if (goal === 'integritaet' && cat === 'integrity') return true
-      if (goal === 'verfuegbarkeit' && cat === 'availability') return true
-      if (goal === 'nichtverkettung' && cat === 'rights_freedoms') return true
-      return false
-    })
-
-    const coverage = matchedMitigations > 0 ? 'covered' :
-                     hasRisks ? 'gaps' : 'no_data'
-
-    return {
-      goal,
-      info: SDM_GOALS[goal],
-      matchedRisks,
-      matchedMitigations,
-      totalCatalogRisks,
-      totalCatalogMitigations,
-      coverage,
-    }
-  })
-
-  return (
-    <div className="mt-6 bg-white rounded-xl border p-6">
-      <h3 className="text-md font-semibold text-gray-900 mb-1">SDM-Abdeckung (Gewaehrleistungsziele)</h3>
-      <p className="text-xs text-gray-500 mb-4">Uebersicht ueber die Abdeckung der 7 Gewaehrleistungsziele des Standard-Datenschutzmodells.</p>
-
-      <div className="grid grid-cols-7 gap-2">
-        {goalCoverage.map(({ goal, info, matchedRisks, matchedMitigations, coverage }) => (
-          <div
-            key={goal}
-            className={`p-3 rounded-lg text-center border ${
-              coverage === 'covered' ? 'bg-green-50 border-green-200' :
-              coverage === 'gaps' ? 'bg-yellow-50 border-yellow-200' :
-              'bg-gray-50 border-gray-200'
-            }`}
-          >
-            <div className={`text-lg mb-1 ${
-              coverage === 'covered' ? 'text-green-600' :
-              coverage === 'gaps' ? 'text-yellow-600' :
-              'text-gray-400'
-            }`}>
-              {coverage === 'covered' ? '\u2713' : coverage === 'gaps' ? '!' : '\u2013'}
-            </div>
-            <div className="text-xs font-medium text-gray-900 leading-tight">{info.name}</div>
-            <div className="text-[10px] text-gray-500 mt-1">
-              {matchedRisks}R / {matchedMitigations}M
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="flex items-center gap-4 mt-3 text-xs text-gray-500">
-        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-green-500"></span> Abgedeckt</span>
-        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-yellow-500"></span> Luecken</span>
-        <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-full bg-gray-300"></span> Keine Daten</span>
-        <span className="ml-auto">R = Risiken, M = Massnahmen</span>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// RAG SEARCH PANEL
-// =============================================================================
-
-interface RAGSearchResult {
-  text: string
-  regulation_code: string
-  regulation_name: string
-  regulation_short: string
-  category: string
-  article?: string
-  source_url?: string
-  score: number
-}
-
-interface RAGSearchResponse {
-  query: string
-  results: RAGSearchResult[]
-  count: number
-}
-
-function RAGSearchPanel({
-  context,
-  categories,
-  onInsertText,
-}: {
-  context: string
-  categories?: string[]
-  onInsertText?: (text: string) => void
-}) {
-  const [isOpen, setIsOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [isSearching, setIsSearching] = useState(false)
-  const [results, setResults] = useState<RAGSearchResponse | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [copiedId, setCopiedId] = useState<string | null>(null)
-
-  const buildQuery = () => {
-    if (query.trim()) return query.trim()
-    // Auto-generate query from context
-    return context.substring(0, 200)
-  }
-
-  const handleSearch = async () => {
-    const searchQuery = buildQuery()
-    if (!searchQuery || searchQuery.length < 3) return
-
-    setIsSearching(true)
-    setError(null)
-
-    try {
-      const response = await fetch('/api/sdk/v1/rag/search', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          query: searchQuery,
-          collection: 'bp_dsfa_corpus',
-          top_k: 5,
-        }),
-      })
-      if (!response.ok) throw new Error(`Suche fehlgeschlagen (${response.status})`)
-      const data: RAGSearchResponse = await response.json()
-      setResults(data)
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Suche fehlgeschlagen')
-      setResults(null)
-    } finally {
-      setIsSearching(false)
-    }
-  }
-
-  const handleInsert = (text: string, resultId: string) => {
-    if (onInsertText) {
-      onInsertText(text)
-    } else {
-      navigator.clipboard.writeText(text)
-    }
-    setCopiedId(resultId)
-    setTimeout(() => setCopiedId(null), 2000)
-  }
-
-  if (!isOpen) {
-    return (
-      <button
-        onClick={() => setIsOpen(true)}
-        className="flex items-center gap-2 px-4 py-2 text-sm bg-indigo-50 text-indigo-700 rounded-lg border border-indigo-200 hover:bg-indigo-100 transition-colors"
-      >
-        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-        </svg>
-        Empfehlung suchen (RAG)
-      </button>
-    )
-  }
-
-  return (
-    <div className="bg-indigo-50 border border-indigo-200 rounded-xl p-4 space-y-4">
-      <div className="flex items-center justify-between">
-        <h4 className="text-sm font-medium text-indigo-800 flex items-center gap-2">
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-          </svg>
-          DSFA-Wissenssuche (RAG)
-        </h4>
-        <button
-          onClick={() => { setIsOpen(false); setResults(null); setError(null) }}
-          className="text-indigo-400 hover:text-indigo-600"
-        >
-          <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>
-
-      {/* Search Input */}
-      <div className="flex gap-2">
-        <input
-          type="text"
-          value={query}
-          onChange={e => setQuery(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && handleSearch()}
-          placeholder={`Suchbegriff (oder leer fuer automatische Kontextsuche)...`}
-          className="flex-1 px-3 py-2 text-sm border border-indigo-300 rounded-lg bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
-        />
-        <button
-          onClick={handleSearch}
-          disabled={isSearching}
-          className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50 transition-colors"
-        >
-          {isSearching ? 'Suche...' : 'Suchen'}
-        </button>
-      </div>
-
-      {/* Error */}
-      {error && (
-        <div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg p-3">
-          {error}
-        </div>
-      )}
-
-      {/* Results */}
-      {results && results.results.length > 0 && (
-        <div className="space-y-3">
-          <p className="text-xs text-indigo-600">{results.count} Ergebnis(se) gefunden</p>
-
-          {results.results.map((r, idx) => {
-            const resultId = `${r.regulation_code}-${idx}`
-            return (
-              <div key={resultId} className="bg-white rounded-lg border border-indigo-100 p-3">
-                <div className="flex items-start justify-between gap-2">
-                  <div className="flex-1 min-w-0">
-                    <div className="text-xs font-medium text-indigo-600 mb-1">
-                      {r.regulation_name}{r.article ? ` — ${r.article}` : ''}
-                    </div>
-                    <p className="text-sm text-gray-700 leading-relaxed whitespace-pre-line">
-                      {r.text.length > 400 ? r.text.substring(0, 400) + '...' : r.text}
-                    </p>
-                    <div className="flex items-center gap-2 mt-2">
-                      <span className="text-xs text-gray-400 font-mono">
-                        {r.regulation_short || r.regulation_code} ({(r.score * 100).toFixed(0)}%)
-                      </span>
-                      {r.category && (
-                        <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{r.category}</span>
-                      )}
-                      {r.source_url && (
-                        <a href={r.source_url} target="_blank" rel="noopener noreferrer" className="text-xs text-blue-500 hover:underline">Quelle</a>
-                      )}
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => handleInsert(r.text, resultId)}
-                    className={`flex-shrink-0 px-3 py-1.5 text-xs rounded-lg transition-colors ${
-                      copiedId === resultId
-                        ? 'bg-green-100 text-green-700'
-                        : 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200'
-                    }`}
-                    title="In Beschreibung uebernehmen"
-                  >
-                    {copiedId === resultId ? 'Kopiert!' : 'Uebernehmen'}
-                  </button>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-      {results && results.results.length === 0 && (
-        <div className="text-sm text-indigo-600 text-center py-4">
-          Keine Ergebnisse gefunden. Versuchen Sie einen anderen Suchbegriff.
-        </div>
-      )}
-    </div>
-  )
-}
-
-// =============================================================================
-// MODALS
-// =============================================================================
-
-function AddRiskModal({
-  likelihood,
-  impact,
-  onClose,
-  onAdd,
-}: {
-  likelihood: 'low' | 'medium' | 'high'
-  impact: 'low' | 'medium' | 'high'
-  onClose: () => void
-  onAdd: (data: { category: string; description: string }) => void
-}) {
-  const [mode, setMode] = useState<'catalog' | 'manual'>('catalog')
-  const [category, setCategory] = useState('confidentiality')
-  const [description, setDescription] = useState('')
-  const [catalogFilter, setCatalogFilter] = useState<DSFARiskCategory | 'all'>('all')
-  const [sdmFilter, setSdmFilter] = useState<SDMGoal | 'all'>('all')
-
-  const { level } = calculateRiskLevel(likelihood, impact)
-
-  const filteredCatalog = RISK_CATALOG.filter(r => {
-    if (catalogFilter !== 'all' && r.category !== catalogFilter) return false
-    if (sdmFilter !== 'all' && r.sdmGoal !== sdmFilter) return false
-    return true
-  })
-
-  function selectCatalogRisk(risk: CatalogRisk) {
-    setCategory(risk.category)
-    setDescription(`${risk.title}\n\n${risk.description}`)
-    setMode('manual')
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">Risiko hinzufuegen</h3>
-
-        <div className="mb-4 p-3 rounded-lg bg-gray-50">
-          <div className="text-sm text-gray-500">
-            Eintrittswahrscheinlichkeit: <span className="font-medium text-gray-700">{likelihood === 'low' ? 'Niedrig' : likelihood === 'medium' ? 'Mittel' : 'Hoch'}</span>
-            {' | '}
-            Auswirkung: <span className="font-medium text-gray-700">{impact === 'low' ? 'Niedrig' : impact === 'medium' ? 'Mittel' : 'Hoch'}</span>
-            {' | '}
-            Risikostufe: <span className="font-medium">{DSFA_RISK_LEVEL_LABELS[level]}</span>
-          </div>
-        </div>
-
-        {/* Tab Toggle */}
-        <div className="flex border-b mb-4">
-          <button
-            onClick={() => setMode('catalog')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
-              mode === 'catalog' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Aus Katalog waehlen ({RISK_CATALOG.length})
-          </button>
-          <button
-            onClick={() => setMode('manual')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
-              mode === 'manual' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Manuell eingeben
-          </button>
-        </div>
-
-        {mode === 'catalog' ? (
-          <div className="space-y-3">
-            {/* Filters */}
-            <div className="flex gap-2">
-              <select
-                value={catalogFilter}
-                onChange={e => setCatalogFilter(e.target.value as DSFARiskCategory | 'all')}
-                className="text-sm border rounded px-2 py-1"
-              >
-                <option value="all">Alle Kategorien</option>
-                {Object.entries(RISK_CATEGORY_LABELS).map(([key, label]) => (
-                  <option key={key} value={key}>{label}</option>
-                ))}
-              </select>
-              <select
-                value={sdmFilter}
-                onChange={e => setSdmFilter(e.target.value as SDMGoal | 'all')}
-                className="text-sm border rounded px-2 py-1"
-              >
-                <option value="all">Alle SDM-Ziele</option>
-                {Object.entries(SDM_GOAL_LABELS).map(([key, label]) => (
-                  <option key={key} value={key}>{label}</option>
-                ))}
-              </select>
-            </div>
-
-            {/* Catalog List */}
-            <div className="max-h-[40vh] overflow-y-auto space-y-2">
-              {filteredCatalog.map(risk => (
-                <button
-                  key={risk.id}
-                  onClick={() => selectCatalogRisk(risk)}
-                  className="w-full text-left p-3 rounded-lg border hover:border-purple-300 hover:bg-purple-50 transition-colors"
-                >
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-xs font-mono text-gray-400">{risk.id}</span>
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
-                      {RISK_CATEGORY_LABELS[risk.category]}
-                    </span>
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
-                      {SDM_GOAL_LABELS[risk.sdmGoal]}
-                    </span>
-                  </div>
-                  <div className="text-sm font-medium text-gray-900">{risk.title}</div>
-                  <div className="text-xs text-gray-500 mt-1 line-clamp-2">{risk.description}</div>
-                </button>
-              ))}
-            </div>
-            {filteredCatalog.length === 0 && (
-              <p className="text-sm text-gray-500 text-center py-4">Keine Risiken fuer die gewaehlten Filter.</p>
-            )}
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Kategorie</label>
-              <select
-                value={category}
-                onChange={(e) => setCategory(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-              >
-                <option value="confidentiality">Vertraulichkeit</option>
-                <option value="integrity">Integritaet</option>
-                <option value="availability">Verfuegbarkeit</option>
-                <option value="rights_freedoms">Rechte & Freiheiten</option>
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
-              <textarea
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-                rows={4}
-                placeholder="Beschreiben Sie das Risiko..."
-              />
-            </div>
-          </div>
-        )}
-
-        <div className="flex gap-3 mt-6">
-          <button
-            onClick={onClose}
-            className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
-          >
-            Abbrechen
-          </button>
-          <button
-            onClick={() => onAdd({ category, description })}
-            disabled={!description.trim() || mode === 'catalog'}
-            className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
-          >
-            Hinzufuegen
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function AddMitigationModal({
-  risks,
-  onClose,
-  onAdd,
-}: {
-  risks: DSFARisk[]
-  onClose: () => void
-  onAdd: (data: { risk_id: string; description: string; type: string; responsible_party: string }) => void
-}) {
-  const [mode, setMode] = useState<'library' | 'manual'>('library')
-  const [riskId, setRiskId] = useState(risks[0]?.id || '')
-  const [type, setType] = useState('technical')
-  const [description, setDescription] = useState('')
-  const [responsibleParty, setResponsibleParty] = useState('')
-  const [typeFilter, setTypeFilter] = useState<'all' | 'technical' | 'organizational' | 'legal'>('all')
-  const [sdmFilter, setSdmFilter] = useState<SDMGoal | 'all'>('all')
-
-  const filteredLibrary = MITIGATION_LIBRARY.filter(m => {
-    if (typeFilter !== 'all' && m.type !== typeFilter) return false
-    if (sdmFilter !== 'all' && !m.sdmGoals.includes(sdmFilter)) return false
-    return true
-  })
-
-  function selectCatalogMitigation(m: CatalogMitigation) {
-    setType(m.type)
-    setDescription(`${m.title}\n\n${m.description}\n\nRechtsgrundlage: ${m.legalBasis}`)
-    setMode('manual')
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[85vh] overflow-y-auto">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">Massnahme hinzufuegen</h3>
-
-        {/* Tab Toggle */}
-        <div className="flex border-b mb-4">
-          <button
-            onClick={() => setMode('library')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
-              mode === 'library' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Aus Bibliothek waehlen ({MITIGATION_LIBRARY.length})
-          </button>
-          <button
-            onClick={() => setMode('manual')}
-            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${
-              mode === 'manual' ? 'border-purple-500 text-purple-600' : 'border-transparent text-gray-500 hover:text-gray-700'
-            }`}
-          >
-            Manuell eingeben
-          </button>
-        </div>
-
-        {mode === 'library' ? (
-          <div className="space-y-3">
-            {/* Filters */}
-            <div className="flex gap-2">
-              <select
-                value={typeFilter}
-                onChange={e => setTypeFilter(e.target.value as typeof typeFilter)}
-                className="text-sm border rounded px-2 py-1"
-              >
-                <option value="all">Alle Typen</option>
-                {Object.entries(MITIGATION_TYPE_LABELS).map(([key, label]) => (
-                  <option key={key} value={key}>{label}</option>
-                ))}
-              </select>
-              <select
-                value={sdmFilter}
-                onChange={e => setSdmFilter(e.target.value as SDMGoal | 'all')}
-                className="text-sm border rounded px-2 py-1"
-              >
-                <option value="all">Alle SDM-Ziele</option>
-                {Object.entries(SDM_GOAL_LABELS).map(([key, label]) => (
-                  <option key={key} value={key}>{label}</option>
-                ))}
-              </select>
-            </div>
-
-            {/* Library List */}
-            <div className="max-h-[40vh] overflow-y-auto space-y-2">
-              {filteredLibrary.map(m => (
-                <button
-                  key={m.id}
-                  onClick={() => selectCatalogMitigation(m)}
-                  className="w-full text-left p-3 rounded-lg border hover:border-purple-300 hover:bg-purple-50 transition-colors"
-                >
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-xs font-mono text-gray-400">{m.id}</span>
-                    <span className={`text-xs px-2 py-0.5 rounded-full ${
-                      m.type === 'technical' ? 'bg-blue-50 text-blue-600' :
-                      m.type === 'organizational' ? 'bg-green-50 text-green-600' :
-                      'bg-purple-50 text-purple-600'
-                    }`}>
-                      {MITIGATION_TYPE_LABELS[m.type]}
-                    </span>
-                    {m.sdmGoals.map(g => (
-                      <span key={g} className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
-                        {SDM_GOAL_LABELS[g]}
-                      </span>
-                    ))}
-                    <span className={`text-xs px-2 py-0.5 rounded-full ${
-                      m.effectiveness === 'high' ? 'bg-green-50 text-green-700' :
-                      m.effectiveness === 'medium' ? 'bg-yellow-50 text-yellow-700' :
-                      'bg-gray-50 text-gray-500'
-                    }`}>
-                      {EFFECTIVENESS_LABELS[m.effectiveness]}
-                    </span>
-                  </div>
-                  <div className="text-sm font-medium text-gray-900">{m.title}</div>
-                  <div className="text-xs text-gray-500 mt-1 line-clamp-2">{m.description}</div>
-                </button>
-              ))}
-            </div>
-            {filteredLibrary.length === 0 && (
-              <p className="text-sm text-gray-500 text-center py-4">Keine Massnahmen fuer die gewaehlten Filter.</p>
-            )}
-          </div>
-        ) : (
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Zugehoeriges Risiko</label>
-              <select
-                value={riskId}
-                onChange={(e) => setRiskId(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-              >
-                {risks.map(risk => (
-                  <option key={risk.id} value={risk.id}>
-                    {risk.description.substring(0, 50)}...
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Typ</label>
-              <select
-                value={type}
-                onChange={(e) => setType(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-              >
-                <option value="technical">Technisch</option>
-                <option value="organizational">Organisatorisch</option>
-                <option value="legal">Rechtlich</option>
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
-              <textarea
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-                rows={3}
-                placeholder="Beschreiben Sie die Massnahme..."
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">Verantwortlich</label>
-              <input
-                type="text"
-                value={responsibleParty}
-                onChange={(e) => setResponsibleParty(e.target.value)}
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
-                placeholder="Name oder Rolle..."
-              />
-            </div>
-          </div>
-        )}
-
-        <div className="flex gap-3 mt-6">
-          <button
-            onClick={onClose}
-            className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
-          >
-            Abbrechen
-          </button>
-          <button
-            onClick={() => onAdd({ risk_id: riskId, description, type, responsible_party: responsibleParty })}
-            disabled={!description.trim() || mode === 'library'}
-            className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
-          >
-            Hinzufuegen
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
+import {
+  Section1Editor,
+  Section2Editor,
+  Section3Editor,
+  Section4Editor,
+  Section5Editor,
+  SDMCoverageOverview,
+} from './_components'
 
 // =============================================================================
 // MAIN PAGE
@@ -1533,7 +43,7 @@ export default function DSFAEditorPage() {
   const [dsfa, setDSFA] = useState<DSFA | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [isSaving, setIsSaving] = useState(false)
-  const [activeSection, setActiveSection] = useState(0) // Start at Section 0: Threshold Analysis
+  const [activeSection, setActiveSection] = useState(0)
   const [saveMessage, setSaveMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
 
   // Load DSFA data
@@ -1571,20 +81,24 @@ export default function DSFAEditorPage() {
     }
   }, [dsfa, dsfaId])
 
-  const handleSubmitForReview = async () => {
-    // Implementation would call submitDSFAForReview
-    alert('Zur Pruefung einreichen - Coming soon')
-  }
+  const handleGenericUpdate = useCallback(async (data: Record<string, unknown>) => {
+    if (!dsfa) return
 
-  const handleApprove = async (opinion: string) => {
-    // Implementation would call approveDSFA
-    alert('Genehmigen - Coming soon')
-  }
+    setIsSaving(true)
+    setSaveMessage(null)
 
-  const handleReject = async (reason: string) => {
-    // Implementation would call approveDSFA with approved: false
-    alert('Ablehnen - Coming soon')
-  }
+    try {
+      const updated = await updateDSFA(dsfaId, data as Partial<DSFA>)
+      setDSFA(updated)
+      setSaveMessage({ type: 'success', text: 'Abschnitt gespeichert' })
+      setTimeout(() => setSaveMessage(null), 3000)
+    } catch (error) {
+      console.error('Failed to update DSFA:', error)
+      setSaveMessage({ type: 'error', text: 'Fehler beim Speichern' })
+    } finally {
+      setIsSaving(false)
+    }
+  }, [dsfa, dsfaId])
 
   if (isLoading) {
     return (
@@ -1631,26 +145,6 @@ export default function DSFAEditorPage() {
     needs_update: 'bg-orange-100 text-orange-700',
   }
 
-  // Handler for generic DSFA updates (used by new section components)
-  const handleGenericUpdate = useCallback(async (data: Record<string, unknown>) => {
-    if (!dsfa) return
-
-    setIsSaving(true)
-    setSaveMessage(null)
-
-    try {
-      const updated = await updateDSFA(dsfaId, data as Partial<DSFA>)
-      setDSFA(updated)
-      setSaveMessage({ type: 'success', text: 'Abschnitt gespeichert' })
-      setTimeout(() => setSaveMessage(null), 3000)
-    } catch (error) {
-      console.error('Failed to update DSFA:', error)
-      setSaveMessage({ type: 'error', text: 'Fehler beim Speichern' })
-    } finally {
-      setIsSaving(false)
-    }
-  }, [dsfa, dsfaId])
-
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -1736,43 +230,20 @@ export default function DSFAEditorPage() {
 
             {/* Section Content */}
             <div className="p-6">
-              {/* Section 0: Threshold Analysis (NEW) */}
               {activeSection === 0 && (
-                <ThresholdAnalysisSection
-                  dsfa={dsfa}
-                  onUpdate={handleGenericUpdate}
-                  isSubmitting={isSaving}
-                />
+                <ThresholdAnalysisSection dsfa={dsfa} onUpdate={handleGenericUpdate} isSubmitting={isSaving} />
               )}
-
-              {/* Sections 1-4: Existing */}
               {activeSection === 1 && (
-                <Section1Editor
-                  dsfa={dsfa}
-                  onUpdate={(data) => handleSectionUpdate(1, data)}
-                  isSubmitting={isSaving}
-                />
+                <Section1Editor dsfa={dsfa} onUpdate={(data) => handleSectionUpdate(1, data)} isSubmitting={isSaving} />
               )}
               {activeSection === 2 && (
-                <Section2Editor
-                  dsfa={dsfa}
-                  onUpdate={(data) => handleSectionUpdate(2, data)}
-                  isSubmitting={isSaving}
-                />
+                <Section2Editor dsfa={dsfa} onUpdate={(data) => handleSectionUpdate(2, data)} isSubmitting={isSaving} />
               )}
               {activeSection === 3 && (
-                <Section3Editor
-                  dsfa={dsfa}
-                  onUpdate={(data) => handleSectionUpdate(3, data)}
-                  isSubmitting={isSaving}
-                />
+                <Section3Editor dsfa={dsfa} onUpdate={(data) => handleSectionUpdate(3, data)} isSubmitting={isSaving} />
               )}
               {activeSection === 4 && (
-                <Section4Editor
-                  dsfa={dsfa}
-                  onUpdate={(data) => handleSectionUpdate(4, data)}
-                  isSubmitting={isSaving}
-                />
+                <Section4Editor dsfa={dsfa} onUpdate={(data) => handleSectionUpdate(4, data)} isSubmitting={isSaving} />
               )}
 
               {/* SDM Coverage Overview (shown in Section 3 and 4) */}
@@ -1780,114 +251,100 @@ export default function DSFAEditorPage() {
                 <SDMCoverageOverview dsfa={dsfa} />
               )}
 
-              {/* Section 5: Stakeholder Consultation (NEW) */}
               {activeSection === 5 && (
-                <StakeholderConsultationSection
-                  dsfa={dsfa}
-                  onUpdate={handleGenericUpdate}
-                  isSubmitting={isSaving}
-                />
+                <StakeholderConsultationSection dsfa={dsfa} onUpdate={handleGenericUpdate} isSubmitting={isSaving} />
               )}
-
-              {/* Section 6: DPO & Authority Consultation */}
               {activeSection === 6 && (
                 <div className="space-y-6">
-                  {/* Original Section 5 Editor (DPO Opinion) */}
-                  <Section5Editor
-                    dsfa={dsfa}
-                    onUpdate={(data) => handleSectionUpdate(5, data)}
-                    isSubmitting={isSaving}
-                  />
-
-                  {/* Art. 36 Warning (NEW) */}
+                  <Section5Editor dsfa={dsfa} onUpdate={(data) => handleSectionUpdate(5, data)} isSubmitting={isSaving} />
                   <div className="border-t border-gray-200 pt-6">
-                    <h3 className="text-lg font-semibold text-gray-900 mb-4">
-                      Art. 36 Behoerdenkonsultation
-                    </h3>
-                    <Art36Warning
-                      dsfa={dsfa}
-                      onUpdate={handleGenericUpdate}
-                      isSubmitting={isSaving}
-                    />
+                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Art. 36 Behoerdenkonsultation</h3>
+                    <Art36Warning dsfa={dsfa} onUpdate={handleGenericUpdate} isSubmitting={isSaving} />
                   </div>
                 </div>
               )}
-
-              {/* Section 7: Review & Maintenance (NEW) */}
               {activeSection === 7 && (
-                <ReviewScheduleSection
-                  dsfa={dsfa}
-                  onUpdate={handleGenericUpdate}
-                  isSubmitting={isSaving}
-                />
+                <ReviewScheduleSection dsfa={dsfa} onUpdate={handleGenericUpdate} isSubmitting={isSaving} />
               )}
-
-              {/* Section 8: KI-Anwendungsfälle (NEW) */}
               {activeSection === 8 && (
-                <AIUseCaseSection
-                  dsfa={dsfa}
-                  onUpdate={handleGenericUpdate}
-                  isSubmitting={isSaving}
-                />
+                <AIUseCaseSection dsfa={dsfa} onUpdate={handleGenericUpdate} isSubmitting={isSaving} />
               )}
             </div>
           </div>
 
           {/* Bottom Actions Row */}
-          <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
-            {/* Navigation */}
-            <div className="flex items-center gap-2">
-              {activeSection > 0 && (
-                <button
-                  onClick={() => setActiveSection(activeSection - 1)}
-                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg 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="M15 19l-7-7 7-7" />
-                  </svg>
-                  Zurueck
-                </button>
-              )}
-              {activeSection < 8 && (
-                <button
-                  onClick={() => setActiveSection(activeSection + 1)}
-                  className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-                >
-                  Weiter
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                  </svg>
-                </button>
-              )}
-            </div>
-
-            {/* Quick Info */}
-            <div className="flex items-center gap-4 text-sm text-gray-500">
-              <span>Risiken: {(dsfa.risks || []).length}</span>
-              <span>Massnahmen: {(dsfa.mitigations || []).length}</span>
-              <span>KI-Module: {(dsfa.ai_use_case_modules || []).length}</span>
-              <span>Version: {dsfa.version || 1}</span>
-            </div>
-
-            {/* Export */}
-            <div className="flex items-center gap-2">
-              <button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
-                <svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
-                  <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
-                  <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
-                </svg>
-                PDF
-              </button>
-              <button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
-                <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                </svg>
-                JSON
-              </button>
-            </div>
-          </div>
+          <BottomActions
+            activeSection={activeSection}
+            setActiveSection={setActiveSection}
+            dsfa={dsfa}
+          />
         </div>
       </div>
     </div>
   )
 }
+
+function BottomActions({
+  activeSection,
+  setActiveSection,
+  dsfa,
+}: {
+  activeSection: number
+  setActiveSection: (n: number) => void
+  dsfa: DSFA
+}) {
+  return (
+    <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
+      {/* Navigation */}
+      <div className="flex items-center gap-2">
+        {activeSection > 0 && (
+          <button
+            onClick={() => setActiveSection(activeSection - 1)}
+            className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg 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="M15 19l-7-7 7-7" />
+            </svg>
+            Zurueck
+          </button>
+        )}
+        {activeSection < 8 && (
+          <button
+            onClick={() => setActiveSection(activeSection + 1)}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+          >
+            Weiter
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Quick Info */}
+      <div className="flex items-center gap-4 text-sm text-gray-500">
+        <span>Risiken: {(dsfa.risks || []).length}</span>
+        <span>Massnahmen: {(dsfa.mitigations || []).length}</span>
+        <span>KI-Module: {(dsfa.ai_use_case_modules || []).length}</span>
+        <span>Version: {dsfa.version || 1}</span>
+      </div>
+
+      {/* Export */}
+      <div className="flex items-center gap-2">
+        <button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
+          <svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
+            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
+          </svg>
+          PDF
+        </button>
+        <button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
+          <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+          JSON
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/notfallplan/_components/ApiSections.tsx b/admin-compliance/app/sdk/notfallplan/_components/ApiSections.tsx
new file mode 100644
index 0000000..944dd0b
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/ApiSections.tsx
@@ -0,0 +1,137 @@
+'use client'
+
+import React from 'react'
+import type { ApiContact, ApiScenario, ApiExercise } from './types'
+
+export function ApiContactsSection({ apiContacts, apiLoading, onAdd, onDelete }: {
+  apiContacts: ApiContact[]; apiLoading: boolean; onAdd: () => void; onDelete: (id: string) => void
+}) {
+  return (
+    <div className="bg-white rounded-lg border p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="text-base font-semibold">Notfallkontakte (Datenbank)</h3>
+          <p className="text-sm text-gray-500">Zentral gespeicherte Kontakte fuer den Notfall</p>
+        </div>
+        <button onClick={onAdd} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
+          + Kontakt hinzufuegen
+        </button>
+      </div>
+      {apiLoading ? (
+        <div className="text-sm text-gray-500 py-4 text-center">Lade Kontakte...</div>
+      ) : apiContacts.length === 0 ? (
+        <div className="text-sm text-gray-400 py-4 text-center">Noch keine Kontakte hinterlegt</div>
+      ) : (
+        <div className="space-y-2">
+          {apiContacts.map(contact => (
+            <div key={contact.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <div className="flex items-center gap-3">
+                {contact.is_primary && <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-medium">Primaer</span>}
+                {contact.available_24h && <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">24/7</span>}
+                <div>
+                  <span className="font-medium text-sm">{contact.name}</span>
+                  {contact.role && <span className="text-gray-500 text-sm ml-2">({contact.role})</span>}
+                  <div className="text-xs text-gray-400">{contact.email} {contact.phone && `| ${contact.phone}`}</div>
+                </div>
+              </div>
+              <button onClick={() => onDelete(contact.id)} className="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50">
+                Loeschen
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ApiScenariosSection({ apiScenarios, apiLoading, onAdd, onDelete }: {
+  apiScenarios: ApiScenario[]; apiLoading: boolean; onAdd: () => void; onDelete: (id: string) => void
+}) {
+  return (
+    <div className="bg-white rounded-lg border p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h3 className="text-base font-semibold">Notfallszenarien (Datenbank)</h3>
+          <p className="text-sm text-gray-500">Definierte Szenarien und Reaktionsplaene</p>
+        </div>
+        <button onClick={onAdd} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700">
+          + Szenario hinzufuegen
+        </button>
+      </div>
+      {apiLoading ? (
+        <div className="text-sm text-gray-500 py-4 text-center">Lade Szenarien...</div>
+      ) : apiScenarios.length === 0 ? (
+        <div className="text-sm text-gray-400 py-4 text-center">Noch keine Szenarien definiert</div>
+      ) : (
+        <div className="space-y-2">
+          {apiScenarios.map(scenario => (
+            <div key={scenario.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <div>
+                <span className="font-medium text-sm">{scenario.title}</span>
+                <div className="flex items-center gap-2 mt-1">
+                  {scenario.category && <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">{scenario.category}</span>}
+                  <span className={`text-xs px-2 py-0.5 rounded ${
+                    scenario.severity === 'critical' ? 'bg-red-100 text-red-700' :
+                    scenario.severity === 'high' ? 'bg-orange-100 text-orange-700' :
+                    scenario.severity === 'medium' ? 'bg-yellow-100 text-yellow-700' :
+                    'bg-green-100 text-green-700'
+                  }`}>{scenario.severity}</span>
+                </div>
+                {scenario.description && <p className="text-xs text-gray-500 mt-1 truncate max-w-lg">{scenario.description}</p>}
+              </div>
+              <button onClick={() => onDelete(scenario.id)} className="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50">
+                Loeschen
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function ApiExercisesSection({ apiExercises, apiLoading, onAdd, onDelete }: {
+  apiExercises: ApiExercise[]; apiLoading: boolean; onAdd: () => void; onDelete: (id: string) => void
+}) {
+  return (
+    <div className="bg-white rounded-lg border p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-base font-semibold">Uebungen (Datenbank)</h3>
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-gray-500">{apiExercises.length} Eintraege</span>
+          <button onClick={onAdd} className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors">
+            + Neue Uebung
+          </button>
+        </div>
+      </div>
+      {apiExercises.length === 0 ? (
+        <div className="text-sm text-gray-400 py-2 text-center">Noch keine Uebungen in der Datenbank</div>
+      ) : (
+        <div className="space-y-2">
+          {apiExercises.map(ex => (
+            <div key={ex.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+              <div>
+                <span className="font-medium text-sm">{ex.title}</span>
+                <div className="flex items-center gap-2 mt-1">
+                  <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">{ex.exercise_type}</span>
+                  {ex.exercise_date && <span className="text-xs text-gray-400">{new Date(ex.exercise_date).toLocaleDateString('de-DE')}</span>}
+                  {ex.outcome && <span className={`text-xs px-2 py-0.5 rounded ${ex.outcome === 'passed' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{ex.outcome}</span>}
+                </div>
+              </div>
+              <button
+                onClick={() => { if (window.confirm(`Uebung "${ex.title}" loeschen?`)) onDelete(ex.id) }}
+                className="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                title="Loeschen"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/notfallplan/_components/ConfigTab.tsx b/admin-compliance/app/sdk/notfallplan/_components/ConfigTab.tsx
new file mode 100644
index 0000000..0c54e22
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/ConfigTab.tsx
@@ -0,0 +1,203 @@
+'use client'
+
+import React from 'react'
+import type { NotfallplanConfig } from './types'
+
+export function ConfigTab({
+  config,
+  setConfig,
+}: {
+  config: NotfallplanConfig
+  setConfig: React.Dispatch<React.SetStateAction<NotfallplanConfig>>
+}) {
+  return (
+    <div className="space-y-8">
+      {/* Meldewege */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Meldewege (intern → Aufsichtsbehoerde)</h3>
+        <p className="text-sm text-gray-500 mb-4">
+          Definieren Sie die interne Eskalationskette bei einer Datenpanne.
+        </p>
+        <div className="space-y-3">
+          {config.meldewege.map((step, idx) => (
+            <div key={step.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center text-sm font-bold">
+                {step.order}
+              </span>
+              <div className="flex-1 grid grid-cols-3 gap-2">
+                <input
+                  type="text"
+                  value={step.role}
+                  onChange={e => {
+                    const updated = [...config.meldewege]
+                    updated[idx] = { ...updated[idx], role: e.target.value }
+                    setConfig(prev => ({ ...prev, meldewege: updated }))
+                  }}
+                  placeholder="Rolle"
+                  className="text-sm border rounded px-2 py-1"
+                />
+                <input
+                  type="text"
+                  value={step.name}
+                  onChange={e => {
+                    const updated = [...config.meldewege]
+                    updated[idx] = { ...updated[idx], name: e.target.value }
+                    setConfig(prev => ({ ...prev, meldewege: updated }))
+                  }}
+                  placeholder="Name"
+                  className="text-sm border rounded px-2 py-1"
+                />
+                <input
+                  type="text"
+                  value={step.action}
+                  onChange={e => {
+                    const updated = [...config.meldewege]
+                    updated[idx] = { ...updated[idx], action: e.target.value }
+                    setConfig(prev => ({ ...prev, meldewege: updated }))
+                  }}
+                  placeholder="Aktion"
+                  className="text-sm border rounded px-2 py-1"
+                />
+              </div>
+              <div className="flex-shrink-0 text-xs text-gray-500">
+                max. {step.maxHours}h
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Zustaendigkeiten */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Zustaendigkeiten</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left py-2 pr-4">Rolle</th>
+                <th className="text-left py-2 pr-4">Name</th>
+                <th className="text-left py-2 pr-4">E-Mail</th>
+                <th className="text-left py-2">Telefon</th>
+              </tr>
+            </thead>
+            <tbody>
+              {config.zustaendigkeiten.map((z, idx) => (
+                <tr key={z.id} className="border-b last:border-0">
+                  <td className="py-2 pr-4 font-medium">{z.role}</td>
+                  <td className="py-2 pr-4">
+                    <input
+                      type="text"
+                      value={z.name}
+                      onChange={e => {
+                        const updated = [...config.zustaendigkeiten]
+                        updated[idx] = { ...updated[idx], name: e.target.value }
+                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
+                      }}
+                      placeholder="Name eingeben"
+                      className="w-full text-sm border rounded px-2 py-1"
+                    />
+                  </td>
+                  <td className="py-2 pr-4">
+                    <input
+                      type="email"
+                      value={z.email}
+                      onChange={e => {
+                        const updated = [...config.zustaendigkeiten]
+                        updated[idx] = { ...updated[idx], email: e.target.value }
+                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
+                      }}
+                      placeholder="email@example.com"
+                      className="w-full text-sm border rounded px-2 py-1"
+                    />
+                  </td>
+                  <td className="py-2">
+                    <input
+                      type="tel"
+                      value={z.phone}
+                      onChange={e => {
+                        const updated = [...config.zustaendigkeiten]
+                        updated[idx] = { ...updated[idx], phone: e.target.value }
+                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
+                      }}
+                      placeholder="+49..."
+                      className="w-full text-sm border rounded px-2 py-1"
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* Aufsichtsbehoerde */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Zustaendige Aufsichtsbehoerde</h3>
+        <div className="grid grid-cols-2 gap-4">
+          {(['name', 'state', 'email', 'phone'] as const).map(field => (
+            <div key={field}>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {field === 'name' ? 'Name' : field === 'state' ? 'Bundesland' : field === 'email' ? 'E-Mail' : 'Telefon'}
+              </label>
+              <input
+                type={field === 'email' ? 'email' : field === 'phone' ? 'tel' : 'text'}
+                value={config.aufsichtsbehoerde[field]}
+                onChange={e => setConfig(prev => ({
+                  ...prev,
+                  aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, [field]: e.target.value },
+                }))}
+                placeholder={field === 'name' ? 'z.B. LfD Niedersachsen' :
+                  field === 'state' ? 'z.B. Niedersachsen' :
+                  field === 'email' ? 'poststelle@lfd.niedersachsen.de' : '+49...'}
+                className="w-full text-sm border rounded px-3 py-2"
+              />
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Eskalationsstufen */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Eskalationsstufen</h3>
+        <div className="space-y-4">
+          {config.eskalationsstufen.map((stufe) => (
+            <div key={stufe.id} className="p-4 bg-gray-50 rounded-lg">
+              <div className="flex items-center gap-3 mb-2">
+                <span className={`px-2 py-1 rounded text-xs font-bold ${
+                  stufe.level === 1 ? 'bg-yellow-100 text-yellow-800' :
+                  stufe.level === 2 ? 'bg-orange-100 text-orange-800' :
+                  'bg-red-100 text-red-800'
+                }`}>
+                  Stufe {stufe.level}
+                </span>
+                <span className="font-medium">{stufe.label}</span>
+              </div>
+              <p className="text-sm text-gray-600 mb-2">Ausloeser: {stufe.triggerCondition}</p>
+              <ul className="list-disc list-inside text-sm text-gray-700">
+                {stufe.actions.map((action, i) => (
+                  <li key={i}>{action}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Sofortmassnahmen-Checkliste */}
+      <section className="bg-white rounded-lg border p-6">
+        <h3 className="text-lg font-semibold mb-4">Sofortmassnahmen-Checkliste</h3>
+        <p className="text-sm text-gray-500 mb-4">
+          Diese Massnahmen sind sofort bei Entdeckung einer Datenpanne durchzufuehren.
+        </p>
+        <ul className="space-y-2">
+          {config.sofortmassnahmen.map((m, idx) => (
+            <li key={idx} className="flex items-start gap-3 p-2">
+              <span className="flex-shrink-0 w-6 h-6 rounded border-2 border-gray-300 mt-0.5" />
+              <span className="text-sm">{m}</span>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/notfallplan/_components/ExercisesTab.tsx b/admin-compliance/app/sdk/notfallplan/_components/ExercisesTab.tsx
new file mode 100644
index 0000000..b0b6904
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/ExercisesTab.tsx
@@ -0,0 +1,207 @@
+'use client'
+
+import React, { useState } from 'react'
+import type { Exercise } from './types'
+
+const SCENARIO_PRESETS = [
+  { label: 'Ransomware-Angriff', scenario: 'Ein Ransomware-Angriff verschluesselt saemtliche Produktivdaten. Backups sind vorhanden, aber der letzte Restore-Test liegt 6 Monate zurueck.' },
+  { label: 'Datenabfluss durch Mitarbeiter', scenario: 'Ein ausscheidender Mitarbeiter hat vor seinem letzten Arbeitstag umfangreiche Kundendaten auf einen privaten USB-Stick kopiert.' },
+  { label: 'Cloud-Provider-Ausfall', scenario: 'Ihr primaerer Cloud-Provider meldet einen groesseren Ausfall. Die Wiederherstellungszeit ist unbekannt. Betroffene koennen keine DSGVO-Rechte ausueben.' },
+  { label: 'Phishing-Angriff', scenario: 'Mehrere Mitarbeiter haben auf einen Phishing-Link geklickt. Es besteht Verdacht, dass Anmeldedaten kompromittiert wurden und auf Personaldaten zugegriffen wurde.' },
+]
+
+export function ExercisesTab({
+  exercises,
+  setExercises,
+  showAdd,
+  setShowAdd,
+}: {
+  exercises: Exercise[]
+  setExercises: React.Dispatch<React.SetStateAction<Exercise[]>>
+  showAdd: boolean
+  setShowAdd: (v: boolean) => void
+}) {
+  const [newExercise, setNewExercise] = useState<Partial<Exercise>>({
+    title: '',
+    type: 'tabletop',
+    scenario: '',
+    scheduledDate: '',
+    participants: [],
+    lessonsLearned: '',
+  })
+
+  function addExercise() {
+    if (!newExercise.title || !newExercise.scheduledDate) return
+    const exercise: Exercise = {
+      id: `EX-${Date.now()}`,
+      title: newExercise.title || '',
+      type: (newExercise.type as Exercise['type']) || 'tabletop',
+      scenario: newExercise.scenario || '',
+      scheduledDate: newExercise.scheduledDate || '',
+      participants: newExercise.participants || [],
+      lessonsLearned: '',
+    }
+    setExercises(prev => [...prev, exercise])
+    setShowAdd(false)
+    setNewExercise({ title: '', type: 'tabletop', scenario: '', scheduledDate: '', participants: [], lessonsLearned: '' })
+  }
+
+  function completeExercise(id: string, lessonsLearned: string) {
+    setExercises(prev => prev.map(ex =>
+      ex.id === id
+        ? { ...ex, completedDate: new Date().toISOString(), lessonsLearned }
+        : ex
+    ))
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">Notfalluebungen & Tests</h3>
+          <p className="text-sm text-gray-500">Planen und dokumentieren Sie regelmaessige Notfalluebungen.</p>
+        </div>
+        <button
+          onClick={() => setShowAdd(true)}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
+        >
+          + Uebung planen
+        </button>
+      </div>
+
+      {/* Add Exercise Form */}
+      {showAdd && (
+        <div className="bg-white rounded-lg border p-6 space-y-4">
+          <h4 className="font-medium">Neue Uebung planen</h4>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
+              <input
+                type="text"
+                value={newExercise.title}
+                onChange={e => setNewExercise(prev => ({ ...prev, title: e.target.value }))}
+                placeholder="z.B. Tabletop: Ransomware-Angriff"
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
+              <select
+                value={newExercise.type}
+                onChange={e => setNewExercise(prev => ({ ...prev, type: e.target.value as Exercise['type'] }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              >
+                <option value="tabletop">Tabletop-Uebung</option>
+                <option value="simulation">Simulation</option>
+                <option value="full_drill">Vollstaendige Uebung</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Geplantes Datum</label>
+              <input
+                type="date"
+                value={newExercise.scheduledDate}
+                onChange={e => setNewExercise(prev => ({ ...prev, scheduledDate: e.target.value }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Szenario
+                <span className="text-gray-400 font-normal ml-2">oder Vorlage waehlen:</span>
+              </label>
+              <div className="flex flex-wrap gap-2 mb-2">
+                {SCENARIO_PRESETS.map(preset => (
+                  <button
+                    key={preset.label}
+                    onClick={() => setNewExercise(prev => ({
+                      ...prev,
+                      scenario: preset.scenario,
+                      title: prev.title || `Tabletop: ${preset.label}`,
+                    }))}
+                    className="text-xs px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200"
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+              </div>
+              <textarea
+                value={newExercise.scenario}
+                onChange={e => setNewExercise(prev => ({ ...prev, scenario: e.target.value }))}
+                placeholder="Beschreiben Sie das Uebungsszenario..."
+                rows={3}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+          </div>
+          <div className="flex gap-2 justify-end">
+            <button onClick={() => setShowAdd(false)} className="px-4 py-2 border rounded-lg text-sm">
+              Abbrechen
+            </button>
+            <button
+              onClick={addExercise}
+              disabled={!newExercise.title || !newExercise.scheduledDate}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+            >
+              Uebung planen
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Exercises List */}
+      {exercises.length === 0 ? (
+        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
+          <p className="text-lg mb-2">Keine Uebungen geplant</p>
+          <p className="text-sm">Regelmaessige Notfalluebungen sind essentiell fuer ein funktionierendes Datenpannen-Management.</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {exercises.map(exercise => (
+            <div key={exercise.id} className="bg-white rounded-lg border p-6">
+              <div className="flex items-center gap-2 mb-2">
+                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                  exercise.completedDate ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {exercise.completedDate ? 'Abgeschlossen' : 'Geplant'}
+                </span>
+                <span className="text-xs text-gray-500 capitalize">
+                  {exercise.type === 'tabletop' ? 'Tabletop' : exercise.type === 'simulation' ? 'Simulation' : 'Vollstaendige Uebung'}
+                </span>
+              </div>
+              <h4 className="font-medium mb-1">{exercise.title}</h4>
+              <p className="text-sm text-gray-600 mb-2">{exercise.scenario}</p>
+              <div className="flex items-center gap-4 text-xs text-gray-500">
+                <span>Geplant: {new Date(exercise.scheduledDate).toLocaleDateString('de-DE')}</span>
+                {exercise.completedDate && (
+                  <span>Durchgefuehrt: {new Date(exercise.completedDate).toLocaleDateString('de-DE')}</span>
+                )}
+              </div>
+              {exercise.lessonsLearned && (
+                <div className="mt-3 p-3 bg-blue-50 rounded text-sm">
+                  <span className="font-medium text-blue-800">Lessons Learned:</span>
+                  <p className="text-blue-700 mt-1">{exercise.lessonsLearned}</p>
+                </div>
+              )}
+              {!exercise.completedDate && (
+                <div className="mt-3">
+                  <button
+                    onClick={() => {
+                      const lessons = prompt('Lessons Learned aus der Uebung:')
+                      if (lessons !== null) {
+                        completeExercise(exercise.id, lessons)
+                      }
+                    }}
+                    className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200"
+                  >
+                    Als durchgefuehrt markieren
+                  </button>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/notfallplan/_components/IncidentsTab.tsx b/admin-compliance/app/sdk/notfallplan/_components/IncidentsTab.tsx
new file mode 100644
index 0000000..7ff31e6
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/IncidentsTab.tsx
@@ -0,0 +1,292 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import type { Incident, IncidentStatus, IncidentSeverity } from './types'
+import {
+  INCIDENT_STATUS_LABELS,
+  INCIDENT_STATUS_COLORS,
+  SEVERITY_LABELS,
+  SEVERITY_COLORS,
+} from './types'
+
+function CountdownTimer({ detectedAt }: { detectedAt: string }) {
+  const [remaining, setRemaining] = useState('')
+  const [overdue, setOverdue] = useState(false)
+
+  useEffect(() => {
+    function update() {
+      const detected = new Date(detectedAt).getTime()
+      const deadline = detected + 72 * 60 * 60 * 1000
+      const now = Date.now()
+      const diff = deadline - now
+
+      if (diff <= 0) {
+        const overdueMs = Math.abs(diff)
+        const hours = Math.floor(overdueMs / (1000 * 60 * 60))
+        const mins = Math.floor((overdueMs % (1000 * 60 * 60)) / (1000 * 60))
+        setRemaining(`${hours}h ${mins}min ueberfaellig`)
+        setOverdue(true)
+      } else {
+        const hours = Math.floor(diff / (1000 * 60 * 60))
+        const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+        setRemaining(`${hours}h ${mins}min verbleibend`)
+        setOverdue(false)
+      }
+    }
+    update()
+    const interval = setInterval(update, 60000)
+    return () => clearInterval(interval)
+  }, [detectedAt])
+
+  return (
+    <span className={`text-sm font-medium ${overdue ? 'text-red-600' : 'text-orange-600'}`}>
+      72h-Frist: {remaining}
+    </span>
+  )
+}
+
+export function IncidentsTab({
+  incidents,
+  setIncidents,
+  showAdd,
+  setShowAdd,
+  onAdd,
+  onStatusChange,
+  onDelete,
+}: {
+  incidents: Incident[]
+  setIncidents: React.Dispatch<React.SetStateAction<Incident[]>>
+  showAdd: boolean
+  setShowAdd: (v: boolean) => void
+  onAdd?: (incident: Partial<Incident>) => Promise<void>
+  onStatusChange?: (id: string, status: IncidentStatus) => Promise<void>
+  onDelete?: (id: string) => Promise<void>
+}) {
+  const [newIncident, setNewIncident] = useState<Partial<Incident>>({
+    title: '',
+    description: '',
+    severity: 'medium',
+    affectedDataCategories: [],
+    estimatedAffectedPersons: 0,
+    measures: [],
+    art34Required: false,
+    art34Justification: '',
+  })
+
+  async function addIncident() {
+    if (!newIncident.title) return
+    if (onAdd) {
+      await onAdd(newIncident)
+    } else {
+      const incident: Incident = {
+        id: `INC-${Date.now()}`,
+        title: newIncident.title || '',
+        description: newIncident.description || '',
+        detectedAt: new Date().toISOString(),
+        detectedBy: 'Admin',
+        status: 'detected',
+        severity: newIncident.severity as IncidentSeverity || 'medium',
+        affectedDataCategories: newIncident.affectedDataCategories || [],
+        estimatedAffectedPersons: newIncident.estimatedAffectedPersons || 0,
+        measures: newIncident.measures || [],
+        art34Required: newIncident.art34Required || false,
+        art34Justification: newIncident.art34Justification || '',
+      }
+      setIncidents(prev => [incident, ...prev])
+    }
+    setShowAdd(false)
+    setNewIncident({
+      title: '', description: '', severity: 'medium',
+      affectedDataCategories: [], estimatedAffectedPersons: 0,
+      measures: [], art34Required: false, art34Justification: '',
+    })
+  }
+
+  async function updateStatus(id: string, status: IncidentStatus) {
+    if (onStatusChange) {
+      await onStatusChange(id, status)
+    } else {
+      setIncidents(prev => prev.map(inc =>
+        inc.id === id
+          ? {
+              ...inc,
+              status,
+              ...(status === 'reported' ? { reportedToAuthorityAt: new Date().toISOString() } : {}),
+              ...(status === 'closed' ? { closedAt: new Date().toISOString(), closedBy: 'Admin' } : {}),
+            }
+          : inc
+      ))
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">Incident-Register (Art. 33 Abs. 5)</h3>
+          <p className="text-sm text-gray-500">Alle Datenpannen dokumentieren — auch nicht-meldepflichtige.</p>
+        </div>
+        <button
+          onClick={() => setShowAdd(true)}
+          className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700"
+        >
+          + Datenpanne melden
+        </button>
+      </div>
+
+      {/* Add Incident Form */}
+      {showAdd && (
+        <div className="bg-white rounded-lg border p-6 space-y-4">
+          <h4 className="font-medium">Neue Datenpanne erfassen</h4>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
+              <input
+                type="text"
+                value={newIncident.title}
+                onChange={e => setNewIncident(prev => ({ ...prev, title: e.target.value }))}
+                placeholder="Kurzbeschreibung der Datenpanne"
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+              <textarea
+                value={newIncident.description}
+                onChange={e => setNewIncident(prev => ({ ...prev, description: e.target.value }))}
+                placeholder="Detaillierte Beschreibung: Was ist passiert, wie wurde es entdeckt?"
+                rows={3}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
+              <select
+                value={newIncident.severity}
+                onChange={e => setNewIncident(prev => ({ ...prev, severity: e.target.value as IncidentSeverity }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              >
+                <option value="low">Niedrig</option>
+                <option value="medium">Mittel</option>
+                <option value="high">Hoch</option>
+                <option value="critical">Kritisch</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Geschaetzte Betroffene</label>
+              <input
+                type="number"
+                value={newIncident.estimatedAffectedPersons}
+                onChange={e => setNewIncident(prev => ({ ...prev, estimatedAffectedPersons: parseInt(e.target.value) || 0 }))}
+                className="w-full border rounded px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="col-span-2 flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={newIncident.art34Required}
+                onChange={e => setNewIncident(prev => ({ ...prev, art34Required: e.target.checked }))}
+                className="rounded"
+              />
+              <label className="text-sm">Hohes Risiko fuer Betroffene (Art. 34 Benachrichtigungspflicht)</label>
+            </div>
+          </div>
+          <div className="flex gap-2 justify-end">
+            <button onClick={() => setShowAdd(false)} className="px-4 py-2 border rounded-lg text-sm">
+              Abbrechen
+            </button>
+            <button
+              onClick={addIncident}
+              disabled={!newIncident.title}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50"
+            >
+              Datenpanne erfassen
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Incidents List */}
+      {incidents.length === 0 ? (
+        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
+          <p className="text-lg mb-2">Keine Datenpannen erfasst</p>
+          <p className="text-sm">Dokumentieren Sie hier alle Datenpannen — auch solche, die nicht meldepflichtig sind (Art. 33 Abs. 5).</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {incidents.map(incident => (
+            <div key={incident.id} className="bg-white rounded-lg border p-6">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs text-gray-500 font-mono">{incident.id}</span>
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${INCIDENT_STATUS_COLORS[incident.status]}`}>
+                      {INCIDENT_STATUS_LABELS[incident.status]}
+                    </span>
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${SEVERITY_COLORS[incident.severity]}`}>
+                      {SEVERITY_LABELS[incident.severity]}
+                    </span>
+                    {incident.art34Required && (
+                      <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+                        Art. 34
+                      </span>
+                    )}
+                  </div>
+                  <h4 className="font-medium">{incident.title}</h4>
+                </div>
+                {incident.status !== 'closed' && incident.status !== 'reported' && incident.status !== 'not_reportable' && (
+                  <CountdownTimer detectedAt={incident.detectedAt} />
+                )}
+              </div>
+              <p className="text-sm text-gray-600 mb-3">{incident.description}</p>
+              <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
+                <span>Entdeckt: {new Date(incident.detectedAt).toLocaleString('de-DE')}</span>
+                <span>Betroffene: ~{incident.estimatedAffectedPersons}</span>
+                {incident.reportedToAuthorityAt && (
+                  <span>Gemeldet: {new Date(incident.reportedToAuthorityAt).toLocaleString('de-DE')}</span>
+                )}
+              </div>
+              {incident.status !== 'closed' && (
+                <div className="flex gap-2">
+                  {incident.status === 'detected' && (
+                    <button onClick={() => updateStatus(incident.id, 'classified')} className="text-xs px-3 py-1 bg-yellow-100 text-yellow-800 rounded hover:bg-yellow-200">
+                      Klassifizieren
+                    </button>
+                  )}
+                  {incident.status === 'classified' && (
+                    <button onClick={() => updateStatus(incident.id, 'assessed')} className="text-xs px-3 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200">
+                      Bewerten
+                    </button>
+                  )}
+                  {incident.status === 'assessed' && (
+                    <>
+                      <button onClick={() => updateStatus(incident.id, 'reported')} className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200">
+                        Als gemeldet markieren
+                      </button>
+                      <button onClick={() => updateStatus(incident.id, 'not_reportable')} className="text-xs px-3 py-1 bg-gray-100 text-gray-800 rounded hover:bg-gray-200">
+                        Nicht meldepflichtig
+                      </button>
+                    </>
+                  )}
+                  {(incident.status === 'reported' || incident.status === 'not_reportable') && (
+                    <button onClick={() => updateStatus(incident.id, 'closed')} className="text-xs px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
+                      Abschliessen
+                    </button>
+                  )}
+                  {onDelete && (
+                    <button
+                      onClick={() => { if (window.confirm('Incident loeschen?')) onDelete(incident.id) }}
+                      className="text-xs px-2 py-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded ml-auto"
+                    >
+                      Loeschen
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/notfallplan/_components/Modals.tsx b/admin-compliance/app/sdk/notfallplan/_components/Modals.tsx
new file mode 100644
index 0000000..f85e1f1
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/Modals.tsx
@@ -0,0 +1,296 @@
+'use client'
+
+import React from 'react'
+
+interface ModalShellProps {
+  title: string
+  onClose: () => void
+  children: React.ReactNode
+  footer: React.ReactNode
+}
+
+function ModalShell({ title, onClose, children, footer }: ModalShellProps) {
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
+        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 className="font-semibold text-gray-900">{title}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <svg className="w-5 h-5" 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 className="p-6 space-y-4">{children}</div>
+        <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">{footer}</div>
+      </div>
+    </div>
+  )
+}
+
+// ---- Contact Modal ----
+
+export function ContactModal({
+  newContact,
+  setNewContact,
+  onClose,
+  onCreate,
+  saving,
+}: {
+  newContact: { name: string; role: string; email: string; phone: string; is_primary: boolean; available_24h: boolean }
+  setNewContact: React.Dispatch<React.SetStateAction<typeof newContact>>
+  onClose: () => void
+  onCreate: () => void
+  saving: boolean
+}) {
+  return (
+    <ModalShell
+      title="Notfallkontakt hinzufuegen"
+      onClose={onClose}
+      footer={
+        <>
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
+            Abbrechen
+          </button>
+          <button
+            onClick={onCreate}
+            disabled={!newContact.name || saving}
+            className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Hinzufuegen'}
+          </button>
+        </>
+      }
+    >
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+        <input
+          type="text"
+          value={newContact.name}
+          onChange={e => setNewContact(p => ({ ...p, name: e.target.value }))}
+          placeholder="Vollstaendiger Name"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Rolle</label>
+        <input
+          type="text"
+          value={newContact.role}
+          onChange={e => setNewContact(p => ({ ...p, role: e.target.value }))}
+          placeholder="z.B. Datenschutzbeauftragter"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">E-Mail</label>
+          <input
+            type="email"
+            value={newContact.email}
+            onChange={e => setNewContact(p => ({ ...p, email: e.target.value }))}
+            placeholder="email@example.com"
+            className="w-full border rounded px-3 py-2 text-sm"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Telefon</label>
+          <input
+            type="tel"
+            value={newContact.phone}
+            onChange={e => setNewContact(p => ({ ...p, phone: e.target.value }))}
+            placeholder="+49..."
+            className="w-full border rounded px-3 py-2 text-sm"
+          />
+        </div>
+      </div>
+      <div className="flex items-center gap-6">
+        <label className="flex items-center gap-2 text-sm cursor-pointer">
+          <input
+            type="checkbox"
+            checked={newContact.is_primary}
+            onChange={e => setNewContact(p => ({ ...p, is_primary: e.target.checked }))}
+            className="rounded"
+          />
+          Primaerkontakt
+        </label>
+        <label className="flex items-center gap-2 text-sm cursor-pointer">
+          <input
+            type="checkbox"
+            checked={newContact.available_24h}
+            onChange={e => setNewContact(p => ({ ...p, available_24h: e.target.checked }))}
+            className="rounded"
+          />
+          24/7 erreichbar
+        </label>
+      </div>
+    </ModalShell>
+  )
+}
+
+// ---- Exercise Modal ----
+
+export function ExerciseModal({
+  newExercise,
+  setNewExercise,
+  onClose,
+  onCreate,
+  saving,
+}: {
+  newExercise: { title: string; exercise_type: string; exercise_date: string; notes: string }
+  setNewExercise: React.Dispatch<React.SetStateAction<typeof newExercise>>
+  onClose: () => void
+  onCreate: () => void
+  saving: boolean
+}) {
+  return (
+    <ModalShell
+      title="Neue Uebung planen"
+      onClose={onClose}
+      footer={
+        <>
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
+            Abbrechen
+          </button>
+          <button
+            onClick={onCreate}
+            disabled={!newExercise.title || saving}
+            className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Uebung erstellen'}
+          </button>
+        </>
+      }
+    >
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+        <input
+          type="text"
+          value={newExercise.title}
+          onChange={e => setNewExercise(p => ({ ...p, title: e.target.value }))}
+          placeholder="z.B. Tabletop-Uebung Ransomware"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Uebungstyp</label>
+          <select
+            value={newExercise.exercise_type}
+            onChange={e => setNewExercise(p => ({ ...p, exercise_type: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          >
+            <option value="tabletop">Tabletop</option>
+            <option value="simulation">Simulation</option>
+            <option value="walkthrough">Walkthrough</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Datum</label>
+          <input
+            type="date"
+            value={newExercise.exercise_date}
+            onChange={e => setNewExercise(p => ({ ...p, exercise_date: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          />
+        </div>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
+        <textarea
+          value={newExercise.notes}
+          onChange={e => setNewExercise(p => ({ ...p, notes: e.target.value }))}
+          placeholder="Ziele, Teilnehmer, Ablauf..."
+          rows={3}
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+    </ModalShell>
+  )
+}
+
+// ---- Scenario Modal ----
+
+export function ScenarioModal({
+  newScenario,
+  setNewScenario,
+  onClose,
+  onCreate,
+  saving,
+}: {
+  newScenario: { title: string; category: string; severity: string; description: string }
+  setNewScenario: React.Dispatch<React.SetStateAction<typeof newScenario>>
+  onClose: () => void
+  onCreate: () => void
+  saving: boolean
+}) {
+  return (
+    <ModalShell
+      title="Notfallszenario hinzufuegen"
+      onClose={onClose}
+      footer={
+        <>
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
+            Abbrechen
+          </button>
+          <button
+            onClick={onCreate}
+            disabled={!newScenario.title || saving}
+            className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Hinzufuegen'}
+          </button>
+        </>
+      }
+    >
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+        <input
+          type="text"
+          value={newScenario.title}
+          onChange={e => setNewScenario(p => ({ ...p, title: e.target.value }))}
+          placeholder="z.B. Ransomware-Angriff auf Produktivsysteme"
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+          <select
+            value={newScenario.category}
+            onChange={e => setNewScenario(p => ({ ...p, category: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          >
+            <option value="data_breach">Datenpanne</option>
+            <option value="system_failure">Systemausfall</option>
+            <option value="physical">Physischer Vorfall</option>
+            <option value="other">Sonstiges</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
+          <select
+            value={newScenario.severity}
+            onChange={e => setNewScenario(p => ({ ...p, severity: e.target.value }))}
+            className="w-full border rounded px-3 py-2 text-sm"
+          >
+            <option value="low">Niedrig</option>
+            <option value="medium">Mittel</option>
+            <option value="high">Hoch</option>
+            <option value="critical">Kritisch</option>
+          </select>
+        </div>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+        <textarea
+          value={newScenario.description}
+          onChange={e => setNewScenario(p => ({ ...p, description: e.target.value }))}
+          placeholder="Kurzbeschreibung des Szenarios und moeglicher Auswirkungen..."
+          rows={3}
+          className="w-full border rounded px-3 py-2 text-sm"
+        />
+      </div>
+    </ModalShell>
+  )
+}
diff --git a/admin-compliance/app/sdk/notfallplan/_components/TemplatesTab.tsx b/admin-compliance/app/sdk/notfallplan/_components/TemplatesTab.tsx
new file mode 100644
index 0000000..4405209
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/TemplatesTab.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import React, { useState } from 'react'
+import type { MeldeTemplate } from './types'
+
+export function TemplatesTab({
+  templates,
+  setTemplates,
+  onSave,
+}: {
+  templates: MeldeTemplate[]
+  setTemplates: React.Dispatch<React.SetStateAction<MeldeTemplate[]>>
+  onSave?: (template: MeldeTemplate) => Promise<void>
+}) {
+  const [saving, setSaving] = useState<string | null>(null)
+
+  async function handleSave(template: MeldeTemplate) {
+    if (!onSave) return
+    setSaving(template.id)
+    try {
+      await onSave(template)
+    } finally {
+      setSaving(null)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold">Melde-Templates</h3>
+        <p className="text-sm text-gray-500">
+          Vorlagen fuer Meldungen an die Aufsichtsbehoerde (Art. 33) und Benachrichtigung Betroffener (Art. 34).
+        </p>
+      </div>
+
+      {templates.map(template => (
+        <div key={template.id} className="bg-white rounded-lg border p-6">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <span className={`px-2 py-1 rounded text-xs font-bold ${
+                template.type === 'art33'
+                  ? 'bg-blue-100 text-blue-800'
+                  : 'bg-purple-100 text-purple-800'
+              }`}>
+                {template.type === 'art33' ? 'Art. 33' : 'Art. 34'}
+              </span>
+              <h4 className="font-medium">{template.title}</h4>
+            </div>
+            {onSave && (
+              <button
+                onClick={() => handleSave(template)}
+                disabled={saving === template.id}
+                className="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              >
+                {saving === template.id ? 'Gespeichert...' : 'Speichern'}
+              </button>
+            )}
+          </div>
+          <textarea
+            value={template.content}
+            onChange={e => {
+              setTemplates(prev => prev.map(t =>
+                t.id === template.id ? { ...t, content: e.target.value } : t
+              ))
+            }}
+            rows={12}
+            className="w-full border rounded px-3 py-2 text-sm font-mono"
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/notfallplan/_components/index.ts b/admin-compliance/app/sdk/notfallplan/_components/index.ts
new file mode 100644
index 0000000..d155d00
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/index.ts
@@ -0,0 +1,7 @@
+export { ConfigTab } from './ConfigTab'
+export { IncidentsTab } from './IncidentsTab'
+export { TemplatesTab } from './TemplatesTab'
+export { ExercisesTab } from './ExercisesTab'
+export { ContactModal, ExerciseModal, ScenarioModal } from './Modals'
+export { ApiContactsSection, ApiScenariosSection, ApiExercisesSection } from './ApiSections'
+export * from './types'
diff --git a/admin-compliance/app/sdk/notfallplan/_components/types.ts b/admin-compliance/app/sdk/notfallplan/_components/types.ts
new file mode 100644
index 0000000..cf1ec42
--- /dev/null
+++ b/admin-compliance/app/sdk/notfallplan/_components/types.ts
@@ -0,0 +1,307 @@
+export type Tab = 'config' | 'incidents' | 'templates' | 'exercises'
+
+export type IncidentStatus = 'detected' | 'classified' | 'assessed' | 'reported' | 'not_reportable' | 'closed'
+export type IncidentSeverity = 'low' | 'medium' | 'high' | 'critical'
+
+export interface NotfallplanConfig {
+  meldewege: MeldeStep[]
+  zustaendigkeiten: Zustaendigkeit[]
+  aufsichtsbehoerde: {
+    name: string
+    state: string
+    email: string
+    phone: string
+    url: string
+  }
+  eskalationsstufen: Eskalationsstufe[]
+  sofortmassnahmen: string[]
+}
+
+export interface MeldeStep {
+  id: string
+  order: number
+  role: string
+  name: string
+  action: string
+  maxHours: number
+}
+
+export interface Zustaendigkeit {
+  id: string
+  role: string
+  name: string
+  email: string
+  phone: string
+}
+
+export interface Eskalationsstufe {
+  id: string
+  level: number
+  label: string
+  triggerCondition: string
+  actions: string[]
+}
+
+export interface Incident {
+  id: string
+  title: string
+  description: string
+  detectedAt: string
+  detectedBy: string
+  status: IncidentStatus
+  severity: IncidentSeverity
+  affectedDataCategories: string[]
+  estimatedAffectedPersons: number
+  measures: string[]
+  art34Required: boolean
+  art34Justification: string
+  reportedToAuthorityAt?: string
+  notifiedAffectedAt?: string
+  closedAt?: string
+  closedBy?: string
+  lessonsLearned?: string
+}
+
+export interface MeldeTemplate {
+  id: string
+  type: 'art33' | 'art34'
+  title: string
+  content: string
+}
+
+export interface Exercise {
+  id: string
+  title: string
+  type: 'tabletop' | 'simulation' | 'full_drill'
+  scenario: string
+  scheduledDate: string
+  completedDate?: string
+  participants: string[]
+  lessonsLearned: string
+  nextExerciseDate?: string
+}
+
+export interface ApiContact {
+  id: string
+  name: string
+  role: string | null
+  email: string | null
+  phone: string | null
+  is_primary: boolean
+  available_24h: boolean
+  created_at: string | null
+}
+
+export interface ApiScenario {
+  id: string
+  title: string
+  category: string | null
+  severity: string
+  description: string | null
+  is_active: boolean
+  created_at: string | null
+}
+
+export interface ApiExercise {
+  id: string
+  title: string
+  exercise_type: string
+  exercise_date: string | null
+  outcome: string | null
+  notes: string | null
+  created_at: string | null
+}
+
+export const INCIDENT_STATUS_LABELS: Record<IncidentStatus, string> = {
+  detected: 'Erkannt',
+  classified: 'Klassifiziert',
+  assessed: 'Bewertet',
+  reported: 'Gemeldet',
+  not_reportable: 'Nicht meldepflichtig',
+  closed: 'Abgeschlossen',
+}
+
+export const INCIDENT_STATUS_COLORS: Record<IncidentStatus, string> = {
+  detected: 'bg-red-100 text-red-800',
+  classified: 'bg-yellow-100 text-yellow-800',
+  assessed: 'bg-blue-100 text-blue-800',
+  reported: 'bg-green-100 text-green-800',
+  not_reportable: 'bg-gray-100 text-gray-800',
+  closed: 'bg-gray-100 text-gray-600',
+}
+
+export const SEVERITY_LABELS: Record<IncidentSeverity, string> = {
+  low: 'Niedrig',
+  medium: 'Mittel',
+  high: 'Hoch',
+  critical: 'Kritisch',
+}
+
+export const SEVERITY_COLORS: Record<IncidentSeverity, string> = {
+  low: 'bg-green-100 text-green-800',
+  medium: 'bg-yellow-100 text-yellow-800',
+  high: 'bg-orange-100 text-orange-800',
+  critical: 'bg-red-100 text-red-800',
+}
+
+export const NOTFALLPLAN_API = '/api/sdk/v1/notfallplan'
+
+export const DEFAULT_CONFIG: NotfallplanConfig = {
+  meldewege: [
+    { id: '1', order: 1, role: 'Entdecker', name: '', action: 'Incident melden an IT-Sicherheit', maxHours: 0 },
+    { id: '2', order: 2, role: 'IT-Sicherheit', name: '', action: 'Erstbewertung und Klassifizierung', maxHours: 4 },
+    { id: '3', order: 3, role: 'Datenschutzbeauftragter', name: '', action: 'Meldepflicht pruefen (Art. 33)', maxHours: 12 },
+    { id: '4', order: 4, role: 'Geschaeftsfuehrung', name: '', action: 'Freigabe der Meldung', maxHours: 24 },
+    { id: '5', order: 5, role: 'DSB', name: '', action: 'Meldung an Aufsichtsbehoerde', maxHours: 72 },
+  ],
+  zustaendigkeiten: [
+    { id: '1', role: 'Incident Owner', name: '', email: '', phone: '' },
+    { id: '2', role: 'Datenschutzbeauftragter', name: '', email: '', phone: '' },
+    { id: '3', role: 'IT-Sicherheit', name: '', email: '', phone: '' },
+    { id: '4', role: 'Recht / Legal', name: '', email: '', phone: '' },
+    { id: '5', role: 'Kommunikation / PR', name: '', email: '', phone: '' },
+  ],
+  aufsichtsbehoerde: {
+    name: '',
+    state: '',
+    email: '',
+    phone: '',
+    url: '',
+  },
+  eskalationsstufen: [
+    { id: '1', level: 1, label: 'Standard', triggerCondition: 'Einzelfall, keine sensiblen Daten', actions: ['IT-Sicherheit informieren', 'DSB benachrichtigen'] },
+    { id: '2', level: 2, label: 'Erhoehte Prioritaet', triggerCondition: 'Sensible Daten oder > 100 Betroffene', actions: ['Geschaeftsfuehrung informieren', 'Notfallteam einberufen'] },
+    { id: '3', level: 3, label: 'Kritisch', triggerCondition: 'Besondere Kategorien Art. 9 oder > 1000 Betroffene', actions: ['Sofortige Krisensitzung', 'Art. 34 Benachrichtigung vorbereiten', 'PR/Kommunikation einbinden'] },
+  ],
+  sofortmassnahmen: [
+    'Betroffene Systeme isolieren / vom Netz nehmen',
+    'Zugriffsrechte pruefen und ggf. sperren',
+    'Beweise sichern (Logs, Screenshots)',
+    'Zeitleiste der Ereignisse dokumentieren',
+    'Erstbewertung: Art der Daten, Anzahl Betroffene, Schaden',
+    'DSB unverzueglich informieren',
+  ],
+}
+
+export const DEFAULT_TEMPLATES: MeldeTemplate[] = [
+  {
+    id: 'tpl-art33',
+    type: 'art33',
+    title: 'Meldung an Aufsichtsbehoerde (Art. 33 DSGVO)',
+    content: `Meldung einer Verletzung des Schutzes personenbezogener Daten
+gemaess Art. 33 DSGVO
+
+1. Beschreibung der Verletzung:
+[Art der Verletzung, betroffene Kategorien personenbezogener Daten]
+
+2. Kategorien und ungefaehre Zahl der betroffenen Personen:
+[Anzahl und Kategorien der Betroffenen]
+
+3. Kategorien und ungefaehre Zahl der betroffenen Datensaetze:
+[Datensatz-Kategorien und Anzahl]
+
+4. Name und Kontaktdaten des Datenschutzbeauftragten:
+[Name, E-Mail, Telefon]
+
+5. Beschreibung der wahrscheinlichen Folgen:
+[Moegliche Auswirkungen auf die Betroffenen]
+
+6. Beschreibung der ergriffenen/vorgeschlagenen Massnahmen:
+[Sofortmassnahmen und geplante Abhilfemassnahmen]
+
+7. Zeitpunkt der Feststellung:
+[Datum, Uhrzeit]
+
+8. Begruendung bei verspaeteter Meldung (falls > 72h):
+[Begruendung]`,
+  },
+  {
+    id: 'tpl-art34',
+    type: 'art34',
+    title: 'Benachrichtigung Betroffene (Art. 34 DSGVO)',
+    content: `Benachrichtigung ueber eine Verletzung des Schutzes
+Ihrer personenbezogenen Daten
+
+Sehr geehrte/r [Name/Betroffene],
+
+wir informieren Sie gemaess Art. 34 DSGVO ueber eine Verletzung
+des Schutzes personenbezogener Daten, die Ihre Daten betrifft.
+
+Was ist passiert?
+[Beschreibung in klarer, einfacher Sprache]
+
+Welche Daten sind betroffen?
+[Betroffene Datenkategorien]
+
+Welche Folgen sind moeglich?
+[Moegliche Auswirkungen]
+
+Was haben wir unternommen?
+[Ergriffene Massnahmen]
+
+Was koennen Sie tun?
+[Empfehlungen fuer Betroffene, z.B. Passwort aendern]
+
+Kontakt:
+Unser Datenschutzbeauftragter steht Ihnen fuer Rueckfragen
+zur Verfuegung:
+[Name, E-Mail, Telefon]
+
+Mit freundlichen Gruessen
+[Verantwortlicher]`,
+  },
+]
+
+const STORAGE_KEY = 'bp_notfallplan'
+
+export function loadFromStorage(): {
+  config: NotfallplanConfig
+  incidents: Incident[]
+  templates: MeldeTemplate[]
+  exercises: Exercise[]
+} {
+  if (typeof window === 'undefined') {
+    return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
+  }
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      return JSON.parse(stored)
+    }
+  } catch {
+    // ignore
+  }
+  return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
+}
+
+export function saveToStorage(data: {
+  config: NotfallplanConfig
+  incidents: Incident[]
+  templates: MeldeTemplate[]
+  exercises: Exercise[]
+}) {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
+}
+
+export function apiToIncident(raw: any): Incident {
+  return {
+    id: raw.id,
+    title: raw.title,
+    description: raw.description || '',
+    detectedAt: raw.detected_at,
+    detectedBy: raw.detected_by || 'Admin',
+    status: raw.status,
+    severity: raw.severity,
+    affectedDataCategories: raw.affected_data_categories || [],
+    estimatedAffectedPersons: raw.estimated_affected_persons || 0,
+    measures: raw.measures || [],
+    art34Required: raw.art34_required || false,
+    art34Justification: raw.art34_justification || '',
+    reportedToAuthorityAt: raw.reported_to_authority_at,
+    notifiedAffectedAt: raw.notified_affected_at,
+    closedAt: raw.closed_at,
+    closedBy: raw.closed_by,
+    lessonsLearned: raw.lessons_learned,
+  }
+}
diff --git a/admin-compliance/app/sdk/notfallplan/page.tsx b/admin-compliance/app/sdk/notfallplan/page.tsx
index 97fbcc7..910b816 100644
--- a/admin-compliance/app/sdk/notfallplan/page.tsx
+++ b/admin-compliance/app/sdk/notfallplan/page.tsx
@@ -13,352 +13,35 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useSDK } from '@/lib/sdk'
 import StepHeader from '@/components/sdk/StepHeader/StepHeader'
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-type Tab = 'config' | 'incidents' | 'templates' | 'exercises'
-
-type IncidentStatus = 'detected' | 'classified' | 'assessed' | 'reported' | 'not_reportable' | 'closed'
-type IncidentSeverity = 'low' | 'medium' | 'high' | 'critical'
-
-interface NotfallplanConfig {
-  meldewege: MeldeStep[]
-  zustaendigkeiten: Zustaendigkeit[]
-  aufsichtsbehoerde: {
-    name: string
-    state: string
-    email: string
-    phone: string
-    url: string
-  }
-  eskalationsstufen: Eskalationsstufe[]
-  sofortmassnahmen: string[]
-}
-
-interface MeldeStep {
-  id: string
-  order: number
-  role: string
-  name: string
-  action: string
-  maxHours: number
-}
-
-interface Zustaendigkeit {
-  id: string
-  role: string
-  name: string
-  email: string
-  phone: string
-}
-
-interface Eskalationsstufe {
-  id: string
-  level: number
-  label: string
-  triggerCondition: string
-  actions: string[]
-}
-
-interface Incident {
-  id: string
-  title: string
-  description: string
-  detectedAt: string
-  detectedBy: string
-  status: IncidentStatus
-  severity: IncidentSeverity
-  affectedDataCategories: string[]
-  estimatedAffectedPersons: number
-  measures: string[]
-  art34Required: boolean
-  art34Justification: string
-  reportedToAuthorityAt?: string
-  notifiedAffectedAt?: string
-  closedAt?: string
-  closedBy?: string
-  lessonsLearned?: string
-}
-
-interface MeldeTemplate {
-  id: string
-  type: 'art33' | 'art34'
-  title: string
-  content: string
-}
-
-interface Exercise {
-  id: string
-  title: string
-  type: 'tabletop' | 'simulation' | 'full_drill'
-  scenario: string
-  scheduledDate: string
-  completedDate?: string
-  participants: string[]
-  lessonsLearned: string
-  nextExerciseDate?: string
-}
-
-// =============================================================================
-// INITIAL DATA
-// =============================================================================
-
-const DEFAULT_CONFIG: NotfallplanConfig = {
-  meldewege: [
-    { id: '1', order: 1, role: 'Entdecker', name: '', action: 'Incident melden an IT-Sicherheit', maxHours: 0 },
-    { id: '2', order: 2, role: 'IT-Sicherheit', name: '', action: 'Erstbewertung und Klassifizierung', maxHours: 4 },
-    { id: '3', order: 3, role: 'Datenschutzbeauftragter', name: '', action: 'Meldepflicht pruefen (Art. 33)', maxHours: 12 },
-    { id: '4', order: 4, role: 'Geschaeftsfuehrung', name: '', action: 'Freigabe der Meldung', maxHours: 24 },
-    { id: '5', order: 5, role: 'DSB', name: '', action: 'Meldung an Aufsichtsbehoerde', maxHours: 72 },
-  ],
-  zustaendigkeiten: [
-    { id: '1', role: 'Incident Owner', name: '', email: '', phone: '' },
-    { id: '2', role: 'Datenschutzbeauftragter', name: '', email: '', phone: '' },
-    { id: '3', role: 'IT-Sicherheit', name: '', email: '', phone: '' },
-    { id: '4', role: 'Recht / Legal', name: '', email: '', phone: '' },
-    { id: '5', role: 'Kommunikation / PR', name: '', email: '', phone: '' },
-  ],
-  aufsichtsbehoerde: {
-    name: '',
-    state: '',
-    email: '',
-    phone: '',
-    url: '',
-  },
-  eskalationsstufen: [
-    { id: '1', level: 1, label: 'Standard', triggerCondition: 'Einzelfall, keine sensiblen Daten', actions: ['IT-Sicherheit informieren', 'DSB benachrichtigen'] },
-    { id: '2', level: 2, label: 'Erhoehte Prioritaet', triggerCondition: 'Sensible Daten oder > 100 Betroffene', actions: ['Geschaeftsfuehrung informieren', 'Notfallteam einberufen'] },
-    { id: '3', level: 3, label: 'Kritisch', triggerCondition: 'Besondere Kategorien Art. 9 oder > 1000 Betroffene', actions: ['Sofortige Krisensitzung', 'Art. 34 Benachrichtigung vorbereiten', 'PR/Kommunikation einbinden'] },
-  ],
-  sofortmassnahmen: [
-    'Betroffene Systeme isolieren / vom Netz nehmen',
-    'Zugriffsrechte pruefen und ggf. sperren',
-    'Beweise sichern (Logs, Screenshots)',
-    'Zeitleiste der Ereignisse dokumentieren',
-    'Erstbewertung: Art der Daten, Anzahl Betroffene, Schaden',
-    'DSB unverzueglich informieren',
-  ],
-}
-
-const DEFAULT_TEMPLATES: MeldeTemplate[] = [
-  {
-    id: 'tpl-art33',
-    type: 'art33',
-    title: 'Meldung an Aufsichtsbehoerde (Art. 33 DSGVO)',
-    content: `Meldung einer Verletzung des Schutzes personenbezogener Daten
-gemaess Art. 33 DSGVO
-
-1. Beschreibung der Verletzung:
-[Art der Verletzung, betroffene Kategorien personenbezogener Daten]
-
-2. Kategorien und ungefaehre Zahl der betroffenen Personen:
-[Anzahl und Kategorien der Betroffenen]
-
-3. Kategorien und ungefaehre Zahl der betroffenen Datensaetze:
-[Datensatz-Kategorien und Anzahl]
-
-4. Name und Kontaktdaten des Datenschutzbeauftragten:
-[Name, E-Mail, Telefon]
-
-5. Beschreibung der wahrscheinlichen Folgen:
-[Moegliche Auswirkungen auf die Betroffenen]
-
-6. Beschreibung der ergriffenen/vorgeschlagenen Massnahmen:
-[Sofortmassnahmen und geplante Abhilfemassnahmen]
-
-7. Zeitpunkt der Feststellung:
-[Datum, Uhrzeit]
-
-8. Begruendung bei verspaeteter Meldung (falls > 72h):
-[Begruendung]`,
-  },
-  {
-    id: 'tpl-art34',
-    type: 'art34',
-    title: 'Benachrichtigung Betroffene (Art. 34 DSGVO)',
-    content: `Benachrichtigung ueber eine Verletzung des Schutzes
-Ihrer personenbezogenen Daten
-
-Sehr geehrte/r [Name/Betroffene],
-
-wir informieren Sie gemaess Art. 34 DSGVO ueber eine Verletzung
-des Schutzes personenbezogener Daten, die Ihre Daten betrifft.
-
-Was ist passiert?
-[Beschreibung in klarer, einfacher Sprache]
-
-Welche Daten sind betroffen?
-[Betroffene Datenkategorien]
-
-Welche Folgen sind moeglich?
-[Moegliche Auswirkungen]
-
-Was haben wir unternommen?
-[Ergriffene Massnahmen]
-
-Was koennen Sie tun?
-[Empfehlungen fuer Betroffene, z.B. Passwort aendern]
-
-Kontakt:
-Unser Datenschutzbeauftragter steht Ihnen fuer Rueckfragen
-zur Verfuegung:
-[Name, E-Mail, Telefon]
-
-Mit freundlichen Gruessen
-[Verantwortlicher]`,
-  },
-]
-
-const INCIDENT_STATUS_LABELS: Record<IncidentStatus, string> = {
-  detected: 'Erkannt',
-  classified: 'Klassifiziert',
-  assessed: 'Bewertet',
-  reported: 'Gemeldet',
-  not_reportable: 'Nicht meldepflichtig',
-  closed: 'Abgeschlossen',
-}
-
-const INCIDENT_STATUS_COLORS: Record<IncidentStatus, string> = {
-  detected: 'bg-red-100 text-red-800',
-  classified: 'bg-yellow-100 text-yellow-800',
-  assessed: 'bg-blue-100 text-blue-800',
-  reported: 'bg-green-100 text-green-800',
-  not_reportable: 'bg-gray-100 text-gray-800',
-  closed: 'bg-gray-100 text-gray-600',
-}
-
-const SEVERITY_LABELS: Record<IncidentSeverity, string> = {
-  low: 'Niedrig',
-  medium: 'Mittel',
-  high: 'Hoch',
-  critical: 'Kritisch',
-}
-
-const SEVERITY_COLORS: Record<IncidentSeverity, string> = {
-  low: 'bg-green-100 text-green-800',
-  medium: 'bg-yellow-100 text-yellow-800',
-  high: 'bg-orange-100 text-orange-800',
-  critical: 'bg-red-100 text-red-800',
-}
-
-// =============================================================================
-// LOCAL STORAGE HELPERS
-// =============================================================================
-
-const STORAGE_KEY = 'bp_notfallplan'
-
-function loadFromStorage(): {
-  config: NotfallplanConfig
-  incidents: Incident[]
-  templates: MeldeTemplate[]
-  exercises: Exercise[]
-} {
-  if (typeof window === 'undefined') {
-    return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
-  }
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) {
-      return JSON.parse(stored)
-    }
-  } catch {
-    // ignore
-  }
-  return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
-}
-
-function saveToStorage(data: {
-  config: NotfallplanConfig
-  incidents: Incident[]
-  templates: MeldeTemplate[]
-  exercises: Exercise[]
-}) {
-  if (typeof window === 'undefined') return
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
-}
-
-// =============================================================================
-// COMPONENT: 72h Countdown
-// =============================================================================
-
-function CountdownTimer({ detectedAt }: { detectedAt: string }) {
-  const [remaining, setRemaining] = useState('')
-  const [overdue, setOverdue] = useState(false)
-
-  useEffect(() => {
-    function update() {
-      const detected = new Date(detectedAt).getTime()
-      const deadline = detected + 72 * 60 * 60 * 1000
-      const now = Date.now()
-      const diff = deadline - now
-
-      if (diff <= 0) {
-        const overdueMs = Math.abs(diff)
-        const hours = Math.floor(overdueMs / (1000 * 60 * 60))
-        const mins = Math.floor((overdueMs % (1000 * 60 * 60)) / (1000 * 60))
-        setRemaining(`${hours}h ${mins}min ueberfaellig`)
-        setOverdue(true)
-      } else {
-        const hours = Math.floor(diff / (1000 * 60 * 60))
-        const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
-        setRemaining(`${hours}h ${mins}min verbleibend`)
-        setOverdue(false)
-      }
-    }
-    update()
-    const interval = setInterval(update, 60000)
-    return () => clearInterval(interval)
-  }, [detectedAt])
-
-  return (
-    <span className={`text-sm font-medium ${overdue ? 'text-red-600' : 'text-orange-600'}`}>
-      72h-Frist: {remaining}
-    </span>
-  )
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
-
-// =============================================================================
-// API TYPES (for DB-backed Notfallplan data)
-// =============================================================================
-
-interface ApiContact {
-  id: string
-  name: string
-  role: string | null
-  email: string | null
-  phone: string | null
-  is_primary: boolean
-  available_24h: boolean
-  created_at: string | null
-}
-
-interface ApiScenario {
-  id: string
-  title: string
-  category: string | null
-  severity: string
-  description: string | null
-  is_active: boolean
-  created_at: string | null
-}
-
-interface ApiExercise {
-  id: string
-  title: string
-  exercise_type: string
-  exercise_date: string | null
-  outcome: string | null
-  notes: string | null
-  created_at: string | null
-}
-
-const NOTFALLPLAN_API = '/api/sdk/v1/notfallplan'
+import {
+  ConfigTab,
+  IncidentsTab,
+  TemplatesTab,
+  ExercisesTab,
+  ContactModal,
+  ExerciseModal,
+  ScenarioModal,
+  ApiContactsSection,
+  ApiScenariosSection,
+  ApiExercisesSection,
+  DEFAULT_CONFIG,
+  DEFAULT_TEMPLATES,
+  NOTFALLPLAN_API,
+  loadFromStorage,
+  saveToStorage,
+  apiToIncident,
+} from './_components'
+import type {
+  Tab,
+  NotfallplanConfig,
+  Incident,
+  IncidentStatus,
+  MeldeTemplate,
+  Exercise,
+  ApiContact,
+  ApiScenario,
+  ApiExercise,
+} from './_components'
 
 export default function NotfallplanPage() {
   const { state } = useSDK()
@@ -387,7 +70,6 @@ export default function NotfallplanPage() {
   const [savingExercise, setSavingExercise] = useState(false)
 
   useEffect(() => {
-    // Only load config and exercises from localStorage (incidents/templates use API)
     const data = loadFromStorage()
     setConfig(data.config)
     setExercises(data.exercises)
@@ -434,40 +116,18 @@ export default function NotfallplanPage() {
     }
   }
 
-  function apiToIncident(raw: any): Incident {
-    return {
-      id: raw.id,
-      title: raw.title,
-      description: raw.description || '',
-      detectedAt: raw.detected_at,
-      detectedBy: raw.detected_by || 'Admin',
-      status: raw.status,
-      severity: raw.severity,
-      affectedDataCategories: raw.affected_data_categories || [],
-      estimatedAffectedPersons: raw.estimated_affected_persons || 0,
-      measures: raw.measures || [],
-      art34Required: raw.art34_required || false,
-      art34Justification: raw.art34_justification || '',
-      reportedToAuthorityAt: raw.reported_to_authority_at,
-      notifiedAffectedAt: raw.notified_affected_at,
-      closedAt: raw.closed_at,
-      closedBy: raw.closed_by,
-      lessonsLearned: raw.lessons_learned,
-    }
-  }
-
-  async function apiAddIncident(newIncident: Partial<Incident>) {
+  async function apiAddIncident(newInc: Partial<Incident>) {
     try {
       const res = await fetch(`${NOTFALLPLAN_API}/incidents`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          title: newIncident.title,
-          description: newIncident.description,
-          severity: newIncident.severity || 'medium',
-          estimated_affected_persons: newIncident.estimatedAffectedPersons || 0,
-          art34_required: newIncident.art34Required || false,
-          art34_justification: newIncident.art34Justification || '',
+          title: newInc.title,
+          description: newInc.description,
+          severity: newInc.severity || 'medium',
+          estimated_affected_persons: newInc.estimatedAffectedPersons || 0,
+          art34_required: newInc.art34Required || false,
+          art34_justification: newInc.art34Justification || '',
         }),
       })
       if (res.ok) {
@@ -481,7 +141,7 @@ export default function NotfallplanPage() {
 
   async function apiUpdateIncidentStatus(id: string, status: IncidentStatus) {
     try {
-      const body: any = { status }
+      const body: Record<string, unknown> = { status }
       if (status === 'reported') body.reported_to_authority_at = new Date().toISOString()
       if (status === 'closed') { body.closed_at = new Date().toISOString(); body.closed_by = 'Admin' }
       const res = await fetch(`${NOTFALLPLAN_API}/incidents/${id}`, {
@@ -501,9 +161,7 @@ export default function NotfallplanPage() {
   async function apiDeleteIncident(id: string) {
     try {
       const res = await fetch(`${NOTFALLPLAN_API}/incidents/${id}`, { method: 'DELETE' })
-      if (res.ok || res.status === 204) {
-        setIncidents(prev => prev.filter(inc => inc.id !== id))
-      }
+      if (res.ok || res.status === 204) setIncidents(prev => prev.filter(inc => inc.id !== id))
     } catch (err) {
       console.error('Failed to delete incident:', err)
     }
@@ -559,9 +217,7 @@ export default function NotfallplanPage() {
   async function handleDeleteContact(id: string) {
     try {
       const res = await fetch(`${NOTFALLPLAN_API}/contacts/${id}`, { method: 'DELETE' })
-      if (res.ok) {
-        setApiContacts(prev => prev.filter(c => c.id !== id))
-      }
+      if (res.ok) setApiContacts(prev => prev.filter(c => c.id !== id))
     } catch (err) {
       console.error('Failed to delete contact:', err)
     }
@@ -589,6 +245,15 @@ export default function NotfallplanPage() {
     }
   }
 
+  async function handleDeleteScenario(id: string) {
+    try {
+      const res = await fetch(`${NOTFALLPLAN_API}/scenarios/${id}`, { method: 'DELETE' })
+      if (res.ok) setApiScenarios(prev => prev.filter(s => s.id !== id))
+    } catch (err) {
+      console.error('Failed to delete scenario:', err)
+    }
+  }
+
   async function handleCreateExercise() {
     if (!newExercise.title.trim()) return
     setSavingExercise(true)
@@ -618,27 +283,13 @@ export default function NotfallplanPage() {
   async function handleDeleteExercise(id: string) {
     try {
       const res = await fetch(`${NOTFALLPLAN_API}/exercises/${id}`, { method: 'DELETE' })
-      if (res.ok) {
-        setApiExercises(prev => prev.filter(e => e.id !== id))
-      }
+      if (res.ok) setApiExercises(prev => prev.filter(e => e.id !== id))
     } catch (e) {
-      console.error('Löschen fehlgeschlagen:', e)
-    }
-  }
-
-  async function handleDeleteScenario(id: string) {
-    try {
-      const res = await fetch(`${NOTFALLPLAN_API}/scenarios/${id}`, { method: 'DELETE' })
-      if (res.ok) {
-        setApiScenarios(prev => prev.filter(s => s.id !== id))
-      }
-    } catch (err) {
-      console.error('Failed to delete scenario:', err)
+      console.error('Loeschen fehlgeschlagen:', e)
     }
   }
 
   const handleSave = useCallback(() => {
-    // Only config and exercises are persisted to localStorage; incidents/templates use API
     saveToStorage({ config, incidents: [], templates: DEFAULT_TEMPLATES, exercises })
     setSaved(true)
     setTimeout(() => setSaved(false), 2000)
@@ -694,9 +345,7 @@ export default function NotfallplanPage() {
         <button
           onClick={handleSave}
           className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-            saved
-              ? 'bg-green-600 text-white'
-              : 'bg-blue-600 text-white hover:bg-blue-700'
+            saved ? 'bg-green-600 text-white' : 'bg-blue-600 text-white hover:bg-blue-700'
           }`}
         >
           {saved ? 'Gespeichert!' : 'Speichern'}
@@ -706,98 +355,18 @@ export default function NotfallplanPage() {
       {/* Tab Content */}
       {activeTab === 'config' && (
         <>
-          {/* API Contacts & Scenarios section */}
-          <div className="space-y-4">
-            {/* Contacts */}
-            <div className="bg-white rounded-lg border p-5">
-              <div className="flex items-center justify-between mb-4">
-                <div>
-                  <h3 className="text-base font-semibold">Notfallkontakte (Datenbank)</h3>
-                  <p className="text-sm text-gray-500">Zentral gespeicherte Kontakte fuer den Notfall</p>
-                </div>
-                <button
-                  onClick={() => setShowContactModal(true)}
-                  className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
-                >
-                  + Kontakt hinzufuegen
-                </button>
-              </div>
-              {apiLoading ? (
-                <div className="text-sm text-gray-500 py-4 text-center">Lade Kontakte...</div>
-              ) : apiContacts.length === 0 ? (
-                <div className="text-sm text-gray-400 py-4 text-center">Noch keine Kontakte hinterlegt</div>
-              ) : (
-                <div className="space-y-2">
-                  {apiContacts.map(contact => (
-                    <div key={contact.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                      <div className="flex items-center gap-3">
-                        {contact.is_primary && <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-medium">Primaer</span>}
-                        {contact.available_24h && <span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full font-medium">24/7</span>}
-                        <div>
-                          <span className="font-medium text-sm">{contact.name}</span>
-                          {contact.role && <span className="text-gray-500 text-sm ml-2">({contact.role})</span>}
-                          <div className="text-xs text-gray-400">{contact.email} {contact.phone && `| ${contact.phone}`}</div>
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => handleDeleteContact(contact.id)}
-                        className="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50"
-                      >
-                        Loeschen
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            {/* Scenarios */}
-            <div className="bg-white rounded-lg border p-5">
-              <div className="flex items-center justify-between mb-4">
-                <div>
-                  <h3 className="text-base font-semibold">Notfallszenarien (Datenbank)</h3>
-                  <p className="text-sm text-gray-500">Definierte Szenarien und Reaktionsplaene</p>
-                </div>
-                <button
-                  onClick={() => setShowScenarioModal(true)}
-                  className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
-                >
-                  + Szenario hinzufuegen
-                </button>
-              </div>
-              {apiLoading ? (
-                <div className="text-sm text-gray-500 py-4 text-center">Lade Szenarien...</div>
-              ) : apiScenarios.length === 0 ? (
-                <div className="text-sm text-gray-400 py-4 text-center">Noch keine Szenarien definiert</div>
-              ) : (
-                <div className="space-y-2">
-                  {apiScenarios.map(scenario => (
-                    <div key={scenario.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                      <div>
-                        <span className="font-medium text-sm">{scenario.title}</span>
-                        <div className="flex items-center gap-2 mt-1">
-                          {scenario.category && <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">{scenario.category}</span>}
-                          <span className={`text-xs px-2 py-0.5 rounded ${
-                            scenario.severity === 'critical' ? 'bg-red-100 text-red-700' :
-                            scenario.severity === 'high' ? 'bg-orange-100 text-orange-700' :
-                            scenario.severity === 'medium' ? 'bg-yellow-100 text-yellow-700' :
-                            'bg-green-100 text-green-700'
-                          }`}>{scenario.severity}</span>
-                        </div>
-                        {scenario.description && <p className="text-xs text-gray-500 mt-1 truncate max-w-lg">{scenario.description}</p>}
-                      </div>
-                      <button
-                        onClick={() => handleDeleteScenario(scenario.id)}
-                        className="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded hover:bg-red-50"
-                      >
-                        Loeschen
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
+          <ApiContactsSection
+            apiContacts={apiContacts}
+            apiLoading={apiLoading}
+            onAdd={() => setShowContactModal(true)}
+            onDelete={handleDeleteContact}
+          />
+          <ApiScenariosSection
+            apiScenarios={apiScenarios}
+            apiLoading={apiLoading}
+            onAdd={() => setShowScenarioModal(true)}
+            onDelete={handleDeleteScenario}
+          />
           <ConfigTab config={config} setConfig={setConfig} />
         </>
       )}
@@ -817,54 +386,12 @@ export default function NotfallplanPage() {
       )}
       {activeTab === 'exercises' && (
         <>
-          {/* API Exercises */}
-          {(apiExercises.length > 0 || !apiLoading) && (
-            <div className="bg-white rounded-lg border p-5">
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="text-base font-semibold">Uebungen (Datenbank)</h3>
-                <div className="flex items-center gap-3">
-                  <span className="text-sm text-gray-500">{apiExercises.length} Eintraege</span>
-                  <button
-                    onClick={() => setShowExerciseModal(true)}
-                    className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
-                  >
-                    + Neue Uebung
-                  </button>
-                </div>
-              </div>
-              {apiExercises.length === 0 ? (
-                <div className="text-sm text-gray-400 py-2 text-center">Noch keine Uebungen in der Datenbank</div>
-              ) : (
-                <div className="space-y-2">
-                  {apiExercises.map(ex => (
-                    <div key={ex.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                      <div>
-                        <span className="font-medium text-sm">{ex.title}</span>
-                        <div className="flex items-center gap-2 mt-1">
-                          <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded">{ex.exercise_type}</span>
-                          {ex.exercise_date && <span className="text-xs text-gray-400">{new Date(ex.exercise_date).toLocaleDateString('de-DE')}</span>}
-                          {ex.outcome && <span className={`text-xs px-2 py-0.5 rounded ${ex.outcome === 'passed' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{ex.outcome}</span>}
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => {
-                          if (window.confirm(`Uebung "${ex.title}" loeschen?`)) {
-                            handleDeleteExercise(ex.id)
-                          }
-                        }}
-                        className="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
-                        title="Loeschen"
-                      >
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                        </svg>
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
+          <ApiExercisesSection
+            apiExercises={apiExercises}
+            apiLoading={apiLoading}
+            onAdd={() => setShowExerciseModal(true)}
+            onDelete={handleDeleteExercise}
+          />
           <ExercisesTab
             exercises={exercises}
             setExercises={setExercises}
@@ -874,1017 +401,35 @@ export default function NotfallplanPage() {
         </>
       )}
 
-      {/* Contact Create Modal */}
+      {/* Modals */}
       {showContactModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
-            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-              <h3 className="font-semibold text-gray-900">Notfallkontakt hinzufuegen</h3>
-              <button onClick={() => setShowContactModal(false)} className="text-gray-400 hover:text-gray-600">
-                <svg className="w-5 h-5" 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 className="p-6 space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
-                <input
-                  type="text"
-                  value={newContact.name}
-                  onChange={e => setNewContact(p => ({ ...p, name: e.target.value }))}
-                  placeholder="Vollstaendiger Name"
-                  className="w-full border rounded px-3 py-2 text-sm"
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Rolle</label>
-                <input
-                  type="text"
-                  value={newContact.role}
-                  onChange={e => setNewContact(p => ({ ...p, role: e.target.value }))}
-                  placeholder="z.B. Datenschutzbeauftragter"
-                  className="w-full border rounded px-3 py-2 text-sm"
-                />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">E-Mail</label>
-                  <input
-                    type="email"
-                    value={newContact.email}
-                    onChange={e => setNewContact(p => ({ ...p, email: e.target.value }))}
-                    placeholder="email@example.com"
-                    className="w-full border rounded px-3 py-2 text-sm"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Telefon</label>
-                  <input
-                    type="tel"
-                    value={newContact.phone}
-                    onChange={e => setNewContact(p => ({ ...p, phone: e.target.value }))}
-                    placeholder="+49..."
-                    className="w-full border rounded px-3 py-2 text-sm"
-                  />
-                </div>
-              </div>
-              <div className="flex items-center gap-6">
-                <label className="flex items-center gap-2 text-sm cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={newContact.is_primary}
-                    onChange={e => setNewContact(p => ({ ...p, is_primary: e.target.checked }))}
-                    className="rounded"
-                  />
-                  Primaerkontakt
-                </label>
-                <label className="flex items-center gap-2 text-sm cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={newContact.available_24h}
-                    onChange={e => setNewContact(p => ({ ...p, available_24h: e.target.checked }))}
-                    className="rounded"
-                  />
-                  24/7 erreichbar
-                </label>
-              </div>
-            </div>
-            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
-              <button onClick={() => setShowContactModal(false)} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
-                Abbrechen
-              </button>
-              <button
-                onClick={handleCreateContact}
-                disabled={!newContact.name || savingContact}
-                className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
-              >
-                {savingContact ? 'Speichern...' : 'Hinzufuegen'}
-              </button>
-            </div>
-          </div>
-        </div>
+        <ContactModal
+          newContact={newContact}
+          setNewContact={setNewContact}
+          onClose={() => setShowContactModal(false)}
+          onCreate={handleCreateContact}
+          saving={savingContact}
+        />
       )}
-
-      {/* Exercise Create Modal */}
       {showExerciseModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
-            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-              <h3 className="font-semibold text-gray-900">Neue Uebung planen</h3>
-              <button onClick={() => setShowExerciseModal(false)} className="text-gray-400 hover:text-gray-600">
-                <svg className="w-5 h-5" 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 className="p-6 space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
-                <input
-                  type="text"
-                  value={newExercise.title}
-                  onChange={e => setNewExercise(p => ({ ...p, title: e.target.value }))}
-                  placeholder="z.B. Tabletop-Uebung Ransomware"
-                  className="w-full border rounded px-3 py-2 text-sm"
-                />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Uebungstyp</label>
-                  <select
-                    value={newExercise.exercise_type}
-                    onChange={e => setNewExercise(p => ({ ...p, exercise_type: e.target.value }))}
-                    className="w-full border rounded px-3 py-2 text-sm"
-                  >
-                    <option value="tabletop">Tabletop</option>
-                    <option value="simulation">Simulation</option>
-                    <option value="walkthrough">Walkthrough</option>
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Datum</label>
-                  <input
-                    type="date"
-                    value={newExercise.exercise_date}
-                    onChange={e => setNewExercise(p => ({ ...p, exercise_date: e.target.value }))}
-                    className="w-full border rounded px-3 py-2 text-sm"
-                  />
-                </div>
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
-                <textarea
-                  value={newExercise.notes}
-                  onChange={e => setNewExercise(p => ({ ...p, notes: e.target.value }))}
-                  placeholder="Ziele, Teilnehmer, Ablauf..."
-                  rows={3}
-                  className="w-full border rounded px-3 py-2 text-sm"
-                />
-              </div>
-            </div>
-            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
-              <button onClick={() => setShowExerciseModal(false)} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
-                Abbrechen
-              </button>
-              <button
-                onClick={handleCreateExercise}
-                disabled={!newExercise.title || savingExercise}
-                className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
-              >
-                {savingExercise ? 'Speichern...' : 'Uebung erstellen'}
-              </button>
-            </div>
-          </div>
-        </div>
+        <ExerciseModal
+          newExercise={newExercise}
+          setNewExercise={setNewExercise}
+          onClose={() => setShowExerciseModal(false)}
+          onCreate={handleCreateExercise}
+          saving={savingExercise}
+        />
       )}
-
-      {/* Scenario Create Modal */}
       {showScenarioModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
-            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-              <h3 className="font-semibold text-gray-900">Notfallszenario hinzufuegen</h3>
-              <button onClick={() => setShowScenarioModal(false)} className="text-gray-400 hover:text-gray-600">
-                <svg className="w-5 h-5" 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 className="p-6 space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
-                <input
-                  type="text"
-                  value={newScenario.title}
-                  onChange={e => setNewScenario(p => ({ ...p, title: e.target.value }))}
-                  placeholder="z.B. Ransomware-Angriff auf Produktivsysteme"
-                  className="w-full border rounded px-3 py-2 text-sm"
-                />
-              </div>
-              <div className="grid grid-cols-2 gap-3">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
-                  <select
-                    value={newScenario.category}
-                    onChange={e => setNewScenario(p => ({ ...p, category: e.target.value }))}
-                    className="w-full border rounded px-3 py-2 text-sm"
-                  >
-                    <option value="data_breach">Datenpanne</option>
-                    <option value="system_failure">Systemausfall</option>
-                    <option value="physical">Physischer Vorfall</option>
-                    <option value="other">Sonstiges</option>
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
-                  <select
-                    value={newScenario.severity}
-                    onChange={e => setNewScenario(p => ({ ...p, severity: e.target.value }))}
-                    className="w-full border rounded px-3 py-2 text-sm"
-                  >
-                    <option value="low">Niedrig</option>
-                    <option value="medium">Mittel</option>
-                    <option value="high">Hoch</option>
-                    <option value="critical">Kritisch</option>
-                  </select>
-                </div>
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
-                <textarea
-                  value={newScenario.description}
-                  onChange={e => setNewScenario(p => ({ ...p, description: e.target.value }))}
-                  placeholder="Kurzbeschreibung des Szenarios und moeglicher Auswirkungen..."
-                  rows={3}
-                  className="w-full border rounded px-3 py-2 text-sm"
-                />
-              </div>
-            </div>
-            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
-              <button onClick={() => setShowScenarioModal(false)} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
-                Abbrechen
-              </button>
-              <button
-                onClick={handleCreateScenario}
-                disabled={!newScenario.title || savingScenario}
-                className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
-              >
-                {savingScenario ? 'Speichern...' : 'Hinzufuegen'}
-              </button>
-            </div>
-          </div>
-        </div>
+        <ScenarioModal
+          newScenario={newScenario}
+          setNewScenario={setNewScenario}
+          onClose={() => setShowScenarioModal(false)}
+          onCreate={handleCreateScenario}
+          saving={savingScenario}
+        />
       )}
     </div>
   )
 }
 
-// =============================================================================
-// TAB 1: Notfallplan-Konfiguration
-// =============================================================================
-
-function ConfigTab({
-  config,
-  setConfig,
-}: {
-  config: NotfallplanConfig
-  setConfig: React.Dispatch<React.SetStateAction<NotfallplanConfig>>
-}) {
-  return (
-    <div className="space-y-8">
-      {/* Meldewege */}
-      <section className="bg-white rounded-lg border p-6">
-        <h3 className="text-lg font-semibold mb-4">Meldewege (intern → Aufsichtsbehoerde)</h3>
-        <p className="text-sm text-gray-500 mb-4">
-          Definieren Sie die interne Eskalationskette bei einer Datenpanne.
-        </p>
-        <div className="space-y-3">
-          {config.meldewege.map((step, idx) => (
-            <div key={step.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
-              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center text-sm font-bold">
-                {step.order}
-              </span>
-              <div className="flex-1 grid grid-cols-3 gap-2">
-                <input
-                  type="text"
-                  value={step.role}
-                  onChange={e => {
-                    const updated = [...config.meldewege]
-                    updated[idx] = { ...updated[idx], role: e.target.value }
-                    setConfig(prev => ({ ...prev, meldewege: updated }))
-                  }}
-                  placeholder="Rolle"
-                  className="text-sm border rounded px-2 py-1"
-                />
-                <input
-                  type="text"
-                  value={step.name}
-                  onChange={e => {
-                    const updated = [...config.meldewege]
-                    updated[idx] = { ...updated[idx], name: e.target.value }
-                    setConfig(prev => ({ ...prev, meldewege: updated }))
-                  }}
-                  placeholder="Name"
-                  className="text-sm border rounded px-2 py-1"
-                />
-                <input
-                  type="text"
-                  value={step.action}
-                  onChange={e => {
-                    const updated = [...config.meldewege]
-                    updated[idx] = { ...updated[idx], action: e.target.value }
-                    setConfig(prev => ({ ...prev, meldewege: updated }))
-                  }}
-                  placeholder="Aktion"
-                  className="text-sm border rounded px-2 py-1"
-                />
-              </div>
-              <div className="flex-shrink-0 text-xs text-gray-500">
-                max. {step.maxHours}h
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Zustaendigkeiten */}
-      <section className="bg-white rounded-lg border p-6">
-        <h3 className="text-lg font-semibold mb-4">Zustaendigkeiten</h3>
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b">
-                <th className="text-left py-2 pr-4">Rolle</th>
-                <th className="text-left py-2 pr-4">Name</th>
-                <th className="text-left py-2 pr-4">E-Mail</th>
-                <th className="text-left py-2">Telefon</th>
-              </tr>
-            </thead>
-            <tbody>
-              {config.zustaendigkeiten.map((z, idx) => (
-                <tr key={z.id} className="border-b last:border-0">
-                  <td className="py-2 pr-4 font-medium">{z.role}</td>
-                  <td className="py-2 pr-4">
-                    <input
-                      type="text"
-                      value={z.name}
-                      onChange={e => {
-                        const updated = [...config.zustaendigkeiten]
-                        updated[idx] = { ...updated[idx], name: e.target.value }
-                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
-                      }}
-                      placeholder="Name eingeben"
-                      className="w-full text-sm border rounded px-2 py-1"
-                    />
-                  </td>
-                  <td className="py-2 pr-4">
-                    <input
-                      type="email"
-                      value={z.email}
-                      onChange={e => {
-                        const updated = [...config.zustaendigkeiten]
-                        updated[idx] = { ...updated[idx], email: e.target.value }
-                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
-                      }}
-                      placeholder="email@example.com"
-                      className="w-full text-sm border rounded px-2 py-1"
-                    />
-                  </td>
-                  <td className="py-2">
-                    <input
-                      type="tel"
-                      value={z.phone}
-                      onChange={e => {
-                        const updated = [...config.zustaendigkeiten]
-                        updated[idx] = { ...updated[idx], phone: e.target.value }
-                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
-                      }}
-                      placeholder="+49..."
-                      className="w-full text-sm border rounded px-2 py-1"
-                    />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      {/* Aufsichtsbehoerde */}
-      <section className="bg-white rounded-lg border p-6">
-        <h3 className="text-lg font-semibold mb-4">Zustaendige Aufsichtsbehoerde</h3>
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
-            <input
-              type="text"
-              value={config.aufsichtsbehoerde.name}
-              onChange={e => setConfig(prev => ({
-                ...prev,
-                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, name: e.target.value },
-              }))}
-              placeholder="z.B. LfD Niedersachsen"
-              className="w-full text-sm border rounded px-3 py-2"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Bundesland</label>
-            <input
-              type="text"
-              value={config.aufsichtsbehoerde.state}
-              onChange={e => setConfig(prev => ({
-                ...prev,
-                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, state: e.target.value },
-              }))}
-              placeholder="z.B. Niedersachsen"
-              className="w-full text-sm border rounded px-3 py-2"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">E-Mail</label>
-            <input
-              type="email"
-              value={config.aufsichtsbehoerde.email}
-              onChange={e => setConfig(prev => ({
-                ...prev,
-                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, email: e.target.value },
-              }))}
-              placeholder="poststelle@lfd.niedersachsen.de"
-              className="w-full text-sm border rounded px-3 py-2"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Telefon</label>
-            <input
-              type="tel"
-              value={config.aufsichtsbehoerde.phone}
-              onChange={e => setConfig(prev => ({
-                ...prev,
-                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, phone: e.target.value },
-              }))}
-              placeholder="+49..."
-              className="w-full text-sm border rounded px-3 py-2"
-            />
-          </div>
-        </div>
-      </section>
-
-      {/* Eskalationsstufen */}
-      <section className="bg-white rounded-lg border p-6">
-        <h3 className="text-lg font-semibold mb-4">Eskalationsstufen</h3>
-        <div className="space-y-4">
-          {config.eskalationsstufen.map((stufe) => (
-            <div key={stufe.id} className="p-4 bg-gray-50 rounded-lg">
-              <div className="flex items-center gap-3 mb-2">
-                <span className={`px-2 py-1 rounded text-xs font-bold ${
-                  stufe.level === 1 ? 'bg-yellow-100 text-yellow-800' :
-                  stufe.level === 2 ? 'bg-orange-100 text-orange-800' :
-                  'bg-red-100 text-red-800'
-                }`}>
-                  Stufe {stufe.level}
-                </span>
-                <span className="font-medium">{stufe.label}</span>
-              </div>
-              <p className="text-sm text-gray-600 mb-2">Ausloeser: {stufe.triggerCondition}</p>
-              <ul className="list-disc list-inside text-sm text-gray-700">
-                {stufe.actions.map((action, i) => (
-                  <li key={i}>{action}</li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* Sofortmassnahmen-Checkliste */}
-      <section className="bg-white rounded-lg border p-6">
-        <h3 className="text-lg font-semibold mb-4">Sofortmassnahmen-Checkliste</h3>
-        <p className="text-sm text-gray-500 mb-4">
-          Diese Massnahmen sind sofort bei Entdeckung einer Datenpanne durchzufuehren.
-        </p>
-        <ul className="space-y-2">
-          {config.sofortmassnahmen.map((m, idx) => (
-            <li key={idx} className="flex items-start gap-3 p-2">
-              <span className="flex-shrink-0 w-6 h-6 rounded border-2 border-gray-300 mt-0.5" />
-              <span className="text-sm">{m}</span>
-            </li>
-          ))}
-        </ul>
-      </section>
-    </div>
-  )
-}
-
-// =============================================================================
-// TAB 2: Incident-Register
-// =============================================================================
-
-function IncidentsTab({
-  incidents,
-  setIncidents,
-  showAdd,
-  setShowAdd,
-  onAdd,
-  onStatusChange,
-  onDelete,
-}: {
-  incidents: Incident[]
-  setIncidents: React.Dispatch<React.SetStateAction<Incident[]>>
-  showAdd: boolean
-  setShowAdd: (v: boolean) => void
-  onAdd?: (incident: Partial<Incident>) => Promise<void>
-  onStatusChange?: (id: string, status: IncidentStatus) => Promise<void>
-  onDelete?: (id: string) => Promise<void>
-}) {
-  const [newIncident, setNewIncident] = useState<Partial<Incident>>({
-    title: '',
-    description: '',
-    severity: 'medium',
-    affectedDataCategories: [],
-    estimatedAffectedPersons: 0,
-    measures: [],
-    art34Required: false,
-    art34Justification: '',
-  })
-
-  async function addIncident() {
-    if (!newIncident.title) return
-    if (onAdd) {
-      await onAdd(newIncident)
-    } else {
-      const incident: Incident = {
-        id: `INC-${Date.now()}`,
-        title: newIncident.title || '',
-        description: newIncident.description || '',
-        detectedAt: new Date().toISOString(),
-        detectedBy: 'Admin',
-        status: 'detected',
-        severity: newIncident.severity as IncidentSeverity || 'medium',
-        affectedDataCategories: newIncident.affectedDataCategories || [],
-        estimatedAffectedPersons: newIncident.estimatedAffectedPersons || 0,
-        measures: newIncident.measures || [],
-        art34Required: newIncident.art34Required || false,
-        art34Justification: newIncident.art34Justification || '',
-      }
-      setIncidents(prev => [incident, ...prev])
-    }
-    setShowAdd(false)
-    setNewIncident({
-      title: '', description: '', severity: 'medium',
-      affectedDataCategories: [], estimatedAffectedPersons: 0,
-      measures: [], art34Required: false, art34Justification: '',
-    })
-  }
-
-  async function updateStatus(id: string, status: IncidentStatus) {
-    if (onStatusChange) {
-      await onStatusChange(id, status)
-    } else {
-      setIncidents(prev => prev.map(inc =>
-        inc.id === id
-          ? {
-              ...inc,
-              status,
-              ...(status === 'reported' ? { reportedToAuthorityAt: new Date().toISOString() } : {}),
-              ...(status === 'closed' ? { closedAt: new Date().toISOString(), closedBy: 'Admin' } : {}),
-            }
-          : inc
-      ))
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">Incident-Register (Art. 33 Abs. 5)</h3>
-          <p className="text-sm text-gray-500">Alle Datenpannen dokumentieren — auch nicht-meldepflichtige.</p>
-        </div>
-        <button
-          onClick={() => setShowAdd(true)}
-          className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700"
-        >
-          + Datenpanne melden
-        </button>
-      </div>
-
-      {/* Add Incident Form */}
-      {showAdd && (
-        <div className="bg-white rounded-lg border p-6 space-y-4">
-          <h4 className="font-medium">Neue Datenpanne erfassen</h4>
-          <div className="grid grid-cols-2 gap-4">
-            <div className="col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
-              <input
-                type="text"
-                value={newIncident.title}
-                onChange={e => setNewIncident(prev => ({ ...prev, title: e.target.value }))}
-                placeholder="Kurzbeschreibung der Datenpanne"
-                className="w-full border rounded px-3 py-2 text-sm"
-              />
-            </div>
-            <div className="col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
-              <textarea
-                value={newIncident.description}
-                onChange={e => setNewIncident(prev => ({ ...prev, description: e.target.value }))}
-                placeholder="Detaillierte Beschreibung: Was ist passiert, wie wurde es entdeckt?"
-                rows={3}
-                className="w-full border rounded px-3 py-2 text-sm"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
-              <select
-                value={newIncident.severity}
-                onChange={e => setNewIncident(prev => ({ ...prev, severity: e.target.value as IncidentSeverity }))}
-                className="w-full border rounded px-3 py-2 text-sm"
-              >
-                <option value="low">Niedrig</option>
-                <option value="medium">Mittel</option>
-                <option value="high">Hoch</option>
-                <option value="critical">Kritisch</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Geschaetzte Betroffene</label>
-              <input
-                type="number"
-                value={newIncident.estimatedAffectedPersons}
-                onChange={e => setNewIncident(prev => ({ ...prev, estimatedAffectedPersons: parseInt(e.target.value) || 0 }))}
-                className="w-full border rounded px-3 py-2 text-sm"
-              />
-            </div>
-            <div className="col-span-2 flex items-center gap-2">
-              <input
-                type="checkbox"
-                checked={newIncident.art34Required}
-                onChange={e => setNewIncident(prev => ({ ...prev, art34Required: e.target.checked }))}
-                className="rounded"
-              />
-              <label className="text-sm">Hohes Risiko fuer Betroffene (Art. 34 Benachrichtigungspflicht)</label>
-            </div>
-          </div>
-          <div className="flex gap-2 justify-end">
-            <button
-              onClick={() => setShowAdd(false)}
-              className="px-4 py-2 border rounded-lg text-sm"
-            >
-              Abbrechen
-            </button>
-            <button
-              onClick={addIncident}
-              disabled={!newIncident.title}
-              className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50"
-            >
-              Datenpanne erfassen
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Incidents List */}
-      {incidents.length === 0 ? (
-        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
-          <p className="text-lg mb-2">Keine Datenpannen erfasst</p>
-          <p className="text-sm">Dokumentieren Sie hier alle Datenpannen — auch solche, die nicht meldepflichtig sind (Art. 33 Abs. 5).</p>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {incidents.map(incident => (
-            <div key={incident.id} className="bg-white rounded-lg border p-6">
-              <div className="flex items-start justify-between mb-3">
-                <div>
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-xs text-gray-500 font-mono">{incident.id}</span>
-                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${INCIDENT_STATUS_COLORS[incident.status]}`}>
-                      {INCIDENT_STATUS_LABELS[incident.status]}
-                    </span>
-                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${SEVERITY_COLORS[incident.severity]}`}>
-                      {SEVERITY_LABELS[incident.severity]}
-                    </span>
-                    {incident.art34Required && (
-                      <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                        Art. 34
-                      </span>
-                    )}
-                  </div>
-                  <h4 className="font-medium">{incident.title}</h4>
-                </div>
-                {incident.status !== 'closed' && incident.status !== 'reported' && incident.status !== 'not_reportable' && (
-                  <CountdownTimer detectedAt={incident.detectedAt} />
-                )}
-              </div>
-              <p className="text-sm text-gray-600 mb-3">{incident.description}</p>
-              <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
-                <span>Entdeckt: {new Date(incident.detectedAt).toLocaleString('de-DE')}</span>
-                <span>Betroffene: ~{incident.estimatedAffectedPersons}</span>
-                {incident.reportedToAuthorityAt && (
-                  <span>Gemeldet: {new Date(incident.reportedToAuthorityAt).toLocaleString('de-DE')}</span>
-                )}
-              </div>
-              {incident.status !== 'closed' && (
-                <div className="flex gap-2">
-                  {incident.status === 'detected' && (
-                    <button onClick={() => updateStatus(incident.id, 'classified')} className="text-xs px-3 py-1 bg-yellow-100 text-yellow-800 rounded hover:bg-yellow-200">
-                      Klassifizieren
-                    </button>
-                  )}
-                  {incident.status === 'classified' && (
-                    <button onClick={() => updateStatus(incident.id, 'assessed')} className="text-xs px-3 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200">
-                      Bewerten
-                    </button>
-                  )}
-                  {incident.status === 'assessed' && (
-                    <>
-                      <button onClick={() => updateStatus(incident.id, 'reported')} className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200">
-                        Als gemeldet markieren
-                      </button>
-                      <button onClick={() => updateStatus(incident.id, 'not_reportable')} className="text-xs px-3 py-1 bg-gray-100 text-gray-800 rounded hover:bg-gray-200">
-                        Nicht meldepflichtig
-                      </button>
-                    </>
-                  )}
-                  {(incident.status === 'reported' || incident.status === 'not_reportable') && (
-                    <button onClick={() => updateStatus(incident.id, 'closed')} className="text-xs px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
-                      Abschliessen
-                    </button>
-                  )}
-                  {onDelete && (
-                    <button
-                      onClick={() => { if (window.confirm('Incident loeschen?')) onDelete(incident.id) }}
-                      className="text-xs px-2 py-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded ml-auto"
-                    >
-                      Loeschen
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// =============================================================================
-// TAB 3: Melde-Templates
-// =============================================================================
-
-function TemplatesTab({
-  templates,
-  setTemplates,
-  onSave,
-}: {
-  templates: MeldeTemplate[]
-  setTemplates: React.Dispatch<React.SetStateAction<MeldeTemplate[]>>
-  onSave?: (template: MeldeTemplate) => Promise<void>
-}) {
-  const [saving, setSaving] = useState<string | null>(null)
-
-  async function handleSave(template: MeldeTemplate) {
-    if (!onSave) return
-    setSaving(template.id)
-    try {
-      await onSave(template)
-    } finally {
-      setSaving(null)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h3 className="text-lg font-semibold">Melde-Templates</h3>
-        <p className="text-sm text-gray-500">
-          Vorlagen fuer Meldungen an die Aufsichtsbehoerde (Art. 33) und Benachrichtigung Betroffener (Art. 34).
-        </p>
-      </div>
-
-      {templates.map(template => (
-        <div key={template.id} className="bg-white rounded-lg border p-6">
-          <div className="flex items-center justify-between mb-3">
-            <div className="flex items-center gap-2">
-              <span className={`px-2 py-1 rounded text-xs font-bold ${
-                template.type === 'art33'
-                  ? 'bg-blue-100 text-blue-800'
-                  : 'bg-purple-100 text-purple-800'
-              }`}>
-                {template.type === 'art33' ? 'Art. 33' : 'Art. 34'}
-              </span>
-              <h4 className="font-medium">{template.title}</h4>
-            </div>
-            {onSave && (
-              <button
-                onClick={() => handleSave(template)}
-                disabled={saving === template.id}
-                className="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
-              >
-                {saving === template.id ? 'Gespeichert...' : 'Speichern'}
-              </button>
-            )}
-          </div>
-          <textarea
-            value={template.content}
-            onChange={e => {
-              setTemplates(prev => prev.map(t =>
-                t.id === template.id ? { ...t, content: e.target.value } : t
-              ))
-            }}
-            rows={12}
-            className="w-full border rounded px-3 py-2 text-sm font-mono"
-          />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// =============================================================================
-// TAB 4: Uebungen & Tests
-// =============================================================================
-
-function ExercisesTab({
-  exercises,
-  setExercises,
-  showAdd,
-  setShowAdd,
-}: {
-  exercises: Exercise[]
-  setExercises: React.Dispatch<React.SetStateAction<Exercise[]>>
-  showAdd: boolean
-  setShowAdd: (v: boolean) => void
-}) {
-  const [newExercise, setNewExercise] = useState<Partial<Exercise>>({
-    title: '',
-    type: 'tabletop',
-    scenario: '',
-    scheduledDate: '',
-    participants: [],
-    lessonsLearned: '',
-  })
-
-  const SCENARIO_PRESETS = [
-    { label: 'Ransomware-Angriff', scenario: 'Ein Ransomware-Angriff verschluesselt saemtliche Produktivdaten. Backups sind vorhanden, aber der letzte Restore-Test liegt 6 Monate zurueck.' },
-    { label: 'Datenabfluss durch Mitarbeiter', scenario: 'Ein ausscheidender Mitarbeiter hat vor seinem letzten Arbeitstag umfangreiche Kundendaten auf einen privaten USB-Stick kopiert.' },
-    { label: 'Cloud-Provider-Ausfall', scenario: 'Ihr primaerer Cloud-Provider meldet einen groesseren Ausfall. Die Wiederherstellungszeit ist unbekannt. Betroffene koennen keine DSGVO-Rechte ausueben.' },
-    { label: 'Phishing-Angriff', scenario: 'Mehrere Mitarbeiter haben auf einen Phishing-Link geklickt. Es besteht Verdacht, dass Anmeldedaten kompromittiert wurden und auf Personaldaten zugegriffen wurde.' },
-  ]
-
-  function addExercise() {
-    if (!newExercise.title || !newExercise.scheduledDate) return
-    const exercise: Exercise = {
-      id: `EX-${Date.now()}`,
-      title: newExercise.title || '',
-      type: (newExercise.type as Exercise['type']) || 'tabletop',
-      scenario: newExercise.scenario || '',
-      scheduledDate: newExercise.scheduledDate || '',
-      participants: newExercise.participants || [],
-      lessonsLearned: '',
-    }
-    setExercises(prev => [...prev, exercise])
-    setShowAdd(false)
-    setNewExercise({ title: '', type: 'tabletop', scenario: '', scheduledDate: '', participants: [], lessonsLearned: '' })
-  }
-
-  function completeExercise(id: string, lessonsLearned: string) {
-    setExercises(prev => prev.map(ex =>
-      ex.id === id
-        ? { ...ex, completedDate: new Date().toISOString(), lessonsLearned }
-        : ex
-    ))
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">Notfalluebungen & Tests</h3>
-          <p className="text-sm text-gray-500">Planen und dokumentieren Sie regelmaessige Notfalluebungen.</p>
-        </div>
-        <button
-          onClick={() => setShowAdd(true)}
-          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
-        >
-          + Uebung planen
-        </button>
-      </div>
-
-      {/* Add Exercise Form */}
-      {showAdd && (
-        <div className="bg-white rounded-lg border p-6 space-y-4">
-          <h4 className="font-medium">Neue Uebung planen</h4>
-          <div className="grid grid-cols-2 gap-4">
-            <div className="col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
-              <input
-                type="text"
-                value={newExercise.title}
-                onChange={e => setNewExercise(prev => ({ ...prev, title: e.target.value }))}
-                placeholder="z.B. Tabletop: Ransomware-Angriff"
-                className="w-full border rounded px-3 py-2 text-sm"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
-              <select
-                value={newExercise.type}
-                onChange={e => setNewExercise(prev => ({ ...prev, type: e.target.value as Exercise['type'] }))}
-                className="w-full border rounded px-3 py-2 text-sm"
-              >
-                <option value="tabletop">Tabletop-Uebung</option>
-                <option value="simulation">Simulation</option>
-                <option value="full_drill">Vollstaendige Uebung</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Geplantes Datum</label>
-              <input
-                type="date"
-                value={newExercise.scheduledDate}
-                onChange={e => setNewExercise(prev => ({ ...prev, scheduledDate: e.target.value }))}
-                className="w-full border rounded px-3 py-2 text-sm"
-              />
-            </div>
-            <div className="col-span-2">
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Szenario
-                <span className="text-gray-400 font-normal ml-2">oder Vorlage waehlen:</span>
-              </label>
-              <div className="flex flex-wrap gap-2 mb-2">
-                {SCENARIO_PRESETS.map(preset => (
-                  <button
-                    key={preset.label}
-                    onClick={() => setNewExercise(prev => ({
-                      ...prev,
-                      scenario: preset.scenario,
-                      title: prev.title || `Tabletop: ${preset.label}`,
-                    }))}
-                    className="text-xs px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200"
-                  >
-                    {preset.label}
-                  </button>
-                ))}
-              </div>
-              <textarea
-                value={newExercise.scenario}
-                onChange={e => setNewExercise(prev => ({ ...prev, scenario: e.target.value }))}
-                placeholder="Beschreiben Sie das Uebungsszenario..."
-                rows={3}
-                className="w-full border rounded px-3 py-2 text-sm"
-              />
-            </div>
-          </div>
-          <div className="flex gap-2 justify-end">
-            <button onClick={() => setShowAdd(false)} className="px-4 py-2 border rounded-lg text-sm">
-              Abbrechen
-            </button>
-            <button
-              onClick={addExercise}
-              disabled={!newExercise.title || !newExercise.scheduledDate}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
-            >
-              Uebung planen
-            </button>
-          </div>
-        </div>
-      )}
-
-      {/* Exercises List */}
-      {exercises.length === 0 ? (
-        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
-          <p className="text-lg mb-2">Keine Uebungen geplant</p>
-          <p className="text-sm">Regelmaessige Notfalluebungen sind essentiell fuer ein funktionierendes Datenpannen-Management.</p>
-        </div>
-      ) : (
-        <div className="space-y-4">
-          {exercises.map(exercise => (
-            <div key={exercise.id} className="bg-white rounded-lg border p-6">
-              <div className="flex items-center gap-2 mb-2">
-                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
-                  exercise.completedDate ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
-                }`}>
-                  {exercise.completedDate ? 'Abgeschlossen' : 'Geplant'}
-                </span>
-                <span className="text-xs text-gray-500 capitalize">
-                  {exercise.type === 'tabletop' ? 'Tabletop' : exercise.type === 'simulation' ? 'Simulation' : 'Vollstaendige Uebung'}
-                </span>
-              </div>
-              <h4 className="font-medium mb-1">{exercise.title}</h4>
-              <p className="text-sm text-gray-600 mb-2">{exercise.scenario}</p>
-              <div className="flex items-center gap-4 text-xs text-gray-500">
-                <span>Geplant: {new Date(exercise.scheduledDate).toLocaleDateString('de-DE')}</span>
-                {exercise.completedDate && (
-                  <span>Durchgefuehrt: {new Date(exercise.completedDate).toLocaleDateString('de-DE')}</span>
-                )}
-              </div>
-              {exercise.lessonsLearned && (
-                <div className="mt-3 p-3 bg-blue-50 rounded text-sm">
-                  <span className="font-medium text-blue-800">Lessons Learned:</span>
-                  <p className="text-blue-700 mt-1">{exercise.lessonsLearned}</p>
-                </div>
-              )}
-              {!exercise.completedDate && (
-                <div className="mt-3">
-                  <button
-                    onClick={() => {
-                      const lessons = prompt('Lessons Learned aus der Uebung:')
-                      if (lessons !== null) {
-                        completeExercise(exercise.id, lessons)
-                      }
-                    }}
-                    className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200"
-                  >
-                    Als durchgefuehrt markieren
-                  </button>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}