Display-Seiten individuell gestalten

Jede Display-Seite bringt jetzt ihr eigenes Erscheinungsbild mit – der
Empfang sieht anders aus als der Tagungsraum nebenan:

- eigenes Logo (leer = Logo aus den Einstellungen)
- formatfüllendes Hintergrundbild mit einstellbarer Abdunklung (0–90 %),
  damit die Karte auf hellen Fotos lesbar bleibt
- eigene Akzentfarbe für den Knopf (leer = Farbe aus dem Design-Tab)
- Karte wahlweise hell oder dunkel; auf Fotos wirkt dunkel meist ruhiger

Logo und Hintergrund lassen sich hochladen oder als URL hinterlegen; beim
Löschen einer Display-Seite verschwinden die hochgeladenen Dateien mit.

Nebenbei aufgeräumt: das Bildfeld (Vorschau + Upload + URL + Entfernen)
lag als Funktion in admin/settings.php und wird jetzt von beiden Seiten
genutzt – Ui::imageField() für die Darstellung, Upload::resolveField()
für die Auswertung.

Sicherheit: die Akzentfarbe landet in einem style-Attribut, deshalb wird
sie sowohl beim Speichern als auch beim Ausgeben auf eine echte Hex-Farbe
geprüft; ein Test hält das fest.

Migration 0006, database.sql nachgezogen, 4 neue Tests (42 gesamt),
Screenshots ergänzt, Version 2.8.0.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

assets/global.css

@@ -1641,6 +1641,52 @@ input.search-bar, .site-selector .search-bar { min-width: 240px; width: auto; fl
     box-shadow: var(--shadow-xl);
 }
 .kiosk-logo { max-height: 84px; max-width: 320px; margin: 0 auto 26px; display: block; }
+.kiosk-logo-sm { max-height: 52px; margin-bottom: 20px; }
+
+/* Eigenes Hintergrundbild der Display-Seite: Bild formatfüllend, darüber
+   eine abdunkelnde Ebene, damit die Karte sich abhebt. */
+.kiosk-body.has-background {
+    --kiosk-overlay: 0.45;
+    position: relative;
+    background: var(--kiosk-bg) center / cover no-repeat fixed;
+}
+.kiosk-body.has-background::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: rgba(8, 11, 18, var(--kiosk-overlay));
+    pointer-events: none;
+}
+.kiosk-body.has-background > * { position: relative; z-index: 1; }
+.kiosk-body.has-background .kiosk-card { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
+.kiosk-body.has-background .kiosk-footer .app-credit,
+.kiosk-body.has-background .kiosk-footer .app-credit a { color: rgba(255,255,255,.65); }
+
+/* Dunkle Karte – wirkt auf Fotos oft ruhiger als eine weiße Fläche. */
+.kiosk-dark .kiosk-card {
+    background: rgba(12,15,22,.86);
+    border-color: rgba(255,255,255,.12);
+    backdrop-filter: blur(6px);
+    color: #f4f6fb;
+}
+.kiosk-dark .kiosk-card h1,
+.kiosk-dark .kiosk-code { color: #ffffff; }
+.kiosk-dark .kiosk-subline,
+.kiosk-dark .kiosk-qr-label { color: rgba(255,255,255,.76); }
+.kiosk-dark .kiosk-countdown { color: rgba(255,255,255,.5); }
+.kiosk-dark .kiosk-meta span {
+    background: rgba(255,255,255,.10);
+    border-color: rgba(255,255,255,.16);
+    color: rgba(255,255,255,.88);
+}
+.kiosk-dark .kiosk-phone { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
+.kiosk-dark .kiosk-eyebrow { background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.32); color: #86efac; }
+.kiosk-dark .btn-secondary {
+    background: rgba(255,255,255,.10);
+    border-color: rgba(255,255,255,.18);
+    color: #f4f6fb;
+}
+.kiosk-dark .btn-secondary:hover { background: rgba(255,255,255,.18); color: #fff; }
 .kiosk-mark { width: 62px; height: 62px; margin: 0 auto 26px; font-size: 26px; }
 .kiosk-headline {
     font-size: clamp(30px, 4.6vw, 46px);