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

@@ -92,74 +92,6 @@ $currentPage = 'dashboard';
     <title><?= __('dashboard_title') ?> – <?= htmlspecialchars($appTitle) ?></title>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 <?php include __DIR__ . '/../includes/admin_nav.php'; ?>
-<style>
-    .page-header { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
-    .page-title { font-size: 26px; font-weight: 700; color: var(--text-primary); }
-    .page-subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
-    .live-badge { display: inline-flex; align-items: center; gap: 8px; background: #d4edda; color: #155724; padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; }
-    .live-badge .dot { width: 8px; height: 8px; background: #28a745; border-radius: 50%; animation: pulse 2s infinite; }
-    .live-badge.loading { background: #fff3cd; color: #856404; }
-    .live-badge.loading .dot { background: #ffc107; }
-    .live-badge.error { background: #f8d7da; color: #721c24; }
-    .live-badge.error .dot { background: var(--danger); animation: none; }
-    @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.5} }
-    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 30px; }
-    .stat-card { background: var(--bg-card); padding: 22px; border-radius: 14px; box-shadow: 0 2px 10px var(--shadow); border: 1px solid var(--border-color); }
-    .stat-card.live { border-color: var(--success); border-width: 2px; }
-    .stat-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
-    .stat-card-title { color: var(--text-muted); font-size: 13px; font-weight: 500; }
-    .stat-card-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
-    .stat-card-value { font-size: 30px; font-weight: 700; color: var(--text-primary); }
-    .stat-card-value.valid { color: var(--success); }
-    .stat-card-value.used { color: var(--warning); }
-    .stat-card-value.expired { color: var(--danger); }
-    .stat-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
-    .card { background: var(--bg-card); border-radius: 14px; box-shadow: 0 2px 10px var(--shadow); border: 1px solid var(--border-color); margin-bottom: 28px; overflow: hidden; }
-    .card-header { padding: 18px 22px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
-    .card-title { font-size: 17px; font-weight: 600; color: var(--text-primary); }
-    .card-body { padding: 22px; }
-    .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: 12px; text-transform: uppercase; letter-spacing: .5px; }
-    .table td { padding: 13px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 14px; }
-    .table tr:last-child td { border-bottom: 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); }
-    .btn-primary   { background: var(--accent); color: white; }
-    .btn-primary:hover { background: var(--accent-hover); }
-    .btn-success   { background: var(--success); color: white; }
-    .btn-success:hover { opacity: .9; }
-    .btn-sm { padding: 6px 12px; font-size: 12px; }
-    .chart-container { position: relative; height: 280px; }
-    .site-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
-    .site-status-card { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: 12px; padding: 18px; transition: border-color .2s; }
-    .site-status-card:hover { border-color: var(--accent); }
-    .site-status-card.error { border-color: var(--danger); }
-    .site-status-name { font-weight: 600; color: var(--text-primary); font-size: 15px; }
-    .site-voucher-count { background: var(--accent); color: white; padding: 3px 11px; border-radius: 20px; font-size: 13px; font-weight: 600; }
-    .site-voucher-count.zero { background: var(--text-muted); }
-    .site-status-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
-    .site-stat { text-align: center; padding: 9px; background: var(--bg-hover); border-radius: 8px; }
-    .site-stat-value { font-size: 18px; font-weight: 700; }
-    .site-stat-value.valid { color: var(--success); }
-    .site-stat-value.used  { color: var(--warning); }
-    .site-stat-value.expired { color: var(--danger); }
-    .site-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
-    .site-error { color: var(--danger); font-size: 12px; margin-top: 8px; }
-    .top-users-list { list-style: none; }
-    .top-users-list li { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-color); }
-    .top-users-list li:last-child { border-bottom: none; }
-    .user-info-row { display: flex; align-items: center; gap: 10px; }
-    .user-avatar-sm { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#667eea,#764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; }
-    .user-count { background: var(--bg-hover); padding: 3px 10px; border-radius: 12px; font-weight: 600; color: var(--text-primary); font-size: 13px; }
-    .refresh-indicator { display: flex; align-items: center; gap: 10px; }
-    .last-update { color: var(--text-muted); font-size: 12px; }
-    .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; }
-    @media(max-width:768px){ .main-content{ margin-left:0!important; } .stats-grid{ grid-template-columns:1fr 1fr; } }
-</style>
 
 <div class="page-header">
     <div>
@@ -171,7 +103,7 @@ $currentPage = 'dashboard';
             <span class="dot"></span>
             <span id="liveStatus">DB</span>
         </span>
-        <button onclick="refreshData('live')" class="btn btn-success btn-sm" id="refreshBtn">
+        <button onclick="refreshData('live')" class="btn btn-secondary btn-sm" id="refreshBtn">
             <i class="fas fa-sync-alt"></i> <?= __('dashboard_live_refresh') ?>
         </button>
     </div>
@@ -181,43 +113,43 @@ $currentPage = 'dashboard';
     <div class="stat-card">
         <div class="stat-card-header">
             <div class="stat-card-title"><?= __('dashboard_active_sites') ?></div>
-            <div class="stat-card-icon" style="background:#e3f2fd;color:#1976d2;"><i class="fas fa-map-marker-alt"></i></div>
+            <div class="stat-card-icon info"><i class="fas fa-location-dot"></i></div>
         </div>
         <div class="stat-card-value"><?= $stats['total_sites'] ?></div>
     </div>
     <div class="stat-card">
         <div class="stat-card-header">
             <div class="stat-card-title"><?= __('dashboard_users') ?></div>
-            <div class="stat-card-icon" style="background:#f3e5f5;color:#7b1fa2;"><i class="fas fa-users"></i></div>
+            <div class="stat-card-icon accent"><i class="fas fa-users"></i></div>
         </div>
         <div class="stat-card-value"><?= $stats['total_users'] ?></div>
     </div>
     <div class="stat-card live">
         <div class="stat-card-header">
-            <div class="stat-card-title">🟢 <?= __('dashboard_valid') ?></div>
-            <div class="stat-card-icon" style="background:#e8f5e9;color:#388e3c;"><i class="fas fa-check-circle"></i></div>
+            <div class="stat-card-title"><?= __('dashboard_valid') ?></div>
+            <div class="stat-card-icon success"><i class="fas fa-circle-check"></i></div>
         </div>
         <div class="stat-card-value valid" id="liveValid"><?= (int)($voucherStats['valid']??0) ?></div>
         <div class="stat-card-sub" id="subValid"><?= $lastCronSync ? date('H:i', strtotime($lastCronSync)) : __('never') ?></div>
     </div>
     <div class="stat-card live">
         <div class="stat-card-header">
-            <div class="stat-card-title">🟡 <?= __('dashboard_used') ?></div>
-            <div class="stat-card-icon" style="background:#fff3e0;color:#f57c00;"><i class="fas fa-user-check"></i></div>
+            <div class="stat-card-title"><?= __('dashboard_used') ?></div>
+            <div class="stat-card-icon warning"><i class="fas fa-user-check"></i></div>
         </div>
         <div class="stat-card-value used" id="liveUsed"><?= (int)($voucherStats['used']??0) ?></div>
     </div>
     <div class="stat-card live">
         <div class="stat-card-header">
-            <div class="stat-card-title">🔴 <?= __('dashboard_expired') ?></div>
-            <div class="stat-card-icon" style="background:#ffebee;color:#d32f2f;"><i class="fas fa-times-circle"></i></div>
+            <div class="stat-card-title"><?= __('dashboard_expired') ?></div>
+            <div class="stat-card-icon danger"><i class="fas fa-circle-xmark"></i></div>
         </div>
         <div class="stat-card-value expired" id="liveExpired"><?= (int)($voucherStats['expired']??0) ?></div>
     </div>
     <div class="stat-card live">
         <div class="stat-card-header">
-            <div class="stat-card-title">📊 <?= __('dashboard_total') ?></div>
-            <div class="stat-card-icon" style="background:var(--bg-hover);color:var(--text-muted);"><i class="fas fa-ticket-alt"></i></div>
+            <div class="stat-card-title"><?= __('dashboard_total') ?></div>
+            <div class="stat-card-icon"><i class="fas fa-ticket"></i></div>
         </div>
         <div class="stat-card-value" id="liveTotal"><?= (int)($voucherStats['total']??0) ?></div>
     </div>
@@ -225,16 +157,16 @@ $currentPage = 'dashboard';
 
 <div class="card">
     <div class="card-header">
-        <h2 class="card-title">🔴 <?= __('dashboard_vouchers_per_site') ?></h2>
+        <h2 class="card-title"><?= __('dashboard_vouchers_per_site') ?></h2>
         <span class="last-update" id="lastUpdate"><?= $lastCronSync ? date('d.m.Y H:i', strtotime($lastCronSync)) : __('never') ?></span>
     </div>
-    <div class="card-body" style="padding:18px;">
+    <div class="card-body">
         <div class="site-status" id="siteStatusContainer">
             <?php foreach ($sites as $site):
                 $ss = $siteStats[$site['id']] ?? ['total'=>0,'valid'=>0,'used'=>0,'expired'=>0];
             ?>
             <div class="site-status-card" id="site-<?= $site['id'] ?>">
-                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+                <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;">
                     <div class="site-status-name"><?= htmlspecialchars($site['name']) ?></div>
                     <span class="site-voucher-count <?= (int)$ss['total']===0 ? 'zero' : '' ?>" id="site-total-<?= $site['id'] ?>">
                         <?= (int)$ss['total'] ?>
@@ -249,8 +181,8 @@ $currentPage = 'dashboard';
             </div>
             <?php endforeach; ?>
             <?php if (empty($sites)): ?>
-            <div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-muted);">
-                <i class="fas fa-map-marker-alt" style="font-size:32px;margin-bottom:15px;opacity:.3;display:block;"></i>
+            <div class="empty-state" style="grid-column:1/-1;">
+                <div class="empty-icon"><i class="fas fa-location-dot"></i></div>
                 <p><?= __('dashboard_no_data') ?></p>
                 <a href="sites.php" class="btn btn-primary" style="margin-top:15px;"><i class="fas fa-plus"></i> <?= __('sites_add') ?></a>
             </div>
@@ -260,16 +192,16 @@ $currentPage = 'dashboard';
 </div>
 
 <div class="card">
-    <div class="card-header"><h2 class="card-title">📊 <?= __('dashboard_trend') ?></h2></div>
+    <div class="card-header"><h2 class="card-title"><?= __('dashboard_trend') ?></h2></div>
     <div class="card-body">
         <div class="chart-container"><canvas id="voucherChart"></canvas></div>
     </div>
 </div>
 
-<div style="display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px;" class="two-col-grid">
-    <div class="card" style="margin-bottom:0;">
-        <div class="card-header"><h2 class="card-title">🏆 <?= __('dashboard_top_users') ?></h2></div>
-        <div class="card-body" style="padding:18px 22px;">
+<div class="two-col-grid">
+    <div class="card">
+        <div class="card-header"><h2 class="card-title"><?= __('dashboard_top_users') ?></h2></div>
+        <div class="card-body">
             <?php if (empty($topUsers)): ?>
                 <div class="empty-state"><i class="fas fa-users"></i><p><?= __('dashboard_no_data') ?></p></div>
             <?php else: ?>
@@ -291,19 +223,20 @@ $currentPage = 'dashboard';
         </div>
     </div>
 
-    <div class="card" style="margin-bottom:0;">
-        <div class="card-header"><h2 class="card-title">📋 <?= __('dashboard_recent') ?></h2><a href="vouchers.php" class="btn btn-secondary btn-sm"><i class="fas fa-external-link-alt"></i> Live</a></div>
+    <div class="card">
+        <div class="card-header"><h2 class="card-title"><?= __('dashboard_recent') ?></h2><a href="vouchers.php" class="btn btn-secondary btn-sm"><i class="fas fa-arrow-up-right-from-square"></i> Live</a></div>
         <div class="card-body" style="padding:0;">
             <?php if (empty($recentVouchers)): ?>
                 <div class="empty-state"><i class="fas fa-ticket-alt"></i><p><?= __('dashboard_no_vouchers') ?></p></div>
             <?php else: ?>
+                <div class="table-container">
                 <table class="table">
                     <thead><tr><th><?= __('label_created') ?></th><th><?= __('label_code') ?></th><th><?= __('label_site') ?></th><th><?= __('label_status') ?></th></tr></thead>
                     <tbody>
                         <?php foreach ($recentVouchers as $v): ?>
                         <tr>
                             <td style="font-size:12px;"><?= date('d.m H:i', strtotime($v['created_at'])) ?></td>
-                            <td><code style="font-size:12px;background:var(--bg-hover);padding:3px 6px;border-radius:4px;"><?= htmlspecialchars($v['voucher_code']) ?></code></td>
+                            <td><code><?= htmlspecialchars($v['voucher_code']) ?></code></td>
                             <td><span class="badge badge-info"><?= htmlspecialchars($v['site_name']??'') ?></span></td>
                             <td>
                                 <?php $st=$v['status']??'valid'; ?>
@@ -313,17 +246,26 @@ $currentPage = 'dashboard';
                         <?php endforeach; ?>
                     </tbody>
                 </table>
+                </div>
             <?php endif; ?>
         </div>
     </div>
 </div>
 
-</div><!-- /main-content -->
+</main>
 
 <div id="toast-container"></div>
 <script src="../assets/global.js"></script>
 <script>
+const rootStyles = getComputedStyle(document.documentElement);
+const accentColor  = rootStyles.getPropertyValue('--accent').trim();
+const surfaceColor = rootStyles.getPropertyValue('--bg-card').trim();
+const gridColor    = rootStyles.getPropertyValue('--border-color').trim();
+const mutedColor   = rootStyles.getPropertyValue('--text-muted').trim();
 const ctx = document.getElementById('voucherChart').getContext('2d');
+const accentFill = ctx.createLinearGradient(0, 0, 0, 280);
+accentFill.addColorStop(0, accentColor + '33');
+accentFill.addColorStop(1, accentColor + '00');
 const chartData = <?= json_encode($chartData) ?>;
 new Chart(ctx, {
     type: 'line',
@@ -332,17 +274,20 @@ new Chart(ctx, {
         datasets: [{
             label: 'Vouchers',
             data: chartData.map(d => d.count),
-            borderColor: '#667eea',
-            backgroundColor: 'rgba(102,126,234,0.1)',
+            borderColor: accentColor,
+            backgroundColor: accentFill,
             tension: 0.4, fill: true,
-            pointBackgroundColor: '#667eea', pointBorderColor: '#fff',
-            pointBorderWidth: 2, pointRadius: 5, pointHoverRadius: 7
+            pointBackgroundColor: accentColor, pointBorderColor: surfaceColor,
+            pointBorderWidth: 2, pointRadius: 4, pointHoverRadius: 6
         }]
     },
     options: {
         responsive: true, maintainAspectRatio: false,
         plugins: { legend: { display: false } },
-        scales: { y: { beginAtZero: true, ticks: { stepSize: 1, color: getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() } }, x: { ticks: { color: getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() } } }
+        scales: {
+            y: { beginAtZero: true, border: { display: false }, grid: { color: gridColor, drawTicks: false }, ticks: { stepSize: 1, color: mutedColor, padding: 10, font: { size: 11 } } },
+            x: { border: { display: false }, grid: { display: false }, ticks: { color: mutedColor, padding: 8, font: { size: 11 } } }
+        }
     }
 });
 
@@ -396,11 +341,6 @@ async function refreshData(mode='db') {
     refreshBtn.disabled = false;
     refreshBtn.innerHTML = '<i class="fas fa-sync-alt"></i> <?= __('dashboard_live_refresh') ?>';
 }
-
-// Responsive two-column grid
-const twoCol = document.querySelector('.two-col-grid');
-function checkGrid() { if (twoCol) twoCol.style.gridTemplateColumns = window.innerWidth < 900 ? '1fr' : '1fr 1fr'; }
-checkGrid(); window.addEventListener('resize', checkGrid);
 </script>
 </body>
 </html>