diff --git a/admin-compliance/app/sdk/loeschfristen/_components/EditorSections.tsx b/admin-compliance/app/sdk/loeschfristen/_components/EditorSections.tsx
index 77a53e7..7f2266b 100644
--- a/admin-compliance/app/sdk/loeschfristen/_components/EditorSections.tsx
+++ b/admin-compliance/app/sdk/loeschfristen/_components/EditorSections.tsx
@@ -370,18 +370,18 @@ export function VVTLinkSection({
             Verknuepfen Sie diese Loeschfrist mit einer Verarbeitungstaetigkeit aus Ihrem VVT.
           </p>
           <div className="space-y-2">
-            {policy.linkedVvtIds && policy.linkedVvtIds.length > 0 && (
+            {policy.linkedVVTActivityIds && policy.linkedVVTActivityIds.length > 0 && (
               <div className="mb-3">
                 <label className="block text-xs font-medium text-gray-500 mb-1">Verknuepfte Taetigkeiten:</label>
                 <div className="flex flex-wrap gap-1">
-                  {policy.linkedVvtIds.map((vvtId: string) => {
+                  {policy.linkedVVTActivityIds.map((vvtId: string) => {
                     const activity = vvtActivities.find((a: any) => a.id === vvtId)
                     return (
                       <span key={vvtId} className="inline-flex items-center gap-1 bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full">
                         {activity?.name || vvtId}
                         <button type="button"
                           onClick={() => updatePolicy(pid, (p) => ({
-                            ...p, linkedVvtIds: (p.linkedVvtIds || []).filter((id: string) => id !== vvtId),
+                            ...p, linkedVVTActivityIds: (p.linkedVVTActivityIds || []).filter((id: string) => id !== vvtId),
                           }))}
                           className="text-blue-600 hover:text-blue-900">x</button>
                       </span>
@@ -393,15 +393,15 @@ export function VVTLinkSection({
             <select
               onChange={(e) => {
                 const val = e.target.value
-                if (val && !(policy.linkedVvtIds || []).includes(val)) {
-                  updatePolicy(pid, (p) => ({ ...p, linkedVvtIds: [...(p.linkedVvtIds || []), val] }))
+                if (val && !(policy.linkedVVTActivityIds || []).includes(val)) {
+                  updatePolicy(pid, (p) => ({ ...p, linkedVVTActivityIds: [...(p.linkedVVTActivityIds || []), val] }))
                 }
                 e.target.value = ''
               }}
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
               <option value="">Verarbeitungstaetigkeit verknuepfen...</option>
               {vvtActivities
-                .filter((a: any) => !(policy.linkedVvtIds || []).includes(a.id))
+                .filter((a: any) => !(policy.linkedVVTActivityIds || []).includes(a.id))
                 .map((a: any) => (<option key={a.id} value={a.id}>{a.name || a.id}</option>))}
             </select>
           </div>
@@ -415,6 +415,70 @@ export function VVTLinkSection({
   )
 }
 
+// ---------------------------------------------------------------------------
+// Sektion 5b: Auftragsverarbeiter-Verknuepfung
+// ---------------------------------------------------------------------------
+
+export function VendorLinkSection({
+  policy, pid, vendorList, updatePolicy,
+}: {
+  policy: LoeschfristPolicy; pid: string; vendorList: Array<{id: string; name: string}>
+  updatePolicy: (id: string, updater: (p: LoeschfristPolicy) => LoeschfristPolicy) => void
+}) {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
+      <h3 className="text-lg font-semibold text-gray-900">5b. Verknuepfte Auftragsverarbeiter</h3>
+      {vendorList.length > 0 ? (
+        <div>
+          <p className="text-sm text-gray-500 mb-3">
+            Verknuepfen Sie diese Loeschfrist mit relevanten Auftragsverarbeitern.
+          </p>
+          <div className="space-y-2">
+            {policy.linkedVendorIds && policy.linkedVendorIds.length > 0 && (
+              <div className="mb-3">
+                <label className="block text-xs font-medium text-gray-500 mb-1">Verknuepfte Auftragsverarbeiter:</label>
+                <div className="flex flex-wrap gap-1">
+                  {policy.linkedVendorIds.map((vendorId: string) => {
+                    const vendor = vendorList.find((v) => v.id === vendorId)
+                    return (
+                      <span key={vendorId} className="inline-flex items-center gap-1 bg-orange-100 text-orange-800 text-xs font-medium px-2 py-0.5 rounded-full">
+                        {vendor?.name || vendorId}
+                        <button type="button"
+                          onClick={() => updatePolicy(pid, (p) => ({
+                            ...p, linkedVendorIds: (p.linkedVendorIds || []).filter((id: string) => id !== vendorId),
+                          }))}
+                          className="text-orange-600 hover:text-orange-900">x</button>
+                      </span>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+            <select
+              onChange={(e) => {
+                const val = e.target.value
+                if (val && !(policy.linkedVendorIds || []).includes(val)) {
+                  updatePolicy(pid, (p) => ({ ...p, linkedVendorIds: [...(p.linkedVendorIds || []), val] }))
+                }
+                e.target.value = ''
+              }}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
+              <option value="">Auftragsverarbeiter verknuepfen...</option>
+              {vendorList
+                .filter((v) => !(policy.linkedVendorIds || []).includes(v.id))
+                .map((v) => (<option key={v.id} value={v.id}>{v.name || v.id}</option>))}
+            </select>
+          </div>
+        </div>
+      ) : (
+        <p className="text-sm text-gray-400">
+          Keine Auftragsverarbeiter gefunden. Erstellen Sie zuerst Auftragsverarbeiter im Vendor-Compliance-Modul, um hier Verknuepfungen herstellen zu koennen.
+        </p>
+      )}
+    </div>
+  )
+}
+
 // ---------------------------------------------------------------------------
 // Sektion 6: Review-Einstellungen
 // ---------------------------------------------------------------------------
diff --git a/admin-compliance/app/sdk/loeschfristen/_components/EditorTab.tsx b/admin-compliance/app/sdk/loeschfristen/_components/EditorTab.tsx
index d3191e3..5515d7d 100644
--- a/admin-compliance/app/sdk/loeschfristen/_components/EditorTab.tsx
+++ b/admin-compliance/app/sdk/loeschfristen/_components/EditorTab.tsx
@@ -7,7 +7,7 @@ import {
 import { renderStatusBadge } from './UebersichtTab'
 import {
   DataObjectSection, DeletionLogicSection, StorageSection,
-  ResponsibilitySection, VVTLinkSection, ReviewSection,
+  ResponsibilitySection, VVTLinkSection, VendorLinkSection, ReviewSection,
 } from './EditorSections'
 
 // ---------------------------------------------------------------------------
@@ -19,6 +19,7 @@ interface EditorTabProps {
   editingId: string | null
   editingPolicy: LoeschfristPolicy | null
   vvtActivities: any[]
+  vendorList: Array<{id: string; name: string}>
   saving: boolean
   setEditingId: (id: string | null) => void
   setTab: (tab: 'uebersicht' | 'editor' | 'generator' | 'export') => void
@@ -79,7 +80,7 @@ function EditorNoSelection({
 // ---------------------------------------------------------------------------
 
 function EditorForm({
-  policy, vvtActivities, saving, setEditingId, setTab,
+  policy, vvtActivities, vendorList, saving, setEditingId, setTab,
   updatePolicy, deletePolicy, addLegalHold, removeLegalHold,
   addStorageLocation, removeStorageLocation, handleSaveAndClose,
 }: Omit<EditorTabProps, 'policies' | 'editingId' | 'editingPolicy' | 'createNewPolicy'> & {
@@ -127,6 +128,7 @@ function EditorForm({
         addStorageLocation={addStorageLocation} removeStorageLocation={removeStorageLocation} />
       <ResponsibilitySection policy={policy} set={set} />
       <VVTLinkSection policy={policy} pid={pid} vvtActivities={vvtActivities} updatePolicy={updatePolicy} />
+      <VendorLinkSection policy={policy} pid={pid} vendorList={vendorList} updatePolicy={updatePolicy} />
       <ReviewSection policy={policy} set={set} />
 
       {/* Action buttons */}
diff --git a/admin-compliance/app/sdk/loeschfristen/_components/LoeschkonzeptTab.tsx b/admin-compliance/app/sdk/loeschfristen/_components/LoeschkonzeptTab.tsx
new file mode 100644
index 0000000..1806173
--- /dev/null
+++ b/admin-compliance/app/sdk/loeschfristen/_components/LoeschkonzeptTab.tsx
@@ -0,0 +1,257 @@
+'use client'
+
+import React from 'react'
+import { LoeschfristPolicy } from '@/lib/sdk/loeschfristen-types'
+import { ComplianceCheckResult } from '@/lib/sdk/loeschfristen-compliance'
+import {
+  buildLoeschkonzeptHtml,
+  type LoeschkonzeptOrgHeader,
+  type LoeschkonzeptRevision,
+} from '@/lib/sdk/loeschfristen-document'
+import { downloadFile } from '@/lib/sdk/loeschfristen-export'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface LoeschkonzeptTabProps {
+  policies: LoeschfristPolicy[]
+  orgHeader: LoeschkonzeptOrgHeader
+  revisions: LoeschkonzeptRevision[]
+  complianceResult: ComplianceCheckResult | null
+  vvtActivities: any[]
+  onOrgHeaderChange: (field: keyof LoeschkonzeptOrgHeader, value: string | string[]) => void
+  onAddRevision: () => void
+  onUpdateRevision: (index: number, field: keyof LoeschkonzeptRevision, value: string) => void
+  onRemoveRevision: (index: number) => void
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function LoeschkonzeptTab({
+  policies,
+  orgHeader,
+  revisions,
+  complianceResult,
+  vvtActivities,
+  onOrgHeaderChange,
+  onAddRevision,
+  onUpdateRevision,
+  onRemoveRevision,
+}: LoeschkonzeptTabProps) {
+  const activePolicies = policies.filter(p => p.status !== 'ARCHIVED')
+
+  function handlePrintLoeschkonzept() {
+    const htmlContent = buildLoeschkonzeptHtml(policies, orgHeader, vvtActivities, complianceResult, revisions)
+    const printWindow = window.open('', '_blank')
+    if (printWindow) {
+      printWindow.document.write(htmlContent)
+      printWindow.document.close()
+      printWindow.focus()
+      setTimeout(() => printWindow.print(), 300)
+    }
+  }
+
+  function handleDownloadLoeschkonzeptHtml() {
+    const htmlContent = buildLoeschkonzeptHtml(policies, orgHeader, vvtActivities, complianceResult, revisions)
+    downloadFile(htmlContent, `loeschkonzept-${new Date().toISOString().split('T')[0]}.html`, 'text/html;charset=utf-8')
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Action bar */}
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">
+              Loeschkonzept (Art. 5/17/30 DSGVO)
+            </h3>
+            <p className="text-sm text-gray-500 mt-0.5">
+              Druckfertiges Loeschkonzept mit Deckblatt, Loeschregeln, VVT-Verknuepfung und Compliance-Status.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleDownloadLoeschkonzeptHtml}
+              disabled={activePolicies.length === 0}
+              className="bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg px-4 py-2 text-sm font-medium transition flex items-center gap-1.5"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
+              HTML herunterladen
+            </button>
+            <button
+              onClick={handlePrintLoeschkonzept}
+              disabled={activePolicies.length === 0}
+              className="bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg px-4 py-2 text-sm font-medium transition flex items-center gap-1.5"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" /></svg>
+              Als PDF drucken
+            </button>
+          </div>
+        </div>
+
+        {activePolicies.length === 0 && (
+          <div className="bg-yellow-50 text-yellow-700 text-sm rounded-lg p-3 border border-yellow-200">
+            Keine aktiven Policies vorhanden. Erstellen Sie mindestens eine Policy, um das Loeschkonzept zu generieren.
+          </div>
+        )}
+      </div>
+
+      {/* Org Header Form */}
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h4 className="text-sm font-semibold text-gray-900 mb-4">Organisationsdaten (Deckblatt)</h4>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Organisation</label>
+            <input type="text" value={orgHeader.organizationName}
+              onChange={e => onOrgHeaderChange('organizationName', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="Name der Organisation" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Branche</label>
+            <input type="text" value={orgHeader.industry}
+              onChange={e => onOrgHeaderChange('industry', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="z.B. IT / Software" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Datenschutzbeauftragter</label>
+            <input type="text" value={orgHeader.dpoName}
+              onChange={e => onOrgHeaderChange('dpoName', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="Name des DSB" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">DSB-Kontakt</label>
+            <input type="text" value={orgHeader.dpoContact}
+              onChange={e => onOrgHeaderChange('dpoContact', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="E-Mail oder Telefon" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Verantwortlicher (Art. 4 Nr. 7)</label>
+            <input type="text" value={orgHeader.responsiblePerson}
+              onChange={e => onOrgHeaderChange('responsiblePerson', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="Name des Verantwortlichen" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Mitarbeiter</label>
+            <input type="text" value={orgHeader.employeeCount}
+              onChange={e => onOrgHeaderChange('employeeCount', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="z.B. 50-249" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Version</label>
+            <input type="text" value={orgHeader.loeschkonzeptVersion}
+              onChange={e => onOrgHeaderChange('loeschkonzeptVersion', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="1.0" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Pruefintervall</label>
+            <select value={orgHeader.reviewInterval}
+              onChange={e => onOrgHeaderChange('reviewInterval', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
+              <option value="Vierteljaehrlich">Vierteljaehrlich</option>
+              <option value="Halbjaehrlich">Halbjaehrlich</option>
+              <option value="Jaehrlich">Jaehrlich</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Letzte Pruefung</label>
+            <input type="date" value={orgHeader.lastReviewDate}
+              onChange={e => onOrgHeaderChange('lastReviewDate', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500" />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-600 mb-1">Naechste Pruefung</label>
+            <input type="date" value={orgHeader.nextReviewDate}
+              onChange={e => onOrgHeaderChange('nextReviewDate', e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500" />
+          </div>
+        </div>
+      </div>
+
+      {/* Revisions */}
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h4 className="text-sm font-semibold text-gray-900">Aenderungshistorie</h4>
+          <button onClick={onAddRevision}
+            className="text-xs bg-purple-50 text-purple-700 hover:bg-purple-100 rounded-lg px-3 py-1.5 font-medium transition">
+            + Revision hinzufuegen
+          </button>
+        </div>
+        {revisions.length === 0 ? (
+          <p className="text-sm text-gray-400">
+            Noch keine Revisionen. Die Erstversion wird automatisch im Dokument eingefuegt.
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {revisions.map((rev, idx) => (
+              <div key={idx} className="grid grid-cols-[80px_120px_1fr_1fr_32px] gap-2 items-start">
+                <input type="text" value={rev.version}
+                  onChange={e => onUpdateRevision(idx, 'version', e.target.value)}
+                  className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs" placeholder="1.1" />
+                <input type="date" value={rev.date}
+                  onChange={e => onUpdateRevision(idx, 'date', e.target.value)}
+                  className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs" />
+                <input type="text" value={rev.author}
+                  onChange={e => onUpdateRevision(idx, 'author', e.target.value)}
+                  className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs" placeholder="Autor" />
+                <input type="text" value={rev.changes}
+                  onChange={e => onUpdateRevision(idx, 'changes', e.target.value)}
+                  className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs" placeholder="Beschreibung der Aenderungen" />
+                <button onClick={() => onRemoveRevision(idx)}
+                  className="text-red-400 hover:text-red-600 p-1" title="Revision entfernen">
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
+
+      {/* Document Preview */}
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <h4 className="text-sm font-semibold text-gray-900 mb-4">Dokument-Vorschau</h4>
+        <div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
+          <div className="text-center mb-6">
+            <div className="text-2xl font-bold text-purple-700 mb-1">Loeschkonzept</div>
+            <div className="text-sm text-purple-500 mb-4">gemaess Art. 5/17/30 DSGVO</div>
+            <div className="text-sm text-gray-600">
+              {orgHeader.organizationName || <span className="text-gray-400 italic">Organisation nicht angegeben</span>}
+            </div>
+            <div className="text-xs text-gray-400 mt-2">
+              Version {orgHeader.loeschkonzeptVersion} | {new Date().toLocaleDateString('de-DE')}
+            </div>
+          </div>
+          <div className="border-t border-gray-200 pt-4">
+            <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">12 Sektionen</div>
+            <div className="grid grid-cols-2 gap-1 text-xs text-gray-600">
+              <div>1. Ziel und Zweck</div><div>7. Auftragsverarbeiter</div>
+              <div>2. Geltungsbereich</div><div>8. Legal Hold Verfahren</div>
+              <div>3. Grundprinzipien</div><div>9. Verantwortlichkeiten</div>
+              <div>4. Loeschregeln-Uebersicht</div><div>10. Pruef-/Revisionszyklus</div>
+              <div>5. Detaillierte Loeschregeln</div><div>11. Compliance-Status</div>
+              <div>6. VVT-Verknuepfung</div><div>12. Aenderungshistorie</div>
+            </div>
+          </div>
+          <div className="border-t border-gray-200 pt-4 mt-4 flex gap-6 text-xs text-gray-500">
+            <span><strong className="text-gray-700">{activePolicies.length}</strong> Loeschregeln</span>
+            <span><strong className="text-gray-700">{policies.filter(p => p.linkedVVTActivityIds.length > 0).length}</strong> VVT-Verknuepfungen</span>
+            <span><strong className="text-gray-700">{policies.filter(p => p.linkedVendorIds.length > 0).length}</strong> Vendor-Verknuepfungen</span>
+            <span><strong className="text-gray-700">{revisions.length}</strong> Revisionen</span>
+            {complianceResult && (
+              <span>Compliance-Score: <strong className={complianceResult.score >= 75 ? 'text-green-600' : complianceResult.score >= 50 ? 'text-yellow-600' : 'text-red-600'}>{complianceResult.score}/100</strong></span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/loeschfristen/_components/api.ts b/admin-compliance/app/sdk/loeschfristen/_components/api.ts
new file mode 100644
index 0000000..0eb1355
--- /dev/null
+++ b/admin-compliance/app/sdk/loeschfristen/_components/api.ts
@@ -0,0 +1,74 @@
+import { LoeschfristPolicy, createEmptyPolicy } from '@/lib/sdk/loeschfristen-types'
+
+export const LOESCHFRISTEN_API = '/api/sdk/v1/compliance/loeschfristen'
+
+export function apiToPolicy(raw: any): LoeschfristPolicy {
+  const base = createEmptyPolicy()
+  return {
+    ...base,
+    id: raw.id,
+    policyId: raw.policy_id || base.policyId,
+    dataObjectName: raw.data_object_name || '',
+    description: raw.description || '',
+    affectedGroups: raw.affected_groups || [],
+    dataCategories: raw.data_categories || [],
+    primaryPurpose: raw.primary_purpose || '',
+    deletionTrigger: raw.deletion_trigger || 'PURPOSE_END',
+    retentionDriver: raw.retention_driver || null,
+    retentionDriverDetail: raw.retention_driver_detail || '',
+    retentionDuration: raw.retention_duration ?? null,
+    retentionUnit: raw.retention_unit || null,
+    retentionDescription: raw.retention_description || '',
+    startEvent: raw.start_event || '',
+    hasActiveLegalHold: raw.has_active_legal_hold || false,
+    legalHolds: raw.legal_holds || [],
+    storageLocations: raw.storage_locations || [],
+    deletionMethod: raw.deletion_method || 'MANUAL_REVIEW_DELETE',
+    deletionMethodDetail: raw.deletion_method_detail || '',
+    responsibleRole: raw.responsible_role || '',
+    responsiblePerson: raw.responsible_person || '',
+    releaseProcess: raw.release_process || '',
+    linkedVVTActivityIds: raw.linked_vvt_activity_ids || [],
+    linkedVendorIds: raw.linked_vendor_ids || [],
+    status: raw.status || 'DRAFT',
+    lastReviewDate: raw.last_review_date || base.lastReviewDate,
+    nextReviewDate: raw.next_review_date || base.nextReviewDate,
+    reviewInterval: raw.review_interval || 'ANNUAL',
+    tags: raw.tags || [],
+    createdAt: raw.created_at || base.createdAt,
+    updatedAt: raw.updated_at || base.updatedAt,
+  }
+}
+
+export function policyToPayload(p: LoeschfristPolicy): any {
+  return {
+    policy_id: p.policyId,
+    data_object_name: p.dataObjectName,
+    description: p.description,
+    affected_groups: p.affectedGroups,
+    data_categories: p.dataCategories,
+    primary_purpose: p.primaryPurpose,
+    deletion_trigger: p.deletionTrigger,
+    retention_driver: p.retentionDriver || null,
+    retention_driver_detail: p.retentionDriverDetail,
+    retention_duration: p.retentionDuration || null,
+    retention_unit: p.retentionUnit || null,
+    retention_description: p.retentionDescription,
+    start_event: p.startEvent,
+    has_active_legal_hold: p.hasActiveLegalHold,
+    legal_holds: p.legalHolds,
+    storage_locations: p.storageLocations,
+    deletion_method: p.deletionMethod,
+    deletion_method_detail: p.deletionMethodDetail,
+    responsible_role: p.responsibleRole,
+    responsible_person: p.responsiblePerson,
+    release_process: p.releaseProcess,
+    linked_vvt_activity_ids: p.linkedVVTActivityIds,
+    linked_vendor_ids: p.linkedVendorIds,
+    status: p.status,
+    last_review_date: p.lastReviewDate || null,
+    next_review_date: p.nextReviewDate || null,
+    review_interval: p.reviewInterval,
+    tags: p.tags,
+  }
+}
diff --git a/admin-compliance/app/sdk/loeschfristen/page.tsx b/admin-compliance/app/sdk/loeschfristen/page.tsx
index 0442258..dc82dcf 100644
--- a/admin-compliance/app/sdk/loeschfristen/page.tsx
+++ b/admin-compliance/app/sdk/loeschfristen/page.tsx
@@ -1,30 +1,29 @@
 'use client'
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react'
-import { useRouter } from 'next/navigation'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 import {
   LoeschfristPolicy,
-  createEmptyPolicy, createEmptyLegalHold, createEmptyStorageLocation,
+  createEmptyLegalHold, createEmptyStorageLocation,
   isPolicyOverdue, getActiveLegalHolds,
 } from '@/lib/sdk/loeschfristen-types'
 import {
-  PROFILING_STEPS, ProfilingAnswer, ProfilingStep,
+  PROFILING_STEPS, ProfilingAnswer,
   isStepComplete, getProfilingProgress, generatePoliciesFromProfile,
 } from '@/lib/sdk/loeschfristen-profiling'
-import {
-  runComplianceCheck, ComplianceCheckResult, ComplianceIssue,
-} from '@/lib/sdk/loeschfristen-compliance'
-import {
-  exportPoliciesAsJSON, exportPoliciesAsCSV,
-  generateComplianceSummary, downloadFile,
-} from '@/lib/sdk/loeschfristen-export'
+import { runComplianceCheck, ComplianceCheckResult } from '@/lib/sdk/loeschfristen-compliance'
 import {
   buildLoeschkonzeptHtml,
   type LoeschkonzeptOrgHeader,
   type LoeschkonzeptRevision,
   createDefaultLoeschkonzeptOrgHeader,
 } from '@/lib/sdk/loeschfristen-document'
+import { LOESCHFRISTEN_API, apiToPolicy, policyToPayload } from './_components/api'
+import { UebersichtTab } from './_components/UebersichtTab'
+import { EditorTab } from './_components/EditorTab'
+import { GeneratorTab } from './_components/GeneratorTab'
+import { ExportTab } from './_components/ExportTab'
+import { LoeschkonzeptTab } from './_components/LoeschkonzeptTab'
 
 // ---------------------------------------------------------------------------
 // Types
@@ -37,90 +36,14 @@ const TAB_CONFIG: { key: Tab; label: string }[] = [
   { key: 'editor', label: 'Editor' },
   { key: 'generator', label: 'Generator' },
   { key: 'export', label: 'Export & Compliance' },
+  { key: 'loeschkonzept', label: 'Loeschkonzept' },
 ]
 
-// ---------------------------------------------------------------------------
-// API helpers
-// ---------------------------------------------------------------------------
-
-const LOESCHFRISTEN_API = '/api/sdk/v1/compliance/loeschfristen'
-
-function apiToPolicy(raw: any): LoeschfristPolicy {
-  const base = createEmptyPolicy()
-  return {
-    ...base,
-    id: raw.id,
-    policyId: raw.policy_id || base.policyId,
-    dataObjectName: raw.data_object_name || '',
-    description: raw.description || '',
-    affectedGroups: raw.affected_groups || [],
-    dataCategories: raw.data_categories || [],
-    primaryPurpose: raw.primary_purpose || '',
-    deletionTrigger: raw.deletion_trigger || 'PURPOSE_END',
-    retentionDriver: raw.retention_driver || null,
-    retentionDriverDetail: raw.retention_driver_detail || '',
-    retentionDuration: raw.retention_duration ?? null,
-    retentionUnit: raw.retention_unit || null,
-    retentionDescription: raw.retention_description || '',
-    startEvent: raw.start_event || '',
-    hasActiveLegalHold: raw.has_active_legal_hold || false,
-    legalHolds: raw.legal_holds || [],
-    storageLocations: raw.storage_locations || [],
-    deletionMethod: raw.deletion_method || 'MANUAL_REVIEW_DELETE',
-    deletionMethodDetail: raw.deletion_method_detail || '',
-    responsibleRole: raw.responsible_role || '',
-    responsiblePerson: raw.responsible_person || '',
-    releaseProcess: raw.release_process || '',
-    linkedVVTActivityIds: raw.linked_vvt_activity_ids || [],
-    status: raw.status || 'DRAFT',
-    lastReviewDate: raw.last_review_date || base.lastReviewDate,
-    nextReviewDate: raw.next_review_date || base.nextReviewDate,
-    reviewInterval: raw.review_interval || 'ANNUAL',
-    tags: raw.tags || [],
-    createdAt: raw.created_at || base.createdAt,
-    updatedAt: raw.updated_at || base.updatedAt,
-  }
-}
-
-function policyToPayload(p: LoeschfristPolicy): any {
-  return {
-    policy_id: p.policyId,
-    data_object_name: p.dataObjectName,
-    description: p.description,
-    affected_groups: p.affectedGroups,
-    data_categories: p.dataCategories,
-    primary_purpose: p.primaryPurpose,
-    deletion_trigger: p.deletionTrigger,
-    retention_driver: p.retentionDriver || null,
-    retention_driver_detail: p.retentionDriverDetail,
-    retention_duration: p.retentionDuration || null,
-    retention_unit: p.retentionUnit || null,
-    retention_description: p.retentionDescription,
-    start_event: p.startEvent,
-    has_active_legal_hold: p.hasActiveLegalHold,
-    legal_holds: p.legalHolds,
-    storage_locations: p.storageLocations,
-    deletion_method: p.deletionMethod,
-    deletion_method_detail: p.deletionMethodDetail,
-    responsible_role: p.responsibleRole,
-    responsible_person: p.responsiblePerson,
-    release_process: p.releaseProcess,
-    linked_vvt_activity_ids: p.linkedVVTActivityIds,
-    status: p.status,
-    last_review_date: p.lastReviewDate || null,
-    next_review_date: p.nextReviewDate || null,
-    review_interval: p.reviewInterval,
-    tags: p.tags,
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Main Page
 // ---------------------------------------------------------------------------
 
 export default function LoeschfristenPage() {
-  const router = useRouter()
-
   // ---- Core state ----
   const [tab, setTab] = useState<Tab>('uebersicht')
   const [policies, setPolicies] = useState<LoeschfristPolicy[]>([])
@@ -153,100 +76,26 @@ export default function LoeschfristenPage() {
   const [revisions, setRevisions] = useState<LoeschkonzeptRevision[]>([])
 
   // --------------------------------------------------------------------------
-  // Persistence (API-backed)
+  // Data loading
   // --------------------------------------------------------------------------
 
   useEffect(() => {
+    async function loadPolicies() {
+      try {
+        const res = await fetch(`${LOESCHFRISTEN_API}?limit=500`)
+        if (res.ok) {
+          const data = await res.json()
+          const fetched = Array.isArray(data.policies) ? data.policies.map(apiToPolicy) : []
+          setPolicies(fetched)
+        }
+      } catch (e) {
+        console.error('Failed to load Loeschfristen from API:', e)
+      }
+      setLoaded(true)
+    }
     loadPolicies()
   }, [])
 
-  async function loadPolicies() {
-    try {
-      const res = await fetch(`${LOESCHFRISTEN_API}?limit=500`)
-      if (res.ok) {
-        const data = await res.json()
-        const fetched = Array.isArray(data.policies) ? data.policies.map(apiToPolicy) : []
-        setPolicies(fetched)
-      }
-    } catch (e) {
-      console.error('Failed to load Loeschfristen from API:', e)
-    }
-    setLoaded(true)
-  }
-
-  function apiToPolicy(raw: any): LoeschfristPolicy {
-    // Map snake_case API response to camelCase LoeschfristPolicy
-    const base = createEmptyPolicy()
-    return {
-      ...base,
-      id: raw.id,                                      // DB UUID — used for API calls
-      policyId: raw.policy_id || base.policyId,        // Display ID like "LF-2026-001"
-      dataObjectName: raw.data_object_name || '',
-      description: raw.description || '',
-      affectedGroups: raw.affected_groups || [],
-      dataCategories: raw.data_categories || [],
-      primaryPurpose: raw.primary_purpose || '',
-      deletionTrigger: raw.deletion_trigger || 'PURPOSE_END',
-      retentionDriver: raw.retention_driver || null,
-      retentionDriverDetail: raw.retention_driver_detail || '',
-      retentionDuration: raw.retention_duration ?? null,
-      retentionUnit: raw.retention_unit || null,
-      retentionDescription: raw.retention_description || '',
-      startEvent: raw.start_event || '',
-      hasActiveLegalHold: raw.has_active_legal_hold || false,
-      legalHolds: raw.legal_holds || [],
-      storageLocations: raw.storage_locations || [],
-      deletionMethod: raw.deletion_method || 'MANUAL_REVIEW_DELETE',
-      deletionMethodDetail: raw.deletion_method_detail || '',
-      responsibleRole: raw.responsible_role || '',
-      responsiblePerson: raw.responsible_person || '',
-      releaseProcess: raw.release_process || '',
-      linkedVVTActivityIds: raw.linked_vvt_activity_ids || [],
-      linkedVendorIds: raw.linked_vendor_ids || [],
-      status: raw.status || 'DRAFT',
-      lastReviewDate: raw.last_review_date || base.lastReviewDate,
-      nextReviewDate: raw.next_review_date || base.nextReviewDate,
-      reviewInterval: raw.review_interval || 'ANNUAL',
-      tags: raw.tags || [],
-      createdAt: raw.created_at || base.createdAt,
-      updatedAt: raw.updated_at || base.updatedAt,
-    }
-  }
-
-  function policyToPayload(p: LoeschfristPolicy): any {
-    return {
-      policy_id: p.policyId,
-      data_object_name: p.dataObjectName,
-      description: p.description,
-      affected_groups: p.affectedGroups,
-      data_categories: p.dataCategories,
-      primary_purpose: p.primaryPurpose,
-      deletion_trigger: p.deletionTrigger,
-      retention_driver: p.retentionDriver || null,
-      retention_driver_detail: p.retentionDriverDetail,
-      retention_duration: p.retentionDuration || null,
-      retention_unit: p.retentionUnit || null,
-      retention_description: p.retentionDescription,
-      start_event: p.startEvent,
-      has_active_legal_hold: p.hasActiveLegalHold,
-      legal_holds: p.legalHolds,
-      storage_locations: p.storageLocations,
-      deletion_method: p.deletionMethod,
-      deletion_method_detail: p.deletionMethodDetail,
-      responsible_role: p.responsibleRole,
-      responsible_person: p.responsiblePerson,
-      release_process: p.releaseProcess,
-      linked_vvt_activity_ids: p.linkedVVTActivityIds,
-      linked_vendor_ids: p.linkedVendorIds,
-      status: p.status,
-      last_review_date: p.lastReviewDate || null,
-      next_review_date: p.nextReviewDate || null,
-      review_interval: p.reviewInterval,
-      tags: p.tags,
-    }
-  }
-
-  // Load VVT activities from API
   useEffect(() => {
     fetch('/api/sdk/v1/compliance/vvt?limit=200')
       .then(res => res.ok ? res.json() : null)
@@ -264,7 +113,6 @@ export default function LoeschfristenPage() {
       })
   }, [tab, editingId])
 
-  // Load vendor list from API
   useEffect(() => {
     fetch('/api/sdk/v1/vendor-compliance/vendors?limit=500')
       .then(r => r.ok ? r.json() : null)
@@ -275,9 +123,7 @@ export default function LoeschfristenPage() {
       .catch(() => {})
   }, [])
 
-  // Load Loeschkonzept org header from VVT organization data + revisions from localStorage
   useEffect(() => {
-    // Load revisions from localStorage
     try {
       const raw = localStorage.getItem('bp_loeschkonzept_revisions')
       if (raw) {
@@ -286,19 +132,17 @@ export default function LoeschfristenPage() {
       }
     } catch { /* ignore */ }
 
-    // Load org header from localStorage (user overrides)
     try {
       const raw = localStorage.getItem('bp_loeschkonzept_orgheader')
       if (raw) {
         const parsed = JSON.parse(raw)
         if (parsed && typeof parsed === 'object') {
           setOrgHeader(prev => ({ ...prev, ...parsed }))
-          return // User has saved org header, skip VVT fetch
+          return
         }
       }
     } catch { /* ignore */ }
 
-    // Fallback: fetch from VVT organization API
     fetch('/api/sdk/v1/compliance/vvt/organization')
       .then(res => res.ok ? res.json() : null)
       .then(data => {
@@ -318,7 +162,7 @@ export default function LoeschfristenPage() {
   }, [])
 
   // --------------------------------------------------------------------------
-  // Derived
+  // Derived state
   // --------------------------------------------------------------------------
 
   const editingPolicy = useMemo(
@@ -482,1905 +326,13 @@ export default function LoeschfristenPage() {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editingPolicy])
 
-  // --------------------------------------------------------------------------
-  // Render
-  // --------------------------------------------------------------------------
-
-  const TAB_CONFIG: { key: Tab; label: string }[] = [
-    { key: 'uebersicht', label: 'Uebersicht' },
-    { key: 'editor', label: 'Editor' },
-    { key: 'generator', label: 'Generator' },
-    { key: 'export', label: 'Export & Compliance' },
-    { key: 'loeschkonzept', label: 'Loeschkonzept' },
-  ]
-
-  // --------------------------------------------------------------------------
-  // Render helpers
-  // --------------------------------------------------------------------------
-
-  const renderStatusBadge = (status: PolicyStatus) => {
-    const colors = STATUS_COLORS[status] ?? 'bg-gray-100 text-gray-800'
-    const label = STATUS_LABELS[status] ?? status
-    return (
-      <span
-        className={`inline-block text-xs font-semibold px-2 py-0.5 rounded-full ${colors}`}
-      >
-        {label}
-      </span>
-    )
-  }
-
-  const renderTriggerBadge = (trigger: DeletionTriggerLevel) => {
-    const colors = TRIGGER_COLORS[trigger] ?? 'bg-gray-100 text-gray-800'
-    const label = TRIGGER_LABELS[trigger] ?? trigger
-    return (
-      <span
-        className={`inline-block text-xs font-semibold px-2 py-0.5 rounded-full ${colors}`}
-      >
-        {label}
-      </span>
-    )
-  }
-
-  // ==========================================================================
-  // TAB 1: Uebersicht
-  // ==========================================================================
-
-  const renderUebersicht = () => (
-    <div className="space-y-6">
-      {/* Stats bar */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-        {[
-          { label: 'Gesamt', value: stats.total, color: 'text-gray-900' },
-          { label: 'Aktiv', value: stats.active, color: 'text-green-600' },
-          { label: 'Entwurf', value: stats.draft, color: 'text-yellow-600' },
-          {
-            label: 'Pruefung faellig',
-            value: stats.overdue,
-            color: 'text-red-600',
-          },
-          {
-            label: 'Legal Holds aktiv',
-            value: stats.legalHolds,
-            color: 'text-orange-600',
-          },
-        ].map((s) => (
-          <div
-            key={s.label}
-            className="bg-white rounded-xl border border-gray-200 p-6 text-center"
-          >
-            <div className={`text-3xl font-bold ${s.color}`}>{s.value}</div>
-            <div className="text-sm text-gray-500 mt-1">{s.label}</div>
-          </div>
-        ))}
-      </div>
-
-      {/* Search & filters */}
-      <div className="bg-white rounded-xl border border-gray-200 p-4 space-y-3">
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder="Suche nach Name, ID oder Beschreibung..."
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-        />
-        <div className="flex flex-wrap gap-2 items-center">
-          <span className="text-sm text-gray-500 font-medium">Status:</span>
-          {[
-            { key: 'all', label: 'Alle' },
-            { key: 'active', label: 'Aktiv' },
-            { key: 'draft', label: 'Entwurf' },
-            { key: 'review', label: 'Pruefung noetig' },
-          ].map((f) => (
-            <button
-              key={f.key}
-              onClick={() => setFilter(f.key)}
-              className={`px-3 py-1 rounded-lg text-sm font-medium transition ${
-                filter === f.key
-                  ? 'bg-purple-600 text-white'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-              }`}
-            >
-              {f.label}
-            </button>
-          ))}
-          <span className="text-sm text-gray-500 font-medium ml-4">
-            Aufbewahrungstreiber:
-          </span>
-          <select
-            value={driverFilter}
-            onChange={(e) => setDriverFilter(e.target.value)}
-            className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-          >
-            <option value="all">Alle</option>
-            {Object.entries(RETENTION_DRIVER_META).map(([key, meta]) => (
-              <option key={key} value={key}>
-                {meta.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      {/* Policy cards or empty state */}
-      {filteredPolicies.length === 0 && policies.length === 0 ? (
-        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
-          <div className="text-gray-400 text-5xl mb-4">&#128203;</div>
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">
-            Noch keine Loeschfristen angelegt
-          </h3>
-          <p className="text-gray-500 mb-6">
-            Starten Sie den Generator, um auf Basis Ihres Unternehmensprofils
-            automatisch passende Loeschfristen zu erstellen, oder legen Sie
-            manuell eine neue Loeschfrist an.
-          </p>
-          <div className="flex justify-center gap-3">
-            <button
-              onClick={() => setTab('generator')}
-              className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-4 py-2 font-medium transition"
-            >
-              Generator starten
-            </button>
-            <button
-              onClick={createNewPolicy}
-              className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition"
-            >
-              Neue Loeschfrist
-            </button>
-          </div>
-        </div>
-      ) : filteredPolicies.length === 0 ? (
-        <div className="bg-white rounded-xl border border-gray-200 p-8 text-center">
-          <p className="text-gray-500">
-            Keine Loeschfristen entsprechen den aktuellen Filtern.
-          </p>
-        </div>
-      ) : (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          {filteredPolicies.map((p) => {
-            const trigger = getEffectiveDeletionTrigger(p)
-            const activeHolds = getActiveLegalHolds(p)
-            const overdue = isPolicyOverdue(p)
-            return (
-              <div
-                key={p.policyId}
-                className="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition relative"
-              >
-                {activeHolds.length > 0 && (
-                  <span
-                    className="absolute top-3 right-3 text-orange-500"
-                    title={`${activeHolds.length} aktive Legal Hold(s)`}
-                  >
-                    &#9888;
-                  </span>
-                )}
-                <div className="text-xs text-gray-400 font-mono mb-1">
-                  {p.policyId}
-                </div>
-                <h3 className="text-base font-semibold text-gray-900 mb-2 truncate">
-                  {p.dataObjectName || 'Ohne Bezeichnung'}
-                </h3>
-                <div className="flex flex-wrap gap-1.5 mb-3">
-                  {renderTriggerBadge(trigger)}
-                  <span className="inline-block text-xs font-medium px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">
-                    {formatRetentionDuration(p)}
-                  </span>
-                  {renderStatusBadge(p.status)}
-                  {overdue && (
-                    <span className="inline-block text-xs font-semibold px-2 py-0.5 rounded-full bg-red-100 text-red-700">
-                      Pruefung faellig
-                    </span>
-                  )}
-                </div>
-                {p.description && (
-                  <p className="text-sm text-gray-500 mb-3 line-clamp-2">
-                    {p.description}
-                  </p>
-                )}
-                <button
-                  onClick={() => {
-                    setEditingId(p.policyId)
-                    setTab('editor')
-                  }}
-                  className="text-sm text-purple-600 hover:text-purple-800 font-medium"
-                >
-                  Bearbeiten &rarr;
-                </button>
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-      {/* Floating action button */}
-      {policies.length > 0 && (
-        <div className="flex justify-end">
-          <button
-            onClick={createNewPolicy}
-            className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-5 py-2.5 font-medium transition shadow-sm"
-          >
-            + Neue Loeschfrist
-          </button>
-        </div>
-      )}
-    </div>
-  )
-
-  // ==========================================================================
-  // TAB 2: Editor
-  // ==========================================================================
-
-  const renderEditorNoSelection = () => (
-    <div className="bg-white rounded-xl border border-gray-200 p-8">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">
-        Loeschfrist zum Bearbeiten waehlen
-      </h3>
-      {policies.length === 0 ? (
-        <p className="text-gray-500">
-          Noch keine Loeschfristen vorhanden.{' '}
-          <button
-            onClick={createNewPolicy}
-            className="text-purple-600 hover:text-purple-800 font-medium underline"
-          >
-            Neue Loeschfrist anlegen
-          </button>
-        </p>
-      ) : (
-        <div className="space-y-2">
-          {policies.map((p) => (
-            <button
-              key={p.policyId}
-              onClick={() => setEditingId(p.policyId)}
-              className="w-full text-left px-4 py-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center justify-between"
-            >
-              <div>
-                <span className="text-xs text-gray-400 font-mono mr-2">
-                  {p.policyId}
-                </span>
-                <span className="font-medium text-gray-900">
-                  {p.dataObjectName || 'Ohne Bezeichnung'}
-                </span>
-              </div>
-              {renderStatusBadge(p.status)}
-            </button>
-          ))}
-          <button
-            onClick={createNewPolicy}
-            className="w-full text-left px-4 py-3 border border-dashed border-gray-300 rounded-lg hover:bg-gray-50 transition text-purple-600 font-medium"
-          >
-            + Neue Loeschfrist anlegen
-          </button>
-        </div>
-      )}
-    </div>
-  )
-
-  const renderEditorForm = (policy: LoeschfristPolicy) => {
-    const pid = policy.policyId
-
-    const set = <K extends keyof LoeschfristPolicy>(
-      key: K,
-      val: LoeschfristPolicy[K],
-    ) => {
-      updatePolicy(pid, (p) => ({ ...p, [key]: val }))
-    }
-
-    const updateLegalHold = (
-      idx: number,
-      updater: (h: LegalHold) => LegalHold,
-    ) => {
-      updatePolicy(pid, (p) => ({
-        ...p,
-        legalHolds: p.legalHolds.map((h, i) => (i === idx ? updater(h) : h)),
-      }))
-    }
-
-    const updateStorageLocation = (
-      idx: number,
-      updater: (s: StorageLocation) => StorageLocation,
-    ) => {
-      updatePolicy(pid, (p) => ({
-        ...p,
-        storageLocations: p.storageLocations.map((s, i) =>
-          i === idx ? updater(s) : s,
-        ),
-      }))
-    }
-
-    return (
-      <div className="space-y-6">
-        {/* Header with back button */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => setEditingId(null)}
-              className="text-gray-400 hover:text-gray-600 transition"
-            >
-              &larr; Zurueck
-            </button>
-            <h2 className="text-lg font-semibold text-gray-900">
-              {policy.dataObjectName || 'Neue Loeschfrist'}
-            </h2>
-            <span className="text-xs text-gray-400 font-mono">
-              {policy.policyId}
-            </span>
-          </div>
-          {renderStatusBadge(policy.status)}
-        </div>
-
-        {/* Sektion 1: Datenobjekt */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            1. Datenobjekt
-          </h3>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Name des Datenobjekts *
-            </label>
-            <input
-              type="text"
-              value={policy.dataObjectName}
-              onChange={(e) => set('dataObjectName', e.target.value)}
-              placeholder="z.B. Bewerbungsunterlagen"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Beschreibung
-            </label>
-            <textarea
-              value={policy.description}
-              onChange={(e) => set('description', e.target.value)}
-              rows={3}
-              placeholder="Beschreibung des Datenobjekts und seiner Verarbeitung..."
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Betroffene Personengruppen
-            </label>
-            <TagInput
-              value={policy.affectedGroups}
-              onChange={(v) => set('affectedGroups', v)}
-              placeholder="z.B. Bewerber, Mitarbeiter... (Enter zum Hinzufuegen)"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Datenkategorien
-            </label>
-            <TagInput
-              value={policy.dataCategories}
-              onChange={(v) => set('dataCategories', v)}
-              placeholder="z.B. Stammdaten, Kontaktdaten... (Enter zum Hinzufuegen)"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Primaerer Verarbeitungszweck
-            </label>
-            <textarea
-              value={policy.primaryPurpose}
-              onChange={(e) => set('primaryPurpose', e.target.value)}
-              rows={2}
-              placeholder="Welchem Zweck dient die Verarbeitung dieser Daten?"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-            />
-          </div>
-        </div>
-
-        {/* Sektion 2: 3-stufige Loeschlogik */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            2. 3-stufige Loeschlogik
-          </h3>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Loeschausloeser (Trigger-Stufe)
-            </label>
-            <div className="space-y-2">
-              {(
-                ['PURPOSE_END', 'RETENTION_DRIVER', 'LEGAL_HOLD'] as DeletionTriggerLevel[]
-              ).map((trigger) => (
-                <label
-                  key={trigger}
-                  className="flex items-start gap-3 p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"
-                >
-                  <input
-                    type="radio"
-                    name={`trigger-${pid}`}
-                    checked={policy.deletionTrigger === trigger}
-                    onChange={() => set('deletionTrigger', trigger)}
-                    className="mt-0.5 text-purple-600 focus:ring-purple-500"
-                  />
-                  <div>
-                    <div className="flex items-center gap-2">
-                      {renderTriggerBadge(trigger)}
-                    </div>
-                    <p className="text-xs text-gray-500 mt-1">
-                      {trigger === 'PURPOSE_END' &&
-                        'Loeschung nach Wegfall des Verarbeitungszwecks'}
-                      {trigger === 'RETENTION_DRIVER' &&
-                        'Loeschung nach Ablauf gesetzlicher oder vertraglicher Aufbewahrungsfrist'}
-                      {trigger === 'LEGAL_HOLD' &&
-                        'Loeschung durch aktiven Legal Hold blockiert'}
-                    </p>
-                  </div>
-                </label>
-              ))}
-            </div>
-          </div>
-
-          {/* Retention driver selection */}
-          {policy.deletionTrigger === 'RETENTION_DRIVER' && (
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Aufbewahrungstreiber
-              </label>
-              <select
-                value={policy.retentionDriver}
-                onChange={(e) => {
-                  const driver = e.target.value as RetentionDriverType
-                  const meta =
-                    RETENTION_DRIVER_META[driver]
-                  set('retentionDriver', driver)
-                  if (meta) {
-                    set('retentionDuration', meta.defaultDuration)
-                    set('retentionUnit', meta.defaultUnit as RetentionUnit)
-                    set('retentionDescription', meta.description)
-                  }
-                }}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              >
-                <option value="">Bitte waehlen...</option>
-                {Object.entries(RETENTION_DRIVER_META).map(([key, meta]) => (
-                  <option key={key} value={key}>
-                    {meta.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Aufbewahrungsdauer
-              </label>
-              <input
-                type="number"
-                min={0}
-                value={policy.retentionDuration}
-                onChange={(e) =>
-                  set('retentionDuration', parseInt(e.target.value) || 0)
-                }
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Einheit
-              </label>
-              <select
-                value={policy.retentionUnit}
-                onChange={(e) =>
-                  set('retentionUnit', e.target.value as RetentionUnit)
-                }
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              >
-                <option value="DAYS">Tage</option>
-                <option value="MONTHS">Monate</option>
-                <option value="YEARS">Jahre</option>
-              </select>
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Beschreibung der Aufbewahrungspflicht
-            </label>
-            <input
-              type="text"
-              value={policy.retentionDescription}
-              onChange={(e) => set('retentionDescription', e.target.value)}
-              placeholder="z.B. Handelsrechtliche Aufbewahrungspflicht gem. HGB"
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Startereignis (Fristbeginn)
-            </label>
-            <input
-              type="text"
-              value={policy.startEvent}
-              onChange={(e) => set('startEvent', e.target.value)}
-              placeholder="z.B. Ende des Geschaeftsjahres, Vertragsende..."
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-            />
-          </div>
-
-          {/* Legal Holds */}
-          <div className="border-t border-gray-200 pt-4">
-            <div className="flex items-center justify-between mb-3">
-              <h4 className="text-sm font-semibold text-gray-800">
-                Legal Holds
-              </h4>
-              <label className="flex items-center gap-2 text-sm">
-                <input
-                  type="checkbox"
-                  checked={policy.hasActiveLegalHold}
-                  onChange={(e) =>
-                    set('hasActiveLegalHold', e.target.checked)
-                  }
-                  className="text-purple-600 focus:ring-purple-500 rounded"
-                />
-                Aktiver Legal Hold
-              </label>
-            </div>
-
-            {policy.legalHolds.length > 0 && (
-              <div className="overflow-x-auto mb-3">
-                <table className="w-full text-sm border border-gray-200 rounded-lg">
-                  <thead>
-                    <tr className="bg-gray-50">
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Bezeichnung
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Grund
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Status
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Erstellt am
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Aktion
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {policy.legalHolds.map((hold, idx) => (
-                      <tr key={idx} className="border-t border-gray-100">
-                        <td className="px-3 py-2">
-                          <input
-                            type="text"
-                            value={hold.name}
-                            onChange={(e) =>
-                              updateLegalHold(idx, (h) => ({
-                                ...h,
-                                name: e.target.value,
-                              }))
-                            }
-                            placeholder="Bezeichnung"
-                            className="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:ring-1 focus:ring-purple-500"
-                          />
-                        </td>
-                        <td className="px-3 py-2">
-                          <input
-                            type="text"
-                            value={hold.reason}
-                            onChange={(e) =>
-                              updateLegalHold(idx, (h) => ({
-                                ...h,
-                                reason: e.target.value,
-                              }))
-                            }
-                            placeholder="Grund"
-                            className="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:ring-1 focus:ring-purple-500"
-                          />
-                        </td>
-                        <td className="px-3 py-2">
-                          <select
-                            value={hold.status}
-                            onChange={(e) =>
-                              updateLegalHold(idx, (h) => ({
-                                ...h,
-                                status: e.target.value as LegalHoldStatus,
-                              }))
-                            }
-                            className="px-2 py-1 border border-gray-200 rounded text-sm focus:ring-1 focus:ring-purple-500"
-                          >
-                            <option value="ACTIVE">Aktiv</option>
-                            <option value="RELEASED">Aufgehoben</option>
-                            <option value="EXPIRED">Abgelaufen</option>
-                          </select>
-                        </td>
-                        <td className="px-3 py-2">
-                          <input
-                            type="date"
-                            value={hold.createdAt}
-                            onChange={(e) =>
-                              updateLegalHold(idx, (h) => ({
-                                ...h,
-                                createdAt: e.target.value,
-                              }))
-                            }
-                            className="px-2 py-1 border border-gray-200 rounded text-sm focus:ring-1 focus:ring-purple-500"
-                          />
-                        </td>
-                        <td className="px-3 py-2">
-                          <button
-                            onClick={() => removeLegalHold(pid, idx)}
-                            className="text-red-500 hover:text-red-700 text-sm font-medium"
-                          >
-                            Entfernen
-                          </button>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-
-            <button
-              onClick={() => addLegalHold(pid)}
-              className="text-sm text-purple-600 hover:text-purple-800 font-medium"
-            >
-              + Legal Hold hinzufuegen
-            </button>
-          </div>
-        </div>
-
-        {/* Sektion 3: Speicherorte & Loeschmethode */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            3. Speicherorte & Loeschmethode
-          </h3>
-
-          {policy.storageLocations.length > 0 && (
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm border border-gray-200 rounded-lg">
-                <thead>
-                  <tr className="bg-gray-50">
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                      Name
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                      Typ
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                      Backup
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                      Anbieter
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                      Loeschfaehig
-                    </th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                      Aktion
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {policy.storageLocations.map((loc, idx) => (
-                    <tr key={idx} className="border-t border-gray-100">
-                      <td className="px-3 py-2">
-                        <input
-                          type="text"
-                          value={loc.name}
-                          onChange={(e) =>
-                            updateStorageLocation(idx, (s) => ({
-                              ...s,
-                              name: e.target.value,
-                            }))
-                          }
-                          placeholder="Name"
-                          className="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:ring-1 focus:ring-purple-500"
-                        />
-                      </td>
-                      <td className="px-3 py-2">
-                        <select
-                          value={loc.type}
-                          onChange={(e) =>
-                            updateStorageLocation(idx, (s) => ({
-                              ...s,
-                              type: e.target.value as StorageLocationType,
-                            }))
-                          }
-                          className="px-2 py-1 border border-gray-200 rounded text-sm focus:ring-1 focus:ring-purple-500"
-                        >
-                          {Object.entries(STORAGE_LOCATION_LABELS).map(
-                            ([key, label]) => (
-                              <option key={key} value={key}>
-                                {label}
-                              </option>
-                            ),
-                          )}
-                        </select>
-                      </td>
-                      <td className="px-3 py-2 text-center">
-                        <input
-                          type="checkbox"
-                          checked={loc.isBackup}
-                          onChange={(e) =>
-                            updateStorageLocation(idx, (s) => ({
-                              ...s,
-                              isBackup: e.target.checked,
-                            }))
-                          }
-                          className="text-purple-600 focus:ring-purple-500 rounded"
-                        />
-                      </td>
-                      <td className="px-3 py-2">
-                        <input
-                          type="text"
-                          value={loc.provider}
-                          onChange={(e) =>
-                            updateStorageLocation(idx, (s) => ({
-                              ...s,
-                              provider: e.target.value,
-                            }))
-                          }
-                          placeholder="Anbieter"
-                          className="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:ring-1 focus:ring-purple-500"
-                        />
-                      </td>
-                      <td className="px-3 py-2 text-center">
-                        <input
-                          type="checkbox"
-                          checked={loc.deletionCapable}
-                          onChange={(e) =>
-                            updateStorageLocation(idx, (s) => ({
-                              ...s,
-                              deletionCapable: e.target.checked,
-                            }))
-                          }
-                          className="text-purple-600 focus:ring-purple-500 rounded"
-                        />
-                      </td>
-                      <td className="px-3 py-2">
-                        <button
-                          onClick={() => removeStorageLocation(pid, idx)}
-                          className="text-red-500 hover:text-red-700 text-sm font-medium"
-                        >
-                          Entfernen
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-
-          <button
-            onClick={() => addStorageLocation(pid)}
-            className="text-sm text-purple-600 hover:text-purple-800 font-medium"
-          >
-            + Speicherort hinzufuegen
-          </button>
-
-          <div className="border-t border-gray-200 pt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Loeschmethode
-              </label>
-              <select
-                value={policy.deletionMethod}
-                onChange={(e) =>
-                  set('deletionMethod', e.target.value as DeletionMethodType)
-                }
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              >
-                {Object.entries(DELETION_METHOD_LABELS).map(([key, label]) => (
-                  <option key={key} value={key}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Details zur Loeschmethode
-              </label>
-              <textarea
-                value={policy.deletionMethodDetail}
-                onChange={(e) => set('deletionMethodDetail', e.target.value)}
-                rows={2}
-                placeholder="Weitere Details zum Loeschverfahren..."
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Sektion 4: Verantwortlichkeit */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            4. Verantwortlichkeit
-          </h3>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Verantwortliche Rolle
-              </label>
-              <input
-                type="text"
-                value={policy.responsibleRole}
-                onChange={(e) => set('responsibleRole', e.target.value)}
-                placeholder="z.B. Datenschutzbeauftragter"
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Verantwortliche Person
-              </label>
-              <input
-                type="text"
-                value={policy.responsiblePerson}
-                onChange={(e) => set('responsiblePerson', e.target.value)}
-                placeholder="Name der verantwortlichen Person"
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Freigabeprozess
-            </label>
-            <textarea
-              value={policy.releaseProcess}
-              onChange={(e) => set('releaseProcess', e.target.value)}
-              rows={3}
-              placeholder="Beschreibung des Freigabeprozesses fuer Loeschungen..."
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-            />
-          </div>
-        </div>
-
-        {/* Sektion 5: VVT-Verknuepfung */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            5. VVT-Verknuepfung
-          </h3>
-
-          {vvtActivities.length > 0 ? (
-            <div>
-              <p className="text-sm text-gray-500 mb-3">
-                Verknuepfen Sie diese Loeschfrist mit einer
-                Verarbeitungstaetigkeit aus Ihrem VVT.
-              </p>
-              <div className="space-y-2">
-                {policy.linkedVVTActivityIds && policy.linkedVVTActivityIds.length > 0 && (
-                  <div className="mb-3">
-                    <label className="block text-xs font-medium text-gray-500 mb-1">
-                      Verknuepfte Taetigkeiten:
-                    </label>
-                    <div className="flex flex-wrap gap-1">
-                      {policy.linkedVVTActivityIds.map((vvtId: string) => {
-                        const activity = vvtActivities.find(
-                          (a: any) => a.id === vvtId,
-                        )
-                        return (
-                          <span
-                            key={vvtId}
-                            className="inline-flex items-center gap-1 bg-blue-100 text-blue-800 text-xs font-medium px-2 py-0.5 rounded-full"
-                          >
-                            {activity?.name || vvtId}
-                            <button
-                              type="button"
-                              onClick={() =>
-                                updatePolicy(pid, (p) => ({
-                                  ...p,
-                                  linkedVVTActivityIds: (
-                                    p.linkedVVTActivityIds || []
-                                  ).filter((id: string) => id !== vvtId),
-                                }))
-                              }
-                              className="text-blue-600 hover:text-blue-900"
-                            >
-                              x
-                            </button>
-                          </span>
-                        )
-                      })}
-                    </div>
-                  </div>
-                )}
-                <select
-                  onChange={(e) => {
-                    const val = e.target.value
-                    if (
-                      val &&
-                      !(policy.linkedVVTActivityIds || []).includes(val)
-                    ) {
-                      updatePolicy(pid, (p) => ({
-                        ...p,
-                        linkedVVTActivityIds: [...(p.linkedVVTActivityIds || []), val],
-                      }))
-                    }
-                    e.target.value = ''
-                  }}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                >
-                  <option value="">
-                    Verarbeitungstaetigkeit verknuepfen...
-                  </option>
-                  {vvtActivities
-                    .filter(
-                      (a: any) =>
-                        !(policy.linkedVVTActivityIds || []).includes(a.id),
-                    )
-                    .map((a: any) => (
-                      <option key={a.id} value={a.id}>
-                        {a.name || a.id}
-                      </option>
-                    ))}
-                </select>
-              </div>
-            </div>
-          ) : (
-            <p className="text-sm text-gray-400">
-              Kein VVT gefunden. Erstellen Sie zuerst ein
-              Verarbeitungsverzeichnis, um hier Verknuepfungen herstellen zu
-              koennen.
-            </p>
-          )}
-        </div>
-
-        {/* Sektion 5b: Auftragsverarbeiter-Verknuepfung */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            5b. Verknuepfte Auftragsverarbeiter
-          </h3>
-
-          {vendorList.length > 0 ? (
-            <div>
-              <p className="text-sm text-gray-500 mb-3">
-                Verknuepfen Sie diese Loeschfrist mit relevanten Auftragsverarbeitern.
-              </p>
-              <div className="space-y-2">
-                {policy.linkedVendorIds && policy.linkedVendorIds.length > 0 && (
-                  <div className="mb-3">
-                    <label className="block text-xs font-medium text-gray-500 mb-1">
-                      Verknuepfte Auftragsverarbeiter:
-                    </label>
-                    <div className="flex flex-wrap gap-1">
-                      {policy.linkedVendorIds.map((vendorId: string) => {
-                        const vendor = vendorList.find(
-                          (v) => v.id === vendorId,
-                        )
-                        return (
-                          <span
-                            key={vendorId}
-                            className="inline-flex items-center gap-1 bg-orange-100 text-orange-800 text-xs font-medium px-2 py-0.5 rounded-full"
-                          >
-                            {vendor?.name || vendorId}
-                            <button
-                              type="button"
-                              onClick={() =>
-                                updatePolicy(pid, (p) => ({
-                                  ...p,
-                                  linkedVendorIds: (
-                                    p.linkedVendorIds || []
-                                  ).filter((id: string) => id !== vendorId),
-                                }))
-                              }
-                              className="text-orange-600 hover:text-orange-900"
-                            >
-                              x
-                            </button>
-                          </span>
-                        )
-                      })}
-                    </div>
-                  </div>
-                )}
-                <select
-                  onChange={(e) => {
-                    const val = e.target.value
-                    if (
-                      val &&
-                      !(policy.linkedVendorIds || []).includes(val)
-                    ) {
-                      updatePolicy(pid, (p) => ({
-                        ...p,
-                        linkedVendorIds: [...(p.linkedVendorIds || []), val],
-                      }))
-                    }
-                    e.target.value = ''
-                  }}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                >
-                  <option value="">
-                    Auftragsverarbeiter verknuepfen...
-                  </option>
-                  {vendorList
-                    .filter(
-                      (v) =>
-                        !(policy.linkedVendorIds || []).includes(v.id),
-                    )
-                    .map((v) => (
-                      <option key={v.id} value={v.id}>
-                        {v.name || v.id}
-                      </option>
-                    ))}
-                </select>
-              </div>
-            </div>
-          ) : (
-            <p className="text-sm text-gray-400">
-              Keine Auftragsverarbeiter gefunden. Erstellen Sie zuerst
-              Auftragsverarbeiter im Vendor-Compliance-Modul, um hier Verknuepfungen
-              herstellen zu koennen.
-            </p>
-          )}
-        </div>
-
-        {/* Sektion 6: Review-Einstellungen */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            6. Review-Einstellungen
-          </h3>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Status
-              </label>
-              <select
-                value={policy.status}
-                onChange={(e) =>
-                  set('status', e.target.value as PolicyStatus)
-                }
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              >
-                {Object.entries(STATUS_LABELS).map(([key, label]) => (
-                  <option key={key} value={key}>
-                    {label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Pruefintervall
-              </label>
-              <select
-                value={policy.reviewInterval}
-                onChange={(e) =>
-                  set('reviewInterval', e.target.value as ReviewInterval)
-                }
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              >
-                {Object.entries(REVIEW_INTERVAL_LABELS).map(
-                  ([key, label]) => (
-                    <option key={key} value={key}>
-                      {label}
-                    </option>
-                  ),
-                )}
-              </select>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Letzte Pruefung
-              </label>
-              <input
-                type="date"
-                value={policy.lastReviewDate}
-                onChange={(e) => set('lastReviewDate', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">
-                Naechste Pruefung
-              </label>
-              <input
-                type="date"
-                value={policy.nextReviewDate}
-                onChange={(e) => set('nextReviewDate', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
-              Tags
-            </label>
-            <TagInput
-              value={policy.tags}
-              onChange={(v) => set('tags', v)}
-              placeholder="Tags hinzufuegen (Enter zum Bestaetigen)"
-            />
-          </div>
-        </div>
-
-        {/* Action buttons */}
-        <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
-          <button
-            onClick={() => {
-              if (
-                confirm(
-                  'Moechten Sie diese Loeschfrist wirklich loeschen?',
-                )
-              ) {
-                deletePolicy(pid)
-                setTab('uebersicht')
-              }
-            }}
-            className="text-red-600 hover:text-red-800 font-medium text-sm"
-          >
-            Loeschfrist loeschen
-          </button>
-          <div className="flex gap-3">
-            <button
-              onClick={() => {
-                setEditingId(null)
-                setTab('uebersicht')
-              }}
-              className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition"
-            >
-              Zurueck zur Uebersicht
-            </button>
-            <button
-              onClick={handleSaveAndClose}
-              disabled={saving}
-              className="bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50 rounded-lg px-4 py-2 font-medium transition"
-            >
-              {saving ? 'Speichern...' : 'Speichern & Schliessen'}
-            </button>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  const renderEditor = () => {
-    if (!editingId || !editingPolicy) {
-      return renderEditorNoSelection()
-    }
-    return renderEditorForm(editingPolicy)
-  }
-
-  // ==========================================================================
-  // TAB 3: Generator
-  // ==========================================================================
-
-  const renderGenerator = () => {
-    const totalSteps = PROFILING_STEPS.length
-    const progress = getProfilingProgress(profilingAnswers)
-    const allComplete = PROFILING_STEPS.every((step, idx) =>
-      isStepComplete(step, profilingAnswers.filter((a) => a.stepIndex === idx)),
-    )
-
-    // If we have generated policies, show the preview
-    if (generatedPolicies.length > 0) {
-      return (
-        <div className="space-y-6">
-          <div className="bg-white rounded-xl border border-gray-200 p-6">
-            <h3 className="text-lg font-semibold text-gray-900 mb-2">
-              Generierte Loeschfristen
-            </h3>
-            <p className="text-sm text-gray-500 mb-4">
-              Auf Basis Ihres Profils wurden {generatedPolicies.length}{' '}
-              Loeschfristen generiert. Waehlen Sie die relevanten aus und
-              uebernehmen Sie sie.
-            </p>
-
-            <div className="flex gap-3 mb-4">
-              <button
-                onClick={() =>
-                  setSelectedGenerated(
-                    new Set(generatedPolicies.map((p) => p.policyId)),
-                  )
-                }
-                className="text-sm text-purple-600 hover:text-purple-800 font-medium"
-              >
-                Alle auswaehlen
-              </button>
-              <button
-                onClick={() => setSelectedGenerated(new Set())}
-                className="text-sm text-gray-500 hover:text-gray-700 font-medium"
-              >
-                Alle abwaehlen
-              </button>
-            </div>
-
-            <div className="space-y-2 max-h-[500px] overflow-y-auto">
-              {generatedPolicies.map((gp) => {
-                const selected = selectedGenerated.has(gp.policyId)
-                return (
-                  <label
-                    key={gp.policyId}
-                    className={`flex items-start gap-3 p-4 border rounded-lg cursor-pointer transition ${
-                      selected
-                        ? 'border-purple-300 bg-purple-50'
-                        : 'border-gray-200 hover:bg-gray-50'
-                    }`}
-                  >
-                    <input
-                      type="checkbox"
-                      checked={selected}
-                      onChange={(e) => {
-                        const next = new Set(selectedGenerated)
-                        if (e.target.checked) next.add(gp.policyId)
-                        else next.delete(gp.policyId)
-                        setSelectedGenerated(next)
-                      }}
-                      className="mt-1 text-purple-600 focus:ring-purple-500 rounded"
-                    />
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className="font-medium text-gray-900">
-                          {gp.dataObjectName}
-                        </span>
-                        <span className="text-xs font-mono text-gray-400">
-                          {gp.policyId}
-                        </span>
-                      </div>
-                      <p className="text-sm text-gray-500 mb-1">
-                        {gp.description}
-                      </p>
-                      <div className="flex flex-wrap gap-1">
-                        {renderTriggerBadge(
-                          getEffectiveDeletionTrigger(gp),
-                        )}
-                        <span className="inline-block text-xs font-medium px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">
-                          {formatRetentionDuration(gp)}
-                        </span>
-                        {gp.retentionDriver && (
-                          <span className="inline-block text-xs font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
-                            {RETENTION_DRIVER_META[gp.retentionDriver]
-                              ?.label || gp.retentionDriver}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </label>
-                )
-              })}
-            </div>
-          </div>
-
-          <div className="flex justify-between">
-            <button
-              onClick={() => {
-                setGeneratedPolicies([])
-                setSelectedGenerated(new Set())
-              }}
-              className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition"
-            >
-              Zurueck zum Profiling
-            </button>
-            <div className="flex gap-3">
-              <button
-                onClick={() => adoptGeneratedPolicies(false)}
-                className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition"
-              >
-                Alle uebernehmen ({generatedPolicies.length})
-              </button>
-              <button
-                onClick={() => adoptGeneratedPolicies(true)}
-                disabled={selectedGenerated.size === 0}
-                className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-4 py-2 font-medium transition disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                Ausgewaehlte uebernehmen ({selectedGenerated.size})
-              </button>
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    // Profiling wizard
-    const currentStep: ProfilingStep | undefined = PROFILING_STEPS[profilingStep]
-
-    return (
-      <div className="space-y-6">
-        {/* Progress bar */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <div className="flex items-center justify-between mb-3">
-            <h3 className="text-lg font-semibold text-gray-900">
-              Profiling-Assistent
-            </h3>
-            <span className="text-sm text-gray-500">
-              Schritt {profilingStep + 1} von {totalSteps}
-            </span>
-          </div>
-          <div className="w-full bg-gray-200 rounded-full h-2">
-            <div
-              className="bg-purple-600 h-2 rounded-full transition-all duration-300"
-              style={{
-                width: `${Math.round(progress * 100)}%`,
-              }}
-            />
-          </div>
-          <div className="flex justify-between mt-2">
-            {PROFILING_STEPS.map((step, idx) => (
-              <button
-                key={idx}
-                onClick={() => setProfilingStep(idx)}
-                className={`text-xs font-medium transition ${
-                  idx === profilingStep
-                    ? 'text-purple-600'
-                    : idx < profilingStep
-                      ? 'text-green-600'
-                      : 'text-gray-400'
-                }`}
-              >
-                {step.title}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Current step questions */}
-        {currentStep && (
-          <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-6">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-1">
-                {currentStep.title}
-              </h3>
-              {currentStep.description && (
-                <p className="text-sm text-gray-500">
-                  {currentStep.description}
-                </p>
-              )}
-            </div>
-
-            {currentStep.questions.map((question) => {
-              const currentAnswer = profilingAnswers.find(
-                (a) =>
-                  a.stepIndex === profilingStep &&
-                  a.questionId === question.id,
-              )
-
-              return (
-                <div
-                  key={question.id}
-                  className="border-t border-gray-100 pt-4"
-                >
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    {question.label}
-                    {question.helpText && (
-                      <span className="block text-xs text-gray-400 font-normal mt-0.5">
-                        {question.helpText}
-                      </span>
-                    )}
-                  </label>
-
-                  {/* Boolean */}
-                  {question.type === 'boolean' && (
-                    <div className="flex gap-3">
-                      {[
-                        { val: true, label: 'Ja' },
-                        { val: false, label: 'Nein' },
-                      ].map((opt) => (
-                        <button
-                          key={String(opt.val)}
-                          onClick={() =>
-                            handleProfilingAnswer(
-                              profilingStep,
-                              question.id,
-                              opt.val,
-                            )
-                          }
-                          className={`px-4 py-2 rounded-lg text-sm font-medium transition ${
-                            currentAnswer?.value === opt.val
-                              ? 'bg-purple-600 text-white'
-                              : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                          }`}
-                        >
-                          {opt.label}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-
-                  {/* Single select */}
-                  {question.type === 'single' && question.options && (
-                    <div className="space-y-2">
-                      {question.options.map((opt) => (
-                        <label
-                          key={opt.value}
-                          className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${
-                            currentAnswer?.value === opt.value
-                              ? 'border-purple-300 bg-purple-50'
-                              : 'border-gray-200 hover:bg-gray-50'
-                          }`}
-                        >
-                          <input
-                            type="radio"
-                            name={`${question.id}-${profilingStep}`}
-                            checked={currentAnswer?.value === opt.value}
-                            onChange={() =>
-                              handleProfilingAnswer(
-                                profilingStep,
-                                question.id,
-                                opt.value,
-                              )
-                            }
-                            className="text-purple-600 focus:ring-purple-500"
-                          />
-                          <div>
-                            <span className="text-sm font-medium text-gray-900">
-                              {opt.label}
-                            </span>
-                            {opt.description && (
-                              <span className="block text-xs text-gray-500">
-                                {opt.description}
-                              </span>
-                            )}
-                          </div>
-                        </label>
-                      ))}
-                    </div>
-                  )}
-
-                  {/* Multi select */}
-                  {question.type === 'multi' && question.options && (
-                    <div className="space-y-2">
-                      {question.options.map((opt) => {
-                        const selectedValues: string[] =
-                          currentAnswer?.value || []
-                        const isSelected = selectedValues.includes(opt.value)
-                        return (
-                          <label
-                            key={opt.value}
-                            className={`flex items-center gap-3 p-3 border rounded-lg cursor-pointer transition ${
-                              isSelected
-                                ? 'border-purple-300 bg-purple-50'
-                                : 'border-gray-200 hover:bg-gray-50'
-                            }`}
-                          >
-                            <input
-                              type="checkbox"
-                              checked={isSelected}
-                              onChange={(e) => {
-                                let next: string[]
-                                if (e.target.checked) {
-                                  next = [...selectedValues, opt.value]
-                                } else {
-                                  next = selectedValues.filter(
-                                    (v) => v !== opt.value,
-                                  )
-                                }
-                                handleProfilingAnswer(
-                                  profilingStep,
-                                  question.id,
-                                  next,
-                                )
-                              }}
-                              className="text-purple-600 focus:ring-purple-500 rounded"
-                            />
-                            <div>
-                              <span className="text-sm font-medium text-gray-900">
-                                {opt.label}
-                              </span>
-                              {opt.description && (
-                                <span className="block text-xs text-gray-500">
-                                  {opt.description}
-                                </span>
-                              )}
-                            </div>
-                          </label>
-                        )
-                      })}
-                    </div>
-                  )}
-
-                  {/* Number input */}
-                  {question.type === 'number' && (
-                    <input
-                      type="number"
-                      value={currentAnswer?.value ?? ''}
-                      onChange={(e) =>
-                        handleProfilingAnswer(
-                          profilingStep,
-                          question.id,
-                          e.target.value ? parseInt(e.target.value) : '',
-                        )
-                      }
-                      min={0}
-                      placeholder="Bitte Zahl eingeben"
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                    />
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        )}
-
-        {/* Navigation */}
-        <div className="flex items-center justify-between">
-          <button
-            onClick={() => setProfilingStep((s) => Math.max(0, s - 1))}
-            disabled={profilingStep === 0}
-            className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Zurueck
-          </button>
-
-          {profilingStep < totalSteps - 1 ? (
-            <button
-              onClick={() =>
-                setProfilingStep((s) => Math.min(totalSteps - 1, s + 1))
-              }
-              className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-4 py-2 font-medium transition"
-            >
-              Weiter
-            </button>
-          ) : (
-            <button
-              onClick={handleGenerate}
-              disabled={!allComplete}
-              className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-5 py-2.5 font-semibold transition disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Loeschfristen generieren
-            </button>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  // ==========================================================================
-  // TAB 4: Export & Compliance
-  // ==========================================================================
-
-  const renderExport = () => {
-    const allLegalHolds = policies.flatMap((p) =>
-      p.legalHolds.map((h) => ({
-        ...h,
-        policyId: p.policyId,
-        policyName: p.dataObjectName,
-      })),
-    )
-    const activeLegalHolds = allLegalHolds.filter(
-      (h) => h.status === 'ACTIVE',
-    )
-
-    return (
-      <div className="space-y-6">
-        {/* Compliance Check */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-gray-900">
-              Compliance-Check
-            </h3>
-            <button
-              onClick={runCompliance}
-              disabled={policies.length === 0}
-              className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-4 py-2 font-medium transition disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              Analyse starten
-            </button>
-          </div>
-
-          {policies.length === 0 && (
-            <p className="text-sm text-gray-400">
-              Erstellen Sie zuerst Loeschfristen, um eine Compliance-Analyse
-              durchzufuehren.
-            </p>
-          )}
-
-          {complianceResult && (
-            <div className="space-y-4">
-              {/* Score */}
-              <div className="flex items-center gap-4 p-4 rounded-lg bg-gray-50">
-                <div
-                  className={`text-4xl font-bold ${
-                    complianceResult.score >= 75
-                      ? 'text-green-600'
-                      : complianceResult.score >= 50
-                        ? 'text-yellow-600'
-                        : 'text-red-600'
-                  }`}
-                >
-                  {complianceResult.score}
-                </div>
-                <div>
-                  <div className="text-sm font-medium text-gray-900">
-                    Compliance-Score
-                  </div>
-                  <div className="text-xs text-gray-500">
-                    {complianceResult.score >= 75
-                      ? 'Guter Zustand - wenige Optimierungen noetig'
-                      : complianceResult.score >= 50
-                        ? 'Verbesserungsbedarf - wichtige Punkte offen'
-                        : 'Kritisch - dringender Handlungsbedarf'}
-                  </div>
-                </div>
-              </div>
-
-              {/* Issues grouped by severity */}
-              {(['CRITICAL', 'HIGH', 'MEDIUM', 'LOW'] as const).map(
-                (severity) => {
-                  const issues = complianceResult.issues.filter(
-                    (i) => i.severity === severity,
-                  )
-                  if (issues.length === 0) return null
-
-                  const severityConfig = {
-                    CRITICAL: {
-                      label: 'Kritisch',
-                      bg: 'bg-red-50',
-                      border: 'border-red-200',
-                      text: 'text-red-800',
-                      badge: 'bg-red-100 text-red-800',
-                    },
-                    HIGH: {
-                      label: 'Hoch',
-                      bg: 'bg-orange-50',
-                      border: 'border-orange-200',
-                      text: 'text-orange-800',
-                      badge: 'bg-orange-100 text-orange-800',
-                    },
-                    MEDIUM: {
-                      label: 'Mittel',
-                      bg: 'bg-yellow-50',
-                      border: 'border-yellow-200',
-                      text: 'text-yellow-800',
-                      badge: 'bg-yellow-100 text-yellow-800',
-                    },
-                    LOW: {
-                      label: 'Niedrig',
-                      bg: 'bg-blue-50',
-                      border: 'border-blue-200',
-                      text: 'text-blue-800',
-                      badge: 'bg-blue-100 text-blue-800',
-                    },
-                  }[severity]
-
-                  return (
-                    <div key={severity}>
-                      <div className="flex items-center gap-2 mb-2">
-                        <span
-                          className={`text-xs font-semibold px-2 py-0.5 rounded-full ${severityConfig.badge}`}
-                        >
-                          {severityConfig.label}
-                        </span>
-                        <span className="text-xs text-gray-400">
-                          {issues.length}{' '}
-                          {issues.length === 1 ? 'Problem' : 'Probleme'}
-                        </span>
-                      </div>
-                      <div className="space-y-2">
-                        {issues.map((issue, idx) => (
-                          <div
-                            key={idx}
-                            className={`p-3 rounded-lg border ${severityConfig.bg} ${severityConfig.border}`}
-                          >
-                            <div
-                              className={`text-sm font-medium ${severityConfig.text}`}
-                            >
-                              {issue.title}
-                            </div>
-                            <p className="text-xs text-gray-600 mt-1">
-                              {issue.description}
-                            </p>
-                            {issue.recommendation && (
-                              <p className="text-xs text-gray-500 mt-1 italic">
-                                Empfehlung: {issue.recommendation}
-                              </p>
-                            )}
-                            {issue.affectedPolicyId && (
-                              <button
-                                onClick={() => {
-                                  setEditingId(issue.affectedPolicyId!)
-                                  setTab('editor')
-                                }}
-                                className="text-xs text-purple-600 hover:text-purple-800 font-medium mt-1"
-                              >
-                                Zur Loeschfrist: {issue.affectedPolicyId}
-                              </button>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )
-                },
-              )}
-
-              {complianceResult.issues.length === 0 && (
-                <div className="p-4 rounded-lg bg-green-50 border border-green-200 text-center">
-                  <div className="text-green-700 font-medium">
-                    Keine Compliance-Probleme gefunden
-                  </div>
-                  <p className="text-xs text-green-600 mt-1">
-                    Alle Loeschfristen entsprechen den Anforderungen.
-                  </p>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Legal Hold Management */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            Legal Hold Verwaltung
-          </h3>
-
-          {allLegalHolds.length === 0 ? (
-            <p className="text-sm text-gray-400">
-              Keine Legal Holds vorhanden.
-            </p>
-          ) : (
-            <div>
-              <div className="flex gap-4 mb-4">
-                <div className="text-sm">
-                  <span className="font-medium text-gray-700">Gesamt:</span>{' '}
-                  <span className="text-gray-900">
-                    {allLegalHolds.length}
-                  </span>
-                </div>
-                <div className="text-sm">
-                  <span className="font-medium text-orange-600">Aktiv:</span>{' '}
-                  <span className="text-gray-900">
-                    {activeLegalHolds.length}
-                  </span>
-                </div>
-              </div>
-
-              <div className="overflow-x-auto">
-                <table className="w-full text-sm border border-gray-200 rounded-lg">
-                  <thead>
-                    <tr className="bg-gray-50">
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Loeschfrist
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Bezeichnung
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Grund
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Status
-                      </th>
-                      <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">
-                        Erstellt
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {allLegalHolds.map((hold, idx) => (
-                      <tr
-                        key={idx}
-                        className="border-t border-gray-100"
-                      >
-                        <td className="px-3 py-2">
-                          <button
-                            onClick={() => {
-                              setEditingId(hold.policyId)
-                              setTab('editor')
-                            }}
-                            className="text-purple-600 hover:text-purple-800 font-medium text-xs"
-                          >
-                            {hold.policyName || hold.policyId}
-                          </button>
-                        </td>
-                        <td className="px-3 py-2 text-gray-900">
-                          {hold.name || '-'}
-                        </td>
-                        <td className="px-3 py-2 text-gray-500">
-                          {hold.reason || '-'}
-                        </td>
-                        <td className="px-3 py-2">
-                          <span
-                            className={`text-xs font-semibold px-2 py-0.5 rounded-full ${
-                              hold.status === 'ACTIVE'
-                                ? 'bg-orange-100 text-orange-800'
-                                : hold.status === 'RELEASED'
-                                  ? 'bg-green-100 text-green-800'
-                                  : 'bg-gray-100 text-gray-600'
-                            }`}
-                          >
-                            {hold.status === 'ACTIVE'
-                              ? 'Aktiv'
-                              : hold.status === 'RELEASED'
-                                ? 'Aufgehoben'
-                                : 'Abgelaufen'}
-                          </span>
-                        </td>
-                        <td className="px-3 py-2 text-gray-500 text-xs">
-                          {hold.createdAt || '-'}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Export */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
-          <h3 className="text-lg font-semibold text-gray-900">
-            Datenexport
-          </h3>
-          <p className="text-sm text-gray-500">
-            Exportieren Sie Ihre Loeschfristen und den Compliance-Status in
-            verschiedenen Formaten.
-          </p>
-
-          {policies.length === 0 ? (
-            <p className="text-sm text-gray-400">
-              Erstellen Sie zuerst Loeschfristen, um Exporte zu generieren.
-            </p>
-          ) : (
-            <div className="flex flex-wrap gap-3">
-              <button
-                onClick={() =>
-                  downloadFile(
-                    exportPoliciesAsJSON(policies),
-                    'loeschfristen-export.json',
-                    'application/json',
-                  )
-                }
-                className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition"
-              >
-                JSON Export
-              </button>
-              <button
-                onClick={() =>
-                  downloadFile(
-                    exportPoliciesAsCSV(policies),
-                    'loeschfristen-export.csv',
-                    'text/csv;charset=utf-8',
-                  )
-                }
-                className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition"
-              >
-                CSV Export
-              </button>
-              <button
-                onClick={() =>
-                  downloadFile(
-                    generateComplianceSummary(policies),
-                    'compliance-bericht.md',
-                    'text/markdown',
-                  )
-                }
-                className="bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg px-4 py-2 font-medium transition"
-              >
-                Compliance-Bericht
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  // ==========================================================================
-  // Tab 5: Loeschkonzept Document
-  // ==========================================================================
-
-  function handleOrgHeaderChange(field: keyof LoeschkonzeptOrgHeader, value: string | string[]) {
+  const handleOrgHeaderChange = useCallback((field: keyof LoeschkonzeptOrgHeader, value: string | string[]) => {
     const updated = { ...orgHeader, [field]: value }
     setOrgHeader(updated)
     localStorage.setItem('bp_loeschkonzept_orgheader', JSON.stringify(updated))
-  }
+  }, [orgHeader])
 
-  function handleAddRevision() {
+  const handleAddRevision = useCallback(() => {
     const newRev: LoeschkonzeptRevision = {
       version: orgHeader.loeschkonzeptVersion,
       date: new Date().toISOString().split('T')[0],
@@ -2390,299 +342,23 @@ export default function LoeschfristenPage() {
     const updated = [...revisions, newRev]
     setRevisions(updated)
     localStorage.setItem('bp_loeschkonzept_revisions', JSON.stringify(updated))
-  }
+  }, [orgHeader, revisions])
 
-  function handleUpdateRevision(index: number, field: keyof LoeschkonzeptRevision, value: string) {
+  const handleUpdateRevision = useCallback((index: number, field: keyof LoeschkonzeptRevision, value: string) => {
     const updated = revisions.map((r, i) => i === index ? { ...r, [field]: value } : r)
     setRevisions(updated)
     localStorage.setItem('bp_loeschkonzept_revisions', JSON.stringify(updated))
-  }
+  }, [revisions])
 
-  function handleRemoveRevision(index: number) {
+  const handleRemoveRevision = useCallback((index: number) => {
     const updated = revisions.filter((_, i) => i !== index)
     setRevisions(updated)
     localStorage.setItem('bp_loeschkonzept_revisions', JSON.stringify(updated))
-  }
+  }, [revisions])
 
-  function handlePrintLoeschkonzept() {
-    const htmlContent = buildLoeschkonzeptHtml(policies, orgHeader, vvtActivities, complianceResult, revisions)
-    const printWindow = window.open('', '_blank')
-    if (printWindow) {
-      printWindow.document.write(htmlContent)
-      printWindow.document.close()
-      printWindow.focus()
-      setTimeout(() => printWindow.print(), 300)
-    }
-  }
-
-  function handleDownloadLoeschkonzeptHtml() {
-    const htmlContent = buildLoeschkonzeptHtml(policies, orgHeader, vvtActivities, complianceResult, revisions)
-    downloadFile(htmlContent, `loeschkonzept-${new Date().toISOString().split('T')[0]}.html`, 'text/html;charset=utf-8')
-  }
-
-  function renderLoeschkonzept() {
-    const activePolicies = policies.filter(p => p.status !== 'ARCHIVED')
-
-    return (
-      <div className="space-y-4">
-        {/* Action bar */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <div className="flex items-center justify-between mb-4">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900">
-                Loeschkonzept (Art. 5/17/30 DSGVO)
-              </h3>
-              <p className="text-sm text-gray-500 mt-0.5">
-                Druckfertiges Loeschkonzept mit Deckblatt, Loeschregeln, VVT-Verknuepfung und Compliance-Status.
-              </p>
-            </div>
-            <div className="flex items-center gap-2">
-              <button
-                onClick={handleDownloadLoeschkonzeptHtml}
-                disabled={activePolicies.length === 0}
-                className="bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg px-4 py-2 text-sm font-medium transition flex items-center gap-1.5"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
-                HTML herunterladen
-              </button>
-              <button
-                onClick={handlePrintLoeschkonzept}
-                disabled={activePolicies.length === 0}
-                className="bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg px-4 py-2 text-sm font-medium transition flex items-center gap-1.5"
-              >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" /></svg>
-                Als PDF drucken
-              </button>
-            </div>
-          </div>
-
-          {activePolicies.length === 0 && (
-            <div className="bg-yellow-50 text-yellow-700 text-sm rounded-lg p-3 border border-yellow-200">
-              Keine aktiven Policies vorhanden. Erstellen Sie mindestens eine Policy, um das Loeschkonzept zu generieren.
-            </div>
-          )}
-        </div>
-
-        {/* Org Header Form */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <h4 className="text-sm font-semibold text-gray-900 mb-4">Organisationsdaten (Deckblatt)</h4>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Organisation</label>
-              <input
-                type="text"
-                value={orgHeader.organizationName}
-                onChange={e => handleOrgHeaderChange('organizationName', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                placeholder="Name der Organisation"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Branche</label>
-              <input
-                type="text"
-                value={orgHeader.industry}
-                onChange={e => handleOrgHeaderChange('industry', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                placeholder="z.B. IT / Software"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Datenschutzbeauftragter</label>
-              <input
-                type="text"
-                value={orgHeader.dpoName}
-                onChange={e => handleOrgHeaderChange('dpoName', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                placeholder="Name des DSB"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">DSB-Kontakt</label>
-              <input
-                type="text"
-                value={orgHeader.dpoContact}
-                onChange={e => handleOrgHeaderChange('dpoContact', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                placeholder="E-Mail oder Telefon"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Verantwortlicher (Art. 4 Nr. 7)</label>
-              <input
-                type="text"
-                value={orgHeader.responsiblePerson}
-                onChange={e => handleOrgHeaderChange('responsiblePerson', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                placeholder="Name des Verantwortlichen"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Mitarbeiter</label>
-              <input
-                type="text"
-                value={orgHeader.employeeCount}
-                onChange={e => handleOrgHeaderChange('employeeCount', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                placeholder="z.B. 50-249"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Version</label>
-              <input
-                type="text"
-                value={orgHeader.loeschkonzeptVersion}
-                onChange={e => handleOrgHeaderChange('loeschkonzeptVersion', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-                placeholder="1.0"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Pruefintervall</label>
-              <select
-                value={orgHeader.reviewInterval}
-                onChange={e => handleOrgHeaderChange('reviewInterval', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              >
-                <option value="Vierteljaehrlich">Vierteljaehrlich</option>
-                <option value="Halbjaehrlich">Halbjaehrlich</option>
-                <option value="Jaehrlich">Jaehrlich</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Letzte Pruefung</label>
-              <input
-                type="date"
-                value={orgHeader.lastReviewDate}
-                onChange={e => handleOrgHeaderChange('lastReviewDate', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-600 mb-1">Naechste Pruefung</label>
-              <input
-                type="date"
-                value={orgHeader.nextReviewDate}
-                onChange={e => handleOrgHeaderChange('nextReviewDate', e.target.value)}
-                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Revisions */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h4 className="text-sm font-semibold text-gray-900">Aenderungshistorie</h4>
-            <button
-              onClick={handleAddRevision}
-              className="text-xs bg-purple-50 text-purple-700 hover:bg-purple-100 rounded-lg px-3 py-1.5 font-medium transition"
-            >
-              + Revision hinzufuegen
-            </button>
-          </div>
-          {revisions.length === 0 ? (
-            <p className="text-sm text-gray-400">
-              Noch keine Revisionen. Die Erstversion wird automatisch im Dokument eingefuegt.
-            </p>
-          ) : (
-            <div className="space-y-3">
-              {revisions.map((rev, idx) => (
-                <div key={idx} className="grid grid-cols-[80px_120px_1fr_1fr_32px] gap-2 items-start">
-                  <input
-                    type="text"
-                    value={rev.version}
-                    onChange={e => handleUpdateRevision(idx, 'version', e.target.value)}
-                    className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
-                    placeholder="1.1"
-                  />
-                  <input
-                    type="date"
-                    value={rev.date}
-                    onChange={e => handleUpdateRevision(idx, 'date', e.target.value)}
-                    className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
-                  />
-                  <input
-                    type="text"
-                    value={rev.author}
-                    onChange={e => handleUpdateRevision(idx, 'author', e.target.value)}
-                    className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
-                    placeholder="Autor"
-                  />
-                  <input
-                    type="text"
-                    value={rev.changes}
-                    onChange={e => handleUpdateRevision(idx, 'changes', e.target.value)}
-                    className="rounded-lg border border-gray-300 px-2 py-1.5 text-xs"
-                    placeholder="Beschreibung der Aenderungen"
-                  />
-                  <button
-                    onClick={() => handleRemoveRevision(idx)}
-                    className="text-red-400 hover:text-red-600 p-1"
-                    title="Revision entfernen"
-                  >
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
-
-        {/* Document Preview */}
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <h4 className="text-sm font-semibold text-gray-900 mb-4">Dokument-Vorschau</h4>
-          <div className="bg-gray-50 rounded-lg p-6 border border-gray-200">
-            {/* Cover preview */}
-            <div className="text-center mb-6">
-              <div className="text-2xl font-bold text-purple-700 mb-1">Loeschkonzept</div>
-              <div className="text-sm text-purple-500 mb-4">gemaess Art. 5/17/30 DSGVO</div>
-              <div className="text-sm text-gray-600">
-                {orgHeader.organizationName || <span className="text-gray-400 italic">Organisation nicht angegeben</span>}
-              </div>
-              <div className="text-xs text-gray-400 mt-2">
-                Version {orgHeader.loeschkonzeptVersion} | {new Date().toLocaleDateString('de-DE')}
-              </div>
-            </div>
-
-            {/* Section list */}
-            <div className="border-t border-gray-200 pt-4">
-              <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">12 Sektionen</div>
-              <div className="grid grid-cols-2 gap-1 text-xs text-gray-600">
-                <div>1. Ziel und Zweck</div>
-                <div>7. Auftragsverarbeiter</div>
-                <div>2. Geltungsbereich</div>
-                <div>8. Legal Hold Verfahren</div>
-                <div>3. Grundprinzipien</div>
-                <div>9. Verantwortlichkeiten</div>
-                <div>4. Loeschregeln-Uebersicht</div>
-                <div>10. Pruef-/Revisionszyklus</div>
-                <div>5. Detaillierte Loeschregeln</div>
-                <div>11. Compliance-Status</div>
-                <div>6. VVT-Verknuepfung</div>
-                <div>12. Aenderungshistorie</div>
-              </div>
-            </div>
-
-            {/* Stats */}
-            <div className="border-t border-gray-200 pt-4 mt-4 flex gap-6 text-xs text-gray-500">
-              <span><strong className="text-gray-700">{activePolicies.length}</strong> Loeschregeln</span>
-              <span><strong className="text-gray-700">{policies.filter(p => p.linkedVVTActivityIds.length > 0).length}</strong> VVT-Verknuepfungen</span>
-              <span><strong className="text-gray-700">{policies.filter(p => p.linkedVendorIds.length > 0).length}</strong> Vendor-Verknuepfungen</span>
-              <span><strong className="text-gray-700">{revisions.length}</strong> Revisionen</span>
-              {complianceResult && (
-                <span>Compliance-Score: <strong className={complianceResult.score >= 75 ? 'text-green-600' : complianceResult.score >= 50 ? 'text-yellow-600' : 'text-red-600'}>{complianceResult.score}/100</strong></span>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // ==========================================================================
-  // Main render
-  // ==========================================================================
+  // --------------------------------------------------------------------------
+  // Render
+  // --------------------------------------------------------------------------
 
   if (!loaded) {
     return <div className="p-8 text-center text-gray-500">Lade Loeschfristen...</div>
@@ -2710,11 +386,82 @@ export default function LoeschfristenPage() {
       </div>
 
       {/* Tab content */}
-      {tab === 'uebersicht' && renderUebersicht()}
-      {tab === 'editor' && renderEditor()}
-      {tab === 'generator' && renderGenerator()}
-      {tab === 'export' && renderExport()}
-      {tab === 'loeschkonzept' && renderLoeschkonzept()}
+      {tab === 'uebersicht' && (
+        <UebersichtTab
+          policies={policies}
+          filteredPolicies={filteredPolicies}
+          stats={stats}
+          searchQuery={searchQuery}
+          setSearchQuery={setSearchQuery}
+          filter={filter}
+          setFilter={setFilter}
+          driverFilter={driverFilter}
+          setDriverFilter={setDriverFilter}
+          setTab={(t) => setTab(t as Tab)}
+          setEditingId={setEditingId}
+          createNewPolicy={createNewPolicy}
+        />
+      )}
+
+      {tab === 'editor' && (
+        <EditorTab
+          policies={policies}
+          editingId={editingId}
+          editingPolicy={editingPolicy}
+          vvtActivities={vvtActivities}
+          vendorList={vendorList}
+          saving={saving}
+          setEditingId={setEditingId}
+          setTab={(t) => setTab(t as Tab)}
+          updatePolicy={updatePolicy}
+          createNewPolicy={createNewPolicy}
+          deletePolicy={deletePolicy}
+          addLegalHold={addLegalHold}
+          removeLegalHold={removeLegalHold}
+          addStorageLocation={addStorageLocation}
+          removeStorageLocation={removeStorageLocation}
+          handleSaveAndClose={handleSaveAndClose}
+        />
+      )}
+
+      {tab === 'generator' && (
+        <GeneratorTab
+          profilingStep={profilingStep}
+          setProfilingStep={setProfilingStep}
+          profilingAnswers={profilingAnswers}
+          handleProfilingAnswer={handleProfilingAnswer}
+          generatedPolicies={generatedPolicies}
+          setGeneratedPolicies={setGeneratedPolicies}
+          selectedGenerated={selectedGenerated}
+          setSelectedGenerated={setSelectedGenerated}
+          handleGenerate={handleGenerate}
+          adoptGeneratedPolicies={adoptGeneratedPolicies}
+        />
+      )}
+
+      {tab === 'export' && (
+        <ExportTab
+          policies={policies}
+          complianceResult={complianceResult}
+          runCompliance={runCompliance}
+          setEditingId={setEditingId}
+          setTab={(t) => setTab(t as Tab)}
+        />
+      )}
+
+      {tab === 'loeschkonzept' && (
+        <LoeschkonzeptTab
+          policies={policies}
+          orgHeader={orgHeader}
+          revisions={revisions}
+          complianceResult={complianceResult}
+          vvtActivities={vvtActivities}
+          onOrgHeaderChange={handleOrgHeaderChange}
+          onAddRevision={handleAddRevision}
+          onUpdateRevision={handleUpdateRevision}
+          onRemoveRevision={handleRemoveRevision}
+        />
+      )}
     </div>
   )
 }
diff --git a/admin-compliance/app/sdk/vvt/_components/TabDokument.tsx b/admin-compliance/app/sdk/vvt/_components/TabDokument.tsx
new file mode 100644
index 0000000..4ffa636
--- /dev/null
+++ b/admin-compliance/app/sdk/vvt/_components/TabDokument.tsx
@@ -0,0 +1,284 @@
+'use client'
+
+import {
+  ART9_CATEGORIES, STATUS_COLORS, STATUS_LABELS,
+  BUSINESS_FUNCTION_LABELS, PROTECTION_LEVEL_LABELS, DEPLOYMENT_LABELS,
+  REVIEW_INTERVAL_LABELS,
+} from '@/lib/sdk/vvt-types'
+import type { VVTActivity, VVTOrganizationHeader } from '@/lib/sdk/vvt-types'
+import {
+  DATA_SUBJECT_CATEGORY_META, PERSONAL_DATA_CATEGORY_META,
+  LEGAL_BASIS_META, TRANSFER_MECHANISM_META,
+} from '@/lib/sdk/vvt-types'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function resolveDataSubjects(cats: string[]) {
+  return cats.map(c => DATA_SUBJECT_CATEGORY_META[c as keyof typeof DATA_SUBJECT_CATEGORY_META]?.de || c).join(', ')
+}
+
+function resolveDataCategories(cats: string[]) {
+  return cats.map(c => PERSONAL_DATA_CATEGORY_META[c as keyof typeof PERSONAL_DATA_CATEGORY_META]?.label?.de || c).join(', ')
+}
+
+function resolveLegalBasis(lb: { type: string; description?: string; reference?: string }) {
+  const meta = LEGAL_BASIS_META[lb.type as keyof typeof LEGAL_BASIS_META]
+  const label = meta ? `${meta.label.de} (${meta.article})` : lb.type
+  return lb.reference ? `${label} — ${lb.reference}` : label
+}
+
+function resolveTransferMechanism(m: string) {
+  const meta = TRANSFER_MECHANISM_META[m as keyof typeof TRANSFER_MECHANISM_META]
+  return meta?.de || m
+}
+
+function buildDocumentHtml(activities: VVTActivity[], orgHeader: VVTOrganizationHeader, today: string): string {
+  const approvedActivities = activities.filter(a => a.status !== 'ARCHIVED')
+
+  let html = `
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Verzeichnis von Verarbeitungstaetigkeiten — ${orgHeader.organizationName || 'Organisation'}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 40px 30px; line-height: 1.6; color: #1a202c; font-size: 11pt; }
+    .cover { text-align: center; padding: 80px 0 60px; page-break-after: always; }
+    .cover h1 { font-size: 24pt; color: #5b21b6; margin-bottom: 8px; }
+    .cover .subtitle { font-size: 14pt; color: #6b7280; margin-bottom: 40px; }
+    .cover .org-info { font-size: 11pt; color: #374151; line-height: 2; }
+    .cover .legal-ref { margin-top: 40px; padding: 16px; background: #f5f3ff; border-radius: 8px; font-size: 10pt; color: #5b21b6; }
+    .toc { page-break-after: always; }
+    .toc h2 { font-size: 16pt; color: #5b21b6; border-bottom: 2px solid #5b21b6; padding-bottom: 6px; margin-bottom: 16px; }
+    .toc-entry { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #d1d5db; font-size: 10pt; }
+    .toc-entry .toc-id { color: #6b7280; font-family: monospace; }
+    .activity { page-break-inside: avoid; margin-bottom: 30px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; }
+    .activity-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #7c3aed; }
+    .activity-header .vvt-id { font-family: monospace; font-size: 10pt; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
+    .activity-header h3 { font-size: 14pt; color: #1f2937; }
+    .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 8pt; font-weight: 600; margin-left: 6px; }
+    .badge-status { background: #dbeafe; color: #1e40af; }
+    .badge-art9 { background: #fee2e2; color: #991b1b; }
+    .badge-dpia { background: #f3e8ff; color: #6b21a8; }
+    .badge-thirdcountry { background: #ffedd5; color: #9a3412; }
+    .field-group { margin-bottom: 12px; }
+    .field-label { font-size: 9pt; font-weight: 600; color: #5b21b6; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
+    .field-value { font-size: 10pt; color: #374151; }
+    .field-value.empty { color: #9ca3af; font-style: italic; }
+    table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10pt; }
+    th { background: #f5f3ff; color: #5b21b6; font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; }
+    td { padding: 6px 10px; border: 1px solid #e5e7eb; vertical-align: top; }
+    .page-footer { margin-top: 40px; padding-top: 16px; border-top: 2px solid #e5e7eb; font-size: 9pt; color: #9ca3af; display: flex; justify-content: space-between; }
+    @media print { body { margin: 15mm; padding: 0; max-width: none; } .activity { page-break-inside: avoid; } .cover { page-break-after: always; } .toc { page-break-after: always; } h2, h3 { page-break-after: avoid; } table { page-break-inside: avoid; } .no-print { display: none; } }
+  </style>
+</head>
+<body>
+<div class="cover">
+  <h1>Verzeichnis von Verarbeitungstaetigkeiten</h1>
+  <div class="subtitle">gemaess Art. 30 Abs. 1 DSGVO</div>
+  <div class="org-info">
+    <strong>${orgHeader.organizationName || '(Organisation eintragen)'}</strong><br/>
+    ${orgHeader.industry ? `Branche: ${orgHeader.industry}<br/>` : ''}
+    ${orgHeader.employeeCount ? `Mitarbeiter: ${orgHeader.employeeCount}<br/>` : ''}
+    ${orgHeader.locations && orgHeader.locations.length > 0 ? `Standorte: ${orgHeader.locations.join(', ')}<br/>` : ''}
+    ${orgHeader.dpoName ? `<br/>Datenschutzbeauftragter: ${orgHeader.dpoName}<br/>` : ''}
+    ${orgHeader.dpoContact ? `Kontakt DSB: ${orgHeader.dpoContact}<br/>` : ''}
+  </div>
+  <div class="legal-ref">
+    VVT-Version: ${orgHeader.vvtVersion} | Stand: ${today}
+    ${orgHeader.lastReviewDate ? ` | Letzte Pruefung: ${new Date(orgHeader.lastReviewDate).toLocaleDateString('de-DE')}` : ''}
+    ${orgHeader.nextReviewDate ? ` | Naechste Pruefung: ${new Date(orgHeader.nextReviewDate).toLocaleDateString('de-DE')}` : ''}
+    | Pruefintervall: ${REVIEW_INTERVAL_LABELS[orgHeader.reviewInterval] || orgHeader.reviewInterval}
+  </div>
+</div>
+<div class="toc">
+  <h2>Inhaltsverzeichnis</h2>
+  <p style="margin-bottom:12px;font-size:10pt;color:#6b7280;">
+    ${approvedActivities.length} Verarbeitungstaetigkeiten in ${[...new Set(approvedActivities.map(a => a.businessFunction))].length} Geschaeftsbereichen
+  </p>
+  ${approvedActivities.map((a) => `
+    <div class="toc-entry">
+      <span><span class="toc-id">${a.vvtId}</span> ${a.name || '(Ohne Namen)'}</span>
+      <span style="color:#6b7280;">${BUSINESS_FUNCTION_LABELS[a.businessFunction]} — ${STATUS_LABELS[a.status]}</span>
+    </div>
+  `).join('')}
+</div>
+`
+
+  for (const a of approvedActivities) {
+    const hasArt9 = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
+    const hasThirdCountry = a.thirdCountryTransfers.length > 0
+
+    html += `
+<div class="activity">
+  <div class="activity-header">
+    <span class="vvt-id">${a.vvtId}</span>
+    <h3>${a.name || '(Ohne Namen)'}</h3>
+    <span class="badge badge-status">${STATUS_LABELS[a.status]}</span>
+    ${hasArt9 ? '<span class="badge badge-art9">Art. 9</span>' : ''}
+    ${a.dpiaRequired ? '<span class="badge badge-dpia">DSFA</span>' : ''}
+    ${hasThirdCountry ? '<span class="badge badge-thirdcountry">Drittland</span>' : ''}
+  </div>
+  ${a.description ? `<div class="field-group"><div class="field-label">Beschreibung</div><div class="field-value">${a.description}</div></div>` : ''}
+  <table>
+    <tr><th style="width:35%">Pflichtfeld (Art. 30)</th><th>Inhalt</th></tr>
+    <tr><td><strong>Verantwortlicher</strong></td><td>${a.responsible || `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
+    <tr><td><strong>Geschaeftsbereich</strong></td><td>${BUSINESS_FUNCTION_LABELS[a.businessFunction]}</td></tr>
+    <tr><td><strong>Zwecke der Verarbeitung</strong></td><td>${a.purposes.length > 0 ? a.purposes.join('; ') : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
+    <tr><td><strong>Rechtsgrundlage(n)</strong></td><td>${a.legalBases.length > 0 ? a.legalBases.map(resolveLegalBasis).join('<br/>') : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
+    <tr><td><strong>Kategorien betroffener Personen</strong></td><td>${a.dataSubjectCategories.length > 0 ? resolveDataSubjects(a.dataSubjectCategories) : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
+    <tr><td><strong>Kategorien personenbezogener Daten</strong></td><td>${a.personalDataCategories.length > 0 ? resolveDataCategories(a.personalDataCategories) : `<span class="field-value empty">nicht angegeben</span>`}${hasArt9 ? '<br/><em style="color:#991b1b;">Enthalt besondere Kategorien nach Art. 9 DSGVO</em>' : ''}</td></tr>
+    <tr><td><strong>Empfaengerkategorien</strong></td><td>${a.recipientCategories.length > 0 ? a.recipientCategories.map(r => `${r.name} (${r.type})`).join('; ') : `<span class="field-value empty">keine</span>`}</td></tr>
+    <tr><td><strong>Uebermittlung an Drittlaender</strong></td><td>${hasThirdCountry ? a.thirdCountryTransfers.map(t => `${t.country}: ${t.recipient} — ${resolveTransferMechanism(t.transferMechanism)}`).join('<br/>') : 'Keine Drittlanduebermittlung'}</td></tr>
+    <tr><td><strong>Loeschfristen</strong></td><td>${a.retentionPeriod.description || `<span class="field-value empty">nicht angegeben</span>`}${a.retentionPeriod.legalBasis ? `<br/><em>Rechtsgrundlage: ${a.retentionPeriod.legalBasis}</em>` : ''}${a.retentionPeriod.deletionProcedure ? `<br/><em>Verfahren: ${a.retentionPeriod.deletionProcedure}</em>` : ''}</td></tr>
+    <tr><td><strong>TOM (Art. 32 DSGVO)</strong></td><td>${a.tomDescription || `<span class="field-value empty">nicht beschrieben</span>`}</td></tr>
+  </table>
+  ${a.structuredToms && (a.structuredToms.accessControl.length > 0 || a.structuredToms.confidentiality.length > 0 || a.structuredToms.integrity.length > 0 || a.structuredToms.availability.length > 0 || a.structuredToms.separation.length > 0) ? `
+  <div class="field-group" style="margin-top:10px;">
+    <div class="field-label">Strukturierte TOMs</div>
+    <table>
+      <tr><th>Kategorie</th><th>Massnahmen</th></tr>
+      ${a.structuredToms.accessControl.length > 0 ? `<tr><td>Zugriffskontrolle</td><td>${a.structuredToms.accessControl.join(', ')}</td></tr>` : ''}
+      ${a.structuredToms.confidentiality.length > 0 ? `<tr><td>Vertraulichkeit</td><td>${a.structuredToms.confidentiality.join(', ')}</td></tr>` : ''}
+      ${a.structuredToms.integrity.length > 0 ? `<tr><td>Integritaet</td><td>${a.structuredToms.integrity.join(', ')}</td></tr>` : ''}
+      ${a.structuredToms.availability.length > 0 ? `<tr><td>Verfuegbarkeit</td><td>${a.structuredToms.availability.join(', ')}</td></tr>` : ''}
+      ${a.structuredToms.separation.length > 0 ? `<tr><td>Trennbarkeit</td><td>${a.structuredToms.separation.join(', ')}</td></tr>` : ''}
+    </table>
+  </div>
+  ` : ''}
+  <div style="margin-top:8px;font-size:9pt;color:#9ca3af;">
+    Erstellt: ${new Date(a.createdAt).toLocaleDateString('de-DE')} | Aktualisiert: ${new Date(a.updatedAt).toLocaleDateString('de-DE')}
+    ${a.dpiaRequired ? ' | DSFA erforderlich' : ''}
+    | Schutzniveau: ${PROTECTION_LEVEL_LABELS[a.protectionLevel]}
+    | Deployment: ${DEPLOYMENT_LABELS[a.deploymentModel]}
+  </div>
+</div>
+`
+  }
+
+  html += `
+<div class="page-footer">
+  <span>Verzeichnis von Verarbeitungstaetigkeiten — ${orgHeader.organizationName}</span>
+  <span>Stand: ${today} | Version ${orgHeader.vvtVersion}</span>
+</div>
+</body>
+</html>`
+
+  return html
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TabDokument({ activities, orgHeader }: { activities: VVTActivity[]; orgHeader: VVTOrganizationHeader }) {
+  const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+  const nonArchivedActivities = activities.filter(a => a.status !== 'ARCHIVED')
+
+  const handlePrintDocument = () => {
+    const htmlContent = buildDocumentHtml(activities, orgHeader, today)
+    const printWindow = window.open('', '_blank')
+    if (printWindow) {
+      printWindow.document.write(htmlContent)
+      printWindow.document.close()
+      printWindow.focus()
+      setTimeout(() => printWindow.print(), 300)
+    }
+  }
+
+  const handleDownloadHtml = () => {
+    const htmlContent = buildDocumentHtml(activities, orgHeader, today)
+    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `vvt-dokument-${new Date().toISOString().split('T')[0]}.html`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">VVT-Dokument (Art. 30 DSGVO)</h3>
+            <p className="text-sm text-gray-500 mt-0.5">
+              Druckfertiges Verarbeitungsverzeichnis mit Deckblatt, Inhaltsverzeichnis und allen {nonArchivedActivities.length} Verarbeitungstaetigkeiten.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button onClick={handleDownloadHtml} disabled={nonArchivedActivities.length === 0}
+              className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm">
+              <svg className="w-4 h-4" 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>
+              HTML herunterladen
+            </button>
+            <button onClick={handlePrintDocument} disabled={nonArchivedActivities.length === 0}
+              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+              </svg>
+              Als PDF drucken
+            </button>
+          </div>
+        </div>
+        {nonArchivedActivities.length === 0 && (
+          <div className="p-6 bg-gray-50 rounded-lg text-center text-gray-500">
+            Keine Verarbeitungstaetigkeiten vorhanden. Erstellen Sie zuerst Eintraege im Tab &quot;Verzeichnis&quot;.
+          </div>
+        )}
+      </div>
+
+      {nonArchivedActivities.length > 0 && (
+        <div className="bg-white rounded-xl border border-gray-200 p-6">
+          <h4 className="text-sm font-medium text-gray-700 mb-4">Vorschau — Inhalt des Dokuments</h4>
+          <div className="border border-purple-200 rounded-lg p-6 mb-4 text-center bg-purple-50/30">
+            <div className="text-xs text-purple-500 uppercase tracking-widest mb-2">Deckblatt</div>
+            <div className="text-xl font-bold text-purple-800 mb-1">Verzeichnis von Verarbeitungstaetigkeiten</div>
+            <div className="text-sm text-gray-500 mb-3">gemaess Art. 30 Abs. 1 DSGVO</div>
+            <div className="text-sm text-gray-700">
+              <strong>{orgHeader.organizationName || '(Organisation eintragen)'}</strong>
+              {orgHeader.dpoName && <><br />DSB: {orgHeader.dpoName}</>}
+              {orgHeader.dpoContact && <> ({orgHeader.dpoContact})</>}
+            </div>
+            <div className="text-xs text-gray-400 mt-3">
+              Version {orgHeader.vvtVersion} | Stand: {today}
+            </div>
+          </div>
+          <div className="space-y-3">
+            {nonArchivedActivities.map((a) => {
+              const hasArt9 = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
+              return (
+                <div key={a.id} className="border border-gray-200 rounded-lg p-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="font-mono text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">{a.vvtId}</span>
+                    <span className="text-sm font-semibold text-gray-900">{a.name || '(Ohne Namen)'}</span>
+                    <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[a.status]}`}>{STATUS_LABELS[a.status]}</span>
+                    {hasArt9 && <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">Art. 9</span>}
+                  </div>
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-1 text-xs text-gray-600">
+                    <div><span className="font-medium text-gray-500">Zweck:</span> {a.purposes.join(', ') || '—'}</div>
+                    <div><span className="font-medium text-gray-500">Rechtsgrundlage:</span> {a.legalBases.map(lb => lb.type).join(', ') || '—'}</div>
+                    <div><span className="font-medium text-gray-500">Betroffene:</span> {a.dataSubjectCategories.length || 0} Kategorien</div>
+                    <div><span className="font-medium text-gray-500">Datenkategorien:</span> {a.personalDataCategories.length || 0}</div>
+                    <div><span className="font-medium text-gray-500">Empfaenger:</span> {a.recipientCategories.length || 0}</div>
+                    <div><span className="font-medium text-gray-500">Loeschfrist:</span> {a.retentionPeriod.description || '—'}</div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700">
+            <strong>Tipp:</strong> Klicken Sie auf &quot;Als PDF drucken&quot; fuer das vollstaendige, formatierte Dokument mit allen
+            Pflichtfeldern nach Art. 30 DSGVO — inklusive Deckblatt und Inhaltsverzeichnis.
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/vvt/_components/TabProcessor.tsx b/admin-compliance/app/sdk/vvt/_components/TabProcessor.tsx
new file mode 100644
index 0000000..6c6ddd5
--- /dev/null
+++ b/admin-compliance/app/sdk/vvt/_components/TabProcessor.tsx
@@ -0,0 +1,336 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import type { VVTOrganizationHeader } from '@/lib/sdk/vvt-types'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface VendorForProcessor {
+  id: string
+  name: string
+  role: string
+  serviceDescription: string
+  country: string
+  processingLocations: { country: string; region?: string; isEU: boolean; isAdequate: boolean }[]
+  transferMechanisms: string[]
+  certifications: { type: string; expirationDate?: string }[]
+  status: string
+  primaryContact: { name: string; email: string; phone?: string }
+  dpoContact?: { name: string; email: string }
+  contractTypes: string[]
+  inherentRiskScore: number
+  residualRiskScore: number
+  nextReviewDate?: string
+  processingActivityIds: string[]
+  notes?: string
+  createdAt: string
+  updatedAt: string
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const VENDOR_STATUS_LABELS: Record<string, string> = {
+  ACTIVE: 'Aktiv', PENDING_REVIEW: 'In Pruefung', APPROVED: 'Genehmigt',
+  SUSPENDED: 'Ausgesetzt', ARCHIVED: 'Archiviert', DRAFT: 'Entwurf', REVIEW: 'In Pruefung',
+}
+
+const VENDOR_STATUS_COLORS: Record<string, string> = {
+  ACTIVE: 'bg-green-100 text-green-700', PENDING_REVIEW: 'bg-yellow-100 text-yellow-700',
+  APPROVED: 'bg-green-100 text-green-800', SUSPENDED: 'bg-red-100 text-red-700',
+  ARCHIVED: 'bg-gray-100 text-gray-600', DRAFT: 'bg-gray-100 text-gray-600',
+  REVIEW: 'bg-yellow-100 text-yellow-700',
+}
+
+const ROLE_LABELS: Record<string, string> = {
+  PROCESSOR: 'Auftragsverarbeiter', SUB_PROCESSOR: 'Unterauftragsverarbeiter',
+}
+
+function riskColor(score: number): string {
+  if (score <= 3) return 'bg-green-100 text-green-700'
+  if (score <= 6) return 'bg-yellow-100 text-yellow-700'
+  return 'bg-red-100 text-red-700'
+}
+
+// ---------------------------------------------------------------------------
+// API
+// ---------------------------------------------------------------------------
+
+async function apiListProcessorVendors(): Promise<VendorForProcessor[]> {
+  const res = await fetch('/api/sdk/v1/vendor-compliance/vendors?limit=500')
+  if (!res.ok) throw new Error(`Vendor API error: ${res.status}`)
+  const data = await res.json()
+  const items: any[] = data?.data?.items ?? []
+  return items
+    .filter((v: any) => v.role === 'PROCESSOR' || v.role === 'SUB_PROCESSOR')
+    .map((v: any) => ({
+      id: v.id, name: v.name ?? '', role: v.role ?? '',
+      serviceDescription: v.serviceDescription ?? v.service_description ?? '',
+      country: v.country ?? '',
+      processingLocations: (v.processingLocations ?? v.processing_locations ?? []).map((l: any) => ({
+        country: l.country ?? '', region: l.region,
+        isEU: l.isEU ?? l.is_eu ?? false, isAdequate: l.isAdequate ?? l.is_adequate ?? false,
+      })),
+      transferMechanisms: v.transferMechanisms ?? v.transfer_mechanisms ?? [],
+      certifications: (v.certifications ?? []).map((c: any) => ({
+        type: c.type ?? '', expirationDate: c.expirationDate ?? c.expiration_date,
+      })),
+      status: v.status ?? 'ACTIVE',
+      primaryContact: {
+        name: v.primaryContact?.name ?? v.primary_contact?.name ?? '',
+        email: v.primaryContact?.email ?? v.primary_contact?.email ?? '',
+        phone: v.primaryContact?.phone ?? v.primary_contact?.phone,
+      },
+      dpoContact: (v.dpoContact ?? v.dpo_contact) ? {
+        name: (v.dpoContact ?? v.dpo_contact).name ?? '',
+        email: (v.dpoContact ?? v.dpo_contact).email ?? '',
+      } : undefined,
+      contractTypes: v.contractTypes ?? v.contract_types ?? [],
+      inherentRiskScore: v.inherentRiskScore ?? v.inherent_risk_score ?? 0,
+      residualRiskScore: v.residualRiskScore ?? v.residual_risk_score ?? 0,
+      nextReviewDate: v.nextReviewDate ?? v.next_review_date,
+      processingActivityIds: v.processingActivityIds ?? v.processing_activity_ids ?? [],
+      notes: v.notes, createdAt: v.createdAt ?? v.created_at ?? '',
+      updatedAt: v.updatedAt ?? v.updated_at ?? '',
+    }))
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TabProcessor({ orgHeader }: { orgHeader: VVTOrganizationHeader }) {
+  const [vendors, setVendors] = useState<VendorForProcessor[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const loadVendors = () => {
+    setLoading(true)
+    setError(null)
+    apiListProcessorVendors()
+      .then(data => setVendors(data))
+      .catch(err => setError(err.message ?? 'Fehler beim Laden der Auftragsverarbeiter'))
+      .finally(() => setLoading(false))
+  }
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    apiListProcessorVendors()
+      .then(data => { if (!cancelled) setVendors(data) })
+      .catch(err => { if (!cancelled) setError(err.message ?? 'Fehler beim Laden der Auftragsverarbeiter') })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [])
+
+  const handlePrintProcessorDoc = () => {
+    const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+    const activeVendors = vendors.filter(v => v.status !== 'ARCHIVED')
+    const subProcessors = vendors.filter(v => v.role === 'SUB_PROCESSOR')
+
+    let html = `<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8">
+  <title>Verzeichnis Auftragsverarbeiter — Art. 30 Abs. 2 DSGVO</title>
+  <style>* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 40px 30px; line-height: 1.6; color: #1a202c; font-size: 11pt; } .cover { text-align: center; padding: 80px 0 60px; page-break-after: always; } .cover h1 { font-size: 22pt; color: #5b21b6; margin-bottom: 8px; } .cover .subtitle { font-size: 13pt; color: #6b7280; margin-bottom: 40px; } .cover .org-info { font-size: 11pt; color: #374151; line-height: 2; } .record { page-break-inside: avoid; margin-bottom: 30px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; } .record-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #7c3aed; } .record-header .vvt-id { font-family: monospace; font-size: 10pt; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; } .record-header h3 { font-size: 13pt; color: #1f2937; } table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10pt; } th { background: #f5f3ff; color: #5b21b6; font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; } td { padding: 6px 10px; border: 1px solid #e5e7eb; vertical-align: top; } .page-footer { margin-top: 40px; padding-top: 16px; border-top: 2px solid #e5e7eb; font-size: 9pt; color: #9ca3af; display: flex; justify-content: space-between; } @media print { body { margin: 15mm; padding: 0; max-width: none; } .record { page-break-inside: avoid; } }</style>
+</head><body>
+<div class="cover">
+  <h1>Verzeichnis aller Verarbeitungstaetigkeiten</h1>
+  <div class="subtitle">als Auftragsverarbeiter gemaess Art. 30 Abs. 2 DSGVO</div>
+  <div class="org-info"><strong>${orgHeader.organizationName || '(Organisation eintragen)'}</strong><br/>${orgHeader.dpoName ? `Datenschutzbeauftragter: ${orgHeader.dpoName}<br/>` : ''}Stand: ${today}</div>
+</div>`
+
+    for (const v of activeVendors) {
+      const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
+      const thirdCountryHtml = thirdCountryLocations.length > 0
+        ? thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ') +
+          (v.transferMechanisms.length > 0 ? `<br/>Garantien: ${v.transferMechanisms.join(', ')}` : '')
+        : 'Keine Drittlanduebermittlung'
+      const subProcessorHtml = subProcessors.length > 0
+        ? subProcessors.map(s => `${s.name} — ${s.serviceDescription || s.country}`).join('<br/>')
+        : 'Keine'
+
+      html += `<div class="record"><div class="record-header"><span class="vvt-id">${ROLE_LABELS[v.role] ?? v.role}</span><h3>${v.name}</h3></div>
+  <table><tr><th style="width:35%">Pflichtfeld (Art. 30 Abs. 2)</th><th>Inhalt</th></tr>
+    <tr><td><strong>Name/Kontaktdaten des Auftragsverarbeiters</strong></td><td>${orgHeader.organizationName}${orgHeader.dpoContact ? `<br/>Kontakt: ${orgHeader.dpoContact}` : ''}</td></tr>
+    <tr><td><strong>Name/Kontaktdaten des Verantwortlichen</strong></td><td>${v.name}${v.primaryContact.email ? `<br/>Kontakt: ${v.primaryContact.email}` : ''}</td></tr>
+    <tr><td><strong>Kategorien von Verarbeitungen</strong></td><td>${v.serviceDescription || '<em style="color:#9ca3af;">nicht angegeben</em>'}</td></tr>
+    <tr><td><strong>Unterauftragsverarbeiter</strong></td><td>${subProcessorHtml}</td></tr>
+    <tr><td><strong>Uebermittlung an Drittlaender</strong></td><td>${thirdCountryHtml}</td></tr>
+    <tr><td><strong>TOM (Art. 32 DSGVO)</strong></td><td>Siehe TOM-Dokumentation im Vendor-Compliance-Modul</td></tr>
+  </table></div>`
+    }
+
+    html += `<div class="page-footer"><span>Auftragsverarbeiter-Verzeichnis — ${orgHeader.organizationName}</span><span>Stand: ${today}</span></div></body></html>`
+
+    const printWindow = window.open('', '_blank')
+    if (printWindow) {
+      printWindow.document.write(html)
+      printWindow.document.close()
+      printWindow.focus()
+      setTimeout(() => printWindow.print(), 300)
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-purple-50 border border-purple-200 rounded-xl p-4 flex items-start gap-3">
+        <svg className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" 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="flex-1">
+          <p className="text-sm text-purple-800">
+            Dieses Verzeichnis zeigt alle Auftragsverarbeiter aus dem Vendor Register.
+            Neue Auftragsverarbeiter hinzufuegen oder bestehende bearbeiten:
+          </p>
+          <a href="/sdk/vendor-compliance"
+            className="inline-flex items-center gap-1.5 mt-2 px-3 py-1.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+            </svg>
+            Zum Vendor Register
+          </a>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-xl border border-gray-200 p-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900">Auftragsverarbeiter-Verzeichnis (Art. 30 Abs. 2)</h3>
+            <p className="text-sm text-gray-500 mt-0.5">
+              Auftragsverarbeiter und Unterauftragsverarbeiter aus dem Vendor-Compliance-Modul (nur lesen).
+            </p>
+          </div>
+          {vendors.length > 0 && (
+            <button onClick={handlePrintProcessorDoc}
+              className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+              </svg>
+              Als PDF drucken
+            </button>
+          )}
+        </div>
+
+        {loading && (
+          <div className="p-8 text-center">
+            <div className="w-8 h-8 mx-auto border-2 border-purple-200 border-t-purple-600 rounded-full animate-spin mb-3" />
+            <p className="text-sm text-gray-500">Auftragsverarbeiter werden geladen...</p>
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="p-6 bg-red-50 border border-red-200 rounded-lg text-center">
+            <p className="text-sm text-red-700 mb-2">{error}</p>
+            <button onClick={loadVendors} className="text-sm text-red-600 underline hover:text-red-800">
+              Erneut versuchen
+            </button>
+          </div>
+        )}
+
+        {!loading && !error && vendors.length === 0 && (
+          <div className="p-8 bg-gray-50 rounded-lg text-center">
+            <div className="w-12 h-12 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-3">
+              <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            </div>
+            <h4 className="font-medium text-gray-700 mb-1">Keine Auftragsverarbeiter im Vendor Register</h4>
+            <p className="text-sm text-gray-500 max-w-md mx-auto">
+              Legen Sie Auftragsverarbeiter im Vendor Register an, damit sie hier automatisch erscheinen.
+            </p>
+            <a href="/sdk/vendor-compliance"
+              className="inline-flex items-center gap-1.5 mt-3 px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors">
+              Zum Vendor Register
+            </a>
+          </div>
+        )}
+
+        {!loading && !error && vendors.length > 0 && (
+          <div className="space-y-3">
+            {vendors.map(v => {
+              const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
+              return (
+                <div key={v.id} className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-200 transition-colors">
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1 flex-wrap">
+                        <h4 className="text-base font-semibold text-gray-900">{v.name}</h4>
+                        <span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">{ROLE_LABELS[v.role] ?? v.role}</span>
+                        <span className={`px-2 py-0.5 text-xs rounded-full ${VENDOR_STATUS_COLORS[v.status] ?? 'bg-gray-100 text-gray-600'}`}>
+                          {VENDOR_STATUS_LABELS[v.status] ?? v.status}
+                        </span>
+                      </div>
+                      {v.serviceDescription && <p className="text-sm text-gray-600 mt-1">{v.serviceDescription}</p>}
+                      <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
+                        {v.primaryContact.name && (
+                          <span className="flex items-center gap-1">
+                            <svg className="w-3.5 h-3.5" 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>
+                            {v.primaryContact.name}
+                          </span>
+                        )}
+                        {v.primaryContact.email && (
+                          <span className="flex items-center gap-1">
+                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                            </svg>
+                            {v.primaryContact.email}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-3 mt-2 flex-wrap">
+                        <span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.inherentRiskScore)}`}>Inherent: {v.inherentRiskScore}</span>
+                        <span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.residualRiskScore)}`}>Residual: {v.residualRiskScore}</span>
+                        {v.updatedAt && <span className="text-xs text-gray-400">Aktualisiert: {new Date(v.updatedAt).toLocaleDateString('de-DE')}</span>}
+                      </div>
+                      {thirdCountryLocations.length > 0 && (
+                        <div className="mt-2">
+                          <span className="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded">Drittlandtransfers:</span>
+                          <span className="text-xs text-gray-600 ml-1">
+                            {thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ')}
+                          </span>
+                        </div>
+                      )}
+                      {v.certifications.length > 0 && (
+                        <div className="flex items-center gap-2 mt-2 flex-wrap">
+                          {v.certifications.map((c, i) => (
+                            <span key={i} className="px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-700 border border-blue-200">
+                              {c.type}{c.expirationDate ? ` (bis ${new Date(c.expirationDate).toLocaleDateString('de-DE')})` : ''}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                    <div className="ml-4 flex-shrink-0">
+                      <a href="/sdk/vendor-compliance"
+                        className="px-3 py-1.5 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors inline-flex items-center gap-1">
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                        </svg>
+                        Im Vendor Register oeffnen
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+        <h4 className="text-sm font-medium text-amber-800 mb-1">Art. 30 Abs. 2 DSGVO — Pflichtangaben</h4>
+        <ul className="text-sm text-amber-700 space-y-1 ml-4 list-disc">
+          <li>Name und Kontaktdaten des/der Auftragsverarbeiter(s) und jedes Verantwortlichen</li>
+          <li>Kategorien von Verarbeitungen, die im Auftrag jedes Verantwortlichen durchgefuehrt werden</li>
+          <li>Uebermittlungen an Drittlaender einschliesslich Dokumentierung geeigneter Garantien</li>
+          <li>Allgemeine Beschreibung der technischen und organisatorischen Massnahmen (Art. 32 Abs. 1)</li>
+        </ul>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx b/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx
index 717ab59..9f9e2c8 100644
--- a/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx
+++ b/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx
@@ -12,11 +12,14 @@ import {
   generateActivities,
   prefillFromScopeAnswers,
 } from '@/lib/sdk/vvt-profiling'
+import { apiListTemplates, type ProcessTemplate } from './api'
+
+const PROTECTION_LEVEL_LABELS: Record<string, string> = { LOW: 'Niedrig', MEDIUM: 'Mittel', HIGH: 'Hoch', VERY_HIGH: 'Sehr hoch' }
 
 export function TabVerzeichnis({
   activities, allActivities, activeCount, draftCount, thirdCountryCount, art9Count,
   filter, setFilter, searchQuery, setSearchQuery, sortBy, setSortBy,
-  scopeAnswers, onEdit, onNew, onDelete, onAdoptGenerated,
+  scopeAnswers, onEdit, onNew, onDelete, onAdoptGenerated, onNewFromTemplate,
 }: {
   activities: VVTActivity[]
   allActivities: VVTActivity[]
@@ -35,9 +38,14 @@ export function TabVerzeichnis({
   onNew: () => void
   onDelete: (id: string) => void
   onAdoptGenerated: (activities: VVTActivity[]) => void
+  onNewFromTemplate: (templateId: string) => void
 }) {
   const [scopePreview, setScopePreview] = useState<VVTActivity[] | null>(null)
   const [isGenerating, setIsGenerating] = useState(false)
+  const [showTemplatePicker, setShowTemplatePicker] = useState(false)
+  const [templates, setTemplates] = useState<ProcessTemplate[]>([])
+  const [templateFilter, setTemplateFilter] = useState<string>('all')
+  const [templatesLoading, setTemplatesLoading] = useState(false)
 
   const handleGenerateFromScope = useCallback(() => {
     if (!scopeAnswers) return
@@ -176,6 +184,26 @@ export function TabVerzeichnis({
           <option value="date">Datum</option>
           <option value="status">Status</option>
         </select>
+        <button
+          onClick={async () => {
+            setShowTemplatePicker(true)
+            if (templates.length === 0) {
+              setTemplatesLoading(true)
+              try {
+                const t = await apiListTemplates()
+                setTemplates(t)
+              } finally {
+                setTemplatesLoading(false)
+              }
+            }
+          }}
+          className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm whitespace-nowrap"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414A1 1 0 0121 8.414V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
+          </svg>
+          Aus Vorlage
+        </button>
         <button
           onClick={onNew}
           className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm whitespace-nowrap"
@@ -207,6 +235,79 @@ export function TabVerzeichnis({
           </p>
         </div>
       )}
+
+      {/* Template Picker Modal */}
+      {showTemplatePicker && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
+            <div className="p-6 border-b border-gray-200">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-semibold text-gray-900">Vorlage auswaehlen</h3>
+                <button onClick={() => setShowTemplatePicker(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="flex gap-2 mt-4 flex-wrap">
+                {['all', 'hr', 'it', 'marketing', 'finance', 'legal', 'operations'].map(f => (
+                  <button key={f} onClick={() => setTemplateFilter(f)}
+                    className={`px-3 py-1 text-xs rounded-full ${templateFilter === f ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}>
+                    {f === 'all' ? 'Alle' : f.toUpperCase()}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="flex-1 overflow-y-auto p-6">
+              {templatesLoading ? (
+                <div className="flex items-center justify-center py-12">
+                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {templates
+                    .filter(t => templateFilter === 'all' || t.business_function === templateFilter)
+                    .map(t => (
+                      <button key={t.id} onClick={() => { onNewFromTemplate(t.id); setShowTemplatePicker(false) }}
+                        className="w-full text-left p-4 border border-gray-200 rounded-xl hover:border-indigo-300 hover:bg-indigo-50 transition-colors">
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1 flex-wrap">
+                              <span className="text-sm font-medium text-gray-900">{t.name}</span>
+                              <span className="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">{t.business_function.toUpperCase()}</span>
+                              <span className={`px-2 py-0.5 text-xs rounded-full ${PROTECTION_LEVEL_LABELS[t.protection_level] ? 'bg-gray-100 text-gray-600' : 'bg-gray-100 text-gray-600'}`}>
+                                {PROTECTION_LEVEL_LABELS[t.protection_level] || t.protection_level}
+                              </span>
+                              {t.dpia_required && (
+                                <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
+                              )}
+                            </div>
+                            {t.description && <p className="text-xs text-gray-500 line-clamp-1">{t.description}</p>}
+                            {t.tags.length > 0 && (
+                              <div className="flex gap-1 mt-1 flex-wrap">
+                                {t.tags.slice(0, 3).map(tag => (
+                                  <span key={tag} className="px-1.5 py-0.5 text-xs bg-gray-100 text-gray-500 rounded">{tag}</span>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                          {t.risk_score !== undefined && (
+                            <span className={`text-xs font-medium px-2 py-1 rounded-lg whitespace-nowrap ${
+                              t.risk_score >= 7 ? 'bg-red-100 text-red-700' : t.risk_score >= 4 ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'
+                            }`}>Risiko {t.risk_score}</span>
+                          )}
+                        </div>
+                      </button>
+                    ))}
+                  {templates.filter(t => templateFilter === 'all' || t.business_function === templateFilter).length === 0 && (
+                    <p className="text-center text-gray-500 py-8 text-sm">Keine Vorlagen fuer diesen Bereich gefunden.</p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -248,6 +349,9 @@ function ActivityCard({ activity, onEdit, onDelete }: { activity: VVTActivity; o
             {activity.dpiaRequired && (
               <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
             )}
+            {(activity as any).sourceTemplateId && (
+              <span className="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">Vorlage</span>
+            )}
           </div>
           <h3 className="text-base font-semibold text-gray-900 truncate">{activity.name || '(Ohne Namen)'}</h3>
           {activity.description && (
@@ -257,6 +361,12 @@ function ActivityCard({ activity, onEdit, onDelete }: { activity: VVTActivity; o
             <span>{BUSINESS_FUNCTION_LABELS[activity.businessFunction]}</span>
             <span>{activity.responsible || 'Kein Verantwortlicher'}</span>
             <span>Aktualisiert: {new Date(activity.updatedAt).toLocaleDateString('de-DE')}</span>
+            {(activity as any).art30Completeness !== undefined && (
+              <span className={`font-medium ${
+                (activity as any).art30Completeness >= 80 ? 'text-green-600' :
+                (activity as any).art30Completeness >= 50 ? 'text-yellow-600' : 'text-red-500'
+              }`}>Art.30: {(activity as any).art30Completeness}%</span>
+            )}
           </div>
         </div>
         <div className="flex items-center gap-1 ml-4">
diff --git a/admin-compliance/app/sdk/vvt/_components/api.ts b/admin-compliance/app/sdk/vvt/_components/api.ts
index 31ebc5a..f8e05d1 100644
--- a/admin-compliance/app/sdk/vvt/_components/api.ts
+++ b/admin-compliance/app/sdk/vvt/_components/api.ts
@@ -138,3 +138,25 @@ export async function apiUpsertOrganization(org: VVTOrganizationHeader): Promise
   if (!res.ok) throw new Error(`PUT organization failed: ${res.status}`)
   return orgHeaderFromApi(await res.json())
 }
+
+export interface ProcessTemplate {
+  id: string; name: string; description?: string; business_function: string
+  purpose_refs: string[]; legal_basis_refs: string[]; data_subject_refs: string[]
+  data_category_refs: string[]; recipient_refs: string[]; tom_refs: string[]
+  retention_rule_ref?: string; typical_systems: string[]
+  protection_level: string; dpia_required: boolean; risk_score?: number
+  tags: string[]; sort_order: number
+}
+
+export async function apiListTemplates(businessFunction?: string): Promise<ProcessTemplate[]> {
+  const params = businessFunction ? `?business_function=${businessFunction}` : ''
+  const res = await fetch(`${VVT_API_BASE}/templates${params}`)
+  if (!res.ok) return []
+  return res.json()
+}
+
+export async function apiInstantiateTemplate(templateId: string): Promise<VVTActivity> {
+  const res = await fetch(`${VVT_API_BASE}/templates/${templateId}/instantiate`, { method: 'POST' })
+  if (!res.ok) throw new Error(`POST instantiate failed: ${res.status}`)
+  return activityFromApi(await res.json())
+}
diff --git a/admin-compliance/app/sdk/vvt/page.tsx b/admin-compliance/app/sdk/vvt/page.tsx
index 09d386e..81fa832 100644
--- a/admin-compliance/app/sdk/vvt/page.tsx
+++ b/admin-compliance/app/sdk/vvt/page.tsx
@@ -1,14 +1,5 @@
 'use client'
 
-/**
- * VVT — Verarbeitungsverzeichnis (Art. 30 DSGVO)
- *
- * 3 Tabs:
- * 1. Verzeichnis (Uebersicht + "Aus Scope generieren")
- * 2. Verarbeitung bearbeiten (Detail-Editor)
- * 3. Export & Compliance
- */
-
 import { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 import StepHeader, { STEP_EXPLANATIONS } from '@/components/sdk/StepHeader/StepHeader'
@@ -26,207 +17,16 @@ import {
   apiUpdateActivity,
   apiDeleteActivity,
   apiUpsertOrganization,
+  apiInstantiateTemplate,
 } from './_components/api'
 import { TabVerzeichnis } from './_components/TabVerzeichnis'
 import { TabEditor } from './_components/TabEditor'
 import { TabExport } from './_components/TabExport'
+import { TabDokument } from './_components/TabDokument'
+import { TabProcessor } from './_components/TabProcessor'
 
 type Tab = 'verzeichnis' | 'editor' | 'export' | 'dokument' | 'processor'
 
-// =============================================================================
-// API CLIENT
-// =============================================================================
-
-const VVT_API_BASE = '/api/sdk/v1/compliance/vvt'
-
-function activityFromApi(raw: any): VVTActivity {
-  return {
-    id: raw.id,
-    vvtId: raw.vvt_id,
-    name: raw.name || '',
-    description: raw.description || '',
-    purposes: raw.purposes || [],
-    legalBases: raw.legal_bases || [],
-    dataSubjectCategories: raw.data_subject_categories || [],
-    personalDataCategories: raw.personal_data_categories || [],
-    recipientCategories: raw.recipient_categories || [],
-    thirdCountryTransfers: raw.third_country_transfers || [],
-    retentionPeriod: raw.retention_period || { description: '' },
-    tomDescription: raw.tom_description || '',
-    businessFunction: raw.business_function || 'other',
-    systems: raw.systems || [],
-    deploymentModel: raw.deployment_model || 'cloud',
-    dataSources: raw.data_sources || [],
-    dataFlows: raw.data_flows || [],
-    protectionLevel: raw.protection_level || 'MEDIUM',
-    dpiaRequired: raw.dpia_required || false,
-    structuredToms: raw.structured_toms || { accessControl: [], confidentiality: [], integrity: [], availability: [], separation: [] },
-    status: raw.status || 'DRAFT',
-    responsible: raw.responsible || '',
-    owner: raw.owner || '',
-    createdAt: raw.created_at || new Date().toISOString(),
-    updatedAt: raw.updated_at || raw.created_at || new Date().toISOString(),
-    // Library refs
-    purposeRefs: raw.purpose_refs || undefined,
-    legalBasisRefs: raw.legal_basis_refs || undefined,
-    dataSubjectRefs: raw.data_subject_refs || undefined,
-    dataCategoryRefs: raw.data_category_refs || undefined,
-    recipientRefs: raw.recipient_refs || undefined,
-    retentionRuleRef: raw.retention_rule_ref || undefined,
-    transferMechanismRefs: raw.transfer_mechanism_refs || undefined,
-    tomRefs: raw.tom_refs || undefined,
-    linkedLoeschfristenIds: raw.linked_loeschfristen_ids || undefined,
-    linkedTomMeasureIds: raw.linked_tom_measure_ids || undefined,
-    sourceTemplateId: raw.source_template_id || undefined,
-    riskScore: raw.risk_score ?? undefined,
-    art30Completeness: raw.art30_completeness || undefined,
-  }
-}
-
-function activityToApi(act: VVTActivity): Record<string, unknown> {
-  return {
-    vvt_id: act.vvtId,
-    name: act.name,
-    description: act.description,
-    purposes: act.purposes,
-    legal_bases: act.legalBases,
-    data_subject_categories: act.dataSubjectCategories,
-    personal_data_categories: act.personalDataCategories,
-    recipient_categories: act.recipientCategories,
-    third_country_transfers: act.thirdCountryTransfers,
-    retention_period: act.retentionPeriod,
-    tom_description: act.tomDescription,
-    business_function: act.businessFunction,
-    systems: act.systems,
-    deployment_model: act.deploymentModel,
-    data_sources: act.dataSources,
-    data_flows: act.dataFlows,
-    protection_level: act.protectionLevel,
-    dpia_required: act.dpiaRequired,
-    structured_toms: act.structuredToms,
-    status: act.status,
-    responsible: act.responsible,
-    owner: act.owner,
-    // Library refs
-    purpose_refs: act.purposeRefs || null,
-    legal_basis_refs: act.legalBasisRefs || null,
-    data_subject_refs: act.dataSubjectRefs || null,
-    data_category_refs: act.dataCategoryRefs || null,
-    recipient_refs: act.recipientRefs || null,
-    retention_rule_ref: act.retentionRuleRef || null,
-    transfer_mechanism_refs: act.transferMechanismRefs || null,
-    tom_refs: act.tomRefs || null,
-    source_template_id: act.sourceTemplateId || null,
-    risk_score: act.riskScore ?? null,
-    linked_loeschfristen_ids: act.linkedLoeschfristenIds || null,
-    linked_tom_measure_ids: act.linkedTomMeasureIds || null,
-    art30_completeness: act.art30Completeness || null,
-  }
-}
-
-function orgHeaderFromApi(raw: any): VVTOrganizationHeader {
-  return {
-    organizationName: raw.organization_name || '',
-    industry: raw.industry || '',
-    locations: raw.locations || [],
-    employeeCount: raw.employee_count || 0,
-    dpoName: raw.dpo_name || '',
-    dpoContact: raw.dpo_contact || '',
-    vvtVersion: raw.vvt_version || '1.0',
-    lastReviewDate: raw.last_review_date || '',
-    nextReviewDate: raw.next_review_date || '',
-    reviewInterval: raw.review_interval || 'annual',
-  }
-}
-
-function orgHeaderToApi(org: VVTOrganizationHeader): Record<string, unknown> {
-  return {
-    organization_name: org.organizationName,
-    industry: org.industry,
-    locations: org.locations,
-    employee_count: org.employeeCount,
-    dpo_name: org.dpoName,
-    dpo_contact: org.dpoContact,
-    vvt_version: org.vvtVersion,
-    last_review_date: org.lastReviewDate || null,
-    next_review_date: org.nextReviewDate || null,
-    review_interval: org.reviewInterval,
-  }
-}
-
-async function apiListActivities(): Promise<VVTActivity[]> {
-  const res = await fetch(`${VVT_API_BASE}/activities`)
-  if (!res.ok) throw new Error(`GET activities failed: ${res.status}`)
-  const data = await res.json()
-  return data.map(activityFromApi)
-}
-
-async function apiGetOrganization(): Promise<VVTOrganizationHeader | null> {
-  const res = await fetch(`${VVT_API_BASE}/organization`)
-  if (!res.ok) return null
-  const data = await res.json()
-  if (!data) return null
-  return orgHeaderFromApi(data)
-}
-
-async function apiCreateActivity(act: VVTActivity): Promise<VVTActivity> {
-  const res = await fetch(`${VVT_API_BASE}/activities`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(activityToApi(act)),
-  })
-  if (!res.ok) throw new Error(`POST activity failed: ${res.status}`)
-  return activityFromApi(await res.json())
-}
-
-async function apiUpdateActivity(id: string, act: VVTActivity): Promise<VVTActivity> {
-  const res = await fetch(`${VVT_API_BASE}/activities/${id}`, {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(activityToApi(act)),
-  })
-  if (!res.ok) throw new Error(`PUT activity failed: ${res.status}`)
-  return activityFromApi(await res.json())
-}
-
-async function apiDeleteActivity(id: string): Promise<void> {
-  const res = await fetch(`${VVT_API_BASE}/activities/${id}`, { method: 'DELETE' })
-  if (!res.ok) throw new Error(`DELETE activity failed: ${res.status}`)
-}
-
-async function apiUpsertOrganization(org: VVTOrganizationHeader): Promise<VVTOrganizationHeader> {
-  const res = await fetch(`${VVT_API_BASE}/organization`, {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(orgHeaderToApi(org)),
-  })
-  if (!res.ok) throw new Error(`PUT organization failed: ${res.status}`)
-  return orgHeaderFromApi(await res.json())
-}
-
-// Library + Template API
-interface ProcessTemplate {
-  id: string; name: string; description?: string; business_function: string
-  purpose_refs: string[]; legal_basis_refs: string[]; data_subject_refs: string[]
-  data_category_refs: string[]; recipient_refs: string[]; tom_refs: string[]
-  retention_rule_ref?: string; typical_systems: string[]
-  protection_level: string; dpia_required: boolean; risk_score?: number
-  tags: string[]; sort_order: number
-}
-
-async function apiListTemplates(businessFunction?: string): Promise<ProcessTemplate[]> {
-  const params = businessFunction ? `?business_function=${businessFunction}` : ''
-  const res = await fetch(`${VVT_API_BASE}/templates${params}`)
-  if (!res.ok) return []
-  return res.json()
-}
-
-async function apiInstantiateTemplate(templateId: string): Promise<VVTActivity> {
-  const res = await fetch(`${VVT_API_BASE}/templates/${templateId}/instantiate`, { method: 'POST' })
-  if (!res.ok) throw new Error(`POST instantiate failed: ${res.status}`)
-  return activityFromApi(await res.json())
-}
-
 // =============================================================================
 // MAIN PAGE
 // =============================================================================
@@ -256,7 +56,7 @@ export default function VVTPage() {
         setActivities(acts)
         if (org) setOrgHeader(org)
       } catch (err) {
-        setApiError('Fehler beim Laden der VVT-Daten. Bitte Verbindung prüfen.')
+        setApiError('Fehler beim Laden der VVT-Daten. Bitte Verbindung pruefen.')
         console.error('VVT API load error:', err)
       } finally {
         setIsLoading(false)
@@ -274,7 +74,9 @@ export default function VVTPage() {
   // Filtered & sorted activities
   const filteredActivities = activities
     .filter(a => {
-      const matchesFilter = filter === 'all' || a.status === filter || (filter === 'thirdcountry' && a.thirdCountryTransfers.length > 0) || (filter === 'art9' && a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c)))
+      const matchesFilter = filter === 'all' || a.status === filter ||
+        (filter === 'thirdcountry' && a.thirdCountryTransfers.length > 0) ||
+        (filter === 'art9' && a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c)))
       const matchesSearch = searchQuery === '' ||
         a.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
         a.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -291,7 +93,6 @@ export default function VVTPage() {
 
   const stepInfo = STEP_EXPLANATIONS['vvt']
 
-  // Tab buttons
   const tabs: { id: Tab; label: string; count?: number }[] = [
     { id: 'verzeichnis', label: 'Verzeichnis', count: activities.length },
     { id: 'editor', label: 'Verarbeitung bearbeiten' },
@@ -379,7 +180,7 @@ export default function VVTPage() {
               await apiDeleteActivity(id)
               setActivities(prev => prev.filter(a => a.id !== id))
             } catch (err) {
-              setApiError('Fehler beim Löschen der Verarbeitung.')
+              setApiError('Fehler beim Loeschen der Verarbeitung.')
               console.error(err)
             }
           }}
@@ -453,1845 +254,3 @@ export default function VVTPage() {
     </div>
   )
 }
-
-// =============================================================================
-// TAB 1: VERZEICHNIS
-// =============================================================================
-
-function TabVerzeichnis({
-  activities, allActivities, activeCount, draftCount, thirdCountryCount, art9Count,
-  filter, setFilter, searchQuery, setSearchQuery, sortBy, setSortBy,
-  scopeAnswers, onEdit, onNew, onDelete, onAdoptGenerated, onNewFromTemplate,
-}: {
-  activities: VVTActivity[]
-  allActivities: VVTActivity[]
-  activeCount: number
-  draftCount: number
-  thirdCountryCount: number
-  art9Count: number
-  filter: string
-  setFilter: (f: string) => void
-  searchQuery: string
-  setSearchQuery: (q: string) => void
-  sortBy: string
-  setSortBy: (s: 'name' | 'date' | 'status') => void
-  scopeAnswers?: import('@/lib/sdk/compliance-scope-types').ScopeProfilingAnswer[]
-  onEdit: (id: string) => void
-  onNew: () => void
-  onDelete: (id: string) => void
-  onAdoptGenerated: (activities: VVTActivity[]) => void
-  onNewFromTemplate: (templateId: string) => void
-}) {
-  const [scopePreview, setScopePreview] = useState<VVTActivity[] | null>(null)
-  const [isGenerating, setIsGenerating] = useState(false)
-  const [showTemplatePicker, setShowTemplatePicker] = useState(false)
-  const [templates, setTemplates] = useState<ProcessTemplate[]>([])
-  const [templateFilter, setTemplateFilter] = useState<string>('all')
-  const [templatesLoading, setTemplatesLoading] = useState(false)
-
-  const handleGenerateFromScope = useCallback(() => {
-    if (!scopeAnswers) return
-    setIsGenerating(true)
-    try {
-      const profilingAnswers = prefillFromScopeAnswers(scopeAnswers)
-      const result = generateActivities(profilingAnswers)
-      setScopePreview(result.generatedActivities)
-    } finally {
-      setIsGenerating(false)
-    }
-  }, [scopeAnswers])
-
-  const handleAdoptPreview = useCallback(() => {
-    if (!scopePreview) return
-    onAdoptGenerated(scopePreview)
-    setScopePreview(null)
-  }, [scopePreview, onAdoptGenerated])
-
-  // Preview mode for generated activities
-  if (scopePreview) {
-    return (
-      <div className="space-y-4">
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">Generierte Verarbeitungen</h3>
-          <p className="text-sm text-gray-500 mb-4">
-            Basierend auf Ihrer Scope-Analyse wurden {scopePreview.length} Verarbeitungstaetigkeiten generiert.
-            Sie koennen einzelne Eintraege abwaehlen, bevor Sie diese uebernehmen.
-          </p>
-          <div className="space-y-2">
-            {scopePreview.map((a, i) => (
-              <div key={a.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
-                <input type="checkbox" defaultChecked className="w-4 h-4 text-purple-600 rounded"
-                  onChange={(e) => {
-                    if (!e.target.checked) {
-                      setScopePreview(scopePreview.filter((_, j) => j !== i))
-                    }
-                  }} />
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="font-mono text-xs text-gray-400">{a.vvtId}</span>
-                    <span className="text-sm font-medium text-gray-900">{a.name}</span>
-                    <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">{BUSINESS_FUNCTION_LABELS[a.businessFunction]}</span>
-                  </div>
-                  <p className="text-xs text-gray-500 truncate">{a.description}</p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className="flex items-center justify-between">
-          <button onClick={() => setScopePreview(null)} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
-            Abbrechen
-          </button>
-          <button onClick={handleAdoptPreview} className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
-            Alle {scopePreview.length} uebernehmen
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Scope Generate Button */}
-      {scopeAnswers && scopeAnswers.length > 0 && (
-        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 flex items-center justify-between">
-          <div>
-            <h4 className="text-sm font-medium text-blue-900">Aus Scope-Analyse generieren</h4>
-            <p className="text-xs text-blue-700 mt-0.5">
-              Erstellen Sie automatisch Verarbeitungstaetigkeiten basierend auf Ihren Scope-Profiling-Antworten.
-            </p>
-          </div>
-          <button
-            onClick={handleGenerateFromScope}
-            disabled={isGenerating}
-            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm whitespace-nowrap disabled:opacity-50"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-            {isGenerating ? 'Generiere...' : 'Generieren'}
-          </button>
-        </div>
-      )}
-
-      {/* Stats */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-        <StatCard label="Gesamt" value={allActivities.length} color="gray" />
-        <StatCard label="Genehmigt" value={activeCount} color="green" />
-        <StatCard label="Entwurf" value={draftCount} color="yellow" />
-        <StatCard label="Drittland" value={thirdCountryCount} color="orange" />
-        <StatCard label="Art. 9 Daten" value={art9Count} color="red" />
-      </div>
-
-      {/* Search + Filter + New */}
-      <div className="flex flex-col md:flex-row items-start md:items-center gap-3">
-        <div className="flex-1 relative w-full">
-          <svg className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" 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>
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="VVT-ID, Name oder Beschreibung suchen..."
-            className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-          />
-        </div>
-        <div className="flex items-center gap-2 flex-wrap">
-          {[
-            { key: 'all', label: 'Alle' },
-            { key: 'DRAFT', label: 'Entwurf' },
-            { key: 'REVIEW', label: 'Pruefung' },
-            { key: 'APPROVED', label: 'Genehmigt' },
-            { key: 'thirdcountry', label: 'Drittland' },
-            { key: 'art9', label: 'Art. 9' },
-          ].map(f => (
-            <button
-              key={f.key}
-              onClick={() => setFilter(f.key)}
-              className={`px-3 py-1 text-sm rounded-full transition-colors ${
-                filter === f.key ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-              }`}
-            >
-              {f.label}
-            </button>
-          ))}
-        </div>
-        <select
-          value={sortBy}
-          onChange={(e) => setSortBy(e.target.value as 'name' | 'date' | 'status')}
-          className="px-3 py-2 border border-gray-300 rounded-lg text-sm"
-        >
-          <option value="name">Name</option>
-          <option value="date">Datum</option>
-          <option value="status">Status</option>
-        </select>
-        <button
-          onClick={async () => {
-            setShowTemplatePicker(true)
-            if (templates.length === 0) {
-              setTemplatesLoading(true)
-              try {
-                const t = await apiListTemplates()
-                setTemplates(t)
-              } finally {
-                setTemplatesLoading(false)
-              }
-            }
-          }}
-          className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors text-sm whitespace-nowrap"
-        >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2" />
-          </svg>
-          Aus Vorlage erstellen
-        </button>
-        <button
-          onClick={onNew}
-          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm whitespace-nowrap"
-        >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Neue Verarbeitung
-        </button>
-      </div>
-
-      {/* Activity Cards */}
-      <div className="space-y-3">
-        {activities.map(activity => (
-          <ActivityCard key={activity.id} activity={activity} onEdit={onEdit} onDelete={onDelete} />
-        ))}
-      </div>
-
-      {activities.length === 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
-          <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
-            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold text-gray-900">Keine Verarbeitungen gefunden</h3>
-          <p className="mt-2 text-gray-500 max-w-md mx-auto">
-            Erstellen Sie eine neue Verarbeitung manuell oder generieren Sie Eintraege automatisch aus Ihrer Scope-Analyse.
-          </p>
-        </div>
-      )}
-
-      {/* Template Picker Modal */}
-      {showTemplatePicker && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={() => setShowTemplatePicker(false)}>
-          <div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl max-h-[80vh] overflow-hidden" onClick={e => e.stopPropagation()}>
-            <div className="p-6 border-b border-gray-200">
-              <div className="flex items-center justify-between">
-                <div>
-                  <h3 className="text-lg font-semibold text-gray-900">Vorlage auswaehlen</h3>
-                  <p className="text-sm text-gray-500 mt-0.5">Waehlen Sie eine Standard-Vorlage fuer die neue Verarbeitungstaetigkeit</p>
-                </div>
-                <button onClick={() => setShowTemplatePicker(false)} className="p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100">
-                  <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="flex items-center gap-2 mt-4 flex-wrap">
-                {[
-                  { key: 'all', label: 'Alle' },
-                  { key: 'hr', label: 'Personal' },
-                  { key: 'finance', label: 'Finanzen' },
-                  { key: 'sales_crm', label: 'Vertrieb' },
-                  { key: 'marketing', label: 'Marketing' },
-                  { key: 'support', label: 'Support' },
-                  { key: 'it_operations', label: 'IT' },
-                  { key: 'other', label: 'Sonstiges' },
-                ].map(f => (
-                  <button
-                    key={f.key}
-                    onClick={() => setTemplateFilter(f.key)}
-                    className={`px-3 py-1 text-xs rounded-full transition-colors ${
-                      templateFilter === f.key ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                    }`}
-                  >
-                    {f.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className="overflow-y-auto p-6 max-h-[calc(80vh-180px)]">
-              {templatesLoading ? (
-                <div className="flex items-center justify-center py-12">
-                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {templates
-                    .filter(t => templateFilter === 'all' || t.business_function === templateFilter)
-                    .map(t => (
-                    <button
-                      key={t.id}
-                      onClick={() => {
-                        setShowTemplatePicker(false)
-                        onNewFromTemplate(t.id)
-                      }}
-                      className="w-full text-left p-4 bg-gray-50 rounded-xl hover:bg-indigo-50 hover:border-indigo-200 border border-transparent transition-colors"
-                    >
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className="text-sm font-semibold text-gray-900">{t.name}</span>
-                        <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
-                          {BUSINESS_FUNCTION_LABELS[t.business_function as BusinessFunction] || t.business_function}
-                        </span>
-                        {t.dpia_required && (
-                          <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
-                        )}
-                        <span className="px-2 py-0.5 text-xs bg-gray-100 text-gray-500 rounded-full">{PROTECTION_LEVEL_LABELS[t.protection_level] || t.protection_level}</span>
-                      </div>
-                      {t.description && <p className="text-xs text-gray-500 line-clamp-2">{t.description}</p>}
-                      <div className="flex items-center gap-3 mt-2 text-xs text-gray-400">
-                        <span>{t.data_subject_refs?.length || 0} Betroffene</span>
-                        <span>{t.data_category_refs?.length || 0} Datenkategorien</span>
-                        <span>{t.tom_refs?.length || 0} TOMs</span>
-                        {t.retention_rule_ref && <span>Loeschfrist: {t.retention_rule_ref}</span>}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-function StatCard({ label, value, color }: { label: string; value: number; color: string }) {
-  const borderColors: Record<string, string> = {
-    gray: 'border-gray-200', green: 'border-green-200', yellow: 'border-yellow-200', orange: 'border-orange-200', red: 'border-red-200',
-  }
-  const textColors: Record<string, string> = {
-    gray: 'text-gray-600', green: 'text-green-600', yellow: 'text-yellow-600', orange: 'text-orange-600', red: 'text-red-600',
-  }
-  return (
-    <div className={`bg-white rounded-xl border ${borderColors[color]} p-4`}>
-      <div className={`text-sm ${textColors[color]}`}>{label}</div>
-      <div className={`text-2xl font-bold ${textColors[color]}`}>{value}</div>
-    </div>
-  )
-}
-
-function ActivityCard({ activity, onEdit, onDelete }: { activity: VVTActivity; onEdit: (id: string) => void; onDelete: (id: string) => void }) {
-  const hasArt9 = activity.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
-  const hasThirdCountry = activity.thirdCountryTransfers.length > 0
-
-  return (
-    <div className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-200 transition-colors">
-      <div className="flex items-start justify-between">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1 flex-wrap">
-            <span className="text-xs font-mono text-gray-400">{activity.vvtId}</span>
-            <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[activity.status] || 'bg-gray-100 text-gray-600'}`}>
-              {STATUS_LABELS[activity.status] || activity.status}
-            </span>
-            {hasArt9 && (
-              <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">Art. 9</span>
-            )}
-            {hasThirdCountry && (
-              <span className="px-2 py-0.5 text-xs bg-orange-100 text-orange-700 rounded-full">Drittland</span>
-            )}
-            {activity.dpiaRequired && (
-              <span className="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">DSFA</span>
-            )}
-            {activity.sourceTemplateId && (
-              <span className="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">Vorlage</span>
-            )}
-          </div>
-          <h3 className="text-base font-semibold text-gray-900 truncate">{activity.name || '(Ohne Namen)'}</h3>
-          {activity.description && (
-            <p className="text-sm text-gray-500 mt-0.5 line-clamp-1">{activity.description}</p>
-          )}
-          <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
-            <span>{BUSINESS_FUNCTION_LABELS[activity.businessFunction]}</span>
-            <span>{activity.responsible || 'Kein Verantwortlicher'}</span>
-            <span>Aktualisiert: {new Date(activity.updatedAt).toLocaleDateString('de-DE')}</span>
-            {activity.art30Completeness && (
-              <span className={`font-medium ${activity.art30Completeness.score >= 80 ? 'text-green-600' : activity.art30Completeness.score >= 50 ? 'text-yellow-600' : 'text-red-600'}`}>
-                Art. 30: {activity.art30Completeness.score}%
-              </span>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center gap-1 ml-4">
-          <button
-            onClick={() => onEdit(activity.id)}
-            className="px-3 py-1.5 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
-          >
-            Bearbeiten
-          </button>
-          <button
-            onClick={() => { if (confirm('Verarbeitung loeschen?')) onDelete(activity.id) }}
-            className="px-2 py-1.5 text-sm text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg 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="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>
-  )
-}
-
-// =============================================================================
-// TAB 2: EDITOR
-// =============================================================================
-
-function TabEditor({
-  activity, activities, onSave, onBack, onSelectActivity,
-}: {
-  activity: VVTActivity | null | undefined
-  activities: VVTActivity[]
-  onSave: (updated: VVTActivity) => void
-  onBack: () => void
-  onSelectActivity: (id: string) => void
-}) {
-  const [local, setLocal] = useState<VVTActivity | null>(null)
-  const [showAdvanced, setShowAdvanced] = useState(false)
-
-  useEffect(() => {
-    setLocal(activity ? { ...activity } : null)
-  }, [activity])
-
-  if (!local) {
-    return (
-      <div className="space-y-4">
-        <div className="bg-white rounded-xl border border-gray-200 p-8 text-center">
-          <h3 className="text-lg font-semibold text-gray-900 mb-2">Keine Verarbeitung ausgewaehlt</h3>
-          <p className="text-gray-500 mb-4">Waehlen Sie eine Verarbeitung aus dem Verzeichnis oder erstellen Sie eine neue.</p>
-          <button onClick={onBack} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
-            Zum Verzeichnis
-          </button>
-        </div>
-        {activities.length > 0 && (
-          <div className="bg-white rounded-xl border border-gray-200 p-4">
-            <h4 className="font-medium text-gray-700 mb-3">Verarbeitungen zum Bearbeiten:</h4>
-            <div className="space-y-1">
-              {activities.map(a => (
-                <button
-                  key={a.id}
-                  onClick={() => onSelectActivity(a.id)}
-                  className="w-full text-left px-3 py-2 rounded-lg hover:bg-purple-50 text-sm flex items-center justify-between"
-                >
-                  <span><span className="font-mono text-gray-400 mr-2">{a.vvtId}</span>{a.name || '(Ohne Namen)'}</span>
-                  <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[a.status]}`}>{STATUS_LABELS[a.status]}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  const update = (patch: Partial<VVTActivity>) => setLocal(prev => prev ? { ...prev, ...patch } : prev)
-
-  const handleSave = () => {
-    if (local) onSave(local)
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-lg">
-            <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            </svg>
-          </button>
-          <div>
-            <span className="text-sm font-mono text-gray-400">{local.vvtId}</span>
-            <h2 className="text-lg font-bold text-gray-900">{local.name || 'Neue Verarbeitung'}</h2>
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <select
-            value={local.status}
-            onChange={(e) => update({ status: e.target.value as VVTActivity['status'] })}
-            className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm"
-          >
-            <option value="DRAFT">Entwurf</option>
-            <option value="REVIEW">In Pruefung</option>
-            <option value="APPROVED">Genehmigt</option>
-            <option value="ARCHIVED">Archiviert</option>
-          </select>
-          <button onClick={handleSave} className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm">
-            Speichern
-          </button>
-        </div>
-      </div>
-
-      {/* Form */}
-      <div className="bg-white rounded-xl border border-gray-200 divide-y divide-gray-100">
-        {/* Bezeichnung + Beschreibung */}
-        <FormSection title="Grunddaten">
-          <FormField label="Bezeichnung *">
-            <input type="text" value={local.name} onChange={(e) => update({ name: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              placeholder="z.B. Mitarbeiterverwaltung" />
-          </FormField>
-          <FormField label="Beschreibung">
-            <textarea value={local.description} onChange={(e) => update({ description: e.target.value })}
-              rows={2} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-              placeholder="Kurze Beschreibung der Verarbeitung" />
-          </FormField>
-          <div className="grid grid-cols-2 gap-4">
-            <FormField label="Verantwortlich">
-              <input type="text" value={local.responsible} onChange={(e) => update({ responsible: e.target.value })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. HR-Abteilung" />
-            </FormField>
-            <FormField label="Geschaeftsbereich">
-              <select value={local.businessFunction} onChange={(e) => update({ businessFunction: e.target.value as BusinessFunction })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg">
-                {Object.entries(BUSINESS_FUNCTION_LABELS).map(([k, v]) => (
-                  <option key={k} value={k}>{v}</option>
-                ))}
-              </select>
-            </FormField>
-          </div>
-        </FormSection>
-
-        {/* Zwecke */}
-        <FormSection title="Zwecke der Verarbeitung *">
-          <MultiTextInput
-            values={local.purposes}
-            onChange={(purposes) => update({ purposes })}
-            placeholder="Zweck eingeben und Enter druecken"
-          />
-        </FormSection>
-
-        {/* Rechtsgrundlagen */}
-        <FormSection title="Rechtsgrundlagen *">
-          <div className="space-y-2">
-            {local.legalBases.map((lb, i) => (
-              <div key={i} className="flex items-center gap-2">
-                <select
-                  value={lb.type}
-                  onChange={(e) => {
-                    const copy = [...local.legalBases]
-                    copy[i] = { ...copy[i], type: e.target.value }
-                    update({ legalBases: copy })
-                  }}
-                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                >
-                  <option value="">-- Rechtsgrundlage waehlen --</option>
-                  {Object.entries(LEGAL_BASIS_META).map(([k, v]) => (
-                    <option key={k} value={k}>{v.label.de} ({v.article})</option>
-                  ))}
-                </select>
-                <input
-                  type="text"
-                  value={lb.reference || ''}
-                  onChange={(e) => {
-                    const copy = [...local.legalBases]
-                    copy[i] = { ...copy[i], reference: e.target.value }
-                    update({ legalBases: copy })
-                  }}
-                  className="w-48 px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                  placeholder="Referenz"
-                />
-                <button onClick={() => update({ legalBases: local.legalBases.filter((_, j) => j !== i) })}
-                  className="p-2 text-gray-400 hover:text-red-500">
-                  <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>
-            ))}
-            <button onClick={() => update({ legalBases: [...local.legalBases, { type: '', description: '', reference: '' }] })}
-              className="text-sm text-purple-600 hover:text-purple-700">
-              + Rechtsgrundlage hinzufuegen
-            </button>
-          </div>
-        </FormSection>
-
-        {/* Betroffenenkategorien */}
-        <FormSection title="Betroffenenkategorien *">
-          <CheckboxGrid
-            options={Object.entries(DATA_SUBJECT_CATEGORY_META).map(([k, v]) => ({ value: k, label: v.de }))}
-            selected={local.dataSubjectCategories}
-            onChange={(dataSubjectCategories) => update({ dataSubjectCategories })}
-          />
-        </FormSection>
-
-        {/* Datenkategorien */}
-        <FormSection title="Datenkategorien *">
-          <CheckboxGrid
-            options={Object.entries(PERSONAL_DATA_CATEGORY_META).map(([k, v]) => ({
-              value: k,
-              label: v.label.de,
-              highlight: v.isSpecial,
-            }))}
-            selected={local.personalDataCategories}
-            onChange={(personalDataCategories) => update({ personalDataCategories })}
-          />
-          {local.personalDataCategories.some(c => ART9_CATEGORIES.includes(c)) && (
-            <div className="mt-2 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
-              <strong>Hinweis:</strong> Sie verarbeiten besondere Datenkategorien nach Art. 9 DSGVO. Stellen Sie sicher, dass eine Art.-9-Rechtsgrundlage vorliegt.
-            </div>
-          )}
-        </FormSection>
-
-        {/* Empfaenger */}
-        <FormSection title="Empfaengerkategorien">
-          <div className="space-y-2">
-            {local.recipientCategories.map((rc, i) => (
-              <div key={i} className="flex items-center gap-2">
-                <select
-                  value={rc.type}
-                  onChange={(e) => {
-                    const copy = [...local.recipientCategories]
-                    copy[i] = { ...copy[i], type: e.target.value }
-                    update({ recipientCategories: copy })
-                  }}
-                  className="w-40 px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                >
-                  <option value="INTERNAL">Intern</option>
-                  <option value="PROCESSOR">Auftragsverarbeiter</option>
-                  <option value="CONTROLLER">Verantwortlicher</option>
-                  <option value="AUTHORITY">Behoerde</option>
-                  <option value="GROUP_COMPANY">Konzern</option>
-                  <option value="OTHER">Sonstige</option>
-                </select>
-                <input type="text" value={rc.name}
-                  onChange={(e) => {
-                    const copy = [...local.recipientCategories]
-                    copy[i] = { ...copy[i], name: e.target.value }
-                    update({ recipientCategories: copy })
-                  }}
-                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Name des Empfaengers" />
-                <button onClick={() => update({ recipientCategories: local.recipientCategories.filter((_, j) => j !== i) })}
-                  className="p-2 text-gray-400 hover:text-red-500">
-                  <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>
-            ))}
-            <button onClick={() => update({ recipientCategories: [...local.recipientCategories, { type: 'INTERNAL', name: '' }] })}
-              className="text-sm text-purple-600 hover:text-purple-700">
-              + Empfaenger hinzufuegen
-            </button>
-          </div>
-        </FormSection>
-
-        {/* Drittlandtransfers */}
-        <FormSection title="Drittlandtransfers">
-          <div className="space-y-2">
-            {local.thirdCountryTransfers.map((tc, i) => (
-              <div key={i} className="flex items-center gap-2 flex-wrap">
-                <input type="text" value={tc.country}
-                  onChange={(e) => {
-                    const copy = [...local.thirdCountryTransfers]
-                    copy[i] = { ...copy[i], country: e.target.value }
-                    update({ thirdCountryTransfers: copy })
-                  }}
-                  className="w-20 px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Land" />
-                <input type="text" value={tc.recipient}
-                  onChange={(e) => {
-                    const copy = [...local.thirdCountryTransfers]
-                    copy[i] = { ...copy[i], recipient: e.target.value }
-                    update({ thirdCountryTransfers: copy })
-                  }}
-                  className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="Empfaenger" />
-                <select value={tc.transferMechanism}
-                  onChange={(e) => {
-                    const copy = [...local.thirdCountryTransfers]
-                    copy[i] = { ...copy[i], transferMechanism: e.target.value }
-                    update({ thirdCountryTransfers: copy })
-                  }}
-                  className="w-56 px-3 py-2 border border-gray-300 rounded-lg text-sm">
-                  <option value="">-- Mechanismus --</option>
-                  {Object.entries(TRANSFER_MECHANISM_META).map(([k, v]) => (
-                    <option key={k} value={k}>{v.de}</option>
-                  ))}
-                </select>
-                <button onClick={() => update({ thirdCountryTransfers: local.thirdCountryTransfers.filter((_, j) => j !== i) })}
-                  className="p-2 text-gray-400 hover:text-red-500">
-                  <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>
-            ))}
-            <button onClick={() => update({ thirdCountryTransfers: [...local.thirdCountryTransfers, { country: '', recipient: '', transferMechanism: '' }] })}
-              className="text-sm text-purple-600 hover:text-purple-700">
-              + Drittlandtransfer hinzufuegen
-            </button>
-          </div>
-        </FormSection>
-
-        {/* Aufbewahrungsfristen */}
-        <FormSection title="Aufbewahrungsfristen *">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <FormField label="Dauer">
-              <div className="flex gap-2">
-                <input type="number" value={local.retentionPeriod.duration || ''}
-                  onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, duration: parseInt(e.target.value) || undefined } })}
-                  className="w-20 px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. 10" />
-                <select value={local.retentionPeriod.durationUnit || 'YEARS'}
-                  onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, durationUnit: e.target.value } })}
-                  className="px-3 py-2 border border-gray-300 rounded-lg">
-                  <option value="DAYS">Tage</option>
-                  <option value="MONTHS">Monate</option>
-                  <option value="YEARS">Jahre</option>
-                </select>
-              </div>
-            </FormField>
-            <FormField label="Rechtsgrundlage">
-              <input type="text" value={local.retentionPeriod.legalBasis || ''}
-                onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, legalBasis: e.target.value } })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. HGB § 257" />
-            </FormField>
-            <FormField label="Loeschverfahren">
-              <input type="text" value={local.retentionPeriod.deletionProcedure || ''}
-                onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, deletionProcedure: e.target.value } })}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. Automatische Loeschung" />
-            </FormField>
-          </div>
-          <FormField label="Beschreibung">
-            <input type="text" value={local.retentionPeriod.description}
-              onChange={(e) => update({ retentionPeriod: { ...local.retentionPeriod, description: e.target.value } })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Freitextbeschreibung der Aufbewahrungsfrist" />
-          </FormField>
-        </FormSection>
-
-        {/* TOM-Beschreibung */}
-        <FormSection title="TOM-Beschreibung (Art. 32)">
-          <textarea value={local.tomDescription} onChange={(e) => update({ tomDescription: e.target.value })}
-            rows={3} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-            placeholder="Beschreiben Sie die technischen und organisatorischen Massnahmen zum Schutz der Daten" />
-        </FormSection>
-
-        {/* Advanced (collapsible) */}
-        <div className="p-4">
-          <button
-            onClick={() => setShowAdvanced(!showAdvanced)}
-            className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900"
-          >
-            <svg className={`w-4 h-4 transition-transform ${showAdvanced ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-            Generator-Felder (Schutzniveau, Systeme, DSFA)
-          </button>
-
-          {showAdvanced && (
-            <div className="mt-4 space-y-4">
-              <div className="grid grid-cols-3 gap-4">
-                <FormField label="Schutzniveau">
-                  <select value={local.protectionLevel} onChange={(e) => update({ protectionLevel: e.target.value as VVTActivity['protectionLevel'] })}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg">
-                    {Object.entries(PROTECTION_LEVEL_LABELS).map(([k, v]) => (
-                      <option key={k} value={k}>{v}</option>
-                    ))}
-                  </select>
-                </FormField>
-                <FormField label="Deployment">
-                  <select value={local.deploymentModel} onChange={(e) => update({ deploymentModel: e.target.value as VVTActivity['deploymentModel'] })}
-                    className="w-full px-3 py-2 border border-gray-300 rounded-lg">
-                    {Object.entries(DEPLOYMENT_LABELS).map(([k, v]) => (
-                      <option key={k} value={k}>{v}</option>
-                    ))}
-                  </select>
-                </FormField>
-                <FormField label="DSFA erforderlich">
-                  <label className="flex items-center gap-2 mt-2">
-                    <input type="checkbox" checked={local.dpiaRequired}
-                      onChange={(e) => update({ dpiaRequired: e.target.checked })}
-                      className="w-4 h-4 text-purple-600 rounded" />
-                    <span className="text-sm text-gray-700">Ja, DSFA nach Art. 35 DSGVO erforderlich</span>
-                  </label>
-                </FormField>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Save button at bottom */}
-      <div className="flex items-center justify-end gap-3">
-        <button onClick={onBack} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">
-          Zurueck zum Verzeichnis
-        </button>
-        <button onClick={handleSave} className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
-          Speichern
-        </button>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// TAB 3: EXPORT & COMPLIANCE
-// =============================================================================
-
-function TabExport({
-  activities, orgHeader, onUpdateOrgHeader,
-}: {
-  activities: VVTActivity[]
-  orgHeader: VVTOrganizationHeader
-  onUpdateOrgHeader: (org: VVTOrganizationHeader) => void
-}) {
-  // Compliance check
-  const issues: { activityId: string; vvtId: string; name: string; issues: string[] }[] = []
-  for (const a of activities) {
-    const actIssues: string[] = []
-    if (!a.name) actIssues.push('Bezeichnung fehlt')
-    if (a.purposes.length === 0) actIssues.push('Zweck(e) fehlen')
-    if (a.legalBases.length === 0) actIssues.push('Rechtsgrundlage fehlt')
-    if (a.dataSubjectCategories.length === 0) actIssues.push('Betroffenenkategorien fehlen')
-    if (a.personalDataCategories.length === 0) actIssues.push('Datenkategorien fehlen')
-    if (!a.retentionPeriod.description) actIssues.push('Aufbewahrungsfrist fehlt')
-    if (!a.tomDescription && a.structuredToms.accessControl.length === 0) actIssues.push('TOM-Beschreibung fehlt')
-
-    // Art. 9 without Art. 9 legal basis
-    const hasArt9Data = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
-    const hasArt9Basis = a.legalBases.some(lb => lb.type.startsWith('ART9_'))
-    if (hasArt9Data && !hasArt9Basis) actIssues.push('Art.-9-Daten ohne Art.-9-Rechtsgrundlage')
-
-    // Third country without mechanism
-    for (const tc of a.thirdCountryTransfers) {
-      if (!tc.transferMechanism) actIssues.push(`Drittland ${tc.country}: Transfer-Mechanismus fehlt`)
-    }
-
-    if (actIssues.length > 0) {
-      issues.push({ activityId: a.id, vvtId: a.vvtId, name: a.name || '(Ohne Namen)', issues: actIssues })
-    }
-  }
-
-  const compliantCount = activities.length - issues.length
-  const compliancePercent = activities.length > 0 ? Math.round((compliantCount / activities.length) * 100) : 0
-
-  const handleExportJSON = () => {
-    const data = {
-      version: '1.0',
-      exportDate: new Date().toISOString(),
-      organization: orgHeader,
-      activities: activities,
-    }
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `vvt-export-${new Date().toISOString().split('T')[0]}.json`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const handleExportCSV = () => {
-    const headers = ['VVT-ID', 'Name', 'Beschreibung', 'Zwecke', 'Rechtsgrundlagen', 'Betroffene', 'Datenkategorien', 'Empfaenger', 'Drittlandtransfers', 'Aufbewahrungsfrist', 'TOM', 'Status', 'Verantwortlich']
-    const rows = activities.map(a => [
-      a.vvtId,
-      a.name,
-      a.description,
-      a.purposes.join('; '),
-      a.legalBases.map(lb => `${lb.type}${lb.reference ? ' (' + lb.reference + ')' : ''}`).join('; '),
-      a.dataSubjectCategories.map(c => DATA_SUBJECT_CATEGORY_META[c as keyof typeof DATA_SUBJECT_CATEGORY_META]?.de || c).join('; '),
-      a.personalDataCategories.map(c => PERSONAL_DATA_CATEGORY_META[c as keyof typeof PERSONAL_DATA_CATEGORY_META]?.label?.de || c).join('; '),
-      a.recipientCategories.map(r => `${r.name} (${r.type})`).join('; '),
-      a.thirdCountryTransfers.map(t => `${t.country}: ${t.recipient}`).join('; '),
-      a.retentionPeriod.description,
-      a.tomDescription,
-      STATUS_LABELS[a.status],
-      a.responsible,
-    ])
-
-    const csvContent = [headers, ...rows].map(row =>
-      row.map(cell => `"${String(cell || '').replace(/"/g, '""')}"`).join(',')
-    ).join('\n')
-
-    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `vvt-export-${new Date().toISOString().split('T')[0]}.csv`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Compliance Overview */}
-      <div className="bg-white rounded-xl border border-gray-200 p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">Compliance-Check</h3>
-        <div className="flex items-center gap-6 mb-4">
-          <div className="flex items-center gap-3">
-            <div className={`w-16 h-16 rounded-full flex items-center justify-center text-xl font-bold ${
-              compliancePercent === 100 ? 'bg-green-100 text-green-700' :
-              compliancePercent >= 70 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'
-            }`}>
-              {compliancePercent}%
-            </div>
-            <div>
-              <div className="font-medium text-gray-900">{compliantCount} von {activities.length} vollstaendig</div>
-              <div className="text-sm text-gray-500">{issues.length} Eintraege mit Maengeln</div>
-            </div>
-          </div>
-        </div>
-
-        {issues.length > 0 && (
-          <div className="space-y-2 mt-4">
-            {issues.map(issue => (
-              <div key={issue.activityId} className="p-3 bg-amber-50 border border-amber-200 rounded-lg">
-                <div className="flex items-center gap-2 mb-1">
-                  <span className="font-mono text-xs text-amber-600">{issue.vvtId}</span>
-                  <span className="text-sm font-medium text-amber-800">{issue.name}</span>
-                </div>
-                <ul className="text-sm text-amber-700 space-y-0.5">
-                  {issue.issues.map((iss, i) => (
-                    <li key={i} className="flex items-center gap-1">
-                      <svg className="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01" />
-                      </svg>
-                      {iss}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {issues.length === 0 && activities.length > 0 && (
-          <div className="p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
-            Alle Verarbeitungen enthalten die erforderlichen Pflichtangaben nach Art. 30 DSGVO.
-          </div>
-        )}
-      </div>
-
-      {/* Art. 30 Completeness per Activity */}
-      {activities.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">Art. 30 Vollstaendigkeit (Detail)</h3>
-          <div className="space-y-2">
-            {activities.map(a => {
-              const c = a.art30Completeness
-              const score = c?.score ?? null
-              return (
-                <div key={a.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
-                  <span className="font-mono text-xs text-gray-400 w-20">{a.vvtId}</span>
-                  <span className="text-sm font-medium text-gray-900 flex-1 truncate">{a.name || '(Ohne Namen)'}</span>
-                  {score !== null ? (
-                    <>
-                      <div className="w-24 bg-gray-200 rounded-full h-2">
-                        <div className={`h-2 rounded-full ${score >= 80 ? 'bg-green-500' : score >= 50 ? 'bg-yellow-500' : 'bg-red-500'}`} style={{ width: `${score}%` }} />
-                      </div>
-                      <span className={`text-xs font-medium w-10 text-right ${score >= 80 ? 'text-green-600' : score >= 50 ? 'text-yellow-600' : 'text-red-600'}`}>{score}%</span>
-                    </>
-                  ) : (
-                    <span className="text-xs text-gray-400">Nicht berechnet</span>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* Organisation Header */}
-      <div className="bg-white rounded-xl border border-gray-200 p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">VVT-Metadaten (Organisation)</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <FormField label="Organisationsname">
-            <input type="text" value={orgHeader.organizationName}
-              onChange={(e) => onUpdateOrgHeader({ ...orgHeader, organizationName: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Firma GmbH" />
-          </FormField>
-          <FormField label="Branche">
-            <input type="text" value={orgHeader.industry}
-              onChange={(e) => onUpdateOrgHeader({ ...orgHeader, industry: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="z.B. IT & Software" />
-          </FormField>
-          <FormField label="DSB Name">
-            <input type="text" value={orgHeader.dpoName}
-              onChange={(e) => onUpdateOrgHeader({ ...orgHeader, dpoName: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Name des Datenschutzbeauftragten" />
-          </FormField>
-          <FormField label="DSB Kontakt">
-            <input type="text" value={orgHeader.dpoContact}
-              onChange={(e) => onUpdateOrgHeader({ ...orgHeader, dpoContact: e.target.value })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="E-Mail oder Telefon" />
-          </FormField>
-          <FormField label="Mitarbeiterzahl">
-            <input type="number" value={orgHeader.employeeCount || ''}
-              onChange={(e) => onUpdateOrgHeader({ ...orgHeader, employeeCount: parseInt(e.target.value) || 0 })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg" />
-          </FormField>
-          <FormField label="Pruefintervall">
-            <select value={orgHeader.reviewInterval}
-              onChange={(e) => onUpdateOrgHeader({ ...orgHeader, reviewInterval: e.target.value as VVTOrganizationHeader['reviewInterval'] })}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg">
-              {Object.entries(REVIEW_INTERVAL_LABELS).map(([k, v]) => (
-                <option key={k} value={k}>{v}</option>
-              ))}
-            </select>
-          </FormField>
-        </div>
-      </div>
-
-      {/* Export */}
-      <div className="bg-white rounded-xl border border-gray-200 p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">Export</h3>
-        <div className="flex items-center gap-3">
-          <button onClick={handleExportJSON} disabled={activities.length === 0}
-            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm">
-            JSON exportieren
-          </button>
-          <button onClick={handleExportCSV} disabled={activities.length === 0}
-            className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm">
-            CSV (Excel) exportieren
-          </button>
-        </div>
-        <p className="text-xs text-gray-400 mt-2">
-          Der Export enthaelt alle {activities.length} Verarbeitungstaetigkeiten inkl. Organisations-Metadaten.
-        </p>
-      </div>
-
-      {/* Stats */}
-      <div className="bg-white rounded-xl border border-gray-200 p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4">Statistik</h3>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <div>
-            <div className="text-2xl font-bold text-gray-900">{activities.length}</div>
-            <div className="text-sm text-gray-500">Verarbeitungen</div>
-          </div>
-          <div>
-            <div className="text-2xl font-bold text-gray-900">{[...new Set(activities.map(a => a.businessFunction))].length}</div>
-            <div className="text-sm text-gray-500">Geschaeftsbereiche</div>
-          </div>
-          <div>
-            <div className="text-2xl font-bold text-gray-900">{[...new Set(activities.flatMap(a => a.dataSubjectCategories))].length}</div>
-            <div className="text-sm text-gray-500">Betroffenenkategorien</div>
-          </div>
-          <div>
-            <div className="text-2xl font-bold text-gray-900">{[...new Set(activities.flatMap(a => a.personalDataCategories))].length}</div>
-            <div className="text-sm text-gray-500">Datenkategorien</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// TAB 4: VVT-DOKUMENT (Druckbare Ansicht + PDF)
-// =============================================================================
-
-function TabDokument({ activities, orgHeader }: { activities: VVTActivity[]; orgHeader: VVTOrganizationHeader }) {
-  const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
-
-  const resolveDataSubjects = (cats: string[]) =>
-    cats.map(c => DATA_SUBJECT_CATEGORY_META[c as keyof typeof DATA_SUBJECT_CATEGORY_META]?.de || c).join(', ')
-
-  const resolveDataCategories = (cats: string[]) =>
-    cats.map(c => PERSONAL_DATA_CATEGORY_META[c as keyof typeof PERSONAL_DATA_CATEGORY_META]?.label?.de || c).join(', ')
-
-  const resolveLegalBasis = (lb: { type: string; description?: string; reference?: string }) => {
-    const meta = LEGAL_BASIS_META[lb.type as keyof typeof LEGAL_BASIS_META]
-    const label = meta ? `${meta.label.de} (${meta.article})` : lb.type
-    return lb.reference ? `${label} — ${lb.reference}` : label
-  }
-
-  const resolveTransferMechanism = (m: string) => {
-    const meta = TRANSFER_MECHANISM_META[m as keyof typeof TRANSFER_MECHANISM_META]
-    return meta?.de || m
-  }
-
-  const buildDocumentHtml = () => {
-    const approvedActivities = activities.filter(a => a.status !== 'ARCHIVED')
-
-    let html = `
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <title>Verzeichnis von Verarbeitungstaetigkeiten — ${orgHeader.organizationName || 'Organisation'}</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      max-width: 900px; margin: 0 auto; padding: 40px 30px;
-      line-height: 1.6; color: #1a202c; font-size: 11pt;
-    }
-    /* Cover page */
-    .cover { text-align: center; padding: 80px 0 60px; page-break-after: always; }
-    .cover h1 { font-size: 24pt; color: #5b21b6; margin-bottom: 8px; }
-    .cover .subtitle { font-size: 14pt; color: #6b7280; margin-bottom: 40px; }
-    .cover .org-info { font-size: 11pt; color: #374151; line-height: 2; }
-    .cover .legal-ref { margin-top: 40px; padding: 16px; background: #f5f3ff; border-radius: 8px; font-size: 10pt; color: #5b21b6; }
-    /* TOC */
-    .toc { page-break-after: always; }
-    .toc h2 { font-size: 16pt; color: #5b21b6; border-bottom: 2px solid #5b21b6; padding-bottom: 6px; margin-bottom: 16px; }
-    .toc-entry { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #d1d5db; font-size: 10pt; }
-    .toc-entry .toc-id { color: #6b7280; font-family: monospace; }
-    /* Activity sections */
-    .activity { page-break-inside: avoid; margin-bottom: 30px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; }
-    .activity-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #7c3aed; }
-    .activity-header .vvt-id { font-family: monospace; font-size: 10pt; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
-    .activity-header h3 { font-size: 14pt; color: #1f2937; }
-    .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 8pt; font-weight: 600; margin-left: 6px; }
-    .badge-status { background: #dbeafe; color: #1e40af; }
-    .badge-art9 { background: #fee2e2; color: #991b1b; }
-    .badge-dpia { background: #f3e8ff; color: #6b21a8; }
-    .badge-thirdcountry { background: #ffedd5; color: #9a3412; }
-    /* Field rows */
-    .field-group { margin-bottom: 12px; }
-    .field-label { font-size: 9pt; font-weight: 600; color: #5b21b6; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
-    .field-value { font-size: 10pt; color: #374151; }
-    .field-value.empty { color: #9ca3af; font-style: italic; }
-    /* Tables */
-    table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10pt; }
-    th { background: #f5f3ff; color: #5b21b6; font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; }
-    td { padding: 6px 10px; border: 1px solid #e5e7eb; vertical-align: top; }
-    /* Footer */
-    .page-footer { margin-top: 40px; padding-top: 16px; border-top: 2px solid #e5e7eb; font-size: 9pt; color: #9ca3af; display: flex; justify-content: space-between; }
-    /* Print */
-    @media print {
-      body { margin: 15mm; padding: 0; max-width: none; }
-      .activity { page-break-inside: avoid; }
-      .cover { page-break-after: always; }
-      .toc { page-break-after: always; }
-      h2, h3 { page-break-after: avoid; }
-      table { page-break-inside: avoid; }
-      .no-print { display: none; }
-    }
-  </style>
-</head>
-<body>
-
-<!-- COVER PAGE -->
-<div class="cover">
-  <h1>Verzeichnis von Verarbeitungstaetigkeiten</h1>
-  <div class="subtitle">gemaess Art. 30 Abs. 1 DSGVO</div>
-  <div class="org-info">
-    <strong>${orgHeader.organizationName || '(Organisation eintragen)'}</strong><br/>
-    ${orgHeader.industry ? `Branche: ${orgHeader.industry}<br/>` : ''}
-    ${orgHeader.employeeCount ? `Mitarbeiter: ${orgHeader.employeeCount}<br/>` : ''}
-    ${orgHeader.locations && orgHeader.locations.length > 0 ? `Standorte: ${orgHeader.locations.join(', ')}<br/>` : ''}
-    ${orgHeader.dpoName ? `<br/>Datenschutzbeauftragter: ${orgHeader.dpoName}<br/>` : ''}
-    ${orgHeader.dpoContact ? `Kontakt DSB: ${orgHeader.dpoContact}<br/>` : ''}
-  </div>
-  <div class="legal-ref">
-    VVT-Version: ${orgHeader.vvtVersion} | Stand: ${today}
-    ${orgHeader.lastReviewDate ? ` | Letzte Pruefung: ${new Date(orgHeader.lastReviewDate).toLocaleDateString('de-DE')}` : ''}
-    ${orgHeader.nextReviewDate ? ` | Naechste Pruefung: ${new Date(orgHeader.nextReviewDate).toLocaleDateString('de-DE')}` : ''}
-    | Pruefintervall: ${REVIEW_INTERVAL_LABELS[orgHeader.reviewInterval] || orgHeader.reviewInterval}
-  </div>
-</div>
-
-<!-- TABLE OF CONTENTS -->
-<div class="toc">
-  <h2>Inhaltsverzeichnis</h2>
-  <p style="margin-bottom:12px;font-size:10pt;color:#6b7280;">
-    ${approvedActivities.length} Verarbeitungstaetigkeiten in ${[...new Set(approvedActivities.map(a => a.businessFunction))].length} Geschaeftsbereichen
-  </p>
-  ${approvedActivities.map((a, i) => `
-    <div class="toc-entry">
-      <span><span class="toc-id">${a.vvtId}</span> ${a.name || '(Ohne Namen)'}</span>
-      <span style="color:#6b7280;">${BUSINESS_FUNCTION_LABELS[a.businessFunction]} — ${STATUS_LABELS[a.status]}</span>
-    </div>
-  `).join('')}
-</div>
-
-<!-- ACTIVITIES -->
-`
-
-    for (const a of approvedActivities) {
-      const hasArt9 = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
-      const hasThirdCountry = a.thirdCountryTransfers.length > 0
-
-      html += `
-<div class="activity">
-  <div class="activity-header">
-    <span class="vvt-id">${a.vvtId}</span>
-    <h3>${a.name || '(Ohne Namen)'}</h3>
-    <span class="badge badge-status">${STATUS_LABELS[a.status]}</span>
-    ${hasArt9 ? '<span class="badge badge-art9">Art. 9</span>' : ''}
-    ${a.dpiaRequired ? '<span class="badge badge-dpia">DSFA</span>' : ''}
-    ${hasThirdCountry ? '<span class="badge badge-thirdcountry">Drittland</span>' : ''}
-  </div>
-
-  ${a.description ? `<div class="field-group"><div class="field-label">Beschreibung</div><div class="field-value">${a.description}</div></div>` : ''}
-
-  <table>
-    <tr><th style="width:35%">Pflichtfeld (Art. 30)</th><th>Inhalt</th></tr>
-    <tr><td><strong>Verantwortlicher</strong></td><td>${a.responsible || `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
-    <tr><td><strong>Geschaeftsbereich</strong></td><td>${BUSINESS_FUNCTION_LABELS[a.businessFunction]}</td></tr>
-    <tr><td><strong>Zwecke der Verarbeitung</strong></td><td>${a.purposes.length > 0 ? a.purposes.join('; ') : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
-    <tr><td><strong>Rechtsgrundlage(n)</strong></td><td>${a.legalBases.length > 0 ? a.legalBases.map(resolveLegalBasis).join('<br/>') : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
-    <tr><td><strong>Kategorien betroffener Personen</strong></td><td>${a.dataSubjectCategories.length > 0 ? resolveDataSubjects(a.dataSubjectCategories) : `<span class="field-value empty">nicht angegeben</span>`}</td></tr>
-    <tr><td><strong>Kategorien personenbezogener Daten</strong></td><td>${a.personalDataCategories.length > 0 ? resolveDataCategories(a.personalDataCategories) : `<span class="field-value empty">nicht angegeben</span>`}${hasArt9 ? '<br/><em style="color:#991b1b;">Enthalt besondere Kategorien nach Art. 9 DSGVO</em>' : ''}</td></tr>
-    <tr><td><strong>Empfaengerkategorien</strong></td><td>${a.recipientCategories.length > 0 ? a.recipientCategories.map(r => `${r.name} (${r.type})`).join('; ') : `<span class="field-value empty">keine</span>`}</td></tr>
-    <tr><td><strong>Uebermittlung an Drittlaender</strong></td><td>${hasThirdCountry ? a.thirdCountryTransfers.map(t => `${t.country}: ${t.recipient} — ${resolveTransferMechanism(t.transferMechanism)}`).join('<br/>') : 'Keine Drittlanduebermittlung'}</td></tr>
-    <tr><td><strong>Loeschfristen</strong></td><td>${a.retentionPeriod.description || `<span class="field-value empty">nicht angegeben</span>`}${a.retentionPeriod.legalBasis ? `<br/><em>Rechtsgrundlage: ${a.retentionPeriod.legalBasis}</em>` : ''}${a.retentionPeriod.deletionProcedure ? `<br/><em>Verfahren: ${a.retentionPeriod.deletionProcedure}</em>` : ''}</td></tr>
-    <tr><td><strong>TOM (Art. 32 DSGVO)</strong></td><td>${a.tomDescription || `<span class="field-value empty">nicht beschrieben</span>`}</td></tr>
-  </table>
-
-  ${a.structuredToms && (a.structuredToms.accessControl.length > 0 || a.structuredToms.confidentiality.length > 0 || a.structuredToms.integrity.length > 0 || a.structuredToms.availability.length > 0 || a.structuredToms.separation.length > 0) ? `
-  <div class="field-group" style="margin-top:10px;">
-    <div class="field-label">Strukturierte TOMs</div>
-    <table>
-      <tr><th>Kategorie</th><th>Massnahmen</th></tr>
-      ${a.structuredToms.accessControl.length > 0 ? `<tr><td>Zugriffskontrolle</td><td>${a.structuredToms.accessControl.join(', ')}</td></tr>` : ''}
-      ${a.structuredToms.confidentiality.length > 0 ? `<tr><td>Vertraulichkeit</td><td>${a.structuredToms.confidentiality.join(', ')}</td></tr>` : ''}
-      ${a.structuredToms.integrity.length > 0 ? `<tr><td>Integritaet</td><td>${a.structuredToms.integrity.join(', ')}</td></tr>` : ''}
-      ${a.structuredToms.availability.length > 0 ? `<tr><td>Verfuegbarkeit</td><td>${a.structuredToms.availability.join(', ')}</td></tr>` : ''}
-      ${a.structuredToms.separation.length > 0 ? `<tr><td>Trennbarkeit</td><td>${a.structuredToms.separation.join(', ')}</td></tr>` : ''}
-    </table>
-  </div>
-  ` : ''}
-
-  <div style="margin-top:8px;font-size:9pt;color:#9ca3af;">
-    Erstellt: ${new Date(a.createdAt).toLocaleDateString('de-DE')} | Aktualisiert: ${new Date(a.updatedAt).toLocaleDateString('de-DE')}
-    ${a.dpiaRequired ? ' | DSFA erforderlich' : ''}
-    | Schutzniveau: ${PROTECTION_LEVEL_LABELS[a.protectionLevel]}
-    | Deployment: ${DEPLOYMENT_LABELS[a.deploymentModel]}
-  </div>
-</div>
-`
-    }
-
-    html += `
-<!-- FOOTER -->
-<div class="page-footer">
-  <span>Verzeichnis von Verarbeitungstaetigkeiten — ${orgHeader.organizationName}</span>
-  <span>Stand: ${today} | Version ${orgHeader.vvtVersion}</span>
-</div>
-
-</body>
-</html>`
-
-    return html
-  }
-
-  const handlePrintDocument = () => {
-    const htmlContent = buildDocumentHtml()
-    const printWindow = window.open('', '_blank')
-    if (printWindow) {
-      printWindow.document.write(htmlContent)
-      printWindow.document.close()
-      printWindow.focus()
-      setTimeout(() => printWindow.print(), 300)
-    }
-  }
-
-  const handleDownloadHtml = () => {
-    const htmlContent = buildDocumentHtml()
-    const blob = new Blob([htmlContent], { type: 'text/html;charset=utf-8' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `vvt-dokument-${new Date().toISOString().split('T')[0]}.html`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  const nonArchivedActivities = activities.filter(a => a.status !== 'ARCHIVED')
-
-  return (
-    <div className="space-y-4">
-      {/* Actions */}
-      <div className="bg-white rounded-xl border border-gray-200 p-6">
-        <div className="flex items-center justify-between mb-4">
-          <div>
-            <h3 className="text-lg font-semibold text-gray-900">VVT-Dokument (Art. 30 DSGVO)</h3>
-            <p className="text-sm text-gray-500 mt-0.5">
-              Druckfertiges Verarbeitungsverzeichnis mit Deckblatt, Inhaltsverzeichnis und allen {nonArchivedActivities.length} Verarbeitungstaetigkeiten.
-            </p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleDownloadHtml}
-              disabled={nonArchivedActivities.length === 0}
-              className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-            >
-              <svg className="w-4 h-4" 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>
-              HTML herunterladen
-            </button>
-            <button
-              onClick={handlePrintDocument}
-              disabled={nonArchivedActivities.length === 0}
-              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
-              </svg>
-              Als PDF drucken
-            </button>
-          </div>
-        </div>
-
-        {nonArchivedActivities.length === 0 && (
-          <div className="p-6 bg-gray-50 rounded-lg text-center text-gray-500">
-            Keine Verarbeitungstaetigkeiten vorhanden. Erstellen Sie zuerst Eintraege im Tab &quot;Verzeichnis&quot;.
-          </div>
-        )}
-      </div>
-
-      {/* Preview */}
-      {nonArchivedActivities.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <h4 className="text-sm font-medium text-gray-700 mb-4">Vorschau — Inhalt des Dokuments</h4>
-
-          {/* Cover preview */}
-          <div className="border border-purple-200 rounded-lg p-6 mb-4 text-center bg-purple-50/30">
-            <div className="text-xs text-purple-500 uppercase tracking-widest mb-2">Deckblatt</div>
-            <div className="text-xl font-bold text-purple-800 mb-1">Verzeichnis von Verarbeitungstaetigkeiten</div>
-            <div className="text-sm text-gray-500 mb-3">gemaess Art. 30 Abs. 1 DSGVO</div>
-            <div className="text-sm text-gray-700">
-              <strong>{orgHeader.organizationName || '(Organisation eintragen)'}</strong>
-              {orgHeader.dpoName && <><br />DSB: {orgHeader.dpoName}</>}
-              {orgHeader.dpoContact && <> ({orgHeader.dpoContact})</>}
-            </div>
-            <div className="text-xs text-gray-400 mt-3">
-              Version {orgHeader.vvtVersion} | Stand: {today}
-            </div>
-          </div>
-
-          {/* Activity list preview */}
-          <div className="space-y-3">
-            {nonArchivedActivities.map((a) => {
-              const hasArt9 = a.personalDataCategories.some(c => ART9_CATEGORIES.includes(c))
-              return (
-                <div key={a.id} className="border border-gray-200 rounded-lg p-4">
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className="font-mono text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">{a.vvtId}</span>
-                    <span className="text-sm font-semibold text-gray-900">{a.name || '(Ohne Namen)'}</span>
-                    <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[a.status]}`}>{STATUS_LABELS[a.status]}</span>
-                    {hasArt9 && <span className="px-2 py-0.5 text-xs bg-red-100 text-red-700 rounded-full">Art. 9</span>}
-                  </div>
-                  <div className="grid grid-cols-2 md:grid-cols-3 gap-x-4 gap-y-1 text-xs text-gray-600">
-                    <div><span className="font-medium text-gray-500">Zweck:</span> {a.purposes.join(', ') || '—'}</div>
-                    <div><span className="font-medium text-gray-500">Rechtsgrundlage:</span> {a.legalBases.map(lb => lb.type).join(', ') || '—'}</div>
-                    <div><span className="font-medium text-gray-500">Betroffene:</span> {a.dataSubjectCategories.length || 0} Kategorien</div>
-                    <div><span className="font-medium text-gray-500">Datenkategorien:</span> {a.personalDataCategories.length || 0}</div>
-                    <div><span className="font-medium text-gray-500">Empfaenger:</span> {a.recipientCategories.length || 0}</div>
-                    <div><span className="font-medium text-gray-500">Loeschfrist:</span> {a.retentionPeriod.description || '—'}</div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-
-          <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-700">
-            <strong>Tipp:</strong> Klicken Sie auf &quot;Als PDF drucken&quot; fuer das vollstaendige, formatierte Dokument mit allen
-            Pflichtfeldern nach Art. 30 DSGVO — inklusive Deckblatt und Inhaltsverzeichnis.
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-// =============================================================================
-// TAB 5: AUFTRAGSVERARBEITER (Art. 30 Abs. 2)
-// =============================================================================
-
-interface VendorForProcessor {
-  id: string
-  name: string
-  role: string
-  serviceDescription: string
-  country: string
-  processingLocations: { country: string; region?: string; isEU: boolean; isAdequate: boolean }[]
-  transferMechanisms: string[]
-  certifications: { type: string; expirationDate?: string }[]
-  status: string
-  primaryContact: { name: string; email: string; phone?: string }
-  dpoContact?: { name: string; email: string }
-  contractTypes: string[]
-  inherentRiskScore: number
-  residualRiskScore: number
-  nextReviewDate?: string
-  processingActivityIds: string[]
-  notes?: string
-  createdAt: string
-  updatedAt: string
-}
-
-async function apiListProcessorVendors(): Promise<VendorForProcessor[]> {
-  const res = await fetch('/api/sdk/v1/vendor-compliance/vendors?limit=500')
-  if (!res.ok) throw new Error(`Vendor API error: ${res.status}`)
-  const data = await res.json()
-  const items: any[] = data?.data?.items ?? []
-  return items
-    .filter((v: any) => v.role === 'PROCESSOR' || v.role === 'SUB_PROCESSOR')
-    .map((v: any) => ({
-      id: v.id,
-      name: v.name ?? '',
-      role: v.role ?? '',
-      serviceDescription: v.serviceDescription ?? v.service_description ?? '',
-      country: v.country ?? '',
-      processingLocations: (v.processingLocations ?? v.processing_locations ?? []).map((l: any) => ({
-        country: l.country ?? '',
-        region: l.region,
-        isEU: l.isEU ?? l.is_eu ?? false,
-        isAdequate: l.isAdequate ?? l.is_adequate ?? false,
-      })),
-      transferMechanisms: v.transferMechanisms ?? v.transfer_mechanisms ?? [],
-      certifications: (v.certifications ?? []).map((c: any) => ({
-        type: c.type ?? '',
-        expirationDate: c.expirationDate ?? c.expiration_date,
-      })),
-      status: v.status ?? 'ACTIVE',
-      primaryContact: {
-        name: v.primaryContact?.name ?? v.primary_contact?.name ?? '',
-        email: v.primaryContact?.email ?? v.primary_contact?.email ?? '',
-        phone: v.primaryContact?.phone ?? v.primary_contact?.phone,
-      },
-      dpoContact: (v.dpoContact ?? v.dpo_contact) ? {
-        name: (v.dpoContact ?? v.dpo_contact).name ?? '',
-        email: (v.dpoContact ?? v.dpo_contact).email ?? '',
-      } : undefined,
-      contractTypes: v.contractTypes ?? v.contract_types ?? [],
-      inherentRiskScore: v.inherentRiskScore ?? v.inherent_risk_score ?? 0,
-      residualRiskScore: v.residualRiskScore ?? v.residual_risk_score ?? 0,
-      nextReviewDate: v.nextReviewDate ?? v.next_review_date,
-      processingActivityIds: v.processingActivityIds ?? v.processing_activity_ids ?? [],
-      notes: v.notes,
-      createdAt: v.createdAt ?? v.created_at ?? '',
-      updatedAt: v.updatedAt ?? v.updated_at ?? '',
-    }))
-}
-
-const VENDOR_STATUS_LABELS: Record<string, string> = {
-  ACTIVE: 'Aktiv',
-  PENDING_REVIEW: 'In Pruefung',
-  APPROVED: 'Genehmigt',
-  SUSPENDED: 'Ausgesetzt',
-  ARCHIVED: 'Archiviert',
-  DRAFT: 'Entwurf',
-  REVIEW: 'In Pruefung',
-}
-
-const VENDOR_STATUS_COLORS: Record<string, string> = {
-  ACTIVE: 'bg-green-100 text-green-700',
-  PENDING_REVIEW: 'bg-yellow-100 text-yellow-700',
-  APPROVED: 'bg-green-100 text-green-800',
-  SUSPENDED: 'bg-red-100 text-red-700',
-  ARCHIVED: 'bg-gray-100 text-gray-600',
-  DRAFT: 'bg-gray-100 text-gray-600',
-  REVIEW: 'bg-yellow-100 text-yellow-700',
-}
-
-const ROLE_LABELS: Record<string, string> = {
-  PROCESSOR: 'Auftragsverarbeiter',
-  SUB_PROCESSOR: 'Unterauftragsverarbeiter',
-}
-
-function riskColor(score: number): string {
-  if (score <= 3) return 'bg-green-100 text-green-700'
-  if (score <= 6) return 'bg-yellow-100 text-yellow-700'
-  return 'bg-red-100 text-red-700'
-}
-
-function TabProcessor({ orgHeader }: { orgHeader: VVTOrganizationHeader }) {
-  const [vendors, setVendors] = useState<VendorForProcessor[]>([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    setError(null)
-    apiListProcessorVendors()
-      .then(data => { if (!cancelled) setVendors(data) })
-      .catch(err => { if (!cancelled) setError(err.message ?? 'Fehler beim Laden der Auftragsverarbeiter') })
-      .finally(() => { if (!cancelled) setLoading(false) })
-    return () => { cancelled = true }
-  }, [])
-
-  const handlePrintProcessorDoc = () => {
-    const today = new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
-    const activeVendors = vendors.filter(v => v.status !== 'ARCHIVED')
-    const subProcessors = vendors.filter(v => v.role === 'SUB_PROCESSOR')
-
-    let html = `
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <title>Verzeichnis Auftragsverarbeiter — Art. 30 Abs. 2 DSGVO</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 40px 30px; line-height: 1.6; color: #1a202c; font-size: 11pt; }
-    .cover { text-align: center; padding: 80px 0 60px; page-break-after: always; }
-    .cover h1 { font-size: 22pt; color: #5b21b6; margin-bottom: 8px; }
-    .cover .subtitle { font-size: 13pt; color: #6b7280; margin-bottom: 40px; }
-    .cover .org-info { font-size: 11pt; color: #374151; line-height: 2; }
-    .record { page-break-inside: avoid; margin-bottom: 30px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; }
-    .record-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #7c3aed; }
-    .record-header .vvt-id { font-family: monospace; font-size: 10pt; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
-    .record-header h3 { font-size: 13pt; color: #1f2937; }
-    table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 10pt; }
-    th { background: #f5f3ff; color: #5b21b6; font-weight: 600; text-align: left; padding: 8px 10px; border: 1px solid #e5e7eb; }
-    td { padding: 6px 10px; border: 1px solid #e5e7eb; vertical-align: top; }
-    .page-footer { margin-top: 40px; padding-top: 16px; border-top: 2px solid #e5e7eb; font-size: 9pt; color: #9ca3af; display: flex; justify-content: space-between; }
-    @media print { body { margin: 15mm; padding: 0; max-width: none; } .record { page-break-inside: avoid; } }
-  </style>
-</head>
-<body>
-<div class="cover">
-  <h1>Verzeichnis aller Verarbeitungstaetigkeiten</h1>
-  <div class="subtitle">als Auftragsverarbeiter gemaess Art. 30 Abs. 2 DSGVO</div>
-  <div class="org-info">
-    <strong>${orgHeader.organizationName || '(Organisation eintragen)'}</strong><br/>
-    ${orgHeader.dpoName ? `Datenschutzbeauftragter: ${orgHeader.dpoName}<br/>` : ''}
-    Stand: ${today}
-  </div>
-</div>
-`
-
-    for (const v of activeVendors) {
-      const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
-      const thirdCountryHtml = thirdCountryLocations.length > 0
-        ? thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ') +
-          (v.transferMechanisms.length > 0 ? `<br/>Garantien: ${v.transferMechanisms.join(', ')}` : '')
-        : 'Keine Drittlanduebermittlung'
-      const subProcessorHtml = subProcessors.length > 0
-        ? subProcessors.map(s => `${s.name} — ${s.serviceDescription || s.country}`).join('<br/>')
-        : 'Keine'
-
-      html += `
-<div class="record">
-  <div class="record-header">
-    <span class="vvt-id">${ROLE_LABELS[v.role] ?? v.role}</span>
-    <h3>${v.name}</h3>
-  </div>
-  <table>
-    <tr><th style="width:35%">Pflichtfeld (Art. 30 Abs. 2)</th><th>Inhalt</th></tr>
-    <tr><td><strong>Name/Kontaktdaten des Auftragsverarbeiters</strong></td><td>${orgHeader.organizationName}${orgHeader.dpoContact ? `<br/>Kontakt: ${orgHeader.dpoContact}` : ''}</td></tr>
-    <tr><td><strong>Name/Kontaktdaten des Verantwortlichen</strong></td><td>${v.name}${v.primaryContact.email ? `<br/>Kontakt: ${v.primaryContact.email}` : ''}</td></tr>
-    <tr><td><strong>Kategorien von Verarbeitungen</strong></td><td>${v.serviceDescription || '<em style="color:#9ca3af;">nicht angegeben</em>'}</td></tr>
-    <tr><td><strong>Unterauftragsverarbeiter</strong></td><td>${subProcessorHtml}</td></tr>
-    <tr><td><strong>Uebermittlung an Drittlaender</strong></td><td>${thirdCountryHtml}</td></tr>
-    <tr><td><strong>TOM (Art. 32 DSGVO)</strong></td><td>Siehe TOM-Dokumentation im Vendor-Compliance-Modul</td></tr>
-  </table>
-</div>
-`
-    }
-
-    html += `
-<div class="page-footer">
-  <span>Auftragsverarbeiter-Verzeichnis — ${orgHeader.organizationName}</span>
-  <span>Stand: ${today}</span>
-</div>
-</body></html>`
-
-    const printWindow = window.open('', '_blank')
-    if (printWindow) {
-      printWindow.document.write(html)
-      printWindow.document.close()
-      printWindow.focus()
-      setTimeout(() => printWindow.print(), 300)
-    }
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Info banner */}
-      <div className="bg-purple-50 border border-purple-200 rounded-xl p-4 flex items-start gap-3">
-        <svg className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" 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="flex-1">
-          <p className="text-sm text-purple-800">
-            Dieses Verzeichnis zeigt alle Auftragsverarbeiter aus dem Vendor Register.
-            Neue Auftragsverarbeiter hinzufuegen oder bestehende bearbeiten:
-          </p>
-          <a href="/sdk/vendor-compliance"
-            className="inline-flex items-center gap-1.5 mt-2 px-3 py-1.5 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-            </svg>
-            Zum Vendor Register
-          </a>
-        </div>
-      </div>
-
-      <div className="bg-white rounded-xl border border-gray-200 p-6">
-        <div className="flex items-center justify-between mb-4">
-          <div>
-            <h3 className="text-lg font-semibold text-gray-900">Auftragsverarbeiter-Verzeichnis (Art. 30 Abs. 2)</h3>
-            <p className="text-sm text-gray-500 mt-0.5">
-              Auftragsverarbeiter und Unterauftragsverarbeiter aus dem Vendor-Compliance-Modul (nur lesen).
-            </p>
-          </div>
-          {vendors.length > 0 && (
-            <button
-              onClick={handlePrintProcessorDoc}
-              className="flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
-              </svg>
-              Als PDF drucken
-            </button>
-          )}
-        </div>
-
-        {/* Loading state */}
-        {loading && (
-          <div className="p-8 text-center">
-            <div className="w-8 h-8 mx-auto border-2 border-purple-200 border-t-purple-600 rounded-full animate-spin mb-3" />
-            <p className="text-sm text-gray-500">Auftragsverarbeiter werden geladen...</p>
-          </div>
-        )}
-
-        {/* Error state */}
-        {!loading && error && (
-          <div className="p-6 bg-red-50 border border-red-200 rounded-lg text-center">
-            <p className="text-sm text-red-700 mb-2">{error}</p>
-            <button onClick={() => {
-              setLoading(true)
-              setError(null)
-              apiListProcessorVendors()
-                .then(setVendors)
-                .catch(err => setError(err.message))
-                .finally(() => setLoading(false))
-            }} className="text-sm text-red-600 underline hover:text-red-800">
-              Erneut versuchen
-            </button>
-          </div>
-        )}
-
-        {/* Empty state */}
-        {!loading && !error && vendors.length === 0 && (
-          <div className="p-8 bg-gray-50 rounded-lg text-center">
-            <div className="w-12 h-12 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-3">
-              <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            </div>
-            <h4 className="font-medium text-gray-700 mb-1">Keine Auftragsverarbeiter im Vendor Register</h4>
-            <p className="text-sm text-gray-500 max-w-md mx-auto">
-              Legen Sie Auftragsverarbeiter im Vendor Register an, damit sie hier automatisch erscheinen.
-            </p>
-            <a href="/sdk/vendor-compliance"
-              className="inline-flex items-center gap-1.5 mt-3 px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors">
-              Zum Vendor Register
-            </a>
-          </div>
-        )}
-
-        {/* Vendor cards (read-only) */}
-        {!loading && !error && vendors.length > 0 && (
-          <div className="space-y-3">
-            {vendors.map(v => {
-              const thirdCountryLocations = v.processingLocations.filter(l => !l.isEU && !l.isAdequate)
-              return (
-                <div key={v.id} className="bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-200 transition-colors">
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1 min-w-0">
-                      {/* Header: Name + Role + Status */}
-                      <div className="flex items-center gap-2 mb-1 flex-wrap">
-                        <h4 className="text-base font-semibold text-gray-900">{v.name}</h4>
-                        <span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">
-                          {ROLE_LABELS[v.role] ?? v.role}
-                        </span>
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${VENDOR_STATUS_COLORS[v.status] ?? 'bg-gray-100 text-gray-600'}`}>
-                          {VENDOR_STATUS_LABELS[v.status] ?? v.status}
-                        </span>
-                      </div>
-
-                      {/* Service description */}
-                      {v.serviceDescription && (
-                        <p className="text-sm text-gray-600 mt-1">{v.serviceDescription}</p>
-                      )}
-
-                      {/* Contact */}
-                      <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
-                        {v.primaryContact.name && (
-                          <span className="flex items-center gap-1">
-                            <svg className="w-3.5 h-3.5" 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>
-                            {v.primaryContact.name}
-                          </span>
-                        )}
-                        {v.primaryContact.email && (
-                          <span className="flex items-center gap-1">
-                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                            </svg>
-                            {v.primaryContact.email}
-                          </span>
-                        )}
-                      </div>
-
-                      {/* Risk + Meta row */}
-                      <div className="flex items-center gap-3 mt-2 flex-wrap">
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.inherentRiskScore)}`}>
-                          Inherent: {v.inherentRiskScore}
-                        </span>
-                        <span className={`px-2 py-0.5 text-xs rounded-full ${riskColor(v.residualRiskScore)}`}>
-                          Residual: {v.residualRiskScore}
-                        </span>
-                        {v.updatedAt && (
-                          <span className="text-xs text-gray-400">
-                            Aktualisiert: {new Date(v.updatedAt).toLocaleDateString('de-DE')}
-                          </span>
-                        )}
-                      </div>
-
-                      {/* Third-country transfers */}
-                      {thirdCountryLocations.length > 0 && (
-                        <div className="mt-2">
-                          <span className="text-xs font-medium text-amber-700 bg-amber-50 px-2 py-0.5 rounded">Drittlandtransfers:</span>
-                          <span className="text-xs text-gray-600 ml-1">
-                            {thirdCountryLocations.map(l => `${l.country}${l.region ? ` (${l.region})` : ''}`).join(', ')}
-                          </span>
-                        </div>
-                      )}
-
-                      {/* Certifications */}
-                      {v.certifications.length > 0 && (
-                        <div className="flex items-center gap-2 mt-2 flex-wrap">
-                          {v.certifications.map((c, i) => (
-                            <span key={i} className="px-2 py-0.5 text-xs rounded-full bg-blue-50 text-blue-700 border border-blue-200">
-                              {c.type}{c.expirationDate ? ` (bis ${new Date(c.expirationDate).toLocaleDateString('de-DE')})` : ''}
-                            </span>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Link to vendor register */}
-                    <div className="ml-4 flex-shrink-0">
-                      <a href="/sdk/vendor-compliance"
-                        className="px-3 py-1.5 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors inline-flex items-center gap-1">
-                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                        </svg>
-                        Im Vendor Register oeffnen
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* Legal info */}
-      <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
-        <h4 className="text-sm font-medium text-amber-800 mb-1">Art. 30 Abs. 2 DSGVO — Pflichtangaben</h4>
-        <ul className="text-sm text-amber-700 space-y-1 ml-4 list-disc">
-          <li>Name und Kontaktdaten des/der Auftragsverarbeiter(s) und jedes Verantwortlichen</li>
-          <li>Kategorien von Verarbeitungen, die im Auftrag jedes Verantwortlichen durchgefuehrt werden</li>
-          <li>Uebermittlungen an Drittlaender einschliesslich Dokumentierung geeigneter Garantien</li>
-          <li>Allgemeine Beschreibung der technischen und organisatorischen Massnahmen (Art. 32 Abs. 1)</li>
-        </ul>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// SHARED FORM COMPONENTS
-// =============================================================================
-
-function FormSection({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="p-4 space-y-3">
-      <h4 className="font-medium text-gray-800 text-sm">{title}</h4>
-      {children}
-    </div>
-  )
-}
-
-function FormField({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <label className="block text-xs text-gray-500 mb-1">{label}</label>
-      {children}
-    </div>
-  )
-}
-
-function MultiTextInput({ values, onChange, placeholder }: { values: string[]; onChange: (v: string[]) => void; placeholder?: string }) {
-  const [input, setInput] = useState('')
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && input.trim()) {
-      e.preventDefault()
-      onChange([...values, input.trim()])
-      setInput('')
-    }
-  }
-
-  return (
-    <div>
-      <div className="flex flex-wrap gap-1 mb-2">
-        {values.map((v, i) => (
-          <span key={i} className="flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-700 rounded text-sm">
-            {v}
-            <button onClick={() => onChange(values.filter((_, j) => j !== i))} className="text-purple-400 hover:text-purple-600">
-              <svg className="w-3 h-3" 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>
-      <input
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={handleKeyDown}
-        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
-        placeholder={placeholder}
-      />
-    </div>
-  )
-}
-
-function CheckboxGrid({ options, selected, onChange }: {
-  options: { value: string; label: string; highlight?: boolean }[]
-  selected: string[]
-  onChange: (v: string[]) => void
-}) {
-  const toggle = (value: string) => {
-    if (selected.includes(value)) {
-      onChange(selected.filter(v => v !== value))
-    } else {
-      onChange([...selected, value])
-    }
-  }
-
-  return (
-    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-1.5">
-      {options.map(opt => (
-        <label
-          key={opt.value}
-          className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer text-sm transition-colors ${
-            selected.includes(opt.value)
-              ? opt.highlight ? 'bg-red-50 border border-red-300' : 'bg-purple-50 border border-purple-300'
-              : opt.highlight ? 'bg-red-50/30 border border-gray-200' : 'border border-gray-200 hover:bg-gray-50'
-          }`}
-        >
-          <input
-            type="checkbox"
-            checked={selected.includes(opt.value)}
-            onChange={() => toggle(opt.value)}
-            className="w-3.5 h-3.5 text-purple-600 rounded"
-          />
-          <span className={opt.highlight ? 'text-red-700' : 'text-gray-700'}>{opt.label}</span>
-          {opt.highlight && <span className="text-xs text-red-400">Art.9</span>}
-        </label>
-      ))}
-    </div>
-  )
-}