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>

updater/templates/maintenance.html

@@ -5,37 +5,87 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="refresh" content="15">
     <title>Wartungsmodus</title>
+    <!-- Bewusst vollstaendig eigenstaendig: waehrend des Updates koennen
+         assets/ und externe Ressourcen kurzzeitig nicht verfuegbar sein. -->
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
+        *, *::before, *::after { box-sizing: border-box; }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            margin: 0;
             min-height: 100vh;
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 20px;
+            padding: 24px;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            color: #101625;
+            background:
+                radial-gradient(760px 420px at 12% -8%, #eeeefc, transparent 62%),
+                radial-gradient(620px 420px at 100% 6%, rgba(139,92,246,.12), transparent 64%),
+                #f6f7f9;
+            -webkit-font-smoothing: antialiased;
         }
         .card {
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-            max-width: 460px;
             width: 100%;
-            padding: 48px 40px;
+            max-width: 440px;
+            padding: 40px 34px;
             text-align: center;
+            background: #fff;
+            border: 1px solid #e5e8ee;
+            border-radius: 20px;
+            box-shadow: 0 28px 60px -24px rgba(16,24,40,.28), 0 8px 24px -12px rgba(16,24,40,.12);
+        }
+        .icon {
+            width: 52px; height: 52px;
+            margin: 0 auto 22px;
+            display: flex; align-items: center; justify-content: center;
+            border-radius: 14px;
+            background: linear-gradient(135deg, #5b5bd6 0%, #8b5cf6 100%);
+            box-shadow: 0 10px 24px -10px rgba(91,91,214,.9);
+        }
+        .icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
+        h1 { margin: 0 0 10px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
+        p { margin: 0; color: #525c6e; font-size: 14px; line-height: 1.6; }
+        .bar {
+            position: relative;
+            height: 4px;
+            margin: 26px 0 16px;
+            border-radius: 999px;
+            background: #eef0f4;
+            overflow: hidden;
+        }
+        .bar::after {
+            content: '';
+            position: absolute; top: 0; left: 0;
+            width: 38%; height: 100%;
+            border-radius: 999px;
+            background: linear-gradient(90deg, #5b5bd6, #8b5cf6);
+            animation: slide 1.6s ease-in-out infinite;
+        }
+        @keyframes slide {
+            0%   { transform: translateX(-100%); }
+            100% { transform: translateX(300%); }
+        }
+        .hint { font-size: 12.5px; color: #8a93a3; }
+        @media (prefers-color-scheme: dark) {
+            body { color: #e9ecf3; background: radial-gradient(760px 420px at 12% -8%, #1a1c30, transparent 62%), #0a0c11; }
+            .card { background: #12151d; border-color: #232838; }
+            p { color: #a2abbd; }
+            .bar { background: #1a1f2b; }
+            .hint { color: #6f7889; }
         }
-        .icon { font-size: 56px; margin-bottom: 20px; }
-        h1 { color: #333; font-size: 24px; margin-bottom: 12px; }
-        p { color: #666; line-height: 1.6; font-size: 15px; }
-        .hint { margin-top: 24px; font-size: 13px; color: #999; }
     </style>
 </head>
 <body>
     <div class="card">
-        <div class="icon">🛠️</div>
+        <div class="icon">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M14.7 6.3a4 4 0 0 1 5.3 5.3l-8 8a2.8 2.8 0 0 1-4-4l8-8"/>
+                <path d="M4 20l2-6"/>
+            </svg>
+        </div>
         <h1>Kurz mal Wartung</h1>
         <p>Es wird gerade ein Update eingespielt. Die Seite ist in wenigen Augenblicken wieder erreichbar.</p>
+        <div class="bar"></div>
         <p class="hint">Diese Seite aktualisiert sich automatisch.</p>
     </div>
 </body>

updater/templates/update.php

@@ -1,7 +1,7 @@
 <?php
 /**
- * Admin-UI fuer den Updater. Standalone-Template mit Inline-CSS/JS
- * (das Projekt hat kein gemeinsames Admin-Layout-/Template-System).
+ * Admin-UI fuer den Updater. Nutzt das gemeinsame Design-System
+ * (assets/global.css); nur Updater-spezifische Regeln stehen inline.
  *
  * Verfuegbare Variablen: $manager, $auth, $currentSha, $channel, $csrfToken
  *
@@ -20,75 +20,58 @@ $channels = \Updater\UpdateManager::CHANNELS;
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>System-Update</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="../assets/global.css">
+    <script>(function(){ const t=localStorage.getItem('theme')||'light'; document.documentElement.setAttribute('data-theme',t); })();</script>
     <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 30px 20px;
-        }
-        .wrap { max-width: 760px; margin: 0 auto; }
-        .topbar {
-            display: flex; justify-content: space-between; align-items: center;
-            margin-bottom: 24px;
-        }
-        .topbar h1 { color: #fff; font-size: 22px; }
-        .topbar a {
-            background: rgba(255,255,255,.18); color: #fff; text-decoration: none;
-            padding: 9px 16px; border-radius: 8px; font-size: 14px;
-        }
-        .card {
-            background: #fff; border-radius: 16px; padding: 28px;
-            box-shadow: 0 14px 40px rgba(0,0,0,.2); margin-bottom: 22px;
-        }
-        .card h2 { font-size: 16px; color: #333; margin-bottom: 16px; }
-        .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
-        .row:last-child { border-bottom: none; }
-        .row .k { color: #777; font-size: 14px; }
-        .row .v { color: #222; font-size: 14px; font-weight: 600; font-family: monospace; }
-        .btn {
-            background: #667eea; color: #fff; border: none; border-radius: 9px;
-            padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
-            transition: background .2s;
-        }
-        .btn:hover { background: #5568d3; }
-        .btn:disabled { background: #bbb; cursor: not-allowed; }
-        .btn-green { background: #2e9e5b; }
-        .btn-green:hover { background: #257d49; }
-        select {
-            padding: 10px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px;
-        }
-        .muted { color: #888; font-size: 13px; margin-top: 8px; }
-        .progress-wrap { display: none; margin-top: 16px; }
-        .progress-bar { height: 14px; background: #eee; border-radius: 8px; overflow: hidden; }
-        .progress-fill { height: 100%; width: 0; background: #667eea; transition: width .3s; }
-        .progress-msg { font-size: 13px; color: #555; margin-top: 8px; }
-        .alert { padding: 12px 14px; border-radius: 9px; font-size: 14px; margin-top: 14px; display: none; }
-        .alert.show { display: block; }
-        .alert-error { background: #fee; border: 1px solid #fcc; color: #c33; }
-        .alert-ok { background: #efe; border: 1px solid #cfc; color: #2a7; }
+        /* Updater-spezifisch – der Rest kommt aus dem gemeinsamen Design-System. */
+        .wrap { max-width: 780px; margin: 0 auto; padding: 36px 0 60px; }
+        .update-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
+        .update-head .title { display: flex; align-items: center; gap: 13px; }
+        .kv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-color); }
+        .kv-row:last-of-type { border-bottom: none; }
+        .kv-row .k { color: var(--text-secondary); font-size: 13.5px; }
+        .kv-row .v { color: var(--text-primary); font-size: 13.5px; font-weight: 600; font-family: var(--font-mono); }
+        .kv-row .v select { font-family: var(--font-sans); font-weight: 500; width: auto; min-width: 150px; }
+        .progress-wrap { display: none; margin-top: 18px; }
+        .progress-bar { height: 8px; border-radius: var(--r-pill); background: var(--bg-hover); overflow: hidden; }
+        .progress-fill { height: 100%; width: 0; border-radius: var(--r-pill); background: var(--accent); transition: width .3s; }
+        .progress-msg { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
+        .alert { display: none; margin: 16px 0 0; }
+        .alert.show { display: flex; }
         .changelog {
-            background: #f8f9fb; border-radius: 9px; padding: 14px; margin-top: 14px;
-            font-size: 13px; color: #444; white-space: pre-wrap; max-height: 260px; overflow: auto;
             display: none;
+            margin-top: 16px; padding: 14px;
+            max-height: 260px; overflow: auto;
+            background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: var(--r-md);
+            font-size: 13px; color: var(--text-secondary); white-space: pre-wrap;
         }
-        .mig-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
-        .badge { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
-        .badge-on { background: #e3f6ea; color: #2a7; }
-        .badge-off { background: #fdeaea; color: #c33; }
-        .tabs { display: flex; gap: 8px; margin-bottom: 16px; }
-        .tab { padding: 8px 14px; border-radius: 8px; background: #f0f0f0; cursor: pointer; font-size: 14px; }
-        .tab.active { background: #667eea; color: #fff; }
+        .mig-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-color); font-size: 13.5px; }
+        .mig-item:last-child { border-bottom: none; }
+        .mig-item span:first-child { font-family: var(--font-mono); font-size: 12.5px; }
+        .badge-on  { background: var(--success-soft); color: var(--success); border: 1px solid var(--success-border); }
+        .badge-off { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning-border); }
+        .tabs { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 18px; background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: var(--r-md); }
+        .tab { padding: 7px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 550; color: var(--text-secondary); cursor: pointer; }
+        .tab.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-xs); font-weight: 600; }
         .pane { display: none; }
         .pane.active { display: block; }
     </style>
 </head>
-<body>
+<body class="app-body">
 <div class="wrap">
-    <div class="topbar">
-        <h1>🔄 System-Update</h1>
-        <a href="/admin/">← Administration</a>
+    <div class="update-head">
+        <div class="title">
+            <span class="focus-icon"><i class="fas fa-rotate"></i></span>
+            <div>
+                <h1 style="font-size:20px;">System-Update</h1>
+                <p class="sub">Aktualisierung aus dem gewählten Release-Channel</p>
+            </div>
+        </div>
+        <a href="/admin/" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Administration</a>
     </div>
 
     <div class="tabs">
@@ -99,8 +82,8 @@ $channels = \Updater\UpdateManager::CHANNELS;
     <div class="pane active" id="pane-update">
         <div class="card">
             <h2>Aktuelle Version</h2>
-            <div class="row"><span class="k">Installierte Version (SHA)</span><span class="v" id="curSha"><?= htmlspecialchars($shortSha) ?></span></div>
-            <div class="row"><span class="k">Update-Channel</span>
+            <div class="kv-row"><span class="k">Installierte Version (SHA)</span><span class="v" id="curSha"><?= htmlspecialchars($shortSha) ?></span></div>
+            <div class="kv-row"><span class="k">Update-Channel</span>
                 <span class="v">
                     <select id="channel">
                         <?php foreach ($channels as $key => $url): ?>
@@ -114,8 +97,8 @@ $channels = \Updater\UpdateManager::CHANNELS;
 
         <div class="card">
             <h2>Updates</h2>
-            <button class="btn" id="btnCheck">Auf Updates prüfen</button>
-            <button class="btn btn-green" id="btnInstall" style="display:none;">Update installieren</button>
+            <button class="btn btn-primary" id="btnCheck"><i class="fas fa-magnifying-glass"></i> Auf Updates prüfen</button>
+            <button class="btn btn-success" id="btnInstall" style="display:none;margin-left:8px;"><i class="fas fa-download"></i> Update installieren</button>
 
             <div class="changelog" id="changelog"></div>
 
@@ -133,7 +116,7 @@ $channels = \Updater\UpdateManager::CHANNELS;
         <div class="card">
             <h2>Migrations-Status</h2>
             <div id="migList"><p class="muted">Wird geladen …</p></div>
-            <button class="btn" id="btnRunMig" style="margin-top:16px; display:none;">Ausstehende Migrationen ausführen</button>
+            <button class="btn btn-primary" id="btnRunMig" style="margin-top:16px; display:none;">Ausstehende Migrationen ausführen</button>
             <div class="alert alert-ok" id="migAlert"></div>
         </div>
     </div>
@@ -171,7 +154,7 @@ $('channel').addEventListener('change', async (e) => {
 // Auf Updates pruefen
 $('btnCheck').addEventListener('click', async () => {
     clearAlerts();
-    $('btnCheck').disabled = true; $('btnCheck').textContent = 'Prüfe …';
+    $('btnCheck').disabled = true; $('btnCheck').innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Prüfe …';
     try {
         const r = await fetch('update.php?action=check');
         const d = await r.json();
@@ -193,7 +176,7 @@ $('btnCheck').addEventListener('click', async () => {
     } catch (e) {
         showAlert('error', 'Prüfung fehlgeschlagen: ' + e.message);
     } finally {
-        $('btnCheck').disabled = false; $('btnCheck').textContent = 'Auf Updates prüfen';
+        $('btnCheck').disabled = false; $('btnCheck').innerHTML = '<i class="fas fa-magnifying-glass"></i> Auf Updates prüfen';
     }
 });