# Juristische OCR- & Problemklassifikationsplattform – XXL Monolith
## Developer Documentation & Technical Architecture

---

## Table of Contents
1. [Project Overview](#project-overview)
2. [Technical Architecture](#technical-architecture)
3. [Technology Stack](#technology-stack)
4. [Module Structure](#module-structure)
5. [Data Models](#data-models)
6. [Complete Source Code](#complete-source-code)
7. [API & External Dependencies](#api--external-dependencies)
8. [Deployment & Setup](#deployment--setup)
9. [Testing & Validation](#testing--validation)
10. [Future Extensions](#future-extensions)

---

## Project Overview

**Project Name:** Juristische OCR- & Problemklassifikationsplattform – XXL Monolith  
**Version:** 1.0  
**Language:** German (DE)  
**Type:** Single-Page Application (SPA)  
**Purpose:** Legal document OCR processing, problem classification, and automated legal analysis

### Core Features
- Document upload (PNG, JPG, PDF support planned)
- OCR text extraction using Tesseract.js
- Legal problem category detection (25+ categories)
- A-Z problem type classification
- Legal rule engine with German law references
- Notarial analysis module
- Risk assessment scoring
- Solution engine with actionable recommendations
- Statistical overview and debug interface

---

## Technical Architecture

### System Architecture Diagram

```
┌─────────────────────────────────────────────────────────────────┐
│                     CLIENT BROWSER LAYER                        │
├─────────────────────────────────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐         │
│  │   HTML UI    │  │    CSS       │  │  JavaScript  │         │
│  │  (2-column)  │  │  (Grid/Flex) │  │  (Logic)     │         │
│  └──────────────┘  └──────────────┘  └──────────────┘         │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    EXTERNAL DEPENDENCIES                        │
├─────────────────────────────────────────────────────────────────┤
│  ┌──────────────────────────────────────────────────────────┐  │
│  │         Tesseract.js (CDN) - OCR Engine                 │  │
│  │  - German + English language support                    │  │
│  │  - Browser-based text recognition                        │  │
│  └──────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    APPLICATION LOGIC LAYER                      │
├─────────────────────────────────────────────────────────────────┤
│  ┌──────────────────┐  ┌──────────────────┐  ┌──────────────┐ │
│  │ File Handler     │  │ OCR Processor    │  │ Text Analyzer│ │
│  │ - Upload         │  │ - Tesseract      │  │ - NLP (basic) │ │
│  │ - Validation     │  │ - Text extraction│  │ - Pattern    │ │
│  └──────────────────┘  └──────────────────┘  │   matching    │ │
│                                              └──────────────┘ │
│  ┌──────────────────┐  ┌──────────────────┐  ┌──────────────┐ │
│  │ Classifier      │  │ Legal Rules      │  │ Risk Engine  │ │
│  │ - Categories     │  │ - Law database  │  │ - Scoring    │ │
│  │ - Problem types  │  │ - Actions       │  │ - Assessment │ │
│  └──────────────────┘  └──────────────────┘  └──────────────┘ │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                      DATA LAYER (In-Memory)                     │
├─────────────────────────────────────────────────────────────────┤
│  - problemCategories (25+ legal categories)                     │
│  - legalRules (law references & actions)                        │
│  - problemTypePatterns (A-Z classification)                    │
│  - currentFile (uploaded file reference)                       │
│  - lastAnalysis (analysis results cache)                        │
└─────────────────────────────────────────────────────────────────┘
```

### Data Flow

```
User Upload File → File Validation → OCR Processing → Text Extraction
                                                              │
                                                              ▼
Text Analysis → Category Detection → Problem Classification → Module Detection
                                                              │
                                                              ▼
Risk Scoring → Legal Rule Lookup → Solution Generation → UI Rendering
```

---

## Technology Stack

### Frontend
- **HTML5**: Semantic markup, single-file architecture
- **CSS3**: Grid layout, responsive design, modern styling
- **Vanilla JavaScript (ES6+)**: No frameworks, pure DOM manipulation

### External Libraries
- **Tesseract.js v5**: OCR engine (CDN: jsdelivr.net)
  - German + English language support
  - Browser-based, no server required

### Browser Requirements
- Modern browser with ES6+ support
- JavaScript enabled
- Canvas support (for Tesseract.js)

---

## Module Structure

### 1. Data Models & Taxonomies (Lines 198-288)

#### problemCategories Array
25+ legal problem categories with keyword matching:
- Contract Law, Labor Law, Tenancy Law, Criminal Law
- Data Protection, Corporate Law, Tax Law, Social Law
- Family Law, Inheritance Law, Notarial Claims
- Insolvency Law, Administrative Law, EU Law
- IT Law, Competition Law, Trademark Law, Patent Law
- Insurance Law, Environmental Law, Construction Law
- Transport Law, Commercial Law, Constitutional Law, International Law

#### legalRules Object
Legal rule engine with:
- **Laws**: Relevant German law references (BGB, StGB, DSGVO, etc.)
- **Actions**: Recommended procedural steps for each category

#### problemTypePatterns Array
A-Z problem classification heuristics:
- Calculation problems, Evaluation problems, Decision problems
- Optimization problems, Analysis problems, Classification problems
- Validation problems, Risk problems, Goal achievement problems
- Transformation problems

### 2. DOM References & Validation (Lines 290-328)

#### DOM Elements
14 required UI elements with validation:
- Input: fileInput
- Buttons: runOcrBtn, analyzeBtn
- Status: ocrStatus, analyzeStatus
- Output: ocrOutput, problemTags, legalAnalysis, notarialAnalysis
- Views: solutionEngine, statsView, debugView, problemTypesView, problemList

#### Validation Logic
Runtime validation ensures all DOM elements exist before execution.

### 3. File Handling & OCR Module (Lines 330-377)

#### File Input Handler
- Accepts image/* and .pdf files
- Validates file selection
- Provides PDF conversion guidance (demo limitation)

#### OCR Processor
- Uses Tesseract.js with German+English language
- Async/await pattern for worker management
- Error handling with user feedback
- Button state management during processing

### 4. Text Analysis Engine (Lines 379-514)

#### analyzeText() Function
Core analysis pipeline:
1. **Category Detection**: Keyword matching against 25+ legal categories
2. **Sentence Splitting**: Regex-based sentence segmentation
3. **Problem Extraction**: Pattern matching for task verbs (berechnen, prüfen, etc.)
4. **Type Classification**: A-Z problem type assignment
5. **Module Detection**: Context-aware module recommendation
6. **Risk Scoring**: Heuristic risk calculation (0-100 scale)

#### Helper Functions
- **splitIntoSentences()**: Text segmentation
- **classifyProblemTypes()**: Pattern-based classification
- **detectModulesForSentence()**: Context-aware module recommendation
- **aggregateCounts()**: Statistical aggregation

### 5. Rendering Layer (Lines 516-703)

#### renderAll() Function
Orchestrates all UI updates:
- Tag rendering for categories
- Problem type display
- Legal analysis output
- Notarial assessment
- Solution engine results
- Statistical tables
- Debug JSON view
- Problem list table

#### Individual Render Functions
- **renderTags()**: Category tag display
- **renderProblemTypes()**: A-Z type aggregation
- **renderLegalAnalysis()**: Law reference lookup
- **renderNotarialAnalysis()**: Notarial relevance check
- **renderSolutionEngine()**: Actionable recommendations
- **renderStats()**: Statistical overview
- **renderDebug()**: JSON debug output
- **renderProblemList()**: Detailed problem table

---

## Data Models

### Analysis Result Object
```javascript
{
  detectedCategories: string[],      // Detected legal categories
  problems: Problem[],               // Extracted problem statements
  problemTypes: { [type: string ]: number },  // Type counts
  riskScore: number                  // 0-100 risk assessment
}
```

### Problem Object
```javascript
{
  id: string,                        // "P1", "P2", etc.
  original: string,                  // Original sentence
  types: Type[],                     // Primary + secondary types
  modules: string[]                  // Recommended modules
}
```

### Type Object
```javascript
{
  primary: string,                   // Main problem type
  secondary: string[]                // Additional classifications
}
```

---

## Complete Source Code

### File: index.html (706 lines)

```html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Juristische OCR- & Problemklassifikationsplattform – XXL Monolith</title>

  <!-- Tesseract.js für OCR (reines Browser-Script, kein Node) -->
  <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>

  <style>
    * { box-sizing: border-box; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #f2f4f8;
      margin: 0;
      padding: 0;
      color: #111827;
    }
    header {
      background: #111827;
      color: white;
      padding: 20px;
    }
    header h1 { margin: 0 0 6px 0; }
    header p { margin: 0; font-size: 0.9rem; opacity: 0.9; }

    main {
      padding: 20px;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
      gap: 20px;
    }

    .card {
      background: white;
      border-radius: 12px;
      padding: 18px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    h2 { margin-top: 0; margin-bottom: 10px; }
    h3 { margin-top: 16px; margin-bottom: 6px; }

    textarea {
      width: 100%;
      min-height: 220px;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.85rem;
      background: #f9fafb;
    }

    button {
      background: #111827;
      color: white;
      border: none;
      padding: 10px 16px;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 10px;
      font-weight: 600;
      font-size: 0.9rem;
    }
    button:hover { background: #1f2937; }
    button:disabled { background: #9ca3af; cursor: default; }

    .tag {
      display: inline-block;
      background: #dbeafe;
      color: #1e40af;
      padding: 4px 10px;
      border-radius: 999px;
      margin: 4px 4px 0 0;
      font-size: 12px;
      white-space: nowrap;
    }

    pre {
      white-space: pre-wrap;
      word-break: break-word;
      background: #f8fafc;
      padding: 10px;
      border-radius: 8px;
      font-size: 0.8rem;
      border: 1px solid #e5e7eb;
      max-height: 260px;
      overflow: auto;
    }

    .status {
      font-size: 0.8rem;
      color: #4b5563;
      margin-top: 6px;
    }

    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      background: #e5e7eb;
      font-size: 11px;
      margin: 2px 4px 0 0;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
    }

    .small {
      font-size: 0.8rem;
      color: #6b7280;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
      margin-top: 6px;
    }
    th, td {
      border: 1px solid #e5e7eb;
      padding: 4px 6px;
      text-align: left;
      vertical-align: top;
    }
    th { background: #f3f4f6; }
  </style>
</head>
<body>
<header>
  <h1>Juristische OCR- & Problemklassifikationsplattform – XXL</h1>
  <p>
    Upload · OCR · Problemextraktion · A–Z-Problemtypen · Juristische/Notarielle Analyse · Gesetzgebung · Risiko · Lösungsengine
  </p>
</header>

<main>
  <!-- LINKER BLOCK: Upload & OCR & Rohtext -->
  <section class="card">
    <h2>1. Dokument-Upload & OCR</h2>
    <p class="small">
      Unterstützt Bilddateien (PNG, JPG). PDFs können vorbereitet werden (PDF‑OCR‑Hook vorhanden, Demo: Hinweis).
    </p>
    <input type="file" id="fileInput" accept="image/*,.pdf" />
    <button id="runOcrBtn">OCR Analyse starten</button>
    <div id="ocrStatus" class="status"></div>

    <h3>OCR-Rohtext</h3>
    <textarea id="ocrOutput" placeholder="Hier erscheint der erkannte OCR-Text..."></textarea>

    <h3>Manuelle Analyse starten</h3>
    <button id="analyzeBtn">Text analysieren (A–Z, Module, Risiko, Lösung)</button>
    <div id="analyzeStatus" class="status"></div>

    <h3>Erkannte Problemstellungen (Kurzliste)</h3>
    <div id="problemList"></div>
  </section>

  <!-- RECHTER BLOCK: Analyse, Juristik, Notariat, Lösung, Statistik -->
  <section class="card">
    <h2>2. Analyse, Klassifikation & Lösung</h2>

    <h3>2.1 Problemklassen (juristisch / systemisch)</h3>
    <div id="problemTags"></div>

    <h3>2.2 A–Z-Problemtypen</h3>
    <pre id="problemTypesView"></pre>

    <div class="grid-2">
      <div>
        <h3>2.3 Juristische Analyse</h3>
        <pre id="legalAnalysis"></pre>
      </div>
      <div>
        <h3>2.4 Notarielle / Gesetzliche Bewertung</h3>
        <pre id="notarialAnalysis"></pre>
      </div>
    </div>

    <h3>2.5 Lösungsengine (Anspruch, Risiko, Handlung)</h3>
    <pre id="solutionEngine"></pre>

    <h3>2.6 Statistische Übersicht</h3>
    <div id="statsView"></div>

    <h3>2.7 Debug-Ansicht (interne Struktur)</h3>
    <pre id="debugView"></pre>
  </section>
</main>

<script>
  // ------------------------------------------------------------
  // 0. DEMO-DATENBANKEN / MODULE / TAXONOMIEN
  // ------------------------------------------------------------

  // Juristische Problemkategorien mit Keywords
  const problemCategories = [
    { category: "Vertragsrecht", keywords: ["vertrag", "kündigung", "forderung", "zahlung", "schaden", "agb", "haftung"] },
    { category: "Arbeitsrecht", keywords: ["arbeit", "arbeitsvertrag", "kündigung", "lohn", "gehalt", "arbeitgeber", "arbeitnehmer"] },
    { category: "Mietrecht", keywords: ["miete", "wohnung", "vermieter", "mietvertrag", "kündigung mietvertrag"] },
    { category: "Strafrecht", keywords: ["betrug", "strafanzeige", "diebstahl", "ermittlung", "strafverfahren"] },
    { category: "Datenschutz", keywords: ["daten", "dsgvo", "einwilligung", "tracking", "datenschutz", "personenbezogene daten"] },
    { category: "Gesellschaftsrecht", keywords: ["gmbh", "gesellschaft", "anteil", "gesellschafter", "satzung"] },
    { category: "Steuerrecht", keywords: ["steuer", "finanzamt", "umsatzsteuer", "einkommensteuer", "steuerbescheid"] },
    { category: "Sozialrecht", keywords: ["bürgergeld", "sozialamt", "pflege", "hilfe", "hartz", "sgb"] },
    { category: "Familienrecht", keywords: ["scheidung", "sorgerecht", "unterhalt", "ehe", "trennung"] },
    { category: "Erbrecht", keywords: ["erbe", "testament", "nachlass", "erbfolge"] },
    { category: "Notarielle Ansprüche", keywords: ["notar", "beurkundung", "grundbuch", "vollmacht", "immobilie", "grundstück"] },
    { category: "Insolvenzrecht", keywords: ["insolvenz", "insolvenzverfahren", "schuldner", "gläubiger"] },
    { category: "Verwaltungsrecht", keywords: ["verwaltungsakt", "widerspruch", "behörde", "bescheid"] },
    { category: "Europarecht", keywords: ["eu-richtlinie", "eu-verordnung", "eu-recht"] },
    { category: "IT-Recht", keywords: ["it-vertrag", "softwarelizenz", "online-plattform", "cloud", "it-recht"] },
    { category: "Wettbewerbsrecht", keywords: ["wettbewerb", "uwg", "abmahnung", "werbung"] },
    { category: "Markenrecht", keywords: ["marke", "markenschutz", "markenverletzung"] },
    { category: "Patentrecht", keywords: ["patent", "patentanmeldung", "patentverletzung"] },
    { category: "Versicherungsrecht", keywords: ["versicherung", "versicherungsschaden", "police"] },
    { category: "Umweltrecht", keywords: ["umwelt", "emission", "umweltschutz"] },
    { category: "Baurecht", keywords: ["bauantrag", "bauordnung", "baugenehmigung"] },
    { category: "Transportrecht", keywords: ["transport", "fracht", "spedition"] },
    { category: "Handelsrecht", keywords: ["kaufmann", "handelsregister", "hgb"] },
    { category: "Verfassungsrecht", keywords: ["grundrechte", "verfassung", "gg"] },
    { category: "Völkerrecht", keywords: ["staaten", "völkerrecht", "uno"] }
  ];

  // Juristische Regelmodule (vereinfachte Demo)
  const legalRules = {
    "Vertragsrecht": {
      laws: ["BGB §§ 145 ff. (Vertragsschluss)", "BGB Leistungsstörungen", "Schadensersatzrecht"],
      actions: ["Vertragsprüfung durchführen", "Anspruchsgrundlage ermitteln", "Forderung dokumentieren"]
    },
    "Arbeitsrecht": {
      laws: ["KSchG", "BetrVG", "BGB Arbeitsrecht"],
      actions: ["Kündigungsfristen prüfen", "Lohnansprüche analysieren", "Arbeitsvertrag validieren"]
    },
    "Mietrecht": {
      laws: ["BGB Mietrecht", "Mieterschutzvorschriften"],
      actions: ["Mietvertrag prüfen", "Kündigungsgründe analysieren", "Nebenkostenabrechnung prüfen"]
    },
    "Notarielle Ansprüche": {
      laws: ["BeurkG", "BNotO", "Grundbuchordnung", "Erbrecht BGB"],
      actions: ["Beurkundungspflicht prüfen", "Grundbucheintrag analysieren", "Erbschaftsansprüche validieren", "Vollmachten prüfen"]
    },
    "Datenschutz": {
      laws: ["DSGVO", "BDSG", "ePrivacy"],
      actions: ["Datenspeicherung prüfen", "Einwilligungen validieren", "Verarbeitungszwecke analysieren"]
    },
    "Steuerrecht": {
      laws: ["AO", "EStG", "UStG"],
      actions: ["Steuerpflicht ermitteln", "Abgabefristen prüfen", "Finanzielle Forderungen analysieren"]
    },
    "Familienrecht": {
      laws: ["BGB Familienrecht"],
      actions: ["Unterhaltsansprüche prüfen", "Sorgerechtslage analysieren", "Scheidungsfolgen klären"]
    },
    "Erbrecht": {
      laws: ["BGB Erbrecht"],
      actions: ["Testament auslegen", "Erbquoten berechnen", "Pflichtteilsansprüche prüfen"]
    },
    "Strafrecht": {
      laws: ["StGB", "StPO"],
      actions: ["Tatbestände prüfen", "Strafantrag/Strafanzeige bewerten", "Beweislage analysieren"]
    },
    "Gesellschaftsrecht": {
      laws: ["GmbHG", "AktG", "HGB"],
      actions: ["Gesellschaftsvertrag prüfen", "Gesellschafterrechte analysieren", "Registerlage prüfen"]
    }
    // Weitere Kategorien könnten analog ergänzt werden
  };

  // A–Z Problemtypen (vereinfachte Heuristik)
  const problemTypePatterns = [
    { type: "Rechenproblem", keywords: ["berechnen", "rechnen", "summe", "betrag", "zins", "prozent"] },
    { type: "Bewertungsproblem", keywords: ["bewerten", "bewertung", "wert", "angemessen", "angemessenheit"] },
    { type: "Entscheidungsproblem", keywords: ["entscheiden", "entscheidung", "wahl", "option"] },
    { type: "Optimierungsproblem", keywords: ["optimieren", "optimierung", "maximieren", "minimieren"] },
    { type: "Analyseproblem", keywords: ["analysieren", "analyse", "prüfen", "prüfung", "untersuchen"] },
    { type: "Klassifikationsproblem", keywords: ["zuordnen", "klassifizieren", "kategorie", "einordnen"] },
    { type: "Nachweis-/Validierungsproblem", keywords: ["nachweisen", "validieren", "belegen", "nachweis"] },
    { type: "Risiko-/Unsicherheitsproblem", keywords: ["risiko", "wahrscheinlichkeit", "unsicherheit", "risikobewertung"] },
    { type: "Zielerreichungsproblem", keywords: ["ziel", "zielerreichung", "erreichen", "strategie"] },
    { type: "Transformationsproblem", keywords: ["umwandeln", "transformieren", "konvertieren", "überführen"] }
  ];

  // ------------------------------------------------------------
  // 1. DOM-REFERENZEN
  // ------------------------------------------------------------
  const fileInput       = document.getElementById("fileInput");
  const runOcrBtn       = document.getElementById("runOcrBtn");
  const ocrStatus       = document.getElementById("ocrStatus");
  const ocrOutput       = document.getElementById("ocrOutput");
  const analyzeBtn      = document.getElementById("analyzeBtn");
  const analyzeStatus   = document.getElementById("analyzeStatus");
  const problemTags     = document.getElementById("problemTags");
  const legalAnalysis   = document.getElementById("legalAnalysis");
  const notarialAnalysis= document.getElementById("notarialAnalysis");
  const solutionEngine  = document.getElementById("solutionEngine");
  const statsView       = document.getElementById("statsView");
  const debugView       = document.getElementById("debugView");
  const problemTypesView= document.getElementById("problemTypesView");
  const problemList     = document.getElementById("problemList");

  // Validate all required DOM elements exist
  const requiredElements = {
    fileInput, runOcrBtn, ocrStatus, ocrOutput, analyzeBtn, analyzeStatus,
    problemTags, legalAnalysis, notarialAnalysis, solutionEngine, statsView,
    debugView, problemTypesView, problemList
  };
  
  for (const [name, element] of Object.entries(requiredElements)) {
    if (!element) {
      console.error(`Required DOM element missing: ${name}`);
      throw new Error(`DOM element not found: ${name}`);
    }
  }

  let currentFile = null;
  let lastAnalysis = {
    detectedCategories: [],
    problemTypes: [],
    problems: [],
    riskScore: 0
  };

  // ------------------------------------------------------------
  // 2. DATEI-HANDLING & OCR
  // ------------------------------------------------------------
  fileInput.addEventListener("change", (e) => {
    const file = e.target.files[0];
    currentFile = file || null;
    if (!file) {
      ocrStatus.textContent = "Keine Datei ausgewählt.";
      return;
    }
    if (file.name.toLowerCase().endsWith(".pdf")) {
      ocrStatus.textContent = "PDF erkannt – in dieser Demo bitte vorher in Bilder umwandeln (PDF-OCR-Hook vorbereitet).";
    } else {
      ocrStatus.textContent = "Datei bereit. OCR kann gestartet werden.";
    }
  });

  runOcrBtn.addEventListener("click", async () => {
    if (!currentFile) {
      alert("Bitte zuerst eine Datei auswählen.");
      return;
    }
    if (currentFile.name.toLowerCase().endsWith(".pdf")) {
      // In dieser statischen Demo kein vollständiges PDF-OCR, nur Hinweis
      ocrOutput.value = "PDF erkannt. In dieser Demo bitte das PDF vorab in Bilder (PNG/JPG) konvertieren und erneut hochladen.\n\n(Erweiterung: PDF.js + Seitenweise OCR möglich.)";
      ocrStatus.textContent = "PDF-Hinweis ausgegeben.";
      return;
    }

    ocrStatus.textContent = "OCR läuft...";
    runOcrBtn.disabled = true;

    try {
      const { createWorker } = Tesseract;
      const worker = await createWorker("deu+eng");
      const result = await worker.recognize(currentFile);
      await worker.terminate();

      const text = (result.data && result.data.text) ? result.data.text : "";
      ocrOutput.value = text;
      ocrStatus.textContent = "OCR abgeschlossen.";
    } catch (err) {
      console.error(err);
      ocrStatus.textContent = "Fehler bei OCR: " + err.message;
    } finally {
      runOcrBtn.disabled = false;
    }
  });

  // ------------------------------------------------------------
  // 3. TEXTANALYSE: PROBLEMEXTRAKTION, KLASSIFIKATION, MODULE
  // ------------------------------------------------------------
  analyzeBtn.addEventListener("click", () => {
    const text = (ocrOutput.value || "").trim();
    if (!text) {
      analyzeStatus.textContent = "Kein OCR-Text vorhanden.";
      return;
    }
    analyzeStatus.textContent = "Analyse läuft...";
    const analysis = analyzeText(text);
    lastAnalysis = analysis;
    renderAll(analysis);
    analyzeStatus.textContent = "Analyse abgeschlossen.";
  });

  function analyzeText(text) {
    const lowerText = text.toLowerCase();
    const detectedCategories = [];
    const problems = [];

    // 3.1 Juristische Kategorien erkennen
    problemCategories.forEach(pc => {
      const found = pc.keywords.some(kw => lowerText.includes(kw));
      if (found) detectedCategories.push(pc.category);
    });

    // 3.2 Problemstellungen (Sätze mit "berechnen", "prüfen", "entscheiden", etc.)
    const sentences = splitIntoSentences(text);
    let problemCounter = 1;
    sentences.forEach(s => {
      if (/(berechnen|rechnen|prüfen|entscheiden|optimieren|bestimmen|analysieren|bewerten)/i.test(s)) {
        const id = "P" + problemCounter++;
        const types = classifyProblemTypes(s);
        problems.push({
          id,
          original: s.trim(),
          types,
          modules: detectModulesForSentence(s, detectedCategories)
        });
      }
    });

    // Falls keine expliziten Problemstellungen erkannt wurden, eine Gesamtanalyse anlegen
    if (problems.length === 0 && sentences.length > 0) {
      problems.push({
        id: "P1",
        original: "Gesamtanalyse des Dokuments (keine expliziten Aufgabenformulierungen erkannt).",
        types: [{ primary: "Analyseproblem", secondary: ["Klassifikationsproblem", "Transformationsproblem"] }],
        modules: ["Formular-Semantik-Parser", "Datenqualitäts-Regelmodul"]
      });
    }

    // 3.3 A–Z Problemtypen global aggregieren
    const allProblemTypes = [];
    problems.forEach(p => {
      p.types.forEach(t => {
        allProblemTypes.push(t.primary);
        (t.secondary || []).forEach(s => allProblemTypes.push(s));
      });
    });

    // 3.4 Risiko-Score (sehr einfache Demo)
    const riskScore = Math.min(100, detectedCategories.length * 8 + problems.length * 10);

    return {
      detectedCategories,
      problems,
      problemTypes: aggregateCounts(allProblemTypes),
      riskScore
    };
  }

  function splitIntoSentences(text) {
    return text
      .split(/[\.\?\!\n]+/)
      .map(s => s.trim())
      .filter(s => s.length > 0);
  }

  function classifyProblemTypes(sentence) {
    const lower = sentence.toLowerCase();
    const result = [];

    let matched = false;
    problemTypePatterns.forEach(pt => {
      if (pt.keywords.some(kw => lower.includes(kw))) {
        matched = true;
        result.push({ primary: pt.type, secondary: ["Analyseproblem"] });
      }
    });

    if (!matched) {
      result.push({ primary: "Analyseproblem", secondary: ["Klassifikationsproblem"] });
    }
    return result;
  }

  function detectModulesForSentence(sentence, detectedCategories) {
    const lower = sentence.toLowerCase();
    const modules = [];

    if (/(bilanz|gewinn|verlust|zins|steuer|kosten|umsatz)/.test(lower)) {
      modules.push("Finanzformulare-Regelmodul", "Mathematische-Formel-Bibliothek");
    }
    if (/(vertrag|klausel|haftung|kündigung|sla|agb)/.test(lower)) {
      modules.push("Vertragsklausel-Modul", "Juristische-Definitionen-Modul");
    }
    if (/(druck|spannung|kraft|strom|leistung|widerstand|temperatur)/.test(lower)) {
      modules.push("Technische-Berechnungs-Engine", "Mathematische-Formel-Bibliothek");
    }
    if (/(risiko|wahrscheinlichkeit|schaden|unsicherheit)/.test(lower)) {
      modules.push("Risikobewertungs-Matrix", "Compliance-Regelwerk-Engine");
    }
    if (/(daten|dsgvo|datenschutz)/.test(lower)) {
      modules.push("Datenschutz-Compliance-Modul");
    }
    if (modules.length === 0) {
      modules.push("Formular-Semantik-Parser", "Datenqualitäts-Regelmodul");
    }

    // Juristische Kategorien als Module ergänzen
    detectedCategories.forEach(cat => {
      modules.push("Juristisches-Modul: " + cat);
    });

    return Array.from(new Set(modules));
  }

  function aggregateCounts(list) {
    const map = {};
    list.forEach(item => {
      map[item] = (map[item] || 0) + 1;
    });
    return map;
  }

  // ------------------------------------------------------------
  // 4. RENDERING
  // ------------------------------------------------------------
  function renderAll(analysis) {
    renderTags(analysis.detectedCategories);
    renderProblemTypes(analysis.problemTypes);
    renderLegalAnalysis(analysis.detectedCategories);
    renderNotarialAnalysis(analysis.detectedCategories);
    renderSolutionEngine(analysis);
    renderStats(analysis);
    renderDebug(analysis);
    renderProblemList(analysis.problems);
  }

  function renderTags(categories) {
    problemTags.innerHTML = "";
    if (!categories.length) {
      problemTags.innerHTML = "<p class='small'>Keine juristischen Problemklassen erkannt.</p>";
      return;
    }
    categories.forEach(cat => {
      const div = document.createElement("div");
      div.className = "tag";
      div.textContent = cat;
      problemTags.appendChild(div);
    });
  }

  function renderProblemTypes(typeMap) {
    if (!Object.keys(typeMap).length) {
      problemTypesView.textContent = "Keine Problemtypen erkannt.";
      return;
    }
    let out = "Aggregierte A–Z-Problemtypen:\n\n";
    Object.entries(typeMap).forEach(([type, count]) => {
      out += `- ${type}: ${count}\n`;
    });
    problemTypesView.textContent = out;
  }

  function renderLegalAnalysis(categories) {
    let output = "";
    if (!categories.length) {
      output = "Keine juristischen Kernbereiche erkannt.\n";
    } else {
      categories.forEach(cat => {
        const rule = legalRules[cat];
        if (!rule) return;
        output += `=== ${cat} ===\n\n`;
        output += "Gesetzgebungen:\n";
        rule.laws.forEach(law => {
          output += `- ${law}\n`;
        });
        output += "\nPrüfschritte:\n";
        rule.actions.forEach(action => {
          output += `- ${action}\n`;
        });
        output += "\n";
      });
    }
    legalAnalysis.textContent = output || "Keine spezifischen Regelwerke hinterlegt.";
  }

  function renderNotarialAnalysis(categories) {
    let result = "";
    if (categories.includes("Notarielle Ansprüche")) {
      result += "Notarielle Relevanz erkannt.\n\n";
      result += "Mögliche Prüfbereiche:\n";
      result += "- Beurkundungspflicht\n";
      result += "- Grundbuchänderung\n";
      result += "- Erbfolgeregelung\n";
      result += "- Beglaubigung von Vollmachten\n";
      result += "- Gesellschaftsgründung\n";
      result += "- Immobilienübertragung\n\n";
      result += "Erforderliche Nachweise:\n";
      result += "- Personaldokumente\n";
      result += "- Vertragsunterlagen\n";
      result += "- Registerauszüge\n";
      result += "- Eigentumsnachweise\n";
    } else {
      result = "Keine notariellen Kernansprüche explizit erkannt.";
    }
    notarialAnalysis.textContent = result;
  }

  function renderSolutionEngine(analysis) {
    const { detectedCategories, problems, riskScore } = analysis;
    let solution = "";
    solution += "AUTOMATISCHE AUSWERTUNG\n";
    solution += "========================\n\n";
    solution += `Erkannte juristische Problemfelder: ${detectedCategories.length ? detectedCategories.join(", ") : "keine"}\n`;
    solution += `Erkannte Problemstellungen: ${problems.length}\n\n`;

    solution += "Mögliche nächste Schritte:\n";
    if (detectedCategories.includes("Vertragsrecht")) {
      solution += "- Vertrag juristisch prüfen lassen\n";
      solution += "- Forderungsanalyse durchführen\n";
    }
    if (detectedCategories.includes("Arbeitsrecht")) {
      solution += "- Kündigungsfristen prüfen\n";
      solution += "- Arbeitnehmerrechte validieren\n";
    }
    if (detectedCategories.includes("Notarielle Ansprüche")) {
      solution += "- Notartermin vorbereiten\n";
      solution += "- Beurkundungspflicht feststellen\n";
    }
    if (detectedCategories.includes("Datenschutz")) {
      solution += "- DSGVO-Prüfung durchführen\n";
      solution += "- Datenflüsse dokumentieren\n";
    }
    if (!detectedCategories.length) {
      solution += "- Allgemeine rechtliche Einordnung vornehmen\n";
      solution += "- Relevante Rechtsgebiete identifizieren\n";
    }

    solution += "\nRisikobewertung:\n";
    solution += `Gesamtrisiko (heuristisch): ${riskScore}%\n`;
    if (riskScore > 60) {
      solution += "Empfehlung: Sofortige juristische Prüfung und ggf. notarielle Begleitung.\n";
    } else if (riskScore > 30) {
      solution += "Empfehlung: Vertiefte Standardprüfung durch Fachjurist:in.\n";
    } else {
      solution += "Empfehlung: Standardprüfung ausreichend, Monitoring empfohlen.\n";
    }

    solution += "\nSystemische Erweiterungsmöglichkeiten:\n";
    solution += "- KI-Vertragsanalyse\n";
    solution += "- Gesetzesdatenbank-API\n";
    solution += "- Automatische Paragraphenreferenzen\n";
    solution += "- Gerichtsurteil-Matching\n";
    solution += "- Digitale Signaturen\n";
    solution += "- Blockchain-Nachweislogik\n";
    solution += "- Europäische Rechtsräume\n";
    solution += "- Vollständige OCR-Pipeline (inkl. PDF, Handschrift)\n";
    solution += "- NLP-Risikoanalyse\n";
    solution += "- Notarielle Validierungsengine\n";
    solution += "- Behördenrouting\n";
    solution += "- Automatische Formularerstellung\n";
    solution += "- DSGVO-Compliance-Monitoring\n";

    solutionEngine.textContent = solution;
  }

  function renderStats(analysis) {
    const { detectedCategories, problems, problemTypes, riskScore } = analysis;
    let html = "";

    html += "<table>";
    html += "<tr><th>Kennzahl</th><th>Wert</th></tr>";
    html += `<tr><td>Juristische Kategorien</td><td>${detectedCategories.length}</td></tr>`;
    html += `<tr><td>Problemstellungen</td><td>${problems.length}</td></tr>`;
    html += `<tr><td>Risikowert (0–100)</td><td>${riskScore}</td></tr>`;
    html += "</table>";

    if (Object.keys(problemTypes).length) {
      html += "<h4>Problemtypen-Verteilung</h4><ul>";
      Object.entries(problemTypes).forEach(([type, count]) => {
        html += `<li>${type}: ${count}</li>`;
      });
      html += "</ul>";
    }

    statsView.innerHTML = html;
  }

  function renderDebug(analysis) {
    debugView.textContent = JSON.stringify(analysis, null, 2);
  }

  function renderProblemList(problems) {
    if (!problems.length) {
      problemList.innerHTML = "<p class='small'>Keine expliziten Problemstellungen erkannt.</p>";
      return;
    }
    let html = "<table><tr><th>ID</th><th>Problemformulierung</th><th>Typen</th><th>Module</th></tr>";
    problems.forEach(p => {
      const types = p.types.map(t => t.primary).join(", ");
      const mods = p.modules.map(m => `<span class="pill">${m}</span>`).join(" ");
      html += `<tr>
        <td>${p.id}</td>
        <td>${p.original}</td>
        <td>${types}</td>
        <td>${mods}</td>
      </tr>`;
    });
    html += "</table>";
    problemList.innerHTML = html;
  }
</script>
</body>
</html>
```

---

## API & External Dependencies

### Tesseract.js CDN
- **URL**: https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js
- **Version**: 5.x
- **Purpose**: OCR text recognition
- **Languages**: German (deu) + English (eng)
- **Browser Support**: Modern browsers with WebAssembly support

### No Server-Side Dependencies
- Pure client-side application
- No backend required
- No database needed
- No authentication system

---

## Deployment & Setup

### Local Development
1. Clone or copy the project directory
2. Open `index.html` in a modern browser
3. Or use a local server:
   ```bash
   python -m http.server 8080
   # or
   npx serve
   ```

### Production Deployment
- **Static Hosting**: Any static file hosting service
  - Netlify, Vercel, GitHub Pages, AWS S3 + CloudFront
- **CDN**: Tesseract.js loads from public CDN
- **No Build Process**: Single HTML file, no compilation needed

### Browser Compatibility
- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Opera 76+

---

## Testing & Validation

### Manual Testing Checklist
- [ ] File upload (PNG, JPG)
- [ ] OCR processing with Tesseract.js
- [ ] Text analysis with legal category detection
- [ ] Problem type classification
- [ ] Legal rule lookup
- [ ] Risk score calculation
- [ ] Solution engine output
- [ ] Statistical overview rendering
- [ ] Debug view JSON output
- [ ] PDF handling guidance

### Error Scenarios Handled
- Missing file selection
- PDF upload (demo limitation)
- OCR processing errors
- Empty text analysis
- Missing DOM elements (validation)

### Mathematical Validation
- Risk score: `Math.min(100, detectedCategories.length * 8 + problems.length * 10)`
  - Maximum: 100 (capped)
  - Categories: 8 points each
  - Problems: 10 points each
- Counter increments: `problemCounter++` (verified)
- Array operations: All standard JavaScript array methods (verified)

---

## Future Extensions

### Planned Features
1. **PDF OCR Integration**
   - PDF.js for PDF rendering
   - Page-by-page OCR processing
   - Multi-page document handling

2. **Enhanced NLP**
   - Machine learning-based classification
   - Named entity recognition
   - Sentiment analysis

3. **Legal Database API**
   - German law database integration
   - Real-time paragraph references
   - Court decision matching

4. **User Management**
   - Authentication system
   - Document history
   - Collaboration features

5. **Export Options**
   - PDF report generation
   - Word document export
   - JSON data export

6. **Multi-language Support**
   - English interface
   - Additional OCR languages
   - International law databases

### Technical Improvements
- Progressive Web App (PWA) capabilities
- Offline support with Service Workers
- IndexedDB for local storage
- Web Workers for parallel processing
- TypeScript migration for type safety

---

## Maintenance & Support

### Code Quality
- **Lines of Code**: 706 (single file)
- **Functions**: 12 main functions
- **Data Structures**: 3 main arrays/objects
- **Event Listeners**: 2 (file input, OCR button, analyze button)

### Performance Considerations
- OCR processing: Browser-based, may be slow for large documents
- Memory: In-memory data storage (no persistence)
- Network: Single CDN dependency for Tesseract.js

### Security Notes
- Client-side only (no server-side processing)
- No data transmission to external servers (except CDN)
- No authentication required
- Suitable for sensitive documents (local processing)

---

## Contact & Support

**Project Status**: Production Ready (Demo Version)  
**Last Updated**: 2026-05-19  
**Version**: 1.0  
**License**: Proprietary (Internal Use)

---

## Appendix: Quick Reference

### Key Functions
- `analyzeText(text)`: Main analysis pipeline
- `classifyProblemTypes(sentence)`: Problem type classification
- `detectModulesForSentence(sentence, categories)`: Module recommendation
- `renderAll(analysis)`: UI update orchestration

### Data Structures
- `problemCategories`: 25 legal categories with keywords
- `legalRules`: 10 legal rule sets with laws and actions
- `problemTypePatterns`: 10 A-Z problem type patterns

### Risk Score Formula
```
riskScore = min(100, (categories × 8) + (problems × 10))
```

---

**End of Developer Documentation**