feat: Betrieb-Module → 100% — Echte CRUD-Flows, kein Mock-Data

Alle 7 Betrieb-Module von 30–75% auf 100% gebracht:

**Gruppe 1 — UI-Ergänzungen (Backend bereits vorhanden):**
- incidents/page.tsx: IncidentCreateModal + IncidentDetailDrawer (Status-Transitions)
- whistleblower/page.tsx: WhistleblowerCreateModal + CaseDetailPanel (Kommentare, Zuweisung)
- dsr/page.tsx: DSRCreateModal + DSRDetailPanel (Workflow-Timeline, Status-Buttons)
- vendor-compliance/page.tsx: VendorCreateModal + "Neuer Vendor" Button

**Gruppe 2 — Escalations Full Stack:**
- Migration 011: compliance_escalations Tabelle
- Backend: escalation_routes.py (7 Endpoints: list/create/get/update/status/stats/delete)
- Proxy: /api/sdk/v1/escalations/[[...path]] → backend:8002
- Frontend: Mock-Array komplett ersetzt durch echte API + EscalationCreateModal + EscalationDetailDrawer

**Gruppe 2 — Consent Templates:**
- Migration 010: compliance_consent_email_templates + compliance_consent_gdpr_processes (7+7 Seed-Einträge)
- Backend: consent_template_routes.py (GET/POST/PUT/DELETE Templates + GET/PUT GDPR-Prozesse)
- Proxy: /api/sdk/v1/consent-templates/[[...path]]
- Frontend: consent-management/page.tsx lädt Templates + Prozesse aus DB (ApiTemplateEditor, ApiGdprProcessEditor)

**Gruppe 3 — Notfallplan:**
- Migration 012: 4 Tabellen (contacts, scenarios, checklists, exercises)
- Backend: notfallplan_routes.py (vollständiges CRUD + /stats)
- Proxy: /api/sdk/v1/notfallplan/[[...path]]
- Frontend: notfallplan/page.tsx — DB-backed Kontakte + Szenarien + Übungen, ContactCreateModal + ScenarioCreateModal

**Infrastruktur:**
- __init__.py: escalation_router + consent_template_router + notfallplan_router registriert
- Deploy-Skripte: apply_escalations_migration.sh, apply_consent_templates_migration.sh, apply_notfallplan_migration.sh
- Tests: 40 neue Tests (test_escalation_routes.py, test_consent_template_routes.py, test_notfallplan_routes.py)
- flow-data.ts: Completion aller 7 Module auf 100% gesetzt

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

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

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
 import { useSDK } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 import {
@@ -198,7 +198,7 @@ function FilterBar({
   )
 }
 
-function ReportCard({ report }: { report: WhistleblowerReport }) {
+function ReportCard({ report, onClick }: { report: WhistleblowerReport; onClick?: () => void }) {
   const categoryInfo = REPORT_CATEGORY_INFO[report.category]
   const statusInfo = REPORT_STATUS_INFO[report.status]
   const isClosed = report.status === 'closed' || report.status === 'rejected'
@@ -219,14 +219,17 @@ function ReportCard({ report }: { report: WhistleblowerReport }) {
   }
 
   return (
-    <div className={`
-      bg-white rounded-xl border-2 p-6 hover:shadow-md transition-all cursor-pointer
-      ${ackOverdue || fbOverdue ? 'border-red-300 hover:border-red-400' :
-        report.priority === 'critical' ? 'border-orange-300 hover:border-orange-400' :
-        isClosed ? 'border-green-200 hover:border-green-300' :
-        'border-gray-200 hover:border-purple-300'
-      }
-    `}>
+    <div
+      onClick={onClick}
+      className={`
+        bg-white rounded-xl border-2 p-6 hover:shadow-md transition-all cursor-pointer
+        ${ackOverdue || fbOverdue ? 'border-red-300 hover:border-red-400' :
+          report.priority === 'critical' ? 'border-orange-300 hover:border-orange-400' :
+          isClosed ? 'border-green-200 hover:border-green-300' :
+          'border-gray-200 hover:border-purple-300'
+        }
+      `}
+    >
       <div className="flex items-start justify-between">
         <div className="flex-1 min-w-0">
           {/* Header Badges */}
@@ -373,6 +376,493 @@ function ReportCard({ report }: { report: WhistleblowerReport }) {
   )
 }
 
+// =============================================================================
+// WHISTLEBLOWER CREATE MODAL
+// =============================================================================
+
+function WhistleblowerCreateModal({
+  onClose,
+  onSuccess
+}: {
+  onClose: () => void
+  onSuccess: () => void
+}) {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [category, setCategory] = useState<string>('corruption')
+  const [priority, setPriority] = useState<string>('normal')
+  const [isAnonymous, setIsAnonymous] = useState(true)
+  const [reporterName, setReporterName] = useState('')
+  const [reporterEmail, setReporterEmail] = useState('')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!title.trim() || !description.trim()) return
+
+    setIsSaving(true)
+    setError(null)
+    try {
+      const body: Record<string, unknown> = {
+        title: title.trim(),
+        description: description.trim(),
+        category,
+        priority,
+        isAnonymous,
+        status: 'new'
+      }
+      if (!isAnonymous) {
+        body.reporterName = reporterName.trim()
+        body.reporterEmail = reporterEmail.trim()
+      }
+
+      const res = await fetch('/api/sdk/v1/whistleblower/reports', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.detail || data?.message || `Fehler ${res.status}`)
+      }
+      onSuccess()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-xl font-semibold text-gray-900">Neue Meldung erfassen</h2>
+            <button
+              onClick={onClose}
+              className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Title */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Titel <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+                placeholder="Kurze Beschreibung des Vorfalls"
+              />
+            </div>
+
+            {/* Description */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Beschreibung <span className="text-red-500">*</span>
+              </label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                required
+                rows={4}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm resize-none"
+                placeholder="Detaillierte Beschreibung des Vorfalls..."
+              />
+            </div>
+
+            {/* Category */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Kategorie
+              </label>
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+              >
+                <option value="corruption">Korruption</option>
+                <option value="fraud">Betrug</option>
+                <option value="data_protection">Datenschutz</option>
+                <option value="discrimination">Diskriminierung</option>
+                <option value="environment">Umwelt</option>
+                <option value="competition">Wettbewerb</option>
+                <option value="product_safety">Produktsicherheit</option>
+                <option value="tax_evasion">Steuerhinterziehung</option>
+                <option value="other">Sonstiges</option>
+              </select>
+            </div>
+
+            {/* Priority */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Prioritaet
+              </label>
+              <select
+                value={priority}
+                onChange={(e) => setPriority(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+              >
+                <option value="normal">Normal</option>
+                <option value="high">Hoch</option>
+                <option value="critical">Kritisch</option>
+              </select>
+            </div>
+
+            {/* Anonymous */}
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                id="isAnonymous"
+                checked={isAnonymous}
+                onChange={(e) => setIsAnonymous(e.target.checked)}
+                className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+              />
+              <label htmlFor="isAnonymous" className="text-sm font-medium text-gray-700">
+                Anonyme Einreichung
+              </label>
+            </div>
+
+            {/* Reporter fields (only if not anonymous) */}
+            {!isAnonymous && (
+              <>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Name des Hinweisgebers
+                  </label>
+                  <input
+                    type="text"
+                    value={reporterName}
+                    onChange={(e) => setReporterName(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+                    placeholder="Vor- und Nachname"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    E-Mail des Hinweisgebers
+                  </label>
+                  <input
+                    type="email"
+                    value={reporterEmail}
+                    onChange={(e) => setReporterEmail(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+                    placeholder="email@beispiel.de"
+                  />
+                </div>
+              </>
+            )}
+
+            {/* Buttons */}
+            <div className="flex items-center justify-end gap-3 pt-2">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                Abbrechen
+              </button>
+              <button
+                type="submit"
+                disabled={isSaving || !title.trim() || !description.trim()}
+                className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {isSaving ? 'Wird eingereicht...' : 'Einreichen'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// CASE DETAIL PANEL
+// =============================================================================
+
+function CaseDetailPanel({
+  report,
+  onClose,
+  onUpdated
+}: {
+  report: WhistleblowerReport
+  onClose: () => void
+  onUpdated: () => 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 [actionError, setActionError] = useState<string | null>(null)
+
+  const categoryInfo = REPORT_CATEGORY_INFO[report.category]
+  const statusInfo = REPORT_STATUS_INFO[report.status]
+
+  const statusTransitions: Partial<Record<ReportStatus, { label: string; next: string }[]>> = {
+    new: [{ label: 'Bestaetigen', next: 'acknowledged' }],
+    acknowledged: [{ label: 'Pruefung starten', next: 'under_review' }],
+    under_review: [{ label: 'Untersuchung starten', next: 'investigation' }],
+    investigation: [{ label: 'Massnahmen eingeleitet', next: 'measures_taken' }],
+    measures_taken: [{ label: 'Abschliessen', next: 'closed' }]
+  }
+
+  const transitions = statusTransitions[report.status] || []
+
+  const handleStatusChange = async (newStatus: string) => {
+    setIsSavingStatus(true)
+    setActionError(null)
+    try {
+      const res = await fetch(`/api/sdk/v1/whistleblower/reports/${report.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: newStatus })
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.detail || data?.message || `Fehler ${res.status}`)
+      }
+      onUpdated()
+    } catch (err: unknown) {
+      setActionError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsSavingStatus(false)
+    }
+  }
+
+  const handleSaveOfficer = async () => {
+    setIsSavingOfficer(true)
+    setActionError(null)
+    try {
+      const res = await fetch(`/api/sdk/v1/whistleblower/reports/${report.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ assignedTo: officerName })
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.detail || data?.message || `Fehler ${res.status}`)
+      }
+      onUpdated()
+    } catch (err: unknown) {
+      setActionError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsSavingOfficer(false)
+    }
+  }
+
+  const handleSendComment = async () => {
+    if (!commentText.trim()) return
+    setIsSendingComment(true)
+    setActionError(null)
+    try {
+      const res = await fetch(`/api/sdk/v1/whistleblower/reports/${report.id}/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ senderRole: 'ombudsperson', message: commentText.trim() })
+      })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        throw new Error(data?.detail || data?.message || `Fehler ${res.status}`)
+      }
+      setCommentText('')
+      onUpdated()
+    } catch (err: unknown) {
+      setActionError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsSendingComment(false)
+    }
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/30"
+        onClick={onClose}
+      />
+
+      {/* Drawer */}
+      <div className="fixed right-0 top-0 bottom-0 z-50 w-[600px] bg-white shadow-2xl overflow-y-auto">
+        {/* Header */}
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
+          <div>
+            <p className="text-xs text-gray-500 font-mono">{report.referenceNumber}</p>
+            <h2 className="text-lg font-semibold text-gray-900 mt-0.5">{report.title}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {actionError && (
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+              {actionError}
+            </div>
+          )}
+
+          {/* Badges */}
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className={`px-2 py-1 text-xs rounded-full ${categoryInfo.bgColor} ${categoryInfo.color}`}>
+              {categoryInfo.label}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${statusInfo.bgColor} ${statusInfo.color}`}>
+              {statusInfo.label}
+            </span>
+            {report.isAnonymous && (
+              <span className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full">
+                Anonym
+              </span>
+            )}
+            <span className={`px-2 py-1 text-xs rounded-full ${
+              report.priority === 'critical' ? 'bg-red-100 text-red-700' :
+              report.priority === 'high' ? 'bg-orange-100 text-orange-700' :
+              'bg-gray-100 text-gray-600'
+            }`}>
+              {report.priority === 'critical' ? 'Kritisch' :
+               report.priority === 'high' ? 'Hoch' :
+               report.priority === 'normal' ? 'Normal' : 'Niedrig'}
+            </span>
+          </div>
+
+          {/* Description */}
+          <div>
+            <h3 className="text-sm font-medium text-gray-700 mb-2">Beschreibung</h3>
+            <p className="text-sm text-gray-600 whitespace-pre-wrap">{report.description}</p>
+          </div>
+
+          {/* Details */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-xs text-gray-500">Eingegangen am</p>
+              <p className="text-sm font-medium text-gray-900">
+                {new Date(report.receivedAt).toLocaleDateString('de-DE')}
+              </p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500">Zugewiesen an</p>
+              <p className="text-sm font-medium text-gray-900">
+                {report.assignedTo || '—'}
+              </p>
+            </div>
+          </div>
+
+          {/* Status Transitions */}
+          {transitions.length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 mb-3">Status aendern</h3>
+              <div className="flex flex-wrap gap-2">
+                {transitions.map((t) => (
+                  <button
+                    key={t.next}
+                    onClick={() => handleStatusChange(t.next)}
+                    disabled={isSavingStatus}
+                    className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  >
+                    {isSavingStatus ? 'Wird gespeichert...' : t.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Assign Officer */}
+          <div>
+            <h3 className="text-sm font-medium text-gray-700 mb-2">Zuweisen an:</h3>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={officerName}
+                onChange={(e) => setOfficerName(e.target.value)}
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+                placeholder="Name der zustaendigen Person"
+              />
+              <button
+                onClick={handleSaveOfficer}
+                disabled={isSavingOfficer}
+                className="px-4 py-2 text-sm bg-gray-800 text-white rounded-lg hover:bg-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {isSavingOfficer ? 'Speichern...' : 'Speichern'}
+              </button>
+            </div>
+          </div>
+
+          {/* Comment Section */}
+          <div>
+            <h3 className="text-sm font-medium text-gray-700 mb-2">Kommentar senden</h3>
+            <textarea
+              value={commentText}
+              onChange={(e) => setCommentText(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-purple-500 text-sm resize-none"
+              placeholder="Kommentar eingeben..."
+            />
+            <div className="mt-2 flex justify-end">
+              <button
+                onClick={handleSendComment}
+                disabled={isSendingComment || !commentText.trim()}
+                className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {isSendingComment ? 'Wird gesendet...' : 'Kommentar senden'}
+              </button>
+            </div>
+          </div>
+
+          {/* Message History */}
+          {report.messages.length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 mb-3">Nachrichten ({report.messages.length})</h3>
+              <div className="space-y-3">
+                {report.messages.map((msg, idx) => (
+                  <div key={idx} className="p-3 bg-gray-50 rounded-lg text-sm">
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="font-medium text-gray-700">{msg.senderRole}</span>
+                      <span className="text-xs text-gray-400">
+                        {new Date(msg.sentAt).toLocaleDateString('de-DE')}
+                      </span>
+                    </div>
+                    <p className="text-gray-600">{msg.message}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
 // =============================================================================
 // MAIN PAGE
 // =============================================================================
@@ -383,6 +873,8 @@ export default function WhistleblowerPage() {
   const [reports, setReports] = useState<WhistleblowerReport[]>([])
   const [statistics, setStatistics] = useState<WhistleblowerStatistics | null>(null)
   const [isLoading, setIsLoading] = useState(true)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [selectedReport, setSelectedReport] = useState<WhistleblowerReport | null>(null)
 
   // Filters
   const [selectedCategory, setSelectedCategory] = useState<ReportCategory | 'all'>('all')
@@ -390,22 +882,23 @@ export default function WhistleblowerPage() {
   const [selectedPriority, setSelectedPriority] = useState<ReportPriority | 'all'>('all')
 
   // Load data from SDK backend
-  useEffect(() => {
-    const loadData = async () => {
-      setIsLoading(true)
-      try {
-        const { reports: wbReports, statistics: wbStats } = await fetchSDKWhistleblowerList()
-        setReports(wbReports)
-        setStatistics(wbStats)
-      } catch (error) {
-        console.error('Failed to load Whistleblower data:', error)
-      } finally {
-        setIsLoading(false)
-      }
+  const loadData = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const { reports: wbReports, statistics: wbStats } = await fetchSDKWhistleblowerList()
+      setReports(wbReports)
+      setStatistics(wbStats)
+    } catch (error) {
+      console.error('Failed to load Whistleblower data:', error)
+    } finally {
+      setIsLoading(false)
     }
-    loadData()
   }, [])
 
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
   // Locally computed overdue counts (always fresh)
   const overdueCounts = useMemo(() => {
     const overdueAck = reports.filter(r => isAcknowledgmentOverdue(r)).length
@@ -493,14 +986,24 @@ export default function WhistleblowerPage() {
 
   return (
     <div className="space-y-6">
-      {/* Step Header - NO "create report" button (reports come from the public form) */}
+      {/* Step Header */}
       <StepHeader
         stepId="whistleblower"
         title={stepInfo.title}
         description={stepInfo.description}
         explanation={stepInfo.explanation}
         tips={stepInfo.tips}
-      />
+      >
+        <button
+          onClick={() => setShowCreateModal(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+          </svg>
+          Meldung erfassen
+        </button>
+      </StepHeader>
 
       {/* Tab Navigation */}
       <TabNavigation
@@ -633,7 +1136,11 @@ export default function WhistleblowerPage() {
           {/* Report List */}
           <div className="space-y-4">
             {filteredReports.map(report => (
-              <ReportCard key={report.id} report={report} />
+              <ReportCard
+                key={report.id}
+                report={report}
+                onClick={() => setSelectedReport(report)}
+              />
             ))}
           </div>
 
@@ -664,6 +1171,21 @@ export default function WhistleblowerPage() {
           )}
         </>
       )}
+
+      {/* Modals */}
+      {showCreateModal && (
+        <WhistleblowerCreateModal
+          onClose={() => setShowCreateModal(false)}
+          onSuccess={() => { setShowCreateModal(false); loadData() }}
+        />
+      )}
+      {selectedReport && (
+        <CaseDetailPanel
+          report={selectedReport}
+          onClose={() => setSelectedReport(null)}
+          onUpdated={() => { setSelectedReport(null); loadData() }}
+        />
+      )}
     </div>
   )
 }