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>

login.php

@@ -127,57 +127,50 @@ try {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= __('login_title') ?> – <?= htmlspecialchars($appTitle) ?></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, Oxygen, Ubuntu, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
-        .login-container { background: var(--bg-card); border-radius: 20px; box-shadow: 0 20px 60px var(--shadow-lg); max-width: 420px; width: 100%; padding: 50px 40px; text-align: center; }
-        .logo { max-width: 200px; height: auto; margin-bottom: 30px; }
-        h1 { color: var(--text-primary); font-size: 28px; margin-bottom: 10px; }
-        .subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 30px; }
-        .form-group { margin-bottom: 20px; text-align: left; }
-        label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-weight: 500; font-size: 14px; }
-        input[type="email"], input[type="password"] { width: 100%; padding: 14px; border: 2px solid var(--border-color); border-radius: 10px; font-size: 15px; background: var(--bg-input); color: var(--text-primary); transition: all 0.2s; }
-        input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
-        .btn { width: 100%; padding: 14px; background: var(--accent); color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 10px; }
-        .btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102,126,234,0.4); }
-        .btn-microsoft { background: #2f2f2f; color: white; border: none; margin-top: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; border-radius: 10px; width: 100%; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
-        .btn-microsoft:hover { background: #1a1a1a; transform: translateY(-2px); }
-        .btn-microsoft svg { width: 20px; height: 20px; }
-        .divider { margin: 22px 0; text-align: center; position: relative; }
-        .divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-color); }
-        .divider span { background: var(--bg-card); padding: 0 15px; color: var(--text-muted); font-size: 13px; position: relative; z-index: 1; }
-        .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
-        .alert-error   { background: #fee; border: 1px solid #fcc; color: #c33; }
-        .alert-success { background: #efe; border: 1px solid #cfc; color: #3c3; }
-        .back-link { display: block; margin-top: 20px; color: var(--accent); text-decoration: none; font-size: 14px; }
-        .back-link:hover { text-decoration: underline; }
-        .local-login-link { display: block; margin-top: 20px; color: var(--text-muted); text-decoration: none; font-size: 13px; }
-        .local-login-link:hover { color: var(--accent); text-decoration: underline; }
-        .forgot-link { display: block; margin-top: 12px; text-align: right; color: var(--text-muted); font-size: 13px; text-decoration: none; }
-        .forgot-link:hover { color: var(--accent); text-decoration: underline; }
-        .header-tools { position: absolute; top: 20px; right: 20px; display: flex; gap: 8px; }
-    </style>
 </head>
-<body>
-<div style="position:fixed;top:15px;right:20px;display:flex;gap:8px;z-index:10;">
-    <div class="lang-switcher">
-        <?php foreach (I18n::getAvailable() as $code => $label): ?>
-        <button class="lang-btn <?= I18n::getLanguage() === $code ? 'active' : '' ?>"
-                onclick="switchLanguage('<?= $code ?>')"><?= strtoupper($code) ?></button>
-        <?php endforeach; ?>
+<body class="auth-body">
+
+<section class="auth-visual">
+    <div class="auth-brand">
+        <span class="brand-mark"><i class="fas fa-wifi"></i></span>
+        <span><?= htmlspecialchars($appTitle) ?></span>
+    </div>
+    <div class="auth-claim">
+        <h2><?= __('auth_claim_title') ?></h2>
+        <p><?= __('auth_claim_text') ?></p>
+        <ul class="auth-features">
+            <li><span class="tick"><i class="fas fa-check"></i></span> <?= __('auth_feature_1') ?></li>
+            <li><span class="tick"><i class="fas fa-check"></i></span> <?= __('auth_feature_2') ?></li>
+            <li><span class="tick"><i class="fas fa-check"></i></span> <?= __('auth_feature_3') ?></li>
+        </ul>
+    </div>
+    <div class="auth-foot">&copy; <?= date('Y') ?> <?= htmlspecialchars($appTitle) ?></div>
+</section>
+
+<section class="auth-panel">
+    <div class="auth-tools">
+        <div class="lang-switcher">
+            <?php foreach (I18n::getAvailable() as $code => $label): ?>
+            <button class="lang-btn <?= I18n::getLanguage() === $code ? 'active' : '' ?>"
+                    onclick="switchLanguage('<?= $code ?>')"><?= strtoupper($code) ?></button>
+            <?php endforeach; ?>
+        </div>
+        <button id="darkModeBtn" class="dark-mode-toggle" onclick="toggleDarkMode()" title="Dark Mode">
+            <i class="fas fa-moon"></i>
+        </button>
     </div>
-    <button id="darkModeBtn" class="dark-mode-toggle" onclick="toggleDarkMode()" title="Dark Mode">🌙</button>
-</div>
 
 <div class="login-container">
     <?php if ($logoUrl): ?>
         <img src="<?= htmlspecialchars($logoUrl) ?>" alt="Logo" class="logo">
-    <?php else: ?>
-        <h1><?= htmlspecialchars($appTitle) ?></h1>
     <?php endif; ?>
-
+    <h1><?= __('login_title') ?></h1>
     <p class="subtitle"><?= __('login_subtitle') ?></p>
 
     <?php if ($error): ?>
@@ -189,20 +182,19 @@ try {
 
     <?php if ($show2fa): ?>
         <form method="post">
-            <p style="color:var(--text-secondary,#666);font-size:14px;margin-bottom:18px;">
+            <p class="subtitle">
                 Bitte geben Sie den 6-stelligen Code aus Ihrer Authenticator-App ein
                 – oder einen Ihrer Recovery-Codes.
             </p>
             <div class="form-group">
                 <label for="totp_code">Code</label>
-                <input type="text" id="totp_code" name="totp_code" maxlength="9"
+                <input type="text" id="totp_code" name="totp_code" maxlength="9" class="code-input"
                        autocomplete="one-time-code" required autofocus
-                       placeholder="123456 oder XXXX-XXXX"
-                       style="letter-spacing:3px;text-align:center;font-size:18px;">
+                       placeholder="123456">
             </div>
-            <button type="submit" class="btn">Bestätigen</button>
+            <button type="submit" class="btn btn-primary btn-lg">Bestätigen</button>
         </form>
-        <a href="login.php" class="local-login-link">Abbrechen</a>
+        <div class="auth-links"><a href="login.php" class="local-login-link">Abbrechen</a></div>
     <?php elseif ($m365Enabled && !$showLocalLogin): ?>
         <a href="<?= htmlspecialchars($m365LoginUrl) ?>" class="btn-microsoft">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
@@ -213,7 +205,7 @@ try {
             </svg>
             <?= __('login_ms') ?>
         </a>
-        <a href="?local=1" class="local-login-link"><?= __('login_local') ?></a>
+        <div class="auth-links"><a href="?local=1" class="local-login-link"><?= __('login_local') ?></a></div>
     <?php else: ?>
         <form method="post">
             <div class="form-group">
@@ -227,7 +219,7 @@ try {
             <?php if ($smtpEnabled): ?>
             <a href="forgot_password.php" class="forgot-link"><?= __('login_forgot') ?></a>
             <?php endif; ?>
-            <button type="submit" class="btn"><?= __('login_btn') ?></button>
+            <button type="submit" class="btn btn-primary btn-lg"><?= __('login_btn') ?></button>
         </form>
 
         <?php if ($m365Enabled): ?>
@@ -246,15 +238,16 @@ try {
 
     <?php if (!$show2fa && $oidcEnabled): ?>
         <div class="divider"><span><?= __('or') ?></span></div>
-        <a href="<?= htmlspecialchars($oidcLoginUrl) ?>" class="btn" style="display:block;text-align:center;text-decoration:none;background:#444;">
-            🔑 <?= htmlspecialchars($oidcName) ?>
+        <a href="<?= htmlspecialchars($oidcLoginUrl) ?>" class="btn btn-secondary btn-lg">
+            <i class="fas fa-key"></i> <?= htmlspecialchars($oidcName) ?>
         </a>
     <?php endif; ?>
 
     <?php if ($publicAccess): ?>
-        <a href="index.php" class="back-link"><?= __('login_back') ?></a>
+        <div class="auth-links"><a href="index.php" class="back-link"><i class="fas fa-arrow-left"></i> <?= __('login_back') ?></a></div>
     <?php endif; ?>
 </div>
+</section>
 
 <script src="assets/global.js"></script>
 </body>