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

@@ -100,51 +100,11 @@ $adminBase   = '';
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= __('templates_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: 30px; flex-wrap: wrap; gap: 15px; }
-        .page-title  { font-size: 28px; font-weight: 600; color: var(--text-primary); }
-        .alert { padding: 14px 20px; border-radius: 10px; margin-bottom: 25px; font-size: 14px; }
-        .alert-error   { background: #fee; border: 1px solid #fcc; color: #c33; }
-        .alert-success { background: #efe; border: 1px solid #cfc; color: #3c3; }
-        .card { background: var(--bg-card); border-radius: 15px; box-shadow: 0 2px 10px var(--shadow); border: 1px solid var(--border-color); overflow: hidden; margin-bottom: 25px; }
-        .card-header { padding: 20px 25px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
-        .card-title  { font-size: 18px; font-weight: 600; color: var(--text-primary); }
-        .table { width: 100%; border-collapse: collapse; }
-        .table th { text-align: left; padding: 12px 15px; background: var(--bg-table-head); color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
-        .table td { padding: 14px 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 td { background: var(--bg-hover); }
-        .badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; }
-        .badge-success { background: #d4edda; color: #155724; }
-        .badge-secondary { background: var(--bg-hover); color: var(--text-muted); }
-        .btn-primary  { background: var(--accent); color: white; }
-        .btn-primary:hover { background: var(--accent-hover); }
-        .btn-danger   { background: var(--danger); color: white; }
-        .btn-small    { padding: 6px 12px; font-size: 12px; }
-        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-overlay); z-index: 500; align-items: center; justify-content: center; }
-        .modal.active { display: flex; }
-        .modal-content { background: var(--bg-card); border-radius: 15px; max-width: 520px; width: 90%; max-height: 90vh; overflow-y: auto; }
-        .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: 18px; 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: 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="number"], textarea, select { width: 100%; padding: 11px 14px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 14px; background: var(--bg-input); color: var(--text-primary); transition: border-color 0.2s; font-family: inherit; }
-        input:focus, textarea:focus { outline: none; border-color: var(--accent); }
-        .checkbox-group { display: flex; align-items: center; gap: 10px; }
-        .checkbox-group input { width: auto; accent-color: var(--accent); }
-        .help-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
-        .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
-        .empty-state i { font-size: 48px; margin-bottom: 20px; opacity: 0.3; display: block; }
-        .duration-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-hover); padding: 3px 10px; border-radius: 20px; font-size: 12px; color: var(--text-secondary); }
-    </style>
-</head>
 
     <div class="page-header">
         <div>
             <h1 class="page-title"><?= __('templates_title') ?></h1>
-            <p style="color: var(--text-muted); font-size: 14px; margin-top: 5px;"><?= __('templates_subtitle') ?></p>
+            <p class="page-subtitle"><?= __('templates_subtitle') ?></p>
         </div>
         <button onclick="openAddModal()" class="btn btn-primary">
             <i class="fas fa-plus"></i> <?= __('templates_add') ?>
@@ -172,6 +132,7 @@ $adminBase   = '';
             </div>
         <?php else: ?>
             <div style="overflow-x: auto;">
+                <div class="table-container">
                 <table class="table">
                     <thead>
                         <tr>
@@ -216,17 +177,18 @@ $adminBase   = '';
                                         class="btn btn-secondary btn-small"><i class="fas fa-edit"></i></button>
                                 <a href="?delete=<?= $t['id'] ?>&token=<?= $auth->getCsrfToken() ?>"
                                    onclick="return confirm('Profil wirklich löschen?')"
-                                   class="btn btn-danger btn-small"><i class="fas fa-trash"></i></a>
+                                   class="btn btn-danger-soft btn-small"><i class="fas fa-trash"></i></a>
                             </td>
                         </tr>
                         <?php endforeach; ?>
                     </tbody>
                 </table>
+                </div>
             </div>
         <?php endif; ?>
     </div>
 
-</div><!-- main-content -->
+</main>
 
 <!-- Modal: Hinzufügen -->
 <div id="addModal" class="modal">