import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/DevPortalLayout'

export default function ComplianceServiceDocsPage() {
  return (
    <DevPortalLayout
      title="Wie funktioniert der Compliance Service?"
      description="Eine umfassende Erklaerung des gesamten Systems -- vom Rechtstext bis zur Compliance-Bewertung."
    >
      {/* ============================================================ */}
      {/* 1. EINLEITUNG                                                 */}
      {/* ============================================================ */}
      <h2 id="einfuehrung">1. Was ist der Compliance Hub?</h2>
      <p>
        Der <strong>BreakPilot Compliance Hub</strong> ist ein System, das Organisationen dabei
        unterstuetzt, gesetzliche Vorschriften einzuhalten. Er beantwortet die zentrale Frage:
      </p>
      <blockquote>
        <em>&ldquo;Duerfen wir das, was wir vorhaben, ueberhaupt so machen -- und wenn ja, welche
        Auflagen muessen wir dafuer erfuellen?&rdquo;</em>
      </blockquote>
      <p>
        Konkret geht es um EU- und deutsche Gesetze, die fuer den Umgang mit Daten und
        kuenstlicher Intelligenz relevant sind: die <strong>DSGVO</strong>, den <strong>AI Act</strong>,
        die <strong>NIS2-Richtlinie</strong> und viele weitere Regelwerke. Das System hat vier
        Hauptaufgaben:
      </p>
      <ol>
        <li>
          <strong>Wissen bereitstellen:</strong> Hunderte Rechtstexte sind eingelesen und
          durchsuchbar -- nicht nur per Stichwort, sondern nach Bedeutung (semantische Suche).
        </li>
        <li>
          <strong>Bewerten:</strong> Wenn ein Nutzer einen geplanten KI-Anwendungsfall beschreibt,
          bewertet das System automatisch, ob er zulaessig ist, welches Risiko besteht und welche
          Massnahmen noetig sind.
        </li>
        <li>
          <strong>Dokumentieren:</strong> Das System erzeugt die Dokumente, die Aufsichtsbehoerden
          verlangen: Datenschutz-Folgenabschaetzungen (DSFA), technisch-organisatorische Massnahmen
          (TOM), Verarbeitungsverzeichnisse (VVT) und mehr.
        </li>
        <li>
          <strong>Nachweisen:</strong> Jede Bewertung, jede Entscheidung und jeder Zugriff wird
          revisionssicher protokolliert -- als Nachweis gegenueber Pruefer und Behoerden.
        </li>
      </ol>

      <InfoBox type="info" title="Kern-Designprinzip">
        <strong>Die KI ist nicht die Entscheidungsinstanz.</strong> Alle
        Compliance-Entscheidungen (zulaessig / bedingt zulaessig / nicht zulaessig) trifft ein
        deterministisches Regelwerk. Das LLM (Sprachmodell) wird ausschliesslich dafuer verwendet,
        Ergebnisse verstaendlich zu <em>erklaeren</em> -- niemals um sie zu <em>treffen</em>.
      </InfoBox>

      {/* ============================================================ */}
      {/* 2. ARCHITEKTUR-UEBERSICHT                                    */}
      {/* ============================================================ */}
      <h2 id="architektur">2. Architektur im Ueberblick</h2>
      <p>
        Das System besteht aus mehreren Bausteinen, die jeweils eine klar abgegrenzte Aufgabe haben.
        Man kann es sich wie ein Buero vorstellen:
      </p>

      <div className="not-prose my-6 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Baustein</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Analogie</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Technologie</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Aufgabe</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">API-Gateway</td><td className="px-4 py-3">Empfang / Rezeption</td><td className="px-4 py-3">Go (Gin)</td><td className="px-4 py-3">Nimmt alle Anfragen entgegen, prueft Identitaet und leitet weiter</td></tr>
            <tr><td className="px-4 py-3 font-medium">Compliance Engine (UCCA)</td><td className="px-4 py-3">Sachbearbeiter</td><td className="px-4 py-3">Go</td><td className="px-4 py-3">Bewertet Anwendungsfaelle gegen 45+ Regeln und berechnet Risikoscore</td></tr>
            <tr><td className="px-4 py-3 font-medium">RAG Service</td><td className="px-4 py-3">Rechtsbibliothek</td><td className="px-4 py-3">Python (FastAPI)</td><td className="px-4 py-3">Durchsucht Gesetze semantisch und beantwortet Rechtsfragen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Legal Corpus</td><td className="px-4 py-3">Gesetzesbuecher im Regal</td><td className="px-4 py-3">YAML/JSON + Qdrant</td><td className="px-4 py-3">Enthaelt alle Rechtstexte als durchsuchbare Wissensbasis</td></tr>
            <tr><td className="px-4 py-3 font-medium">Policy Engine</td><td className="px-4 py-3">Regelbuch des Sachbearbeiters</td><td className="px-4 py-3">YAML-Dateien</td><td className="px-4 py-3">45+ auditierbare Pruefregeln in maschinenlesbarer Form</td></tr>
            <tr><td className="px-4 py-3 font-medium">Eskalations-System</td><td className="px-4 py-3">Chef-Unterschrift</td><td className="px-4 py-3">Go + PostgreSQL</td><td className="px-4 py-3">Leitet kritische Faelle an menschliche Pruefer weiter</td></tr>
            <tr><td className="px-4 py-3 font-medium">Admin Dashboard</td><td className="px-4 py-3">Schreibtisch</td><td className="px-4 py-3">Next.js</td><td className="px-4 py-3">Benutzeroberflaeche fuer alle Funktionen</td></tr>
            <tr><td className="px-4 py-3 font-medium">PostgreSQL</td><td className="px-4 py-3">Aktenschrank</td><td className="px-4 py-3">SQL-Datenbank</td><td className="px-4 py-3">Speichert Assessments, Eskalationen, Controls, Audit-Trail</td></tr>
            <tr><td className="px-4 py-3 font-medium">Qdrant</td><td className="px-4 py-3">Suchindex der Bibliothek</td><td className="px-4 py-3">Vektordatenbank</td><td className="px-4 py-3">Ermoeglicht semantische Suche ueber Rechtstexte</td></tr>
          </tbody>
        </table>
      </div>

      <h3>Wie die Bausteine zusammenspielen</h3>
      <CodeBlock language="text" filename="Datenfluss: Vom Benutzer zur Compliance-Bewertung">
{`Benutzer (Browser)
     |
     v
┌─────────────────────────────┐
│  API-Gateway (Port 8080)    │  ← Authentifizierung, Rate-Limiting, Tenant-Isolation
│  "Wer bist du? Darfst du?"  │
└──────────┬──────────────────┘
           |
     ┌─────┼──────────────────────────────┐
     v     v                              v
┌─────────────┐  ┌──────────────┐  ┌──────────────┐
│  Compliance  │  │  RAG Service │  │  Security    │
│  Engine      │  │  (Bibliothek)│  │  Scanner     │
│  (Bewertung) │  │              │  │              │
└──────┬───┬──┘  └──────┬───────┘  └──────────────┘
       |   |            |
       |   |     ┌──────┴───────┐
       |   |     │   Qdrant     │  ← Vektordatenbank mit allen Rechtstexten
       |   |     │ (Suchindex)  │
       |   |     └──────────────┘
       |   |
       |   └──────────────────────┐
       v                          v
┌──────────────┐          ┌──────────────┐
│  PostgreSQL  │          │  Eskalation  │
│  (Speicher)  │          │  (E0-E3)     │
└──────────────┘          └──────────────┘`}
      </CodeBlock>

      {/* ============================================================ */}
      {/* 3. DER KATALOGMANAGER / LEGAL CORPUS                         */}
      {/* ============================================================ */}
      <h2 id="katalogmanager">3. Der Katalogmanager: Die Wissensbasis</h2>
      <p>
        Das Herzstueck des Systems ist seine <strong>Wissensbasis</strong> -- eine Sammlung aller
        relevanten Rechtstexte, die das System kennt und durchsuchen kann. Wir nennen das den
        <strong> Legal Corpus</strong> (wörtlich: &ldquo;Rechtlicher Koerper&rdquo;).
      </p>

      <h3>3.1 Welche Dokumente sind enthalten?</h3>
      <p>
        Der Legal Corpus ist in zwei Hauptbereiche gegliedert: <strong>EU-Recht</strong> und
        <strong> deutsches Recht</strong>.
      </p>

      <h4>EU-Verordnungen und -Richtlinien</h4>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-blue-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Regelwerk</th>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Abkuerzung</th>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Artikel</th>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Gueltig seit</th>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Thema</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">Datenschutz-Grundverordnung</td><td className="px-4 py-3">DSGVO</td><td className="px-4 py-3">99</td><td className="px-4 py-3">25.05.2018</td><td className="px-4 py-3">Schutz personenbezogener Daten</td></tr>
            <tr><td className="px-4 py-3 font-medium">KI-Verordnung</td><td className="px-4 py-3">AI Act</td><td className="px-4 py-3">113</td><td className="px-4 py-3">01.08.2024</td><td className="px-4 py-3">Regulierung kuenstlicher Intelligenz</td></tr>
            <tr><td className="px-4 py-3 font-medium">Netz- und Informationssicherheit</td><td className="px-4 py-3">NIS2</td><td className="px-4 py-3">46</td><td className="px-4 py-3">18.10.2024</td><td className="px-4 py-3">Cybersicherheit kritischer Infrastrukturen</td></tr>
            <tr><td className="px-4 py-3 font-medium">ePrivacy-Verordnung</td><td className="px-4 py-3">ePrivacy</td><td className="px-4 py-3">--</td><td className="px-4 py-3">in Arbeit</td><td className="px-4 py-3">Vertraulichkeit elektronischer Kommunikation</td></tr>
            <tr><td className="px-4 py-3 font-medium">Cyber Resilience Act</td><td className="px-4 py-3">CRA</td><td className="px-4 py-3">--</td><td className="px-4 py-3">2024</td><td className="px-4 py-3">Cybersicherheit von Produkten mit digitalen Elementen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Data Act</td><td className="px-4 py-3">DA</td><td className="px-4 py-3">--</td><td className="px-4 py-3">2024</td><td className="px-4 py-3">Zugang und Nutzung von Daten</td></tr>
            <tr><td className="px-4 py-3 font-medium">Digital Markets Act</td><td className="px-4 py-3">DMA</td><td className="px-4 py-3">--</td><td className="px-4 py-3">2023</td><td className="px-4 py-3">Regulierung digitaler Gatekeeper</td></tr>
          </tbody>
        </table>
      </div>

      <h4>Deutsches Recht</h4>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-green-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Gesetz</th>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Abkuerzung</th>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Thema</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">Telekommunikation-Digitale-Dienste-Datenschutz-Gesetz</td><td className="px-4 py-3">TDDDG</td><td className="px-4 py-3">Datenschutz bei Telekommunikation und digitalen Diensten</td></tr>
            <tr><td className="px-4 py-3 font-medium">Bundesdatenschutzgesetz</td><td className="px-4 py-3">BDSG</td><td className="px-4 py-3">Nationale Ergaenzung zur DSGVO</td></tr>
            <tr><td className="px-4 py-3 font-medium">IT-Sicherheitsgesetz</td><td className="px-4 py-3">IT-SiG</td><td className="px-4 py-3">IT-Sicherheit kritischer Infrastrukturen</td></tr>
            <tr><td className="px-4 py-3 font-medium">BSI-KritisV</td><td className="px-4 py-3">KritisV</td><td className="px-4 py-3">BSI-Verordnung fuer kritische Infrastrukturen</td></tr>
          </tbody>
        </table>
      </div>

      <h4>Standards und Normen</h4>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-purple-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Standard</th>
              <th className="px-4 py-3 text-left font-medium text-gray-700">Thema</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">ISO 27001</td><td className="px-4 py-3">Informationssicherheits-Managementsystem (ISMS)</td></tr>
            <tr><td className="px-4 py-3 font-medium">SOC2</td><td className="px-4 py-3">Trust Service Criteria (Sicherheit, Verfuegbarkeit, Vertraulichkeit)</td></tr>
            <tr><td className="px-4 py-3 font-medium">BSI Grundschutz</td><td className="px-4 py-3">IT-Grundschutz des BSI</td></tr>
            <tr><td className="px-4 py-3 font-medium">BSI TR-03161</td><td className="px-4 py-3">Technische Richtlinie fuer Anforderungen an Anwendungen im Gesundheitswesen</td></tr>
            <tr><td className="px-4 py-3 font-medium">SCC (Standard Contractual Clauses)</td><td className="px-4 py-3">Standardvertragsklauseln fuer Drittlandtransfers</td></tr>
          </tbody>
        </table>
      </div>

      <h3>3.2 Wie werden Rechtstexte gespeichert?</h3>
      <p>
        Jeder Rechtstext durchlaeuft eine <strong>Verarbeitungspipeline</strong>, bevor er im
        System durchsuchbar ist. Der Vorgang laesst sich mit dem Erstellen eines
        Bibliothekskatalogs vergleichen:
      </p>
      <ol>
        <li>
          <strong>Erfassung (Ingestion):</strong> Der Rechtstext wird als Dokument (PDF, Markdown
          oder Klartext) in das System geladen. Fuer jede Verordnung gibt es eine
          <code>metadata.json</code>-Datei, die beschreibt, um welches Gesetz es sich handelt,
          wie viele Artikel es hat und welche Schluesselbegriffe relevant sind.
        </li>
        <li>
          <strong>Zerkleinerung (Chunking):</strong> Lange Gesetzestexte werden in kleinere
          Abschnitte von ca. 512 Zeichen zerlegt. Dabei ueberlappen sich die Abschnitte um
          50 Zeichen, damit kein Kontext verloren geht. Stellen Sie sich vor, Sie zerschneiden
          einen langen Brief in Absaetze, wobei jeder Absatz die letzten zwei Zeilen des
          vorherigen enthaelt.
        </li>
        <li>
          <strong>Vektorisierung (Embedding):</strong> Jeder Textabschnitt wird vom
          Embedding-Modell <strong>BGE-M3</strong> in einen <em>Vektor</em> umgewandelt -- eine
          Liste von 1.024 Zahlen, die die <em>Bedeutung</em> des Textes repraesentieren. Texte
          mit aehnlicher Bedeutung haben aehnliche Vektoren, unabhaengig von der Wortwahl.
        </li>
        <li>
          <strong>Indexierung:</strong> Die Vektoren werden in der Vektordatenbank
          <strong> Qdrant</strong> gespeichert. Zusammen mit jedem Vektor werden Metadaten
          hinterlegt: zu welchem Gesetz der Text gehoert, welcher Artikel es ist und welcher
          Paragraph.
        </li>
      </ol>

      <CodeBlock language="text" filename="Verarbeitungspipeline: Vom Gesetzestext zur Suche">
{`Rechtstext (z.B. DSGVO Art. 32)
     |
     v
┌────────────────────────┐
│  1. Einlesen           │  ← PDF/Markdown/Klartext + metadata.json
│  Metadaten zuordnen    │
└──────────┬─────────────┘
           |
           v
┌────────────────────────┐
│  2. Chunking           │  ← Text in 512-Zeichen-Abschnitte zerlegen
│  Ueberlappung: 50 Zch. │     (mit 50 Zeichen Ueberlappung)
└──────────┬─────────────┘
           |
           v
┌────────────────────────┐
│  3. Embedding          │  ← BGE-M3 wandelt Text in 1024 Zahlen um
│  Text → Vektor         │     (Bedeutungs-Repraesentation)
└──────────┬─────────────┘
           |
           v
┌────────────────────────┐
│  4. Qdrant speichern   │  ← Vektor + Metadaten werden indexiert
│  Sofort durchsuchbar   │     (~2.274 Chunks insgesamt)
└────────────────────────┘`}
      </CodeBlock>

      <InfoBox type="success" title="Aktueller Bestand">
        Der Legal Corpus enthaelt derzeit ca. <strong>2.274 Textabschnitte</strong> aus ueber
        400 Gesetzesartikeln. Darunter 99 DSGVO-Artikel, 85 AI-Act-Artikel, 46 NIS2-Artikel,
        86 BDSG-Paragraphen sowie zahlreiche Artikel aus TDDDG, CRA, Data Act und weiteren
        Regelwerken.
      </InfoBox>

      <h3>3.3 Wie funktioniert die semantische Suche?</h3>
      <p>
        Klassische Suchmaschinen suchen nach <em>Woertern</em>. Wenn Sie &ldquo;Einwilligung&rdquo;
        eingeben, finden sie nur Texte, die genau dieses Wort enthalten. Unsere semantische Suche
        funktioniert anders: Sie sucht nach <em>Bedeutung</em>.
      </p>
      <p>
        <strong>Beispiel:</strong> Wenn Sie fragen &ldquo;Wann muss ich den Nutzer um Erlaubnis
        bitten?&rdquo;, findet das System Art. 7 DSGVO (Bedingungen fuer die Einwilligung), obwohl
        Ihre Frage das Wort &ldquo;Einwilligung&rdquo; gar nicht enthaelt. Das funktioniert, weil
        die Bedeutungsvektoren von &ldquo;um Erlaubnis bitten&rdquo; und &ldquo;Einwilligung&rdquo;
        sehr aehnlich sind.
      </p>
      <p>Der Suchvorgang im Detail:</p>
      <ol>
        <li>Ihre Suchanfrage wird vom gleichen Modell (BGE-M3) in einen Vektor umgewandelt.</li>
        <li>Qdrant vergleicht diesen Vektor mit allen gespeicherten Vektoren (Kosinus-Aehnlichkeit).</li>
        <li>Die aehnlichsten Textabschnitte werden zurueckgegeben, sortiert nach Relevanz (Score 0-1).</li>
        <li>Optional kann nach bestimmten Gesetzen gefiltert werden (nur DSGVO, nur AI Act, etc.).</li>
      </ol>

      <h3>3.4 Der KI-Rechtsassistent (Legal Q&amp;A)</h3>
      <p>
        Ueber die reine Suche hinaus kann das System auch <strong>Fragen beantworten</strong>.
        Dabei wird die semantische Suche mit einem Sprachmodell kombiniert:
      </p>
      <ol>
        <li><strong>Suche:</strong> Das System findet die 5 relevantesten Gesetzesabschnitte zur Frage.</li>
        <li><strong>Kontext-Erstellung:</strong> Diese Abschnitte werden zusammen mit der Frage an das Sprachmodell (Qwen 2.5 32B) uebergeben.</li>
        <li><strong>Antwort-Generierung:</strong> Das Modell formuliert eine verstaendliche Antwort auf Deutsch und zitiert die verwendeten Rechtsquellen.</li>
        <li><strong>Quellenangabe:</strong> Jede Antwort enthaelt exakte Zitate mit Artikelangaben, damit die Aussagen nachpruefbar sind.</li>
      </ol>

      <InfoBox type="warning" title="Wichtige Einschraenkung">
        Der Rechtsassistent gibt <strong>keine Rechtsberatung</strong>. Er hilft, relevante
        Gesetzespassagen zu finden und verstaendlich zusammenzufassen. Die Antworten enthalten
        immer einen Confidence-Score (0-1), der angibt, wie sicher sich das System ist. Bei
        niedrigem Score wird explizit auf die Unsicherheit hingewiesen.
      </InfoBox>

      {/* ============================================================ */}
      {/* 4. DIE COMPLIANCE ENGINE (UCCA)                              */}
      {/* ============================================================ */}
      <h2 id="compliance-engine">4. Die Compliance Engine: Wie Bewertungen funktionieren</h2>
      <p>
        Das Kernmodul des Compliance Hub ist die <strong>UCCA Engine</strong> (Unified Compliance
        Control Assessment). Sie bewertet, ob ein geplanter KI-Anwendungsfall zulaessig ist.
      </p>

      <h3>4.1 Der Fragebogen (Use Case Intake)</h3>
      <p>
        Alles beginnt mit einem strukturierten Fragebogen. Der Nutzer beschreibt seinen geplanten
        Anwendungsfall, indem er Fragen zu folgenden Bereichen beantwortet:
      </p>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Bereich</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Typische Fragen</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Warum relevant?</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">Datentypen</td><td className="px-4 py-3">Werden personenbezogene Daten verarbeitet? Besondere Kategorien (Art. 9)?</td><td className="px-4 py-3">Art. 9-Daten (Gesundheit, Religion, etc.) erfordern besondere Schutzmassnahmen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Verarbeitungszweck</td><td className="px-4 py-3">Wird Profiling betrieben? Scoring? Automatisierte Entscheidungen?</td><td className="px-4 py-3">Art. 22 DSGVO schuetzt vor vollautomatischen Entscheidungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Modellnutzung</td><td className="px-4 py-3">Wird das Modell nur genutzt (Inference) oder mit Nutzerdaten trainiert (Fine-Tuning)?</td><td className="px-4 py-3">Training mit personenbezogenen Daten erfordert besondere Rechtsgrundlage</td></tr>
            <tr><td className="px-4 py-3 font-medium">Automatisierungsgrad</td><td className="px-4 py-3">Assistenzsystem, teil- oder vollautomatisch?</td><td className="px-4 py-3">Vollautomatische Systeme unterliegen strengeren Auflagen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Datenspeicherung</td><td className="px-4 py-3">Wie lange werden Daten gespeichert? Wo?</td><td className="px-4 py-3">DSGVO Art. 5: Speicherbegrenzung / Zweckbindung</td></tr>
            <tr><td className="px-4 py-3 font-medium">Hosting-Standort</td><td className="px-4 py-3">EU, USA, oder anderswo?</td><td className="px-4 py-3">Drittlandtransfers erfordern zusaetzliche Garantien (SCC, DPF)</td></tr>
            <tr><td className="px-4 py-3 font-medium">Branche</td><td className="px-4 py-3">Gesundheit, Finanzen, Bildung, Automotive, ...?</td><td className="px-4 py-3">Bestimmte Branchen unterliegen zusaetzlichen Regulierungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Menschliche Aufsicht</td><td className="px-4 py-3">Gibt es einen Human-in-the-Loop?</td><td className="px-4 py-3">AI Act fordert menschliche Aufsicht fuer Hochrisiko-KI</td></tr>
          </tbody>
        </table>
      </div>

      <h3>4.2 Die Pruefregeln (Policy Engine)</h3>
      <p>
        Die Antworten des Fragebogens werden gegen ein <strong>Regelwerk von ueber 45 Regeln</strong>
        geprueft. Jede Regel ist in einer YAML-Datei definiert und hat folgende Struktur:
      </p>
      <ul>
        <li><strong>Bedingung:</strong> Wann greift die Regel? (z.B. &ldquo;Art. 9-Daten werden verarbeitet&rdquo;)</li>
        <li><strong>Schweregrad:</strong> INFO (Hinweis), WARN (Risiko, aber loesbar) oder BLOCK (grundsaetzlich nicht zulaessig)</li>
        <li><strong>Auswirkung:</strong> Was passiert, wenn die Regel greift? (Risikoerhoehung, zusaetzliche Controls, Eskalation)</li>
        <li><strong>Gesetzesreferenz:</strong> Auf welchen Artikel bezieht sich die Regel?</li>
      </ul>

      <p>Die Regeln sind in <strong>10 Kategorien</strong> organisiert:</p>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Kategorie</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Regel-IDs</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Prueft</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beispiel</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">A. Datenklassifikation</td><td className="px-4 py-3">R-001 bis R-006</td><td className="px-4 py-3">Welche Daten werden verarbeitet?</td><td className="px-4 py-3">R-001: Werden personenbezogene Daten verarbeitet? &rarr; +10 Risiko</td></tr>
            <tr><td className="px-4 py-3 font-medium">B. Zweck &amp; Kontext</td><td className="px-4 py-3">R-010 bis R-013</td><td className="px-4 py-3">Warum und wie werden Daten genutzt?</td><td className="px-4 py-3">R-011: Profiling? &rarr; DSFA empfohlen</td></tr>
            <tr><td className="px-4 py-3 font-medium">C. Automatisierung</td><td className="px-4 py-3">R-020 bis R-025</td><td className="px-4 py-3">Wie stark ist die Automatisierung?</td><td className="px-4 py-3">R-023: Vollautomatisch? &rarr; Art. 22 Risiko</td></tr>
            <tr><td className="px-4 py-3 font-medium">D. Training vs. Nutzung</td><td className="px-4 py-3">R-030 bis R-035</td><td className="px-4 py-3">Wird das Modell trainiert?</td><td className="px-4 py-3">R-035: Training + Art. 9-Daten? &rarr; BLOCK</td></tr>
            <tr><td className="px-4 py-3 font-medium">E. Speicherung</td><td className="px-4 py-3">R-040 bis R-042</td><td className="px-4 py-3">Wie lange werden Daten gespeichert?</td><td className="px-4 py-3">R-041: Unbegrenzte Speicherung? &rarr; WARN</td></tr>
            <tr><td className="px-4 py-3 font-medium">F. Hosting</td><td className="px-4 py-3">R-050 bis R-052</td><td className="px-4 py-3">Wo werden Daten gehostet?</td><td className="px-4 py-3">R-051: Hosting in USA? &rarr; SCC/DPF pruefen</td></tr>
            <tr><td className="px-4 py-3 font-medium">G. Transparenz</td><td className="px-4 py-3">R-060 bis R-062</td><td className="px-4 py-3">Werden Nutzer informiert?</td><td className="px-4 py-3">R-060: Keine Offenlegung? &rarr; AI Act Verstoss</td></tr>
            <tr><td className="px-4 py-3 font-medium">H. Branchenspezifisch</td><td className="px-4 py-3">R-070 bis R-074</td><td className="px-4 py-3">Gelten Sonderregeln fuer die Branche?</td><td className="px-4 py-3">R-070: Gesundheitsbranche? &rarr; zusaetzliche Anforderungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">I. Aggregation</td><td className="px-4 py-3">R-090 bis R-092</td><td className="px-4 py-3">Meta-Regeln ueber andere Regeln</td><td className="px-4 py-3">R-090: Zu viele WARN-Regeln? &rarr; Gesamtrisiko erhoeht</td></tr>
            <tr><td className="px-4 py-3 font-medium">J. Erklaerung</td><td className="px-4 py-3">R-100</td><td className="px-4 py-3">Warum hat das System so entschieden?</td><td className="px-4 py-3">Automatisch generierte Begruendung</td></tr>
          </tbody>
        </table>
      </div>

      <InfoBox type="info" title="Warum YAML-Regeln statt Code?">
        Die Regeln sind bewusst in YAML-Dateien definiert und nicht im Programmcode versteckt.
        Das hat zwei Vorteile: (1) Sie sind fuer Nicht-Programmierer lesbar und damit
        <strong> auditierbar</strong>, d.h. ein Datenschutzbeauftragter oder Wirtschaftspruefer kann
        pruefen, ob die Regeln korrekt sind. (2) Sie koennen <strong>versioniert</strong> werden --
        wenn sich ein Gesetz aendert, wird die Regelaenderung im Versionsverlauf sichtbar.
      </InfoBox>

      <h3>4.3 Das Ergebnis: Die Compliance-Bewertung</h3>
      <p>
        Nach der Pruefung aller Regeln erhaelt der Nutzer eine strukturierte Bewertung:
      </p>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Ergebnis</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beschreibung</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr>
              <td className="px-4 py-3 font-medium">Machbarkeit</td>
              <td className="px-4 py-3">
                <span className="inline-block px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-bold mr-1">YES</span>
                <span className="inline-block px-2 py-0.5 rounded bg-yellow-100 text-yellow-800 text-xs font-bold mr-1">CONDITIONAL</span>
                <span className="inline-block px-2 py-0.5 rounded bg-red-100 text-red-800 text-xs font-bold">NO</span>
              </td>
            </tr>
            <tr><td className="px-4 py-3 font-medium">Risikoscore</td><td className="px-4 py-3">0-100 Punkte. Je hoeher, desto mehr Massnahmen sind erforderlich.</td></tr>
            <tr><td className="px-4 py-3 font-medium">Risikostufe</td><td className="px-4 py-3">MINIMAL / LOW / MEDIUM / HIGH / UNACCEPTABLE</td></tr>
            <tr><td className="px-4 py-3 font-medium">Ausgeloeste Regeln</td><td className="px-4 py-3">Liste aller Regeln, die angeschlagen haben, mit Schweregrad und Gesetzesreferenz</td></tr>
            <tr><td className="px-4 py-3 font-medium">Erforderliche Controls</td><td className="px-4 py-3">Konkrete Massnahmen, die umgesetzt werden muessen (z.B. Verschluesselung, Einwilligung einholen)</td></tr>
            <tr><td className="px-4 py-3 font-medium">Empfohlene Architektur</td><td className="px-4 py-3">Technische Muster, die eingesetzt werden sollten (z.B. On-Premise statt Cloud)</td></tr>
            <tr><td className="px-4 py-3 font-medium">Verbotene Muster</td><td className="px-4 py-3">Technische Ansaetze, die vermieden werden muessen</td></tr>
            <tr><td className="px-4 py-3 font-medium">DSFA erforderlich?</td><td className="px-4 py-3">Ob eine Datenschutz-Folgenabschaetzung nach Art. 35 DSGVO durchgefuehrt werden muss</td></tr>
          </tbody>
        </table>
      </div>

      <CodeBlock language="text" filename="Beispiel: Bewertung eines Chatbots mit Kundendaten">
{`Anwendungsfall: "Chatbot fuer Kundenservice mit Zugriff auf Bestellhistorie"

Machbarkeit:       CONDITIONAL (bedingt zulaessig)
Risikoscore:       35/100 (LOW)
Risikostufe:       LOW

Ausgeloeste Regeln:
  R-001  WARN  Personenbezogene Daten werden verarbeitet          (Art. 6 DSGVO)
  R-010  INFO  Verarbeitungszweck: Kundenservice                  (Art. 5 DSGVO)
  R-020  INFO  Assistenzsystem (nicht vollautomatisch)             (Art. 22 DSGVO)
  R-060  WARN  Nutzer muessen ueber KI-Nutzung informiert werden  (AI Act Art. 52)

Erforderliche Controls:
  C_EXPLICIT_CONSENT   Einwilligung fuer Chatbot-Nutzung einholen
  C_TRANSPARENCY       Hinweis "Sie sprechen mit einer KI"
  C_DATA_MINIMIZATION  Nur notwendige Bestelldaten abrufen

DSFA erforderlich:     Nein (Risikoscore unter 40)
Eskalation:            E0 (keine manuelle Pruefung noetig)`}
      </CodeBlock>

      {/* ============================================================ */}
      {/* 5. DAS ESKALATIONS-SYSTEM                                    */}
      {/* ============================================================ */}
      <h2 id="eskalation">5. Das Eskalations-System: Wann Menschen entscheiden</h2>
      <p>
        Nicht jede Bewertung ist eindeutig. Fuer heikle Faelle gibt es ein abgestuftes
        Eskalations-System, das sicherstellt, dass die richtigen Menschen die endgueltige
        Entscheidung treffen.
      </p>

      <div className="not-prose my-6 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Stufe</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Wann?</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Wer prueft?</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Frist (SLA)</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beispiel</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr className="bg-green-50"><td className="px-4 py-3 font-bold text-green-800">E0</td><td className="px-4 py-3">Nur INFO-Regeln, Risiko &lt; 20</td><td className="px-4 py-3">Niemand (automatisch freigegeben)</td><td className="px-4 py-3">--</td><td className="px-4 py-3">Spam-Filter ohne personenbezogene Daten</td></tr>
            <tr className="bg-yellow-50"><td className="px-4 py-3 font-bold text-yellow-800">E1</td><td className="px-4 py-3">WARN-Regeln, Risiko 20-39</td><td className="px-4 py-3">Teamleiter</td><td className="px-4 py-3">24 Stunden</td><td className="px-4 py-3">Chatbot mit Kundendaten (unser Beispiel oben)</td></tr>
            <tr className="bg-orange-50"><td className="px-4 py-3 font-bold text-orange-800">E2</td><td className="px-4 py-3">Art. 9-Daten ODER Risiko 40-59 ODER DSFA empfohlen</td><td className="px-4 py-3">Datenschutzbeauftragter (DSB)</td><td className="px-4 py-3">8 Stunden</td><td className="px-4 py-3">KI-System, das Gesundheitsdaten verarbeitet</td></tr>
            <tr className="bg-red-50"><td className="px-4 py-3 font-bold text-red-800">E3</td><td className="px-4 py-3">BLOCK-Regel ODER Risiko &ge; 60 ODER Art. 22-Risiko</td><td className="px-4 py-3">DSB + Rechtsabteilung</td><td className="px-4 py-3">4 Stunden</td><td className="px-4 py-3">Vollautomatische Kreditentscheidung</td></tr>
          </tbody>
        </table>
      </div>

      <p>
        <strong>Zuweisung:</strong> Die Zuweisung erfolgt automatisch an den Pruefer mit der
        geringsten aktuellen Arbeitslast (Workload-basiertes Round-Robin). Jeder Pruefer hat eine
        konfigurierbare Obergrenze fuer gleichzeitige Reviews (z.B. 10 fuer Teamleiter, 5 fuer DSB,
        3 fuer Rechtsabteilung).
      </p>
      <p>
        <strong>Entscheidung:</strong> Der Pruefer kann den Anwendungsfall <em>freigeben</em>,
        <em>ablehnen</em>, <em>mit Auflagen freigeben</em> oder <em>weiter eskalieren</em>.
        Jede Entscheidung wird mit Begruendung im Audit-Trail gespeichert.
      </p>

      {/* ============================================================ */}
      {/* 6. CONTROLS, EVIDENCE & RISIKEN                              */}
      {/* ============================================================ */}
      <h2 id="controls">6. Controls, Nachweise und Risiken</h2>

      <h3>6.1 Was sind Controls?</h3>
      <p>
        Ein <strong>Control</strong> ist eine konkrete Massnahme, die eine Organisation umsetzt,
        um ein Compliance-Risiko zu beherrschen. Es gibt drei Arten:
      </p>
      <ul>
        <li><strong>Technische Controls:</strong> Verschluesselung, Zugangskontrollen, Firewalls, Pseudonymisierung</li>
        <li><strong>Organisatorische Controls:</strong> Schulungen, Richtlinien, Verantwortlichkeiten, Audits</li>
        <li><strong>Physische Controls:</strong> Zutrittskontrolle zu Serverraeumen, Schliesssysteme</li>
      </ul>
      <p>
        Der Compliance Hub verwaltet einen <strong>Katalog von ueber 100 vordefinierten Controls</strong>,
        die in 9 Domaenen organisiert sind:
      </p>
      <div className="not-prose my-4">
        <div className="grid grid-cols-3 gap-2">
          {[
            { code: 'AC', name: 'Zugriffsmanagement', desc: 'Wer darf was?' },
            { code: 'DP', name: 'Datenschutz', desc: 'Schutz personenbezogener Daten' },
            { code: 'NS', name: 'Netzwerksicherheit', desc: 'Sichere Kommunikation' },
            { code: 'IR', name: 'Incident Response', desc: 'Reaktion auf Sicherheitsvorfaelle' },
            { code: 'BC', name: 'Business Continuity', desc: 'Geschaeftskontinuitaet' },
            { code: 'VM', name: 'Vendor Management', desc: 'Dienstleister-Steuerung' },
            { code: 'AM', name: 'Asset Management', desc: 'Verwaltung von IT-Werten' },
            { code: 'CR', name: 'Kryptographie', desc: 'Verschluesselung & Schluessel' },
            { code: 'PS', name: 'Physische Sicherheit', desc: 'Gebaeude & Hardware' },
          ].map(d => (
            <div key={d.code} className="border border-gray-200 rounded-lg p-3 text-sm">
              <div className="font-bold text-blue-600">{d.code}</div>
              <div className="font-medium">{d.name}</div>
              <div className="text-gray-500 text-xs">{d.desc}</div>
            </div>
          ))}
        </div>
      </div>

      <h3>6.2 Wie Controls mit Gesetzen verknuepft sind</h3>
      <p>
        Jeder Control ist mit einem oder mehreren Gesetzesartikeln verknuepft. Diese
        <strong> Mappings</strong> machen sichtbar, warum eine Massnahme erforderlich ist:
      </p>

      <CodeBlock language="text" filename="Beispiel: Control-Mapping">
{`Control: AC-01 (Zugriffskontrolle)
├── DSGVO Art. 32    → "Sicherheit der Verarbeitung"
├── NIS2 Art. 21     → "Massnahmen zum Management von Cyberrisiken"
├── ISO 27001 A.9    → "Zugangskontrolle"
└── BSI Grundschutz  → "ORP.4 Identitaets- und Berechtigungsmanagement"

Control: DP-03 (Datenverschluesselung)
├── DSGVO Art. 32    → "Verschluesselung personenbezogener Daten"
├── DSGVO Art. 34    → "Benachrichtigung ueber Datenverletzung" (Ausnahme bei Verschluesselung)
└── NIS2 Art. 21     → "Einsatz von Kryptographie"`}
      </CodeBlock>

      <h3>6.3 Evidence (Nachweise)</h3>
      <p>
        Ein Control allein genuegt nicht -- man muss auch <strong>nachweisen</strong>, dass er
        umgesetzt wurde. Das System verwaltet verschiedene Nachweis-Typen:
      </p>
      <ul>
        <li><strong>Zertifikate:</strong> ISO 27001-Zertifikat, SOC2-Report</li>
        <li><strong>Richtlinien:</strong> Interne Datenschutzrichtlinie, Passwort-Policy</li>
        <li><strong>Audit-Berichte:</strong> Ergebnisse interner oder externer Pruefungen</li>
        <li><strong>Screenshots / Konfigurationen:</strong> Nachweis technischer Umsetzung</li>
      </ul>
      <p>
        Jeder Nachweis hat ein <strong>Ablaufdatum</strong>. Das System warnt automatisch,
        wenn Nachweise bald ablaufen (z.B. ein ISO-Zertifikat, das in 3 Monaten erneuert werden muss).
      </p>

      <h3>6.4 Risikobewertung</h3>
      <p>
        Risiken werden in einer <strong>5x5-Risikomatrix</strong> dargestellt. Die beiden Achsen sind:
      </p>
      <ul>
        <li><strong>Eintrittswahrscheinlichkeit:</strong> Wie wahrscheinlich ist es, dass das Risiko eintritt?</li>
        <li><strong>Auswirkung:</strong> Wie schwerwiegend waeren die Folgen?</li>
      </ul>
      <p>
        Aus der Kombination ergibt sich die Risikostufe: <em>Minimal</em>, <em>Low</em>,
        <em>Medium</em>, <em>High</em> oder <em>Critical</em>. Fuer jedes identifizierte Risiko
        wird dokumentiert, welche Controls es abmildern und wer dafuer verantwortlich ist.
      </p>

      {/* ============================================================ */}
      {/* 7. OBLIGATIONS FRAMEWORK                                     */}
      {/* ============================================================ */}
      <h2 id="obligations">7. Pflichten-Ableitung: Welche Gesetze gelten fuer mich?</h2>
      <p>
        Nicht jedes Gesetz gilt fuer jede Organisation. Das <strong>Obligations Framework</strong>
        ermittelt automatisch, welche konkreten Pflichten sich aus der Situation einer Organisation
        ergeben. Dafuer werden &ldquo;Fakten&rdquo; ueber die Organisation gesammelt und gegen die
        Anwendbarkeitsbedingungen der einzelnen Gesetze geprueft.
      </p>

      <h3>Beispiel: NIS2-Anwendbarkeit</h3>
      <CodeBlock language="text" filename="Entscheidungsbaum: Gilt NIS2 fuer mein Unternehmen?">
{`Ist Ihr Unternehmen in einem der NIS2-Sektoren taetig?
(Energie, Transport, Banken, Gesundheit, Wasser, Digitale Infrastruktur, ...)
  │
  ├── Nein → NIS2 gilt NICHT fuer Sie
  │
  └── Ja → Wie gross ist Ihr Unternehmen?
            │
            ├── >= 250 Mitarbeiter ODER >= 50 Mio. EUR Umsatz
            │    → ESSENTIAL ENTITY (wesentliche Einrichtung)
            │    → Volle NIS2-Pflichten, strenge Aufsicht
            │    → Bussgelder bis 10 Mio. EUR oder 2% Jahresumsatz
            │
            ├── >= 50 Mitarbeiter ODER >= 10 Mio. EUR Umsatz
            │    → IMPORTANT ENTITY (wichtige Einrichtung)
            │    → NIS2-Pflichten, reaktive Aufsicht
            │    → Bussgelder bis 7 Mio. EUR oder 1,4% Jahresumsatz
            │
            └── Kleiner → NIS2 gilt grundsaetzlich NICHT
                 (Ausnahmen fuer bestimmte Sektoren moeglich)`}
      </CodeBlock>

      <p>
        Aehnliche Entscheidungsbaeume existieren fuer DSGVO (Verarbeitung personenbezogener Daten?),
        AI Act (KI-System im Einsatz? Welche Risikokategorie?) und alle anderen Regelwerke.
        Das System leitet daraus konkrete Pflichten ab -- z.B. &ldquo;Meldepflicht bei
        Sicherheitsvorfaellen innerhalb von 72 Stunden&rdquo; oder &ldquo;Ernennung eines
        Datenschutzbeauftragten&rdquo;.
      </p>

      {/* ============================================================ */}
      {/* 8. DSGVO-MODULE                                              */}
      {/* ============================================================ */}
      <h2 id="dsgvo-module">8. DSGVO-Compliance-Module im Detail</h2>
      <p>
        Fuer die Einhaltung der DSGVO bietet der Compliance Hub spezialisierte Module:
      </p>

      <h3>8.1 Consent Management (Einwilligungsverwaltung)</h3>
      <p>
        Verwaltet die Einwilligung von Nutzern gemaess Art. 6/7 DSGVO. Jede Einwilligung wird
        protokolliert: wer hat wann, auf welchem Kanal, fuer welchen Zweck zugestimmt (oder
        abgelehnt)? Einwilligungen koennen jederzeit widerrufen werden, der Widerruf wird ebenfalls
        dokumentiert.
      </p>
      <p>
        <strong>Zwecke:</strong> Essential (funktionsnotwendig), Functional, Analytics, Marketing,
        Personalization, Third-Party.
      </p>

      <h3>8.2 DSR Management (Betroffenenrechte)</h3>
      <p>
        Verwaltet Antraege betroffener Personen nach Art. 15-21 DSGVO: Auskunft, Berichtigung,
        Loeschung, Datenportabilitaet, Einschraenkung und Widerspruch. Das System ueberwacht die
        <strong> 30-Tage-Frist</strong> (Art. 12) und eskaliert automatisch, wenn Fristen drohen
        zu verstreichen.
      </p>

      <h3>8.3 VVT (Verzeichnis von Verarbeitungstaetigkeiten)</h3>
      <p>
        Dokumentiert alle Datenverarbeitungen gemaess Art. 30 DSGVO: Welche Daten werden fuer
        welchen Zweck, auf welcher Rechtsgrundlage, wie lange und von wem verarbeitet? Jede
        Verarbeitungstaetigkeit wird mit ihren Datenkategorien, Empfaengern und
        Loeschfristen erfasst.
      </p>

      <h3>8.4 DSFA (Datenschutz-Folgenabschaetzung)</h3>
      <p>
        Wenn eine Datenverarbeitung voraussichtlich ein hohes Risiko fuer die Rechte natuerlicher
        Personen mit sich bringt, ist eine DSFA nach Art. 35 DSGVO Pflicht. Das System unterstuetzt
        den Prozess: Risiken identifizieren, bewerten, Gegenmassnahmen definieren und das Ergebnis
        dokumentieren.
      </p>

      <h3>8.5 TOM (Technisch-Organisatorische Massnahmen)</h3>
      <p>
        Dokumentiert die Schutzmassnahmen nach Art. 32 DSGVO. Fuer jede Massnahme wird erfasst:
        Kategorie (z.B. Verschluesselung, Zugriffskontrolle), Status (implementiert / in
        Bearbeitung / geplant), Verantwortlicher und Nachweise.
      </p>

      <h3>8.6 Loeschkonzept</h3>
      <p>
        Verwaltet Aufbewahrungsfristen und automatische Loeschung gemaess Art. 5/17 DSGVO.
        Fuer jede Datenkategorie wird definiert: wie lange darf sie gespeichert werden, wann muss
        sie geloescht werden und wie (z.B. Ueberschreiben, Schluesselloeschung bei verschluesselten
        Daten).
      </p>

      {/* ============================================================ */}
      {/* 9. MULTI-TENANCY & ZUGRIFFSKONTROLLE                        */}
      {/* ============================================================ */}
      <h2 id="multi-tenancy">9. Multi-Tenancy und Zugriffskontrolle</h2>
      <p>
        Das System ist <strong>mandantenfaehig</strong> (Multi-Tenant): Mehrere Organisationen
        koennen es gleichzeitig nutzen, ohne dass sie gegenseitig auf ihre Daten zugreifen koennen.
        Jede Anfrage enthaelt eine Tenant-ID, und die Datenbank-Abfragen filtern automatisch nach
        dieser ID.
      </p>

      <h3>9.1 Rollenbasierte Zugriffskontrolle (RBAC)</h3>
      <p>
        Innerhalb eines Mandanten gibt es verschiedene Rollen mit unterschiedlichen Berechtigungen:
      </p>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Rolle</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Darf</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">Mitarbeiter</td><td className="px-4 py-3">Anwendungsfaelle einreichen, eigene Bewertungen einsehen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Teamleiter</td><td className="px-4 py-3">E1-Eskalationen pruefen, Team-Assessments einsehen</td></tr>
            <tr><td className="px-4 py-3 font-medium">DSB (Datenschutzbeauftragter)</td><td className="px-4 py-3">E2/E3-Eskalationen pruefen, alle Assessments einsehen, Policies aendern</td></tr>
            <tr><td className="px-4 py-3 font-medium">Rechtsabteilung</td><td className="px-4 py-3">E3-Eskalationen pruefen, Grundsatzentscheidungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Administrator</td><td className="px-4 py-3">System konfigurieren, Nutzer verwalten, LLM-Policies festlegen</td></tr>
          </tbody>
        </table>
      </div>

      <h3>9.2 PII-Erkennung und -Schutz</h3>
      <p>
        Bevor Texte an ein Sprachmodell gesendet werden, durchlaufen sie eine automatische
        <strong> PII-Erkennung</strong> (Personally Identifiable Information). Das System erkennt
        ueber 20 Arten personenbezogener Daten:
      </p>
      <ul>
        <li>E-Mail-Adressen, Telefonnummern, Postanschriften</li>
        <li>Sozialversicherungsnummern, Kreditkartennummern</li>
        <li>Personennamen, IP-Adressen</li>
        <li>und weitere...</li>
      </ul>
      <p>
        Je nach Konfiguration werden erkannte PII-Daten <strong>geschwuerzt</strong> (durch
        Platzhalter ersetzt), <strong>maskiert</strong> (nur Anfang/Ende sichtbar) oder nur im
        Audit-Log <strong>markiert</strong>.
      </p>

      {/* ============================================================ */}
      {/* 10. LLM-NUTZUNG                                             */}
      {/* ============================================================ */}
      <h2 id="llm-nutzung">10. Wie das System KI nutzt (und wie nicht)</h2>
      <p>
        Der Compliance Hub setzt kuenstliche Intelligenz gezielt und kontrolliert ein. Es gibt
        eine klare Trennung zwischen dem, was die KI tut, und dem, was sie nicht tun darf:
      </p>

      <div className="not-prose my-6 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Aufgabe</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Entschieden von</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Rolle der KI</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3">Machbarkeit (YES/CONDITIONAL/NO)</td><td className="px-4 py-3 font-medium">Deterministische Regeln</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
            <tr><td className="px-4 py-3">Risikoscore berechnen</td><td className="px-4 py-3 font-medium">Regelbasierte Berechnung</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
            <tr><td className="px-4 py-3">Eskalation ausloesen</td><td className="px-4 py-3 font-medium">Schwellenwerte + Regellogik</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
            <tr><td className="px-4 py-3">Controls zuordnen</td><td className="px-4 py-3 font-medium">Regel-zu-Control-Mapping</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
            <tr className="bg-blue-50"><td className="px-4 py-3">Ergebnis erklaeren</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM + RAG-Kontext</td></tr>
            <tr className="bg-blue-50"><td className="px-4 py-3">Verbesserungsvorschlaege</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM</td></tr>
            <tr className="bg-blue-50"><td className="px-4 py-3">Rechtsfragen beantworten</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM + RAG (Rechtskorpus)</td></tr>
            <tr className="bg-blue-50"><td className="px-4 py-3">Dokumente generieren (DSFA, TOM, VVT)</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM + Vorlagen</td></tr>
          </tbody>
        </table>
      </div>

      <h3>LLM-Provider und Fallback</h3>
      <p>
        Das System unterstuetzt mehrere KI-Anbieter mit automatischem Fallback:
      </p>
      <ol>
        <li><strong>Primaer: Ollama (lokal)</strong> -- Qwen 2.5 32B bzw. Mistral, laeuft direkt auf dem Server. Keine Daten verlassen das lokale Netzwerk.</li>
        <li><strong>Fallback: Anthropic Claude</strong> -- Wird nur aktiviert, wenn das lokale Modell nicht verfuegbar ist.</li>
      </ol>
      <p>
        Jeder LLM-Aufruf wird im Audit-Trail protokolliert: Prompt-Hash (SHA-256), verwendetes
        Modell, Antwortzeit und ob PII erkannt wurde.
      </p>

      {/* ============================================================ */}
      {/* 11. AUDIT-TRAIL                                              */}
      {/* ============================================================ */}
      <h2 id="audit-trail">11. Audit-Trail: Alles wird protokolliert</h2>
      <p>
        Saemtliche Aktionen im System werden revisionssicher protokolliert:
      </p>
      <ul>
        <li>Jede Compliance-Bewertung mit allen Ein- und Ausgaben</li>
        <li>Jede Eskalationsentscheidung mit Begruendung</li>
        <li>Jeder LLM-Aufruf (wer hat was wann gefragt, welches Modell wurde verwendet)</li>
        <li>Jede Aenderung an Controls, Evidence und Policies</li>
        <li>Jeder Login und Daten-Export</li>
      </ul>
      <p>
        Der Audit-Trail kann als <strong>PDF, CSV oder JSON</strong> exportiert werden und dient als
        Nachweis gegenueber Aufsichtsbehoerden, Wirtschaftspruefern und internen Revisoren.
      </p>

      <InfoBox type="info" title="Datenschutz des Audit-Trails">
        Der Use-Case-Text (die Beschreibung des Anwendungsfalls) wird
        <strong> nur mit Einwilligung des Nutzers</strong> gespeichert. Standardmaessig wird nur
        ein SHA-256-Hash des Textes gespeichert -- damit kann nachgewiesen werden, <em>dass</em>
        ein bestimmter Text bewertet wurde, ohne den Text selbst preiszugeben.
      </InfoBox>

      {/* ============================================================ */}
      {/* 12. SECURITY SCANNER                                         */}
      {/* ============================================================ */}
      <h2 id="security">12. Security Scanner: Technische Sicherheitspruefung</h2>
      <p>
        Ergaenzend zur rechtlichen Compliance prueft der Security Scanner die
        <strong> technische Sicherheit</strong>:
      </p>
      <ul>
        <li><strong>Container-Scanning (Trivy):</strong> Prueft Docker-Images auf bekannte Schwachstellen (CVEs)</li>
        <li><strong>Statische Code-Analyse (Semgrep):</strong> Sucht im Quellcode nach Sicherheitsluecken (SQL Injection, XSS, etc.)</li>
        <li><strong>Secret Detection (Gitleaks):</strong> Findet versehentlich eingecheckte Passwoerter, API-Keys und Tokens</li>
        <li><strong>SBOM-Generierung:</strong> Erstellt eine Software Bill of Materials -- eine vollstaendige Liste aller verwendeten Bibliotheken und deren Lizenzen</li>
      </ul>
      <p>
        Gefundene Schwachstellen werden nach Schweregrad (Critical, High, Medium, Low) klassifiziert
        und koennen direkt im System nachverfolgt und behoben werden.
      </p>

      {/* ============================================================ */}
      {/* 13. ZUSAMMENFASSUNG                                          */}
      {/* ============================================================ */}
      <h2 id="zusammenfassung">13. Zusammenfassung: Der komplette Datenfluss</h2>
      <p>
        Hier ist der gesamte Prozess von Anfang bis Ende:
      </p>

      <CodeBlock language="text" filename="Der komplette Compliance-Workflow">
{`SCHRITT 1: FAKTEN SAMMELN
━━━━━━━━━━━━━━━━━━━━━━━━
Nutzer fuellt Fragebogen aus:
  → Welche Daten? Welcher Zweck? Welche Branche? Wo gehostet?

SCHRITT 2: ANWENDBARKEIT PRUEFEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Obligations Framework ermittelt:
  → DSGVO betroffen? → Ja (personenbezogene Daten)
  → AI Act betroffen? → Ja (KI-System)
  → NIS2 betroffen? → Nein (< 50 Mitarbeiter, kein KRITIS-Sektor)

SCHRITT 3: REGELN PRUEFEN
━━━━━━━━━━━━━━━━━━━━━━━━
Policy Engine wertet 45+ Regeln aus:
  → R-001 (WARN): Personenbezogene Daten           +10 Risiko
  → R-020 (INFO): Assistenzsystem                   +0 Risiko
  → R-060 (WARN): KI-Transparenz fehlt             +15 Risiko
  → ...
  → Gesamt-Risikoscore: 35/100 (LOW)
  → Machbarkeit: CONDITIONAL

SCHRITT 4: CONTROLS ZUORDNEN
━━━━━━━━━━━━━━━━━━━━━━━━━━━
Jede ausgeloeste Regel triggert Controls:
  → C_EXPLICIT_CONSENT: Einwilligung einholen
  → C_TRANSPARENCY: KI-Nutzung offenlegen
  → C_DATA_MINIMIZATION: Datenminimierung

SCHRITT 5: ESKALATION (bei Bedarf)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Score 35 → Stufe E1 → Teamleiter wird benachrichtigt
  → SLA: 24 Stunden fuer Pruefung
  → Entscheidung: Freigabe mit Auflagen

SCHRITT 6: ERKLAERUNG GENERIEREN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LLM + RAG erstellen verstaendliche Erklaerung:
  → Suche relevante Gesetzesartikel (Qdrant)
  → Generiere Erklaerungstext (Qwen 2.5)
  → Fuege Zitate und Quellen hinzu

SCHRITT 7: DOKUMENTATION
━━━━━━━━━━━━━━━━━━━━━━━
System erzeugt erforderliche Dokumente:
  → DSFA (falls empfohlen)
  → TOM-Dokumentation
  → VVT-Eintrag
  → Compliance-Report (PDF/ZIP/JSON)

SCHRITT 8: MONITORING
━━━━━━━━━━━━━━━━━━━━
Laufende Ueberwachung:
  → Controls werden regelmaessig geprueft
  → Nachweise werden auf Ablauf ueberwacht
  → Gesetzesaenderungen fliessen in den Corpus ein`}
      </CodeBlock>

      <InfoBox type="success" title="Das Wichtigste in einem Satz">
        Der Compliance Hub nimmt die Beschreibung eines KI-Vorhabens entgegen, prueft es gegen
        ueber 45 deterministische Regeln und 400+ Gesetzesartikel, berechnet ein Risiko, ordnet
        Massnahmen zu, eskaliert bei Bedarf an menschliche Pruefer und dokumentiert alles
        revisionssicher -- wobei die KI nur fuer Erklaerungen und Zusammenfassungen eingesetzt wird,
        niemals fuer die eigentliche Compliance-Entscheidung.
      </InfoBox>
    </DevPortalLayout>
  )
}
