feat: add compliance modules 2-5 (dashboard, security templates, process manager, evidence collector)

Module 2: Extended Compliance Dashboard with roadmap, module-status, next-actions, snapshots, score-history
Module 3: 7 German security document templates (IT-Sicherheitskonzept, Datenschutz, Backup, Logging, Incident-Response, Zugriff, Risikomanagement)
Module 4: Compliance Process Manager with CRUD, complete/skip/seed, ~50 seed tasks, 3-tab UI
Module 5: Evidence Collector Extended with automated checks, control-mapping, coverage report, 4-tab UI

Also includes: canonical control library enhancements (verification method, categories, dedup), control generator improvements, RAG client extensions

52 tests pass, frontend builds clean.

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

admin-compliance/app/sdk/control-library/components/ControlDetail.tsx

@@ -8,7 +8,7 @@ import {
 } from 'lucide-react'
 import {
   CanonicalControl, EFFORT_LABELS, BACKEND_URL,
-  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge,
+  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge, TargetAudienceBadge,
   VERIFICATION_METHODS, CATEGORY_OPTIONS,
 } from './helpers'
 
@@ -124,6 +124,7 @@ export function ControlDetail({
               <LicenseRuleBadge rule={ctrl.license_rule} />
               <VerificationMethodBadge method={ctrl.verification_method} />
               <CategoryBadge category={ctrl.category} />
+              <TargetAudienceBadge audience={ctrl.target_audience} />
             </div>
             <h2 className="text-lg font-semibold text-gray-900 mt-1">{ctrl.title}</h2>
           </div>
@@ -163,22 +164,46 @@ export function ControlDetail({
           <p className="text-sm text-gray-700 leading-relaxed">{ctrl.rationale}</p>
         </section>
 
-        {/* Source Info (Rule 1 + 2) */}
+        {/* Gesetzliche Grundlage (Rule 1 + 2) */}
         {ctrl.source_citation && (
           <section className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <div className="flex items-center gap-2 mb-2">
+            <div className="flex items-center gap-2 mb-3">
               <Scale className="w-4 h-4 text-blue-600" />
-              <h3 className="text-sm font-semibold text-blue-900">Quellenangabe</h3>
+              <h3 className="text-sm font-semibold text-blue-900">Gesetzliche Grundlage</h3>
+              {ctrl.license_rule === 1 && (
+                <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">Direkte gesetzliche Pflicht</span>
+              )}
+              {ctrl.license_rule === 2 && (
+                <span className="text-xs bg-teal-100 text-teal-700 px-2 py-0.5 rounded-full">Standard mit Zitationspflicht</span>
+              )}
             </div>
-            <div className="text-xs text-blue-700 space-y-1">
-              {Object.entries(ctrl.source_citation).map(([k, v]) => (
-                <p key={k}><span className="font-medium">{k}:</span> {v}</p>
-              ))}
+            <div className="flex items-start gap-3">
+              <div className="flex-1">
+                {ctrl.source_citation.source && (
+                  <p className="text-sm font-medium text-blue-900 mb-1">{ctrl.source_citation.source}</p>
+                )}
+                {ctrl.source_citation.license && (
+                  <p className="text-xs text-blue-600">Lizenz: {ctrl.source_citation.license}</p>
+                )}
+                {ctrl.source_citation.license_notice && (
+                  <p className="text-xs text-blue-600 mt-0.5">{ctrl.source_citation.license_notice}</p>
+                )}
+              </div>
+              {ctrl.source_citation.url && (
+                <a
+                  href={ctrl.source_citation.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 whitespace-nowrap"
+                >
+                  <ExternalLink className="w-3.5 h-3.5" />Quelle
+                </a>
+              )}
             </div>
             {ctrl.source_original_text && (
               <details className="mt-3">
                 <summary className="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Originaltext anzeigen</summary>
-                <p className="text-xs text-gray-600 mt-2 p-2 bg-white rounded border border-blue-100 leading-relaxed max-h-40 overflow-y-auto">
+                <p className="text-xs text-gray-600 mt-2 p-2 bg-white rounded border border-blue-100 leading-relaxed max-h-40 overflow-y-auto whitespace-pre-wrap">
                   {ctrl.source_original_text}
                 </p>
               </details>
@@ -186,6 +211,19 @@ export function ControlDetail({
           </section>
         )}
 
+        {/* Impliziter Gesetzesbezug (Rule 3 — kein Originaltext, aber ggf. Gesetzesbezug ueber Anchors) */}
+        {!ctrl.source_citation && ctrl.open_anchors.length > 0 && (
+          <section className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+            <div className="flex items-center gap-2">
+              <Scale className="w-4 h-4 text-amber-600" />
+              <p className="text-xs text-amber-700">
+                Dieser Control setzt implizit gesetzliche Anforderungen um (z.B. DSGVO Art. 32, NIS2 Art. 21).
+                Die konkreten Massnahmen leiten sich aus den Open-Source-Referenzen unten ab.
+              </p>
+            </div>
+          </section>
+        )}
+
         {/* Scope */}
         {(ctrl.scope.platforms?.length || ctrl.scope.components?.length || ctrl.scope.data_classes?.length) ? (
           <section>

admin-compliance/app/sdk/control-library/components/ControlForm.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { BookOpen, Trash2, Save, X } from 'lucide-react'
-import { EMPTY_CONTROL, VERIFICATION_METHODS, CATEGORY_OPTIONS } from './helpers'
+import { EMPTY_CONTROL, VERIFICATION_METHODS, CATEGORY_OPTIONS, TARGET_AUDIENCE_OPTIONS } from './helpers'
 
 export function ControlForm({
   initial,
@@ -268,8 +268,8 @@ export function ControlForm({
         </div>
       </div>
 
-      {/* Verification Method & Category */}
-      <div className="grid grid-cols-2 gap-4">
+      {/* Verification Method, Category & Target Audience */}
+      <div className="grid grid-cols-3 gap-4">
         <div>
           <label className="block text-xs font-medium text-gray-600 mb-1">Nachweismethode</label>
           <select
@@ -297,6 +297,20 @@ export function ControlForm({
             ))}
           </select>
         </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-600 mb-1">Zielgruppe</label>
+          <select
+            value={form.target_audience || ''}
+            onChange={e => setForm({ ...form, target_audience: e.target.value || null })}
+            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg"
+          >
+            <option value="">— Nicht zugewiesen —</option>
+            {Object.entries(TARGET_AUDIENCE_OPTIONS).map(([k, v]) => (
+              <option key={k} value={k}>{v.label}</option>
+            ))}
+          </select>
+          <p className="text-xs text-gray-400 mt-1">Fuer wen ist dieses Control relevant?</p>
+        </div>
       </div>
     </div>
   )

admin-compliance/app/sdk/control-library/components/helpers.tsx

@@ -44,6 +44,7 @@ export interface CanonicalControl {
   customer_visible?: boolean
   verification_method: string | null
   category: string | null
+  target_audience: string | null
   generation_metadata?: Record<string, unknown> | null
   created_at: string
   updated_at: string
@@ -96,6 +97,7 @@ export const EMPTY_CONTROL = {
   tags: [] as string[],
   verification_method: null as string | null,
   category: null as string | null,
+  target_audience: null as string | null,
 }
 
 export const DOMAIN_OPTIONS = [
@@ -138,6 +140,13 @@ export const CATEGORY_OPTIONS = [
   { value: 'identity', label: 'Identitaetsmanagement' },
 ]
 
+export const TARGET_AUDIENCE_OPTIONS: Record<string, { bg: string; label: string }> = {
+  enterprise: { bg: 'bg-cyan-100 text-cyan-700', label: 'Unternehmen' },
+  authority: { bg: 'bg-rose-100 text-rose-700', label: 'Behoerden' },
+  provider: { bg: 'bg-violet-100 text-violet-700', label: 'Anbieter' },
+  all: { bg: 'bg-gray-100 text-gray-700', label: 'Alle' },
+}
+
 export const COLLECTION_OPTIONS = [
   { value: 'bp_compliance_ce', label: 'CE (OWASP, ENISA, BSI)' },
   { value: 'bp_compliance_gesetze', label: 'Gesetze (EU, DE, BSI)' },
@@ -213,6 +222,13 @@ export function CategoryBadge({ category }: { category: string | null }) {
   )
 }
 
+export function TargetAudienceBadge({ audience }: { audience: string | null }) {
+  if (!audience) return null
+  const config = TARGET_AUDIENCE_OPTIONS[audience]
+  if (!config) return null
+  return <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${config.bg}`}>{config.label}</span>
+}
+
 export function getDomain(controlId: string): string {
   return controlId.split('-')[0] || ''
 }

admin-compliance/app/sdk/control-library/page.tsx

@@ -2,13 +2,14 @@
 
 import { useState, useEffect, useMemo, useCallback } from 'react'
 import {
-  Shield, Search, ChevronRight, Filter, Lock,
+  Shield, Search, ChevronRight, ChevronLeft, Filter, Lock,
   BookOpen, Plus, Zap, BarChart3, ListChecks,
+  ChevronsLeft, ChevronsRight,
 } from 'lucide-react'
 import {
   CanonicalControl, Framework, BACKEND_URL, EMPTY_CONTROL,
-  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge,
-  getDomain, VERIFICATION_METHODS, CATEGORY_OPTIONS,
+  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge, TargetAudienceBadge,
+  getDomain, VERIFICATION_METHODS, CATEGORY_OPTIONS, TARGET_AUDIENCE_OPTIONS,
 } from './components/helpers'
 import { ControlForm } from './components/ControlForm'
 import { ControlDetail } from './components/ControlDetail'
@@ -32,6 +33,7 @@ export default function ControlLibraryPage() {
   const [stateFilter, setStateFilter] = useState<string>('')
   const [verificationFilter, setVerificationFilter] = useState<string>('')
   const [categoryFilter, setCategoryFilter] = useState<string>('')
+  const [audienceFilter, setAudienceFilter] = useState<string>('')
 
   // CRUD state
   const [mode, setMode] = useState<'list' | 'detail' | 'create' | 'edit'>('list')
@@ -42,6 +44,10 @@ export default function ControlLibraryPage() {
   const [processedStats, setProcessedStats] = useState<Array<Record<string, unknown>>>([])
   const [showStats, setShowStats] = useState(false)
 
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1)
+  const PAGE_SIZE = 50
+
   // Review mode
   const [reviewMode, setReviewMode] = useState(false)
   const [reviewIndex, setReviewIndex] = useState(0)
@@ -80,6 +86,7 @@ export default function ControlLibraryPage() {
       if (stateFilter && c.release_state !== stateFilter) return false
       if (verificationFilter && c.verification_method !== verificationFilter) return false
       if (categoryFilter && c.category !== categoryFilter) return false
+      if (audienceFilter && c.target_audience !== audienceFilter) return false
       if (searchQuery) {
         const q = searchQuery.toLowerCase()
         return (
@@ -91,7 +98,17 @@ export default function ControlLibraryPage() {
       }
       return true
     })
-  }, [controls, severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, searchQuery])
+  }, [controls, severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, searchQuery])
+
+  // Reset page when filters change
+  useEffect(() => { setCurrentPage(1) }, [severityFilter, domainFilter, stateFilter, verificationFilter, categoryFilter, audienceFilter, searchQuery])
+
+  // Pagination
+  const totalPages = Math.max(1, Math.ceil(filteredControls.length / PAGE_SIZE))
+  const paginatedControls = useMemo(() => {
+    const start = (currentPage - 1) * PAGE_SIZE
+    return filteredControls.slice(start, start + PAGE_SIZE)
+  }, [filteredControls, currentPage])
 
   // Review queue items
   const reviewItems = useMemo(() => {
@@ -413,6 +430,16 @@ export default function ControlLibraryPage() {
               <option key={c.value} value={c.value}>{c.label}</option>
             ))}
           </select>
+          <select
+            value={audienceFilter}
+            onChange={e => setAudienceFilter(e.target.value)}
+            className="text-sm border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          >
+            <option value="">Alle Zielgruppen</option>
+            {Object.entries(TARGET_AUDIENCE_OPTIONS).map(([k, v]) => (
+              <option key={k} value={k}>{v.label}</option>
+            ))}
+          </select>
         </div>
 
         {/* Processing Stats */}
@@ -443,10 +470,19 @@ export default function ControlLibraryPage() {
         />
       )}
 
+      {/* Pagination Header */}
+      <div className="px-6 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between text-xs text-gray-500">
+        <span>
+          {filteredControls.length} Controls gefunden
+          {filteredControls.length !== controls.length && ` (von ${controls.length} gesamt)`}
+        </span>
+        <span>Seite {currentPage} von {totalPages}</span>
+      </div>
+
       {/* Control List */}
       <div className="flex-1 overflow-y-auto p-6">
         <div className="space-y-3">
-          {filteredControls.map(ctrl => (
+          {paginatedControls.map(ctrl => (
             <button
               key={ctrl.control_id}
               onClick={() => { setSelectedControl(ctrl); setMode('detail') }}
@@ -454,13 +490,14 @@ export default function ControlLibraryPage() {
             >
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
+                  <div className="flex items-center gap-2 mb-1 flex-wrap">
                     <span className="text-xs font-mono text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{ctrl.control_id}</span>
                     <SeverityBadge severity={ctrl.severity} />
                     <StateBadge state={ctrl.release_state} />
                     <LicenseRuleBadge rule={ctrl.license_rule} />
                     <VerificationMethodBadge method={ctrl.verification_method} />
                     <CategoryBadge category={ctrl.category} />
+                    <TargetAudienceBadge audience={ctrl.target_audience} />
                     {ctrl.risk_score !== null && (
                       <span className="text-xs text-gray-400">Score: {ctrl.risk_score}</span>
                     )}
@@ -472,11 +509,14 @@ export default function ControlLibraryPage() {
                   <div className="flex items-center gap-2 mt-2">
                     <BookOpen className="w-3 h-3 text-green-600" />
                     <span className="text-xs text-green-700">
-                      {ctrl.open_anchors.length} Open-Source-Referenzen:
-                    </span>
-                    <span className="text-xs text-gray-500">
-                      {ctrl.open_anchors.map(a => a.framework).filter((v, i, arr) => arr.indexOf(v) === i).join(', ')}
+                      {ctrl.open_anchors.length} Referenzen
                     </span>
+                    {ctrl.source_citation?.source && (
+                      <>
+                        <span className="text-gray-300">|</span>
+                        <span className="text-xs text-blue-600">{ctrl.source_citation.source}</span>
+                      </>
+                    )}
                   </div>
                 </div>
                 <ChevronRight className="w-4 h-4 text-gray-300 group-hover:text-purple-500 flex-shrink-0 mt-1 ml-4" />
@@ -492,6 +532,72 @@ export default function ControlLibraryPage() {
             </div>
           )}
         </div>
+
+        {/* Pagination Controls */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-center gap-2 mt-6 pb-4">
+            <button
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Erste Seite"
+            >
+              <ChevronsLeft className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+              disabled={currentPage === 1}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Vorherige Seite"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+
+            {/* Page numbers */}
+            {Array.from({ length: totalPages }, (_, i) => i + 1)
+              .filter(p => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
+              .reduce<(number | 'dots')[]>((acc, p, i, arr) => {
+                if (i > 0 && p - (arr[i - 1] as number) > 1) acc.push('dots')
+                acc.push(p)
+                return acc
+              }, [])
+              .map((p, i) =>
+                p === 'dots' ? (
+                  <span key={`dots-${i}`} className="px-1 text-gray-400">...</span>
+                ) : (
+                  <button
+                    key={p}
+                    onClick={() => setCurrentPage(p as number)}
+                    className={`w-8 h-8 text-sm rounded-lg ${
+                      currentPage === p
+                        ? 'bg-purple-600 text-white'
+                        : 'text-gray-600 hover:bg-purple-50 hover:text-purple-600'
+                    }`}
+                  >
+                    {p}
+                  </button>
+                )
+              )
+            }
+
+            <button
+              onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+              disabled={currentPage === totalPages}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Naechste Seite"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(totalPages)}
+              disabled={currentPage === totalPages}
+              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed"
+              title="Letzte Seite"
+            >
+              <ChevronsRight className="w-4 h-4" />
+            </button>
+          </div>
+        )}
       </div>
     </div>
   )

admin-compliance/app/sdk/document-generator/page.tsx

@@ -44,6 +44,7 @@ const CATEGORIES: { key: string; label: string; types: string[] | null }[] = [
   { key: 'cloud', label: 'Cloud', types: ['cloud_service_agreement'] },
   { key: 'misc', label: 'Weitere', types: ['community_guidelines', 'copyright_policy', 'data_usage_clause'] },
   { key: 'dsfa', label: 'DSFA', types: ['dsfa'] },
+  { key: 'security', label: 'Sicherheitskonzepte', types: ['it_security_concept', 'data_protection_concept', 'backup_recovery_concept', 'logging_concept', 'incident_response_plan', 'access_control_concept', 'risk_management_concept'] },
 ]
 
 // =============================================================================

admin-compliance/app/sdk/evidence/page.tsx

@@ -303,8 +303,76 @@ function LoadingSkeleton() {
 // MAIN PAGE
 // =============================================================================
 
+// =============================================================================
+// EVIDENCE CHECK TYPES
+// =============================================================================
+
+interface EvidenceCheck {
+  id: string
+  check_code: string
+  title: string
+  description: string | null
+  check_type: string
+  target_url: string | null
+  frequency: string
+  is_active: boolean
+  last_run_at: string | null
+  next_run_at: string | null
+}
+
+interface CheckResult {
+  id: string
+  check_id: string
+  run_status: string
+  summary: string | null
+  findings_count: number
+  critical_findings: number
+  duration_ms: number
+  run_at: string
+}
+
+interface EvidenceMapping {
+  id: string
+  evidence_id: string
+  control_code: string
+  mapping_type: string
+  verified_at: string | null
+  verified_by: string | null
+  notes: string | null
+}
+
+interface CoverageReport {
+  total_controls: number
+  controls_with_evidence: number
+  controls_without_evidence: number
+  coverage_percent: number
+}
+
+type EvidenceTabKey = 'evidence' | 'checks' | 'mapping' | 'report'
+
+const CHECK_TYPE_LABELS: Record<string, { label: string; color: string }> = {
+  tls_scan: { label: 'TLS-Scan', color: 'bg-blue-100 text-blue-700' },
+  header_check: { label: 'Header-Check', color: 'bg-green-100 text-green-700' },
+  certificate_check: { label: 'Zertifikat', color: 'bg-yellow-100 text-yellow-700' },
+  dns_check: { label: 'DNS-Check', color: 'bg-purple-100 text-purple-700' },
+  api_scan: { label: 'API-Scan', color: 'bg-indigo-100 text-indigo-700' },
+  config_scan: { label: 'Config-Scan', color: 'bg-orange-100 text-orange-700' },
+  port_scan: { label: 'Port-Scan', color: 'bg-red-100 text-red-700' },
+}
+
+const RUN_STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  running: { label: 'Laeuft...', color: 'bg-blue-100 text-blue-700' },
+  passed: { label: 'Bestanden', color: 'bg-green-100 text-green-700' },
+  failed: { label: 'Fehlgeschlagen', color: 'bg-red-100 text-red-700' },
+  warning: { label: 'Warnung', color: 'bg-yellow-100 text-yellow-700' },
+  error: { label: 'Fehler', color: 'bg-red-100 text-red-700' },
+}
+
+const CHECK_API = '/api/sdk/v1/compliance/evidence-checks'
+
 export default function EvidencePage() {
   const { state, dispatch } = useSDK()
+  const [activeTab, setActiveTab] = useState<EvidenceTabKey>('evidence')
   const [filter, setFilter] = useState<string>('all')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -314,6 +382,17 @@ export default function EvidencePage() {
   const [pageSize] = useState(20)
   const [total, setTotal] = useState(0)
 
+  // Evidence Checks state
+  const [checks, setChecks] = useState<EvidenceCheck[]>([])
+  const [checksLoading, setChecksLoading] = useState(false)
+  const [runningCheckId, setRunningCheckId] = useState<string | null>(null)
+  const [checkResults, setCheckResults] = useState<Record<string, CheckResult[]>>({})
+
+  // Mappings state
+  const [mappings, setMappings] = useState<EvidenceMapping[]>([])
+  const [coverageReport, setCoverageReport] = useState<CoverageReport | null>(null)
+  const [seedingChecks, setSeedingChecks] = useState(false)
+
   // Fetch evidence from backend on mount and when page changes
   useEffect(() => {
     const fetchEvidence = async () => {
@@ -511,8 +590,86 @@ export default function EvidencePage() {
     }
   }
 
+  // Load checks when tab changes
+  const loadChecks = async () => {
+    setChecksLoading(true)
+    try {
+      const res = await fetch(`${CHECK_API}?limit=50`)
+      if (res.ok) {
+        const data = await res.json()
+        setChecks(data.checks || [])
+      }
+    } catch { /* silent */ }
+    finally { setChecksLoading(false) }
+  }
+
+  const runCheck = async (checkId: string) => {
+    setRunningCheckId(checkId)
+    try {
+      const res = await fetch(`${CHECK_API}/${checkId}/run`, { method: 'POST' })
+      if (res.ok) {
+        const result = await res.json()
+        setCheckResults(prev => ({
+          ...prev,
+          [checkId]: [result, ...(prev[checkId] || [])].slice(0, 5),
+        }))
+        loadChecks() // refresh last_run_at
+      }
+    } catch { /* silent */ }
+    finally { setRunningCheckId(null) }
+  }
+
+  const loadCheckResults = async (checkId: string) => {
+    try {
+      const res = await fetch(`${CHECK_API}/${checkId}/results?limit=5`)
+      if (res.ok) {
+        const data = await res.json()
+        setCheckResults(prev => ({ ...prev, [checkId]: data.results || [] }))
+      }
+    } catch { /* silent */ }
+  }
+
+  const seedChecks = async () => {
+    setSeedingChecks(true)
+    try {
+      await fetch(`${CHECK_API}/seed`, { method: 'POST' })
+      loadChecks()
+    } catch { /* silent */ }
+    finally { setSeedingChecks(false) }
+  }
+
+  const loadMappings = async () => {
+    try {
+      const res = await fetch(`${CHECK_API}/mappings`)
+      if (res.ok) {
+        const data = await res.json()
+        setMappings(data.mappings || [])
+      }
+    } catch { /* silent */ }
+  }
+
+  const loadCoverageReport = async () => {
+    try {
+      const res = await fetch(`${CHECK_API}/mappings/report`)
+      if (res.ok) setCoverageReport(await res.json())
+    } catch { /* silent */ }
+  }
+
+  useEffect(() => {
+    if (activeTab === 'checks' && checks.length === 0) loadChecks()
+    if (activeTab === 'mapping') { loadMappings(); loadCoverageReport() }
+    if (activeTab === 'report') loadCoverageReport()
+  }, [activeTab]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const stepInfo = STEP_EXPLANATIONS['evidence']
 
+  const evidenceTabs: { key: EvidenceTabKey; label: string }[] = [
+    { key: 'evidence', label: 'Nachweise' },
+    { key: 'checks', label: 'Automatische Checks' },
+    { key: 'mapping', label: 'Control-Mapping' },
+    { key: 'report', label: 'Report' },
+  ]
+
   return (
     <div className="space-y-6">
       {/* Hidden file input */}
@@ -556,6 +713,25 @@ export default function EvidencePage() {
         </button>
       </StepHeader>
 
+      {/* Tab Navigation */}
+      <div className="bg-white rounded-xl shadow-sm border">
+        <div className="flex border-b">
+          {evidenceTabs.map(tab => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`px-6 py-3 text-sm font-medium transition-colors ${
+                activeTab === tab.key
+                  ? 'text-purple-600 border-b-2 border-purple-600'
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* Error Banner */}
       {error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
@@ -564,6 +740,11 @@ export default function EvidencePage() {
         </div>
       )}
 
+      {/* ============================================================ */}
+      {/* TAB: Nachweise (existing content) */}
+      {/* ============================================================ */}
+      {activeTab === 'evidence' && <>
+
       {/* Controls Alert */}
       {state.controls.length === 0 && !loading && (
         <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
@@ -681,6 +862,250 @@ export default function EvidencePage() {
           <p className="mt-2 text-gray-500">Passen Sie den Filter an oder laden Sie neue Nachweise hoch.</p>
         </div>
       )}
+
+      </>}
+
+      {/* ============================================================ */}
+      {/* TAB: Automatische Checks */}
+      {/* ============================================================ */}
+      {activeTab === 'checks' && (
+        <>
+          {/* Seed if empty */}
+          {!checksLoading && checks.length === 0 && (
+            <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-center justify-between">
+              <div>
+                <p className="font-medium text-yellow-800">Keine automatischen Checks vorhanden</p>
+                <p className="text-sm text-yellow-700">Laden Sie ca. 15 Standard-Checks (TLS, Header, Zertifikate, etc.).</p>
+              </div>
+              <button onClick={seedChecks} disabled={seedingChecks}
+                className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:opacity-50">
+                {seedingChecks ? 'Lade...' : 'Standard-Checks laden'}
+              </button>
+            </div>
+          )}
+
+          {checksLoading ? (
+            <div className="flex justify-center py-12">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {checks.map(check => {
+                const typeMeta = CHECK_TYPE_LABELS[check.check_type] || { label: check.check_type, color: 'bg-gray-100 text-gray-700' }
+                const results = checkResults[check.id] || []
+                const lastResult = results[0]
+                const isRunning = runningCheckId === check.id
+
+                return (
+                  <div key={check.id} className="bg-white rounded-xl border border-gray-200 p-5">
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2">
+                          <h4 className="font-medium text-gray-900">{check.title}</h4>
+                          <span className={`px-2 py-0.5 text-xs rounded ${typeMeta.color}`}>{typeMeta.label}</span>
+                          {!check.is_active && (
+                            <span className="px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-500">Deaktiviert</span>
+                          )}
+                        </div>
+                        {check.description && <p className="text-sm text-gray-500 mt-1">{check.description}</p>}
+                        <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
+                          <span>Code: {check.check_code}</span>
+                          {check.target_url && <span>Ziel: {check.target_url}</span>}
+                          <span>Frequenz: {check.frequency}</span>
+                          {check.last_run_at && <span>Letzter Lauf: {new Date(check.last_run_at).toLocaleDateString('de-DE')}</span>}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2 ml-4">
+                        {lastResult && (
+                          <span className={`px-2 py-0.5 text-xs rounded ${RUN_STATUS_LABELS[lastResult.run_status]?.color || ''}`}>
+                            {RUN_STATUS_LABELS[lastResult.run_status]?.label || lastResult.run_status}
+                          </span>
+                        )}
+                        <button
+                          onClick={() => { runCheck(check.id); loadCheckResults(check.id) }}
+                          disabled={isRunning}
+                          className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
+                        >
+                          {isRunning ? 'Laeuft...' : 'Ausfuehren'}
+                        </button>
+                        <button
+                          onClick={() => loadCheckResults(check.id)}
+                          className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50"
+                        >
+                          Historie
+                        </button>
+                      </div>
+                    </div>
+
+                    {/* Results */}
+                    {results.length > 0 && (
+                      <div className="mt-3 border-t pt-3">
+                        <p className="text-xs font-medium text-gray-500 mb-2">Letzte Ergebnisse</p>
+                        <div className="space-y-1">
+                          {results.slice(0, 3).map(r => (
+                            <div key={r.id} className="flex items-center gap-3 text-xs">
+                              <span className={`px-1.5 py-0.5 rounded ${RUN_STATUS_LABELS[r.run_status]?.color || 'bg-gray-100'}`}>
+                                {RUN_STATUS_LABELS[r.run_status]?.label || r.run_status}
+                              </span>
+                              <span className="text-gray-500">{new Date(r.run_at).toLocaleString('de-DE')}</span>
+                              <span className="text-gray-400">{r.duration_ms}ms</span>
+                              {r.findings_count > 0 && (
+                                <span className="text-orange-600">{r.findings_count} Findings ({r.critical_findings} krit.)</span>
+                              )}
+                              {r.summary && <span className="text-gray-600 truncate">{r.summary}</span>}
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* ============================================================ */}
+      {/* TAB: Control-Mapping */}
+      {/* ============================================================ */}
+      {activeTab === 'mapping' && (
+        <>
+          {coverageReport && (
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <div className="bg-white rounded-xl border border-gray-200 p-6">
+                <p className="text-sm text-gray-500">Gesamt Controls</p>
+                <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
+              </div>
+              <div className="bg-white rounded-xl border border-green-200 p-6">
+                <p className="text-sm text-green-600">Mit Nachweis</p>
+                <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
+              </div>
+              <div className="bg-white rounded-xl border border-red-200 p-6">
+                <p className="text-sm text-red-600">Ohne Nachweis</p>
+                <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
+              </div>
+              <div className="bg-white rounded-xl border border-purple-200 p-6">
+                <p className="text-sm text-purple-600">Abdeckung</p>
+                <p className="text-3xl font-bold text-purple-600">{coverageReport.coverage_percent.toFixed(0)}%</p>
+              </div>
+            </div>
+          )}
+
+          <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
+            <div className="p-4 border-b">
+              <h3 className="font-semibold text-gray-900">Evidence-Control-Verknuepfungen ({mappings.length})</h3>
+            </div>
+            {mappings.length === 0 ? (
+              <div className="p-8 text-center text-gray-500">
+                <p>Noch keine Verknuepfungen erstellt.</p>
+                <p className="text-sm mt-1">Fuehren Sie automatische Checks aus, um Nachweise automatisch mit Controls zu verknuepfen.</p>
+              </div>
+            ) : (
+              <table className="w-full">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Control</th>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Evidence</th>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
+                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Verifiziert</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {mappings.map(m => (
+                    <tr key={m.id} className="hover:bg-gray-50">
+                      <td className="px-4 py-3 font-mono text-sm text-purple-600">{m.control_code}</td>
+                      <td className="px-4 py-3 text-sm text-gray-700">{m.evidence_id.slice(0, 8)}...</td>
+                      <td className="px-4 py-3">
+                        <span className="px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-700">{m.mapping_type}</span>
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-500">
+                        {m.verified_at ? `${new Date(m.verified_at).toLocaleDateString('de-DE')} von ${m.verified_by || '—'}` : 'Ausstehend'}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* ============================================================ */}
+      {/* TAB: Report */}
+      {/* ============================================================ */}
+      {activeTab === 'report' && (
+        <div className="bg-white rounded-xl shadow-sm border p-6">
+          <h3 className="text-lg font-semibold text-gray-900 mb-6">Evidence Coverage Report</h3>
+
+          {!coverageReport ? (
+            <div className="flex justify-center py-12">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+            </div>
+          ) : (
+            <>
+              {/* Coverage Bar */}
+              <div className="mb-8">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-gray-700">Gesamt-Abdeckung</span>
+                  <span className={`text-2xl font-bold ${
+                    coverageReport.coverage_percent >= 80 ? 'text-green-600' :
+                    coverageReport.coverage_percent >= 50 ? 'text-yellow-600' : 'text-red-600'
+                  }`}>
+                    {coverageReport.coverage_percent.toFixed(1)}%
+                  </span>
+                </div>
+                <div className="h-4 bg-gray-200 rounded-full overflow-hidden">
+                  <div
+                    className={`h-full transition-all duration-500 ${
+                      coverageReport.coverage_percent >= 80 ? 'bg-green-500' :
+                      coverageReport.coverage_percent >= 50 ? 'bg-yellow-500' : 'bg-red-500'
+                    }`}
+                    style={{ width: `${coverageReport.coverage_percent}%` }}
+                  />
+                </div>
+              </div>
+
+              {/* Summary */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                <div className="p-4 bg-gray-50 rounded-lg text-center">
+                  <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
+                  <p className="text-sm text-gray-500">Controls gesamt</p>
+                </div>
+                <div className="p-4 bg-green-50 rounded-lg text-center">
+                  <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
+                  <p className="text-sm text-green-600">Mit Nachweis belegt</p>
+                </div>
+                <div className="p-4 bg-red-50 rounded-lg text-center">
+                  <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
+                  <p className="text-sm text-red-600">Ohne Nachweis</p>
+                </div>
+              </div>
+
+              {/* Check Summary */}
+              <div className="border-t pt-6">
+                <h4 className="font-medium text-gray-900 mb-3">Automatische Checks</h4>
+                <div className="flex items-center gap-4 text-sm text-gray-600">
+                  <span>{checks.length} Check-Definitionen</span>
+                  <span>{checks.filter(c => c.is_active).length} aktiv</span>
+                  <span>{checks.filter(c => c.last_run_at).length} mindestens 1x ausgefuehrt</span>
+                </div>
+              </div>
+
+              {/* Evidence Summary */}
+              <div className="border-t pt-6 mt-6">
+                <h4 className="font-medium text-gray-900 mb-3">Nachweise</h4>
+                <div className="flex items-center gap-4 text-sm text-gray-600">
+                  <span>{displayEvidence.length} Nachweise gesamt</span>
+                  <span className="text-green-600">{validCount} gueltig</span>
+                  <span className="text-red-600">{expiredCount} abgelaufen</span>
+                  <span className="text-yellow-600">{pendingCount} ausstehend</span>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
     </div>
   )
 }