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>

Readme.md

@@ -8,7 +8,7 @@
 ![MySQL](https://img.shields.io/badge/MySQL-5.7%2B%20%2F%20MariaDB-4479A1?logo=mysql&logoColor=white)
 ![UniFi OS](https://img.shields.io/badge/UniFi%20OS-7.0%2B-0559C9?logo=ubiquiti&logoColor=white)
 ![License](https://img.shields.io/badge/Lizenz-MIT-green)
-![Version](https://img.shields.io/badge/Version-2.4.0-blueviolet)
+![Version](https://img.shields.io/badge/Version-2.5.0-blueviolet)
 ![CI](https://github.com/friloo/unifi-voucher-tool/actions/workflows/ci.yml/badge.svg)
 
 </div>
@@ -45,6 +45,7 @@
 - 💾 **Config-Backup & -Restore** (JSON Export/Import)
 - 🐳 **Docker** – Dockerfile + docker-compose (MariaDB)
 - 🌍 **Öffentlicher Modus** – optional ohne Login nutzbar (mit CSRF-Schutz & Throttle)
+- 🎨 **Einheitliches Design-System** – ein Stylesheet für Frontend, Login und Backend (Tokens, Komponenten, Light/Dark)
 - 🌗 **Dark Mode** – umschaltbar, Einstellung wird im Browser gespeichert
 - 🌐 **Mehrsprachig** – Deutsch / Englisch per Umschalter (`lang/`)
 - 📱 **Responsive Admin-Layout** mit Hamburger-Menü & Sidebar-Overlay
@@ -59,31 +60,30 @@
 
 ## 📸 Screenshots
 
+> Alle Screenshots stammen aus der Oberfläche in Version 2.5.0 (neues Design-System).
+
 ### Anmeldung & Voucher-Erstellung
 
 <div align="center">
-  <img src="docs/screenshots/login.png" alt="Login mit Microsoft 365" width="32%">
-  <img src="docs/screenshots/voucher-form.png" alt="Voucher erstellen" width="32%">
-  <img src="docs/screenshots/voucher-result.png" alt="Voucher-Ergebnis" width="32%">
+  <img src="docs/screenshots/login.png" alt="Anmeldung" width="48%">
+  <img src="docs/screenshots/voucher-form.png" alt="Voucher erstellen" width="48%">
 </div>
 
-### Bulk-Erstellung & Dark Mode
-
 <div align="center">
+  <img src="docs/screenshots/voucher-result.png" alt="Voucher-Ergebnis mit QR-Code" width="48%">
   <img src="docs/screenshots/bulk-vouchers.png" alt="Bulk-Voucher-Erstellung" width="48%">
-  <img src="docs/screenshots/admin-dashboard-dark.png" alt="Dashboard im Dark Mode" width="48%">
 </div>
 
-### Administration & Updater
+### Administration
 
 <div align="center">
   <img src="docs/screenshots/admin-dashboard.png" alt="Dashboard" width="48%">
-  <img src="docs/screenshots/updater-available.png" alt="Auto-Updater" width="48%">
+  <img src="docs/screenshots/admin-dashboard-dark.png" alt="Dashboard im Dark Mode" width="48%">
 </div>
 
 <div align="center">
-  <img src="docs/screenshots/updater.png" alt="Updater – Ausgangszustand" width="48%">
-  <img src="docs/screenshots/maintenance.png" alt="Wartungsmodus" width="48%">
+  <img src="docs/screenshots/vouchers.png" alt="Live-Voucher-Verwaltung" width="48%">
+  <img src="docs/screenshots/settings.png" alt="Einstellungen" width="48%">
 </div>
 
 ### REST-API, 2FA & Integrationen
@@ -97,6 +97,17 @@
   <img src="docs/screenshots/two-factor.png" alt="Zwei-Faktor-Authentifizierung" width="60%">
 </div>
 
+### Updater & Wartungsmodus
+
+<div align="center">
+  <img src="docs/screenshots/updater.png" alt="Updater – Ausgangszustand" width="48%">
+  <img src="docs/screenshots/updater-available.png" alt="Auto-Updater mit verfügbarem Update" width="48%">
+</div>
+
+<div align="center">
+  <img src="docs/screenshots/maintenance.png" alt="Wartungsmodus" width="60%">
+</div>
+
 ---
 
 ## 📋 Anforderungen
@@ -220,6 +231,36 @@ Den Token finden Sie unter **Administration → Einstellungen → Cron**.
 
 ---
 
+## 🎨 Design-System
+
+Frontend, Login-Seiten, Installer, Updater und der gesamte Admin-Bereich nutzen ein
+gemeinsames Stylesheet: **`assets/global.css`**.
+
+- **Design-Tokens** (`:root` bzw. `[data-theme="dark"]`) für Flächen, Text, Linien,
+  Markenfarbe, Statusfarben, Radien, Schatten und Layout-Maße
+- **Komponenten** darauf aufgebaut: Buttons, Formularfelder, Cards, Tabellen, Badges,
+  Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Sidebar/Topbar
+- **Dark Mode** ausschließlich über Tokens – keine `!important`-Overrides mehr
+- **Schriftart** Inter (via Google Fonts) mit System-Font-Fallback
+
+Eigenes Branding lässt sich meist mit wenigen Zeilen umsetzen – z. B. in einer
+eigenen CSS-Datei oder direkt in `assets/global.css`:
+
+```css
+:root {
+    --accent:         #0f766e;   /* Primärfarbe (Buttons, aktive Navigation) */
+    --accent-hover:   #0d5f59;
+    --accent-soft:    #e6f4f2;   /* Flächen für aktive Zustände */
+    --brand-gradient: linear-gradient(135deg, #0f766e 0%, #0ea5e9 100%);
+    --r-lg:           14px;      /* Eckenradius für Cards */
+}
+```
+
+Logo und Favicon werden nicht über CSS, sondern unter
+**Administration → Einstellungen → Allgemein** gesetzt.
+
+---
+
 ## 🛡️ Sicherheit
 
 Das Tool ist auf einen sicheren Standardbetrieb ausgelegt:
@@ -378,11 +419,12 @@ setzen (`DB_*`, `APP_KEY`).
 - [x] Docker-Container
 - [x] Erweiterte Reporting-Funktionen (CSV/PDF) + Health-Endpoint
 - [x] 2FA-Recovery-Codes, API-Scopes/Rate-Limit/OpenAPI, Test-Suite (PHPUnit/PHPStan)
+- [x] Gemeinsames Design-System für Frontend, Login und Backend
 
 ---
 
 <div align="center">
 
-**Version 2.4.0** · Autor: **Friederich Loheide** · Lizenz: **MIT**
+**Version 2.5.0** · Autor: **Friederich Loheide** · Lizenz: **MIT**
 
 </div>