feat: Alle 5 verbleibenden SDK-Module auf 100% — RAG, Security-Backlog, Quality, Notfallplan, Loeschfristen

Paket A — RAG Proxy:
- NEU: admin-compliance/app/api/sdk/v1/rag/[[...path]]/route.ts
  → Proxy zu ai-compliance-sdk:8090, GET+POST, UUID-Validierung
- UPDATE: rag/page.tsx — setTimeout Mock → echte API-Calls
  GET /regulations → dynamische suggestedQuestions
  POST /search → Qdrant-Ergebnisse mit score, title, reference

Paket B — Security-Backlog + Quality:
- NEU: migrations/014_security_backlog.sql + 015_quality.sql
- NEU: compliance/api/security_backlog_routes.py — CRUD + Stats
- NEU: compliance/api/quality_routes.py — Metrics + Tests CRUD + Stats
- UPDATE: security-backlog/page.tsx — mockItems → API
- UPDATE: quality/page.tsx — mockMetrics/mockTests → API
- UPDATE: compliance/api/__init__.py — Router-Registrierung
- NEU: tests/test_security_backlog_routes.py (48 Tests — 48/48 bestanden)
- NEU: tests/test_quality_routes.py (67 Tests — 67/67 bestanden)

Paket C — Notfallplan Incidents + Templates:
- NEU: migrations/016_notfallplan_incidents.sql
  compliance_notfallplan_incidents + compliance_notfallplan_templates
- UPDATE: notfallplan_routes.py — GET/POST/PUT/DELETE für /incidents + /templates
- UPDATE: notfallplan/page.tsx — Incidents-Tab + Templates-Tab → API
- UPDATE: tests/test_notfallplan_routes.py (+76 neue Tests — alle bestanden)

Paket D — Loeschfristen localStorage → API:
- NEU: migrations/017_loeschfristen.sql (JSONB: legal_holds, storage_locations, ...)
- NEU: compliance/api/loeschfristen_routes.py — CRUD + Stats + Status-Update
- UPDATE: loeschfristen/page.tsx — vollständige localStorage → API Migration
  createNewPolicy → POST (API-UUID als id), deletePolicy → DELETE,
  handleSaveAndClose → PUT, adoptGeneratedPolicies → POST je Policy
  apiToPolicy() + policyToPayload() Mapper, saving-State für Buttons
- NEU: tests/test_loeschfristen_routes.py (58 Tests — alle bestanden)

Gesamt: 253 neue Tests, alle bestanden (48 + 67 + 76 + 58 + bestehende)

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

admin-compliance/app/(sdk)/sdk/security-backlog/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 
 // =============================================================================
@@ -10,128 +10,70 @@ import { useSDK } from '@/lib/sdk'
 interface SecurityItem {
   id: string
   title: string
-  description: string
+  description: string | null
   type: 'vulnerability' | 'misconfiguration' | 'compliance' | 'hardening'
   severity: 'critical' | 'high' | 'medium' | 'low'
   status: 'open' | 'in-progress' | 'resolved' | 'accepted-risk'
-  source: string
+  source: string | null
   cve: string | null
   cvss: number | null
-  affectedAsset: string
-  assignedTo: string | null
-  createdAt: Date
-  dueDate: Date | null
+  affected_asset: string | null
+  assigned_to: string | null
+  created_at: string
+  due_date: string | null
+  remediation: string | null
+}
+
+interface Stats {
+  open: number
+  in_progress: number
+  critical: number
+  high: number
+  overdue: number
+  total: number
+}
+
+interface NewItem {
+  title: string
+  description: string
+  type: string
+  severity: string
+  source: string
+  cve: string
+  cvss: string
+  affected_asset: string
+  assigned_to: string
   remediation: string
 }
 
-// =============================================================================
-// MOCK DATA
-// =============================================================================
-
-const mockItems: SecurityItem[] = [
-  {
-    id: 'sec-001',
-    title: 'SQL Injection in Login-Modul',
-    description: 'Unzureichende Validierung von Benutzereingaben ermoeglicht SQL Injection',
-    type: 'vulnerability',
-    severity: 'critical',
-    status: 'in-progress',
-    source: 'Penetrationstest',
-    cve: 'CVE-2024-12345',
-    cvss: 9.8,
-    affectedAsset: 'auth-service',
-    assignedTo: 'Entwicklung',
-    createdAt: new Date('2024-01-15'),
-    dueDate: new Date('2024-01-25'),
-    remediation: 'Parameterisierte Queries verwenden, Input-Validierung implementieren',
-  },
-  {
-    id: 'sec-002',
-    title: 'Veraltete TLS-Version',
-    description: 'Server unterstuetzt noch TLS 1.0 und 1.1',
-    type: 'misconfiguration',
-    severity: 'high',
-    status: 'open',
-    source: 'Vulnerability Scanner',
-    cve: null,
-    cvss: 7.5,
-    affectedAsset: 'web-server',
-    assignedTo: null,
-    createdAt: new Date('2024-01-18'),
-    dueDate: new Date('2024-02-01'),
-    remediation: 'TLS 1.2 als Minimum konfigurieren, TLS 1.3 bevorzugen',
-  },
-  {
-    id: 'sec-003',
-    title: 'Fehlende Content-Security-Policy',
-    description: 'HTTP-Header CSP nicht konfiguriert',
-    type: 'hardening',
-    severity: 'medium',
-    status: 'open',
-    source: 'Security Audit',
-    cve: null,
-    cvss: 5.4,
-    affectedAsset: 'website',
-    assignedTo: 'DevOps',
-    createdAt: new Date('2024-01-10'),
-    dueDate: new Date('2024-02-15'),
-    remediation: 'Strikte CSP-Header implementieren',
-  },
-  {
-    id: 'sec-004',
-    title: 'Unsichere Cookie-Konfiguration',
-    description: 'Session-Cookies ohne Secure und HttpOnly Flags',
-    type: 'misconfiguration',
-    severity: 'medium',
-    status: 'resolved',
-    source: 'Code Review',
-    cve: null,
-    cvss: 5.3,
-    affectedAsset: 'auth-service',
-    assignedTo: 'Entwicklung',
-    createdAt: new Date('2024-01-05'),
-    dueDate: new Date('2024-01-15'),
-    remediation: 'Cookie-Flags setzen: Secure, HttpOnly, SameSite',
-  },
-  {
-    id: 'sec-005',
-    title: 'Veraltete Abhaengigkeit lodash',
-    description: 'Bekannte Schwachstelle in lodash < 4.17.21',
-    type: 'vulnerability',
-    severity: 'high',
-    status: 'in-progress',
-    source: 'SBOM Scan',
-    cve: 'CVE-2021-23337',
-    cvss: 7.2,
-    affectedAsset: 'frontend-app',
-    assignedTo: 'Entwicklung',
-    createdAt: new Date('2024-01-20'),
-    dueDate: new Date('2024-01-30'),
-    remediation: 'Abhaengigkeit auf Version 4.17.21 oder hoeher aktualisieren',
-  },
-  {
-    id: 'sec-006',
-    title: 'Fehlende Verschluesselung at Rest',
-    description: 'Datenbank-Backup ohne Verschluesselung',
-    type: 'compliance',
-    severity: 'high',
-    status: 'accepted-risk',
-    source: 'Compliance Audit',
-    cve: null,
-    cvss: null,
-    affectedAsset: 'database-backup',
-    assignedTo: 'IT Operations',
-    createdAt: new Date('2024-01-08'),
-    dueDate: null,
-    remediation: 'Backup-Verschluesselung aktivieren (AES-256)',
-  },
-]
+const EMPTY_NEW_ITEM: NewItem = {
+  title: '',
+  description: '',
+  type: 'vulnerability',
+  severity: 'medium',
+  source: '',
+  cve: '',
+  cvss: '',
+  affected_asset: '',
+  assigned_to: '',
+  remediation: '',
+}
 
 // =============================================================================
 // COMPONENTS
 // =============================================================================
 
-function SecurityItemCard({ item }: { item: SecurityItem }) {
+function SecurityItemCard({
+  item,
+  onEdit,
+  onDelete,
+  onStatusChange,
+}: {
+  item: SecurityItem
+  onEdit: (item: SecurityItem) => void
+  onDelete: (id: string) => void
+  onStatusChange: (id: string, status: string) => void
+}) {
   const typeLabels = {
     vulnerability: 'Schwachstelle',
     misconfiguration: 'Fehlkonfiguration',
@@ -167,7 +109,7 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
     'accepted-risk': 'Akzeptiert',
   }
 
-  const isOverdue = item.dueDate && item.dueDate < new Date() && item.status !== 'resolved'
+  const isOverdue = item.due_date && new Date(item.due_date) < new Date() && item.status !== 'resolved'
 
   return (
     <div className={`bg-white rounded-xl border-2 p-6 ${
@@ -189,26 +131,30 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
             </span>
           </div>
           <h3 className="text-lg font-semibold text-gray-900">{item.title}</h3>
-          <p className="text-sm text-gray-500 mt-1">{item.description}</p>
+          {item.description && <p className="text-sm text-gray-500 mt-1">{item.description}</p>}
         </div>
       </div>
 
       <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
-        <div>
-          <span className="text-gray-500">Betroffenes Asset: </span>
-          <span className="font-medium text-gray-700">{item.affectedAsset}</span>
-        </div>
-        <div>
-          <span className="text-gray-500">Quelle: </span>
-          <span className="font-medium text-gray-700">{item.source}</span>
-        </div>
+        {item.affected_asset && (
+          <div>
+            <span className="text-gray-500">Betroffenes Asset: </span>
+            <span className="font-medium text-gray-700">{item.affected_asset}</span>
+          </div>
+        )}
+        {item.source && (
+          <div>
+            <span className="text-gray-500">Quelle: </span>
+            <span className="font-medium text-gray-700">{item.source}</span>
+          </div>
+        )}
         {item.cve && (
           <div>
             <span className="text-gray-500">CVE: </span>
             <span className="font-mono text-gray-700">{item.cve}</span>
           </div>
         )}
-        {item.cvss && (
+        {item.cvss !== null && (
           <div>
             <span className="text-gray-500">CVSS: </span>
             <span className={`font-bold ${
@@ -218,40 +164,168 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
             }`}>{item.cvss}</span>
           </div>
         )}
-        <div>
-          <span className="text-gray-500">Zugewiesen: </span>
-          <span className="font-medium text-gray-700">{item.assignedTo || 'Nicht zugewiesen'}</span>
-        </div>
-        {item.dueDate && (
+        {item.assigned_to && (
+          <div>
+            <span className="text-gray-500">Zugewiesen: </span>
+            <span className="font-medium text-gray-700">{item.assigned_to}</span>
+          </div>
+        )}
+        {item.due_date && (
           <div className={isOverdue ? 'text-red-600' : ''}>
             <span className="text-gray-500">Frist: </span>
             <span className="font-medium">
-              {item.dueDate.toLocaleDateString('de-DE')}
+              {new Date(item.due_date).toLocaleDateString('de-DE')}
               {isOverdue && ' (ueberfaellig)'}
             </span>
           </div>
         )}
       </div>
 
-      <div className="mt-4 p-3 bg-gray-50 rounded-lg">
-        <span className="text-sm text-gray-500">Empfohlene Massnahme: </span>
-        <span className="text-sm text-gray-700">{item.remediation}</span>
-      </div>
+      {item.remediation && (
+        <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+          <span className="text-sm text-gray-500">Empfohlene Massnahme: </span>
+          <span className="text-sm text-gray-700">{item.remediation}</span>
+        </div>
+      )}
 
       <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
         <span className="text-xs text-gray-500">
-          Erstellt: {item.createdAt.toLocaleDateString('de-DE')}
+          Erstellt: {new Date(item.created_at).toLocaleDateString('de-DE')}
         </span>
-        {item.status !== 'resolved' && (
-          <div className="flex items-center gap-2">
-            <button className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
-              Bearbeiten
-            </button>
-            <button className="px-3 py-1 text-sm bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors">
-              Als behoben markieren
-            </button>
+        <div className="flex items-center gap-2">
+          {item.status !== 'resolved' && (
+            <>
+              <button
+                onClick={() => onEdit(item)}
+                className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+              >
+                Bearbeiten
+              </button>
+              <button
+                onClick={() => onStatusChange(item.id, 'resolved')}
+                className="px-3 py-1 text-sm bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors"
+              >
+                Als behoben markieren
+              </button>
+            </>
+          )}
+          <button
+            onClick={() => {
+              if (window.confirm(`"${item.title}" loeschen?`)) onDelete(item.id)
+            }}
+            className="px-2 py-1 text-sm text-red-400 hover:text-red-600 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>
+  )
+}
+
+// =============================================================================
+// MODAL
+// =============================================================================
+
+function ItemModal({
+  item,
+  onClose,
+  onSave,
+}: {
+  item: NewItem
+  onClose: () => void
+  onSave: (data: NewItem) => void
+}) {
+  const [form, setForm] = useState<NewItem>(item)
+
+  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-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 className="font-semibold text-gray-900">Sicherheitsbefund erfassen</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+            <input
+              type="text"
+              value={form.title}
+              onChange={e => setForm(p => ({ ...p, title: e.target.value }))}
+              placeholder="Kurzbeschreibung des Befunds"
+              className="w-full border rounded px-3 py-2 text-sm"
+            />
           </div>
-        )}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+            <textarea
+              value={form.description}
+              onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
+              rows={3}
+              className="w-full border rounded px-3 py-2 text-sm"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
+              <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm">
+                <option value="vulnerability">Schwachstelle</option>
+                <option value="misconfiguration">Fehlkonfiguration</option>
+                <option value="compliance">Compliance</option>
+                <option value="hardening">Haertung</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
+              <select value={form.severity} onChange={e => setForm(p => ({ ...p, severity: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm">
+                <option value="critical">Kritisch</option>
+                <option value="high">Hoch</option>
+                <option value="medium">Mittel</option>
+                <option value="low">Niedrig</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Quelle</label>
+              <input type="text" value={form.source} onChange={e => setForm(p => ({ ...p, source: e.target.value }))} placeholder="z.B. Penetrationstest" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Betroffenes Asset</label>
+              <input type="text" value={form.affected_asset} onChange={e => setForm(p => ({ ...p, affected_asset: e.target.value }))} placeholder="z.B. auth-service" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">CVE</label>
+              <input type="text" value={form.cve} onChange={e => setForm(p => ({ ...p, cve: e.target.value }))} placeholder="CVE-2024-XXXXX" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">CVSS Score</label>
+              <input type="number" step="0.1" min="0" max="10" value={form.cvss} onChange={e => setForm(p => ({ ...p, cvss: e.target.value }))} placeholder="0.0 - 10.0" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Zugewiesen an</label>
+              <input type="text" value={form.assigned_to} onChange={e => setForm(p => ({ ...p, assigned_to: e.target.value }))} placeholder="Team oder Person" 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">Massnahme</label>
+            <textarea value={form.remediation} onChange={e => setForm(p => ({ ...p, remediation: e.target.value }))} rows={2} placeholder="Empfohlene Abhilfemassnahme..." 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={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
+          <button
+            onClick={() => onSave(form)}
+            disabled={!form.title}
+            className="px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            Speichern
+          </button>
+        </div>
       </div>
     </div>
   )
@@ -261,22 +335,118 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
 // MAIN PAGE
 // =============================================================================
 
+const API = '/api/sdk/v1/compliance/security-backlog'
+
 export default function SecurityBacklogPage() {
   const { state } = useSDK()
-  const [items] = useState<SecurityItem[]>(mockItems)
+  const [items, setItems] = useState<SecurityItem[]>([])
+  const [stats, setStats] = useState<Stats>({ open: 0, in_progress: 0, critical: 0, high: 0, overdue: 0, total: 0 })
   const [filter, setFilter] = useState<string>('all')
+  const [loading, setLoading] = useState(true)
+  const [showModal, setShowModal] = useState(false)
+  const [editItem, setEditItem] = useState<SecurityItem | null>(null)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  async function loadData() {
+    setLoading(true)
+    try {
+      const [itemsRes, statsRes] = await Promise.all([
+        fetch(`${API}?limit=200`),
+        fetch(`${API}/stats`),
+      ])
+      if (itemsRes.ok) {
+        const data = await itemsRes.json()
+        setItems(Array.isArray(data.items) ? data.items : [])
+      }
+      if (statsRes.ok) {
+        const data = await statsRes.json()
+        setStats(data)
+      }
+    } catch (err) {
+      console.error('Failed to load security backlog:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleCreate(form: NewItem) {
+    try {
+      const res = await fetch(API, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...form,
+          cvss: form.cvss ? parseFloat(form.cvss) : null,
+        }),
+      })
+      if (res.ok) {
+        const created = await res.json()
+        setItems(prev => [created, ...prev])
+        setStats(prev => ({ ...prev, open: prev.open + 1, total: prev.total + 1 }))
+        setShowModal(false)
+      }
+    } catch (err) {
+      console.error('Failed to create item:', err)
+    }
+  }
+
+  async function handleUpdate(form: NewItem) {
+    if (!editItem) return
+    try {
+      const res = await fetch(`${API}/${editItem.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...form,
+          cvss: form.cvss ? parseFloat(form.cvss) : null,
+        }),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setItems(prev => prev.map(i => i.id === updated.id ? updated : i))
+        setEditItem(null)
+      }
+    } catch (err) {
+      console.error('Failed to update item:', err)
+    }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      const res = await fetch(`${API}/${id}`, { method: 'DELETE' })
+      if (res.ok || res.status === 204) {
+        setItems(prev => prev.filter(i => i.id !== id))
+        loadData() // refresh stats
+      }
+    } catch (err) {
+      console.error('Failed to delete item:', err)
+    }
+  }
+
+  async function handleStatusChange(id: string, status: string) {
+    try {
+      const res = await fetch(`${API}/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status }),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setItems(prev => prev.map(i => i.id === updated.id ? updated : i))
+        loadData() // refresh stats
+      }
+    } catch (err) {
+      console.error('Failed to update status:', err)
+    }
+  }
 
   const filteredItems = filter === 'all'
     ? items
     : items.filter(i => i.severity === filter || i.status === filter || i.type === filter)
 
-  const openItems = items.filter(i => i.status === 'open').length
-  const criticalCount = items.filter(i => i.severity === 'critical' && i.status !== 'resolved').length
-  const highCount = items.filter(i => i.severity === 'high' && i.status !== 'resolved').length
-  const overdueCount = items.filter(i =>
-    i.dueDate && i.dueDate < new Date() && i.status !== 'resolved'
-  ).length
-
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -288,10 +458,10 @@ export default function SecurityBacklogPage() {
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <button className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-            SBOM importieren
-          </button>
-          <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+          <button
+            onClick={() => { setEditItem(null); setShowModal(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>
@@ -304,24 +474,24 @@ export default function SecurityBacklogPage() {
       <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
         <div className="bg-white rounded-xl border border-gray-200 p-6">
           <div className="text-sm text-gray-500">Offen</div>
-          <div className="text-3xl font-bold text-gray-900">{openItems}</div>
+          <div className="text-3xl font-bold text-gray-900">{stats.open}</div>
         </div>
         <div className="bg-white rounded-xl border border-red-200 p-6">
           <div className="text-sm text-red-600">Kritisch</div>
-          <div className="text-3xl font-bold text-red-600">{criticalCount}</div>
+          <div className="text-3xl font-bold text-red-600">{stats.critical}</div>
         </div>
         <div className="bg-white rounded-xl border border-orange-200 p-6">
           <div className="text-sm text-orange-600">Hoch</div>
-          <div className="text-3xl font-bold text-orange-600">{highCount}</div>
+          <div className="text-3xl font-bold text-orange-600">{stats.high}</div>
         </div>
         <div className="bg-white rounded-xl border border-yellow-200 p-6">
           <div className="text-sm text-yellow-600">Ueberfaellig</div>
-          <div className="text-3xl font-bold text-yellow-600">{overdueCount}</div>
+          <div className="text-3xl font-bold text-yellow-600">{stats.overdue}</div>
         </div>
       </div>
 
       {/* Critical Alert */}
-      {criticalCount > 0 && (
+      {stats.critical > 0 && (
         <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-4">
           <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
             <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -329,10 +499,8 @@ export default function SecurityBacklogPage() {
             </svg>
           </div>
           <div>
-            <h4 className="font-medium text-red-800">{criticalCount} kritische Schwachstelle(n) erfordern sofortige Aufmerksamkeit</h4>
-            <p className="text-sm text-red-600">
-              Diese Befunde haben ein CVSS von 9.0 oder hoeher und sollten priorisiert werden.
-            </p>
+            <h4 className="font-medium text-red-800">{stats.critical} kritische Schwachstelle(n) erfordern sofortige Aufmerksamkeit</h4>
+            <p className="text-sm text-red-600">Diese Befunde haben ein CVSS von 9.0 oder hoeher und sollten priorisiert werden.</p>
           </div>
         </div>
       )}
@@ -345,47 +513,73 @@ export default function SecurityBacklogPage() {
             key={f}
             onClick={() => setFilter(f)}
             className={`px-3 py-1 text-sm rounded-full transition-colors ${
-              filter === f
-                ? 'bg-purple-600 text-white'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
             }`}
           >
-            {f === 'all' ? 'Alle' :
-             f === 'open' ? 'Offen' :
-             f === 'in-progress' ? 'In Bearbeitung' :
-             f === 'critical' ? 'Kritisch' :
-             f === 'high' ? 'Hoch' :
+            {f === 'all' ? 'Alle' : f === 'open' ? 'Offen' : f === 'in-progress' ? 'In Bearbeitung' :
+             f === 'critical' ? 'Kritisch' : f === 'high' ? 'Hoch' :
              f === 'vulnerability' ? 'Schwachstellen' : 'Fehlkonfigurationen'}
           </button>
         ))}
       </div>
 
       {/* Items List */}
-      <div className="space-y-4">
-        {filteredItems
-          .sort((a, b) => {
-            // Sort by severity and status
-            const severityOrder = { critical: 0, high: 1, medium: 2, low: 3 }
-            const statusOrder = { open: 0, 'in-progress': 1, 'accepted-risk': 2, resolved: 3 }
-            const severityDiff = severityOrder[a.severity] - severityOrder[b.severity]
-            if (severityDiff !== 0) return severityDiff
-            return statusOrder[a.status] - statusOrder[b.status]
-          })
-          .map(item => (
-            <SecurityItemCard key={item.id} item={item} />
-          ))}
-      </div>
-
-      {filteredItems.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-green-100 rounded-full flex items-center justify-center mb-4">
-            <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold text-gray-900">Keine Befunde gefunden</h3>
-          <p className="mt-2 text-gray-500">Passen Sie den Filter an oder fuehren Sie einen neuen Scan durch.</p>
+      {loading ? (
+        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center text-gray-400">
+          Lade Sicherheitsbefunde...
         </div>
+      ) : (
+        <div className="space-y-4">
+          {filteredItems
+            .sort((a, b) => {
+              const sOrder = { critical: 0, high: 1, medium: 2, low: 3 }
+              const stOrder = { open: 0, 'in-progress': 1, 'accepted-risk': 2, resolved: 3 }
+              const sd = sOrder[a.severity] - sOrder[b.severity]
+              if (sd !== 0) return sd
+              return stOrder[a.status] - stOrder[b.status]
+            })
+            .map(item => (
+              <SecurityItemCard
+                key={item.id}
+                item={item}
+                onEdit={i => { setEditItem(i); setShowModal(true) }}
+                onDelete={handleDelete}
+                onStatusChange={handleStatusChange}
+              />
+            ))}
+
+          {filteredItems.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-green-100 rounded-full flex items-center justify-center mb-4">
+                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900">Keine Befunde gefunden</h3>
+              <p className="mt-2 text-gray-500">Passen Sie den Filter an oder erfassen Sie einen neuen Befund.</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      {showModal && (
+        <ItemModal
+          item={editItem ? {
+            title: editItem.title,
+            description: editItem.description || '',
+            type: editItem.type,
+            severity: editItem.severity,
+            source: editItem.source || '',
+            cve: editItem.cve || '',
+            cvss: editItem.cvss !== null ? String(editItem.cvss) : '',
+            affected_asset: editItem.affected_asset || '',
+            assigned_to: editItem.assigned_to || '',
+            remediation: editItem.remediation || '',
+          } : EMPTY_NEW_ITEM}
+          onClose={() => { setShowModal(false); setEditItem(null) }}
+          onSave={editItem ? handleUpdate : handleCreate}
+        />
       )}
     </div>
   )