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>