
    <!DOCTYPE html>
    <html lang="de">
    <head>
      <meta charset="UTF-8">
      <title>BreakPilot – Arbeitsblatt Studio</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="/static/css/studio.css">
    </head>
    <body>
      <div class="app-root">
        <header class="topbar">
          <div class="brand">
            <div class="brand-logo">BP</div>
            <div>
              <div class="brand-text-main">BreakPilot</div>
              <div class="brand-text-sub">Studio</div>
            </div>
          </div>
          <nav class="top-nav" style="display:none;">
            <div class="top-nav-item active" data-screen="1"></div>
            <div class="top-nav-item" data-screen="2"></div>
          </nav>
          <div class="top-actions">
            <div class="language-selector">
              <select id="language-select" class="lang-select">
                <option value="de">🇩🇪 Deutsch</option>
                <option value="tr">🇹🇷 Türkçe</option>
                <option value="ar">🇸🇦 العربية</option>
                <option value="ru">🇷🇺 Русский</option>
                <option value="uk">🇺🇦 Українська</option>
                <option value="pl">🇵🇱 Polski</option>
                <option value="en">🇬🇧 English</option>
              </select>
            </div>
            <button class="theme-toggle" id="theme-toggle" title="Dark/Light Mode">
              <span class="theme-toggle-icon" id="theme-icon">🌙</span>
              <span id="theme-label">Dark</span>
            </button>
            <button class="btn btn-sm btn-ghost" id="btn-admin" title="Admin Panel">⚙️</button>
            <button class="btn btn-sm btn-ghost" id="btn-login" data-i18n="login">Login / Anmeldung</button>
            <!-- Notification Bell (shown when logged in) -->
            <div class="notification-bell" id="notification-bell">
              <button class="notification-bell-btn" id="notification-bell-btn" title="Benachrichtigungen">
                🔔
              </button>
              <span class="notification-badge hidden" id="notification-badge">0</span>
              <div class="notification-panel" id="notification-panel">
                <div class="notification-panel-header">
                  <span class="notification-panel-title">Benachrichtigungen</span>
                  <div class="notification-panel-actions">
                    <button class="notification-panel-action" onclick="markAllNotificationsRead()" title="Alle als gelesen markieren">✓ Alle</button>
                    <button class="notification-panel-action" onclick="showNotificationPreferences()" title="Einstellungen">⚙️</button>
                  </div>
                </div>
                <div class="notification-list" id="notification-list">
                  <div class="notification-empty">
                    <div class="notification-empty-icon">🔔</div>
                    <div>Keine Benachrichtigungen</div>
                  </div>
                </div>
                <div class="notification-footer">
                  <button class="notification-footer-btn" onclick="loadMoreNotifications()">Mehr laden</button>
                </div>
              </div>
            </div>
            <!-- User Dropdown (shown when logged in) -->
            <div class="auth-user-dropdown">
              <button class="auth-user-btn" id="auth-user-btn">
                <div class="auth-user-avatar">BP</div>
                <span>▼</span>
              </button>
              <div class="auth-user-menu" id="auth-user-menu">
                <div class="auth-user-menu-header">
                  <div class="auth-user-menu-name">Benutzer</div>
                  <div class="auth-user-menu-email">user@example.com</div>
                </div>
                <button class="auth-user-menu-item" onclick="showProfileModal()">👤 Profil</button>
                <button class="auth-user-menu-item" onclick="showSessionsModal()">🔐 Aktive Sitzungen</button>
                <button class="auth-user-menu-item danger" onclick="logout()">🚪 Abmelden</button>
              </div>
            </div>
            <div class="pill" data-i18n="mvp_local">MVP · Lokal auf deinem Mac</div>
          </div>
        </header>

        <div class="main-layout">
          <aside class="sidebar">
            <!-- UNTERRICHT -->
            <div>
              <div class="sidebar-section-title">Unterricht</div>
              <div class="sidebar-menu">
                <div class="sidebar-item active" id="sidebar-studio" onclick="showStudioPanel()">
                  <div class="sidebar-item-label">
                    <span>Arbeitsblatt-Studio</span>
                  </div>
                  <div class="sidebar-item-badge">aktiv</div>
                </div>
              </div>
              <!-- Sub-Navigation für Arbeitsblatt-Studio -->
              <div class="sidebar-sub-menu" id="studio-sub-menu">
                <div class="sidebar-sub-item active" id="sub-worksheets" onclick="showWorksheetTab()">
                  Arbeitsblätter
                </div>
                <div class="sidebar-sub-item" id="sub-tiles" onclick="showTilesTab()">
                  Lernkacheln
                </div>
              </div>
              <div class="sidebar-menu">
                <div class="sidebar-item" id="sidebar-correction" onclick="showCorrectionPanel()">
                  <div class="sidebar-item-label">
                    <span>Klausur-Korrektur</span>
                  </div>
                  <div class="sidebar-item-badge" style="background: #f59e0b;">Phase 1</div>
                </div>
              </div>
            </div>

            <!-- LEISTUNGSBEWERTUNG -->
            <div>
              <div class="sidebar-section-title">Leistungsbewertung</div>
              <div class="sidebar-menu">
                <div class="sidebar-item" id="sidebar-exams" onclick="showExamsPanel()">
                  <div class="sidebar-item-label">
                    <span>Klausuren & Tests</span>
                  </div>
                  <div class="sidebar-item-badge" style="background: #6366f1;">neu</div>
                </div>
                <div class="sidebar-item" id="sidebar-grades" onclick="showGradesPanel()">
                  <div class="sidebar-item-label">
                    <span>Notenspiegel</span>
                  </div>
                </div>
                <div class="sidebar-item" id="sidebar-gradebook" onclick="showGradebookPanel()">
                  <div class="sidebar-item-label">
                    <span>Klassenbuch</span>
                  </div>
                </div>
                <div class="sidebar-item" id="sidebar-certificates" onclick="showCertificatesPanel()">
                  <div class="sidebar-item-label">
                    <span>Zeugnisse</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- VERWALTUNG -->
            <div>
              <div class="sidebar-section-title">Verwaltung</div>
              <div class="sidebar-menu">
                <div class="sidebar-item" id="sidebar-classes" onclick="showClassesPanel()">
                  <div class="sidebar-item-label">
                    <span>Klassen & Schüler</span>
                  </div>
                </div>
                <div class="sidebar-item" id="sidebar-subjects" onclick="showSubjectsPanel()">
                  <div class="sidebar-item-label">
                    <span>Fächer</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- KOMMUNIKATION -->
            <div>
              <div class="sidebar-section-title">Elternkommunikation</div>
              <div class="sidebar-menu">
                <div class="sidebar-item" id="sidebar-messenger" onclick="showMessengerPanel()">
                  <div class="sidebar-item-label">
                    <span>Matrix Messenger</span>
                  </div>
                  <div class="sidebar-item-badge" style="background: #10b981;">aktiv</div>
                </div>
                <div class="sidebar-item" id="sidebar-video" onclick="showVideoPanel()">
                  <div class="sidebar-item-label">
                    <span>Jitsi Videokonferenz</span>
                  </div>
                </div>
                <div class="sidebar-item" id="sidebar-letters" onclick="showLettersPanel()">
                  <div class="sidebar-item-label">
                    <span>Elternbriefe</span>
                  </div>
                  <div class="sidebar-item-badge">neu</div>
                </div>
              </div>
            </div>

            <div>
              <div class="sidebar-section-title">Lerneinheiten (lokal)</div>
              <div class="unit-form">
                <input class="unit-input" id="unit-student" placeholder="Schüler/in">
                <input class="unit-input" id="unit-subject" placeholder="Fach">
                <input class="unit-input" id="unit-grade" placeholder="Klasse (z.B. 7a)">
                <input class="unit-input" id="unit-title" placeholder="Lerneinheit / Thema">
                <button type="button" class="btn btn-sm btn-primary btn-unit-add" id="btn-add-unit">Anlegen</button>
                <ul class="unit-list" id="unit-list"></ul>
   	        <button type="button" class="btn btn-sm btn-ghost" id="btn-attach-current-to-lu">Aktuelles Arbeitsblatt hinzufügen</button>
              </div>
            </div>

            <div>
              <div class="sidebar-section-title">Dateien hochladen</div>
              <div class="upload-inline">
                <input type="file" id="file-input" multiple>
                <button type="button" class="btn btn-sm btn-primary" id="btn-upload-inline">Hochladen</button>
              </div>
            </div>

            <div>
              <div class="sidebar-section-title">Speicherort</div>
              <div class="sidebar-footer">
                CI / Brandbook: Farben kommen bereits aus Variablen und sind später leicht anpassbar.
              </div>
            </div>
          </aside>

          <main class="content">
            <!-- Screen 1: Eingangsdateien & Alt/Neu-Vergleich -->
            <section class="panel" id="panel-compare" style="display:flex;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Arbeitsblätter & Vergleich</div>
                  <div class="panel-subtitle">Links Scan · Rechts neu aufgebautes Arbeitsblatt</div>
                  <div class="panel-subtitle" id="unit-heading-screen1">Keine Lerneinheit ausgewählt</div>
		</div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <button type="button" class="btn btn-sm btn-primary" id="btn-toggle-filter" style="font-size: 10px;">
                    Nur Lerneinheit
                  </button>
                  <span class="small-pill" id="eingang-count">0 Dateien</span>
                </div>
              </div>

              <div class="panel-body">
                <ul class="file-list" id="eingang-list"></ul>

                <div class="inline-process">
                  <button type="button" class="btn btn-sm btn-primary" id="btn-full-process">
                    Arbeitsblätter neu aufbauen
                  </button>
                </div>

                <div class="preview-container" id="preview-container">
                  <div class="preview-placeholder">
                    Lade Arbeitsblätter hoch und klicke auf „Arbeitsblätter neu aufbauen".<br>
                    Dann kannst du mit den Pfeilen durch die Scans und die bereinigten Versionen blättern.<br>
                    Mit Doppelklick öffnest du das Dokument im Vollbild.
                  </div>
                </div>
              </div>
            </section>

            <!-- Screen 2: Kacheln -->
              <section class="panel" id="panel-tiles" style="display:none;">
              <div class="panel-tools-header">
                <div>
                  <div class="panel-title"><span id="unit-heading-screen2">Keine Lerneinheit ausgewählt</span> – Bitte wähle Deine Lernkacheln aus, die Du verwenden möchtest.</div>
		</div>
              </div>

              <div class="panel-body">
                <div class="card-toggle-bar">
                  <button class="toggle-pill active" data-tile="mindmap">Mindmap</button>
                  <button class="toggle-pill active" data-tile="qa">Frage–Antwort</button>
                  <button class="toggle-pill active" data-tile="mc">Multiple Choice</button>
                  <button class="toggle-pill active" data-tile="cloze">Lückentext</button>
                </div>

                <div class="cards-grid">
                  <!-- Mindmap Lernposter -->
                  <div class="card card-half" data-tile="mindmap">
                    <div class="card-header">
                      <div class="card-title">Mindmap Lernposter</div>
                      <div class="card-badge" id="mindmap-badge">Bereit</div>
                    </div>
                    <div class="card-body">
                      <div>Erstellt eine kindgerechte Mindmap mit dem Hauptthema in der Mitte und allen Fachbegriffen in farbigen Kategorien. Perfekt zum Ausdrucken als A3-Poster!</div>
                      <div id="mindmap-preview" class="mindmap-preview"></div>
                      <div class="card-actions" style="flex-wrap:wrap;gap:6px;">
                        <button class="btn btn-sm btn-primary" id="btn-mindmap-generate">Mindmap erstellen</button>
                        <button class="btn btn-sm btn-ghost" id="btn-mindmap-show" style="display:none;">Ansehen</button>
                        <button class="btn btn-sm btn-ghost" id="btn-mindmap-print" style="display:none;">A3 Drucken</button>
                      </div>
                    </div>
                  </div>

                  <!-- Frage–Antwort mit Leitner-System -->
                  <div class="card card-half" data-tile="qa">
                    <div class="card-header">
                      <div class="card-title">Frage–Antwort-Blatt</div>
                      <div class="card-badge" id="qa-badge">Bereit</div>
                    </div>
                    <div class="card-body">
                      <div>Frage-Antwort-Paare mit Leitner-Box System. Wiederholung nach Schwierigkeitsgrad für nachhaltiges Lernen.</div>
                      <div id="qa-preview" class="mc-preview"></div>
                      <div class="card-actions" style="flex-wrap:wrap;gap:6px;">
                        <button class="btn btn-sm btn-primary" id="btn-qa-generate">Q&A generieren</button>
                        <button class="btn btn-sm btn-ghost" id="btn-qa-learn" style="display:none;">Lernen starten</button>
                        <button class="btn btn-sm btn-ghost" id="btn-qa-print" style="display:none;">Drucken</button>
                      </div>
                    </div>
                  </div>

                  <!-- Multiple Choice -->
                  <div class="card card-half" data-tile="mc">
                    <div class="card-header">
                      <div class="card-title">Multiple Choice Test</div>
                      <div class="card-badge" id="mc-badge">Bereit</div>
                    </div>
                    <div class="card-body">
                      <div>Erzeugt passende MC-Aufgaben zur ursprünglichen Schwierigkeit (z. B. Klasse 7), ohne das Niveau zu verändern.</div>
                      <div id="mc-preview" class="mc-preview"></div>
                      <div class="card-actions" style="flex-wrap:wrap;gap:6px;">
                        <button class="btn btn-sm btn-primary" id="btn-mc-generate">MC generieren</button>
                        <button class="btn btn-sm btn-ghost" id="btn-mc-show" style="display:none;">Quiz starten</button>
                        <button class="btn btn-sm btn-ghost" id="btn-mc-print" style="display:none;">Drucken</button>
                      </div>
                    </div>
                  </div>

                  <!-- Lückentext -->
                  <div class="card card-half" data-tile="cloze">
                    <div class="card-header">
                      <div class="card-title">Lückentext</div>
                      <div class="card-badge" id="cloze-badge">Bereit</div>
                    </div>
                    <div class="card-body">
                      <div>Erzeugt Lückentexte mit mehreren sinnvollen Lücken pro Satz. Inkl. Übersetzung für Eltern.</div>
                      <div class="cloze-language-select" style="margin-top:8px;">
                        <label style="font-size:11px;color:var(--bp-text-muted);">Übersetzung:</label>
                        <select id="cloze-language" class="unit-input" style="padding:4px 8px;font-size:11px;width:auto;">
                          <option value="tr">Türkisch</option>
                          <option value="ar">Arabisch</option>
                          <option value="ru">Russisch</option>
                          <option value="uk">Ukrainisch</option>
                          <option value="pl">Polnisch</option>
                          <option value="en">Englisch</option>
                          <option value="fr">Französisch</option>
                          <option value="es">Spanisch</option>
                        </select>
                      </div>
                      <div id="cloze-preview" class="cloze-preview"></div>
                      <div class="card-actions" style="flex-wrap:wrap;gap:6px;">
                        <button class="btn btn-sm btn-primary" id="btn-cloze-generate">Lückentext generieren</button>
                        <button class="btn btn-sm btn-ghost" id="btn-cloze-show" style="display:none;">Übung starten</button>
                        <button class="btn btn-sm btn-ghost" id="btn-cloze-print" style="display:none;">Drucken</button>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </section>

            <!-- Screen 4: Klausur-Korrektur -->
            <section class="panel" id="panel-correction" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Klausur-Korrektur</div>
                  <div class="panel-subtitle">OCR, Bewertung & Feedback - Phase 1: Training</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <span class="small-pill" id="correction-status" style="background: #f59e0b;">In Entwicklung</span>
                </div>
              </div>

              <div class="panel-body" style="display: flex; gap: 20px; height: calc(100vh - 220px);">
                <!-- Left: Upload & Exam List -->
                <div style="width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <!-- Upload Area -->
                  <div class="card" style="padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Klausur hochladen</div>
                    <div style="border: 2px dashed var(--bp-border); border-radius: 8px; padding: 24px; text-align: center; cursor: pointer;"
                         onclick="document.getElementById('exam-file-input').click()">
                      <div style="font-size: 32px; margin-bottom: 8px;">📄</div>
                      <div style="color: var(--bp-text-muted);">Klausur-Scans hochladen</div>
                      <div style="font-size: 12px; color: var(--bp-text-muted);">PDF, JPG, PNG (max 50MB)</div>
                    </div>
                    <input type="file" id="exam-file-input" multiple accept=".pdf,.jpg,.jpeg,.png" style="display: none;" onchange="handleExamUpload(event)">

                    <div style="margin-top: 12px;">
                      <select class="unit-input" id="exam-subject" style="width: 100%; margin-bottom: 8px;">
                        <option value="">Fach auswahlen...</option>
                        <option value="mathematik">Mathematik</option>
                        <option value="deutsch">Deutsch</option>
                        <option value="englisch">Englisch</option>
                        <option value="physik">Physik</option>
                        <option value="chemie">Chemie</option>
                        <option value="biologie">Biologie</option>
                        <option value="geschichte">Geschichte</option>
                        <option value="erdkunde">Erdkunde</option>
                      </select>
                      <input class="unit-input" id="exam-class" placeholder="Klasse (z.B. 7a)" style="width: 100%; margin-bottom: 8px;">
                      <input class="unit-input" id="exam-title" placeholder="Titel (z.B. 2. Klassenarbeit)" style="width: 100%;">
                    </div>
                  </div>

                  <!-- Exam List -->
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600; display: flex; justify-content: space-between;">
                      <span>Meine Klausuren</span>
                      <span class="small-pill" id="exam-count">0</span>
                    </div>
                    <div id="exam-list" style="flex: 1; overflow-y: auto; padding: 8px;">
                      <div style="text-align: center; color: var(--bp-text-muted); padding: 20px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📋</div>
                        <div>Noch keine Klausuren</div>
                        <div style="font-size: 12px;">Lade Scans hoch um zu starten</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Center: Processing & Preview -->
                <div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
                  <!-- Processing Pipeline -->
                  <div class="card" style="padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Verarbeitungs-Pipeline</div>
                    <div style="display: flex; gap: 12px; align-items: center;">
                      <div class="pipeline-step" id="step-upload">
                        <div class="pipeline-icon">📤</div>
                        <div class="pipeline-label">Upload</div>
                      </div>
                      <div class="pipeline-arrow">→</div>
                      <div class="pipeline-step" id="step-preprocess">
                        <div class="pipeline-icon">🔧</div>
                        <div class="pipeline-label">Vorverarbeitung</div>
                      </div>
                      <div class="pipeline-arrow">→</div>
                      <div class="pipeline-step" id="step-ocr">
                        <div class="pipeline-icon">👁</div>
                        <div class="pipeline-label">OCR</div>
                      </div>
                      <div class="pipeline-arrow">→</div>
                      <div class="pipeline-step" id="step-segment">
                        <div class="pipeline-icon">📐</div>
                        <div class="pipeline-label">Segmentierung</div>
                      </div>
                      <div class="pipeline-arrow">→</div>
                      <div class="pipeline-step" id="step-grade">
                        <div class="pipeline-icon">✏️</div>
                        <div class="pipeline-label">Bewertung</div>
                      </div>
                      <div class="pipeline-arrow">→</div>
                      <div class="pipeline-step" id="step-review">
                        <div class="pipeline-icon">👀</div>
                        <div class="pipeline-label">Review</div>
                      </div>
                    </div>
                    <div style="margin-top: 12px;">
                      <div class="progress-bar" style="height: 8px; background: var(--bp-border); border-radius: 4px; overflow: hidden;">
                        <div id="pipeline-progress" style="width: 0%; height: 100%; background: #10b981; transition: width 0.3s;"></div>
                      </div>
                      <div style="display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--bp-text-muted);">
                        <span id="pipeline-status">Warte auf Upload...</span>
                        <span id="pipeline-percent">0%</span>
                      </div>
                    </div>
                  </div>

                  <!-- Preview Area -->
                  <div class="card" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); display: flex; justify-content: space-between; align-items: center;">
                      <span style="font-weight: 600;">Vorschau & Ergebnisse</span>
                      <div style="display: flex; gap: 8px;">
                        <button class="btn btn-sm btn-ghost" onclick="prevExamPage()" title="Vorige Seite">◀</button>
                        <span id="exam-page-indicator">Seite 1/1</span>
                        <button class="btn btn-sm btn-ghost" onclick="nextExamPage()" title="Nachste Seite">▶</button>
                      </div>
                    </div>
                    <div id="exam-preview" style="flex: 1; display: flex; justify-content: center; align-items: center; background: var(--bp-bg-secondary); overflow: auto;">
                      <div style="text-align: center; color: var(--bp-text-muted);">
                        <div style="font-size: 48px; margin-bottom: 12px;">📝</div>
                        <div style="font-size: 18px; margin-bottom: 8px;">Klausur-Korrektur</div>
                        <div style="font-size: 14px;">Wahle eine Klausur aus oder lade neue Scans hoch</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Right: Results & Actions -->
                <div style="width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <!-- OCR Results -->
                  <div class="card" style="padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">OCR-Ergebnisse</div>
                    <div id="ocr-results" style="max-height: 200px; overflow-y: auto; font-size: 13px; color: var(--bp-text-muted);">
                      <div style="text-align: center; padding: 20px;">
                        <div>Noch keine OCR-Ergebnisse</div>
                      </div>
                    </div>
                  </div>

                  <!-- Grading -->
                  <div class="card" style="flex: 1; padding: 16px; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Bewertung</div>
                    <div id="grading-results" style="flex: 1; overflow-y: auto;">
                      <div style="text-align: center; padding: 20px; color: var(--bp-text-muted);">
                        <div>Bewertung erfolgt nach OCR</div>
                      </div>
                    </div>
                    <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bp-border);">
                      <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span>Gesamt:</span>
                        <span id="total-points" style="font-weight: 600;">--/-- Punkte</span>
                      </div>
                      <div style="display: flex; justify-content: space-between;">
                        <span>Note:</span>
                        <span id="calculated-grade" style="font-weight: 600; font-size: 18px;">--</span>
                      </div>
                    </div>
                  </div>

                  <!-- Actions -->
                  <div class="card" style="padding: 16px;">
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                      <button class="btn btn-primary" id="btn-start-correction" onclick="startCorrectionJob()" disabled>
                        Korrektur starten
                      </button>
                      <button class="btn btn-ghost" id="btn-export-results" onclick="exportCorrectionResults()" disabled>
                        Ergebnisse exportieren
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- Screen 5: Elternbriefe -->
            <section class="panel" id="panel-letters" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Elternbriefe</div>
                  <div class="panel-subtitle">Briefe erstellen, Vorlagen verwalten und versenden</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <button class="btn btn-sm btn-primary" onclick="createNewLetter()">+ Neuer Brief</button>
                </div>
              </div>
              <div class="panel-body" style="display: flex; gap: 20px; height: calc(100vh - 220px);">
                <!-- Left: Templates & Recent Letters -->
                <div style="width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <!-- Templates -->
                  <div class="card" style="padding: 12px;">
                    <div style="font-weight: 600; margin-bottom: 10px;">Vorlagen</div>
                    <div style="display: flex; flex-direction: column; gap: 6px;">
                      <div class="template-item" onclick="loadLetterTemplate('klassenfahrt')">
                        <span>🏕️</span> Klassenfahrt
                      </div>
                      <div class="template-item" onclick="loadLetterTemplate('krankheit')">
                        <span>🏥</span> Krankmeldung
                      </div>
                      <div class="template-item" onclick="loadLetterTemplate('elternabend')">
                        <span>📅</span> Elternabend
                      </div>
                      <div class="template-item" onclick="loadLetterTemplate('zeugnis')">
                        <span>📝</span> Zeugnis-Info
                      </div>
                      <div class="template-item" onclick="loadLetterTemplate('allgemein')">
                        <span>📄</span> Allgemein
                      </div>
                    </div>
                  </div>
                  <!-- Recent Letters -->
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600;">
                      Letzte Briefe
                    </div>
                    <div id="recent-letters-list" style="flex: 1; overflow-y: auto; padding: 8px;">
                      <div class="letter-item" onclick="loadLetter('letter-1')">
                        <div class="letter-info">
                          <div class="letter-title">Klassenfahrt Harz</div>
                          <div class="letter-date">15.12.2024</div>
                        </div>
                        <div class="letter-status sent">Versendet</div>
                      </div>
                      <div class="letter-item" onclick="loadLetter('letter-2')">
                        <div class="letter-info">
                          <div class="letter-title">Elternabend Einladung</div>
                          <div class="letter-date">10.12.2024</div>
                        </div>
                        <div class="letter-status draft">Entwurf</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Center: Letter Editor -->
                <div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border);">
                      <input type="text" id="letter-subject" class="unit-input" placeholder="Betreff des Briefes..." style="width: 100%; font-size: 16px; font-weight: 600;">
                    </div>
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); display: flex; gap: 8px; flex-wrap: wrap;">
                      <select id="letter-class" class="unit-input" style="width: auto;">
                        <option value="">Klasse wählen...</option>
                        <option value="7a">Klasse 7a</option>
                        <option value="7b">Klasse 7b</option>
                        <option value="8a">Klasse 8a</option>
                      </select>
                      <select id="letter-language" class="unit-input" style="width: auto;">
                        <option value="de">Deutsch</option>
                        <option value="de-tr">Deutsch + Türkisch</option>
                        <option value="de-ar">Deutsch + Arabisch</option>
                        <option value="de-uk">Deutsch + Ukrainisch</option>
                      </select>
                      <button class="btn btn-sm btn-ghost" onclick="aiImproveLetter()">✨ KI verbessern</button>
                    </div>
                    <textarea id="letter-content" style="flex: 1; padding: 16px; border: none; resize: none; font-family: inherit; font-size: 14px; line-height: 1.6; background: var(--bp-bg);" placeholder="Liebe Eltern,

schreiben Sie hier Ihren Brief...

Mit freundlichen Grüßen"></textarea>
                    <div style="padding: 12px; border-top: 1px solid var(--bp-border); display: flex; justify-content: space-between; align-items: center;">
                      <div style="display: flex; gap: 8px;">
                        <button class="btn btn-sm btn-ghost" onclick="previewLetter()">👁️ Vorschau</button>
                        <button class="btn btn-sm btn-ghost" onclick="saveDraft()">💾 Speichern</button>
                      </div>
                      <div style="display: flex; gap: 8px;">
                        <button class="btn btn-sm btn-ghost" onclick="printLetter()">🖨️ Drucken</button>
                        <button class="btn btn-sm btn-primary" onclick="sendLetter()">📧 Versenden</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Right: Recipients & Preview -->
                <div style="width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Empfänger</div>
                    <div id="letter-recipients" style="font-size: 13px;">
                      <div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--bp-border);">
                        <span>Gesamt</span>
                        <span id="recipients-total">0</span>
                      </div>
                      <div style="display: flex; justify-content: space-between; padding: 6px 0;">
                        <span>Mit E-Mail</span>
                        <span id="recipients-email">0</span>
                      </div>
                    </div>
                  </div>
                  <div class="card" style="flex: 1; padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Brief-Vorschau</div>
                    <div id="letter-preview-mini" style="font-size: 11px; color: var(--bp-text-muted); line-height: 1.5;">
                      Wählen Sie eine Vorlage oder schreiben Sie einen Brief, um die Vorschau zu sehen.
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- Screen 6: Jitsi Videokonferenz -->
            <section class="panel" id="panel-video" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Jitsi Videokonferenz</div>
                  <div class="panel-subtitle">Elterngespräche und Klassenkonferenzen</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <span class="small-pill" id="jitsi-connection-status" style="background: #10b981;">Bereit</span>
                </div>
              </div>
              <div class="panel-body" style="display: flex; gap: 20px; height: calc(100vh - 220px);">
                <!-- Left: Meeting Controls -->
                <div style="width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="padding: 12px;">
                    <div style="font-weight: 600; margin-bottom: 10px;">Meeting starten</div>
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                      <input type="text" id="meeting-name" class="unit-input" placeholder="Meeting-Name (optional)">
                      <button class="btn btn-sm btn-primary" onclick="startInstantMeeting()" style="width: 100%;">
                        <span style="margin-right: 6px;">📹</span> Sofort starten
                      </button>
                    </div>
                  </div>
                  <div class="card" style="padding: 12px;">
                    <div style="font-weight: 600; margin-bottom: 10px;">Geplante Meetings</div>
                    <div id="scheduled-meetings" style="display: flex; flex-direction: column; gap: 8px;">
                      <div class="meeting-item" onclick="joinScheduledMeeting('m1')">
                        <div class="meeting-info">
                          <div class="meeting-title">Elterngespräch Fam. Schmidt</div>
                          <div class="meeting-time">Di 16:00</div>
                        </div>
                        <button class="btn btn-sm btn-ghost">Beitreten</button>
                      </div>
                      <div class="meeting-item" onclick="joinScheduledMeeting('m2')">
                        <div class="meeting-info">
                          <div class="meeting-title">Elternvertreter 7a</div>
                          <div class="meeting-time">Mo 18:00</div>
                        </div>
                        <button class="btn btn-sm btn-ghost">Beitreten</button>
                      </div>
                    </div>
                  </div>
                  <div class="card" style="padding: 12px;">
                    <div style="font-weight: 600; margin-bottom: 10px;">Meeting planen</div>
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                      <input type="text" id="schedule-title" class="unit-input" placeholder="Titel">
                      <input type="datetime-local" id="schedule-datetime" class="unit-input">
                      <select id="schedule-participants" class="unit-input">
                        <option value="">Teilnehmer wählen...</option>
                        <option value="class-7a">Klasse 7a (alle Eltern)</option>
                        <option value="elternvertreter">Elternvertreter</option>
                        <option value="einzeln">Einzelne Eltern</option>
                      </select>
                      <button class="btn btn-sm btn-ghost" onclick="scheduleMeeting()" style="width: 100%;">
                        📅 Meeting planen
                      </button>
                    </div>
                  </div>
                </div>
                <!-- Center: Jitsi Video Container -->
                <div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" id="jitsi-main-container" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                    <div id="jitsi-placeholder" style="flex: 1; display: flex; justify-content: center; align-items: center; background: #1a1a2e;">
                      <div style="text-align: center; color: #888;">
                        <div style="font-size: 64px; margin-bottom: 16px;">📹</div>
                        <div style="font-size: 18px; margin-bottom: 8px;">Keine aktive Videokonferenz</div>
                        <div style="font-size: 13px;">Starten Sie ein Meeting oder treten Sie einem bei</div>
                      </div>
                    </div>
                    <div id="jitsi-iframe-container" style="flex: 1; display: none;">
                      <!-- Jitsi iframe wird hier eingefügt -->
                    </div>
                    <div id="jitsi-controls" style="padding: 12px; border-top: 1px solid var(--bp-border); display: none; justify-content: center; gap: 12px;">
                      <button class="btn btn-sm btn-ghost" onclick="toggleJitsiMute()">🔇 Stumm</button>
                      <button class="btn btn-sm btn-ghost" onclick="toggleJitsiVideo()">📷 Video</button>
                      <button class="btn btn-sm btn-ghost" onclick="shareJitsiScreen()">🖥️ Teilen</button>
                      <button class="btn btn-sm btn-ghost" onclick="copyMeetingLink()">🔗 Link kopieren</button>
                      <button class="btn btn-sm btn-danger" onclick="leaveJitsiMeeting()">🚪 Verlassen</button>
                    </div>
                  </div>
                </div>
                <!-- Right: Participants & Chat -->
                <div style="width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Teilnehmer</div>
                    <div id="jitsi-participants" style="font-size: 13px; color: var(--bp-text-muted);">
                      Keine aktive Konferenz
                    </div>
                  </div>
                  <div class="card" style="flex: 1; padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Meeting-Chat</div>
                    <div id="jitsi-chat" style="flex: 1; font-size: 12px; color: var(--bp-text-muted);">
                      Chat ist während der Konferenz verfügbar
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- Screen 7: Matrix Messenger -->
            <section class="panel" id="panel-messenger" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Matrix Messenger</div>
                  <div class="panel-subtitle">Sichere Kommunikation mit Eltern</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <span class="small-pill" id="comm-status-pill" style="background: #10b981;">Verbunden</span>
                </div>
              </div>

              <div class="panel-body" style="display: flex; gap: 20px; height: calc(100vh - 220px);">
                <!-- Left: Room/Chat List -->
                <div style="width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <!-- Quick Actions -->
                  <div class="card" style="padding: 12px;">
                    <div style="font-weight: 600; margin-bottom: 10px;">Schnellaktionen</div>
                    <div style="display: flex; flex-direction: column; gap: 8px;">
                      <button class="btn btn-sm btn-primary" onclick="startQuickMeeting()" style="width: 100%;">
                        <span style="margin-right: 6px;">📹</span> Sofort-Videokonferenz
                      </button>
                      <button class="btn btn-sm btn-ghost" onclick="createClassRoom()" style="width: 100%;">
                        <span style="margin-right: 6px;">📢</span> Klassen-Info-Raum
                      </button>
                      <button class="btn btn-sm btn-ghost" onclick="scheduleParentMeeting()" style="width: 100%;">
                        <span style="margin-right: 6px;">📅</span> Elterngespräch planen
                      </button>
                    </div>
                  </div>

                  <!-- Rooms List -->
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600;">
                      Meine Räume
                    </div>
                    <div id="rooms-list" style="flex: 1; overflow-y: auto; padding: 8px;">
                      <div class="room-item active" onclick="selectRoom('class-7a')">
                        <div class="room-icon">📢</div>
                        <div class="room-info">
                          <div class="room-name">Klasse 7a - Info</div>
                          <div class="room-preview">Letzte Nachricht vor 2h</div>
                        </div>
                        <div class="room-badge">3</div>
                      </div>
                      <div class="room-item" onclick="selectRoom('eltern-mueller')">
                        <div class="room-icon">👥</div>
                        <div class="room-info">
                          <div class="room-name">Familie Müller (Max)</div>
                          <div class="room-preview">Danke für die Info!</div>
                        </div>
                      </div>
                      <div class="room-item" onclick="selectRoom('elternvertreter')">
                        <div class="room-icon">⭐</div>
                        <div class="room-info">
                          <div class="room-name">Elternvertreter 7a</div>
                          <div class="room-preview">Nächstes Treffen: Mo 18:00</div>
                        </div>
                        <div class="room-badge">1</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Center: Chat/Video Area -->
                <div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
                  <!-- Chat Header -->
                  <div class="card" style="padding: 12px; display: flex; justify-content: space-between; align-items: center;">
                    <div>
                      <div style="font-weight: 600;" id="current-room-name">Klasse 7a - Info</div>
                      <div style="font-size: 12px; color: var(--bp-text-muted);" id="current-room-members">23 Eltern, 2 Lehrer</div>
                    </div>
                    <div style="display: flex; gap: 8px;">
                      <button class="btn btn-sm btn-ghost" onclick="startVideoCall()" title="Videoanruf starten">📹</button>
                      <button class="btn btn-sm btn-ghost" onclick="showRoomInfo()" title="Raum-Info">ℹ️</button>
                    </div>
                  </div>

                  <!-- Chat Messages -->
                  <div class="card" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
                    <div id="chat-messages" style="flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px;">
                      <!-- System Message -->
                      <div class="chat-system-msg">
                        <span>📢 Klassen-Info-Kanal - Nur Lehrer können schreiben</span>
                      </div>

                      <!-- Teacher Message -->
                      <div class="chat-msg chat-msg-self">
                        <div class="chat-msg-header">
                          <span class="chat-msg-sender">Frau Schneider</span>
                          <span class="chat-msg-time">Heute, 14:30</span>
                        </div>
                        <div class="chat-msg-content">
                          <strong>📢 Klassenarbeit Mathematik</strong><br><br>
                          Liebe Eltern,<br><br>
                          am Freitag, 20.12.2024 schreiben wir die 2. Klassenarbeit in Mathematik.<br>
                          Thema: Geometrie (Dreiecke, Vierecke, Flächenberechnung).<br><br>
                          Bitte sorgen Sie dafür, dass Ihr Kind Geodreieck und Zirkel dabei hat.
                        </div>
                      </div>

                      <!-- Notification Message -->
                      <div class="chat-msg chat-msg-notification">
                        <div class="chat-msg-header">
                          <span class="chat-msg-sender">System</span>
                          <span class="chat-msg-time">Heute, 09:15</span>
                        </div>
                        <div class="chat-msg-content">
                          <strong>⚠️ Abwesenheitsmeldung</strong><br><br>
                          <strong>Max Müller</strong> war heute in der 3. Stunde nicht im Unterricht anwesend.<br><br>
                          <em>Bitte bestätigen Sie den Grund der Abwesenheit.</em>
                        </div>
                        <div class="chat-msg-actions">
                          <button class="btn btn-sm btn-ghost">✅ Entschuldigt</button>
                          <button class="btn btn-sm btn-ghost">📋 Arztbesuch</button>
                          <button class="btn btn-sm btn-ghost">❓ Sonstiges</button>
                        </div>
                      </div>
                    </div>

                    <!-- Message Input (only shown for writable rooms) -->
                    <div id="chat-input-area" style="padding: 12px; border-top: 1px solid var(--bp-border); display: flex; gap: 8px;">
                      <input type="text" id="chat-message-input" class="unit-input" placeholder="Nachricht an Eltern..." style="flex: 1;">
                      <button class="btn btn-sm btn-ghost" onclick="attachFile()" title="Datei anhängen">📎</button>
                      <button class="btn btn-sm btn-primary" onclick="sendMessage()">Senden</button>
                    </div>
                  </div>
                </div>

                <!-- Right: Video/Info Panel -->
                <div style="width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <!-- Jitsi Video Embed -->
                  <div class="card" id="video-panel" style="display: none; flex: 1;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); display: flex; justify-content: space-between; align-items: center;">
                      <span style="font-weight: 600;">📹 Videokonferenz</span>
                      <button class="btn btn-sm btn-ghost" onclick="closeVideo()">✕</button>
                    </div>
                    <div id="jitsi-container" style="flex: 1; min-height: 400px; background: #1a1a2e;">
                      <!-- Jitsi iframe will be inserted here -->
                    </div>
                    <div style="padding: 8px; display: flex; gap: 6px; justify-content: center;">
                      <button class="btn btn-sm btn-ghost" onclick="toggleMute()">🔇 Stumm</button>
                      <button class="btn btn-sm btn-ghost" onclick="toggleVideo()">📷 Video</button>
                      <button class="btn btn-sm btn-danger" onclick="leaveCall()">🚪 Verlassen</button>
                    </div>
                  </div>

                  <!-- Quick Info when no video -->
                  <div class="card" id="info-panel" style="padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Service Status</div>
                    <div style="display: flex; flex-direction: column; gap: 8px; font-size: 13px;">
                      <div style="display: flex; justify-content: space-between;">
                        <span>Matrix Messenger</span>
                        <span id="matrix-status" style="color: #10b981;">● Online</span>
                      </div>
                      <div style="display: flex; justify-content: space-between;">
                        <span>Jitsi Video</span>
                        <span id="jitsi-status" style="color: #10b981;">● Bereit</span>
                      </div>
                    </div>
                    <hr style="margin: 12px 0; border-color: var(--bp-border);">
                    <div style="font-weight: 600; margin-bottom: 8px;">Nächste Termine</div>
                    <div style="font-size: 12px; color: var(--bp-text-muted);">
                      <div style="padding: 6px 0; border-bottom: 1px solid var(--bp-border);">
                        <div>📅 Mo 18:00 - Elternvertreter</div>
                      </div>
                      <div style="padding: 6px 0;">
                        <div>📅 Di 16:00 - Gespräch Fam. Schmidt</div>
                      </div>
                    </div>
                  </div>

                  <!-- Send Notification Card -->
                  <div class="card" style="padding: 16px;">
                    <div style="font-weight: 600; margin-bottom: 12px;">Benachrichtigung senden</div>
                    <select id="notification-type" class="unit-input" style="width: 100%; margin-bottom: 8px;">
                      <option value="announcement">📢 Ankündigung</option>
                      <option value="absence">⚠️ Abwesenheit melden</option>
                      <option value="grade">📊 Neue Note</option>
                    </select>
                    <button class="btn btn-sm btn-primary" onclick="openNotificationDialog()" style="width: 100%;">
                      Benachrichtigung erstellen
                    </button>
                  </div>
                </div>
              </div>
            </section>

            <!-- Panel: Klausuren & Tests -->
            <section class="panel" id="panel-exams" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Klausuren & Tests</div>
                  <div class="panel-subtitle">Erstellen, verwalten und Nachschreiber generieren</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <select class="unit-input" id="exams-class-select" style="width: 180px;" onchange="loadExams()">
                    <option value="">Klasse wählen...</option>
                  </select>
                  <select class="unit-input" id="exams-subject-select" style="width: 150px;" onchange="loadExams()">
                    <option value="">Fach wählen...</option>
                  </select>
                  <button class="btn btn-sm btn-primary" onclick="showCreateExamModal()">+ Klausur erstellen</button>
                </div>
              </div>
              <div class="panel-body" style="display: flex; gap: 20px; height: calc(100vh - 220px);">
                <div style="width: 350px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600; display: flex; justify-content: space-between;">
                      <span>Meine Klausuren</span>
                      <span class="small-pill" id="exams-count">0</span>
                    </div>
                    <div id="exams-list" style="flex: 1; overflow-y: auto; padding: 8px;">
                      <div style="text-align: center; color: var(--bp-text-muted); padding: 20px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📝</div>
                        <div>Noch keine Klausuren</div>
                        <div style="font-size: 12px;">Erstelle deine erste Klausur</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="flex: 1; overflow: auto; padding: 20px;">
                    <div id="exam-detail-placeholder" style="text-align: center; color: var(--bp-text-muted); padding: 40px;">
                      <div style="font-size: 48px; margin-bottom: 12px;">📋</div>
                      <div style="font-size: 18px; margin-bottom: 8px;">Klausur-Details</div>
                      <div style="font-size: 14px;">Wähle eine Klausur aus der Liste</div>
                    </div>
                    <div id="exam-detail-content" style="display: none;">
                      <h3 id="exam-detail-title">Klausur-Titel</h3>
                      <div style="display: flex; gap: 16px; margin: 16px 0; flex-wrap: wrap;">
                        <span class="small-pill" id="exam-detail-type">Typ</span>
                        <span class="small-pill" id="exam-detail-date">Datum</span>
                        <span class="small-pill" id="exam-detail-points">Punkte</span>
                      </div>
                      <div style="margin: 20px 0;">
                        <div style="font-weight: 600; margin-bottom: 8px;">Inhalt / Aufgaben:</div>
                        <div id="exam-detail-content-text" style="background: var(--bp-bg); padding: 16px; border-radius: 8px; white-space: pre-wrap;"></div>
                      </div>
                      <div style="display: flex; gap: 12px; margin-top: 20px;">
                        <button class="btn btn-sm btn-primary" onclick="showExamResultsModal()">Ergebnisse eintragen</button>
                        <button class="btn btn-sm btn-ghost" onclick="generateNachschreiber()">Nachschreiber generieren (KI)</button>
                        <button class="btn btn-sm btn-ghost" onclick="editExam()">Bearbeiten</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- Panel: Notenspiegel -->
            <section class="panel" id="panel-grades" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Notenspiegel</div>
                  <div class="panel-subtitle">Übersicht aller Noten einer Klasse</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <select class="unit-input" id="grades-class-select" style="width: 180px;" onchange="loadGrades()">
                    <option value="">Klasse wählen...</option>
                  </select>
                  <select class="unit-input" id="grades-semester-select" style="width: 150px;" onchange="loadGrades()">
                    <option value="1">1. Halbjahr</option>
                    <option value="2">2. Halbjahr</option>
                  </select>
                  <button class="btn btn-sm btn-primary" onclick="calculateFinalGrades()">Endnoten berechnen</button>
                </div>
              </div>
              <div class="panel-body" style="overflow: auto;">
                <div class="card" style="padding: 20px; overflow-x: auto;">
                  <table style="width: 100%; border-collapse: collapse; min-width: 800px;" id="grades-table">
                    <thead>
                      <tr style="background: var(--bp-bg);">
                        <th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--bp-border);">Schüler/in</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Schriftlich</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Mündlich</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Endnote</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Status</th>
                      </tr>
                    </thead>
                    <tbody id="grades-table-body">
                      <tr>
                        <td colspan="5" style="padding: 40px; text-align: center; color: var(--bp-text-muted);">
                          <div style="font-size: 24px; margin-bottom: 8px;">📊</div>
                          <div>Wähle eine Klasse aus</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </section>

            <!-- Panel: Klassenbuch -->
            <section class="panel" id="panel-gradebook" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Digitales Klassenbuch</div>
                  <div class="panel-subtitle">Fehlzeiten und Eintragungen verwalten</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <select class="unit-input" id="gradebook-class-select" style="width: 180px;" onchange="loadGradebook()">
                    <option value="">Klasse wählen...</option>
                  </select>
                  <input type="date" class="unit-input" id="gradebook-date" style="width: 150px;" onchange="loadGradebook()">
                  <button class="btn btn-sm btn-primary" onclick="showAttendanceModal()">Fehlzeiten eintragen</button>
                  <button class="btn btn-sm btn-ghost" onclick="showGradebookEntryModal()">+ Eintrag</button>
                </div>
              </div>
              <div class="panel-body" style="display: flex; gap: 20px; height: calc(100vh - 220px);">
                <div style="width: 50%; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600;">
                      Anwesenheit
                    </div>
                    <div id="attendance-list" style="flex: 1; overflow-y: auto; padding: 12px;">
                      <div style="text-align: center; color: var(--bp-text-muted); padding: 20px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📅</div>
                        <div>Wähle Klasse und Datum</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="width: 50%; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600; display: flex; justify-content: space-between;">
                      <span>Eintragungen</span>
                      <select class="unit-input" id="gradebook-entry-type" style="width: 120px;" onchange="loadGradebookEntries()">
                        <option value="">Alle Typen</option>
                        <option value="note">Notiz</option>
                        <option value="warning">Ermahnung</option>
                        <option value="praise">Lob</option>
                        <option value="incident">Vorfall</option>
                        <option value="homework">Hausaufgaben</option>
                      </select>
                    </div>
                    <div id="gradebook-entries-list" style="flex: 1; overflow-y: auto; padding: 12px;">
                      <div style="text-align: center; color: var(--bp-text-muted); padding: 20px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📝</div>
                        <div>Keine Eintragungen</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- Panel: Zeugnisse -->
            <section class="panel" id="panel-certificates" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Zeugnisgenerator</div>
                  <div class="panel-subtitle">Zeugnisse erstellen und exportieren</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <select class="unit-input" id="cert-class-select" style="width: 180px;" onchange="loadCertificates()">
                    <option value="">Klasse wählen...</option>
                  </select>
                  <select class="unit-input" id="cert-semester-select" style="width: 150px;">
                    <option value="1">1. Halbjahr</option>
                    <option value="2">2. Halbjahr</option>
                  </select>
                  <select class="unit-input" id="cert-template-select" style="width: 180px;">
                    <option value="">Vorlage wählen...</option>
                  </select>
                  <button class="btn btn-sm btn-primary" onclick="generateAllCertificates()">Alle generieren</button>
                </div>
              </div>
              <div class="panel-body" style="overflow: auto;">
                <div class="card" style="padding: 20px;">
                  <table style="width: 100%; border-collapse: collapse;" id="certificates-table">
                    <thead>
                      <tr style="background: var(--bp-bg);">
                        <th style="padding: 12px; text-align: left; border-bottom: 2px solid var(--bp-border);">Schüler/in</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Zeugnis-Typ</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Fehlzeiten</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Status</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid var(--bp-border);">Aktionen</th>
                      </tr>
                    </thead>
                    <tbody id="certificates-table-body">
                      <tr>
                        <td colspan="5" style="padding: 40px; text-align: center; color: var(--bp-text-muted);">
                          <div style="font-size: 24px; margin-bottom: 8px;">📜</div>
                          <div>Wähle eine Klasse aus</div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </section>

            <!-- Panel: Klassen & Schüler -->
            <section class="panel" id="panel-classes" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Klassen & Schüler</div>
                  <div class="panel-subtitle">Klassenverwaltung und Schülerlisten</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <select class="unit-input" id="classes-year-select" style="width: 150px;" onchange="loadClasses()">
                    <option value="">Schuljahr...</option>
                  </select>
                  <button class="btn btn-sm btn-primary" onclick="showCreateClassModal()">+ Klasse anlegen</button>
                  <button class="btn btn-sm btn-ghost" onclick="showCreateSchoolYearModal()">+ Schuljahr</button>
                </div>
              </div>
              <div class="panel-body" style="display: flex; gap: 20px; height: calc(100vh - 220px);">
                <div style="width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600; display: flex; justify-content: space-between;">
                      <span>Meine Klassen</span>
                      <span class="small-pill" id="classes-count">0</span>
                    </div>
                    <div id="classes-list" style="flex: 1; overflow-y: auto; padding: 8px;">
                      <div style="text-align: center; color: var(--bp-text-muted); padding: 20px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">🏫</div>
                        <div>Noch keine Klassen</div>
                        <div style="font-size: 12px;">Lege deine erste Klasse an</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="flex: 1; display: flex; flex-direction: column; gap: 12px;">
                  <div class="card" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
                    <div style="padding: 12px; border-bottom: 1px solid var(--bp-border); font-weight: 600; display: flex; justify-content: space-between;">
                      <span>Schüler</span>
                      <div style="display: flex; gap: 8px;">
                        <span class="small-pill" id="students-count">0</span>
                        <button class="btn btn-sm btn-ghost" onclick="showAddStudentModal()">+ Schüler</button>
                        <button class="btn btn-sm btn-ghost" onclick="showImportStudentsModal()">CSV Import</button>
                      </div>
                    </div>
                    <div id="students-list" style="flex: 1; overflow-y: auto; padding: 8px;">
                      <div style="text-align: center; color: var(--bp-text-muted); padding: 20px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">👥</div>
                        <div>Wähle eine Klasse aus</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- Panel: Fächer -->
            <section class="panel" id="panel-subjects" style="display:none;">
              <div class="panel-header">
                <div>
                  <div class="panel-title">Fächer verwalten</div>
                  <div class="panel-subtitle">Unterrichtsfächer anlegen und bearbeiten</div>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                  <button class="btn btn-sm btn-primary" onclick="showCreateSubjectModal()">+ Fach anlegen</button>
                </div>
              </div>
              <div class="panel-body">
                <div class="card" style="padding: 20px;">
                  <div id="subjects-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;">
                    <div style="text-align: center; color: var(--bp-text-muted); padding: 40px; grid-column: 1 / -1;">
                      <div style="font-size: 24px; margin-bottom: 8px;">📚</div>
                      <div>Noch keine Fächer angelegt</div>
                      <div style="font-size: 12px;">Lege dein erstes Fach an</div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </main>

          <div class="pager">
            <button id="pager-prev">&lt;</button>
            <span id="pager-label">1 von 2</span>
            <button id="pager-next">&gt;</button>
          </div>

          <div class="status-bar" id="status-bar">
            <div class="status-dot" id="status-dot"></div>
            <div>
              <div class="status-text-main" id="status-main"></div>
              <div class="status-text-sub" id="status-sub"></div>
            </div>
          </div>
        </div>

        <!-- Vollbild-Overlay -->
        <div class="lightbox hidden" id="lightbox">
          <div class="lightbox-inner">
            <button type="button" class="lightbox-close" id="lightbox-close">Schließen ✕</button>
            <img id="lightbox-img" class="lightbox-img" src="" alt="">
            <div id="lightbox-caption" class="lightbox-caption"></div>
          </div>
        </div>

        <!-- MC Quiz Modal -->
        <div class="mc-modal hidden" id="mc-modal">
          <div class="mc-modal-content">
            <div class="mc-modal-header">
              <div class="mc-modal-title">Multiple Choice Quiz</div>
              <button type="button" class="mc-modal-close" id="mc-modal-close">Schließen ✕</button>
            </div>
            <div id="mc-modal-body"></div>
          </div>
        </div>

        <!-- Cloze / Lückentext Modal -->
        <div class="mc-modal hidden" id="cloze-modal">
          <div class="mc-modal-content" style="max-width:700px;">
            <div class="mc-modal-header">
              <div class="mc-modal-title">Lückentext-Übung</div>
              <button type="button" class="mc-modal-close" id="cloze-modal-close">Schließen ✕</button>
            </div>
            <div id="cloze-modal-body"></div>
          </div>
        </div>

        <!-- Q&A / Frage-Antwort Modal mit Leitner-System -->
        <div class="mc-modal hidden" id="qa-modal">
          <div class="mc-modal-content" style="max-width:700px;">
            <div class="mc-modal-header">
              <div class="mc-modal-title">Frage-Antwort Lernmodus</div>
              <button type="button" class="mc-modal-close" id="qa-modal-close">Schließen ✕</button>
            </div>
            <div id="qa-modal-body"></div>
          </div>
        </div>

        <div class="footer">
          <span>© 2025 BreakPilot</span>
          <span style="display: flex; gap: 12px; font-size: 11px;">
            <a href="#" onclick="openImprintModal(); return false;" style="color: var(--bp-text-muted);">Impressum</a>
            <a href="#" onclick="openLegalModal('terms'); return false;" style="color: var(--bp-text-muted);">AGB</a>
            <a href="#" onclick="openLegalModal('privacy'); return false;" style="color: var(--bp-text-muted);">Datenschutz</a>
            <a href="#" onclick="openLegalModal('cookies'); return false;" style="color: var(--bp-text-muted);">Cookies</a>
            <a href="#" onclick="openLegalModal('gdpr'); return false;" style="color: var(--bp-text-muted);">Deine Rechte</a>
            <a href="#" onclick="openSettingsModal(); return false;" style="color: var(--bp-text-muted);">Einstellungen</a>
          </span>
        </div>

      

      <!-- Admin Panel Modal -->
      <div id="admin-modal" class="admin-modal">
        <div class="admin-modal-content">
          <div class="admin-modal-header">
            <h2><span>⚙️</span> Consent Admin Panel</h2>
            <button id="admin-modal-close" class="legal-modal-close">&times;</button>
          </div>
          <div class="admin-tabs">
            <button class="admin-tab active" data-tab="documents">Dokumente</button>
            <button class="admin-tab" data-tab="versions">Versionen</button>
            <button class="admin-tab" data-tab="cookies">Cookie-Kategorien</button>
            <button class="admin-tab" data-tab="stats">Statistiken</button>
            <button class="admin-tab" data-tab="emails">E-Mail Vorlagen</button>
            <button class="admin-tab" data-tab="dsr">Betroffenenanfragen</button>
            <button class="admin-tab" data-tab="dsms">DSMS</button>
          </div>
          <div class="admin-body">
            <!-- Documents Tab -->
            <div id="admin-documents" class="admin-content active">
              <div class="admin-toolbar">
                <div class="admin-toolbar-left">
                  <input type="text" class="admin-search" placeholder="Dokumente suchen..." id="admin-doc-search">
                </div>
                <button class="btn btn-primary btn-sm" onclick="showDocumentForm()">+ Neues Dokument</button>
              </div>

              <!-- Document Creation Form -->
              <div id="admin-document-form" class="admin-form" style="display: none;">
                <h3 class="admin-form-title" id="admin-document-form-title">Neues Dokument erstellen</h3>
                <input type="hidden" id="admin-document-id">
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">Dokumenttyp *</label>
                    <select class="admin-form-select" id="admin-document-type">
                      <option value="">-- Typ auswählen --</option>
                      <option value="terms">AGB (Allgemeine Geschäftsbedingungen)</option>
                      <option value="privacy">Datenschutzerklärung</option>
                      <option value="cookies">Cookie-Richtlinie</option>
                      <option value="community">Community Guidelines</option>
                      <option value="imprint">Impressum</option>
                    </select>
                  </div>
                  <div class="admin-form-group">
                    <label class="admin-form-label">Name *</label>
                    <input type="text" class="admin-form-input" id="admin-document-name" placeholder="z.B. Allgemeine Geschäftsbedingungen">
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Beschreibung</label>
                    <input type="text" class="admin-form-input" id="admin-document-description" placeholder="Kurze Beschreibung des Dokuments">
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">
                      <input type="checkbox" id="admin-document-mandatory" style="margin-right: 8px;">
                      Pflichtdokument (Nutzer müssen zustimmen)
                    </label>
                  </div>
                </div>
                <div class="admin-form-actions">
                  <button class="btn btn-ghost btn-sm" onclick="hideDocumentForm()">Abbrechen</button>
                  <button class="btn btn-primary btn-sm" onclick="saveDocument()">Dokument erstellen</button>
                </div>
              </div>

              <div id="admin-doc-table-container">
                <div class="admin-loading">Lade Dokumente...</div>
              </div>
            </div>

            <!-- Versions Tab -->
            <div id="admin-versions" class="admin-content">
              <div class="admin-toolbar">
                <div class="admin-toolbar-left">
                  <select class="admin-form-select" id="admin-version-doc-select" onchange="loadVersionsForDocument()">
                    <option value="">-- Dokument auswählen --</option>
                  </select>
                </div>
                <button class="btn btn-primary btn-sm" onclick="showVersionForm()" id="btn-new-version" disabled>+ Neue Version</button>
              </div>

              <div id="admin-version-form" class="admin-form">
                <h3 class="admin-form-title" id="admin-version-form-title">Neue Version erstellen</h3>
                <input type="hidden" id="admin-version-id">
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">Version *</label>
                    <input type="text" class="admin-form-input" id="admin-version-number" placeholder="z.B. 1.0.0">
                  </div>
                  <div class="admin-form-group">
                    <label class="admin-form-label">Sprache *</label>
                    <select class="admin-form-select" id="admin-version-lang">
                      <option value="de">Deutsch</option>
                      <option value="en">English</option>
                    </select>
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Titel *</label>
                    <input type="text" class="admin-form-input" id="admin-version-title" placeholder="Titel der Version">
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Zusammenfassung</label>
                    <input type="text" class="admin-form-input" id="admin-version-summary" placeholder="Kurze Zusammenfassung der Änderungen">
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Inhalt *</label>
                    <div class="editor-container">
                      <div class="editor-toolbar">
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn" onclick="formatDoc('bold')" title="Fett (Strg+B)"><b>B</b></button>
                          <button type="button" class="editor-btn" onclick="formatDoc('italic')" title="Kursiv (Strg+I)"><i>I</i></button>
                          <button type="button" class="editor-btn" onclick="formatDoc('underline')" title="Unterstrichen (Strg+U)"><u>U</u></button>
                        </div>
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn" onclick="formatBlock('h1')" title="Überschrift 1">H1</button>
                          <button type="button" class="editor-btn" onclick="formatBlock('h2')" title="Überschrift 2">H2</button>
                          <button type="button" class="editor-btn" onclick="formatBlock('h3')" title="Überschrift 3">H3</button>
                          <button type="button" class="editor-btn" onclick="formatBlock('p')" title="Absatz">P</button>
                        </div>
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn" onclick="formatDoc('insertUnorderedList')" title="Aufzählung">• Liste</button>
                          <button type="button" class="editor-btn" onclick="formatDoc('insertOrderedList')" title="Nummerierung">1. Liste</button>
                        </div>
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn" onclick="insertLink()" title="Link einfügen">🔗</button>
                          <button type="button" class="editor-btn" onclick="formatDoc('formatBlock', 'blockquote')" title="Zitat">❝</button>
                          <button type="button" class="editor-btn" onclick="formatDoc('insertHorizontalRule')" title="Trennlinie">—</button>
                        </div>
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn editor-btn-upload" onclick="document.getElementById('word-upload').click()" title="Word-Dokument importieren">📄 Word Import</button>
                          <input type="file" id="word-upload" class="word-upload-input" accept=".docx,.doc" onchange="handleWordUpload(event)">
                        </div>
                      </div>
                      <div id="admin-version-editor" class="editor-content" contenteditable="true" placeholder="Schreiben Sie hier den Inhalt..."></div>
                      <div class="editor-status">
                        <span id="editor-char-count">0 Zeichen</span> |
                        <span style="color: var(--bp-text-muted);">Tipp: Sie können direkt aus Word kopieren und einfügen!</span>
                      </div>
                    </div>
                    <input type="hidden" id="admin-version-content">
                  </div>
                </div>
                <div class="admin-form-actions">
                  <button class="btn btn-ghost btn-sm" onclick="hideVersionForm()">Abbrechen</button>
                  <button class="btn btn-primary btn-sm" onclick="saveVersion()">Speichern</button>
                </div>
              </div>

              <div id="admin-version-table-container">
                <div class="admin-empty">Wählen Sie ein Dokument aus, um dessen Versionen anzuzeigen.</div>
              </div>

              <!-- Approval Dialog -->
              <div id="approval-dialog" class="admin-dialog">
                <div class="admin-dialog-content">
                  <h3>Version genehmigen</h3>
                  <p class="admin-dialog-info">
                    Legen Sie einen Veröffentlichungszeitpunkt fest. Die Version wird automatisch zum gewählten Zeitpunkt veröffentlicht.
                  </p>
                  <div class="admin-form-row">
                    <div class="admin-form-group">
                      <label class="admin-form-label">Veröffentlichungsdatum *</label>
                      <input type="date" class="admin-form-input" id="approval-date" required>
                    </div>
                    <div class="admin-form-group">
                      <label class="admin-form-label">Uhrzeit</label>
                      <input type="time" class="admin-form-input" id="approval-time" value="00:00">
                    </div>
                  </div>
                  <div class="admin-form-row">
                    <div class="admin-form-group full-width">
                      <label class="admin-form-label">Kommentar (optional)</label>
                      <input type="text" class="admin-form-input" id="approval-comment" placeholder="z.B. Genehmigt nach rechtlicher Prüfung">
                    </div>
                  </div>
                  <div class="admin-dialog-actions">
                    <button class="btn btn-ghost btn-sm" onclick="hideApprovalDialog()">Abbrechen</button>
                    <button class="btn btn-primary btn-sm" onclick="submitApproval()">Genehmigen & Planen</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Version Compare View (Full Screen Overlay) -->
            <div id="version-compare-view" class="version-compare-overlay">
              <div class="version-compare-header">
                <h2>Versionsvergleich</h2>
                <div class="version-compare-info">
                  <span id="compare-published-info"></span>
                  <span class="compare-vs">vs</span>
                  <span id="compare-draft-info"></span>
                </div>
                <button class="btn btn-ghost" onclick="hideCompareView()">Schließen</button>
              </div>
              <div class="version-compare-container">
                <div class="version-compare-panel">
                  <div class="version-compare-panel-header">
                    <span class="compare-label compare-label-published">Veröffentlichte Version</span>
                    <span id="compare-published-version"></span>
                  </div>
                  <div class="version-compare-content" id="compare-content-left"></div>
                </div>
                <div class="version-compare-panel">
                  <div class="version-compare-panel-header">
                    <span class="compare-label compare-label-draft">Neue Version</span>
                    <span id="compare-draft-version"></span>
                  </div>
                  <div class="version-compare-content" id="compare-content-right"></div>
                </div>
              </div>
              <div class="version-compare-footer">
                <div id="compare-history-container"></div>
                <div id="compare-actions-container" style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px;"></div>
              </div>
            </div>

            <!-- Cookie Categories Tab -->
            <div id="admin-cookies" class="admin-content">
              <div class="admin-toolbar">
                <div class="admin-toolbar-left">
                  <span style="color: var(--bp-text-muted);">Cookie-Kategorien verwalten</span>
                </div>
                <button class="btn btn-primary btn-sm" onclick="showCookieForm()">+ Neue Kategorie</button>
              </div>

              <div id="admin-cookie-form" class="admin-form">
                <h3 class="admin-form-title">Neue Cookie-Kategorie</h3>
                <input type="hidden" id="admin-cookie-id">
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">Technischer Name *</label>
                    <input type="text" class="admin-form-input" id="admin-cookie-name" placeholder="z.B. analytics">
                  </div>
                  <div class="admin-form-group">
                    <label class="admin-form-label">Anzeigename (DE) *</label>
                    <input type="text" class="admin-form-input" id="admin-cookie-display-de" placeholder="z.B. Analyse-Cookies">
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">Anzeigename (EN)</label>
                    <input type="text" class="admin-form-input" id="admin-cookie-display-en" placeholder="z.B. Analytics Cookies">
                  </div>
                  <div class="admin-form-group">
                    <label class="admin-form-label">
                      <input type="checkbox" id="admin-cookie-mandatory"> Notwendig (kann nicht deaktiviert werden)
                    </label>
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Beschreibung (DE)</label>
                    <input type="text" class="admin-form-input" id="admin-cookie-desc-de" placeholder="Beschreibung auf Deutsch">
                  </div>
                </div>
                <div class="admin-form-actions">
                  <button class="btn btn-ghost btn-sm" onclick="hideCookieForm()">Abbrechen</button>
                  <button class="btn btn-primary btn-sm" onclick="saveCookieCategory()">Speichern</button>
                </div>
              </div>

              <div id="admin-cookie-table-container">
                <div class="admin-loading">Lade Cookie-Kategorien...</div>
              </div>
            </div>

            <!-- Statistics Tab -->
            <div id="admin-stats" class="admin-content">
              <div id="admin-stats-container">
                <div class="admin-loading">Lade Statistiken...</div>
              </div>
            </div>

            <!-- E-Mail Templates Tab -->
            <div id="admin-emails" class="admin-content">
              <div class="admin-toolbar">
                <div class="admin-toolbar-left">
                  <select class="admin-form-select" id="email-template-select" onchange="loadEmailTemplateVersions()">
                    <option value="">-- E-Mail-Vorlage auswählen --</option>
                  </select>
                </div>
                <button class="btn btn-ghost btn-sm" onclick="initializeEmailTemplates()">Templates initialisieren</button>
                <button class="btn btn-primary btn-sm" onclick="showEmailVersionForm()" id="btn-new-email-version" disabled>+ Neue Version</button>
              </div>

              <!-- E-Mail Template Info Card -->
              <div id="email-template-info" style="display: none; margin-bottom: 16px;">
                <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px; border: 1px solid var(--bp-border);">
                  <div style="display: flex; justify-content: space-between; align-items: start;">
                    <div>
                      <h3 style="margin: 0 0 8px 0; font-size: 16px;" id="email-template-name">-</h3>
                      <p style="margin: 0; color: var(--bp-text-muted); font-size: 13px;" id="email-template-description">-</p>
                    </div>
                    <div style="text-align: right;">
                      <div class="admin-badge" id="email-template-type-badge">-</div>
                    </div>
                  </div>
                  <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bp-border);">
                    <span style="font-size: 12px; color: var(--bp-text-muted);">Variablen: </span>
                    <span id="email-template-variables" style="font-size: 12px; font-family: monospace; color: var(--bp-primary);"></span>
                  </div>
                </div>
              </div>

              <!-- E-Mail Version Form -->
              <div id="email-version-form" class="admin-form" style="display: none;">
                <h3 class="admin-form-title" id="email-version-form-title">Neue E-Mail-Version erstellen</h3>
                <input type="hidden" id="email-version-id">
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">Version *</label>
                    <input type="text" class="admin-form-input" id="email-version-number" placeholder="z.B. 1.0.0">
                  </div>
                  <div class="admin-form-group">
                    <label class="admin-form-label">Sprache *</label>
                    <select class="admin-form-select" id="email-version-lang">
                      <option value="de">Deutsch</option>
                      <option value="en">English</option>
                    </select>
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Betreff *</label>
                    <input type="text" class="admin-form-input" id="email-version-subject" placeholder="E-Mail Betreff (kann Variablen enthalten)">
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">HTML-Inhalt *</label>
                    <div class="editor-container">
                      <div class="editor-toolbar">
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn" onclick="formatEmailDoc('bold')" title="Fett"><b>B</b></button>
                          <button type="button" class="editor-btn" onclick="formatEmailDoc('italic')" title="Kursiv"><i>I</i></button>
                          <button type="button" class="editor-btn" onclick="formatEmailDoc('underline')" title="Unterstrichen"><u>U</u></button>
                        </div>
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn" onclick="formatEmailBlock('h1')" title="Überschrift 1">H1</button>
                          <button type="button" class="editor-btn" onclick="formatEmailBlock('h2')" title="Überschrift 2">H2</button>
                          <button type="button" class="editor-btn" onclick="formatEmailBlock('p')" title="Absatz">P</button>
                        </div>
                        <div class="editor-toolbar-group">
                          <button type="button" class="editor-btn" onclick="insertEmailVariable()" title="Variable einfügen">{{var}}</button>
                          <button type="button" class="editor-btn" onclick="insertEmailLink()" title="Link einfügen">🔗</button>
                          <button type="button" class="editor-btn" onclick="insertEmailButton()" title="Button einfügen">🔘</button>
                        </div>
                      </div>
                      <div id="email-version-editor" class="editor-content" contenteditable="true" placeholder="HTML-Inhalt der E-Mail..." style="min-height: 200px;"></div>
                    </div>
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Text-Version (Plain Text)</label>
                    <textarea class="admin-form-input" id="email-version-text" rows="5" placeholder="Plain-Text-Version der E-Mail (optional, wird aus HTML generiert falls leer)"></textarea>
                  </div>
                </div>
                <div class="admin-form-actions">
                  <button class="btn btn-ghost btn-sm" onclick="hideEmailVersionForm()">Abbrechen</button>
                  <button class="btn btn-ghost btn-sm" onclick="previewEmailVersion()">Vorschau</button>
                  <button class="btn btn-primary btn-sm" onclick="saveEmailVersion()">Speichern</button>
                </div>
              </div>

              <!-- E-Mail Versions Table -->
              <div id="email-version-table-container">
                <div class="admin-empty">Wählen Sie eine E-Mail-Vorlage aus, um deren Versionen anzuzeigen.</div>
              </div>

              <!-- E-Mail Preview Dialog -->
              <div id="email-preview-dialog" class="admin-dialog" style="display: none;">
                <div class="admin-dialog-content" style="max-width: 700px; max-height: 80vh; overflow-y: auto;">
                  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                    <h3 style="margin: 0;">E-Mail Vorschau</h3>
                    <button class="btn btn-ghost btn-sm" onclick="hideEmailPreview()">Schließen</button>
                  </div>
                  <div style="margin-bottom: 12px;">
                    <strong>Betreff:</strong> <span id="email-preview-subject"></span>
                  </div>
                  <div style="border: 1px solid var(--bp-border); border-radius: 8px; padding: 16px; background: white; color: #333;">
                    <div id="email-preview-content"></div>
                  </div>
                  <div style="margin-top: 16px; display: flex; gap: 8px;">
                    <input type="email" class="admin-form-input" id="email-test-address" placeholder="Test-E-Mail-Adresse" style="flex: 1;">
                    <button class="btn btn-primary btn-sm" onclick="sendTestEmail()">Test-E-Mail senden</button>
                  </div>
                </div>
              </div>

              <!-- E-Mail Approval Dialog -->
              <div id="email-approval-dialog" class="admin-dialog" style="display: none;">
                <div class="admin-dialog-content">
                  <h3>E-Mail-Version genehmigen</h3>
                  <div class="admin-form-row">
                    <div class="admin-form-group full-width">
                      <label class="admin-form-label">Kommentar (optional)</label>
                      <input type="text" class="admin-form-input" id="email-approval-comment" placeholder="z.B. Genehmigt nach Marketing-Prüfung">
                    </div>
                  </div>
                  <div class="admin-dialog-actions">
                    <button class="btn btn-ghost btn-sm" onclick="hideEmailApprovalDialog()">Abbrechen</button>
                    <button class="btn btn-primary btn-sm" onclick="submitEmailApproval()">Genehmigen</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- DSR (Betroffenenanfragen) Tab -->
            <div id="admin-dsr" class="admin-content">
              <div class="admin-toolbar">
                <div class="admin-toolbar-left">
                  <select class="admin-form-select" id="dsr-filter-status" onchange="loadDSRList()" style="min-width: 150px;">
                    <option value="">Alle Status</option>
                    <option value="intake">Eingang</option>
                    <option value="identity_verification">Identitätsprüfung</option>
                    <option value="processing">In Bearbeitung</option>
                    <option value="completed">Abgeschlossen</option>
                    <option value="rejected">Abgelehnt</option>
                    <option value="cancelled">Storniert</option>
                  </select>
                  <select class="admin-form-select" id="dsr-filter-type" onchange="loadDSRList()" style="min-width: 150px;">
                    <option value="">Alle Typen</option>
                    <option value="access">Art. 15 - Auskunft</option>
                    <option value="rectification">Art. 16 - Berichtigung</option>
                    <option value="erasure">Art. 17 - Löschung</option>
                    <option value="restriction">Art. 18 - Einschränkung</option>
                    <option value="portability">Art. 20 - Datenübertragbarkeit</option>
                  </select>
                  <label style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--bp-text-muted);">
                    <input type="checkbox" id="dsr-filter-overdue" onchange="loadDSRList()">
                    Nur überfällige
                  </label>
                </div>
                <button class="btn btn-primary btn-sm" onclick="showDSRCreateForm()">+ Neue Anfrage</button>
              </div>

              <!-- DSR Stats Dashboard -->
              <div id="dsr-stats-cards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 16px 0;">
                <div class="admin-loading">Lade Statistiken...</div>
              </div>

              <!-- DSR Create Form -->
              <div id="dsr-create-form" class="admin-form" style="display: none;">
                <h3 class="admin-form-title">Neue Betroffenenanfrage erstellen</h3>
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">Anfragetyp *</label>
                    <select class="admin-form-select" id="dsr-create-type" required>
                      <option value="">-- Typ wählen --</option>
                      <option value="access">Art. 15 - Auskunftsrecht</option>
                      <option value="rectification">Art. 16 - Recht auf Berichtigung</option>
                      <option value="erasure">Art. 17 - Recht auf Löschung</option>
                      <option value="restriction">Art. 18 - Recht auf Einschränkung</option>
                      <option value="portability">Art. 20 - Recht auf Datenübertragbarkeit</option>
                    </select>
                  </div>
                  <div class="admin-form-group">
                    <label class="admin-form-label">Priorität</label>
                    <select class="admin-form-select" id="dsr-create-priority">
                      <option value="normal">Normal</option>
                      <option value="high">Hoch</option>
                      <option value="expedited">Beschleunigt</option>
                    </select>
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group">
                    <label class="admin-form-label">E-Mail des Antragstellers *</label>
                    <input type="email" class="admin-form-input" id="dsr-create-email" required placeholder="email@example.com">
                  </div>
                  <div class="admin-form-group">
                    <label class="admin-form-label">Name des Antragstellers</label>
                    <input type="text" class="admin-form-input" id="dsr-create-name" placeholder="Max Mustermann">
                  </div>
                </div>
                <div class="admin-form-row">
                  <div class="admin-form-group full-width">
                    <label class="admin-form-label">Telefon</label>
                    <input type="text" class="admin-form-input" id="dsr-create-phone" placeholder="+49 123 456789">
                  </div>
                </div>
                <div class="admin-form-actions">
                  <button class="btn btn-ghost btn-sm" onclick="hideDSRCreateForm()">Abbrechen</button>
                  <button class="btn btn-primary btn-sm" onclick="createDSR()">Anfrage erstellen</button>
                </div>
              </div>

              <!-- DSR Table -->
              <div id="dsr-table-container">
                <div class="admin-loading">Lade Betroffenenanfragen...</div>
              </div>

              <!-- DSR Detail View -->
              <div id="dsr-detail-view" style="display: none;">
                <div class="admin-toolbar" style="margin-bottom: 16px;">
                  <button class="btn btn-ghost btn-sm" onclick="hideDSRDetail()">← Zurück zur Liste</button>
                  <div style="display: flex; gap: 8px;">
                    <button class="btn btn-ghost btn-sm" id="dsr-btn-verify" onclick="verifyDSRIdentity()">Identität verifizieren</button>
                    <button class="btn btn-ghost btn-sm" id="dsr-btn-assign" onclick="showDSRAssignDialog()">Zuweisen</button>
                    <button class="btn btn-ghost btn-sm" id="dsr-btn-extend" onclick="showDSRExtendDialog()">Frist verlängern</button>
                    <button class="btn btn-primary btn-sm" id="dsr-btn-complete" onclick="showDSRCompleteDialog()">Abschließen</button>
                    <button class="btn btn-danger btn-sm" id="dsr-btn-reject" onclick="showDSRRejectDialog()">Ablehnen</button>
                  </div>
                </div>
                <div id="dsr-detail-content"></div>
              </div>
            </div>

            <!-- DSMS Tab -->
            <div id="admin-dsms" class="admin-content">
              <div class="admin-toolbar">
                <div class="admin-toolbar-left">
                  <span style="font-weight: 600; color: var(--bp-primary);">Dezentrales Speichersystem (IPFS)</span>
                </div>
                <div style="display: flex; gap: 8px;">
                  <button class="btn btn-ghost btn-sm" onclick="openDsmsWebUI()">DSMS WebUI</button>
                  <button class="btn btn-primary btn-sm" onclick="loadDsmsData()">Aktualisieren</button>
                </div>
              </div>

              <!-- DSMS Status Cards -->
              <div id="dsms-status-cards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px;">
                <div class="admin-loading">Lade DSMS Status...</div>
              </div>

              <!-- DSMS Tabs -->
              <div style="display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--bp-border); padding-bottom: 8px;">
                <button class="dsms-subtab active" data-dsms-tab="archives" onclick="switchDsmsTab('archives')">Archivierte Dokumente</button>
                <button class="dsms-subtab" data-dsms-tab="verify" onclick="switchDsmsTab('verify')">Verifizierung</button>
                <button class="dsms-subtab" data-dsms-tab="settings" onclick="switchDsmsTab('settings')">Einstellungen</button>
              </div>

              <!-- Archives Sub-Tab -->
              <div id="dsms-archives" class="dsms-content active">
                <div class="admin-toolbar" style="margin-bottom: 16px;">
                  <div class="admin-toolbar-left">
                    <input type="text" class="admin-search" placeholder="CID suchen..." id="dsms-cid-search" style="width: 300px;">
                  </div>
                  <button class="btn btn-primary btn-sm" onclick="showArchiveForm()">+ Dokument archivieren</button>
                </div>

                <!-- Archive Form -->
                <div id="dsms-archive-form" class="admin-form" style="display: none; margin-bottom: 16px;">
                  <h3 class="admin-form-title">Dokument im DSMS archivieren</h3>
                  <div class="admin-form-row">
                    <div class="admin-form-group">
                      <label class="admin-form-label">Dokument auswählen *</label>
                      <select class="admin-form-select" id="dsms-archive-doc-select">
                        <option value="">-- Dokument wählen --</option>
                      </select>
                    </div>
                    <div class="admin-form-group">
                      <label class="admin-form-label">Version *</label>
                      <select class="admin-form-select" id="dsms-archive-version-select" disabled>
                        <option value="">-- Erst Dokument wählen --</option>
                      </select>
                    </div>
                  </div>
                  <div class="admin-form-actions">
                    <button class="btn btn-ghost btn-sm" onclick="hideArchiveForm()">Abbrechen</button>
                    <button class="btn btn-primary btn-sm" onclick="archiveDocumentToDsms()">Archivieren</button>
                  </div>
                </div>

                <div id="dsms-archives-table">
                  <div class="admin-loading">Lade archivierte Dokumente...</div>
                </div>
              </div>

              <!-- Verify Sub-Tab -->
              <div id="dsms-verify" class="dsms-content" style="display: none;">
                <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
                  <h3 style="margin: 0 0 16px 0; font-size: 16px;">Dokumentenintegrität prüfen</h3>
                  <p style="color: var(--bp-text-muted); margin-bottom: 16px; font-size: 14px;">
                    Geben Sie einen CID (Content Identifier) ein, um die Integrität eines archivierten Dokuments zu verifizieren.
                  </p>
                  <div style="display: flex; gap: 12px; margin-bottom: 16px;">
                    <input type="text" class="admin-form-input" id="dsms-verify-cid" placeholder="Qm... oder bafy..." style="flex: 1;">
                    <button class="btn btn-primary btn-sm" onclick="verifyDsmsDocument()">Verifizieren</button>
                  </div>
                  <div id="dsms-verify-result" style="display: none;"></div>
                </div>
              </div>

              <!-- Settings Sub-Tab -->
              <div id="dsms-settings" class="dsms-content" style="display: none;">
                <div style="display: grid; gap: 16px;">
                  <!-- Node Info -->
                  <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
                    <h3 style="margin: 0 0 16px 0; font-size: 16px;">Node-Informationen</h3>
                    <div id="dsms-node-info">
                      <div class="admin-loading">Lade Node-Info...</div>
                    </div>
                  </div>

                  <!-- Quick Links -->
                  <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
                    <h3 style="margin: 0 0 16px 0; font-size: 16px;">Schnellzugriff</h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 12px;">
                      <button class="btn btn-primary btn-sm" onclick="openDsmsWebUI()">DSMS WebUI</button>
                      <a href="http://localhost:8082/docs" target="_blank" class="btn btn-ghost btn-sm">DSMS API Docs</a>
                      <a href="http://localhost:8085" target="_blank" class="btn btn-ghost btn-sm">IPFS Gateway</a>
                    </div>
                  </div>

                  <!-- Lizenzhinweise -->
                  <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
                    <h3 style="margin: 0 0 16px 0; font-size: 16px;">Open Source Lizenzen</h3>
                    <p style="color: var(--bp-text-muted); font-size: 13px; margin-bottom: 12px;">
                      DSMS verwendet folgende Open-Source-Komponenten:
                    </p>
                    <ul style="color: var(--bp-text-muted); font-size: 13px; margin: 0; padding-left: 20px;">
                      <li><strong>IPFS Kubo</strong> - MIT + Apache 2.0 (Dual License) - Protocol Labs, Inc.</li>
                      <li><strong>IPFS WebUI</strong> - MIT License - Protocol Labs, Inc.</li>
                      <li><strong>FastAPI</strong> - MIT License</li>
                    </ul>
                    <p style="color: var(--bp-text-muted); font-size: 12px; margin-top: 12px; font-style: italic;">
                      Alle Komponenten erlauben kommerzielle Nutzung.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- DSMS WebUI Modal -->
      <div id="dsms-webui-modal" class="legal-modal" style="display: none;">
        <div class="legal-modal-content" style="max-width: 1200px; width: 95%; height: 90vh;">
          <div class="legal-modal-header" style="border-bottom: 1px solid var(--bp-border);">
            <h2 style="display: flex; align-items: center; gap: 10px;">
              <span style="font-size: 24px;">&#127760;</span> DSMS WebUI
            </h2>
            <button id="dsms-webui-modal-close" class="legal-modal-close" onclick="closeDsmsWebUI()">&times;</button>
          </div>
          <div style="display: flex; height: calc(100% - 60px);">
            <!-- Sidebar -->
            <div style="width: 200px; background: var(--bp-surface); border-right: 1px solid var(--bp-border); padding: 16px;">
              <nav style="display: flex; flex-direction: column; gap: 4px;">
                <button class="dsms-webui-nav active" data-section="overview" onclick="switchDsmsWebUISection('overview')">
                  <span>&#128200;</span> Übersicht
                </button>
                <button class="dsms-webui-nav" data-section="files" onclick="switchDsmsWebUISection('files')">
                  <span>&#128193;</span> Dateien
                </button>
                <button class="dsms-webui-nav" data-section="explore" onclick="switchDsmsWebUISection('explore')">
                  <span>&#128269;</span> Erkunden
                </button>
                <button class="dsms-webui-nav" data-section="peers" onclick="switchDsmsWebUISection('peers')">
                  <span>&#127760;</span> Peers
                </button>
                <button class="dsms-webui-nav" data-section="config" onclick="switchDsmsWebUISection('config')">
                  <span>&#9881;</span> Konfiguration
                </button>
              </nav>
            </div>
            <!-- Main Content -->
            <div style="flex: 1; overflow-y: auto; padding: 24px;" id="dsms-webui-content">
              <!-- Overview Section (default) -->
              <div id="dsms-webui-overview" class="dsms-webui-section active">
                <h3 style="margin: 0 0 24px 0;">Node Übersicht</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px;">
                  <div class="dsms-webui-stat-card">
                    <div class="dsms-webui-stat-label">Status</div>
                    <div class="dsms-webui-stat-value" id="webui-status">--</div>
                  </div>
                  <div class="dsms-webui-stat-card">
                    <div class="dsms-webui-stat-label">Node ID</div>
                    <div class="dsms-webui-stat-value" id="webui-node-id" style="font-size: 11px; word-break: break-all;">--</div>
                  </div>
                  <div class="dsms-webui-stat-card">
                    <div class="dsms-webui-stat-label">Protokoll</div>
                    <div class="dsms-webui-stat-value" id="webui-protocol">--</div>
                  </div>
                  <div class="dsms-webui-stat-card">
                    <div class="dsms-webui-stat-label">Agent</div>
                    <div class="dsms-webui-stat-value" id="webui-agent">--</div>
                  </div>
                </div>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
                  <div class="dsms-webui-stat-card">
                    <div class="dsms-webui-stat-label">Repo Größe</div>
                    <div class="dsms-webui-stat-value" id="webui-repo-size">--</div>
                    <div class="dsms-webui-stat-sub" id="webui-storage-info">--</div>
                  </div>
                  <div class="dsms-webui-stat-card">
                    <div class="dsms-webui-stat-label">Objekte</div>
                    <div class="dsms-webui-stat-value" id="webui-num-objects">--</div>
                  </div>
                  <div class="dsms-webui-stat-card">
                    <div class="dsms-webui-stat-label">Gepinnte Dokumente</div>
                    <div class="dsms-webui-stat-value" id="webui-pinned-count">--</div>
                  </div>
                </div>
                <div style="margin-top: 24px;">
                  <h4 style="margin: 0 0 12px 0;">Adressen</h4>
                  <div id="webui-addresses" style="background: var(--bp-input-bg); border-radius: 8px; padding: 12px; font-family: monospace; font-size: 12px; max-height: 150px; overflow-y: auto;">
                    Lade...
                  </div>
                </div>
              </div>

              <!-- Files Section -->
              <div id="dsms-webui-files" class="dsms-webui-section" style="display: none;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                  <h3 style="margin: 0;">Dateien hochladen</h3>
                </div>
                <div class="dsms-webui-upload-zone" id="dsms-upload-zone" ondrop="handleDsmsFileDrop(event)" ondragover="handleDsmsDragOver(event)" ondragleave="handleDsmsDragLeave(event)">
                  <div style="text-align: center;">
                    <div style="font-size: 48px; margin-bottom: 16px;">&#128229;</div>
                    <p style="color: var(--bp-text); margin-bottom: 8px;">Dateien hierher ziehen</p>
                    <p style="color: var(--bp-text-muted); font-size: 13px;">oder</p>
                    <input type="file" id="dsms-file-input" style="display: none;" onchange="handleDsmsFileSelect(event)" multiple>
                    <button class="btn btn-primary btn-sm" onclick="document.getElementById('dsms-file-input').click()">Dateien auswählen</button>
                  </div>
                </div>
                <div id="dsms-upload-progress" style="display: none; margin-top: 16px;">
                  <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
                    <div id="dsms-upload-status">Hochladen...</div>
                    <div style="background: var(--bp-border); border-radius: 4px; height: 8px; margin-top: 8px; overflow: hidden;">
                      <div id="dsms-upload-bar" style="background: var(--bp-primary); height: 100%; width: 0%; transition: width 0.3s;"></div>
                    </div>
                  </div>
                </div>
                <div id="dsms-upload-results" style="margin-top: 24px;"></div>
              </div>

              <!-- Explore Section -->
              <div id="dsms-webui-explore" class="dsms-webui-section" style="display: none;">
                <h3 style="margin: 0 0 24px 0;">IPFS Explorer</h3>
                <div style="display: flex; gap: 12px; margin-bottom: 24px;">
                  <input type="text" class="admin-search" placeholder="CID eingeben (z.B. QmXyz...)" id="webui-explore-cid" style="flex: 1;">
                  <button class="btn btn-primary btn-sm" onclick="exploreDsmsCid()">Erkunden</button>
                </div>
                <div id="dsms-explore-result" style="display: none;">
                  <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
                    <div id="dsms-explore-content"></div>
                  </div>
                </div>
              </div>

              <!-- Peers Section -->
              <div id="dsms-webui-peers" class="dsms-webui-section" style="display: none;">
                <h3 style="margin: 0 0 24px 0;">Verbundene Peers</h3>
                <p style="color: var(--bp-text-muted); margin-bottom: 16px;">
                  Hinweis: In einem privaten DSMS-Netzwerk sind normalerweise keine externen Peers verbunden.
                </p>
                <div id="webui-peers-list">
                  <div class="admin-loading">Lade Peers...</div>
                </div>
              </div>

              <!-- Config Section -->
              <div id="dsms-webui-config" class="dsms-webui-section" style="display: none;">
                <h3 style="margin: 0 0 24px 0;">Konfiguration</h3>
                <div style="display: grid; gap: 16px;">
                  <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
                    <h4 style="margin: 0 0 12px 0;">API Endpoints</h4>
                    <table style="width: 100%; font-size: 13px;">
                      <tr>
                        <td style="padding: 8px 0; color: var(--bp-text-muted);">IPFS API</td>
                        <td style="padding: 8px 0; font-family: monospace;">http://localhost:5001</td>
                      </tr>
                      <tr>
                        <td style="padding: 8px 0; color: var(--bp-text-muted);">DSMS Gateway</td>
                        <td style="padding: 8px 0; font-family: monospace;">http://localhost:8082</td>
                      </tr>
                      <tr>
                        <td style="padding: 8px 0; color: var(--bp-text-muted);">IPFS Gateway</td>
                        <td style="padding: 8px 0; font-family: monospace;">http://localhost:8085</td>
                      </tr>
                      <tr>
                        <td style="padding: 8px 0; color: var(--bp-text-muted);">Swarm P2P</td>
                        <td style="padding: 8px 0; font-family: monospace;">:4001</td>
                      </tr>
                    </table>
                  </div>
                  <div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
                    <h4 style="margin: 0 0 12px 0;">Aktionen</h4>
                    <div style="display: flex; flex-wrap: wrap; gap: 12px;">
                      <button class="btn btn-ghost btn-sm" onclick="runDsmsGarbageCollection()">&#128465; Garbage Collection</button>
                      <button class="btn btn-ghost btn-sm" onclick="loadDsmsWebUIData()">&#8635; Daten aktualisieren</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Legal Modal -->
      <div id="legal-modal" class="legal-modal">
        <div class="legal-modal-content">
          <div class="legal-modal-header">
            <h2>Rechtliches</h2>
            <button id="legal-modal-close" class="legal-modal-close">&times;</button>
          </div>
          <div class="legal-tabs">
            <button class="legal-tab active" data-tab="terms">AGB</button>
            <button class="legal-tab" data-tab="privacy">Datenschutz</button>
            <button class="legal-tab" data-tab="community">Community Guidelines</button>
            <button class="legal-tab" data-tab="cookies">Cookie-Einstellungen</button>
            <button class="legal-tab" data-tab="gdpr">DSGVO-Rechte</button>
          </div>
          <div class="legal-body">
            <div id="legal-terms" class="legal-content active">
              <div id="legal-terms-content">
                <div class="legal-loading">Lade AGB...</div>
              </div>
            </div>
            <div id="legal-privacy" class="legal-content">
              <div id="legal-privacy-content">
                <div class="legal-loading">Lade Datenschutzerklärung...</div>
              </div>
            </div>
            <div id="legal-community" class="legal-content">
              <div id="legal-community-content">
                <div class="legal-loading">Lade Community Guidelines...</div>
              </div>
            </div>
            <div id="legal-cookies" class="legal-content">
              <h3>Cookie-Einstellungen</h3>
              <p>Wir verwenden Cookies, um Ihnen die bestmögliche Erfahrung zu bieten. Hier können Sie Ihre Präferenzen jederzeit anpassen.</p>
              <div id="cookie-categories-container" class="cookie-categories">
                <div class="legal-loading">Lade Cookie-Kategorien...</div>
              </div>
              <button class="btn btn-primary" style="margin-top:16px" onclick="saveCookiePreferences()">Einstellungen speichern</button>
            </div>
            <div id="legal-gdpr" class="legal-content">
              <h3>Ihre DSGVO-Rechte (Art. 15-21)</h3>
              <p>Nach der Datenschutz-Grundverordnung haben Sie folgende Rechte:</p>
              <div class="gdpr-actions">
                <div class="gdpr-action">
                  <h4>📋 Auskunftsrecht (Art. 15)</h4>
                  <p>Erfahren Sie, welche personenbezogenen Daten wir über Sie verarbeiten.</p>
                  <button class="btn btn-sm" onclick="requestDataExport()">Auskunft anfordern</button>
                </div>
                <div class="gdpr-action">
                  <h4>✏️ Recht auf Berichtigung (Art. 16)</h4>
                  <p>Lassen Sie unrichtige Daten korrigieren oder unvollständige Daten ergänzen.</p>
                  <button class="btn btn-sm" onclick="requestDataCorrection()">Berichtigung beantragen</button>
                </div>
                <div class="gdpr-action">
                  <h4>🗑️ Recht auf Löschung (Art. 17)</h4>
                  <p>Beantragen Sie die vollständige Löschung Ihrer personenbezogenen Daten.</p>
                  <button class="btn btn-sm btn-danger" onclick="requestDataDeletion()">Löschung beantragen</button>
                </div>
                <div class="gdpr-action">
                  <h4>⏸️ Einschränkung der Verarbeitung (Art. 18)</h4>
                  <p>Verlangen Sie die Einschränkung der Verarbeitung Ihrer Daten.</p>
                  <button class="btn btn-sm" onclick="requestProcessingRestriction()">Einschränkung beantragen</button>
                </div>
                <div class="gdpr-action">
                  <h4>📢 Mitteilungspflicht (Art. 19)</h4>
                  <p>Wir informieren alle Empfänger über Berichtigungen, Löschungen oder Einschränkungen.</p>
                  <span style="color: var(--bp-text-muted); font-size: 12px;">Automatisch bei Berichtigung/Löschung</span>
                </div>
                <div class="gdpr-action">
                  <h4>📤 Datenübertragbarkeit (Art. 20)</h4>
                  <p>Exportieren Sie Ihre Daten in einem maschinenlesbaren Format (JSON).</p>
                  <button class="btn btn-sm" onclick="requestDataDownload()">Daten exportieren</button>
                </div>
                <div class="gdpr-action">
                  <h4>🚫 Widerspruchsrecht (Art. 21)</h4>
                  <p>Widersprechen Sie der Verarbeitung Ihrer Daten für bestimmte Zwecke.</p>
                  <button class="btn btn-sm" onclick="requestProcessingObjection()">Widerspruch einlegen</button>
                </div>
              </div>

              <div style="margin-top: 24px; padding: 16px; background: var(--bp-surface-elevated); border-radius: 8px; border: 1px solid var(--bp-border);">
                <h4 style="margin-top: 0;">Ihre Einwilligungen verwalten</h4>
                <p style="margin-bottom: 12px;">Sehen und widerrufen Sie Ihre erteilten Einwilligungen.</p>
                <button class="btn btn-sm" onclick="showConsentManager()">Einwilligungen verwalten</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Imprint Modal (Impressum - muss direkt erreichbar sein) -->
      <div id="imprint-modal" class="legal-modal">
        <div class="legal-modal-content">
          <div class="legal-modal-header">
            <h2>Impressum</h2>
            <button id="imprint-modal-close" class="legal-modal-close">&times;</button>
          </div>
          <div class="legal-body" style="padding: 24px;">
            <div id="imprint-content">
              <div class="legal-loading">Lade Impressum...</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Auth Modal -->
      <div id="auth-modal" class="auth-modal">
        <div class="auth-modal-content">
          <div class="auth-modal-header">
            <h2><span>🔐</span> Anmeldung</h2>
            <button id="auth-modal-close" class="legal-modal-close">&times;</button>
          </div>
          <div class="auth-tabs">
            <button class="auth-tab active" data-tab="login">Anmelden</button>
            <button class="auth-tab" data-tab="register">Registrieren</button>
          </div>
          <div class="auth-body">
            <!-- Login Tab -->
            <div id="auth-login" class="auth-content active">
              <div id="auth-login-error" class="auth-error"></div>
              <div id="auth-login-success" class="auth-success"></div>
              <form id="auth-login-form">
                <div class="auth-form-group">
                  <label class="auth-form-label">E-Mail</label>
                  <input type="email" class="auth-form-input" id="login-email" placeholder="ihre@email.de" required>
                </div>
                <div class="auth-form-group">
                  <label class="auth-form-label">Passwort</label>
                  <input type="password" class="auth-form-input" id="login-password" placeholder="Ihr Passwort" required>
                </div>
                <button type="submit" class="auth-btn auth-btn-primary" id="login-btn">Anmelden</button>
              </form>
              <div class="auth-link">
                <a href="#" id="auth-forgot-password">Passwort vergessen?</a>
              </div>
            </div>

            <!-- Register Tab -->
            <div id="auth-register" class="auth-content">
              <div id="auth-register-error" class="auth-error"></div>
              <div id="auth-register-success" class="auth-success"></div>
              <form id="auth-register-form">
                <div class="auth-form-group">
                  <label class="auth-form-label">Name (optional)</label>
                  <input type="text" class="auth-form-input" id="register-name" placeholder="Ihr Name">
                </div>
                <div class="auth-form-group">
                  <label class="auth-form-label">E-Mail</label>
                  <input type="email" class="auth-form-input" id="register-email" placeholder="ihre@email.de" required>
                </div>
                <div class="auth-form-group">
                  <label class="auth-form-label">Passwort</label>
                  <input type="password" class="auth-form-input" id="register-password" placeholder="Mind. 8 Zeichen" required minlength="8">
                </div>
                <div class="auth-form-group">
                  <label class="auth-form-label">Passwort bestätigen</label>
                  <input type="password" class="auth-form-input" id="register-password-confirm" placeholder="Passwort wiederholen" required>
                </div>
                <button type="submit" class="auth-btn auth-btn-primary" id="register-btn">Registrieren</button>
              </form>
              <div class="auth-link">
                Bereits registriert? <a href="#" id="auth-goto-login">Hier anmelden</a>
              </div>
            </div>

            <!-- Forgot Password Tab (hidden by default) -->
            <div id="auth-forgot" class="auth-content">
              <div id="auth-forgot-error" class="auth-error"></div>
              <div id="auth-forgot-success" class="auth-success"></div>
              <p style="color: var(--bp-text-muted); font-size: 13px; margin-bottom: 16px;">
                Geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Link zum Zurücksetzen Ihres Passworts.
              </p>
              <form id="auth-forgot-form">
                <div class="auth-form-group">
                  <label class="auth-form-label">E-Mail</label>
                  <input type="email" class="auth-form-input" id="forgot-email" placeholder="ihre@email.de" required>
                </div>
                <button type="submit" class="auth-btn auth-btn-primary" id="forgot-btn">Link senden</button>
              </form>
              <div class="auth-link">
                <a href="#" id="auth-back-to-login">Zurück zur Anmeldung</a>
              </div>
            </div>

            <!-- Reset Password Tab (hidden by default, shown via URL token) -->
            <div id="auth-reset" class="auth-content">
              <div id="auth-reset-error" class="auth-error"></div>
              <div id="auth-reset-success" class="auth-success"></div>
              <form id="auth-reset-form">
                <div class="auth-form-group">
                  <label class="auth-form-label">Neues Passwort</label>
                  <input type="password" class="auth-form-input" id="reset-password" placeholder="Mind. 8 Zeichen" required minlength="8">
                </div>
                <div class="auth-form-group">
                  <label class="auth-form-label">Passwort bestätigen</label>
                  <input type="password" class="auth-form-input" id="reset-password-confirm" placeholder="Passwort wiederholen" required>
                </div>
                <input type="hidden" id="reset-token">
                <button type="submit" class="auth-btn auth-btn-primary" id="reset-btn">Passwort ändern</button>
              </form>
            </div>

            <!-- Email Verification Tab (hidden by default, shown via URL token) -->
            <div id="auth-verify" class="auth-content">
              <div id="auth-verify-error" class="auth-error"></div>
              <div id="auth-verify-success" class="auth-success"></div>
              <div style="text-align: center; padding: 20px 0;">
                <div id="auth-verify-loading" style="color: var(--bp-text-muted);">
                  E-Mail wird verifiziert...
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Notification Preferences Modal -->
      <div id="notification-prefs-modal" class="notification-prefs-modal">
        <div class="notification-prefs-content">
          <div class="auth-modal-header">
            <h2>Benachrichtigungseinstellungen</h2>
            <button class="legal-modal-close" onclick="closeNotificationPreferences()">&times;</button>
          </div>
          <div class="auth-body">
            <div class="notification-pref-item">
              <div>
                <div class="notification-pref-label">E-Mail-Benachrichtigungen</div>
                <div class="notification-pref-desc">Wichtige Updates per E-Mail erhalten</div>
              </div>
              <div class="toggle-switch active" id="pref-email-toggle" onclick="toggleNotificationPref('email')">
                <div class="toggle-switch-handle"></div>
              </div>
            </div>
            <div class="notification-pref-item">
              <div>
                <div class="notification-pref-label">In-App-Benachrichtigungen</div>
                <div class="notification-pref-desc">Benachrichtigungen in der App anzeigen</div>
              </div>
              <div class="toggle-switch active" id="pref-inapp-toggle" onclick="toggleNotificationPref('inapp')">
                <div class="toggle-switch-handle"></div>
              </div>
            </div>
            <div class="notification-pref-item">
              <div>
                <div class="notification-pref-label">Push-Benachrichtigungen</div>
                <div class="notification-pref-desc">Browser-Push-Benachrichtigungen aktivieren</div>
              </div>
              <div class="toggle-switch" id="pref-push-toggle" onclick="toggleNotificationPref('push')">
                <div class="toggle-switch-handle"></div>
              </div>
            </div>
            <div style="margin-top: 20px;">
              <button class="auth-btn auth-btn-primary" onclick="saveNotificationPreferences()">Speichern</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Suspension Overlay -->
      <div id="suspension-overlay" class="suspension-overlay">
        <div class="suspension-content">
          <div class="suspension-icon">🚫</div>
          <div class="suspension-title">Account vorübergehend gesperrt</div>
          <div class="suspension-message">
            Ihr Account wurde gesperrt, da ausstehende Zustimmungen nicht innerhalb der Frist erteilt wurden.
            Bitte bestätigen Sie die folgenden Dokumente, um Ihren Account wiederherzustellen.
          </div>
          <div class="suspension-docs">
            <div class="suspension-docs-title">Ausstehende Dokumente:</div>
            <div id="suspension-doc-list">
              <!-- Will be populated dynamically -->
            </div>
          </div>
          <button class="suspension-btn" onclick="showConsentModal()">
            Jetzt bestätigen
          </button>
          <div class="suspension-countdown" id="suspension-countdown"></div>
        </div>
      </div>

    </div>
    <script src="/static/js/studio.js"></script>
  </body>
</html>