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

@@ -130,80 +130,20 @@ $currentPage  = 'vouchers';
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?= __('vouchers_title') ?> – <?= htmlspecialchars($appTitle) ?></title>
 <?php include __DIR__ . '/../includes/admin_nav.php'; ?>
-<style>
-    .page-header { margin-bottom: 28px; }
-    .page-title { font-size: 26px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 12px; }
-    .page-subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
-    .live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success); }
-    .live-indicator .dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; }
-    @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }
-    .card { background: var(--bg-card); border-radius: 14px; box-shadow: 0 2px 10px var(--shadow); border: 1px solid var(--border-color); margin-bottom: 22px; overflow: hidden; }
-    .card-header { padding: 18px 22px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
-    .card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
-    .card-body { padding: 22px; }
-    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 16px; margin-bottom: 22px; }
-    .stat-card { background: var(--bg-card); padding: 18px; border-radius: 12px; box-shadow: 0 2px 8px var(--shadow); border: 1px solid var(--border-color); }
-    .stat-label { color: var(--text-muted); font-size: 13px; margin-bottom: 6px; }
-    .stat-value { font-size: 28px; font-weight: 700; color: var(--text-primary); }
-    .stat-value.valid { color: var(--success); }
-    .stat-value.used  { color: var(--warning); }
-    .stat-value.expired { color: var(--danger); }
-    .site-selector { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
-    .site-selector select { padding: 10px 14px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 14px; min-width: 220px; cursor: pointer; background: var(--bg-input); color: var(--text-primary); }
-    .site-selector select:focus { outline: none; border-color: var(--accent); }
-    .search-bar { padding: 10px 14px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 14px; background: var(--bg-input); color: var(--text-primary); min-width: 200px; }
-    .search-bar:focus { outline: none; border-color: var(--accent); }
-    .btn { padding: 9px 18px; 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-danger:hover { opacity: .88; }
-    .btn-success { background: var(--success); color: white; }
-    .btn-sm { padding: 5px 11px; font-size: 12px; }
-    .btn:disabled { opacity: .55; cursor: not-allowed; }
-    .table-container { overflow-x: auto; }
-    .table { width: 100%; border-collapse: collapse; }
-    .table th { text-align: left; padding: 11px 14px; background: var(--bg-table-head); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
-    .table td { padding: 13px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 13px; }
-    .table tr:last-child td { border-bottom: none; }
-    .table tr:hover { background: var(--bg-hover); }
-    .table tr.deleting { opacity: .45; pointer-events: none; }
-    .badge { display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 500; }
-    .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); }
-    code { background: var(--bg-hover); padding: 4px 8px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: 1px; }
-    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
-    .empty-state i { font-size: 42px; margin-bottom: 18px; opacity: .3; display: block; }
-    .loading { display: flex; align-items: center; justify-content: center; padding: 60px; color: var(--text-muted); gap: 12px; }
-    .loading i { font-size: 22px; animation: spin 1s linear infinite; }
-    @keyframes spin { from{transform:rotate(0)}to{transform:rotate(360deg)} }
-    .filter-row { display: flex; gap: 8px; flex-wrap: wrap; }
-    .filter-btn { padding: 7px 14px; border: 2px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); border-radius: 8px; cursor: pointer; font-size: 13px; transition: all .2s; }
-    .filter-btn:hover { border-color: var(--accent); }
-    .filter-btn.active { border-color: var(--accent); background: var(--accent); color: white; }
-    .usage-info { display: flex; align-items: center; gap: 6px; }
-    .usage-bar { width: 50px; height: 5px; background: var(--border-color); border-radius: 3px; overflow: hidden; }
-    .usage-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
-    .voucher-note { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .no-sites-warning { background: #fff3cd; border: 1px solid #ffc107; border-radius: 12px; padding: 30px; text-align: center; color: #856404; }
-    @media(max-width:768px){ .main-content{ margin-left:0!important; } }
-</style>
 
 <div class="page-header">
-    <h1 class="page-title">
-        <?= __('vouchers_title') ?>
-        <span class="live-indicator"><span class="dot"></span>LIVE</span>
-    </h1>
-    <p class="page-subtitle"><?= __('vouchers_subtitle') ?></p>
+    <div>
+        <h1 class="page-title">
+            <?= __('vouchers_title') ?>
+            <span class="live-indicator"><span class="dot"></span>LIVE</span>
+        </h1>
+        <p class="page-subtitle"><?= __('vouchers_subtitle') ?></p>
+    </div>
 </div>
 
 <?php if (empty($sites)): ?>
 <div class="no-sites-warning">
-    <i class="fas fa-exclamation-triangle" style="font-size:48px;margin-bottom:15px;opacity:.7;display:block;"></i>
+    <i class="fas fa-triangle-exclamation" style="font-size:26px;margin-bottom:12px;display:block;"></i>
     <h3><?= __('vouchers_no_sites') ?></h3>
     <a href="sites.php" class="btn btn-primary" style="margin-top:20px;"><i class="fas fa-plus"></i> <?= __('nav_sites') ?></a>
 </div>
@@ -227,7 +167,7 @@ $currentPage  = 'vouchers';
                 <?php endforeach; ?>
             </select>
             <input type="search" id="searchInput" class="search-bar" placeholder="<?= __('vouchers_search') ?>" oninput="filterAndRender()" style="display:none;">
-            <button id="refreshBtn" class="btn btn-success" onclick="loadVouchers(true)" disabled>
+            <button id="refreshBtn" class="btn btn-secondary" onclick="loadVouchers(true)" disabled>
                 <i class="fas fa-sync-alt"></i> <?= __('btn_refresh') ?>
             </button>
         </div>
@@ -258,7 +198,7 @@ $currentPage  = 'vouchers';
 </div>
 <?php endif; ?>
 
-</div><!-- /main-content -->
+</main>
 
 <div id="toast-container"></div>
 <script src="../assets/global.js"></script>
@@ -404,7 +344,7 @@ function renderVouchers() {
             <td>${remaining?`<span style="color:var(--success)"><i class="fas fa-clock"></i> ${remaining}</span><br>`:''}<small style="color:var(--text-muted)">${v.duration} Min.</small></td>
             <td style="white-space:nowrap;">
                 <button onclick="resendVoucher('${v._id}','${escapeHtml(v.formatted_code||'')}')" class="btn btn-secondary btn-sm" title="Per E-Mail senden"><i class="fas fa-envelope"></i></button>
-                <button onclick="deleteVoucher('${v._id}')" class="btn btn-danger btn-sm" title="<?= __('btn_delete') ?>"><i class="fas fa-trash"></i></button>
+                <button onclick="deleteVoucher('${v._id}')" class="btn btn-danger-soft btn-sm" title="<?= __('btn_delete') ?>"><i class="fas fa-trash"></i></button>
             </td>
         </tr>`;
     });