feat: Betrieb-Module auf 100% — Buttons verdrahtet, Delete-Flows, tote Links gefixt

- consent-management: ConsentTemplateCreateModal + useRouter für DSR-Navigation
- vendor-compliance: QuickActionCard unterstützt onClick; /vendors/new → Modal, /processing-activities/new → Liste
- incidents: handleDeleteIncident + Löschen-Button im IncidentDetailDrawer
- whistleblower: handleDeleteReport + Löschen-Button im CaseDetailPanel
- escalations: handleDeleteEscalation + Löschen-Button im EscalationDetailDrawer
- notfallplan: ExerciseCreateModal (API-backed) + handleDeleteExercise + Neue-Übung-Button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

admin-compliance/app/(sdk)/sdk/consent-management/page.tsx

@@ -12,6 +12,7 @@
  */
 
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { useSDK } from '@/lib/sdk'
 import StepHeader from '@/components/sdk/StepHeader/StepHeader'
@@ -207,9 +208,138 @@ function ApiGdprProcessEditor({
   )
 }
 
+// =============================================================================
+// CONSENT TEMPLATE CREATE MODAL
+// =============================================================================
+
+function ConsentTemplateCreateModal({
+  onClose,
+  onSuccess,
+}: {
+  onClose: () => void
+  onSuccess: () => void
+}) {
+  const [templateKey, setTemplateKey] = useState('')
+  const [subject, setSubject] = useState('')
+  const [body, setBody] = useState('')
+  const [language, setLanguage] = useState('de')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSave() {
+    if (!templateKey.trim()) {
+      setError('Template-Key ist erforderlich.')
+      return
+    }
+    setSaving(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/sdk/v1/consent-templates', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          template_key: templateKey.trim(),
+          subject: subject.trim(),
+          body: body.trim(),
+          language,
+        }),
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data.detail || data.message || `Fehler: ${res.status}`)
+      }
+      onSuccess()
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
+        <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
+          <h3 className="font-semibold text-slate-900">Neue E-Mail Vorlage</h3>
+          <button onClick={onClose} className="text-slate-400 hover:text-slate-600">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="p-6 space-y-4">
+          {error && (
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
+          )}
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              Template-Key <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={templateKey}
+              onChange={e => setTemplateKey(e.target.value)}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="z.B. dsr_confirmation"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Sprache</label>
+            <select
+              value={language}
+              onChange={e => setLanguage(e.target.value)}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+            >
+              <option value="de">Deutsch</option>
+              <option value="en">English</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Betreff</label>
+            <input
+              type="text"
+              value={subject}
+              onChange={e => setSubject(e.target.value)}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+              placeholder="E-Mail Betreff"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">Inhalt</label>
+            <textarea
+              value={body}
+              onChange={e => setBody(e.target.value)}
+              rows={6}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500 resize-none"
+              placeholder="E-Mail Inhalt..."
+            />
+          </div>
+        </div>
+        <div className="px-6 py-4 border-t border-slate-200 flex items-center justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+          >
+            {saving ? 'Speichern...' : 'Vorlage erstellen'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function ConsentManagementPage() {
   const { state } = useSDK()
+  const router = useRouter()
   const [activeTab, setActiveTab] = useState<Tab>('documents')
+  const [showCreateTemplateModal, setShowCreateTemplateModal] = useState(false)
   const [documents, setDocuments] = useState<Document[]>([])
   const [versions, setVersions] = useState<Version[]>([])
   const [loading, setLoading] = useState(true)
@@ -797,7 +927,10 @@ export default function ConsentManagementPage() {
                       : '16 Lifecycle-Vorlagen fuer automatisierte Kommunikation'}
                   </p>
                 </div>
-                <button className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">
+                <button
+                  onClick={() => setShowCreateTemplateModal(true)}
+                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium"
+                >
                   + Neue Vorlage
                 </button>
               </div>
@@ -904,7 +1037,10 @@ export default function ConsentManagementPage() {
                   <h2 className="text-lg font-semibold text-slate-900">DSGVO Betroffenenrechte</h2>
                   <p className="text-sm text-slate-500 mt-1">Artikel 15-21 Prozesse und Vorlagen</p>
                 </div>
-                <button className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium">
+                <button
+                  onClick={() => router.push('/sdk/dsr')}
+                  className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm font-medium"
+                >
                   + DSR Anfrage erstellen
                 </button>
               </div>
@@ -1109,6 +1245,14 @@ export default function ConsentManagementPage() {
         </div>
       )}
 
+      {/* Consent Template Create Modal */}
+      {showCreateTemplateModal && (
+        <ConsentTemplateCreateModal
+          onClose={() => setShowCreateTemplateModal(false)}
+          onSuccess={() => { setShowCreateTemplateModal(false); loadApiEmailTemplates() }}
+        />
+      )}
+
       {/* Email Template Preview Modal */}
       {previewTemplate && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">

admin-compliance/app/(sdk)/sdk/escalations/page.tsx

@@ -252,6 +252,23 @@ function EscalationDetailDrawer({ escalation, onClose, onUpdated }: DrawerProps)
   )
   const [saving, setSaving] = useState(false)
   const [statusSaving, setStatusSaving] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  async function handleDeleteEscalation() {
+    if (!window.confirm(`Eskalation "${escalation.title}" wirklich löschen?`)) return
+    setIsDeleting(true)
+    try {
+      const res = await fetch(`/api/sdk/v1/escalations/${escalation.id}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error(`Fehler: ${res.status}`)
+      onUpdated()
+      onClose()
+    } catch (err) {
+      console.error('Löschen fehlgeschlagen:', err)
+      alert('Löschen fehlgeschlagen.')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
 
   async function handleSaveEdit() {
     setSaving(true)
@@ -446,6 +463,17 @@ function EscalationDetailDrawer({ escalation, onClose, onUpdated }: DrawerProps)
               )}
             </div>
           </div>
+
+          {/* Delete */}
+          <div className="pt-2 border-t border-gray-100">
+            <button
+              onClick={handleDeleteEscalation}
+              disabled={isDeleting}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm transition-colors disabled:opacity-50"
+            >
+              {isDeleting ? 'Löschen...' : 'Löschen'}
+            </button>
+          </div>
         </div>
       </div>
     </div>

admin-compliance/app/(sdk)/sdk/incidents/page.tsx

@@ -604,13 +604,31 @@ const STATUS_TRANSITIONS: Record<string, { label: string; nextStatus: string } |
 function IncidentDetailDrawer({
   incident,
   onClose,
-  onStatusChange
+  onStatusChange,
+  onDeleted,
 }: {
   incident: Incident
   onClose: () => void
   onStatusChange: () => void
+  onDeleted?: () => void
 }) {
   const [isChangingStatus, setIsChangingStatus] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  const handleDeleteIncident = async () => {
+    if (!window.confirm(`Incident "${incident.title}" wirklich löschen?`)) return
+    setIsDeleting(true)
+    try {
+      const res = await fetch(`/api/sdk/v1/incidents/${incident.id}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error(`Fehler: ${res.status}`)
+      onDeleted ? onDeleted() : onClose()
+    } catch (err) {
+      console.error('Löschen fehlgeschlagen:', err)
+      alert('Löschen fehlgeschlagen.')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
   const severityInfo = INCIDENT_SEVERITY_INFO[incident.severity]
   const statusInfo = INCIDENT_STATUS_INFO[incident.status]
   const categoryInfo = INCIDENT_CATEGORY_INFO[incident.category]
@@ -762,6 +780,17 @@ function IncidentDetailDrawer({
             <p className="text-xs text-gray-500 mb-2">72h-Meldefrist</p>
             <CountdownTimer incident={incident} />
           </div>
+
+          {/* Delete */}
+          <div className="pt-2 border-t border-gray-100">
+            <button
+              onClick={handleDeleteIncident}
+              disabled={isDeleting}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm transition-colors disabled:opacity-50"
+            >
+              {isDeleting ? 'Löschen...' : 'Löschen'}
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -1113,6 +1142,7 @@ export default function IncidentsPage() {
           incident={selectedIncident}
           onClose={() => setSelectedIncident(null)}
           onStatusChange={() => { setSelectedIncident(null); loadData() }}
+          onDeleted={() => { setSelectedIncident(null); loadData() }}
         />
       )}
     </div>

admin-compliance/app/(sdk)/sdk/notfallplan/page.tsx

@@ -369,6 +369,7 @@ export default function NotfallplanPage() {
   const [exercises, setExercises] = useState<Exercise[]>([])
   const [showAddIncident, setShowAddIncident] = useState(false)
   const [showAddExercise, setShowAddExercise] = useState(false)
+  const [showExerciseModal, setShowExerciseModal] = useState(false)
   const [saved, setSaved] = useState(false)
 
   // API-backed state
@@ -380,8 +381,10 @@ export default function NotfallplanPage() {
   const [showScenarioModal, setShowScenarioModal] = useState(false)
   const [newContact, setNewContact] = useState({ name: '', role: '', email: '', phone: '', is_primary: false, available_24h: false })
   const [newScenario, setNewScenario] = useState({ title: '', category: 'data_breach', severity: 'medium', description: '' })
+  const [newExercise, setNewExercise] = useState({ title: '', exercise_type: 'tabletop', exercise_date: '', notes: '' })
   const [savingContact, setSavingContact] = useState(false)
   const [savingScenario, setSavingScenario] = useState(false)
+  const [savingExercise, setSavingExercise] = useState(false)
 
   useEffect(() => {
     const data = loadFromStorage()
@@ -477,6 +480,43 @@ export default function NotfallplanPage() {
     }
   }
 
+  async function handleCreateExercise() {
+    if (!newExercise.title.trim()) return
+    setSavingExercise(true)
+    try {
+      const res = await fetch(`${NOTFALLPLAN_API}/exercises`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: newExercise.title.trim(),
+          exercise_type: newExercise.exercise_type,
+          exercise_date: newExercise.exercise_date || null,
+          notes: newExercise.notes.trim() || null,
+        }),
+      })
+      if (res.ok) {
+        setShowExerciseModal(false)
+        setNewExercise({ title: '', exercise_type: 'tabletop', exercise_date: '', notes: '' })
+        loadApiData()
+      }
+    } catch (e) {
+      console.error('Uebung erstellen fehlgeschlagen:', e)
+    } finally {
+      setSavingExercise(false)
+    }
+  }
+
+  async function handleDeleteExercise(id: string) {
+    try {
+      const res = await fetch(`${NOTFALLPLAN_API}/exercises/${id}`, { method: 'DELETE' })
+      if (res.ok) {
+        setApiExercises(prev => prev.filter(e => e.id !== id))
+      }
+    } catch (e) {
+      console.error('Löschen fehlgeschlagen:', e)
+    }
+  }
+
   async function handleDeleteScenario(id: string) {
     try {
       const res = await fetch(`${NOTFALLPLAN_API}/scenarios/${id}`, { method: 'DELETE' })
@@ -669,7 +709,15 @@ export default function NotfallplanPage() {
             <div className="bg-white rounded-lg border p-5">
               <div className="flex items-center justify-between mb-4">
                 <h3 className="text-base font-semibold">Uebungen (Datenbank)</h3>
-                <span className="text-sm text-gray-500">{apiExercises.length} Eintraege</span>
+                <div className="flex items-center gap-3">
+                  <span className="text-sm text-gray-500">{apiExercises.length} Eintraege</span>
+                  <button
+                    onClick={() => setShowExerciseModal(true)}
+                    className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
+                  >
+                    + Neue Uebung
+                  </button>
+                </div>
               </div>
               {apiExercises.length === 0 ? (
                 <div className="text-sm text-gray-400 py-2 text-center">Noch keine Uebungen in der Datenbank</div>
@@ -685,6 +733,19 @@ export default function NotfallplanPage() {
                           {ex.outcome && <span className={`text-xs px-2 py-0.5 rounded ${ex.outcome === 'passed' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{ex.outcome}</span>}
                         </div>
                       </div>
+                      <button
+                        onClick={() => {
+                          if (window.confirm(`Uebung "${ex.title}" loeschen?`)) {
+                            handleDeleteExercise(ex.id)
+                          }
+                        }}
+                        className="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                        title="Loeschen"
+                      >
+                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </button>
                     </div>
                   ))}
                 </div>
@@ -792,6 +853,79 @@ export default function NotfallplanPage() {
         </div>
       )}
 
+      {/* Exercise Create Modal */}
+      {showExerciseModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4">
+            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+              <h3 className="font-semibold text-gray-900">Neue Uebung planen</h3>
+              <button onClick={() => setShowExerciseModal(false)} className="text-gray-400 hover:text-gray-600">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <div className="p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+                <input
+                  type="text"
+                  value={newExercise.title}
+                  onChange={e => setNewExercise(p => ({ ...p, title: e.target.value }))}
+                  placeholder="z.B. Tabletop-Uebung Ransomware"
+                  className="w-full border rounded px-3 py-2 text-sm"
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Uebungstyp</label>
+                  <select
+                    value={newExercise.exercise_type}
+                    onChange={e => setNewExercise(p => ({ ...p, exercise_type: e.target.value }))}
+                    className="w-full border rounded px-3 py-2 text-sm"
+                  >
+                    <option value="tabletop">Tabletop</option>
+                    <option value="simulation">Simulation</option>
+                    <option value="walkthrough">Walkthrough</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Datum</label>
+                  <input
+                    type="date"
+                    value={newExercise.exercise_date}
+                    onChange={e => setNewExercise(p => ({ ...p, exercise_date: e.target.value }))}
+                    className="w-full border rounded px-3 py-2 text-sm"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
+                <textarea
+                  value={newExercise.notes}
+                  onChange={e => setNewExercise(p => ({ ...p, notes: e.target.value }))}
+                  placeholder="Ziele, Teilnehmer, Ablauf..."
+                  rows={3}
+                  className="w-full border rounded px-3 py-2 text-sm"
+                />
+              </div>
+            </div>
+            <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+              <button onClick={() => setShowExerciseModal(false)} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">
+                Abbrechen
+              </button>
+              <button
+                onClick={handleCreateExercise}
+                disabled={!newExercise.title || savingExercise}
+                className="px-4 py-2 text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg font-medium disabled:opacity-50"
+              >
+                {savingExercise ? 'Speichern...' : 'Uebung erstellen'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Scenario Create Modal */}
       {showScenarioModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">

admin-compliance/app/(sdk)/sdk/vendor-compliance/page.tsx

@@ -414,7 +414,7 @@ export default function VendorComplianceDashboard() {
         <QuickActionCard
           title="Neue Verarbeitung"
           description="Verarbeitungstätigkeit anlegen"
-          href="/sdk/vendor-compliance/processing-activities/new"
+          href="/sdk/vendor-compliance/processing-activities"
           icon={
             <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 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" />
@@ -424,7 +424,7 @@ export default function VendorComplianceDashboard() {
         <QuickActionCard
           title="Neuer Vendor"
           description="Auftragsverarbeiter anlegen"
-          href="/sdk/vendor-compliance/vendors/new"
+          onClick={() => setShowVendorCreate(true)}
           icon={
             <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
@@ -559,18 +559,17 @@ function QuickActionCard({
   title,
   description,
   href,
+  onClick,
   icon,
 }: {
   title: string
   description: string
-  href: string
+  href?: string
+  onClick?: () => void
   icon: React.ReactNode
 }) {
-  return (
-    <Link
-      href={href}
-      className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-md transition-shadow flex items-start gap-4"
-    >
+  const inner = (
+    <>
       <div className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-blue-600 dark:text-blue-400">
         {icon}
       </div>
@@ -578,6 +577,26 @@ function QuickActionCard({
         <h3 className="font-medium text-gray-900 dark:text-white">{title}</h3>
         <p className="text-sm text-gray-500 dark:text-gray-400">{description}</p>
       </div>
+    </>
+  )
+
+  if (onClick) {
+    return (
+      <button
+        onClick={onClick}
+        className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-md transition-shadow flex items-start gap-4 w-full text-left"
+      >
+        {inner}
+      </button>
+    )
+  }
+
+  return (
+    <Link
+      href={href!}
+      className="bg-white dark:bg-gray-800 rounded-lg shadow p-6 hover:shadow-md transition-shadow flex items-start gap-4"
+    >
+      {inner}
     </Link>
   )
 }

admin-compliance/app/(sdk)/sdk/whistleblower/page.tsx

@@ -607,19 +607,36 @@ function WhistleblowerCreateModal({
 function CaseDetailPanel({
   report,
   onClose,
-  onUpdated
+  onUpdated,
+  onDeleted,
 }: {
   report: WhistleblowerReport
   onClose: () => void
   onUpdated: () => void
+  onDeleted?: () => void
 }) {
   const [officerName, setOfficerName] = useState(report.assignedTo || '')
   const [commentText, setCommentText] = useState('')
   const [isSavingOfficer, setIsSavingOfficer] = useState(false)
   const [isSavingStatus, setIsSavingStatus] = useState(false)
   const [isSendingComment, setIsSendingComment] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
   const [actionError, setActionError] = useState<string | null>(null)
 
+  const handleDeleteReport = async () => {
+    if (!window.confirm(`Meldung "${report.title}" wirklich löschen?`)) return
+    setIsDeleting(true)
+    try {
+      const res = await fetch(`/api/sdk/v1/whistleblower/reports/${report.id}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error(`Fehler: ${res.status}`)
+      onDeleted ? onDeleted() : onClose()
+    } catch (err: unknown) {
+      setActionError(err instanceof Error ? err.message : 'Löschen fehlgeschlagen.')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
   const categoryInfo = REPORT_CATEGORY_INFO[report.category]
   const statusInfo = REPORT_STATUS_INFO[report.status]
 
@@ -857,6 +874,17 @@ function CaseDetailPanel({
               </div>
             </div>
           )}
+
+          {/* Delete */}
+          <div className="pt-2 border-t border-gray-100">
+            <button
+              onClick={handleDeleteReport}
+              disabled={isDeleting}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm transition-colors disabled:opacity-50"
+            >
+              {isDeleting ? 'Löschen...' : 'Löschen'}
+            </button>
+          </div>
         </div>
       </div>
     </>
@@ -1184,6 +1212,7 @@ export default function WhistleblowerPage() {
           report={selectedReport}
           onClose={() => setSelectedReport(null)}
           onUpdated={() => { setSelectedReport(null); loadData() }}
+          onDeleted={() => { setSelectedReport(null); loadData() }}
         />
       )}
     </div>