Authentik-Anleitung: die Redirect URI deutlicher erklaert

Der Beispielwert https://qr.example.com/... liess sich als etwas zum
Abschreiben lesen. Er ist aber keiner: Die Adresse ergibt sich aus der
eigenen BASE_URL, und wer den Beispielwert uebernimmt, landet bei Authentik
auf „Redirect URI Error", ohne dass die Anwendung ueberhaupt etwas mitbekommt.

Jetzt ein eigener Abschnitt mit der Formel, dem Befehl zum Nachsehen der
BASE_URL, drei Beispielen und den vier Fallen: Schraegstrich am Ende, Schema
und Port, die Auswahl Strict/Regex neben dem Feld, und ein leeres Feld.

Dazu, wo die tatsaechlich angekommene Adresse steht — in der Adresszeile und
in Authentik unter Events, Logs. Und der Hinweis, dass eine abweichende
Adresse nicht fuer eine falsche Authentik-Einstellung spricht, sondern fuer
eine falsche BASE_URL — die gehoert korrigiert, bevor der erste dynamische
Code entsteht.

README.md

@@ -27,6 +27,10 @@ entscheidet die Verwaltung — nicht gebrauchte lassen sich ausblenden.
 - **Mehrere Domains** für Kurz-URLs, den Gruppen zugeteilt.
 - **Single Sign-on** über Authentik oder einen anderen OIDC-Anbieter.
 - **Typen abschaltbar:** Was ihr nicht braucht, erscheint gar nicht erst.
+- **Eigenes Erscheinungsbild:** Name, Logo, Favicon und Akzentfarbe im
+  Admin-Bereich einstellbar.
+- **Hell und dunkel:** folgt dem Betriebssystem, mit Umschalter für eine
+  eigene Wahl.
 - **Zwei Container, kein Reverse Proxy nötig.** Migrationen laufen beim Start
   von selbst; alles Nötige steht in einer `.env`.
 

docs/authentik.md

@@ -42,7 +42,7 @@ Adressen.
 | Client type | **Confidential** |
 | Client ID | notieren — kommt gleich in die `.env` |
 | Client Secret | notieren — ebenfalls |
-| Redirect URIs | `https://qr.example.com/api/auth/oidc/callback` |
+| Redirect URIs | **deine** `BASE_URL` + `/api/auth/oidc/callback` — siehe unten |
 | Signing Key | ein vorhandenes Zertifikat auswählen |
 | Subject mode | `Based on the User's hashed ID` (Voreinstellung) |
 
@@ -50,9 +50,49 @@ Zu den **Scopes**: `openid`, `email` und `profile` müssen ausgewählt sein.
 Ohne `email` liefert Authentik keine Adresse, und die Anwendung lehnt die
 Anmeldung mit einer entsprechenden Meldung ab.
 
-> **Redirect URI genau so eintragen.** Ein fehlendes `https://`, ein Schrägstrich
+### Die Redirect URI
-> zu viel oder ein anderer Hostname führt zu `redirect_uri mismatch` —
+
-> Authentik bricht dann ab, bevor die Anwendung überhaupt etwas mitbekommt.
+Das ist der häufigste Stolperstein. Der Wert ist **kein Beispiel zum
+Abschreiben**, sondern ergibt sich aus deiner `BASE_URL`:
+
+```
+{BASE_URL}/api/auth/oidc/callback
+```
+
+Was dein Container als `BASE_URL` kennt, zeigt:
+
+```bash
+docker compose exec app env | grep BASE_URL
+```
+
+Ein paar Beispiele:
+
+| `BASE_URL` | Redirect URI |
+| --- | --- |
+| `https://qr.example.com` | `https://qr.example.com/api/auth/oidc/callback` |
+| `http://10.10.10.150:3005` | `http://10.10.10.150:3005/api/auth/oidc/callback` |
+| `http://192.168.1.50:3000` | `http://192.168.1.50:3000/api/auth/oidc/callback` |
+
+Zu beachten:
+
+- **Kein Schrägstrich am Ende.**
+- **Schema und Port gehören dazu** — `http` ist nicht `https`, und `:3005`
+  darf nicht fehlen.
+- Neben dem Feld steht in neueren Authentik-Fassungen eine Auswahl **Strict**
+  oder **Regex**. Für eine feste Adresse muss dort **Strict** stehen. Bei
+  `Regex` wäre jeder Punkt einer IP-Adresse ein Platzhalter und müsste
+  maskiert werden.
+- Bleibt das Feld leer, lässt Authentik **gar nichts** durch.
+
+> **Wenn es trotzdem klemmt:** Authentik zeigt den Fehler „Redirect URI Error“
+> noch auf seiner eigenen Seite an — die Anwendung bekommt davon nichts mit.
+> Welche Adresse tatsächlich ankam, steht zum Vergleich
+> 1. in der Adresszeile des Browsers, im Parameter `redirect_uri`, und
+> 2. in Authentik unter **Events → Logs** im Eintrag `redirect_uri_error`.
+>
+> Weicht die ankommende Adresse von deiner `BASE_URL` ab, ist nicht Authentik
+> falsch eingestellt, sondern die `BASE_URL` — und die gehört korrigiert,
+> bevor der erste dynamische Code entsteht: Sie steckt in jedem davon.
 
 ---
 
@@ -216,7 +256,7 @@ Danach verschwindet das Passwortfeld von der Anmeldeseite.
 | Der Knopf erscheint nicht | `AUTH_ENABLED` oder `OIDC_ENABLED` steht nicht auf `true`. Prüfen mit `docker compose exec app env \| grep OIDC`. Steht dort nichts, fehlt die Variable im `environment:`-Block der `docker-compose.yml` — die `.env` allein reicht nicht. |
 | „Die Anmeldung über den externen Anbieter ist unvollständig eingerichtet“ | Es fehlt `OIDC_ISSUER`, `OIDC_CLIENT_ID` oder `OIDC_CLIENT_SECRET`. Die Meldung nennt, welche. |
 | „Der Anmelde-Anbieter ist nicht erreichbar“ | Der Container kommt nicht an Authentik. Testen mit `docker compose exec app wget -qO- <issuer>/.well-known/openid-configuration`. Häufig: interner DNS-Name statt öffentlicher Adresse. |
-| Authentik meldet `redirect_uri mismatch` | Die Redirect URI im Provider stimmt nicht exakt mit `{BASE_URL}/api/auth/oidc/callback` überein. Auf Schema, Hostname und Schrägstriche achten. |
+| Authentik zeigt „Redirect URI Error“ | Die Redirect URI im Provider stimmt nicht exakt mit `{BASE_URL}/api/auth/oidc/callback` überein — siehe [Die Redirect URI](#die-redirect-uri). Auf Schema, Port, Schrägstrich am Ende und die Auswahl Strict/Regex achten. |
 | „Der Anbieter hat keine E-Mail-Adresse geliefert“ | Der Scope `email` fehlt im Provider, oder der Benutzer hat in Authentik keine Adresse hinterlegt. |
 | „Der Anbieter hat die Anmeldung abgelehnt“ | Der Benutzer ist der Application in Authentik nicht zugeordnet — Policy/Group Binding prüfen. |
 | „Der Anmeldevorgang ist abgelaufen“ | Zwischen Klick und Rückkehr sind mehr als 10 Minuten vergangen, oder der Cookie ging verloren. Häufigste echte Ursache: `BASE_URL` zeigt auf eine andere Adresse als die, über die der Browser kommt. |

docs/funktionen.md

@@ -19,6 +19,7 @@ so entschieden ist. Wie man es bedient, steht in der
 - [Anmeldung, Gruppen und Rollen](#anmeldung-gruppen-und-rollen)
 - [Single Sign-on](#single-sign-on)
 - [Mehrere Domains](#mehrere-domains)
+- [Erscheinungsbild](#erscheinungsbild)
 - [Verwaltung](#verwaltung)
 - [Betrieb](#betrieb)
 - [Schnittstelle](#schnittstelle)
@@ -344,10 +345,77 @@ Anwendung leiten.
 
 ---
 
+## Erscheinungsbild
+
+Unter Verwaltung → Erscheinungsbild lassen sich einstellen:
+
+| | |
+| --- | --- |
+| **Name** | Kopfzeile, Titel des Browser-Tabs, Fußzeile |
+| **Zusatz in der Fußzeile** | steht hinter dem Namen |
+| **Akzentfarbe** | neun Vorschläge oder ein eigener Hex-Wert |
+| **Logo** | PNG, JPEG, WebP oder AVIF bis 2 MB; ersetzt Zeichen und Name |
+| **Favicon** | PNG, ICO oder WebP bis 512 KB |
+
+**Wie die Farbe wirkt.** Tailwind übersetzt `bg-indigo-600` zu
+`background-color: var(--color-indigo-600)`. Die Anwendung überschreibt diese
+Variablen zur Laufzeit — damit folgen alle rund 60 eingefärbten Stellen der
+gewählten Farbe, ohne dass eine einzige Klasse angefasst werden müsste.
+
+Aus der Eingabe übernommen werden nur **Farbton und Sättigung**, nicht die
+Helligkeit. Die Helligkeitsstufen kommen aus der Vorlage. Das ist Absicht: Auf
+der Stufe 600 steht weiße Schrift. Käme die Helligkeit aus der Eingabe, würde
+ein helles Gelb die Kopfzeile unlesbar machen — so bleibt jeder Farbton
+benutzbar.
+
+### Hell und dunkel
+
+Die Anwendung folgt von sich aus der Einstellung des Betriebssystems. In der
+Kopfzeile steht ein Umschalter mit drei Zuständen:
+
+| | |
+| --- | --- |
+| **System** | folgt dem Betriebssystem — abends dunkel, morgens hell |
+| **Hell** | immer hell |
+| **Dunkel** | immer dunkel |
+
+Drei statt zwei, weil ein reiner Ein/Aus-Schalter nach dem ersten Klick für
+immer eine feste Wahl bedeutet. Die Wahl merkt sich der Browser; ein zweiter
+Tab zieht automatisch nach.
+
+**Wie es umgesetzt ist.** Nicht über `dark:`-Klassen — die hätten an rund 440
+Stellen ergänzt werden müssen, und jede neue Zeile müsste daran denken.
+Stattdessen entscheidet `light-dark()` im CSS, welchen Wert die Farbvariablen
+tragen; gesteuert wird das über `color-scheme`. Deshalb genügt für den
+Umschalter ein Attribut am `<html>`-Element — und die Systemwahl funktioniert
+sogar **ohne JavaScript**.
+
+Die dunklen Werte sind keine Spiegelung der hellen: Reines Schwarz unter
+weißer Schrift flimmert. Die Flächen liegen bei 20–26 % Helligkeit im selben
+leicht blauen Ton wie die helle Reihe. Alle Textkontraste liegen über der
+Anforderung von 4,5:1 — gemessen, nicht geschätzt.
+
+Unverändert bleiben die QR-Codes selbst. Deren Farben legt die Gestaltung
+fest, und ein Code, der hell gedruckt wird, soll in der Vorschau nicht anders
+aussehen.
+
+**Auf den Landingpages** gelten Farbe, Favicon und das Farbthema, aber weder Logo noch
+Navigation. Wer einen Aushang scannt, soll die Seite des Inhalts sehen, nicht
+die einer Verwaltungssoftware. Ein Logo je Gruppe auf den Landingpages steht
+als eigener Punkt auf der [Roadmap](roadmap.md).
+
+**Zu den Dateien.** Logo und Favicon liegen wie alle Uploads in der Datenbank
+und werden über `/api/uploads/{id}` ausgeliefert — öffentlich, denn sie stehen
+auf jeder Seite. Beim Ersetzen wird die vorherige Datei gelöscht. SVG bleibt
+auch hier ausgeschlossen, aus demselben Grund wie bei den übrigen Uploads.
+
+---
+
 ## Verwaltung
 
 | Bereich | Was dort geht |
 | --- | --- |
+| **Erscheinungsbild** | Name, Logo, Favicon, Akzentfarbe |
 | **QR-Typen** | einzelne Typen ausblenden |
 | **Benutzer** | anlegen, deaktivieren, Passwort setzen, Instanz-Admin vergeben |
 | **Gruppen** | anlegen, umbenennen, Mitglieder und deren Rollen pflegen |
@@ -398,7 +466,7 @@ Alles, was die Oberfläche tut, geht auch über HTTP:
 | `POST /api/feedback` | Rückmeldung abgeben |
 | `GET/POST /api/auth` | Zustand, Anmelden, Abmelden, Passwort ändern |
 | `GET /api/auth/oidc/start` · `/callback` | Anmeldung über den Anbieter |
-| `/api/admin/types` · `users` · `groups` · `domains` | Verwaltung |
+| `/api/admin/types` · `users` · `groups` · `domains` · `branding` | Verwaltung |
 | `GET /r/{slug}` | Weiterleitung eines dynamischen Codes |
 | `GET /s/{slug}` | öffentliche Landingpage |
 

docs/roadmap.md

@@ -62,6 +62,18 @@ Damit sind **alle 15 vorgesehenen Typen** gebaut.
 Anmeldung über Authentik und andere OIDC-Anbieter, mit PKCE und geprüftem
 ID-Token.
 
+### Erscheinungsbild (16.08.2026)
+
+Name, Logo, Favicon und Akzentfarbe im Admin-Bereich einstellbar. Die Farbe
+wirkt über die Farbvariablen, die Tailwind ohnehin benutzt — deshalb ohne
+Umbau der rund 60 eingefärbten Stellen.
+
+### Dark Mode (16.08.2026)
+
+Folgt dem Betriebssystem, mit Umschalter für Hell, Dunkel und System.
+Umgesetzt über `light-dark()` statt über `dark:`-Klassen — deshalb ohne
+Änderung an den rund 440 Farbklassen und ohne JavaScript für die Systemwahl.
+
 ### Dokumentation (15.08.2026)
 
 Bedienungsanleitung mit Bildern, Authentik-Anleitung, Funktionsübersicht.
@@ -190,10 +202,13 @@ sehr viele oder sehr große Dateien ablegt, will sie irgendwann auf einem
 Objektspeicher (S3) haben. Der Wechsel betrifft nur `src/lib/uploads.ts` und
 die Auslieferungsroute — aber auch die Sicherungsstrategie.
 
-**Eigene Gestaltung der Landingpages** · groß
+**Erscheinungsbild je Gruppe** · groß
-Logo, Farben und Schrift je Gruppe, damit die Seite nach der eigenen Firma
+Seit dem 16.08. lassen sich Name, Logo, Favicon und Farbe für die ganze
-aussieht. Technisch überschaubar, gestalterisch eine eigene Aufgabe — und es
+Installation einstellen. Der nächste Schritt wäre, das je Gruppe zu erlauben
-braucht Grenzen, damit nichts Unlesbares entsteht.
+und die Landingpages mit dem Logo der jeweiligen Gruppe zu versehen — damit
+eine gescannte Seite nach der Firma aussieht, der sie gehört. Technisch
+überschaubar, gestalterisch eine eigene Aufgabe; es braucht Grenzen, damit
+nichts Unlesbares entsteht.
 
 **Mehrsprachige Oberfläche** · groß
 Die Anwendung ist durchgehend deutsch, auch in den Fehlermeldungen und den

prisma/migrations/20260816090000_erscheinungsbild/migration.sql

@@ -0,0 +1,31 @@
+-- Erscheinungsbild: Name, Logo, Favicon und Akzentfarbe der Installation.
+
+-- Wozu eine hochgeladene Datei gehört. Bestehende Dateien hängen alle an
+-- einem Code, deshalb ist die Voreinstellung richtig.
+ALTER TABLE "Upload" ADD COLUMN "purpose" TEXT NOT NULL DEFAULT 'code';
+CREATE INDEX "Upload_purpose_idx" ON "Upload"("purpose");
+
+CREATE TABLE "Branding" (
+    "id"              TEXT NOT NULL DEFAULT 'branding',
+    "appName"         TEXT NOT NULL DEFAULT 'QR-Code-Generator',
+    "footerText"      TEXT NOT NULL DEFAULT 'statische und dynamische QR-Codes',
+    "accentColor"     TEXT NOT NULL DEFAULT '#4F46E5',
+    "logoUploadId"    TEXT,
+    "faviconUploadId" TEXT,
+    "updatedAt"       TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Branding_pkey" PRIMARY KEY ("id")
+);
+
+CREATE UNIQUE INDEX "Branding_logoUploadId_key" ON "Branding"("logoUploadId");
+CREATE UNIQUE INDEX "Branding_faviconUploadId_key" ON "Branding"("faviconUploadId");
+
+ALTER TABLE "Branding" ADD CONSTRAINT "Branding_logoUploadId_fkey"
+    FOREIGN KEY ("logoUploadId") REFERENCES "Upload"("id")
+    ON DELETE SET NULL ON UPDATE CASCADE;
+ALTER TABLE "Branding" ADD CONSTRAINT "Branding_faviconUploadId_fkey"
+    FOREIGN KEY ("faviconUploadId") REFERENCES "Upload"("id")
+    ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- Die eine Zeile gleich anlegen, damit die Anwendung sie nur noch lesen muss.
+INSERT INTO "Branding" ("id", "updatedAt") VALUES ('branding', CURRENT_TIMESTAMP);

prisma/schema.prisma

@@ -219,14 +219,45 @@ model Upload {
   data      Bytes
   createdAt DateTime @default(now())
 
+  /// „code" gehört zu einem QR-Code, „branding" zur Oberfläche. Nur die
+  /// erste Art wird als herrenlos weggeräumt.
+  purpose   String   @default("code")
+
   /// Der Code, zu dem die Datei gehört. Leer, solange sie nur hochgeladen,
   /// der Code aber noch nicht gespeichert wurde; solche Reste räumt
   /// `src/lib/uploads.ts` nach einer Weile weg.
   qrCodeId  String?
   qrCode    QrCode?  @relation(fields: [qrCodeId], references: [id], onDelete: Cascade)
 
+  brandingLogo    Branding? @relation("BrandingLogo")
+  brandingFavicon Branding? @relation("BrandingFavicon")
+
   @@index([qrCodeId])
   @@index([createdAt])
+  @@index([purpose])
+}
+
+/// Erscheinungsbild der Installation — Name, Logo, Favicon, Akzentfarbe.
+///
+/// Genau eine Zeile mit fester Id. Ein eigenes Modell statt einzelner
+/// Schlüssel-Wert-Paare, damit die Felder ihren Typ behalten und die
+/// Beziehungen zu den hochgeladenen Dateien echte Fremdschlüssel sind.
+model Branding {
+  id          String   @id @default("branding")
+  appName     String   @default("QR-Code-Generator")
+  /// Zeile in der Fußzeile, hinter dem Namen.
+  footerText  String   @default("statische und dynamische QR-Codes")
+  /// Akzentfarbe als Hex. Übernommen werden daraus Farbton und Sättigung;
+  /// die Helligkeitsstufen stammen aus der Vorlage — siehe
+  /// src/lib/branding-colors.ts.
+  accentColor String   @default("#4F46E5")
+
+  logoUploadId    String? @unique
+  logoUpload      Upload? @relation("BrandingLogo", fields: [logoUploadId], references: [id], onDelete: SetNull)
+  faviconUploadId String? @unique
+  faviconUpload   Upload? @relation("BrandingFavicon", fields: [faviconUploadId], references: [id], onDelete: SetNull)
+
+  updatedAt   DateTime @updatedAt
 }
 
 /// Eine Rückmeldung, die jemand über die Landingpage eines Feedback-Codes

src/app/(app)/konto/page.tsx

@@ -37,11 +37,11 @@ export default async function AccountPage() {
             <span className="font-medium">Die Anmeldung ist ausgeschaltet.</span>{" "}
             Es gibt deshalb kein Konto und niemanden zum Abmelden — wer die
             Anwendung erreicht, darf alles. Zum Einschalten{" "}
-            <code className="rounded bg-white/70 px-1.5 py-0.5 font-mono text-xs">
+            <code className="rounded bg-surface/70 px-1.5 py-0.5 font-mono text-xs">
               AUTH_ENABLED=true
             </code>{" "}
             in der <code className="font-mono text-xs">.env</code> setzen und{" "}
-            <code className="rounded bg-white/70 px-1.5 py-0.5 font-mono text-xs">
+            <code className="rounded bg-surface/70 px-1.5 py-0.5 font-mono text-xs">
               docker compose up -d
             </code>{" "}
             ausführen. Beim nächsten Aufruf legst du den ersten Administrator

src/app/(app)/layout.tsx

@@ -2,8 +2,10 @@ import Link from "next/link";
 
 import { LogoutButton } from "@/components/auth-forms";
 import { Icon } from "@/components/icons";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { actorLabel, getActor, isAuthEnabled } from "@/lib/auth/actor";
 import { can } from "@/lib/auth/policy";
+import { getBranding } from "@/lib/branding";
 
 // Der Kopfbereich hängt von der Anmeldung ab und darf nicht vorgerendert
 // werden.
@@ -21,24 +23,43 @@ export default async function AppLayout({ children }: LayoutProps<"/">) {
   const actor = await getActor();
   const signedIn = actor.kind !== "anonymous";
   const showAdmin = can(actor, "instance:manage");
+  const branding = await getBranding();
 
   return (
     <div className="flex flex-1 flex-col">
-      <header className="border-b border-slate-200 bg-white">
+      <header className="border-b border-slate-200 bg-surface">
         <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-4 gap-y-2 px-4 py-3.5 sm:px-6">
           <Link
             href="/"
             className="flex items-center gap-2.5 rounded-lg font-semibold text-slate-900"
           >
-            <span className="flex size-9 items-center justify-center rounded-lg bg-indigo-600 text-white">
+            {branding.logoUploadId ? (
-              <Icon name="qr" className="size-5" />
+              /* eslint-disable-next-line @next/next/no-img-element -- aus der
-            </span>
+                 Datenbank ausgeliefert, nicht aus dem Dateisystem */
+              <img
+                src={`/api/uploads/${branding.logoUploadId}`}
+                alt={branding.appName}
+                className="h-9 w-auto max-w-[12rem] object-contain"
+              />
+            ) : (
+              <span className="flex size-9 items-center justify-center rounded-lg bg-indigo-600 text-white">
+                <Icon name="qr" className="size-5" />
+              </span>
+            )}
             {/* Auf schmalen Geräten reicht das Zeichen — sonst passt die
-                Navigation nicht mehr in eine Zeile. */}
+                Navigation nicht mehr in eine Zeile. Mit eigenem Logo trägt
-            <span className="hidden sm:inline">QR-Code-Generator</span>
+                dieses schon den Namen. */}
+            {branding.logoUploadId ? null : (
+              <span className="hidden sm:inline">{branding.appName}</span>
+            )}
           </Link>
 
           <nav className="flex flex-wrap items-center gap-0.5 text-sm font-medium sm:gap-1">
+            <ThemeToggle />
+            <span
+              aria-hidden="true"
+              className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
+            />
             {signedIn ? (
               <>
                 <Link href="/" className={NAV_LINK}>
@@ -66,7 +87,7 @@ export default async function AppLayout({ children }: LayoutProps<"/">) {
                   title={`Konto von ${actor.user.email}`}
                   className="flex max-w-[13rem] items-center gap-2 rounded-lg px-2.5 py-2 text-slate-700 transition-colors hover:bg-slate-100"
                 >
-                  <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-[0.7rem] font-semibold text-indigo-700 uppercase">
+                  <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-accent-soft text-[0.7rem] font-semibold text-accent-soft-fg uppercase">
                     {actorLabel(actor).slice(0, 2)}
                   </span>
                   <span className="hidden truncate sm:inline">
@@ -106,9 +127,10 @@ export default async function AppLayout({ children }: LayoutProps<"/">) {
 
       <main className="flex-1">{children}</main>
 
-      <footer className="border-t border-slate-200 bg-white">
+      <footer className="border-t border-slate-200 bg-surface">
         <div className="mx-auto max-w-6xl px-4 py-6 text-sm text-slate-500 sm:px-6">
-          QR-Code-Generator · statische und dynamische QR-Codes
+          {branding.appName}
+          {branding.footerText ? ` · ${branding.footerText}` : null}
         </div>
       </footer>
     </div>

src/app/(app)/meine-codes/[id]/feedback/page.tsx

@@ -121,7 +121,7 @@ export default async function FeedbackResultsPage({ params }: PageProps) {
                 {kommentare.map((eintrag) => (
                   <li
                     key={eintrag.id}
-                    className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+                    className="rounded-xl border border-slate-200 bg-surface p-4 shadow-sm"
                   >
                     <div className="mb-1.5 flex items-center gap-2 text-sm text-slate-500">
                       <span className="font-medium text-slate-900 tabular-nums">

src/app/(app)/page.tsx

@@ -50,7 +50,7 @@ export default async function HomePage() {
                 <span
                   className={
                     usable
-                      ? "flex size-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600"
+                      ? "flex size-11 shrink-0 items-center justify-center rounded-xl bg-accent-soft text-accent-text"
                       : "flex size-11 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-400"
                   }
                 >
@@ -96,7 +96,7 @@ export default async function HomePage() {
                 {usable ? (
                   <Link
                     href={`/erstellen/${qrType.id}`}
-                    className="flex h-full items-start gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
+                    className="flex h-full items-start gap-4 rounded-2xl border border-slate-200 bg-surface p-4 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
                   >
                     {tile}
                   </Link>

src/app/(app)/verwaltung/erscheinungsbild/page.tsx

@@ -0,0 +1,53 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { BrandingAdmin } from "@/components/branding-admin";
+import { Icon } from "@/components/icons";
+import { requirePagePermission } from "@/lib/auth/guard";
+import { getBranding } from "@/lib/branding";
+
+export const metadata: Metadata = { title: "Erscheinungsbild" };
+
+export const dynamic = "force-dynamic";
+
+export default async function BrandingPage() {
+  await requirePagePermission("instance:manage");
+  const branding = await getBranding();
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
+      <Link
+        href="/verwaltung"
+        className="mb-5 inline-flex items-center gap-1.5 rounded-lg text-sm font-medium text-slate-600 transition-colors hover:text-slate-900"
+      >
+        <Icon name="arrowLeft" className="size-4" />
+        Zur Verwaltung
+      </Link>
+
+      <div className="mb-7">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+          Erscheinungsbild
+        </h1>
+        <p className="mt-2 text-slate-600">
+          Name, Logo, Favicon und Farbe der Oberfläche. Die Einstellungen
+          gelten für die ganze Installation.
+        </p>
+        <p className="mt-2 text-sm text-slate-500">
+          Die öffentlichen Landingpages übernehmen die Farbe und das Favicon,
+          aber weder Logo noch Navigation — wer einen Code scannt, soll die
+          Seite des Inhalts sehen und nicht die einer Verwaltungssoftware.
+        </p>
+      </div>
+
+      <BrandingAdmin
+        initial={{
+          appName: branding.appName,
+          footerText: branding.footerText,
+          accentColor: branding.accentColor,
+          logoUploadId: branding.logoUploadId,
+          faviconUploadId: branding.faviconUploadId,
+        }}
+      />
+    </div>
+  );
+}

src/app/(app)/verwaltung/page.tsx

@@ -5,6 +5,7 @@ import { Icon, type IconName } from "@/components/icons";
 import { Notice } from "@/components/ui";
 import { isAuthEnabled } from "@/lib/auth/actor";
 import { requirePagePermission } from "@/lib/auth/guard";
+import { getBranding } from "@/lib/branding";
 import { prisma } from "@/lib/db";
 
 export const metadata: Metadata = { title: "Verwaltung" };
@@ -26,9 +27,9 @@ function Tile({
   return (
     <Link
       href={href}
-      className="flex items-start gap-4 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
+      className="flex items-start gap-4 rounded-2xl border border-slate-200 bg-surface p-5 shadow-sm transition-all hover:border-indigo-300 hover:shadow-md"
     >
-      <span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
+      <span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-accent-soft text-accent-text">
         <Icon name={icon} className="size-6" />
       </span>
       <span className="min-w-0 flex-1">
@@ -45,12 +46,21 @@ function Tile({
 export default async function AdminPage() {
   await requirePagePermission("instance:manage");
 
-  const [userCount, groupCount, codeCount, domainCount] = await Promise.all([
+  const [userCount, groupCount, codeCount, domainCount, branding] =
-    prisma.user.count(),
+    await Promise.all([
-    prisma.group.count(),
+      prisma.user.count(),
-    prisma.qrCode.count(),
+      prisma.group.count(),
-    prisma.domain.count(),
+      prisma.qrCode.count(),
-  ]);
+      prisma.domain.count(),
+      getBranding(),
+    ]);
+
+  const eigenes = [
+    branding.logoUploadId && "Logo",
+    branding.faviconUploadId && "Favicon",
+  ].filter(Boolean);
+  const brandingHint =
+    eigenes.length > 0 ? `${eigenes.join(" und ")} hinterlegt` : branding.appName;
 
   return (
     <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 sm:py-10">
@@ -68,11 +78,11 @@ export default async function AdminPage() {
           <Notice tone="info">
             <span className="font-medium">Die Anmeldung ist ausgeschaltet.</span>{" "}
             Jeder, der die Anwendung erreicht, darf alles. Zum Einschalten
-            <code className="mx-1 rounded bg-white/70 px-1.5 py-0.5 font-mono text-xs">
+            <code className="mx-1 rounded bg-surface/70 px-1.5 py-0.5 font-mono text-xs">
               AUTH_ENABLED=true
             </code>
             in der <code className="font-mono text-xs">.env</code> setzen und
-            <code className="mx-1 rounded bg-white/70 px-1.5 py-0.5 font-mono text-xs">
+            <code className="mx-1 rounded bg-surface/70 px-1.5 py-0.5 font-mono text-xs">
               docker compose up -d
             </code>
             ausführen. Beim nächsten Aufruf legst du den ersten Administrator
@@ -110,6 +120,13 @@ export default async function AdminPage() {
           description="Festlegen, welche Typen auf der Startseite erscheinen."
           hint="15 Typen insgesamt"
         />
+        <Tile
+          href="/verwaltung/erscheinungsbild"
+          icon="image"
+          title="Erscheinungsbild"
+          description="Name, Logo, Favicon und Farbe der Oberfläche."
+          hint={brandingHint}
+        />
       </div>
     </div>
   );

src/app/api/admin/branding/route.ts

@@ -0,0 +1,96 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import { requirePermission } from "@/lib/auth/policy";
+import { isHexColor } from "@/lib/branding-colors";
+import {
+  getBranding,
+  MAX_APP_NAME,
+  MAX_FOOTER_TEXT,
+  saveBranding,
+} from "@/lib/branding";
+import { prisma } from "@/lib/db";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+/** `null` löscht das Bild, ein fehlendes Feld lässt es unverändert. */
+const bildSchema = z.string().trim().min(1).max(64).nullable().optional();
+
+const updateSchema = z.object({
+  appName: z
+    .string()
+    .trim()
+    .min(1, { error: "Bitte gib einen Namen an." })
+    .max(MAX_APP_NAME, {
+      error: `Der Name darf höchstens ${MAX_APP_NAME} Zeichen lang sein.`,
+    })
+    .optional(),
+  footerText: z
+    .string()
+    .trim()
+    .max(MAX_FOOTER_TEXT, {
+      error: `Der Text darf höchstens ${MAX_FOOTER_TEXT} Zeichen lang sein.`,
+    })
+    .optional(),
+  accentColor: z
+    .string()
+    .trim()
+    .refine(isHexColor, {
+      error: "Die Farbe muss als Hex-Wert angegeben werden, z. B. #4F46E5.",
+    })
+    .optional(),
+  logoUploadId: bildSchema,
+  faviconUploadId: bildSchema,
+});
+
+export async function GET(): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+    return Response.json({ branding: await getBranding() });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+/**
+ * Prüft, dass eine angegebene Datei existiert und wirklich zum
+ * Erscheinungsbild gehört — sonst ließe sich hier die Datei eines fremden
+ * QR-Codes einhängen und damit dessen Anzeige zerstören.
+ */
+async function assertBrandingUpload(
+  id: string | null | undefined,
+  feld: string,
+): Promise<void> {
+  if (!id) return;
+  const upload = await prisma.upload.findUnique({
+    where: { id },
+    select: { purpose: true },
+  });
+  if (!upload || upload.purpose !== "branding") {
+    throw new QrRequestError(
+      `${feld} wurde nicht gefunden. Bitte lade die Datei erneut hoch.`,
+      404,
+    );
+  }
+}
+
+export async function PATCH(request: NextRequest): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+
+    const parsed = updateSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    await assertBrandingUpload(parsed.data.logoUploadId, "Das Logo");
+    await assertBrandingUpload(parsed.data.faviconUploadId, "Das Favicon");
+
+    return Response.json({ branding: await saveBranding(parsed.data) });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

src/app/api/uploads/route.ts

@@ -9,6 +9,7 @@ import {
   isUploadKind,
   maxUploadBytes,
   storeUpload,
+  uploadPurposeOf,
 } from "@/lib/uploads";
 
 export const dynamic = "force-dynamic";
@@ -28,10 +29,6 @@ export async function POST(request: NextRequest): Promise<Response> {
 
     const actor = await getActor();
 
-    // Wer keinen Code anlegen darf, soll auch nichts ablegen können.
-    const groupId = await resolveTargetGroup(actor, undefined);
-    requirePermission(actor, "codes:create", { groupId });
-
     let form: FormData;
     try {
       form = await request.formData();
@@ -44,6 +41,15 @@ export async function POST(request: NextRequest): Promise<Response> {
       return jsonError("Unbekannte Dateiart.");
     }
 
+    // Die Rechte hängen daran, wofür die Datei gedacht ist: Logo und Favicon
+    // gehören der Installation, alles Übrige einem Code in einer Gruppe.
+    if (uploadPurposeOf(kind) === "branding") {
+      requirePermission(actor, "instance:manage");
+    } else {
+      const groupId = await resolveTargetGroup(actor, undefined);
+      requirePermission(actor, "codes:create", { groupId });
+    }
+
     const file = form.get("file");
     if (!(file instanceof File)) {
       return jsonError("Es wurde keine Datei mitgeschickt.");

src/app/globals.css

@@ -9,10 +9,81 @@
     monospace;
 }
 
+/* ---------------------------------------------------------------- Dark Mode
+
+   Umgesetzt über `light-dark()` statt über `dark:`-Klassen.
+
+   Der Grund: Die Oberfläche benutzt an rund 440 Stellen feste Farbklassen wie
+   `bg-slate-50` oder `text-slate-900`. Jede davon um eine `dark:`-Variante zu
+   ergänzen wäre eine riesige, fehleranfällige Fleißarbeit — und jede künftige
+   Zeile müsste daran denken. Stattdessen werden hier die Farbvariablen
+   umdefiniert, die Tailwind ohnehin benutzt: `bg-slate-50` wird zu
+   `background-color: var(--color-slate-50)`, und was diese Variable enthält,
+   entscheidet sich hier.
+
+   Welche Hälfte von `light-dark()` gilt, steuert `color-scheme` — deshalb
+   genügt für den Umschalter ein Attribut am <html>-Element. Ohne Attribut
+   folgt die Anwendung dem Betriebssystem, ganz ohne JavaScript.
+
+   Die dunklen Werte sind keine bloße Spiegelung: Reines Schwarz unter weißer
+   Schrift flimmert. Die Flächen liegen deshalb bei 16–26 % Helligkeit, mit
+   demselben leicht blauen Ton wie die helle Reihe.
+*/
+
+@theme {
+  /* Grautöne. Hell: die Reihe von Tailwind. Dunkel: von dunkel nach hell
+     gedreht, damit `text-slate-900` weiterhin „die kräftigste Schrift“
+     bedeutet und `bg-slate-50` „der ruhigste Grund“. */
+  --color-slate-50: light-dark(oklch(98.4% 0.003 247.858), oklch(16.5% 0.018 265));
+  --color-slate-100: light-dark(oklch(96.8% 0.007 247.896), oklch(21% 0.02 265));
+  --color-slate-200: light-dark(oklch(92.9% 0.013 255.508), oklch(28% 0.022 262));
+  --color-slate-300: light-dark(oklch(86.9% 0.022 252.894), oklch(34% 0.026 260));
+  --color-slate-400: light-dark(oklch(70.4% 0.04 256.788), oklch(58% 0.032 258));
+  --color-slate-500: light-dark(oklch(55.4% 0.046 257.417), oklch(68% 0.03 257));
+  --color-slate-600: light-dark(oklch(44.6% 0.043 257.281), oklch(77% 0.025 257));
+  --color-slate-700: light-dark(oklch(37.2% 0.044 257.287), oklch(85% 0.02 257));
+  --color-slate-800: light-dark(oklch(27.9% 0.041 260.031), oklch(91% 0.014 258));
+  --color-slate-900: light-dark(oklch(20.8% 0.042 265.755), oklch(96.5% 0.008 258));
+  --color-slate-950: light-dark(oklch(12.9% 0.042 264.695), oklch(99% 0.003 258));
+
+  /* Flächen. `bg-white` wäre im Dunkeln falsch, `text-white` dagegen richtig
+     (es steht auf farbigem Grund) — beide teilen sich aber dieselbe Variable.
+     Deshalb tragen Flächen einen eigenen Namen: `bg-surface`. */
+  --color-surface: light-dark(#ffffff, oklch(22.5% 0.02 264));
+
+  /* Akzent auf dunklem Grund. Die Reihe selbst bleibt, wie das
+     Erscheinungsbild sie setzt — hier wird nur eine andere Stufe gewählt:
+     Fließtext braucht im Dunkeln eine hellere, Flächen eine dunklere. */
+  --color-accent-text: light-dark(
+    var(--color-indigo-600),
+    var(--color-indigo-400)
+  );
+  --color-accent-soft: light-dark(
+    var(--color-indigo-50),
+    color-mix(in oklab, var(--color-indigo-500) 22%, oklch(22.5% 0.02 264))
+  );
+  --color-accent-soft-fg: light-dark(
+    var(--color-indigo-700),
+    var(--color-indigo-300)
+  );
+
+  /* Immer dunkel, unabhängig vom Thema: die Fläche hinter einem Dialog und
+     der Grund einer Videovorschau. */
+  --color-scrim: oklch(20.8% 0.042 265.755);
+}
+
 :root {
+  color-scheme: light dark;
+}
+
+:root[data-theme="light"] {
   color-scheme: light;
 }
 
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
 body {
   background-color: var(--color-slate-50);
   color: var(--color-slate-900);
@@ -22,7 +93,7 @@ body {
 
 /* Sichtbarer, einheitlicher Fokusring für Tastaturbedienung. */
 :focus-visible {
-  outline: 2px solid var(--color-indigo-600);
+  outline: 2px solid var(--color-accent-text);
   outline-offset: 2px;
 }
 

src/app/layout.tsx

@@ -1,28 +1,73 @@
 import type { Metadata } from "next";
 
+import { THEME_INIT_SCRIPT } from "@/components/theme-toggle";
+import { accentCss } from "@/lib/branding-colors";
+import { getBranding } from "@/lib/branding";
+
 import "./globals.css";
 
-export const metadata: Metadata = {
+// Name, Farbe und Favicon kommen aus der Datenbank — nichts davon darf
-  title: {
+// vorgerendert werden.
-    default: "QR-Code-Generator",
+export const dynamic = "force-dynamic";
-    template: "%s · QR-Code-Generator",
+
-  },
+export async function generateMetadata(): Promise<Metadata> {
-  description:
+  const branding = await getBranding();
-    "QR-Codes erstellen: statisch oder dynamisch, mit eigenen Farben, frei wählbarer Größe und Download als PNG oder SVG.",
+
-};
+  return {
+    title: {
+      default: branding.appName,
+      template: `%s · ${branding.appName}`,
+    },
+    description:
+      "QR-Codes erstellen: statisch oder dynamisch, mit eigenen Farben, frei wählbarer Größe und Download als PNG oder SVG.",
+    // Ohne eigenes Favicon bleibt es bei src/app/favicon.ico.
+    ...(branding.faviconUploadId
+      ? {
+          icons: {
+            icon: {
+              url: `/api/uploads/${branding.faviconUploadId}`,
+              type: branding.faviconMimeType ?? undefined,
+            },
+          },
+        }
+      : {}),
+  };
+}
 
 /**
- * Wurzel-Layout — bewusst nur `html` und `body`.
+ * Wurzel-Layout — bewusst nur `html`, `body` und die Akzentfarbe.
  *
  * Kopfzeile, Navigation und Fußzeile der Anwendung stehen eine Ebene tiefer in
  * `(app)/layout.tsx`. Denn die öffentlichen Landingpages unter `/s/[slug]`
  * bekommen ein Feld voller Fremder zu sehen: dort haben „Verwaltung“ und
  * „Meine Codes“ nichts zu suchen.
+ *
+ * Die Farbe gehört dagegen hierher, damit auch die Landingpages sie tragen.
  */
-export default function RootLayout({ children }: LayoutProps<"/">) {
+export default async function RootLayout({ children }: LayoutProps<"/">) {
+  const branding = await getBranding();
+
   return (
     <html lang="de" className="h-full">
-      <body className="flex min-h-full flex-col">{children}</body>
+      <body className="flex min-h-full flex-col">
+        {/*
+          Setzt eine ausdrücklich gewählte Fassung, bevor der Browser zeichnet.
+          Wer der Systemeinstellung folgt, braucht das nicht — das erledigt
+          `light-dark()` im CSS von allein.
+        */}
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+        {/*
+          Überschreibt die Farbvariablen, die Tailwind ohnehin benutzt — damit
+          wirkt die Akzentfarbe an jeder Stelle der Oberfläche, ohne dass eine
+          einzige Klasse angefasst werden müsste. Der Inhalt entsteht
+          ausschließlich aus geprüften Zahlen; eine ungültige Farbe fällt auf
+          die Voreinstellung zurück.
+        */}
+        <style
+          dangerouslySetInnerHTML={{ __html: accentCss(branding.accentColor) }}
+        />
+        {children}
+      </body>
     </html>
   );
 }

src/components/branding-admin.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+import { Icon } from "@/components/icons";
+import {
+  Button,
+  Card,
+  CardTitle,
+  Field,
+  Notice,
+  TextInput,
+} from "@/components/ui";
+import { buildRamp, isHexColor } from "@/lib/branding-colors";
+import { UPLOAD_KINDS, formatBytes } from "@/lib/uploads.shared";
+
+export type BrandingDto = {
+  appName: string;
+  footerText: string;
+  accentColor: string;
+  logoUploadId: string | null;
+  faviconUploadId: string | null;
+};
+
+/** Vorschläge, damit man nicht mit einem Farbwähler anfangen muss. */
+const FARBEN = [
+  { label: "Indigo", value: "#4F46E5" },
+  { label: "Blau", value: "#1D4ED8" },
+  { label: "Türkis", value: "#0D9488" },
+  { label: "Grün", value: "#15803D" },
+  { label: "Bernstein", value: "#B45309" },
+  { label: "Rot", value: "#DC2626" },
+  { label: "Pink", value: "#DB2777" },
+  { label: "Violett", value: "#7C3AED" },
+  { label: "Schiefer", value: "#475569" },
+] as const;
+
+type BildFeld = "logoUploadId" | "faviconUploadId";
+
+export function BrandingAdmin({ initial }: { initial: BrandingDto }) {
+  const [wert, setWert] = useState<BrandingDto>(initial);
+  const [gespeichert, setGespeichert] = useState<BrandingDto>(initial);
+  const [fehler, setFehler] = useState<string | null>(null);
+  const [hinweis, setHinweis] = useState<string | null>(null);
+  const [laeuft, setLaeuft] = useState(false);
+
+  const logoInput = useRef<HTMLInputElement>(null);
+  const faviconInput = useRef<HTMLInputElement>(null);
+
+  const geaendert = JSON.stringify(wert) !== JSON.stringify(gespeichert);
+  const farbeGueltig = isHexColor(wert.accentColor);
+
+  async function hochladen(datei: File, kind: "logo" | "favicon", feld: BildFeld) {
+    setFehler(null);
+    setLaeuft(true);
+    try {
+      const form = new FormData();
+      form.set("kind", kind);
+      form.set("file", datei);
+      const antwort = await fetch("/api/uploads", { method: "POST", body: form });
+      const rumpf = await antwort.json().catch(() => null);
+      if (!antwort.ok) {
+        throw new Error(rumpf?.error ?? "Die Datei konnte nicht abgelegt werden.");
+      }
+      setWert((alt) => ({ ...alt, [feld]: rumpf.upload.id }));
+      setHinweis(null);
+    } catch (error) {
+      setFehler(error instanceof Error ? error.message : String(error));
+    } finally {
+      setLaeuft(false);
+    }
+  }
+
+  async function speichern() {
+    setFehler(null);
+    setHinweis(null);
+    setLaeuft(true);
+    try {
+      const antwort = await fetch("/api/admin/branding", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(wert),
+      });
+      const rumpf = await antwort.json().catch(() => null);
+      if (!antwort.ok) {
+        throw new Error(rumpf?.error ?? "Speichern nicht möglich.");
+      }
+      setGespeichert(rumpf.branding);
+      setWert(rumpf.branding);
+      setHinweis(
+        "Gespeichert. Die Kopfzeile zeigt es beim nächsten Seitenwechsel.",
+      );
+    } catch (error) {
+      setFehler(error instanceof Error ? error.message : String(error));
+    } finally {
+      setLaeuft(false);
+    }
+  }
+
+  const ramp = buildRamp(farbeGueltig ? wert.accentColor : "#4F46E5");
+  const farbe = (stop: number) =>
+    ramp.find((eintrag) => eintrag.stop === stop)?.value ?? "";
+
+  return (
+    <div className="space-y-5">
+      {fehler ? <Notice tone="error">{fehler}</Notice> : null}
+      {hinweis ? <Notice tone="success">{hinweis}</Notice> : null}
+
+      <Card>
+        <CardTitle hint="Steht in der Kopfzeile, im Titel des Browser-Tabs und in der Fußzeile.">
+          Name
+        </CardTitle>
+        <div className="space-y-4">
+          <Field label="Name der Anwendung" htmlFor="branding-name">
+            <TextInput
+              id="branding-name"
+              value={wert.appName}
+              maxLength={60}
+              disabled={laeuft}
+              onChange={(event) =>
+                setWert({ ...wert, appName: event.target.value })
+              }
+            />
+          </Field>
+          <Field
+            label="Zusatz in der Fußzeile"
+            htmlFor="branding-footer"
+            hint="Steht hinter dem Namen. Leer lassen, wenn nur der Name erscheinen soll."
+          >
+            <TextInput
+              id="branding-footer"
+              value={wert.footerText}
+              maxLength={120}
+              disabled={laeuft}
+              onChange={(event) =>
+                setWert({ ...wert, footerText: event.target.value })
+              }
+            />
+          </Field>
+        </div>
+      </Card>
+
+      <Card>
+        <CardTitle hint="Übernommen werden Farbton und Sättigung. Die Helligkeitsstufen bleiben, wie sie sind — sonst würde weiße Schrift auf hellem Grund unlesbar.">
+          Akzentfarbe
+        </CardTitle>
+
+        <div className="flex flex-wrap gap-2">
+          {FARBEN.map((eintrag) => (
+            <button
+              key={eintrag.value}
+              type="button"
+              disabled={laeuft}
+              onClick={() => setWert({ ...wert, accentColor: eintrag.value })}
+              aria-label={eintrag.label}
+              aria-pressed={
+                wert.accentColor.toUpperCase() === eintrag.value.toUpperCase()
+              }
+              title={eintrag.label}
+              className={`size-9 rounded-full border-2 transition-transform hover:scale-110 ${
+                wert.accentColor.toUpperCase() === eintrag.value.toUpperCase()
+                  ? "border-slate-900"
+                  : "border-transparent"
+              }`}
+              style={{ backgroundColor: eintrag.value }}
+            />
+          ))}
+        </div>
+
+        <div className="mt-4 flex flex-wrap items-end gap-4">
+          <Field label="Eigener Wert" htmlFor="branding-accent">
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                aria-label="Farbe wählen"
+                value={farbeGueltig ? wert.accentColor : "#4F46E5"}
+                disabled={laeuft}
+                onChange={(event) =>
+                  setWert({ ...wert, accentColor: event.target.value.toUpperCase() })
+                }
+                className="size-10 cursor-pointer rounded-lg border border-slate-300 bg-surface p-1"
+              />
+              <TextInput
+                id="branding-accent"
+                value={wert.accentColor}
+                maxLength={7}
+                spellCheck={false}
+                disabled={laeuft}
+                invalid={!farbeGueltig}
+                className="w-32 font-mono"
+                onChange={(event) =>
+                  setWert({ ...wert, accentColor: event.target.value })
+                }
+              />
+            </div>
+          </Field>
+
+          <div>
+            <span className="mb-1.5 block text-sm font-medium text-slate-700">
+              So sieht die Abstufung aus
+            </span>
+            <div className="flex overflow-hidden rounded-lg border border-slate-200">
+              {ramp.map((eintrag) => (
+                <span
+                  key={eintrag.stop}
+                  title={String(eintrag.stop)}
+                  className="size-7"
+                  style={{ backgroundColor: eintrag.value }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {!farbeGueltig ? (
+          <p role="alert" className="mt-2 text-sm text-red-600">
+            Bitte einen Hex-Wert wie #4F46E5 angeben.
+          </p>
+        ) : null}
+
+        {/* Zeigt, was die Farbe an den auffälligsten Stellen bewirkt. */}
+        <div className="mt-5 rounded-xl border border-slate-200 p-4">
+          <span className="mb-3 block text-xs font-semibold tracking-wide text-slate-500 uppercase">
+            Vorschau
+          </span>
+          <div className="flex flex-wrap items-center gap-3">
+            <span
+              className="flex size-9 items-center justify-center rounded-lg text-white"
+              style={{ backgroundColor: farbe(600) }}
+            >
+              <Icon name="qr" className="size-5" />
+            </span>
+            <span
+              className="rounded-lg px-4 py-2.5 text-sm font-medium text-white"
+              style={{ backgroundColor: farbe(600) }}
+            >
+              Dynamischen Code speichern
+            </span>
+            <span
+              className="rounded-full px-2 py-0.5 text-xs font-medium"
+              style={{ backgroundColor: farbe(100), color: farbe(700) }}
+            >
+              Abzeichen
+            </span>
+            <span className="text-sm font-medium" style={{ color: farbe(600) }}>
+              Ein Link
+            </span>
+          </div>
+        </div>
+      </Card>
+
+      <Card>
+        <CardTitle hint="Ohne eigenes Logo erscheint das Zeichen der Anwendung samt Name.">
+          Logo
+        </CardTitle>
+        <BildFeldZeile
+          vorhanden={wert.logoUploadId}
+          beschreibung={`PNG, JPEG, WebP oder AVIF, bis ${formatBytes(2 * 1024 * 1024)}. Wird auf 36 px Höhe gezeigt.`}
+          accept={UPLOAD_KINDS.logo.accept}
+          inputRef={logoInput}
+          laeuft={laeuft}
+          hintergrund="bg-surface"
+          onWaehlen={(datei) => hochladen(datei, "logo", "logoUploadId")}
+          onEntfernen={() => setWert({ ...wert, logoUploadId: null })}
+        />
+      </Card>
+
+      <Card>
+        <CardTitle hint="Das kleine Bild im Browser-Tab und in den Lesezeichen.">
+          Favicon
+        </CardTitle>
+        <BildFeldZeile
+          vorhanden={wert.faviconUploadId}
+          beschreibung={`PNG, ICO oder WebP, bis ${formatBytes(512 * 1024)}. Am besten quadratisch, mindestens 32 × 32 px.`}
+          accept={UPLOAD_KINDS.favicon.accept}
+          inputRef={faviconInput}
+          laeuft={laeuft}
+          hintergrund="qr-canvas"
+          onWaehlen={(datei) => hochladen(datei, "favicon", "faviconUploadId")}
+          onEntfernen={() => setWert({ ...wert, faviconUploadId: null })}
+        />
+      </Card>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <Button onClick={() => void speichern()} disabled={laeuft || !geaendert || !farbeGueltig}>
+          {laeuft ? "Speichert …" : "Speichern"}
+        </Button>
+        {geaendert ? (
+          <Button
+            variant="secondary"
+            disabled={laeuft}
+            onClick={() => {
+              setWert(gespeichert);
+              setFehler(null);
+              setHinweis(null);
+            }}
+          >
+            Verwerfen
+          </Button>
+        ) : (
+          <span className="text-sm text-slate-500">Keine Änderungen offen.</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function BildFeldZeile({
+  vorhanden,
+  beschreibung,
+  accept,
+  inputRef,
+  laeuft,
+  hintergrund,
+  onWaehlen,
+  onEntfernen,
+}: {
+  vorhanden: string | null;
+  beschreibung: string;
+  accept: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  laeuft: boolean;
+  hintergrund: string;
+  onWaehlen: (datei: File) => void;
+  onEntfernen: () => void;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <span
+        className={`flex h-16 w-24 shrink-0 items-center justify-center rounded-lg border border-slate-200 p-2 ${hintergrund}`}
+      >
+        {vorhanden ? (
+          /* eslint-disable-next-line @next/next/no-img-element -- aus der
+             Datenbank ausgeliefert */
+          <img
+            src={`/api/uploads/${vorhanden}`}
+            alt="Vorschau"
+            className="max-h-full max-w-full object-contain"
+          />
+        ) : (
+          <span className="text-xs text-slate-400">keins</span>
+        )}
+      </span>
+
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-slate-600">{beschreibung}</p>
+        <div className="mt-2 flex flex-wrap gap-2">
+          <Button
+            variant="secondary"
+            size="sm"
+            disabled={laeuft}
+            onClick={() => inputRef.current?.click()}
+          >
+            {vorhanden ? "Ersetzen" : "Datei wählen"}
+          </Button>
+          {vorhanden ? (
+            <Button variant="ghost" size="sm" disabled={laeuft} onClick={onEntfernen}>
+              Entfernen
+            </Button>
+          ) : null}
+        </div>
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          className="hidden"
+          onChange={(event) => {
+            const datei = event.target.files?.[0];
+            // Zurücksetzen, damit dieselbe Datei erneut gewählt werden kann.
+            event.target.value = "";
+            if (datei) onWaehlen(datei);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

src/components/codes-list.tsx

@@ -297,7 +297,7 @@ export function CodesList() {
       <div
         role="group"
         aria-label="Ansicht"
-        className="flex shrink-0 rounded-lg border border-slate-300 bg-white p-0.5"
+        className="flex shrink-0 rounded-lg border border-slate-300 bg-surface p-0.5"
       >
         {(
           [
@@ -316,7 +316,7 @@ export function CodesList() {
             className={cx(
               "rounded-md p-2 transition-colors",
               view === value
-                ? "bg-indigo-50 text-indigo-700"
+                ? "bg-accent-soft text-accent-soft-fg"
                 : "text-slate-500 hover:bg-slate-100 hover:text-slate-700",
             )}
           >
@@ -374,7 +374,7 @@ export function CodesList() {
                 setQuery("");
                 setGroupFilter("alle");
               }}
-              className="font-medium text-indigo-600 underline"
+              className="font-medium text-accent-text underline"
             >
               Filter zurücksetzen
             </button>
@@ -384,7 +384,7 @@ export function CodesList() {
 
       {/* ------------------------------------------------------ Listenansicht */}
       {view === "list" && visible.length > 0 ? (
-        <div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <div className="rounded-2xl border border-slate-200 bg-surface shadow-sm">
           {/* Auf schmalen Schirmen blenden wir Spalten von rechts nach links
               aus, statt die Tabelle seitlich scrollen zu lassen. Was wegfällt,
               steht beim Namen (Kurz-URL) oder in der Kartenansicht. */}
@@ -466,7 +466,7 @@ export function CodesList() {
                         href={code.shortUrl}
                         target="_blank"
                         rel="noreferrer"
-                        className="truncate font-mono text-xs text-indigo-600 hover:underline"
+                        className="truncate font-mono text-xs text-accent-text hover:underline"
                         title={code.shortUrl}
                       >
                         {code.shortUrl.replace(/^https?:\/\//, "")}
@@ -617,7 +617,7 @@ export function CodesList() {
                       href={code.shortUrl}
                       target="_blank"
                       rel="noreferrer"
-                      className="font-mono text-xs break-all text-indigo-600 hover:underline"
+                      className="font-mono text-xs break-all text-accent-text hover:underline"
                     >
                       {code.shortUrl}
                     </a>
@@ -670,7 +670,7 @@ export function CodesList() {
                 {code.type === "feedback" ? (
                   <Link
                     href={`/meine-codes/${code.id}/feedback`}
-                    className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+                    className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-surface px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
                   >
                     <Icon name="star" className="size-3.5" />
                     Rückmeldungen
@@ -687,14 +687,14 @@ export function CodesList() {
                 </Button>
                 <a
                   href={`/api/codes/${code.id}/qr?format=png&download=1`}
-                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-surface px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
                 >
                   <Icon name="download" className="size-3.5" />
                   PNG
                 </a>
                 <a
                   href={`/api/codes/${code.id}/qr?format=svg&download=1`}
-                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+                  className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-surface px-3 py-1.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
                 >
                   <Icon name="download" className="size-3.5" />
                   SVG

src/components/design-panel.tsx

@@ -40,7 +40,7 @@ function ColorField({
           aria-label={`${label} auswählen`}
           value={valid ? value : "#000000"}
           onChange={(event) => onChange(event.target.value.toUpperCase())}
-          className="size-10 shrink-0 cursor-pointer rounded-lg border border-slate-300 bg-white p-1"
+          className="size-10 shrink-0 cursor-pointer rounded-lg border border-slate-300 bg-surface p-1"
         />
         <TextInput
           id={id}
@@ -95,7 +95,7 @@ export function DesignPanel({
             onClick={() =>
               patch({ fgColor: preset.fgColor, bgColor: preset.bgColor })
             }
-            className="flex items-center gap-2 rounded-lg border border-slate-300 bg-white py-1 pr-2.5 pl-1.5 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50"
+            className="flex items-center gap-2 rounded-lg border border-slate-300 bg-surface py-1 pr-2.5 pl-1.5 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50"
           >
             <span
               className="size-4 rounded border border-slate-300"
@@ -111,7 +111,7 @@ export function DesignPanel({
           onClick={() =>
             patch({ fgColor: design.bgColor, bgColor: design.fgColor })
           }
-          className="rounded-lg border border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50"
+          className="rounded-lg border border-slate-300 bg-surface px-2.5 py-1 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50"
         >
           Farben tauschen
         </button>
@@ -158,7 +158,7 @@ export function DesignPanel({
               if (Number.isNaN(raw)) return;
               patch({ size: Math.min(MAX_SIZE, Math.max(MIN_SIZE, Math.round(raw))) });
             }}
-            className="w-24 shrink-0 rounded-lg border border-slate-300 bg-white px-2.5 py-2 text-sm tabular-nums shadow-sm"
+            className="w-24 shrink-0 rounded-lg border border-slate-300 bg-surface px-2.5 py-2 text-sm tabular-nums shadow-sm"
           />
         </div>
       </Field>
@@ -182,8 +182,8 @@ export function DesignPanel({
               className={cx(
                 "rounded-lg border py-2 text-sm font-medium transition-colors",
                 design.ecLevel === level
-                  ? "border-indigo-600 bg-indigo-50 text-indigo-700"
+                  ? "border-indigo-600 bg-accent-soft text-accent-soft-fg"
-                  : "border-slate-300 bg-white text-slate-600 hover:bg-slate-50",
+                  : "border-slate-300 bg-surface text-slate-600 hover:bg-slate-50",
               )}
             >
               {level}

src/components/icons.tsx

@@ -214,6 +214,24 @@ const PATHS = {
       <path d="M4 12h16" />
     </>
   ),
+  sun: (
+    <>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2" />
+      <path d="m5.3 5.3 1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4" />
+    </>
+  ),
+  moon: (
+    <>
+      <path d="M20 14.3A8.5 8.5 0 0 1 9.7 4a8.5 8.5 0 1 0 10.3 10.3Z" />
+    </>
+  ),
+  monitor: (
+    <>
+      <rect x="2.5" y="4" width="19" height="13" rx="2" />
+      <path d="M9 21h6M12 17v4" />
+    </>
+  ),
   lock: (
     <>
       <rect x="4.5" y="10.5" width="15" height="10.5" rx="2" />

src/components/landing/feedback-landing.tsx

@@ -60,7 +60,7 @@ export function FeedbackLanding({ data, codeId }: LandingProps) {
 
   return (
     <LandingShell title={title}>
-      <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+      <div className="rounded-2xl border border-slate-200 bg-surface p-5 shadow-sm sm:p-6">
         <fieldset>
           <legend className="text-center text-base font-medium text-slate-900">
             {question}
@@ -118,7 +118,7 @@ export function FeedbackLanding({ data, codeId }: LandingProps) {
               value={kommentar}
               disabled={laeuft}
               onChange={(event) => setKommentar(event.target.value)}
-              className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-400"
+              className="w-full rounded-lg border border-slate-300 bg-surface px-3 py-2.5 text-sm text-slate-900 shadow-sm placeholder:text-slate-400"
               placeholder="Optional"
             />
           </div>

src/components/landing/image-landing.tsx

@@ -11,7 +11,7 @@ export function ImageLanding({ data }: LandingProps) {
         {images.map((image, index) => (
           <figure
             key={image.fileId}
-            className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+            className="overflow-hidden rounded-2xl border border-slate-200 bg-surface shadow-sm"
           >
             {/* eslint-disable-next-line @next/next/no-img-element -- eigene
                 Auslieferung ohne bekannte Maße; der Optimierer von Next

src/components/landing/links-landing.tsx

@@ -15,7 +15,7 @@ export function LinksLanding({ data }: LandingProps) {
               href={link.url}
               // Fremde Ziele: kein Zugriff auf dieses Fenster.
               rel="noopener noreferrer"
-              className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 text-slate-900 shadow-sm transition-colors hover:border-indigo-300 hover:bg-indigo-50/60"
+              className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-surface px-5 py-4 text-slate-900 shadow-sm transition-colors hover:border-indigo-300 hover:bg-accent-soft/60"
             >
               <span className="min-w-0 flex-1 font-medium break-words">
                 {link.label}

src/components/landing/pdf-landing.tsx

@@ -14,7 +14,7 @@ export function PdfLanding({ data }: LandingProps) {
       title={title || filename || "PDF-Dokument"}
       subtitle={description || null}
     >
-      <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+      <div className="rounded-2xl border border-slate-200 bg-surface p-5 shadow-sm">
         <div className="flex items-center gap-4">
           <span className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-red-50 text-red-600">
             <Icon name="document" className="size-6" />
@@ -37,7 +37,7 @@ export function PdfLanding({ data }: LandingProps) {
           </a>
           <a
             href={`${href}?download`}
-            className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
+            className="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-surface px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
           >
             <Icon name="download" className="size-4" />
             Herunterladen

src/components/landing/social-landing.tsx

@@ -20,7 +20,7 @@ export function SocialLanding({ data }: LandingProps) {
               <a
                 href={profile.url}
                 rel="noopener noreferrer"
-                className="flex items-center gap-3.5 rounded-2xl border border-slate-200 bg-white px-4 py-3.5 text-slate-900 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-50"
+                className="flex items-center gap-3.5 rounded-2xl border border-slate-200 bg-surface px-4 py-3.5 text-slate-900 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-50"
               >
                 <span
                   aria-hidden="true"

src/components/landing/video-landing.tsx

@@ -44,7 +44,7 @@ export function VideoLanding({ data }: LandingProps) {
         <a
           href={url}
           rel="noopener noreferrer"
-          className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-4 text-slate-900 shadow-sm transition-colors hover:border-indigo-300 hover:bg-indigo-50/60"
+          className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-surface px-5 py-4 text-slate-900 shadow-sm transition-colors hover:border-indigo-300 hover:bg-accent-soft/60"
         >
           <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600">
             <Icon name="video" className="size-5" />

src/components/landing/video-player.tsx

@@ -41,13 +41,13 @@ export function EmbeddedVideo({
     <button
       type="button"
       onClick={() => setGestartet(true)}
-      className="group flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-2xl border border-slate-300 bg-slate-900 px-6 text-center shadow-sm transition-colors hover:bg-slate-800"
+      className="group flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-2xl border border-slate-300 bg-scrim px-6 text-center shadow-sm transition-colors hover:brightness-125"
     >
       <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-white transition-colors group-hover:bg-white/20">
         <Icon name="video" className="size-8" />
       </span>
       <span className="font-medium text-white">Video abspielen</span>
-      <span className="max-w-xs text-xs leading-relaxed text-slate-300">
+      <span className="max-w-xs text-xs leading-relaxed text-white/75">
         Beim Abspielen wird eine Verbindung zu {provider} hergestellt. Dabei
         werden Daten an den Anbieter übertragen.
       </span>

src/components/modal.tsx

@@ -39,7 +39,7 @@ export function Modal({
         // Klick auf die Hintergrundfläche des Dialogs schließt ihn.
         if (event.target === ref.current) onClose();
       }}
-      className="m-auto w-[calc(100%-2rem)] max-w-lg rounded-2xl border border-slate-200 bg-white p-0 shadow-xl backdrop:bg-slate-900/40"
+      className="m-auto w-[calc(100%-2rem)] max-w-lg rounded-2xl border border-slate-200 bg-surface p-0 shadow-xl backdrop:bg-scrim/50"
     >
       <div className="p-5 sm:p-6">
         <h2 className="text-lg font-semibold text-slate-900">{title}</h2>

src/components/qr-forms/image-form.tsx

@@ -64,7 +64,7 @@ export function ImageForm({ value, onChange, error, disabled }: QrFormProps) {
                   <img
                     src={`/api/uploads/${image.fileId}`}
                     alt=""
-                    className="size-14 shrink-0 rounded-lg border border-slate-200 bg-white object-cover"
+                    className="size-14 shrink-0 rounded-lg border border-slate-200 bg-surface object-cover"
                   />
                   <div className="min-w-0 flex-1 space-y-2">
                     <p className="truncate text-sm text-slate-600">
@@ -95,7 +95,7 @@ export function ImageForm({ value, onChange, error, disabled }: QrFormProps) {
                       disabled={disabled || index === 0}
                       onClick={() => move(index, -1)}
                       aria-label={`Bild ${index + 1} nach oben`}
-                      className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                      className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                     >
                       <Icon name="arrowLeft" className="size-4 rotate-90" />
                     </button>
@@ -104,7 +104,7 @@ export function ImageForm({ value, onChange, error, disabled }: QrFormProps) {
                       disabled={disabled || index === images.length - 1}
                       onClick={() => move(index, 1)}
                       aria-label={`Bild ${index + 1} nach unten`}
-                      className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                      className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                     >
                       <Icon name="arrowLeft" className="size-4 -rotate-90" />
                     </button>
@@ -115,7 +115,7 @@ export function ImageForm({ value, onChange, error, disabled }: QrFormProps) {
                         setImages(images.filter((_, i) => i !== index))
                       }
                       aria-label={`Bild ${index + 1} entfernen`}
-                      className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-red-600 disabled:opacity-40"
+                      className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-red-600 disabled:opacity-40"
                     >
                       <Icon name="trash" className="size-4" />
                     </button>

src/components/qr-forms/links-form.tsx

@@ -125,7 +125,7 @@ export function LinksForm({ value, onChange, error, disabled }: QrFormProps) {
                     disabled={disabled || index === 0}
                     onClick={() => move(index, -1)}
                     aria-label={`Link ${index + 1} nach oben`}
-                    className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                    className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                   >
                     <Icon name="arrowLeft" className="size-4 rotate-90" />
                   </button>
@@ -134,7 +134,7 @@ export function LinksForm({ value, onChange, error, disabled }: QrFormProps) {
                     disabled={disabled || index === links.length - 1}
                     onClick={() => move(index, 1)}
                     aria-label={`Link ${index + 1} nach unten`}
-                    className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                    className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                   >
                     <Icon name="arrowLeft" className="size-4 -rotate-90" />
                   </button>
@@ -143,7 +143,7 @@ export function LinksForm({ value, onChange, error, disabled }: QrFormProps) {
                     disabled={disabled || links.length === 1}
                     onClick={() => setLinks(links.filter((_, i) => i !== index))}
                     aria-label={`Link ${index + 1} entfernen`}
-                    className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                    className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                   >
                     <Icon name="trash" className="size-4" />
                   </button>

src/components/qr-forms/pdf-form.tsx

@@ -41,7 +41,7 @@ export function PdfForm({ value, onChange, error, disabled }: QrFormProps) {
                 onChange({ ...value, fileId: "", filename: "", size: 0 })
               }
               aria-label="Datei entfernen"
-              className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-red-600 disabled:opacity-40"
+              className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-red-600 disabled:opacity-40"
             >
               <Icon name="trash" className="size-4" />
             </button>

src/components/qr-forms/social-form.tsx

@@ -133,7 +133,7 @@ export function SocialForm({ value, onChange, error, disabled }: QrFormProps) {
                       setProfiles(profiles.filter((_, i) => i !== index))
                     }
                     aria-label={`Profil ${index + 1} entfernen`}
-                    className="mt-1 rounded-md p-1.5 text-slate-500 transition-colors hover:bg-white hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                    className="mt-1 rounded-md p-1.5 text-slate-500 transition-colors hover:bg-surface hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
                   >
                     <Icon name="trash" className="size-4" />
                   </button>

src/components/qr-forms/website-form.tsx

@@ -36,7 +36,7 @@ export function WebsiteForm({ value, onChange, error, disabled }: QrFormProps) {
           onClick={() =>
             onChange({ ...value, url: `https://${url.trim().replace(/^\/+/, "")}` })
           }
-          className="mt-2 rounded-lg border border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50"
+          className="mt-2 rounded-lg border border-slate-300 bg-surface px-2.5 py-1 text-xs font-medium text-slate-700 transition-colors hover:bg-slate-50"
         >
           https:// voranstellen
         </button>

src/components/qr-generator.tsx

@@ -226,7 +226,7 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
       </Link>
 
       <div className="mb-7 flex flex-wrap items-center gap-3">
-        <span className="flex size-11 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
+        <span className="flex size-11 items-center justify-center rounded-xl bg-accent-soft text-accent-text">
           <Icon name={qrType.icon} className="size-6" />
         </span>
         <div>
@@ -290,8 +290,8 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
                 className={cx(
                   "rounded-xl border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50",
                   !isDynamic
-                    ? "border-indigo-600 bg-indigo-50/60"
+                    ? "border-indigo-600 bg-accent-soft/60"
-                    : "border-slate-300 bg-white hover:bg-slate-50",
+                    : "border-slate-300 bg-surface hover:bg-slate-50",
                 )}
               >
                 <span className="flex items-center gap-2 font-medium text-slate-900">
@@ -314,8 +314,8 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
                 className={cx(
                   "rounded-xl border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50",
                   isDynamic
-                    ? "border-indigo-600 bg-indigo-50/60"
+                    ? "border-indigo-600 bg-accent-soft/60"
-                    : "border-slate-300 bg-white hover:bg-slate-50",
+                    : "border-slate-300 bg-surface hover:bg-slate-50",
                 )}
               >
                 <span className="flex items-center gap-2 font-medium text-slate-900">
@@ -353,7 +353,7 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
                       <span className="font-medium">Code gespeichert.</span> Der
                       QR-Code zeigt dauerhaft auf diese Kurz-URL:
                       <span className="mt-2 flex flex-wrap items-center gap-2">
-                        <code className="rounded bg-white/70 px-2 py-1 font-mono text-xs break-all">
+                        <code className="rounded bg-surface/70 px-2 py-1 font-mono text-xs break-all">
                           {saved.shortUrl}
                         </code>
                         <Button
@@ -383,7 +383,7 @@ export function QrGenerator({ typeId }: { typeId: QrTypeId }) {
                       ) : null}
                       <Link
                         href="/meine-codes"
-                        className="inline-flex items-center gap-1.5 rounded-lg text-sm font-medium text-indigo-600 hover:text-indigo-700"
+                        className="inline-flex items-center gap-1.5 rounded-lg text-sm font-medium text-accent-text hover:text-accent-soft-fg"
                       >
                         Zu „Meine Codes“
                         <Icon name="external" className="size-3.5" />

src/components/qr-preview.tsx

@@ -42,7 +42,7 @@ export function QrPreview({
           </div>
         )}
         {loading ? (
-          <span className="absolute top-3 right-3 rounded-full bg-white/90 px-2 py-0.5 text-xs font-medium text-slate-500 shadow-sm">
+          <span className="absolute top-3 right-3 rounded-full bg-surface/90 px-2 py-0.5 text-xs font-medium text-slate-500 shadow-sm">
             aktualisiert …
           </span>
         ) : null}

src/components/theme-toggle.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+import { Icon, type IconName } from "@/components/icons";
+
+/**
+ * Umschalter für das Farbthema.
+ *
+ * Drei Zustände statt zwei: Wer „System“ wählt, folgt weiterhin dem
+ * Betriebssystem — abends dunkel, morgens hell, ohne Zutun. Ein reiner
+ * Ein/Aus-Schalter kann das nicht abbilden, weil er nach dem ersten Klick
+ * für immer eine feste Wahl bedeutet.
+ *
+ * Umgesetzt wird die Wahl allein über das Attribut `data-theme` am
+ * <html>-Element; die Farben stecken in `globals.css`. Ohne Attribut gilt die
+ * Systemeinstellung — deshalb wird bei „System“ nicht etwa „light“ gesetzt,
+ * sondern das Attribut entfernt.
+ */
+export const THEME_STORAGE_KEY = "qrgen.theme";
+
+export type Theme = "system" | "light" | "dark";
+
+const OPTIONEN: { wert: Theme; icon: IconName; label: string }[] = [
+  { wert: "system", icon: "monitor", label: "System" },
+  { wert: "light", icon: "sun", label: "Hell" },
+  { wert: "dark", icon: "moon", label: "Dunkel" },
+];
+
+export function applyTheme(theme: Theme): void {
+  if (theme === "system") {
+    delete document.documentElement.dataset.theme;
+  } else {
+    document.documentElement.dataset.theme = theme;
+  }
+}
+
+/**
+ * Läuft vor dem ersten Zeichnen und verhindert das kurze Aufblitzen der
+ * hellen Fassung bei jemandem, der ausdrücklich „Dunkel“ gewählt hat.
+ *
+ * Bewusst winzig und ohne Abhängigkeiten: Alles, was hier steht, blockiert
+ * den Seitenaufbau. Wer der Systemeinstellung folgt, braucht das Skript gar
+ * nicht — dafür sorgt schon das CSS.
+ */
+export const THEME_INIT_SCRIPT = `try{var t=localStorage.getItem(${JSON.stringify(
+  THEME_STORAGE_KEY,
+)});if(t==="dark"||t==="light")document.documentElement.dataset.theme=t}catch(e){}`;
+
+/**
+ * Die Wahl liegt im `localStorage` — also außerhalb von React. Dafür ist
+ * `useSyncExternalStore` gedacht: Es liest den Wert beim Einhängen, ohne dass
+ * der Server-Aufbau davon abweicht, und benachrichtigt alle Stellen, wenn er
+ * sich ändert. Nebenbei zieht ein zweiter Tab automatisch nach.
+ */
+const zuhoerer = new Set<() => void>();
+
+function abonnieren(melden: () => void): () => void {
+  zuhoerer.add(melden);
+  window.addEventListener("storage", melden);
+  return () => {
+    zuhoerer.delete(melden);
+    window.removeEventListener("storage", melden);
+  };
+}
+
+function lesen(): Theme {
+  try {
+    const wert = localStorage.getItem(THEME_STORAGE_KEY);
+    return wert === "dark" || wert === "light" ? wert : "system";
+  } catch {
+    return "system";
+  }
+}
+
+/** Auf dem Server ist nichts gespeichert — dort gilt die Systemeinstellung. */
+function aufDemServer(): Theme {
+  return "system";
+}
+
+export function ThemeToggle() {
+  const theme = useSyncExternalStore(abonnieren, lesen, aufDemServer);
+
+  const waehlen = (wert: Theme) => {
+    applyTheme(wert);
+    try {
+      if (wert === "system") localStorage.removeItem(THEME_STORAGE_KEY);
+      else localStorage.setItem(THEME_STORAGE_KEY, wert);
+    } catch {
+      // Privater Modus ohne Speicher — die Wahl gilt dann bis zum Neuladen.
+    }
+    for (const melden of zuhoerer) melden();
+  };
+
+  return (
+    <div
+      role="group"
+      aria-label="Farbthema"
+      className="flex items-center gap-0.5 rounded-lg border border-slate-200 p-0.5"
+    >
+      {OPTIONEN.map((option) => {
+        const aktiv = theme === option.wert;
+        return (
+          <button
+            key={option.wert}
+            type="button"
+            data-theme-option={option.wert}
+            aria-pressed={aktiv}
+            title={`Farbthema: ${option.label}`}
+            aria-label={`Farbthema: ${option.label}`}
+            onClick={() => waehlen(option.wert)}
+            className={
+              aktiv
+                ? "rounded-md bg-accent-soft p-1.5 text-accent-soft-fg"
+                : "rounded-md p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900"
+            }
+          >
+            <Icon name={option.icon} className="size-4" />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/components/type-settings.tsx

@@ -42,7 +42,7 @@ function Toggle({
     >
       <span
         className={cx(
-          "inline-block size-5 rounded-full bg-white shadow-sm transition-transform",
+          "inline-block size-5 rounded-full bg-surface shadow-sm transition-transform",
           checked ? "translate-x-5.5" : "translate-x-0.5",
         )}
       />
@@ -114,7 +114,7 @@ export function TypeSettings({ initial }: { initial: TypeSetting[] }) {
                 className={cx(
                   "flex size-10 shrink-0 items-center justify-center rounded-xl",
                   entry.enabled && entry.implemented
-                    ? "bg-indigo-50 text-indigo-600"
+                    ? "bg-accent-soft text-accent-text"
                     : "bg-slate-100 text-slate-400",
                 )}
               >

src/components/ui.tsx

@@ -22,7 +22,7 @@ export function Card({
   return (
     <section
       className={cx(
-        "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6",
+        "rounded-2xl border border-slate-200 bg-surface p-5 shadow-sm sm:p-6",
         className,
       )}
     >
@@ -57,7 +57,7 @@ const BUTTON_VARIANTS: Record<NonNullable<ButtonProps["variant"]>, string> = {
   primary:
     "bg-indigo-600 text-white hover:bg-indigo-700 disabled:hover:bg-indigo-600",
   secondary:
-    "border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 disabled:hover:bg-white",
+    "border border-slate-300 bg-surface text-slate-700 hover:bg-slate-50 disabled:hover:bg-surface",
   ghost: "text-slate-600 hover:bg-slate-100 disabled:hover:bg-transparent",
   danger: "bg-red-600 text-white hover:bg-red-700 disabled:hover:bg-red-600",
 };
@@ -124,7 +124,7 @@ export function TextInput({
   return (
     <input
       className={cx(
-        "w-full rounded-lg border bg-white px-3 py-2.5 text-sm text-slate-900 shadow-sm transition-colors placeholder:text-slate-400",
+        "w-full rounded-lg border bg-surface px-3 py-2.5 text-sm text-slate-900 shadow-sm transition-colors placeholder:text-slate-400",
         invalid
           ? "border-red-400 focus-visible:outline-red-500"
           : "border-slate-300",
@@ -137,7 +137,7 @@ export function TextInput({
 
 /** Gemeinsame Grundgestaltung aller Eingabefelder. */
 export const CONTROL_BASE =
-  "w-full rounded-lg border bg-white px-3 py-2.5 text-sm text-slate-900 shadow-sm transition-colors placeholder:text-slate-400 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500";
+  "w-full rounded-lg border bg-surface px-3 py-2.5 text-sm text-slate-900 shadow-sm transition-colors placeholder:text-slate-400 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500";
 
 export function TextArea({
   invalid,
@@ -243,7 +243,7 @@ export function Badge({
     neutral: "bg-slate-100 text-slate-600",
     // Hervorhebung — hieß früher "popular", als sie nur für das Abzeichen
     // „Beliebt" auf der Startseite gedacht war.
-    accent: "bg-indigo-100 text-indigo-700",
+    accent: "bg-accent-soft text-accent-soft-fg",
     soon: "bg-slate-100 text-slate-500",
     success: "bg-emerald-100 text-emerald-700",
   };

src/lib/branding-colors.ts

@@ -0,0 +1,112 @@
+/**
+ * Erzeugt aus einer einzigen Akzentfarbe die volle Abstufung 50–950.
+ *
+ * Warum das reicht, um die ganze Oberfläche umzufärben: Tailwind 4 übersetzt
+ * `bg-indigo-600` zu `background-color: var(--color-indigo-600)`. Wer diese
+ * Variablen zur Laufzeit überschreibt, färbt damit jede der rund 60 Stellen
+ * um — ohne eine einzige Klasse anzufassen.
+ *
+ * Vom gewählten Ton werden nur **Farbton und Sättigung** übernommen, nicht
+ * die Helligkeit. Die Helligkeitskurve stammt aus der Tailwind-Vorlage. Das
+ * ist Absicht: Auf `-600` steht weiße Schrift. Käme die Helligkeit aus der
+ * Eingabe, würde ein helles Gelb die Kopfzeile unlesbar machen.
+ */
+
+/** Die Abstufung von Tailwind 4 (indigo) als Vorlage für Helligkeit und Form. */
+const VORLAGE = [
+  { stop: 50, l: 96.2, c: 0.018, h: 272.314 },
+  { stop: 100, l: 93.0, c: 0.034, h: 272.788 },
+  { stop: 200, l: 87.0, c: 0.065, h: 274.039 },
+  { stop: 300, l: 78.5, c: 0.115, h: 274.713 },
+  { stop: 400, l: 67.3, c: 0.182, h: 276.935 },
+  { stop: 500, l: 58.5, c: 0.233, h: 277.117 },
+  { stop: 600, l: 51.1, c: 0.262, h: 276.966 },
+  { stop: 700, l: 45.7, c: 0.24, h: 277.023 },
+  { stop: 800, l: 39.8, c: 0.195, h: 277.366 },
+  { stop: 900, l: 35.9, c: 0.144, h: 278.697 },
+  { stop: 950, l: 25.7, c: 0.09, h: 281.288 },
+] as const;
+
+const BEZUG = VORLAGE.find((eintrag) => eintrag.stop === 600)!;
+
+export const DEFAULT_ACCENT = "#4F46E5";
+
+export function isHexColor(value: string): boolean {
+  return /^#[0-9a-fA-F]{6}$/.test(value.trim());
+}
+
+/** sRGB-Kanal (0–1) in seinen linearen Anteil. */
+function toLinear(kanal: number): number {
+  return kanal <= 0.04045
+    ? kanal / 12.92
+    : Math.pow((kanal + 0.055) / 1.055, 2.4);
+}
+
+/**
+ * Hex nach OKLCH.
+ *
+ * OKLab ist so gebaut, dass gleiche Zahlenabstände auch gleich große
+ * wahrgenommene Unterschiede sind — anders als HSL, wo dasselbe „50 %
+ * Helligkeit" bei Gelb und Blau völlig verschieden aussieht.
+ */
+export function hexToOklch(hex: string): { l: number; c: number; h: number } {
+  const wert = hex.trim().replace("#", "");
+  const r = toLinear(Number.parseInt(wert.slice(0, 2), 16) / 255);
+  const g = toLinear(Number.parseInt(wert.slice(2, 4), 16) / 255);
+  const b = toLinear(Number.parseInt(wert.slice(4, 6), 16) / 255);
+
+  const lMs = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const mMs = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const sMs = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+
+  const l = 0.2104542553 * lMs + 0.793617785 * mMs - 0.0040720468 * sMs;
+  const a = 1.9779984951 * lMs - 2.428592205 * mMs + 0.4505937099 * sMs;
+  const bb = 0.0259040371 * lMs + 0.7827717662 * mMs - 0.808675766 * sMs;
+
+  const c = Math.sqrt(a * a + bb * bb);
+  let h = (Math.atan2(bb, a) * 180) / Math.PI;
+  if (h < 0) h += 360;
+
+  return { l: l * 100, c, h };
+}
+
+export type ColorRamp = { stop: number; value: string }[];
+
+/**
+ * Die volle Abstufung zur gewählten Akzentfarbe.
+ *
+ * Die Sättigung wird so skaliert, dass der Ton auf `-600` der Eingabe
+ * entspricht; nach oben begrenzt, damit ein sehr kräftiger Wert die hellen
+ * Stufen nicht in ein grelles Pastell kippt. Browser rechnen Werte außerhalb
+ * des darstellbaren Bereichs selbst zurück.
+ */
+export function buildRamp(hex: string): ColorRamp {
+  const gewaehlt = hexToOklch(isHexColor(hex) ? hex : DEFAULT_ACCENT);
+
+  // Ein nahezu grauer Wert soll grau bleiben und nicht auf die Sättigung der
+  // Vorlage hochgezogen werden.
+  const faktor = Math.min(gewaehlt.c / BEZUG.c, 1.25);
+  const drift = (h: number) => (h - BEZUG.h + 540) % 360 - 180;
+
+  return VORLAGE.map(({ stop, l, c, h }) => {
+    const ton = (gewaehlt.h + drift(h) + 360) % 360;
+    const saettigung = Math.max(c * faktor, 0);
+    return {
+      stop,
+      value: `oklch(${l.toFixed(1)}% ${saettigung.toFixed(4)} ${ton.toFixed(3)})`,
+    };
+  });
+}
+
+/**
+ * Die Abstufung als CSS, fertig zum Einsetzen in einen `<style>`-Block.
+ *
+ * Überschrieben wird bewusst die Indigo-Reihe selbst — so wirkt die Farbe
+ * überall dort, wo die Oberfläche sie schon benutzt.
+ */
+export function accentCss(hex: string): string {
+  const zeilen = buildRamp(hex)
+    .map(({ stop, value }) => `--color-indigo-${stop}:${value};`)
+    .join("");
+  return `:root{${zeilen}}`;
+}

src/lib/branding.ts

@@ -0,0 +1,143 @@
+import "server-only";
+
+import { DEFAULT_ACCENT, isHexColor } from "@/lib/branding-colors";
+import { prisma } from "@/lib/db";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export type Branding = {
+  appName: string;
+  footerText: string;
+  accentColor: string;
+  logoUploadId: string | null;
+  faviconUploadId: string | null;
+  /** MIME-Typ des Favicons — der `<link>` braucht ihn. */
+  faviconMimeType: string | null;
+};
+
+export const DEFAULT_BRANDING: Branding = {
+  appName: "QR-Code-Generator",
+  footerText: "statische und dynamische QR-Codes",
+  accentColor: DEFAULT_ACCENT,
+  logoUploadId: null,
+  faviconUploadId: null,
+  faviconMimeType: null,
+};
+
+export const MAX_APP_NAME = 60;
+export const MAX_FOOTER_TEXT = 120;
+
+/**
+ * Bewusst **ohne** Zwischenspeicher.
+ *
+ * Ein erster Versuch hielt den Wert 15 Sekunden lang fest, um die Abfrage je
+ * Seitenaufruf zu sparen. Das ging schief: Die API-Route und das Layout
+ * laufen in getrennten Modulinstanzen, das Verwerfen beim Speichern erreichte
+ * die andere Instanz also gar nicht. Nach dem Speichern blieb die Oberfläche
+ * unverändert — der schlechteste denkbare Eindruck bei einer Einstellung, die
+ * man ansieht.
+ *
+ * Es bleibt bei einer Abfrage auf den Primärschlüssel einer Tabelle mit einer
+ * einzigen Zeile. Das ist zu verschmerzen; jede Seite fragt ohnehin mehr ab.
+ */
+export async function getBranding(): Promise<Branding> {
+  let wert = DEFAULT_BRANDING;
+  try {
+    const zeile = await prisma.branding.findUnique({
+      where: { id: "branding" },
+      include: {
+        faviconUpload: { select: { mimeType: true } },
+      },
+    });
+
+    if (zeile) {
+      wert = {
+        appName: zeile.appName,
+        footerText: zeile.footerText,
+        accentColor: isHexColor(zeile.accentColor)
+          ? zeile.accentColor
+          : DEFAULT_ACCENT,
+        logoUploadId: zeile.logoUploadId,
+        faviconUploadId: zeile.faviconUploadId,
+        faviconMimeType: zeile.faviconUpload?.mimeType ?? null,
+      };
+    }
+  } catch (error) {
+    // Ein Problem mit der Datenbank darf nicht dazu führen, dass gar keine
+    // Seite mehr erscheint — dann eben im Auslieferungszustand.
+    console.error("Erscheinungsbild konnte nicht geladen werden:", error);
+  }
+
+  return wert;
+}
+
+export type BrandingUpdate = {
+  appName?: string;
+  footerText?: string;
+  accentColor?: string;
+  /** `null` entfernt das Bild, `undefined` lässt es unverändert. */
+  logoUploadId?: string | null;
+  faviconUploadId?: string | null;
+};
+
+/**
+ * Schreibt das Erscheinungsbild und räumt ersetzte Bilder weg.
+ *
+ * Ohne das Aufräumen bliebe jedes einmal hochgeladene Logo für immer in der
+ * Datenbank liegen: Es gehört zu keinem Code, und die Aufräumroutine für
+ * herrenlose Dateien lässt „branding" bewusst in Ruhe.
+ */
+export async function saveBranding(update: BrandingUpdate): Promise<Branding> {
+  if (update.accentColor !== undefined && !isHexColor(update.accentColor)) {
+    throw new QrRequestError(
+      "Die Farbe muss als Hex-Wert angegeben werden, z. B. #4F46E5.",
+    );
+  }
+
+  const vorher = await prisma.branding.findUnique({
+    where: { id: "branding" },
+    select: { logoUploadId: true, faviconUploadId: true },
+  });
+
+  const daten = {
+    ...(update.appName !== undefined ? { appName: update.appName.trim() } : {}),
+    ...(update.footerText !== undefined
+      ? { footerText: update.footerText.trim() }
+      : {}),
+    ...(update.accentColor !== undefined
+      ? { accentColor: update.accentColor.trim().toUpperCase() }
+      : {}),
+    ...(update.logoUploadId !== undefined
+      ? { logoUploadId: update.logoUploadId }
+      : {}),
+    ...(update.faviconUploadId !== undefined
+      ? { faviconUploadId: update.faviconUploadId }
+      : {}),
+  };
+
+  await prisma.branding.upsert({
+    where: { id: "branding" },
+    update: daten,
+    create: { id: "branding", ...daten },
+  });
+
+  // Die ersetzten Dateien erst danach löschen — solange die neue Zeile nicht
+  // steht, wird noch die alte gebraucht.
+  const abgeloest = [
+    update.logoUploadId !== undefined &&
+      vorher?.logoUploadId &&
+      vorher.logoUploadId !== update.logoUploadId &&
+      vorher.logoUploadId,
+    update.faviconUploadId !== undefined &&
+      vorher?.faviconUploadId &&
+      vorher.faviconUploadId !== update.faviconUploadId &&
+      vorher.faviconUploadId,
+  ].filter((id): id is string => typeof id === "string");
+
+  if (abgeloest.length > 0) {
+    await prisma.upload
+      .deleteMany({ where: { id: { in: abgeloest } } })
+      .catch(() => undefined);
+  }
+
+  return getBranding();
+}

src/lib/uploads.shared.ts

@@ -6,6 +6,15 @@
  * Dateiarten und die Größenformatierung.
  */
 
+/** Bilder, die die Oberfläche selbst anzeigt. */
+const BILD_TYPEN = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/gif",
+  "image/avif",
+] as const;
+
 export const UPLOAD_KINDS = {
   pdf: {
     label: "PDF-Dokument",
@@ -14,21 +23,52 @@ export const UPLOAD_KINDS = {
   },
   image: {
     label: "Bild",
-    mimeTypes: [
+    mimeTypes: BILD_TYPEN,
-      "image/png",
-      "image/jpeg",
-      "image/webp",
-      "image/gif",
-      "image/avif",
-    ],
     accept: "image/png,image/jpeg,image/webp,image/gif,image/avif",
   },
+  logo: {
+    label: "Logo",
+    mimeTypes: BILD_TYPEN,
+    accept: "image/png,image/jpeg,image/webp,image/avif",
+    // Ein Logo in der Kopfzeile ist ein paar Dutzend Kilobyte groß. Die
+    // Grenze soll verhindern, dass jemand ein Foto aus der Kamera hochlädt,
+    // das dann bei jedem Seitenaufruf mitgeht.
+    maxBytes: 2 * 1024 * 1024,
+  },
+  favicon: {
+    label: "Favicon",
+    // Zusätzlich ICO — viele haben genau das noch herumliegen.
+    mimeTypes: [...BILD_TYPEN, "image/x-icon"],
+    accept: "image/png,image/x-icon,.ico,image/webp",
+    maxBytes: 512 * 1024,
+  },
 } as const;
 
+/**
+ * Wozu die Datei gehört.
+ *
+ * `code` hängt an einem QR-Code und verschwindet mit ihm; `branding` gehört
+ * zur Oberfläche und darf deshalb nicht als herrenlos weggeräumt werden.
+ */
+export const UPLOAD_PURPOSES = ["code", "branding"] as const;
+export type UploadPurpose = (typeof UPLOAD_PURPOSES)[number];
+
+export function uploadPurposeOf(kind: UploadKind): UploadPurpose {
+  return kind === "logo" || kind === "favicon" ? "branding" : "code";
+}
+
+/** Obergrenze dieser Art — sonst gilt die allgemeine aus MAX_UPLOAD_MB. */
+export function kindMaxBytes(kind: UploadKind): number | null {
+  const eintrag = UPLOAD_KINDS[kind] as { maxBytes?: number };
+  return eintrag.maxBytes ?? null;
+}
+
 export type UploadKind = keyof typeof UPLOAD_KINDS;
 
 export function isUploadKind(value: unknown): value is UploadKind {
-  return value === "pdf" || value === "image";
+  return (
+    typeof value === "string" && Object.hasOwn(UPLOAD_KINDS, value)
+  );
 }
 
 export function formatBytes(bytes: number): string {

src/lib/uploads.ts

@@ -4,7 +4,9 @@ import { prisma } from "@/lib/db";
 import { QrRequestError } from "@/lib/qr/type-module";
 import {
   formatBytes,
+  kindMaxBytes,
   UPLOAD_KINDS,
+  uploadPurposeOf,
   type UploadKind,
 } from "@/lib/uploads.shared";
 
@@ -13,6 +15,8 @@ export {
   UPLOAD_KINDS,
   formatBytes,
   isUploadKind,
+  kindMaxBytes,
+  uploadPurposeOf,
 } from "@/lib/uploads.shared";
 export type { UploadKind } from "@/lib/uploads.shared";
 
@@ -41,6 +45,10 @@ export function sniffMimeType(bytes: Uint8Array): string | null {
   if (starts(0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a)) return "image/png";
   if (starts(0xff, 0xd8, 0xff)) return "image/jpeg";
   if (starts(0x47, 0x49, 0x46, 0x38)) return "image/gif"; // GIF8
+  // ICO: Reserviert 0, Typ 1, dann die Anzahl der Bilder (mindestens eines).
+  if (starts(0x00, 0x00, 0x01, 0x00) && (bytes[4] | bytes[5]) !== 0) {
+    return "image/x-icon";
+  }
 
   // RIFF....WEBP
   if (
@@ -102,7 +110,10 @@ export async function storeUpload(
   file: File,
   kind: UploadKind,
 ): Promise<StoredUpload> {
-  const limit = maxUploadBytes();
+  // Die engere der beiden Grenzen gewinnt: die allgemeine aus MAX_UPLOAD_MB
+  // und die der Dateiart.
+  const eigene = kindMaxBytes(kind);
+  const limit = eigene === null ? maxUploadBytes() : Math.min(eigene, maxUploadBytes());
   if (file.size === 0) {
     throw new QrRequestError("Die Datei ist leer.");
   }
@@ -126,7 +137,9 @@ export async function storeUpload(
     throw new QrRequestError(
       kind === "pdf"
         ? "Das ist keine PDF-Datei. Bitte lade ein PDF hoch."
-        : "Das ist kein unterstütztes Bild. Erlaubt sind PNG, JPEG, WebP, GIF und AVIF.",
+        : kind === "favicon"
+          ? "Das ist kein unterstütztes Bild. Erlaubt sind PNG, ICO, WebP, JPEG, GIF und AVIF."
+          : "Das ist kein unterstütztes Bild. Erlaubt sind PNG, JPEG, WebP, GIF und AVIF.",
     );
   }
 
@@ -134,11 +147,12 @@ export async function storeUpload(
     data: {
       filename: sanitizeFilename(
         file.name,
-        kind === "pdf" ? "dokument.pdf" : "bild",
+        kind === "pdf" ? "dokument.pdf" : kind === "favicon" ? "favicon" : "bild",
       ),
       mimeType: erkannt,
       size: bytes.byteLength,
       data: Buffer.from(bytes),
+      purpose: uploadPurposeOf(kind),
     },
     select: { id: true, filename: true, mimeType: true, size: true },
   });
@@ -188,7 +202,9 @@ const ORPHAN_HOURS = 24;
 export async function cleanupOrphanedUploads(): Promise<number> {
   const grenze = new Date(Date.now() - ORPHAN_HOURS * 60 * 60 * 1000);
   const { count } = await prisma.upload.deleteMany({
-    where: { qrCodeId: null, createdAt: { lt: grenze } },
+    // Nur Dateien, die zu einem Code gehören sollten. Logo und Favicon haben
+    // nie einen Code und wären sonst nach einem Tag verschwunden.
+    where: { qrCodeId: null, purpose: "code", createdAt: { lt: grenze } },
   });
   return count;
 }

update.sh

@@ -70,10 +70,43 @@ BRANCH="$(git rev-parse --abbrev-ref HEAD)"
 
 info "Hole neuen Stand von origin/$BRANCH …"
 git fetch --quiet origin
+
 # --ff-only: lieber abbrechen als eine Merge-Situation erzeugen, die auf einem
 # Server niemand auflösen will.
-git merge --ff-only --quiet "origin/$BRANCH" ||
+if ! git merge --ff-only --quiet "origin/$BRANCH" 2>/dev/null; then
-  fail "Der lokale Stand lässt sich nicht ohne Merge aktualisieren. Bitte von Hand prüfen."
+  echo "" >&2
+  echo "✗ Der lokale Stand lässt sich nicht ohne Merge aktualisieren." >&2
+  echo "" >&2
+
+  if git merge-base --is-ancestor HEAD "origin/$BRANCH" 2>/dev/null; then
+    # Kann eigentlich nicht sein — dann wäre das Vorspulen geglückt.
+    echo "  Grund: unklar. Bitte 'git status' und 'git log --oneline -5' ansehen." >&2
+  elif ! git merge-base HEAD "origin/$BRANCH" >/dev/null 2>&1; then
+    # Kein gemeinsamer Vorfahre: Die Historie wurde neu geschrieben, etwa
+    # durch einen Force-Push. Der Inhalt ist derselbe, die Commits haben
+    # nur neue Kennungen.
+    cat >&2 <<'HINWEIS'
+  Grund: Der Verlauf auf dem Server wurde neu geschrieben (Force-Push).
+  Alte und neue Commits haben keinen gemeinsamen Vorfahren mehr.
+
+  Der lokale Stand lässt sich verwerfen und durch den vom Server ersetzen:
+
+      git fetch origin
+      git reset --hard origin/main
+      ./update.sh --force
+
+  Das betrifft nur versionierte Dateien. Die .env und alles, was nicht im
+  Repository liegt, bleibt unberührt.
+HINWEIS
+  else
+    echo "  Grund: Hier liegen eigene Commits, die es auf dem Server nicht gibt:" >&2
+    git --no-pager log --oneline "origin/$BRANCH..HEAD" | sed 's/^/    /' >&2
+    echo "" >&2
+    echo "  Entweder pushen — oder mit 'git reset --hard origin/$BRANCH' verwerfen." >&2
+  fi
+  echo "" >&2
+  exit 1
+fi
 
 AFTER="$(git rev-parse HEAD)"