Redesign: gemeinsames Design-System für Frontend und Backend

Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen
jetzt ein einziges Stylesheet (assets/global.css) statt pro Seite
dupliziertem Inline-CSS.

Design-System
- Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und
  Layout-Maße; Dark Mode ausschließlich über Tokens (keine !important-
  Overrides mehr)
- Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts,
  Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States
- Schrift Inter mit System-Fallback

Oberfläche
- Admin-Shell neu: durchgehende Sidebar mit Marke, gruppierter Navigation
  und Benutzerbereich; schlanke Topbar mit Breadcrumb
- Dashboard: ruhige KPI-Kacheln mit Icon-Chips, Charts an Theme-Farben
  gekoppelt
- Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur und
  Ticket-Darstellung des erstellten Codes inkl. QR-Code
- Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten
- Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt
  bewusst eigenständig ohne externe Abhängigkeiten)
- Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt

Nebenbei behoben
- Falscher SRI-Hash blockierte qrcode.min.js – QR-Codes wurden auf der
  Voucher-Seite und bei der 2FA-Einrichtung nie gerendert
- assets/global.css wurde in mehreren Admin-Seiten über einen falschen
  Pfad eingebunden ($adminBase = '' statt '../')
- TinyMCE lädt ohne API-Key jetzt die GPL-Variante von cdnjs – kein
  "valid API key required"-Banner mehr im Einstellungs-Editor
- Tabellen in Cards scrollen horizontal statt zu überlaufen

Screenshots in docs/screenshots neu erstellt, README aktualisiert (neuer
Abschnitt "Design-System", Version 2.5.0).

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

admin/settings.php

@@ -207,54 +207,18 @@ $adminBase = '';
     <?php if (!empty($cs['tinymce_api_key'])): ?>
     <script src="https://cdn.tiny.cloud/1/<?= htmlspecialchars($cs['tinymce_api_key']) ?>/tinymce/6/tinymce.min.js"></script>
     <?php else: ?>
-    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script>
+    <!-- Ohne API-Key die GPL-Variante von cdnjs laden: gleiche Funktionen, kein Hinweis-Banner. -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3/tinymce.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script>window.TINYMCE_BASE_URL = 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.3';</script>
     <?php endif; ?>
 
     <?php include __DIR__ . '/../includes/admin_nav.php'; ?>
 
-    <style>
-        .page-header { margin-bottom: 30px; }
-        .page-title  { font-size: 28px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
-        .alert { padding: 14px 20px; border-radius: 10px; margin-bottom: 25px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
-        .alert-error   { background: #fee; border: 1px solid #fcc; color: #c33; }
-        .alert-success { background: #efe; border: 1px solid #cfc; color: #3c3; }
-        .tab-container { background: var(--bg-card); border-radius: 15px; box-shadow: 0 2px 10px var(--shadow); border: 1px solid var(--border-color); overflow: hidden; }
-        .tab-navigation { display: flex; background: var(--bg-table-head); border-bottom: 2px solid var(--border-color); overflow-x: auto; position: sticky; top: 70px; z-index: 50; }
-        .tab-button { padding: 15px 20px; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: all 0.3s; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
-        .tab-button:hover { background: rgba(102,126,234,0.1); color: var(--accent); }
-        .tab-button.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--bg-card); }
-        .tab-content { display: none; padding: 30px; animation: fadeIn 0.2s; }
-        .tab-content.active { display: block; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-        .form-group { margin-bottom: 20px; }
-        label { display: block; margin-bottom: 7px; color: var(--text-secondary); font-weight: 500; font-size: 14px; }
-        input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="email"], select, textarea { width: 100%; padding: 11px 14px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 14px; transition: border-color 0.2s; font-family: inherit; background: var(--bg-input); color: var(--text-primary); }
-        input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
-        textarea { resize: vertical; min-height: 100px; }
-        .checkbox-group { display: flex; align-items: center; gap: 10px; }
-        .checkbox-group input { width: auto; accent-color: var(--accent); }
-        .help-text { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
-        .info-box { background: #e7f3ff; border: 1px solid #b3d9ff; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
-        .info-box h4 { color: #0066cc; margin-bottom: 8px; font-size: 14px; }
-        .info-box p { color: #004d99; font-size: 13px; line-height: 1.5; }
-        .section-divider { border: none; border-top: 2px solid var(--border-color); margin: 28px 0; }
-        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
-        .placeholder-info { background: #fff9e6; border: 1px solid #ffe066; border-radius: 8px; padding: 14px; margin: 14px 0; }
-        .placeholder-info h4 { color: #996600; margin-bottom: 8px; font-size: 14px; }
-        .placeholder-info code { background: #fff; padding: 2px 6px; border-radius: 3px; font-size: 12px; color: #d63384; }
-        .placeholder-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
-        .btn-primary { background: var(--accent); color: white; }
-        .btn-primary:hover { background: var(--accent-hover); }
-        .btn-danger { background: #dc3545; color: white; }
-        .btn-small { padding: 6px 12px; font-size: 13px; }
-        .token-box { background: var(--bg-hover); padding: 14px; border-radius: 6px; font-family: monospace; word-break: break-all; color: var(--text-primary); }
-        code { background: var(--code-bg); color: var(--accent); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
-    </style>
-</head>
-
     <div class="page-header">
-        <h1 class="page-title"><?= __('settings_title') ?></h1>
-        <p style="color: var(--text-muted); font-size: 14px;"><?= __('settings_subtitle') ?></p>
+        <div>
+            <h1 class="page-title"><?= __('settings_title') ?></h1>
+            <p class="page-subtitle"><?= __('settings_subtitle') ?></p>
+        </div>
     </div>
 
     <?php if ($error): ?>
@@ -486,7 +450,7 @@ $adminBase = '';
         </div>
     </div>
 
-</div><!-- main-content -->
+</main>
 
 <script src="../assets/global.js"></script>
 <script>
@@ -551,15 +515,25 @@ async function testCronJob() {
 }
 
 function initTinyMCE() {
-    tinymce.init({
+    if (typeof tinymce === 'undefined') return;
+    const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+    const config = {
         selector: '.tinymce-editor',
         height: 350,
         menubar: false,
         plugins: ['advlist','autolink','lists','link','searchreplace','visualblocks','code','fullscreen','table','help','wordcount'],
         toolbar: 'undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright | bullist numlist | removeformat | help',
-        content_style: 'body { font-family: -apple-system, sans-serif; font-size: 14px; line-height: 1.6; }',
+        content_style: "body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.6; }",
+        skin: dark ? 'oxide-dark' : 'oxide',
+        content_css: dark ? 'dark' : 'default',
         branding: false, promotion: false
-    });
+    };
+    if (window.TINYMCE_BASE_URL) {
+        tinymce.baseURL = window.TINYMCE_BASE_URL;
+        config.base_url = window.TINYMCE_BASE_URL;
+        config.suffix = '.min';
+    }
+    tinymce.init(config);
 }
 </script>
 </body>