feat(quaidal): backend API + frontend tab for BSI QUAIDAL data-quality controls

Wire the 195 Clean-Room QUAIDAL controls (from breakpilot-core migration 011)
into the compliance SaaS UI.

Backend:
- GET /api/v1/quaidal/stats           - counts by kind + source provenance
- GET /api/v1/quaidal/controls        - list, optional kind= filter
- GET /api/v1/quaidal/controls/{id}   - single derived control
- GET /api/v1/quaidal/criteria        - 10 QKB criteria
- GET /api/v1/quaidal/criteria/{id}   - QKB with QB/MA/QM tree

Frontend:
- /sdk/quality: new "Trainingsdaten-Qualität (BSI QUAIDAL)" tab with
  10 QKB cards and a drill-down modal showing the full QB→MA→QM tree
  plus original BSI source link and license note.
- /sdk/ai-act: Art. 10 tile on each high-risk/unacceptable result,
  linking to /sdk/quality?category=data_quality.

Pattern matches existing IACE module DIN-reference handling:
own wording, source section + URL preserved for due diligence.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/quality/_components/TrainingDataQualityTab.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useState } from 'react'
+import { useQuaidalData, type QuaidalControl } from '../_hooks/useQuaidalData'
+import { QuaidalCriterionDetail } from './QuaidalCriterionDetail'
+
+function CriterionCard({ ctrl, onOpen }: { ctrl: QuaidalControl; onOpen: () => void }) {
+  return (
+    <button
+      onClick={onOpen}
+      className="text-left bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-400 hover:shadow-sm transition-all"
+    >
+      <div className="flex items-start justify-between mb-2">
+        <h3 className="font-semibold text-gray-900">{ctrl.canonical_name}</h3>
+        <span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">
+          {ctrl.source.section}
+        </span>
+      </div>
+      <p className="text-sm text-gray-600 line-clamp-3">{ctrl.description}</p>
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
+        <span className="text-gray-500">Bausteine: <span className="font-medium text-gray-700">{ctrl.related_quaidal_ids.length}</span></span>
+        {ctrl.external_refs.slice(0, 2).map((r, i) => (
+          <span key={i} className="px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded">
+            {r.framework}
+          </span>
+        ))}
+      </div>
+    </button>
+  )
+}
+
+export function TrainingDataQualityTab() {
+  const { criteria, stats, loading, error } = useQuaidalData()
+  const [openSection, setOpenSection] = useState<string | null>(null)
+
+  if (loading) {
+    return <div className="text-center text-gray-400 py-12">Lade QUAIDAL-Katalog...</div>
+  }
+  if (error) {
+    return (
+      <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
+        QUAIDAL-Daten konnten nicht geladen werden: {error}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-purple-50 border border-purple-200 rounded-xl p-5">
+        <h2 className="text-lg font-semibold text-gray-900">Trainingsdaten-Qualität nach BSI QUAIDAL</h2>
+        <p className="text-sm text-gray-600 mt-1">
+          Operative Umsetzung von EU AI Act Art. 10 (Datenqualität für Hochrisiko-KI) auf Basis des
+          BSI-Katalogs QUAIDAL. Alle Controls sind eigenständig formuliert (Clean-Room) und verweisen
+          auf die jeweilige QUAIDAL-Sektion.
+        </p>
+        {stats && (
+          <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+            <div>
+              <div className="text-xs text-gray-500">Qualitätskriterien</div>
+              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.criterion ?? 0}</div>
+            </div>
+            <div>
+              <div className="text-xs text-gray-500">Bausteine</div>
+              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.building_block ?? 0}</div>
+            </div>
+            <div>
+              <div className="text-xs text-gray-500">Maßnahmen</div>
+              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.measure ?? 0}</div>
+            </div>
+            <div>
+              <div className="text-xs text-gray-500">Metriken & Methoden</div>
+              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.metric ?? 0}</div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">10 Qualitätskriterien</h3>
+        {criteria.length === 0 ? (
+          <div className="bg-white rounded-xl border border-gray-200 p-8 text-center text-gray-400">
+            Keine Kriterien gefunden. Bitte Backend-Ingest prüfen.
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {criteria.map(c => (
+              <CriterionCard
+                key={c.derived_id}
+                ctrl={c}
+                onOpen={() => setOpenSection(c.source.section)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {stats?.license_note && (
+        <div className="text-xs text-gray-500 italic">{stats.license_note}</div>
+      )}
+
+      {openSection && (
+        <QuaidalCriterionDetail
+          sectionId={openSection}
+          onClose={() => setOpenSection(null)}
+        />
+      )}
+    </div>
+  )
+}