diff --git a/admin-compliance/app/sdk/vvt/_components/FormPrimitives.tsx b/admin-compliance/app/sdk/vvt/_components/FormPrimitives.tsx
new file mode 100644
index 0000000..7ad6b11
--- /dev/null
+++ b/admin-compliance/app/sdk/vvt/_components/FormPrimitives.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import { useState } from 'react'
+
+export 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>
+  )
+}
+
+export 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>
+  )
+}
+
+export 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>
+  )
+}
+
+export 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>
+  )
+}
diff --git a/admin-compliance/app/sdk/vvt/_components/TabEditor.tsx b/admin-compliance/app/sdk/vvt/_components/TabEditor.tsx
new file mode 100644
index 0000000..cace8b8
--- /dev/null
+++ b/admin-compliance/app/sdk/vvt/_components/TabEditor.tsx
@@ -0,0 +1,402 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  DATA_SUBJECT_CATEGORY_META,
+  PERSONAL_DATA_CATEGORY_META,
+  LEGAL_BASIS_META,
+  TRANSFER_MECHANISM_META,
+  ART9_CATEGORIES,
+  BUSINESS_FUNCTION_LABELS,
+  STATUS_LABELS,
+  STATUS_COLORS,
+  PROTECTION_LEVEL_LABELS,
+  DEPLOYMENT_LABELS,
+} from '@/lib/sdk/vvt-types'
+import type { VVTActivity, BusinessFunction } from '@/lib/sdk/vvt-types'
+import { FormSection, FormField, MultiTextInput, CheckboxGrid } from './FormPrimitives'
+
+export 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>
+  )
+}
diff --git a/admin-compliance/app/sdk/vvt/_components/TabExport.tsx b/admin-compliance/app/sdk/vvt/_components/TabExport.tsx
new file mode 100644
index 0000000..9d3f8c3
--- /dev/null
+++ b/admin-compliance/app/sdk/vvt/_components/TabExport.tsx
@@ -0,0 +1,230 @@
+'use client'
+
+import {
+  DATA_SUBJECT_CATEGORY_META,
+  PERSONAL_DATA_CATEGORY_META,
+  ART9_CATEGORIES,
+  STATUS_LABELS,
+  REVIEW_INTERVAL_LABELS,
+} from '@/lib/sdk/vvt-types'
+import type { VVTActivity, VVTOrganizationHeader } from '@/lib/sdk/vvt-types'
+import { FormField } from './FormPrimitives'
+
+export 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>
+
+      {/* 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>
+  )
+}
diff --git a/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx b/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx
new file mode 100644
index 0000000..717ab59
--- /dev/null
+++ b/admin-compliance/app/sdk/vvt/_components/TabVerzeichnis.tsx
@@ -0,0 +1,281 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import {
+  ART9_CATEGORIES,
+  BUSINESS_FUNCTION_LABELS,
+  STATUS_LABELS,
+  STATUS_COLORS,
+} from '@/lib/sdk/vvt-types'
+import type { VVTActivity } from '@/lib/sdk/vvt-types'
+import {
+  generateActivities,
+  prefillFromScopeAnswers,
+} from '@/lib/sdk/vvt-profiling'
+
+export function TabVerzeichnis({
+  activities, allActivities, activeCount, draftCount, thirdCountryCount, art9Count,
+  filter, setFilter, searchQuery, setSearchQuery, sortBy, setSortBy,
+  scopeAnswers, onEdit, onNew, onDelete, onAdoptGenerated,
+}: {
+  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
+}) {
+  const [scopePreview, setScopePreview] = useState<VVTActivity[] | null>(null)
+  const [isGenerating, setIsGenerating] = 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={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>
+      )}
+    </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>
+            )}
+          </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>
+          </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>
+  )
+}
diff --git a/admin-compliance/app/sdk/vvt/_components/api.ts b/admin-compliance/app/sdk/vvt/_components/api.ts
new file mode 100644
index 0000000..31ebc5a
--- /dev/null
+++ b/admin-compliance/app/sdk/vvt/_components/api.ts
@@ -0,0 +1,140 @@
+import type { VVTActivity, VVTOrganizationHeader } from '@/lib/sdk/vvt-types'
+
+export const VVT_API_BASE = '/api/sdk/v1/compliance/vvt'
+
+export 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(),
+  }
+}
+
+export 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,
+  }
+}
+
+export 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',
+  }
+}
+
+export 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,
+  }
+}
+
+export 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)
+}
+
+export 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)
+}
+
+export 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())
+}
+
+export 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())
+}
+
+export 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}`)
+}
+
+export 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())
+}
diff --git a/admin-compliance/app/sdk/vvt/page.tsx b/admin-compliance/app/sdk/vvt/page.tsx
index 5c04a2b..b2de449 100644
--- a/admin-compliance/app/sdk/vvt/page.tsx
+++ b/admin-compliance/app/sdk/vvt/page.tsx
@@ -9,185 +9,30 @@
  * 3. Export & Compliance
  */
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 import StepHeader, { STEP_EXPLANATIONS } from '@/components/sdk/StepHeader/StepHeader'
 import {
-  DATA_SUBJECT_CATEGORY_META,
-  PERSONAL_DATA_CATEGORY_META,
-  LEGAL_BASIS_META,
-  TRANSFER_MECHANISM_META,
   ART9_CATEGORIES,
-  BUSINESS_FUNCTION_LABELS,
-  STATUS_LABELS,
-  STATUS_COLORS,
-  PROTECTION_LEVEL_LABELS,
-  DEPLOYMENT_LABELS,
-  REVIEW_INTERVAL_LABELS,
   createEmptyActivity,
   createDefaultOrgHeader,
   generateVVTId,
-  isSpecialCategory,
 } from '@/lib/sdk/vvt-types'
-import type { VVTActivity, VVTOrganizationHeader, BusinessFunction } from '@/lib/sdk/vvt-types'
+import type { VVTActivity, VVTOrganizationHeader } from '@/lib/sdk/vvt-types'
 import {
-  generateActivities,
-  prefillFromScopeAnswers,
-} from '@/lib/sdk/vvt-profiling'
-
-// =============================================================================
-// CONSTANTS
-// =============================================================================
+  apiListActivities,
+  apiGetOrganization,
+  apiCreateActivity,
+  apiUpdateActivity,
+  apiDeleteActivity,
+  apiUpsertOrganization,
+} from './_components/api'
+import { TabVerzeichnis } from './_components/TabVerzeichnis'
+import { TabEditor } from './_components/TabEditor'
+import { TabExport } from './_components/TabExport'
 
 type Tab = 'verzeichnis' | 'editor' | 'export'
 
-// =============================================================================
-// 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(),
-  }
-}
-
-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,
-  }
-}
-
-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())
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
-
 export default function VVTPage() {
   const { state } = useSDK()
   const [tab, setTab] = useState<Tab>('verzeichnis')
@@ -389,983 +234,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,
-}: {
-  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
-}) {
-  const [scopePreview, setScopePreview] = useState<VVTActivity[] | null>(null)
-  const [isGenerating, setIsGenerating] = 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={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>
-      )}
-    </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>
-            )}
-          </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>
-          </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>
-
-      {/* 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>
-  )
-}
-
-// =============================================================================
-// 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>
-  )
-}