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/users.php

@@ -171,52 +171,6 @@ $currentPage = 'users';
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= __('users_title') ?> – <?= htmlspecialchars($appTitle) ?></title>
 <?php include __DIR__ . '/../includes/admin_nav.php'; ?>
-<style>
-    .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
-    .page-title { font-size: 26px; font-weight: 700; color: var(--text-primary); }
-    .card { background: var(--bg-card); border-radius: 14px; box-shadow: 0 2px 10px var(--shadow); border: 1px solid var(--border-color); overflow: hidden; margin-bottom: 24px; }
-    .card-header { padding: 18px 22px; border-bottom: 1px solid var(--border-color); }
-    .card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
-    .alert { padding: 13px 18px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; }
-    .alert-error   { background: #fee; border: 1px solid #fcc; color: #c33; }
-    .alert-success { background: #efe; border: 1px solid #cfc; color: #3c3; }
-    .table { width: 100%; border-collapse: collapse; }
-    .table th { text-align: left; padding: 12px 15px; background: var(--bg-table-head); color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
-    .table td { padding: 13px 15px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 14px; }
-    .table tr:last-child td { border-bottom: none; }
-    .table tr:hover { background: var(--bg-hover); }
-    .badge { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 500; margin: 2px; }
-    .badge-success { background: #d4edda; color: #155724; }
-    .badge-warning { background: #fff3cd; color: #856404; }
-    .badge-danger  { background: #f8d7da; color: #721c24; }
-    .badge-info    { background: var(--bg-badge-info); color: var(--text-badge-info); }
-    .btn { padding: 8px 16px; border-radius: 8px; border: none; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: all .2s; font-size: 13px; }
-    .btn-primary { background: var(--accent); color: white; }
-    .btn-primary:hover { background: var(--accent-hover); }
-    .btn-secondary { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-color); }
-    .btn-secondary:hover { background: var(--border-color); }
-    .btn-danger { background: var(--danger); color: white; }
-    .btn-warning { background: var(--warning); color: #333; }
-    .btn-sm { padding: 5px 10px; font-size: 12px; }
-    .modal { display: none; position: fixed; inset: 0; background: var(--modal-overlay); z-index: 1000; align-items: center; justify-content: center; }
-    .modal.active { display: flex; }
-    .modal-content { background: var(--bg-card); border-radius: 14px; max-width: 580px; width: 90%; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-color); }
-    .modal-header { padding: 22px 25px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
-    .modal-title { font-size: 19px; font-weight: 600; color: var(--text-primary); }
-    .modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); }
-    .modal-body { padding: 22px 25px; }
-    .form-group { margin-bottom: 18px; }
-    label { display: block; margin-bottom: 7px; color: var(--text-secondary); font-weight: 500; font-size: 14px; }
-    input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 11px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 14px; background: var(--bg-input); color: var(--text-primary); transition: border-color .2s; }
-    input:focus { outline: none; border-color: var(--accent); }
-    .checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
-    .checkbox-group input { width: auto; }
-    .site-selection { border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; max-height: 180px; overflow-y: auto; background: var(--bg-hover); }
-    .empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
-    .empty-state i { font-size: 40px; margin-bottom: 15px; opacity: .3; display: block; }
-    .action-btns { display: flex; gap: 5px; flex-wrap: wrap; }
-    @media(max-width:768px){ .main-content{ margin-left:0!important; } .table th:nth-child(5),.table td:nth-child(5){ display:none; } }
-</style>
 
 <div class="page-header">
     <h1 class="page-title"><?= __('users_title') ?></h1>
@@ -239,6 +193,7 @@ $currentPage = 'users';
             <div class="empty-state"><i class="fas fa-users"></i><p><?= __('users_none_found') ?></p></div>
         <?php else: ?>
         <div style="overflow-x:auto;">
+        <div class="table-container">
         <table class="table">
             <thead>
                 <tr>
@@ -320,7 +275,7 @@ $currentPage = 'users';
                                 </a>
                                 <?php endif; ?>
                                 <a href="?delete=<?= $user['id'] ?>&token=<?= $auth->getCsrfToken() ?>"
-                                   class="btn btn-danger btn-sm" title="<?= __('btn_delete') ?>"
+                                   class="btn btn-danger-soft btn-sm" title="<?= __('btn_delete') ?>"
                                    onclick="return confirm('Benutzer wirklich löschen?')">
                                     <i class="fas fa-trash"></i>
                                 </a>
@@ -332,11 +287,12 @@ $currentPage = 'users';
             </tbody>
         </table>
         </div>
+        </div>
         <?php endif; ?>
     </div>
 </div>
 
-</div><!-- /main-content -->
+</main>
 
 <!-- Add User Modal -->
 <div id="addUserModal" class="modal">