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

@@ -101,50 +101,6 @@ $currentPage = 'sites';
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= __('sites_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); }
-    .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; }
-    .sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
-    .site-card { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: 14px; padding: 20px; transition: border-color .2s, box-shadow .2s; }
-    .site-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(102,126,234,.15); }
-    .site-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
-    .site-name { font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
-    .site-id-label { font-size: 12px; color: var(--text-muted); font-family: monospace; }
-    .site-info { margin: 14px 0; font-size: 13px; color: var(--text-secondary); }
-    .site-info-item { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
-    .site-actions { display: flex; gap: 7px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
-    .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-info    { background: var(--bg-badge-info); color: var(--text-badge-info); }
-    .btn { padding: 8px 15px; 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-success { background: var(--success); color: white; }
-    .btn-sm { padding: 6px 11px; 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: 17px; }
-    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-    label { display: block; margin-bottom: 7px; color: var(--text-secondary); font-weight: 500; font-size: 14px; }
-    input[type="text"], input[type="password"], input[type="url"] { 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; }
-    .checkbox-group input { width: auto; }
-    .empty-card { background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border-color); padding: 60px 20px; text-align: center; color: var(--text-muted); }
-    @media(max-width:768px){ .main-content{ margin-left:0!important; } .form-grid{ grid-template-columns:1fr; } }
-</style>
 
 <div class="page-header">
     <h1 class="page-title"><?= __('sites_title') ?></h1>
@@ -210,7 +166,7 @@ $currentPage = 'sites';
                 <?= $site['is_active'] ? __('sites_deactivate') : __('sites_activate') ?>
             </a>
             <a href="?delete=<?= $site['id'] ?>&token=<?= $auth->getCsrfToken() ?>"
-               class="btn btn-danger btn-sm"
+               class="btn btn-danger-soft btn-sm"
                onclick="return confirm('Möchten Sie diese Site wirklich löschen?')">
                 <i class="fas fa-trash"></i>
             </a>
@@ -220,7 +176,7 @@ $currentPage = 'sites';
 </div>
 <?php endif; ?>
 
-</div><!-- /main-content -->
+</main>
 
 <!-- Add Site Modal -->
 <div id="addSiteModal" class="modal">