Sicherheitsbericht: warum es keine E-Mail-Verifizierung gibt

Die Frage kam auf und die Antwort gehoert festgehalten, sonst stellt sie sich
in einem halben Jahr wieder — dann ohne die Begruendung.

Kurz: Es gibt keine Selbstregistrierung. Konten legt ein Administrator an, der
die Adresse selbst eintraegt; eine Bestaetigungsmail wuerde also niemanden
hereinlassen und niemanden fernhalten. Und weil es keinen Reset per E-Mail
gibt, ist die unbestaetigte Adresse auch kein Uebernahmeweg. Noetig wuerde sie
in dem Moment, in dem sich Leute selbst registrieren duerfen.

Dazu das Zeitfenster der Ersteinrichtung ausdruecklich benannt: Das erste
Konto entsteht ohne Legitimation und ist gleich Administrator. Dagegen hilft
keine Verifizierung, sondern nur die Reihenfolge beim Aufsetzen — oder ein
einmaliges Token, das jetzt auf der Roadmap steht.

.env.example

@@ -13,6 +13,59 @@ BASE_URL=http://localhost:3000
 # Host-Port, unter dem die App veröffentlicht wird (Port-Mapping APP_PORT:3000).
 APP_PORT=3000
 
+# Anmeldung mit Benutzern, Gruppen und Rollen.
+#   false — jeder, der die App erreicht, darf alles (Einzelplatz/LAN).
+#   true  — Anmeldung erforderlich. Beim ersten Aufruf legst du den ersten
+#           Administrator an.
+# Bewusst hier und nicht in der Oberfläche: so kann man sich nicht aussperren.
+# Wer den Zugang verliert, setzt den Wert zurück auf false und startet neu.
+AUTH_ENABLED=false
+
+# Groesste erlaubte Datei fuer die Typen "PDF" und "Bild", in Megabyte.
+# Die Dateien liegen in der Datenbank — wer die sichert, hat alles. Sehr
+# grosse Werte machen die Sicherung entsprechend schwer.
+MAX_UPLOAD_MB=10
+
+# Sitzungsdauer in Tagen.
+#   SESSION_IDLE_DAYS  — ohne Aktivitaet laeuft die Sitzung ab.
+#   SESSION_MAX_DAYS   — harte Obergrenze ab dem Anmelden, unabhaengig davon,
+#                        wie oft sie benutzt wurde.
+# OWASP empfiehlt fuer oeffentliche Anwendungen deutlich kuerzere Werte
+# (Minuten bzw. Stunden); siehe docs/sicherheit.md.
+SESSION_IDLE_DAYS=30
+SESSION_MAX_DAYS=90
+
+# --- Anmeldung ueber Authentik oder einen anderen OIDC-Anbieter -------------
+# Setzt AUTH_ENABLED=true voraus. Einrichtung siehe docs/authentik.md.
+OIDC_ENABLED=false
+
+# Basis-URL des Anbieters, unter der /.well-known/openid-configuration liegt.
+# Bei Authentik: https://auth.example.com/application/o/<slug>/
+OIDC_ISSUER=
+OIDC_CLIENT_ID=
+OIDC_CLIENT_SECRET=
+
+# Beschriftung des Knopfs auf der Anmeldeseite.
+OIDC_BUTTON_LABEL=Mit Authentik anmelden
+
+# Angeforderte Bereiche. "openid" ist Pflicht, "email" wird gebraucht.
+OIDC_SCOPES=openid email profile
+
+# Nur noch ueber den Anbieter anmelden? Dann verschwindet das Passwortfeld.
+# Vorsicht: Faellt der Anbieter aus, kommt niemand mehr hinein — zum Loesen
+# hier auf false setzen und neu starten.
+OIDC_ONLY=false
+
+# Rolle, die neu angelegte Benutzer in der Standardgruppe bekommen.
+# VIEWER (nur lesen), EDITOR (Codes anlegen und aendern) oder ADMIN.
+OIDC_DEFAULT_ROLE=VIEWER
+
+# Gruppe beim Anbieter, deren Mitglieder die Verwaltung oeffnen duerfen.
+# Leer lassen, um die Administratorrechte hier in der Anwendung zu pflegen.
+OIDC_ADMIN_GROUP=
+# Name des Anspruchs, in dem die Gruppen stehen (Authentik: groups).
+OIDC_GROUPS_CLAIM=groups
+
 # --- PostgreSQL ------------------------------------------------------------
 POSTGRES_USER=qrcode
 POSTGRES_PASSWORD=bitte-aendern

README.md

@@ -3,47 +3,306 @@
 Eine Webanwendung zum Erzeugen von QR-Codes — als Docker-Compose-Stack aus
 zwei Containern: der Next.js-Anwendung und einer PostgreSQL-Datenbank.
 
-**Version 1** unterstützt den QR-Typ **Website/URL**, statisch wie dynamisch.
+Umgesetzt sind **alle 15 QR-Typen**. Welche davon in der Oberfläche erscheinen,
-Die übrigen 14 Typen sind bereits in der Oberfläche sichtbar und für Version 2
+entscheidet die Verwaltung — nicht gebrauchte lassen sich ausblenden.
-vorbereitet.
+
+---
+
+## Was die Anwendung kann — kurz
+
+- **15 QR-Typen:** Website, vCard, App-Link, Mehrere Links, Social Media,
+  WhatsApp, PDF, Bild, Video, E-Mail, SMS, Standort, Zahlung, WLAN, Feedback.
+- **Statisch oder dynamisch.** Dynamische Codes zeigen auf eine Kurz-URL:
+  Ziel jederzeit änderbar, ohne neu zu drucken — mit Scan-Zähler.
+- **Eigene Seiten** für Linksammlungen, Profile, hinterlegte PDFs und Bilder
+  sowie Feedback-Formulare — öffentlich, ohne einen Hinweis auf die Anwendung.
+- **Gestaltung:** freie Farben mit Kontrastwarnung, 256–2048 px,
+  Fehlerkorrektur L/M/Q/H, einstellbarer Rand. Download als PNG und SVG.
+- **Meine Codes:** Liste oder Karten, Suche, Sortierung, Gruppenfilter,
+  Ziel ändern, löschen.
+- **Feedback auswerten:** Durchschnitt, Verteilung und Kommentare — anonym
+  erhoben, ohne Name und IP-Adresse.
+- **Anmeldung abschaltbar.** Mit Anmeldung: Benutzer, Gruppen und die Rollen
+  Administrator, Bearbeiter und Betrachter.
+- **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.
+- **Zwei Container, kein Reverse Proxy nötig.** Migrationen laufen beim Start
+  von selbst; alles Nötige steht in einer `.env`.
+
+→ Ausführlich: **[Alle Funktionen im Detail](docs/funktionen.md)**
+
+---
+
+## Anleitungen
+
+- **[Bedienungsanleitung mit Bildern](docs/anleitung.md)** — vom ersten Code
+  bis zur Auswertung von Rückmeldungen
+- **[Anmeldung über Authentik (OIDC)](docs/authentik.md)** — Einrichtung,
+  Rollen und der Weg zurück
+- **[Alle Funktionen im Detail](docs/funktionen.md)** — die lange Fassung
+- **[Roadmap](docs/roadmap.md)** — was gebaut ist und was kommen könnte
+- **[Anmeldung und Sitzungen nach OWASP](docs/sicherheit.md)** — Durchsicht,
+  Härtungen und was bewusst offen bleibt
 
 ---
 
 ## Inhalt
 
-- [Schnellstart](#schnellstart)
+- [Schritt für Schritt zum laufenden Stack](#schritt-für-schritt-zum-laufenden-stack)
+- [Hinter einem Reverse Proxy (Nginx Proxy Manager)](#hinter-einem-reverse-proxy-nginx-proxy-manager)
+- [Wenn etwas nicht läuft](#wenn-etwas-nicht-läuft)
 - [Aktualisieren](#aktualisieren)
 - [Konfiguration](#konfiguration)
 - [Bedienung](#bedienung)
+- [Anmeldung, Gruppen und Rollen](#anmeldung-gruppen-und-rollen)
+- [Anmeldung über Authentik (OIDC)](#anmeldung-über-authentik-oidc)
 - [Technischer Aufbau](#technischer-aufbau)
 - [Entwicklung ohne Docker](#entwicklung-ohne-docker)
 - [API](#api)
-- [Ausblick Version 2](#ausblick-version-2)
+- [Einen weiteren Typ ergänzen](#einen-weiteren-typ-ergänzen)
 
 ---
 
-## Schnellstart
+## Schritt für Schritt zum laufenden Stack
 
-Voraussetzung: Docker mit Docker Compose.
+Vom leeren Server bis zum ersten QR-Code. Alle Befehle laufen auf dem
+Rechner, auf dem die Anwendung später läuft.
+
+### Schritt 1 — Voraussetzungen prüfen
+
+Gebraucht werden Docker mit Compose v2 und Git:
+
+```bash
+docker compose version    # erwartet: Docker Compose version v2.x oder höher
+git --version
+```
+
+Kommt `docker: command not found`, fehlt Docker — die
+[offizielle Anleitung](https://docs.docker.com/engine/install/) installiert
+Engine und Compose in einem Rutsch.
+
+### Schritt 2 — Projekt holen
+
+```bash
+git clone https://git.wilde-server.de/florian.wilde/qrcode-generator.git
+cd qrcode-generator
+```
+
+### Schritt 3 — Konfiguration anlegen
+
+```bash
+cp .env.example .env
+nano .env
+```
+
+Zwei Werte **musst** du anfassen:
+
+| Wert | Was eintragen |
+| --- | --- |
+| `POSTGRES_PASSWORD` | Ein eigenes Passwort. Es steht nur in dieser Datei und wird nirgends sonst gebraucht. |
+| `DATABASE_URL` | Dasselbe Passwort noch einmal — es steckt mitten im Verbindungsstring. |
+
+Und einen solltest du bewusst setzen:
+
+| Wert | Was eintragen |
+| --- | --- |
+| `BASE_URL` | Die Adresse, unter der die Anwendung **von außen** erreichbar ist. |
+
+Beispiel für ein eigenes Passwort `MeinGeheimes123`:
+
+```bash
+POSTGRES_PASSWORD=MeinGeheimes123
+DATABASE_URL=postgresql://qrcode:MeinGeheimes123@db:5432/qrcode?schema=public
+BASE_URL=http://192.168.1.50:3000
+```
+
+> **Warum `BASE_URL` so wichtig ist:** Ein dynamischer QR-Code enthält nicht
+> das eigentliche Ziel, sondern die Kurz-URL `{BASE_URL}/r/{slug}`. Steht dort
+> `localhost`, funktioniert der Code **nur auf dem Server selbst** — ein Handy
+> läuft ins Leere. Trage deshalb die LAN-Adresse des Servers oder die
+> öffentliche Domain ein. Bereits gedruckte Codes lassen sich später nicht
+> mehr umbiegen, also am besten vor dem ersten produktiven Code festlegen.
+
+Der Hostname `db` im `DATABASE_URL` bleibt unverändert — das ist der
+Servicename aus der `docker-compose.yml`, nicht dein Server.
+
+### Schritt 4 — Starten
 
 ```bash
-cp .env.example .env      # anschließend POSTGRES_PASSWORD und BASE_URL anpassen
 docker compose up -d --build
 ```
 
-Danach ist die Anwendung unter <http://localhost:3000> erreichbar. Die
+Der erste Durchlauf baut das Image und dauert je nach Maschine **5 bis 15
-Datenbankmigrationen laufen beim Start des App-Containers automatisch — es
+Minuten**. Spätere Starts brauchen nur wenige Sekunden.
-sind keine weiteren Schritte nötig.
 
-Nützliche Befehle:
+### Schritt 5 — Prüfen, ob alles läuft
 
 ```bash
-docker compose logs -f app     # Protokoll der Anwendung
+docker compose ps
-docker compose ps              # Status beider Container
-docker compose down            # Stack stoppen (Daten bleiben erhalten)
-docker compose down -v         # Stack stoppen und Datenbank löschen
 ```
 
+Erwartet werden zwei Container, `db` mit dem Zusatz `(healthy)`:
+
+```
+NAME                     SERVICE   STATUS
+qrcode-generator-app-1   app       Up 30 seconds
+qrcode-generator-db-1    db        Up 45 seconds (healthy)
+```
+
+Und im Protokoll:
+
+```bash
+docker compose logs app
+```
+
+```
+→ Datenbankmigrationen werden angewendet …
+All migrations have been successfully applied.
+→ Anwendung wird gestartet …
+▲ Next.js 16.3.0
+✓ Ready
+```
+
+Die Datenbank richtet sich beim ersten Start selbst ein — es gibt keinen
+Extraschritt dafür.
+
+### Schritt 6 — Aufrufen
+
+Im Browser die Adresse öffnen, die du als `BASE_URL` eingetragen hast, zum
+Beispiel <http://192.168.1.50:3000>. Es erscheint „Was möchtest du
+erstellen?“ mit den Typ-Kacheln.
+
+### Schritt 7 — Ersten Code erstellen
+
+1. Kachel **Website** anklicken.
+2. Adresse eingeben, etwa `https://example.com` — die Vorschau erscheint
+   sofort.
+3. **PNG** oder **SVG** herunterladen. Fertig.
+
+Für einen Code, dessen Ziel du später ändern kannst:
+
+1. Unter „Art des Codes“ auf **Dynamisch** wechseln.
+2. Optional einen Namen vergeben, damit du ihn wiederfindest.
+3. **Dynamischen Code speichern** — erst dabei entsteht die Kurz-URL, deshalb
+   ist der Download bis dahin gesperrt.
+4. Danach herunterladen. Unter **Meine Codes** lässt sich das Ziel jederzeit
+   ändern, ohne den gedruckten Code anzufassen.
+
+### Schritt 8 — Aufräumen, was du nicht brauchst
+
+Unter **Verwaltung → QR-Typen** kannst du einzelne Typen ausblenden — 15
+Kacheln sind viel, wenn ihr ohnehin nur drei davon braucht. Ausgeblendete
+Typen verschwinden aus der Auswahl; bereits erstellte Codes dieses Typs
+funktionieren unverändert weiter.
+
+### Die wichtigsten Befehle im Betrieb
+
+```bash
+docker compose logs -f app     # Protokoll mitlesen (Abbruch mit Strg+C)
+docker compose ps              # Status beider Container
+docker compose restart app     # Anwendung neu starten
+docker compose down            # Stack stoppen — die Daten bleiben erhalten
+docker compose up -d           # wieder starten
+docker compose down -v         # Stack stoppen UND die Datenbank löschen
+```
+
+---
+
+## Hinter einem Reverse Proxy (Nginx Proxy Manager)
+
+Soll die Anwendung unter einer eigenen Domain mit HTTPS laufen, übernimmt der
+Proxy die Zertifikate; die Anwendung selbst bleibt unverändert.
+
+**1. Port nur lokal veröffentlichen.** Wenn Proxy und Anwendung auf demselben
+Rechner laufen, muss Port 3000 nicht nach außen offen sein. In der `.env`:
+
+```bash
+APP_PORT=3000
+BASE_URL=https://qr.deine-domain.de
+```
+
+**2. Im Nginx Proxy Manager** einen *Proxy Host* anlegen:
+
+| Feld | Wert |
+| --- | --- |
+| Domain Names | `qr.deine-domain.de` |
+| Scheme | `http` |
+| Forward Hostname / IP | IP des Docker-Hosts, z. B. `192.168.1.50` |
+| Forward Port | `3000` |
+| Websockets Support | an |
+| Block Common Exploits | an |
+| SSL | Zertifikat anfordern, *Force SSL* aktivieren |
+
+Läuft der Proxy als Container im selben Docker-Netz wie dieser Stack, kann
+statt der IP auch der Servicename `app` mit Port `3000` stehen — dann muss
+das Port-Mapping gar nicht nach außen offen sein.
+
+**3. `BASE_URL` auf die öffentliche Adresse setzen** — mit `https://` und ohne
+Port. Danach:
+
+```bash
+docker compose up -d
+```
+
+> `BASE_URL` muss zur Adresse passen, unter der Besucher die Anwendung
+> aufrufen. Steht dort weiterhin `http://192.168.1.50:3000`, zeigen neue
+> dynamische Codes ins interne Netz statt auf die Domain.
+
+### Mehrere Domains
+
+Sollen Kurz-URLs unter verschiedenen Adressen laufen — etwa je Kunde eine —,
+lege sie unter **Verwaltung → Domains** an und richte im Proxy für jede einen
+eigenen Proxy Host auf dieselbe Anwendung ein.
+
+Die Weiterleitung erkennt am `Host`-Header, welche Domain gemeint ist, und
+prüft ihn gegen die registrierten Domains. Ein unbekannter Hostname endet mit
+404 — über einen gefälschten Header lässt sich also keine fremde Domain
+ansprechen.
+
+Zwei Dinge, die daraus folgen:
+
+- Der **Slug ist je Domain eindeutig**, nicht global. Derselbe sprechende
+  Slug darf auf zwei Domains liegen und zeigt dort auf verschiedene Ziele.
+- Eine Domain kann **mehreren Gruppen** dienen. Das heißt aber nicht, dass
+  diese die Codes der jeweils anderen sehen — die Übersicht bleibt strikt
+  nach Gruppe gefiltert.
+
+`BASE_URL` bleibt dabei wichtig: sie liefert die Standard-Domain für Aufrufe
+über eine nicht registrierte Adresse (etwa direkt über die IP im LAN) und
+bestimmt, ob Kurz-URLs mit `http` oder `https` gebildet werden.
+
+---
+
+## Wenn etwas nicht läuft
+
+**`POSTGRES_PASSWORD fehlt — bitte .env aus .env.example anlegen`**
+Die `.env` fehlt oder ist leer. Schritt 3 nachholen.
+
+**`ports are not available: ... bind: address already in use`**
+Port 3000 ist belegt. Entweder den anderen Dienst beenden oder in der `.env`
+einen anderen Port setzen, z. B. `APP_PORT=3100`, dann `docker compose up -d`.
+
+**Der Container `db` bleibt `unhealthy` oder startet immer neu**
+Meist ein Datenverzeichnis aus einer älteren PostgreSQL-Version. Protokoll
+ansehen mit `docker compose logs db`. Wenn dort von einem inkompatiblen
+Datenlayout die Rede ist und du die Daten nicht brauchst:
+`docker compose down -v` — Achtung, das löscht die Datenbank.
+
+**Der QR-Code führt auf dem Handy ins Leere**
+`BASE_URL` zeigt auf `localhost`. Auf die LAN-Adresse oder Domain ändern,
+`docker compose up -d`, und die betroffenen dynamischen Codes neu
+herunterladen. Statische Codes sind davon nicht betroffen.
+
+**Die Anwendung antwortet nicht, `docker compose ps` zeigt sie aber als `Up`**
+`docker compose logs app` ansehen. Kommt dort ein Datenbankfehler, stimmt
+meist das Passwort in `DATABASE_URL` nicht mit `POSTGRES_PASSWORD` überein —
+beide Werte müssen identisch sein.
+
+**Nach einem Update fehlt etwas oder die Seite ist leer**
+`docker compose up -d --build` erzwingt einen Neubau. Hilft das nicht:
+`docker compose down && docker compose up -d --build`.
+
 ---
 
 ## Aktualisieren
@@ -102,6 +361,7 @@ Alle Einstellungen stehen in der `.env` im Projektverzeichnis (Vorlage:
 | ------------------- | ------------------------------------------------------------- | ------------------------ |
 | `BASE_URL`          | Öffentliche Adresse der App — landet in dynamischen QR-Codes    | `http://localhost:3000`  |
 | `APP_PORT`          | Host-Port, auf dem die App veröffentlicht wird                  | `3000`                   |
+| `AUTH_ENABLED`      | Anmeldung mit Benutzern, Gruppen und Rollen                     | `false`                  |
 | `DATABASE_URL`      | Verbindungsstring der App zur Datenbank                         | —                        |
 | `POSTGRES_USER`     | Datenbankbenutzer                                               | `qrcode`                 |
 | `POSTGRES_PASSWORD` | Datenbankpasswort (**muss gesetzt sein**)                       | —                        |
@@ -137,9 +397,52 @@ werden — der Hostname darin bleibt `db` (der Servicename aus
 
 ### 1. Typ wählen
 
-Die Startseite zeigt unter „Was möchtest du erstellen?“ ein Kachel-Grid aller
+Die Startseite zeigt unter „Was möchtest du erstellen?“ ein Kachel-Grid der
-15 QR-Typen. In Version 1 ist **Website** aktiv (Badge „Beliebt“); die übrigen
+freigegebenen QR-Typen. Alle 15 Typen sind umgesetzt.
-Kacheln sind sichtbar, aber deaktiviert (Badge „Bald verfügbar“).
+
+| Typ | Kodiert als | Statisch | Dynamisch |
+| --- | --- | :-: | :-: |
+| Website | die URL selbst | ✓ | ✓ |
+| E-Mail | `mailto:` mit Betreff und Text | ✓ | ✓ |
+| SMS | `SMSTO:` | ✓ | ✓ |
+| WhatsApp | `https://wa.me/…` | ✓ | ✓ |
+| Standort | `geo:` — dynamisch über OpenStreetMap | ✓ | ✓ |
+| Video | die Videoadresse — dynamisch mit Player-Seite | ✓ | ✓ |
+| vCard | vCard 3.0 | ✓ | — |
+| WLAN | `WIFI:` | ✓ | — |
+| App-Link | Weiterleitung je nach Gerät | — | ✓ |
+| Zahlung | GiroCode (EPC069-12) oder Zahlungslink | ✓ | nur Link |
+| Mehrere Links | eigene Seite mit Linkliste | — | ✓ |
+| Social Media | eigene Seite mit den Profilen | — | ✓ |
+| PDF | hinterlegte Datei auf eigener Seite | — | ✓ |
+| Bild | hinterlegte Bilder auf eigener Seite | — | ✓ |
+| Feedback | Bewertungsformular auf eigener Seite | — | ✓ |
+
+Warum manche Typen nur eine Betriebsart können:
+
+- **vCard und WLAN** werden vom Gerät direkt ausgewertet — die Kamera legt
+  einen Kontakt an oder richtet das Netz ein. Über eine Kurz-URL würde
+  stattdessen nur ein Browser aufgehen.
+- **App-Link** kann nicht statisch sein: welches Ziel richtig ist, steht erst
+  beim Scannen fest. Die Weiterleitung wertet den User-Agent aus und schickt
+  iOS in den App Store, Android zu Google Play und alles Übrige auf die
+  Ausweichadresse.
+- **GiroCode** ist kein Web-Ziel, sondern ein Datensatz für Banking-Apps. Als
+  dynamischer Code funktioniert daher nur die Variante „Zahlungslink“ — die
+  Anwendung weist das beim Speichern ausdrücklich ab, statt einen Code
+  entstehen zu lassen, der beim Scannen ins Leere führt.
+- **Mehrere Links, Social Media, PDF, Bild und Feedback** brauchen eine Seite,
+  die die Anwendung selbst ausliefert — eine Linkliste oder ein Formular passt
+  nicht in einen einzelnen Code. Diese Seiten liegen unter `/s/{slug}`; der
+  gedruckte Code zeigt weiterhin auf `/r/{slug}` und wird dorthin
+  weitergeleitet. Der Scan-Zähler zählt dabei den Aufruf des Codes, nicht das
+  Neuladen der Seite.
+
+> **Zum WLAN-Code:** Das Passwort steht im Klartext im Code — wer ihn scannt
+> oder abfotografiert, kennt es. Für Gästenetze ist das gewollt. Besteht ein
+> Netzwerkname oder Passwort ausschließlich aus Hex-Ziffern (etwa `abc123`),
+> setzt die Anwendung ihn wie in der Spezifikation vorgesehen in
+> Anführungszeichen — sonst würden manche Geräte den Wert als Hexzahl deuten.
 
 ### 2. Statisch oder dynamisch
 
@@ -176,7 +479,33 @@ exakt das, was auch heruntergeladen wird.
 **PNG** für Druck und Office-Dokumente, **SVG** für verlustfreie Skalierung
 (Plakate, Schilder, Druckvorstufe).
 
-### 5. Meine Codes
+### 5. Verwaltung: welche Typen erscheinen
+
+Unter **Verwaltung → QR-Typen** lässt sich jeder der 15 Typen einzeln
+ein- und ausblenden. Ausgeblendete Typen verschwinden vollständig von der
+Startseite und lassen sich nicht mehr neu anlegen — praktisch, um die noch
+nicht umgesetzten Typen gar nicht erst zu zeigen.
+
+Zwei Eigenschaften sind dabei zu unterscheiden:
+
+| | Bedeutung | Woher |
+| --- | --- | --- |
+| **umgesetzt** | Der Typ ist ausprogrammiert. In Version 1 gilt das nur für „Website“. | Registry im Code |
+| **freigegeben** | Die Verwaltung zeigt den Typ an. | Datenbank, jederzeit änderbar |
+
+Nur umgesetzt **und** freigegeben heißt benutzbar. Freigegeben, aber nicht
+umgesetzt, erscheint als Kachel „Bald verfügbar“.
+
+> **Bereits gespeicherte Codes bleiben unberührt.** Schaltet man einen Typ ab,
+> leiten vorhandene dynamische Codes weiter wie bisher und lassen sich weiter
+> bearbeiten. Ein gedruckter Code wird durch das Abschalten seines Typs also
+> nicht ungültig — gesperrt ist nur das Anlegen neuer Codes.
+
+Ohne Eintrag in der Datenbank gilt ein Typ als freigegeben. Eine frische
+Installation zeigt also alles, und Typen aus späteren Versionen erscheinen
+automatisch.
+
+### 6. Meine Codes
 
 Unter „Meine Codes“ stehen alle dynamischen Codes mit Vorschaubild,
 Kurz-URL, aktuellem Ziel, Scan-Anzahl, Erstellungsdatum und letztem Scan.
@@ -187,11 +516,213 @@ Dort lässt sich
 - der Code **löschen** (mit Bestätigungsdialog),
 - das Bild erneut als PNG oder SVG **herunterladen**.
 
+**Liste oder Karten.** Voreingestellt ist die **Liste** — eine Zeile je Code,
+gedacht für viele Projekte nebeneinander. Über die beiden Schalter rechts neben
+der Sortierung wechselst du zur **Kartenansicht** mit großer Vorschau. Die Wahl
+merkt sich der Browser.
+
+Dazu kommen
+
+- ein **Suchfeld** über Name, Ziel, Kurz-URL und Typ,
+- eine **Sortierung** nach Datum, Name oder Scan-Anzahl,
+- ein **Gruppenfilter**, sobald Codes in mehr als einer Gruppe liegen.
+
+Auf schmalen Bildschirmen blendet die Liste die hinteren Spalten aus; die
+Kurz-URL rückt dann unter den Namen. Zum Herunterladen dient dort die
+Kartenansicht.
+
 Statische Codes erscheinen hier nicht, weil sie nicht gespeichert werden.
 
-> Version 1 ist für den Einzelplatz-/LAN-Betrieb gedacht und hat **keine
+Bei einem **Feedback-Code** führt aus der Zeile ein Stern-Symbol zur
-> Benutzerverwaltung**. Wer die Anwendung erreicht, sieht und ändert alle
+Auswertung: Durchschnitt, Verteilung der Noten und die abgegebenen Kommentare.
-> Codes. Die App gehört daher nicht ungeschützt ins offene Internet.
+
+---
+
+### 7. Eigene Seiten: Links, Profile, Dateien, Feedback
+
+Fünf Typen haben kein fremdes Ziel, auf das sich weiterleiten ließe — sie
+brauchen eine Seite. Die liefert die Anwendung selbst aus, unter
+`{BASE_URL}/s/{slug}`:
+
+| Typ | Was die Seite zeigt |
+| --- | --- |
+| Mehrere Links | Überschrift, kurzer Text, bis zu 20 beschriftete Links |
+| Social Media | dieselbe Form, aber mit Netzwerk-Auswahl aus einem Katalog |
+| PDF | das hinterlegte Dokument mit „Öffnen“ und „Herunterladen“ |
+| Bild | ein Bild oder eine Galerie aus bis zu 10 Bildern mit Bildunterschriften |
+| Feedback | ein Formular mit Sternen oder Gesichtern und optionalem Kommentar |
+
+Diese Seiten sind **öffentlich** und zeigen bewusst nichts von der Anwendung:
+keine Navigation, kein „Verwaltung“, kein Hinweis auf den Generator. Wer einen
+Aushang scannt, soll nur den Inhalt sehen.
+
+Der gedruckte Code zeigt weiterhin auf `/r/{slug}`; von dort geht es auf die
+Seite. Der Scan-Zähler zählt dabei den Aufruf des Codes — ein Neuladen der
+Seite zählt nicht mit.
+
+**Bei Social Media** genügt als Eingabe das Kürzel: aus `@firma` wird beim
+Speichern `https://instagram.com/firma`. Eine vollständige Adresse bleibt
+unverändert, damit auch abweichende Profil-Adressen möglich sind.
+
+**Beim Video-Typ** wird der Player von YouTube oder Vimeo erst nach einem Klick
+geladen, und davor steht, dass dabei Daten an den Anbieter gehen. Ungefragt
+einen Drittanbieter einzubinden wäre auf einer Seite, die Fremde nach einem
+Scan zu sehen bekommen, nicht in Ordnung.
+
+#### Hochgeladene Dateien
+
+PDFs und Bilder liegen **in der Datenbank**, nicht auf der Platte. Damit gibt
+es weiterhin genau ein Volumen zu sichern: Wer die Datenbank sichert, hat
+alles.
+
+- Die Grenze steht in der `.env` unter `MAX_UPLOAD_MB` (Voreinstellung 10).
+- Erlaubt sind PDF sowie PNG, JPEG, WebP, GIF und AVIF. **SVG bewusst nicht** —
+  eine SVG-Datei darf Skripte enthalten und würde von derselben Adresse wie die
+  Anwendung ausgeliefert.
+- Geprüft wird der **Inhalt**, nicht die Dateiendung. Eine Textdatei mit dem
+  Namen `harmlos.pdf` wird abgewiesen.
+- Wird ein Code gelöscht, verschwindet seine Datei mit ihm. Eine ausgetauschte
+  Datei und eine hochgeladene, aber nie gespeicherte werden nach 24 Stunden
+  aufgeräumt.
+
+#### Rückmeldungen
+
+Ein Feedback-Eintrag besteht aus einer Note von 1 bis 5 und einem optionalen
+Text. Gespeichert wird **kein Name, keine IP-Adresse, keine Gerätekennung** —
+wer einen Aushang scannt und eine Note vergibt, bleibt anonym. Gegen Fluten
+gibt es eine Bremse von 10 Rückmeldungen pro Minute und Absender; die Adresse
+dient dabei nur als Schlüssel im Arbeitsspeicher und wird nirgends gespeichert.
+
+> Ohne eingeschaltete Anmeldung sieht und ändert jeder, der die Anwendung
+> erreicht, alle Codes. Für den Einzelplatz- oder LAN-Betrieb ist das gewollt;
+> ins offene Internet gehört die Anwendung dann nicht. Mit `AUTH_ENABLED=true`
+> gibt es Benutzer, Gruppen und Rollen — siehe unten.
+
+---
+
+## Anmeldung, Gruppen und Rollen
+
+Standardmäßig ist die Anmeldung **aus**: wer die Anwendung erreicht, darf
+alles. Für den Einzelplatz- oder LAN-Betrieb ist das gewollt. Sobald mehrere
+Leute damit arbeiten, lässt sie sich einschalten.
+
+### Einschalten
+
+In der `.env`:
+
+```bash
+AUTH_ENABLED=true
+```
+
+Danach:
+
+```bash
+docker compose up -d
+```
+
+Beim nächsten Aufruf erscheint die **Ersteinrichtung** und du legst den
+ersten Administrator an. Diese Seite schließt sich, sobald es einen Benutzer
+gibt — danach führt sie zur normalen Anmeldung.
+
+> **Fehlt die Zeile in deiner `.env`?** Die `.env` wird von `git pull` nicht
+> angefasst — sie gehört bewusst nicht ins Repository. Wurde sie vor
+> Einführung der Anmeldung angelegt, fehlt `AUTH_ENABLED` darin. Einfach
+> ergänzen; ohne die Zeile gilt `false`.
+
+Ob es angekommen ist, zeigt:
+
+```bash
+docker compose exec app env | grep AUTH_ENABLED
+```
+
+> **Aussperren ist nicht möglich.** Der Schalter steht bewusst in der `.env`
+> und nicht in der Oberfläche. Wer den Zugang verliert, setzt
+> `AUTH_ENABLED=false`, startet neu und kommt wieder an alles heran.
+
+Bestehende Codes gehen dabei nicht verloren: die Migration legt eine Gruppe
+**Standard** an und ordnet ihnen diese zu.
+
+### Die vier Ebenen
+
+| Ebene | Darf |
+| --- | --- |
+| **Instanz-Administrator** | alles: Benutzer, Gruppen, QR-Typen und sämtliche Codes |
+| **Administrator** einer Gruppe | alles in seiner Gruppe, einschließlich Mitglieder und Rollen |
+| **Bearbeiter** | Codes der Gruppe anlegen, ändern, löschen |
+| **Betrachter** | Codes der Gruppe ansehen und herunterladen — sonst nichts |
+
+Ein Benutzer kann in mehreren Gruppen sein, mit unterschiedlicher Rolle je
+Gruppe. Er sieht ausschließlich die Codes der Gruppen, in denen er Mitglied
+ist.
+
+| Aktion | Betrachter | Bearbeiter | Admin der Gruppe | Instanz-Admin |
+| --- | :-: | :-: | :-: | :-: |
+| Codes sehen, Bilder herunterladen | ✓ | ✓ | ✓ | ✓ |
+| Statische Codes erzeugen | ✓ | ✓ | ✓ | ✓ |
+| Dynamische Codes anlegen und ändern | – | ✓ | ✓ | ✓ |
+| Codes löschen | – | ✓ | ✓ | ✓ |
+| Mitglieder und Rollen der Gruppe | – | – | ✓ | ✓ |
+| Gruppen und Benutzer anlegen | – | – | – | ✓ |
+| QR-Typen freigeben | – | – | – | ✓ |
+
+### Was unabhängig von der Anmeldung bleibt
+
+Die Weiterleitung unter `/r/{slug}` ist **immer öffentlich** — sonst könnte
+niemand einen gedruckten Code scannen. Sie verrät nur das Ziel, nicht die
+Verwaltung.
+
+### Benutzer verwalten
+
+Unter **Verwaltung → Benutzer**: Konten anlegen, Passwörter setzen, Konten
+deaktivieren oder löschen.
+
+- Passwörter werden mit **scrypt** gespeichert (Node-Standardbibliothek, kein
+  natives Modul — dadurch keine Abhängigkeit, die zur Container-Plattform
+  passen muss).
+- Ein neues Passwort oder das Deaktivieren beendet **alle offenen Sitzungen**
+  des Betroffenen sofort.
+- Nach acht Fehlversuchen ist ein Konto 15 Minuten gesperrt; ein Administrator
+  kann die Sperre vorzeitig aufheben.
+- Der **letzte aktive Administrator** kann sich weder selbst deaktivieren noch
+  sich die Rechte entziehen noch gelöscht werden.
+- Passwörter kann nur ein Administrator setzen. Einen Versand per E-Mail gibt
+  es bewusst nicht — das spart einen SMTP-Zugang.
+
+### Gruppen verwalten
+
+Unter **Verwaltung → Gruppen**: Gruppen anlegen und Mitglieder mit Rollen
+zuweisen. Eine Gruppe, die noch Codes enthält, lässt sich nicht löschen —
+sonst führten gedruckte Codes ins Leere.
+
+---
+## Anmeldung über Authentik (OIDC)
+
+Statt Passwörter hier zu pflegen, lässt sich die Anmeldung an einen
+OpenID-Connect-Anbieter abgeben — getestet mit **Authentik**, ebenso nutzbar
+mit Keycloak, Zitadel oder Entra ID.
+
+```bash
+AUTH_ENABLED=true
+OIDC_ENABLED=true
+OIDC_ISSUER=https://auth.example.com/application/o/qrcode-generator/
+OIDC_CLIENT_ID=…
+OIDC_CLIENT_SECRET=…
+```
+
+Auf der Anmeldeseite erscheint dann ein Knopf für den Anbieter; das
+Passwortfeld bleibt daneben stehen, bis `OIDC_ONLY=true` gesetzt wird.
+
+**Übernommen wird, wer jemand ist** — Kennung, E-Mail-Adresse, Anzeigename —
+und auf Wunsch über `OIDC_ADMIN_GROUP` das Recht zur Verwaltung. Gruppen und
+Rollen bleiben Sache dieser Anwendung: Die Gruppen im Verzeichnis bedeuten
+etwas anderes als die hier, und eine automatische Übersetzung wäre eine Quelle
+stiller Überraschungen.
+
+Bestehende Konten mit Passwort werden beim ersten Anmelden anhand der
+**bestätigten** E-Mail-Adresse verknüpft, nicht verdoppelt.
+
+→ **Vollständige Anleitung mit allen Feldern in Authentik, Fehlerbildern und
+dem Weg zurück: [docs/authentik.md](docs/authentik.md)**
 
 ---
 
@@ -339,7 +870,9 @@ deutschen Meldung.
 | `PATCH`  | `/api/codes/{id}`       | Ziel, Name oder Gestaltung ändern               |
 | `DELETE` | `/api/codes/{id}`       | Code löschen                                    |
 | `GET`    | `/api/codes/{id}/qr`    | Bild des Codes (`?format=png\|svg&download=1`)  |
-| `GET`    | `/r/{slug}`             | Weiterleitung, erhöht den Scan-Zähler           |
+| `GET`    | `/r/{slug}`             | Weiterleitung, erhöht den Scan-Zähler          |
+| `GET`    | `/api/admin/types`      | Zustand aller QR-Typen                          |
+| `PATCH`  | `/api/admin/types`      | Typ freigeben oder abschalten                   |
 
 Beispiel:
 
@@ -357,25 +890,39 @@ curl -X POST http://localhost:3000/api/codes \
 
 ---
 
-## Ausblick Version 2
+## Einen weiteren Typ ergänzen
 
-Geplant sind die übrigen 14 Typen: vCard, App-Link, Mehrere Links, Social
+Alle 15 vorgesehenen Typen sind gebaut. Kommt ein sechzehnter dazu, besteht er
-Media, WhatsApp, PDF, Bild, Video, E-Mail, SMS, Standort, Zahlung, WLAN und
+aus:
-Feedback.
-
-Die Architektur ist darauf ausgelegt — ein neuer Typ besteht aus:
 
 1. **einem Modul** in `src/lib/qr/types/` (Zod-Schema, Kodierung, Kurzfassung),
 2. **einer Formular-Komponente** in `src/components/qr-forms/`,
-3. **je einem Eintrag** in `src/lib/qr/registry.ts` (ersetzt dort den
+3. **je einem Eintrag** in `src/lib/qr/registry.ts` und in
-   `defineComingSoonType`-Platzhalter) und in
+   `src/components/qr-forms/index.ts`,
-   `src/components/qr-forms/index.ts`.
+4. **einer Landingpage** in `src/components/landing/`, falls er `hasLandingPage`
+   meldet.
 
-Am bestehenden Code aus Version 1 ist dafür nichts zu ändern: Vorschau,
+Am übrigen Code ist dafür nichts zu ändern: Vorschau, Download, Gestaltung,
-Download, Gestaltung, Speicherung dynamischer Codes und die Weiterleitung
+Speicherung, Weiterleitung, Liste und Verwaltung arbeiten für alle Typen
-arbeiten für alle Typen gleich.
+gleich. Die Kennung gehört zusätzlich in `QR_TYPE_IDS` in
+`src/lib/qr/type-module.ts`.
 
-Typen, die statt einer Weiterleitung eine eigene Landingpage brauchen (etwa
+Für einen angekündigten, aber noch nicht gebauten Typ gibt es
-„Mehrere Links“ oder „Feedback“), setzen dafür `redirectTarget` auf eine
+`defineComingSoonType`: Er erscheint als Kachel mit dem Badge „Bald
-interne Adresse — auch dafür ist keine Änderung am Datenmodell nötig, weil
+verfügbar“ und lässt sich nicht öffnen.
-`data` als JSONB gespeichert wird.
+
+Braucht der Typ eine hochgeladene Datei, meldet er ihre Ids über `uploadIds` —
+daran hängt, was beim Löschen des Codes mitgeht und was als verwaist
+weggeräumt wird.
+
+### Was als Nächstes sinnvoll wäre
+
+- **Gruppen aus dem Verzeichnis übernehmen.** Die OIDC-Anbindung übernimmt
+  heute bewusst nur die Identität. Eine Zuordnung von Verzeichnisgruppen zu
+  Gruppen dieser Anwendung wäre möglich, braucht aber eine klare Regel dafür,
+  was mit von Hand vergebenen Rollen passiert.
+- **Statistik über die Zeit.** Der Zähler weiß heute nur, wie oft und wann
+  zuletzt. Ein Verlauf je Tag wäre eine eigene Tabelle — und die Frage, wie
+  lange man ihn aufbewahrt.
+- **Codes exportieren.** Eine CSV aller Codes einer Gruppe, für die Übergabe
+  an Druckereien.

docker-compose.yml

@@ -28,9 +28,29 @@ services:
       db:
         condition: service_healthy
     environment:
+      # Achtung beim Ergänzen: Compose liest die .env nur, um Platzhalter wie
+      # ${BASE_URL} zu ersetzen. In den Container gelangt ausschließlich, was
+      # hier aufgeführt ist — eine neue Variable in der .env allein bleibt
+      # wirkungslos.
+      #
       # Öffentliche Adresse der App — landet in jedem dynamischen QR-Code.
       BASE_URL: ${BASE_URL:-http://localhost:3000}
       DATABASE_URL: ${DATABASE_URL}
+      # Anmeldung mit Benutzern, Gruppen und Rollen.
+      AUTH_ENABLED: ${AUTH_ENABLED:-false}
+      MAX_UPLOAD_MB: ${MAX_UPLOAD_MB:-10}
+      SESSION_IDLE_DAYS: ${SESSION_IDLE_DAYS:-30}
+      SESSION_MAX_DAYS: ${SESSION_MAX_DAYS:-90}
+      OIDC_ENABLED: ${OIDC_ENABLED:-false}
+      OIDC_ISSUER: ${OIDC_ISSUER:-}
+      OIDC_CLIENT_ID: ${OIDC_CLIENT_ID:-}
+      OIDC_CLIENT_SECRET: ${OIDC_CLIENT_SECRET:-}
+      OIDC_BUTTON_LABEL: ${OIDC_BUTTON_LABEL:-Mit Authentik anmelden}
+      OIDC_SCOPES: ${OIDC_SCOPES:-openid email profile}
+      OIDC_ONLY: ${OIDC_ONLY:-false}
+      OIDC_DEFAULT_ROLE: ${OIDC_DEFAULT_ROLE:-VIEWER}
+      OIDC_ADMIN_GROUP: ${OIDC_ADMIN_GROUP:-}
+      OIDC_GROUPS_CLAIM: ${OIDC_GROUPS_CLAIM:-groups}
     ports:
       # Direktes Port-Mapping, bewusst ohne Reverse Proxy.
       - "${APP_PORT:-3000}:3000"

docs/anleitung.md

@@ -0,0 +1,322 @@
+# Bedienungsanleitung
+
+Diese Anleitung führt durch die tägliche Arbeit mit dem QR-Code-Generator —
+vom ersten Code bis zur Auswertung von Rückmeldungen. Wie der Stack
+aufgesetzt wird, steht im [README](../README.md); die Anmeldung über
+Authentik in [authentik.md](authentik.md).
+
+> Die Bilder zeigen die Oberfläche mit eingeschalteter Anmeldung. Ohne
+> Anmeldung fehlen Kopfzeile rechts und der Bereich „Verwaltung“, alles
+> Übrige ist gleich.
+
+---
+
+## Inhalt
+
+- [Der schnellste Weg zum Code](#der-schnellste-weg-zum-code)
+- [Statisch oder dynamisch — die wichtigste Entscheidung](#statisch-oder-dynamisch--die-wichtigste-entscheidung)
+- [Gestaltung](#gestaltung)
+- [Meine Codes](#meine-codes)
+- [Die Typen mit eigener Seite](#die-typen-mit-eigener-seite)
+- [Feedback einsammeln und auswerten](#feedback-einsammeln-und-auswerten)
+- [Verwaltung](#verwaltung)
+- [Konto](#konto)
+- [Häufige Fragen](#häufige-fragen)
+
+---
+
+## Der schnellste Weg zum Code
+
+Die Startseite fragt „Was möchtest du erstellen?“ und zeigt alle
+freigegebenen Typen als Kacheln.
+
+![Startseite mit den QR-Typen](bilder/01-startseite.png)
+
+Ein Klick auf **Website**, die Adresse eintippen — die Vorschau erscheint
+sofort — und mit **PNG** oder **SVG** herunterladen. Fertig.
+
+![Website-Formular mit Vorschau](bilder/02-website-formular.png)
+
+Links stehen Inhalt, Art des Codes und Gestaltung, rechts die Vorschau mit
+den beiden Download-Knöpfen. Die Vorschau aktualisiert sich bei jeder
+Änderung.
+
+**PNG oder SVG?**
+
+| | PNG | SVG |
+| --- | --- | --- |
+| Wofür | Bildschirm, Office, Web | Druck, große Formate, Schilder |
+| Größe | fest (256–2048 px) | frei skalierbar ohne Qualitätsverlust |
+| Faustregel | wenn du es einfügst | wenn es jemand druckt |
+
+---
+
+## Statisch oder dynamisch — die wichtigste Entscheidung
+
+|  | Statisch | Dynamisch |
+| --- | --- | --- |
+| Im Code steht | die Zieladresse selbst | eine Kurz-URL dieser Anwendung |
+| Ziel später änderbar | **nein** | **ja**, jederzeit |
+| Scans werden gezählt | nein | ja |
+| Braucht diesen Server | nein, nie | ja, dauerhaft |
+| Code ist | dichter (mehr Daten) | schlanker, leichter scannbar |
+
+**Nimm statisch,** wenn die Adresse feststeht und nie wieder geändert wird —
+und wenn der Code auch dann noch funktionieren soll, wenn es diese Anwendung
+nicht mehr gibt.
+
+**Nimm dynamisch,** wenn etwas gedruckt wird. Ein Aufsteller, ein Flyer, ein
+Schild am Werkstor: Solange der Code dynamisch ist, kannst du das Ziel
+umbiegen, ohne neu zu drucken.
+
+![Umschalten auf einen dynamischen Code](bilder/03-dynamisch.png)
+
+Beim Umschalten auf **Dynamisch** erscheint ein Feld für den Namen und der
+Knopf **Dynamischen Code speichern**. Erst beim Speichern entsteht die
+Kurz-URL — deshalb ist der Download bis dahin gesperrt.
+
+> **Der Name ist nur für dich.** Er steht nirgends im Code und sieht ihn
+> niemand, der scannt. Er hilft dir, den Code später in der Liste
+> wiederzufinden — bei vielen Projekten ist er Gold wert.
+
+---
+
+## Gestaltung
+
+Farben, Größe, Fehlerkorrektur und Rand gelten für Vorschau und Download
+gleichermaßen.
+
+**Farben.** Fünf Vorschläge stehen bereit, eigene Werte gehen über den
+Farbwähler oder als Hex-Wert. Wird der Kontrast zu schwach, warnt die
+Anwendung — ein hübscher, aber unlesbarer Code nützt niemandem. Faustregel:
+dunkler Vordergrund auf hellem Hintergrund. Umgekehrt kommen viele
+Scanner-Apps nicht zurecht.
+
+**Größe.** 256 bis 2048 Pixel, betrifft nur den PNG-Download. Für Druck lieber
+SVG nehmen und die Größe im Layoutprogramm bestimmen.
+
+**Fehlerkorrektur.** Wie viel vom Code beschädigt sein darf, ohne dass er
+unlesbar wird:
+
+| Stufe | Verträgt | Wofür |
+| --- | --- | --- |
+| L | ~7 % | saubere Bildschirmanzeige |
+| **M** | ~15 % | **Voreinstellung, für fast alles richtig** |
+| Q | ~25 % | Aufkleber, die abgerieben werden |
+| H | ~30 % | Außenbereich, Logo mitten im Code |
+
+Höhere Stufen machen den Code dichter — er braucht mehr Fläche, um noch
+gescannt zu werden.
+
+**Rand.** Die weiße Zone rundherum. Vier Module sind Standard; weniger kann
+das Scannen erschweren, weil der Scanner den Code nicht mehr vom Hintergrund
+trennen kann.
+
+---
+
+## Meine Codes
+
+Hier stehen alle **dynamischen** Codes. Statische erscheinen nicht — sie
+werden nicht gespeichert.
+
+![Meine Codes als Liste](bilder/04-meine-codes-liste.png)
+
+Die **Liste** ist die Voreinstellung: eine Zeile je Code, gedacht für viele
+Projekte nebeneinander.
+
+- Das **Suchfeld** durchsucht Name, Ziel, Kurz-URL und Typ.
+- Die **Sortierung** kennt neueste, älteste, Name und Scan-Anzahl.
+- Ein **Gruppenfilter** erscheint, sobald Codes in mehr als einer Gruppe
+  liegen.
+- Das Symbol neben der Kurz-URL kopiert sie in die Zwischenablage.
+
+Über die beiden Schalter rechts geht es zur **Kartenansicht** mit großer
+Vorschau. Die Wahl merkt sich der Browser.
+
+![Meine Codes als Karten](bilder/05-meine-codes-karten.png)
+
+### Ziel ändern
+
+![Dialog zum Ändern des Ziels](bilder/06-ziel-bearbeiten.png)
+
+Das ist der eigentliche Sinn dynamischer Codes: **Die Kurz-URL bleibt, der
+gedruckte Code bleibt gültig, nur das Ziel wechselt.** Die Änderung wirkt
+sofort — beim nächsten Scan.
+
+### Löschen
+
+Löschen fragt nach und nennt den betroffenen Code. Danach führt der gedruckte
+Code ins Leere und zeigt eine freundliche Seite „Diese Seite gibt es nicht“.
+Ein gelöschter Code lässt sich nicht wiederherstellen.
+
+---
+
+## Die Typen mit eigener Seite
+
+Fünf Typen leiten nicht auf eine fremde Adresse weiter, sondern auf eine
+Seite, die diese Anwendung selbst ausliefert: **Mehrere Links**, **Social
+Media**, **PDF**, **Bild** und **Feedback**.
+
+Diese Seiten sind öffentlich und zeigen bewusst nichts von der Anwendung —
+keine Navigation, kein „Verwaltung“, kein Hinweis auf den Generator. Wer
+einen Aushang scannt, soll nur den Inhalt sehen.
+
+### Mehrere Links
+
+![Landingpage mit mehreren Links](bilder/07-landing-links.png)
+
+Eine Überschrift, ein kurzer Text und bis zu 20 beschriftete Links. Mit den
+Pfeilen im Formular lässt sich die Reihenfolge ändern — das oberste wird am
+häufigsten geklickt, also gehört das Wichtigste nach oben.
+
+### Social Media
+
+![Landingpage mit Social-Media-Profilen](bilder/08-landing-social.png)
+
+Dasselbe Prinzip, aber mit einem Katalog von Netzwerken. Als Eingabe genügt
+das Kürzel: Aus `@firma` wird beim Speichern `https://instagram.com/firma`.
+Eine vollständige Adresse bleibt unverändert, damit auch abweichende
+Profil-Adressen möglich sind. Jedes Netzwerk kann nur einmal vorkommen.
+
+### PDF und Bild
+
+![Landingpage mit hinterlegtem PDF](bilder/09-landing-pdf.png)
+
+Beim PDF-Typ lädst du ein Dokument hoch; die Seite zeigt Titel, Dateiname,
+Größe und zwei Knöpfe: **Dokument öffnen** und **Herunterladen**.
+
+Beim Bild-Typ sind es bis zu zehn Bilder mit Bildunterschriften, untereinander
+als Galerie.
+
+Beides lässt sich später austauschen, **ohne den Code neu zu drucken** — genau
+wie ein geändertes Ziel. Erlaubt sind PDF sowie PNG, JPEG, WebP, GIF und AVIF
+bis zur eingestellten Grenze (Voreinstellung 10 MB, siehe `MAX_UPLOAD_MB`).
+
+> SVG wird bewusst nicht angenommen: Eine SVG-Datei darf Skripte enthalten,
+> und sie würde von derselben Adresse ausgeliefert wie die Anwendung selbst.
+
+### Video
+
+Der Video-Typ erkennt YouTube, Vimeo und direkte Videodateien. Auf der Seite
+erscheint ein Abspieler — der Rahmen zum Anbieter lädt aber **erst nach einem
+Klick**, und davor steht, dass dabei Daten an den Anbieter gehen.
+
+Video ist der einzige dieser Typen, der auch **statisch** funktioniert: Dann
+steht die Videoadresse direkt im Code und führt ohne Umweg dorthin.
+
+---
+
+## Feedback einsammeln und auswerten
+
+![Feedback-Formular auf dem Handy](bilder/09b-landing-feedback.png)
+
+Der Feedback-Typ erzeugt ein Formular mit fünf Sternen oder fünf Gesichtern
+und wahlweise einem Textfeld. Alle Texte — Überschrift, Frage, Beschriftung
+des Textfelds, Dank nach dem Absenden — lassen sich frei formulieren.
+
+Gespeichert werden nur die Note und der Text. **Kein Name, keine IP-Adresse,
+keine Gerätekennung.** Wer einen Aushang scannt und eine Note vergibt, bleibt
+anonym — das steht auch für die Scannenden sichtbar unter dem Formular.
+
+![Auswertung der Rückmeldungen](bilder/10-feedback-auswertung.png)
+
+Die Auswertung erreichst du in „Meine Codes“ über das Stern-Symbol in der
+Zeile. Sie zeigt den Durchschnitt, die Verteilung der Noten und alle
+Kommentare mit Datum.
+
+**Ein praktischer Hinweis:** Ein Code pro Ort. Zwei Codes — einer im
+Gastraum, einer am Ausgang — sagen mehr als einer für beides, weil du die
+Auswertungen getrennt lesen kannst.
+
+---
+
+## Verwaltung
+
+Der Bereich **Verwaltung** erscheint nur für Administratoren der Installation.
+
+![Übersicht der Verwaltung](bilder/11-verwaltung.png)
+
+### QR-Typen
+
+![QR-Typen freigeben oder abschalten](bilder/12-verwaltung-typen.png)
+
+15 Kacheln sind viel, wenn ihr ohnehin nur drei davon braucht. Hier lassen
+sich Typen abschalten; sie verschwinden dann aus der Auswahl.
+
+**Bereits erstellte Codes eines abgeschalteten Typs funktionieren
+unverändert weiter** — sie leiten weiter, zählen Scans und lassen sich
+bearbeiten. Nur neue lassen sich nicht mehr anlegen.
+
+### Gruppen
+
+![Gruppen verwalten](bilder/13-verwaltung-gruppen.png)
+
+Eine Gruppe bündelt Codes und die Menschen, die damit arbeiten. Jeder Code
+gehört genau einer Gruppe; wer nicht in der Gruppe ist, sieht ihn nicht.
+
+Die drei Rollen je Gruppe:
+
+| Rolle | Darf |
+| --- | --- |
+| **Betrachter** | Codes sehen und herunterladen |
+| **Bearbeiter** | zusätzlich anlegen, ändern und löschen |
+| **Administrator** | zusätzlich Mitglieder und deren Rollen verwalten |
+
+Darüber liegt der **Administrator der Installation**: Nur er legt Gruppen,
+Benutzer und Domains überhaupt an.
+
+### Domains
+
+![Domains verwalten](bilder/14-verwaltung-domains.png)
+
+Sollen Kurz-URLs unter verschiedenen Adressen laufen — etwa je Kunde eine —,
+werden die Domains hier eingetragen und Gruppen zugeteilt. Eine Domain kann
+mehreren Gruppen dienen; die Codes bleiben trotzdem strikt nach Gruppe
+getrennt.
+
+Damit das funktioniert, muss der Reverse Proxy jede dieser Domains auf diese
+Anwendung leiten — siehe README, Abschnitt „Mehrere Domains“.
+
+---
+
+## Konto
+
+![Der eigene Kontobereich](bilder/15-konto.png)
+
+Hier stehen die eigene Adresse, die Gruppen mit der jeweiligen Rolle, die
+Passwortänderung und der Weg hinaus.
+
+Meldet sich das Konto über Authentik an, steht statt der Passwortänderung ein
+Hinweis darauf — das Passwort wird dann beim Anbieter geändert.
+
+---
+
+## Häufige Fragen
+
+**Der Code funktioniert auf dem Handy nicht, am Rechner aber schon.**
+Dann zeigt die Kurz-URL auf eine Adresse, die das Handy nicht erreicht.
+`BASE_URL` in der `.env` muss die Adresse sein, unter der die Anwendung **von
+außen** erreichbar ist — nicht `localhost`.
+
+**Ich habe den Code schon gedruckt und brauche ein anderes Ziel.**
+Ist er dynamisch: „Meine Codes“ → Ziel bearbeiten. Ist er statisch: Der Code
+muss neu erstellt und neu gedruckt werden. Deshalb bei allem Gedruckten
+dynamisch nehmen.
+
+**Der Scan-Zähler steht auf 0, obwohl jemand gescannt hat.**
+Gezählt wird nur der Aufruf der Kurz-URL. Statische Codes zählen gar nicht,
+weil sie diesen Server nie berühren. Bei Typen mit eigener Seite zählt der
+Scan, nicht das Neuladen der Seite.
+
+**Ein Kollege sieht meine Codes nicht.**
+Er ist nicht in derselben Gruppe. Verwaltung → Gruppen → Mitglied hinzufügen.
+
+**Der QR-Code wird nicht erkannt.**
+Meist zu wenig Kontrast, ein zu kleiner Rand oder zu kleiner Druck.
+Faustregel für Druck: mindestens 2 × 2 cm, bei Entfernung mehr — als grober
+Anhalt ein Zehntel des Leseabstands.
+
+**Kann ich ein Logo in die Mitte setzen?**
+Nicht in dieser Anwendung. Wer es im Layoutprogramm macht: SVG nehmen,
+Fehlerkorrektur **H** wählen und höchstens ein Fünftel der Fläche verdecken —
+danach unbedingt mit mehreren Geräten testen.

docs/authentik.md

@@ -0,0 +1,251 @@
+# Anmeldung über Authentik (OIDC)
+
+Diese Anleitung richtet die Anmeldung am QR-Code-Generator über **Authentik**
+ein. Sie funktioniert genauso mit anderen OpenID-Connect-Anbietern — Keycloak,
+Zitadel, Entra ID —, weil die Anwendung alles Nötige aus dem
+Discovery-Dokument des Anbieters liest. Die Beispiele nennen Authentik, weil
+die Feldnamen dort so heißen.
+
+**Zeitbedarf:** etwa 15 Minuten.
+
+---
+
+## Vorher klären
+
+| Frage | Antwort für diese Anleitung |
+| --- | --- |
+| Adresse der Anwendung | `https://qr.example.com` |
+| Adresse von Authentik | `https://auth.example.com` |
+| Läuft die Anwendung über HTTPS? | Ja — siehe Hinweis unten |
+
+> **HTTPS ist Pflicht, sobald es über den eigenen Rechner hinausgeht.** Beim
+> Anmelden gehen Token über die Leitung, und der Sitzungs-Cookie wird nur bei
+> `https://` in der `BASE_URL` als `Secure` gesetzt. Für einen Versuch im LAN
+> geht auch HTTP; produktiv gehört ein Reverse Proxy davor (siehe README,
+> Abschnitt „Hinter einem Reverse Proxy“).
+
+Die Anwendung muss Authentik erreichen können und umgekehrt der Browser beide.
+Laufen beide in Docker auf demselben Host, genügt es meist, sie ins selbe
+Netz zu hängen — der Browser braucht aber in jedem Fall öffentlich auflösbare
+Adressen.
+
+---
+
+## Schritt 1 — In Authentik einen Provider anlegen
+
+**Applications → Providers → Create → OAuth2/OpenID Provider**
+
+| Feld | Wert |
+| --- | --- |
+| Name | `QR-Code-Generator` |
+| Authorization flow | `default-provider-authorization-explicit-consent` (oder implicit, wenn niemand zustimmen soll) |
+| 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` |
+| Signing Key | ein vorhandenes Zertifikat auswählen |
+| Subject mode | `Based on the User's hashed ID` (Voreinstellung) |
+
+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
+> zu viel oder ein anderer Hostname führt zu `redirect_uri mismatch` —
+> Authentik bricht dann ab, bevor die Anwendung überhaupt etwas mitbekommt.
+
+---
+
+## Schritt 2 — Eine Application anlegen
+
+**Applications → Applications → Create**
+
+| Feld | Wert |
+| --- | --- |
+| Name | `QR-Code-Generator` |
+| Slug | `qrcode-generator` |
+| Provider | der eben angelegte Provider |
+| Launch URL | `https://qr.example.com` |
+
+Der **Slug** steckt gleich in der Issuer-Adresse — merken.
+
+Wer den Zugang einschränken will, hängt hier unter **Policy / Group / User
+Bindings** eine Gruppe ein. Das ist der empfohlene Weg: Wer sich bei Authentik
+anmelden darf, kommt sonst auch in den QR-Code-Generator.
+
+---
+
+## Schritt 3 — Die Issuer-Adresse herausfinden
+
+Authentik zeigt sie beim Provider unter **Provider Info** als *OpenID
+Configuration Issuer*. Sie sieht so aus:
+
+```
+https://auth.example.com/application/o/qrcode-generator/
+```
+
+Prüfen lässt sich das direkt:
+
+```bash
+curl https://auth.example.com/application/o/qrcode-generator/.well-known/openid-configuration
+```
+
+Kommt ein JSON-Dokument mit `authorization_endpoint`, `token_endpoint` und
+`jwks_uri` zurück, stimmt die Adresse.
+
+---
+
+## Schritt 4 — Die `.env` ergänzen
+
+```bash
+AUTH_ENABLED=true
+
+OIDC_ENABLED=true
+OIDC_ISSUER=https://auth.example.com/application/o/qrcode-generator/
+OIDC_CLIENT_ID=<Client ID aus Schritt 1>
+OIDC_CLIENT_SECRET=<Client Secret aus Schritt 1>
+OIDC_BUTTON_LABEL=Mit Authentik anmelden
+OIDC_SCOPES=openid email profile
+OIDC_DEFAULT_ROLE=EDITOR
+OIDC_ADMIN_GROUP=qr-admins
+OIDC_GROUPS_CLAIM=groups
+OIDC_ONLY=false
+```
+
+Danach neu starten:
+
+```bash
+docker compose up -d
+```
+
+> `OIDC_ENABLED` allein genügt nicht — **`AUTH_ENABLED` muss ebenfalls `true`
+> sein**. Ohne Anmeldung gibt es keine Benutzer, denen eine Anmeldung
+> zugeordnet werden könnte.
+
+---
+
+## Schritt 5 — Ausprobieren
+
+`https://qr.example.com/anmelden` aufrufen. Über dem Passwortfeld steht jetzt
+**„Mit Authentik anmelden“**. Ein Klick führt zu Authentik, nach der Anmeldung
+geht es zurück in die Anwendung.
+
+Alle Anmeldenden bekommen die Rolle aus `OIDC_DEFAULT_ROLE` in der
+Standardgruppe. Wer die **Verwaltung** öffnen darf, hängt davon ab, ob
+`OIDC_ADMIN_GROUP` gesetzt ist:
+
+- **Leer:** Der erste Mensch, der sich anmeldet, wird Administrator dieser
+  Installation — genau wie bei der Ersteinrichtung mit Passwort. Danach vergibt
+  man das Recht unter Verwaltung → Benutzer.
+- **Gesetzt:** Dann entscheidet allein die Gruppe, und zwar bei **jeder**
+  Anmeldung neu — auch beim allerersten Benutzer.
+
+> **Achtung beim ersten Mal:** Wenn du `OIDC_ADMIN_GROUP` setzt, vergewissere
+> dich, dass dein eigenes Konto in dieser Gruppe ist. Sonst hat niemand Zugang
+> zur Verwaltung. Der Weg zurück ist einfach: die Variable leeren,
+> `docker compose up -d`, neu anmelden — dann greift wieder die Regel „der
+> erste wird Administrator“, sofern es noch gar keinen gibt.
+
+---
+
+## Was die Anwendung aus Authentik übernimmt — und was nicht
+
+| Übernommen | Bleibt in der Anwendung |
+| --- | --- |
+| Wer jemand ist (`sub`) | Mitgliedschaft in Gruppen |
+| E-Mail-Adresse | Rolle je Gruppe (Admin/Bearbeiter/Betrachter) |
+| Anzeigename | Zuteilung von Domains |
+| Instanz-Administration, falls `OIDC_ADMIN_GROUP` gesetzt ist | alles Übrige |
+
+Das ist eine bewusste Entscheidung. Die Gruppen in Authentik und die Gruppen
+hier bedeuten nicht dasselbe: dort geht es um Organisation und Zugang, hier um
+die Frage, wer welche QR-Codes sehen und ändern darf. Eine automatische
+Übersetzung wäre eine Quelle stiller Überraschungen — deshalb pflegt man
+Gruppen und Rollen weiterhin unter **Verwaltung → Gruppen**.
+
+Wiedererkannt wird jemand an der **Kennung von Authentik** (`sub`), nicht an
+der E-Mail-Adresse. Ändert sich die Adresse, bleibt es dasselbe Konto.
+
+### Die Admin-Gruppe
+
+Steht in `OIDC_ADMIN_GROUP` ein Gruppenname, entscheidet Authentik bei **jeder
+Anmeldung** neu, wer die Verwaltung öffnen darf: Mitglieder der Gruppe
+bekommen das Recht, alle anderen verlieren es. Bleibt die Variable leer,
+rührt die Anmeldung das Recht nicht an — dann pflegt man es hier.
+
+---
+
+## Bestehende Konten übernehmen
+
+Gibt es hier schon Konten mit Passwort, werden sie beim ersten Anmelden über
+Authentik **anhand der E-Mail-Adresse verknüpft**. Aus dem lokalen
+Administrator wird also kein zweites Konto; Gruppen, Rollen und die
+angelegten Codes bleiben.
+
+Verknüpft wird nur, wenn Authentik die Adresse als **bestätigt** meldet. Sonst
+könnte sich beim Anbieter jemand eine fremde Adresse eintragen und damit ein
+hiesiges Konto übernehmen. Meldet Authentik sie als unbestätigt, bricht die
+Anmeldung mit einer Erklärung ab.
+
+Ist ein Konto einmal verknüpft, gibt es dafür kein Passwort mehr: Der Bereich
+**Konto** zeigt dann statt der Passwortänderung einen Hinweis auf den
+Anbieter.
+
+---
+
+## Nur noch über Authentik anmelden
+
+```bash
+OIDC_ONLY=true
+```
+
+Danach verschwindet das Passwortfeld von der Anmeldeseite.
+
+> **Vorher an den Notausgang denken.** Fällt Authentik aus oder ist der
+> Provider falsch konfiguriert, kommt niemand mehr hinein. Der Weg zurück:
+> `OIDC_ONLY=false` in der `.env`, `docker compose up -d` — dann geht die
+> Anmeldung mit Passwort wieder. Lege dir dafür ein lokales Administratorkonto
+> an, **bevor** du umstellst.
+
+---
+
+## Wenn etwas nicht klappt
+
+| Symptom | Ursache und Abhilfe |
+| --- | --- |
+| 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. |
+| „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. |
+| „Das Anmelde-Token des Anbieters ist ungültig“ | Uhrzeit-Abweichung zwischen den Servern oder ein gewechselter Signaturschlüssel. Beides zeigt `docker compose logs app` genauer. |
+| Nach der Anmeldung fehlt die Verwaltung | `OIDC_ADMIN_GROUP` ist gesetzt, der Benutzer aber nicht in dieser Gruppe. Entweder die Gruppe in Authentik ergänzen oder die Variable leeren und das Recht hier vergeben. |
+
+Ausführlichere Meldungen stehen im Protokoll:
+
+```bash
+docker compose logs -f app
+```
+
+---
+
+## Was technisch passiert
+
+1. Klick auf den Knopf → `/api/auth/oidc/start`. Die Anwendung holt das
+   Discovery-Dokument, würfelt `state`, `nonce` und ein PKCE-Geheimnis und legt
+   sie in einen kurzlebigen, `httpOnly`-Cookie.
+2. Weiterleitung zu Authentik mit `code_challenge` (S256).
+3. Nach der Anmeldung kommt Authentik mit `code` und `state` zurück auf
+   `/api/auth/oidc/callback`. Stimmt der `state` nicht, endet es hier.
+4. Die Anwendung tauscht den Code gegen Token — mit Client-Geheimnis **und**
+   PKCE-Verifier. Ein abgefangener Code allein nützt also niemandem.
+5. Das ID-Token wird gegen den JWKS von Authentik geprüft: Signatur,
+   Aussteller, Empfänger, Ablauf und `nonce`.
+6. Konto suchen (über `sub`, ersatzweise über die bestätigte Adresse), anlegen
+   oder verknüpfen — und die Sitzung wie bei der Passwort-Anmeldung setzen.
+
+Die Sitzung selbst ist danach dieselbe wie sonst: ein Zufallstoken im Cookie,
+in der Datenbank nur dessen SHA-256. Abmelden beendet sie hier; bei Authentik
+bleibt man angemeldet.

docs/funktionen.md

@@ -0,0 +1,423 @@
+# Alle Funktionen im Detail
+
+Die lange Fassung der Übersicht aus dem [README](../README.md). Sie
+beschreibt, was die Anwendung kann, wo die Grenzen liegen und warum manches
+so entschieden ist. Wie man es bedient, steht in der
+[Bedienungsanleitung](anleitung.md).
+
+---
+
+## Inhalt
+
+- [QR-Typen](#qr-typen)
+- [Statisch und dynamisch](#statisch-und-dynamisch)
+- [Landingpages](#landingpages)
+- [Dateien](#dateien)
+- [Feedback](#feedback)
+- [Gestaltung und Ausgabe](#gestaltung-und-ausgabe)
+- [Meine Codes](#meine-codes)
+- [Anmeldung, Gruppen und Rollen](#anmeldung-gruppen-und-rollen)
+- [Single Sign-on](#single-sign-on)
+- [Mehrere Domains](#mehrere-domains)
+- [Verwaltung](#verwaltung)
+- [Betrieb](#betrieb)
+- [Schnittstelle](#schnittstelle)
+- [Was die Anwendung bewusst nicht tut](#was-die-anwendung-bewusst-nicht-tut)
+
+---
+
+## QR-Typen
+
+Alle 15 vorgesehenen Typen sind gebaut.
+
+| Typ | Was hineinkommt | Statisch | Dynamisch | Eigene Seite |
+| --- | --- | :-: | :-: | :-: |
+| **Website** | eine Adresse | ✓ | ✓ | — |
+| **vCard** | Name, Firma, Telefon, E-Mail, Anschrift, Web | ✓ | — | — |
+| **App-Link** | je eine Adresse für iOS, Android und Ausweichfall | — | ✓ | — |
+| **Mehrere Links** | Überschrift, Text, bis zu 20 beschriftete Links | — | ✓ | ✓ |
+| **Social Media** | Überschrift, Text, bis zu 12 Profile aus 15 Netzwerken | — | ✓ | ✓ |
+| **WhatsApp** | Rufnummer und vorbereitete Nachricht | ✓ | ✓ | — |
+| **PDF** | eine hochgeladene Datei, Titel, Text | — | ✓ | ✓ |
+| **Bild** | bis zu 10 hochgeladene Bilder mit Bildunterschriften | — | ✓ | ✓ |
+| **Video** | YouTube, Vimeo oder eine direkte Videodatei | ✓ | ✓ | ✓ |
+| **E-Mail** | Empfänger, Betreff, Text | ✓ | ✓ | — |
+| **SMS** | Rufnummer und Text | ✓ | ✓ | — |
+| **Standort** | Koordinaten oder Adresse | ✓ | ✓ | — |
+| **Zahlung** | GiroCode (EPC069-12) **oder** Zahlungslink | ✓ | nur Link | — |
+| **WLAN** | Netzwerkname, Passwort, Verschlüsselung, versteckt | ✓ | — | — |
+| **Feedback** | Frage, Skala, Textfeld, Dankestext | — | ✓ | ✓ |
+
+### Warum manche Typen nur eine Betriebsart können
+
+- **vCard und WLAN** wertet das Gerät direkt aus — die Kamera legt einen
+  Kontakt an oder richtet das Netz ein. Über eine Kurz-URL ginge stattdessen
+  nur ein Browser auf.
+- **App-Link** kann nicht statisch sein: Welches Ziel richtig ist, steht erst
+  beim Scannen fest. Die Weiterleitung wertet den User-Agent aus — iOS in den
+  App Store, Android zu Google Play, alles Übrige auf die Ausweichadresse.
+  (iPadOS meldet sich seit Version 13 als Macintosh und landet deshalb
+  mitunter auf dem Desktop-Weg; für einen Store-Link ist das hinnehmbar.)
+- **GiroCode** ist kein Web-Ziel, sondern ein Datensatz für Banking-Apps. Als
+  dynamischer Code funktioniert nur die Variante „Zahlungslink“. Die
+  Anwendung weist das beim Speichern **und beim Bearbeiten** ab, statt einen
+  Code entstehen zu lassen, der erst beim Scannen auffällt — also dann, wenn
+  er schon gedruckt ist.
+- **Die fünf Typen mit eigener Seite** brauchen eine Seite, die die Anwendung
+  ausliefert. Eine Linkliste oder ein Formular passt nicht in einen einzelnen
+  Code. Video ist die Ausnahme: statisch steht dort die Videoadresse selbst.
+
+### Besonderheiten einzelner Typen
+
+**Social Media.** Als Eingabe genügt das Kürzel — aus `@firma` wird beim
+Speichern `https://instagram.com/firma`. Eine vollständige Adresse bleibt
+unverändert, damit auch abweichende Profil-Adressen möglich sind. Jedes
+Netzwerk kann nur einmal vorkommen. Der Katalog umfasst Instagram, Facebook,
+LinkedIn, Xing, YouTube, TikTok, X, Threads, Mastodon, WhatsApp, Telegram,
+Pinterest, Snapchat, GitHub und „Website“.
+
+**Video.** Erkannt werden `youtube.com/watch`, `youtu.be`, `/shorts/`,
+`/embed/`, `/live/`, Vimeo-Adressen sowie die Endungen `.mp4`, `.webm`,
+`.ogv`, `.ogg`, `.mov` und `.m4v`. Alles Übrige erscheint als schlichter Link
+— ehrlicher als ein eingebetteter Rahmen, den der Anbieter nicht erlaubt.
+
+**WLAN.** Das Passwort steht im Klartext im Code; wer ihn scannt oder
+abfotografiert, kennt es. Für Gästenetze ist das gewollt. Besteht Netzwerkname
+oder Passwort nur aus Hex-Ziffern, setzt die Anwendung den Wert wie in der
+Spezifikation vorgesehen in Anführungszeichen — sonst deuten manche Geräte ihn
+als Hexzahl.
+
+**Standort.** Statisch entsteht ein `geo:`-Link, den Karten-Apps direkt
+öffnen. Dynamisch führt der Weg über OpenStreetMap, weil eine Kurz-URL im
+Browser landet.
+
+---
+
+## Statisch und dynamisch
+
+|  | Statisch | Dynamisch |
+| --- | --- | --- |
+| Im Code steht | die Zieladresse selbst | `{BASE_URL}/r/{slug}` |
+| Ziel später änderbar | nein | ja, jederzeit |
+| Scans gezählt | nein | ja, mit Datum des letzten |
+| Braucht diesen Server | nie | dauerhaft |
+| In der Datenbank | nichts | Slug, Typ, Daten, Gestaltung, Zähler |
+
+Der **Slug** ist acht Zeichen lang aus einem Alphabet ohne verwechselbare
+Zeichen (kein `0`, `O`, `1`, `l`, `I`). Er ist **je Domain** eindeutig, nicht
+global — derselbe Slug darf auf zwei Domains liegen und dort auf
+Verschiedenes zeigen.
+
+Die Weiterleitung antwortet mit **302** und `Cache-Control: no-store`. Ein
+permanenter Redirect würde in Browsern und Zwischenspeichern hängen bleiben —
+und genau die Änderbarkeit zunichtemachen, wegen der man dynamische Codes
+nimmt. Der Scan-Zähler wird beiläufig erhöht; scheitert er, geht die
+Weiterleitung trotzdem durch.
+
+---
+
+## Landingpages
+
+Fünf Typen führen auf eine Seite unter `{BASE_URL}/s/{slug}`, die die
+Anwendung selbst ausliefert.
+
+Diese Seiten sind **öffentlich** und zeigen bewusst nichts von der Anwendung:
+keine Navigation, kein „Verwaltung“, kein Hinweis auf den Generator, und im
+Seitentitel steht der Inhalt statt des Produktnamens. Wer einen Aushang
+scannt, hat mit dem Generator nichts zu tun.
+
+Technisch liegt das App-Chrome in einer Routengruppe, die Landingpages
+außerhalb — sie können es also gar nicht versehentlich erben.
+
+Weitere Eigenschaften:
+
+- Alle Texte kommen aus den Formulardaten und werden als **Text** ausgegeben,
+  nie als HTML. Eingegebene Zeichen wie `<b>` erscheinen als solche.
+- Verlinkte Ziele bekommen `rel="noopener noreferrer"` — kein Zugriff auf das
+  Fenster, aus dem sie geöffnet wurden.
+- Adressen müssen mit `http://` oder `https://` beginnen; `javascript:` und
+  Ähnliches wird abgewiesen.
+- Passen die gespeicherten Daten nicht mehr zum Schema, erscheint eine
+  freundliche Erklärung statt eines Fehlers.
+- Der Scan-Zähler zählt den Aufruf des **Codes**, nicht das Neuladen der
+  Seite.
+
+**Video-Landingpage.** Der Rahmen zu YouTube oder Vimeo lädt erst nach einem
+Klick, und davor steht, dass dabei Daten an den Anbieter übertragen werden.
+Eingebettet wird die Variante ohne Cookies (`youtube-nocookie.com`). Direkte
+Videodateien laden mit `preload="none"` — wer unterwegs scannt, zahlt das
+Volumen.
+
+---
+
+## Dateien
+
+PDFs und Bilder liegen **in der Datenbank**, nicht auf der Platte. Damit gibt
+es weiterhin genau ein Volumen zu sichern: Wer die Datenbank sichert, hat
+alles. Ein zweites Volumen wird beim Sichern zu leicht vergessen.
+
+| | |
+| --- | --- |
+| Erlaubt | PDF; PNG, JPEG, WebP, GIF, AVIF |
+| Nicht erlaubt | SVG und alles Übrige |
+| Größe | `MAX_UPLOAD_MB`, Voreinstellung 10 MB |
+| Geprüft wird | der Dateiinhalt, nicht die Endung |
+
+**Warum kein SVG:** Eine SVG-Datei darf Skripte enthalten. Ausgeliefert von
+derselben Adresse wie die Anwendung könnte sie damit auf angemeldete
+Sitzungen zugreifen.
+
+**Wie geprüft wird:** Der vom Browser gemeldete Typ kommt aus der Endung und
+lässt sich beliebig setzen. Entschieden wird deshalb anhand der ersten Bytes
+der Datei. Eine Textdatei namens `harmlos.pdf` wird abgewiesen.
+
+**Wie ausgeliefert wird:** mit dem erkannten Typ, `X-Content-Type-Options:
+nosniff` und einer `Content-Security-Policy: sandbox` — damit auch ein PDF mit
+eingebetteten Skripten nichts anrichten kann. Ein Anhängen von `?download`
+erzwingt das Speichern statt der Anzeige.
+
+**Wem eine Datei gehört:** Sie hängt am Code. Wird er gelöscht, verschwindet
+sie mit ihm. Eine ausgetauschte Datei verliert ihren Bezug und wird nach 24
+Stunden weggeräumt — ebenso eine hochgeladene, deren Code nie gespeichert
+wurde. Eine fremde Datei lässt sich nicht an den eigenen Code hängen; sonst
+könnte man sie einem anderen Code entziehen.
+
+Die Adresse einer Datei ist nicht erratbar, aber öffentlich abrufbar —
+dieselbe Überlegung wie beim Slug einer Kurz-URL. Vertrauliche Unterlagen
+gehören nicht hinter einen QR-Code, den man abfotografieren kann.
+
+---
+
+## Feedback
+
+Ein Feedback-Code erzeugt ein Formular mit fünf **Sternen** oder fünf
+**Gesichtern** und wahlweise einem Textfeld. Überschrift, Frage, Beschriftung
+des Textfelds und der Text nach dem Absenden sind frei formulierbar.
+
+Gespeichert werden **nur die Note von 1 bis 5 und der Text**. Kein Name, keine
+IP-Adresse, keine Gerätekennung — das steht auch für die Antwortenden sichtbar
+unter dem Formular.
+
+Gegen Fluten gibt es eine Bremse von 10 Rückmeldungen pro Minute und Absender.
+Die Adresse dient dabei nur als Schlüssel im Arbeitsspeicher und wird nirgends
+gespeichert. Rückmeldungen zu Codes, die gar kein Feedback einsammeln, werden
+abgewiesen.
+
+Die **Auswertung** ist aus der Codeliste erreichbar und zeigt Durchschnitt,
+Verteilung der Noten und alle Kommentare mit Datum (die 200 jüngsten). Sie
+sieht nur, wer den Code auch sehen darf.
+
+---
+
+## Gestaltung und Ausgabe
+
+| Einstellung | Bereich | Voreinstellung |
+| --- | --- | --- |
+| Vordergrundfarbe | frei (Hex oder Farbwähler) | `#0F172A` |
+| Hintergrundfarbe | frei | `#FFFFFF` |
+| Größe | 256–2048 px | 512 px |
+| Fehlerkorrektur | L, M, Q, H | M |
+| Rand | 0–16 Module | 4 |
+
+Fünf Farbvorschläge (Klassisch, Indigo, Waldgrün, Bordeaux, Marine) und ein
+Knopf zum Tauschen von Vorder- und Hintergrund. Reicht der Kontrast nicht,
+warnt die Anwendung — ein hübscher, aber unlesbarer Code nützt niemandem.
+
+Die **Vorschau** wird serverseitig gerendert und aktualisiert sich bei jeder
+Änderung. Herunterladen geht als **PNG** (in der eingestellten Größe) und als
+**SVG** (frei skalierbar). Die Größe betrifft nur das PNG.
+
+---
+
+## Meine Codes
+
+Zeigt alle dynamischen Codes — statische erscheinen nicht, weil sie nicht
+gespeichert werden.
+
+- **Zwei Ansichten:** Liste (Voreinstellung, eine Zeile je Code) und Karten
+  mit großer Vorschau. Die Wahl merkt sich der Browser.
+- **Suche** über Name, Ziel, Kurz-URL und Typ.
+- **Sortierung** nach neueste, älteste, Name oder Scan-Anzahl.
+- **Gruppenfilter**, sobald Codes in mehr als einer Gruppe liegen; dann gibt
+  es auch eine Gruppenspalte.
+- **Kurz-URL kopieren** mit einem Klick.
+- **Ziel ändern** — die Kurz-URL und damit der gedruckte Code bleiben gültig.
+- **Löschen** mit Rückfrage, die den betroffenen Code nennt.
+- **PNG und SVG** erneut herunterladen.
+- Bei Feedback-Codes ein Weg zur **Auswertung**.
+
+Auf schmalen Bildschirmen weichen die hinteren Spalten; die Kurz-URL rückt
+unter den Namen, Bearbeiten und Löschen bleiben erreichbar.
+
+---
+
+## Anmeldung, Gruppen und Rollen
+
+Die Anmeldung ist **abschaltbar** (`AUTH_ENABLED`). Bewusst über die
+Konfiguration und nicht über die Oberfläche: So kann man sich nicht
+aussperren.
+
+**Ohne Anmeldung** darf jeder, der die Anwendung erreicht, alles. Für den
+Einzelplatz- oder LAN-Betrieb ist das gewollt; ins offene Internet gehört die
+Anwendung dann nicht.
+
+**Mit Anmeldung** gibt es vier Ebenen:
+
+1. **Benutzer** — meldet sich mit E-Mail und Passwort an.
+2. **Gruppe** — bündelt Codes und die Menschen, die damit arbeiten. Jeder Code
+   gehört genau einer Gruppe.
+3. **Rolle je Gruppe:**
+   | Rolle | Darf |
+   | --- | --- |
+   | Betrachter | sehen und herunterladen |
+   | Bearbeiter | zusätzlich anlegen, ändern, löschen |
+   | Administrator | zusätzlich Mitglieder und Rollen der Gruppe verwalten |
+4. **Administrator der Installation** — legt Gruppen, Benutzer und Domains
+   überhaupt erst an.
+
+Zur Umsetzung:
+
+- Passwörter werden mit **scrypt** gehasht (Node-Bordmittel, kein natives
+  Modul). Mindestlänge 10 Zeichen.
+- Nach **8 Fehlversuchen** ist das Konto 15 Minuten gesperrt.
+- Sitzungen liegen in der **Datenbank**, nicht in einem signierten Cookie —
+  so lassen sie sich serverseitig beenden, etwa beim Deaktivieren eines
+  Benutzers. Im Cookie steht ein Zufallstoken, in der Datenbank nur dessen
+  SHA-256. Laufzeit 30 Tage.
+- Der Cookie ist `httpOnly` und `SameSite=Lax`; `Secure` wird gesetzt, sobald
+  `BASE_URL` mit `https://` beginnt.
+- Alle Berechtigungsregeln stehen an **einer** Stelle
+  (`src/lib/auth/policy.ts`) — nicht verteilt über die Oberfläche.
+- Im **Konto** sieht man die eigenen Gruppen und Rollen, ändert sein Passwort
+  und meldet sich ab.
+
+---
+
+## Single Sign-on
+
+Die Anmeldung lässt sich an einen **OpenID-Connect-Anbieter** abgeben —
+getestet mit Authentik, ebenso nutzbar mit Keycloak, Zitadel oder Entra ID.
+Alles Nötige kommt aus dem Discovery-Dokument des Anbieters.
+
+- Anmeldefluss mit **PKCE** (S256), `state` und `nonce`.
+- Das ID-Token wird gegen den **JWKS** des Anbieters geprüft: Signatur,
+  Aussteller, Empfänger, Ablauf und Nonce.
+- Wiedererkannt wird jemand an der **Kennung des Anbieters** (`sub`), nicht an
+  der E-Mail-Adresse — Adressen ändern sich.
+- Ein bestehendes Konto mit derselben Adresse wird **verknüpft statt
+  verdoppelt**, aber nur bei **bestätigter** Adresse. Sonst könnte sich beim
+  Anbieter jemand eine fremde Adresse eintragen und damit ein hiesiges Konto
+  übernehmen.
+- Neue Konten bekommen die Rolle aus `OIDC_DEFAULT_ROLE` in der
+  Standardgruppe.
+- `OIDC_ADMIN_GROUP` hängt die Instanz-Administration an eine Gruppe beim
+  Anbieter; sie wird dann bei jeder Anmeldung neu entschieden.
+- `OIDC_ONLY=true` blendet die Passwort-Anmeldung aus.
+
+**Bewusst nicht übernommen** werden Gruppen und Rollen. Die Gruppen im
+Verzeichnis bedeuten etwas anderes als die hier: dort geht es um Organisation
+und Zugang, hier darum, wer welche Codes sehen und ändern darf. Eine
+automatische Übersetzung wäre eine Quelle stiller Überraschungen.
+
+→ Einrichtung Feld für Feld: [authentik.md](authentik.md)
+
+---
+
+## Mehrere Domains
+
+Kurz-URLs können unter verschiedenen Adressen laufen — etwa je Kunde eine.
+Domains werden in der Verwaltung angelegt und Gruppen zugeteilt.
+
+- Die Weiterleitung erkennt am `Host`-Header, welche Domain gemeint ist, und
+  **prüft ihn gegen die registrierten Domains**. Ein unbekannter Hostname
+  endet mit 404 — über einen gefälschten Header lässt sich also keine fremde
+  Domain ansprechen.
+- Der **Slug ist je Domain eindeutig**, nicht global.
+- Eine Domain kann **mehreren Gruppen** dienen. Die Codes bleiben trotzdem
+  strikt nach Gruppe getrennt.
+- Je Gruppe lässt sich eine Domain als Voreinstellung festlegen.
+- Eine Domain lässt sich abschalten, ohne sie zu löschen; ihre Codes
+  antworten dann mit einer Erklärung.
+
+Damit das funktioniert, muss der Reverse Proxy jede dieser Domains auf diese
+Anwendung leiten.
+
+---
+
+## Verwaltung
+
+| Bereich | Was dort geht |
+| --- | --- |
+| **QR-Typen** | einzelne Typen ausblenden |
+| **Benutzer** | anlegen, deaktivieren, Passwort setzen, Instanz-Admin vergeben |
+| **Gruppen** | anlegen, umbenennen, Mitglieder und deren Rollen pflegen |
+| **Domains** | anlegen, Gruppen zuteilen, abschalten |
+
+Zu den **QR-Typen**: 15 Kacheln sind viel, wenn ihr nur drei davon braucht.
+Ein abgeschalteter Typ verschwindet aus der Auswahl; **bereits erstellte Codes
+funktionieren unverändert weiter** — sie leiten weiter, zählen Scans und
+lassen sich bearbeiten. Nur neue lassen sich nicht mehr anlegen. Ohne Eintrag
+in der Datenbank gilt ein Typ als freigegeben, damit eine frische Installation
+alles zeigt und Typen aus späteren Versionen automatisch erscheinen.
+
+---
+
+## Betrieb
+
+- **Zwei Container:** die Next.js-Anwendung und PostgreSQL. Kein Reverse Proxy
+  nötig — Port 3000 wird direkt veröffentlicht. Ein Proxy davor geht
+  selbstverständlich auch.
+- **Migrationen laufen beim Start** von selbst. Es gibt keinen Extraschritt
+  nach `docker compose up -d --build`.
+- Die Datenbank hat einen **Healthcheck**; die Anwendung startet erst, wenn
+  sie wirklich Anfragen annimmt.
+- **Ein Volumen** für die Datenbank — dort liegen auch die hochgeladenen
+  Dateien.
+- Die Konfiguration steht vollständig in einer **`.env`**; eine `.env.example`
+  ist mitgeliefert und dokumentiert jeden Wert.
+- Die Anwendung liest die Werte **zur Laufzeit**, nicht beim Bauen — eine
+  geänderte `BASE_URL` braucht keinen neuen Build.
+- Die Oberfläche ist durchgängig **deutsch**, hell, responsiv und ohne
+  externe Schriften oder Skripte.
+
+---
+
+## Schnittstelle
+
+Alles, was die Oberfläche tut, geht auch über HTTP:
+
+| Route | Zweck |
+| --- | --- |
+| `POST /api/qr/preview` | Vorschau erzeugen (statisch oder dynamisch) |
+| `POST /api/qr/download` | PNG oder SVG erzeugen |
+| `GET/POST /api/codes` | dynamische Codes auflisten und anlegen |
+| `GET/PATCH/DELETE /api/codes/{id}` | einzelnen Code lesen, ändern, löschen |
+| `GET /api/codes/{id}/qr` | Bild eines gespeicherten Codes |
+| `POST /api/uploads` | Datei hochladen (`GET` nennt die Größengrenze) |
+| `GET /api/uploads/{id}` | Datei ausliefern (`?download` erzwingt Speichern) |
+| `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 |
+| `GET /r/{slug}` | Weiterleitung eines dynamischen Codes |
+| `GET /s/{slug}` | öffentliche Landingpage |
+
+Fehler kommen als `{ "error": "…" }` mit einer deutschen Meldung, die sich
+unverändert anzeigen lässt.
+
+---
+
+## Was die Anwendung bewusst nicht tut
+
+- **Kein Logo im QR-Code.** Wer es braucht, nimmt das SVG, setzt es im
+  Layoutprogramm ein, wählt Fehlerkorrektur H und testet mit mehreren Geräten.
+- **Keine Statistik über die Zeit.** Der Zähler weiß, wie oft und wann zuletzt
+  — kein Verlauf, keine Herkunft, keine Geräte. Das wäre eine eigene Tabelle
+  und die Frage, wie lange man so etwas aufbewahrt.
+- **Keine Übernahme von Gruppen aus dem Verzeichnis.** Siehe oben.
+- **Keine Stapelverarbeitung.** Codes entstehen einzeln.
+- **Keine Mehrsprachigkeit.** Die Oberfläche ist deutsch.
+- **Kein Papierkorb.** Ein gelöschter Code ist weg, samt seiner Dateien und
+  Rückmeldungen.
+
+Was davon als Nächstes sinnvoll wäre, steht in der [Roadmap](roadmap.md).

docs/roadmap.md

@@ -0,0 +1,210 @@
+# Roadmap
+
+Was gebaut ist, was als Nächstes kommt und was danach denkbar wäre. Die
+Aufwände sind grobe Einschätzungen, keine Zusagen.
+
+---
+
+## Gebaut
+
+### Version 1 — Grundgerüst (13.08.2026)
+
+- Next.js-Anwendung und PostgreSQL als Docker-Compose-Stack, ohne Reverse
+  Proxy, Migrationen beim Start
+- QR-Typ-Registry als Dispatch-Tabelle — ein neuer Typ ist ein Modul plus ein
+  Formular, ohne Eingriff in den übrigen Code
+- Typ **Website**, statisch und dynamisch, mit Kurz-URL, 302-Weiterleitung und
+  Scan-Zähler
+- Gestaltung: Farben mit Kontrastwarnung, Größe, Fehlerkorrektur, Rand
+- Download als PNG und SVG, serverseitig gerendert
+- „Meine Codes“ mit Ziel ändern und Löschen
+- Deutsche Oberfläche, deutsche Fehlermeldungen, Validierung mit Zod
+- Update-Skript für Linux/macOS und Windows
+
+### Typen einzeln freigeben (14.08.2026)
+
+Ausblenden nicht gebrauchter Typen in der Verwaltung. Bereits erstellte Codes
+eines abgeschalteten Typs funktionieren weiter.
+
+### Phase A — acht weitere Typen (14.08.2026)
+
+vCard, App-Link, WhatsApp, E-Mail, SMS, Standort, Zahlung (GiroCode und
+Zahlungslink), WLAN.
+
+### Phase B1 — Anmeldung, Gruppen, Rollen (14.08.2026)
+
+Abschaltbare Anmeldung, Benutzerverwaltung, Gruppen mit den Rollen
+Administrator, Bearbeiter und Betrachter, Sitzungen in der Datenbank,
+scrypt-Passwörter, Sperre nach Fehlversuchen.
+
+### Phase B2 — mehrere Domains (14.08.2026)
+
+Domains für Kurz-URLs, den Gruppen zugeteilt. Slug je Domain eindeutig,
+Host-Header gegen die registrierten Domains geprüft.
+
+### Listenansicht (14.08.2026)
+
+„Meine Codes“ als Liste mit Suche, Sortierung und Gruppenfilter — gedacht für
+viele Projekte nebeneinander. Karten bleiben als zweite Ansicht.
+
+### Phase C — die letzten sechs Typen (14.08.2026)
+
+Mehrere Links, Social Media, Video, PDF, Bild, Feedback. Dazu:
+
+- Landingpages als eigene Gattung (`/s/{slug}`), ohne App-Navigation
+- Datei-Upload mit Inhaltsprüfung, Größengrenze und Aufräumen
+- Feedback mit anonymer Erhebung und Auswertung
+
+Damit sind **alle 15 vorgesehenen Typen** gebaut.
+
+### Single Sign-on (15.08.2026)
+
+Anmeldung über Authentik und andere OIDC-Anbieter, mit PKCE und geprüftem
+ID-Token.
+
+### Dokumentation (15.08.2026)
+
+Bedienungsanleitung mit Bildern, Authentik-Anleitung, Funktionsübersicht.
+Die Bilder erzeugt ein Skript, damit sie nicht veralten.
+
+---
+
+## Als Nächstes
+
+In dieser Reihenfolge. Die Einschätzungen sind grobe Hausnummern für eine
+Person, die den Code kennt.
+
+### 1. QR-Typen je Gruppe freigeben · mittel
+
+Heute gilt die Freigabe eines Typs für die ganze Installation: Was
+abgeschaltet ist, ist für alle weg. Bei mehreren Gruppen ist das zu grob — die
+Marketingabteilung braucht Social Media, die Werkstatt nur Website und PDF.
+
+Geplant: Die Freigabe bekommt eine zweite Dimension. Es bleibt eine globale
+Einstellung als Grundlage, und je Gruppe lässt sich davon abweichen. Wer in
+mehreren Gruppen ist, sieht auf der Startseite die Vereinigung; beim Anlegen
+entscheidet die gewählte Gruppe.
+
+Zu klären ist der Fall, in dem ein Typ global aus, in einer Gruppe aber an
+ist — entweder die Gruppe darf das überstimmen, oder die globale Abschaltung
+gewinnt immer. Die zweite Lesart ist die weniger überraschende und
+wahrscheinlich die richtige.
+
+Berührt: `QrTypeSetting` (zusammengesetzter Schlüssel aus Typ und Gruppe),
+`src/lib/qr/availability.ts`, die Startseite und die Typ-Verwaltung, die dann
+eine Gruppenauswahl bekommt.
+
+### 2. Statistik über die Zeit · mittel
+
+Der Zähler weiß heute nur, wie oft und wann zuletzt. Gebraucht wird der
+Verlauf: Wie lief die Kampagne in den ersten Tagen, wann ist Ruhe
+eingekehrt?
+
+Geplant: eine Tabelle mit einer Zeile je Code und Tag, dazu ein Diagramm in
+der Codeansicht und die Zahlen der letzten 7, 30 und 365 Tage.
+
+Bewusst **ohne** Herkunft, Gerät oder Verweisseite. Ein reiner Tageszähler
+sagt nichts über einzelne Menschen aus und braucht deshalb weder Einwilligung
+noch Löschfristen. Wer mehr will, muss sich mit beidem befassen — das ist eine
+andere Entscheidung als „ein Diagramm wäre schön“.
+
+### 3. Papierkorb statt Löschen · klein
+
+Heute ist ein gedruckter Code nach einem Fehlklick unwiederbringlich tot,
+samt seiner Dateien und Rückmeldungen.
+
+Geplant: Gelöschte Codes 30 Tage aufheben und dann endgültig entfernen. In
+„Meine Codes“ ein Reiter „Papierkorb“ mit Wiederherstellen. Solange ein Code
+im Papierkorb liegt, bleibt sein Slug belegt — sonst könnte ihn ein neuer Code
+bekommen und die gedruckten Codes zeigten plötzlich woandershin.
+
+### 4. Logo im QR-Code · mittel
+
+Ein kleines Bild in die Mitte setzen, wie man es von Firmen-Codes kennt.
+
+Geplant: Upload eines Logos je Code, mittig eingesetzt, mit erzwungener
+Fehlerkorrektur **H** und einer Warnung, sobald zu viel Fläche verdeckt wird.
+
+Das ist der Punkt mit dem größten Risiko, etwas Kaputtes auszuliefern: Ein
+Code, der auf dem eigenen Handy noch funktioniert, kann bei anderen
+Scanner-Apps durchfallen. Gehört deshalb nicht ohne eine ehrliche Prüfung mit
+mehreren Geräten und Apps ausgeliefert — und mit einer klaren Obergrenze für
+die verdeckte Fläche.
+
+### 5. Ablaufdatum und Zeitsteuerung · mittel
+
+Ein Code, der ab einem Datum woandershin führt oder abläuft — für
+Veranstaltungen, Aktionen und Aushänge mit Verfallsdatum.
+
+Geplant, in zwei Stufen:
+
+- **Ablauf:** ab einem Zeitpunkt zeigt der Code eine erklärende Seite statt
+  des Ziels. Wichtig ist der Text — wer davorsteht, soll erfahren, dass die
+  Aktion vorbei ist, nicht dass „etwas nicht gefunden“ wurde.
+- **Zeitplan:** mehrere Ziele mit Gültigkeitsfenstern, damit derselbe
+  Aufsteller montags auf die Mittagskarte und samstags auf die Veranstaltung
+  zeigt.
+
+Zu bedenken: Zeitzonen und die Frage, was beim Bearbeiten mit vergangenen
+Fenstern geschieht.
+
+---
+
+## Später denkbar
+
+**Das Fenster der Ersteinrichtung schließen** · klein
+Heute wird das erste Konto ohne jede Legitimation angelegt und ist gleich
+Administrator. Wer die Anwendung öffentlich stellt, bevor er sein Konto
+angelegt hat, kann sie an einen Fremden verlieren. Vorschlag: ein einmaliges
+Token, das beim ersten Start ins Protokoll geschrieben wird und für die
+Ersteinrichtung nötig ist. Klein im Aufwand — und das Erste, was zu tun ist,
+falls die Anwendung je aus dem eigenen Netz herausgeht. Siehe
+[sicherheit.md](sicherheit.md).
+
+**Codes exportieren** · klein
+Eine CSV aller Codes einer Gruppe mit Name, Kurz-URL, Ziel und Scans — für
+die Übergabe an eine Druckerei oder die Ablage.
+
+**Codes duplizieren** · klein
+„Wie dieser, aber mit anderem Ziel“ — bei vielen ähnlichen Projekten spart
+das jedes Mal ein paar Minuten.
+
+**Stapelverarbeitung** · mittel
+Eine CSV hochladen und daraus 200 Codes erzeugen, als ZIP zurück. Sinnvoll,
+sobald jedes Produkt oder jeder Tisch einen eigenen Code bekommt.
+
+**Gruppen aus dem Verzeichnis übernehmen** · mittel
+Die OIDC-Anbindung übernimmt heute bewusst nur die Identität. Eine Zuordnung
+von Verzeichnisgruppen zu Gruppen dieser Anwendung ist möglich, braucht aber
+eine klare Regel dafür, was mit von Hand vergebenen Rollen geschieht — sonst
+verliert jemand beim nächsten Anmelden stillschweigend seine Rechte.
+
+**Passwortgeschützte Landingpages** · mittel
+Für Unterlagen, die nicht jeder sehen soll, der den Aushang fotografiert.
+Heute ist die Empfehlung klar: Vertrauliches gehört nicht hinter einen
+offenen QR-Code.
+
+**Dateien außerhalb der Datenbank** · mittel
+Heute liegen Uploads in PostgreSQL, damit es bei einem Volumen bleibt. Wer
+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ß
+Logo, Farben und Schrift je Gruppe, damit die Seite nach der eigenen Firma
+aussieht. Technisch überschaubar, gestalterisch eine eigene Aufgabe — und es
+braucht Grenzen, damit nichts Unlesbares entsteht.
+
+**Mehrsprachige Oberfläche** · groß
+Die Anwendung ist durchgehend deutsch, auch in den Fehlermeldungen und den
+Landingpages. Eine zweite Sprache berührt jede Datei.
+
+---
+
+## Wie ein neuer Typ dazukommt
+
+Falls doch noch einer fehlt: Er besteht aus einem Modul in
+`src/lib/qr/types/`, einer Formular-Komponente, je einem Registry-Eintrag und
+— wenn er eine eigene Seite braucht — einer Landingpage. Am übrigen Code
+ändert sich nichts. Näheres im [README](../README.md), Abschnitt „Einen
+weiteren Typ ergänzen“.

docs/screenshots.mjs

@@ -0,0 +1,270 @@
+/**
+ * Erzeugt die Bildschirmfotos für docs/anleitung.md.
+ *
+ * Warum als Skript und nicht von Hand: Bilder in einer Anleitung veralten
+ * beim ersten Umbau. So lassen sie sich in einer Minute neu erzeugen.
+ *
+ * Voraussetzungen:
+ *   - eine **leere** Instanz (die Beispieldaten würden sonst mit fremden
+ *     Codes im Bild landen), erreichbar unter BASE
+ *   - AUTH_ENABLED=true, damit Kopfzeile und Verwaltung so aussehen wie im
+ *     Regelbetrieb
+ *   - Playwright: npm i -D playwright && npx playwright install chromium
+ *
+ * Aufruf:
+ *   node docs/screenshots.mjs http://localhost:3000
+ */
+import { mkdir } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { chromium } from "playwright";
+
+const BASE = (process.argv[2] ?? "http://localhost:3000").replace(/\/+$/, "");
+const ZIEL = join(dirname(fileURLToPath(import.meta.url)), "bilder");
+await mkdir(ZIEL, { recursive: true });
+
+const ADMIN = { email: "demo@example.com", password: "nur-fuer-die-bilder-1" };
+const DESIGN = { fgColor: "#312E81", bgColor: "#FFFFFF", size: 512, ecLevel: "M", margin: 4 };
+
+/* ------------------------------------------------------------- Anmelden */
+
+let cookie = null;
+
+async function api(pfad, init = {}) {
+  const headers = new Headers(init.headers ?? {});
+  if (init.json !== undefined) headers.set("Content-Type", "application/json");
+  if (cookie) headers.set("Cookie", cookie);
+  const response = await fetch(BASE + pfad, {
+    ...init,
+    headers,
+    body: init.json !== undefined ? JSON.stringify(init.json) : init.body,
+    redirect: "manual",
+  });
+  const gesetzt = response.headers.get("set-cookie");
+  if (gesetzt) cookie = gesetzt.split(";")[0];
+  let body = null;
+  try {
+    body = await response.json();
+  } catch {
+    /* leerer Rumpf */
+  }
+  return { status: response.status, body };
+}
+
+const zustand = await api("/api/auth");
+if (zustand.body?.authEnabled) {
+  const aktion = zustand.body.setupOpen ? "setup" : "login";
+  const angemeldet = await api("/api/auth", {
+    method: "POST",
+    json: { action: aktion, ...ADMIN, name: "Demo Betreiber" },
+  });
+  if (angemeldet.status >= 400) {
+    console.error("Anmeldung fehlgeschlagen:", angemeldet.body);
+    process.exit(1);
+  }
+}
+
+/* --------------------------------------------------------- Beispieldaten */
+
+const angelegt = [];
+
+async function code(type, data, label) {
+  const erstellt = await api("/api/codes", {
+    method: "POST",
+    json: { type, data, design: DESIGN, label },
+  });
+  if (erstellt.status !== 201) {
+    console.error(`Beispielcode „${label}“ ging nicht:`, erstellt.body);
+    process.exit(1);
+  }
+  angelegt.push(erstellt.body.code);
+  return erstellt.body.code;
+}
+
+await code("website", { url: "https://example.com/nordwind" }, "Projekt Nordwind");
+await code("website", { url: "https://example.com/messe" }, "Messestand Halle 3");
+
+const links = await code(
+  "links",
+  {
+    title: "Projekt Nordwind",
+    description: "Alle Unterlagen auf einen Blick.",
+    links: [
+      { label: "Preisliste als PDF", url: "https://example.com/preise.pdf" },
+      { label: "Anfahrt zum Werk", url: "https://example.com/anfahrt" },
+      { label: "Ansprechpartner", url: "https://example.com/kontakt" },
+    ],
+  },
+  "Nordwind Linkseite",
+);
+
+const social = await code(
+  "social",
+  {
+    title: "Bäckerei Sonnenschein",
+    description: "Folge uns für Neues aus der Backstube.",
+    profiles: [
+      { network: "instagram", url: "@sonnenschein" },
+      { network: "facebook", url: "sonnenschein.backt" },
+      { network: "youtube", url: "@sonnenschein" },
+      { network: "website", url: "https://sonnenschein.example.com" },
+    ],
+  },
+  "Sonnenschein Profile",
+);
+
+/* --- Eine Datei zum Vorzeigen: klein, aber gültig ------------------------ */
+
+async function hochladen(kind, name, inhalt, typ) {
+  const form = new FormData();
+  form.set("kind", kind);
+  form.set("file", new File([inhalt], name, { type: typ }));
+  const antwort = await api("/api/uploads", { method: "POST", body: form });
+  if (antwort.status !== 201) {
+    console.error(`Upload „${name}“ ging nicht:`, antwort.body);
+    process.exit(1);
+  }
+  return antwort.body.upload;
+}
+
+const pdfDatei = await hochladen(
+  "pdf",
+  "preisliste-2026.pdf",
+  Buffer.from(
+    "%PDF-1.4\n1 0 obj<</Type/Catalog/Pages 2 0 R>>endobj\n" +
+      "2 0 obj<</Type/Pages/Kids[3 0 R]/Count 1>>endobj\n" +
+      "3 0 obj<</Type/Page/Parent 2 0 R/MediaBox[0 0 595 842]>>endobj\n" +
+      "trailer<</Root 1 0 R>>\n%%EOF\n",
+    "latin1",
+  ),
+  "application/pdf",
+);
+
+const pdf = await code(
+  "pdf",
+  {
+    fileId: pdfDatei.id,
+    filename: pdfDatei.filename,
+    size: pdfDatei.size,
+    title: "Preisliste 2026",
+    description: "Gültig ab Januar, alle Preise ohne Mehrwertsteuer.",
+  },
+  "Preisliste",
+);
+
+const feedback = await code(
+  "feedback",
+  {
+    title: "Wie war dein Besuch?",
+    question: "Wie zufrieden bist du?",
+    scale: "stars",
+    allowComment: true,
+    commentLabel: "Möchtest du uns noch etwas sagen?",
+    thankYou: "Danke, das hilft uns weiter!",
+  },
+  "Gastraum",
+);
+
+// Ein paar Rückmeldungen, damit die Auswertung nicht leer ist.
+for (const [note, text] of [
+  [5, "Sehr freundlich, gerne wieder."],
+  [4, ""],
+  [5, "Der Kuchen war hervorragend."],
+  [3, "Etwas lange Wartezeit."],
+]) {
+  await api("/api/feedback", {
+    method: "POST",
+    json: { codeId: feedback.id, rating: note, comment: text },
+  });
+}
+
+/* ------------------------------------------------------------ Aufnehmen */
+
+const browser = await chromium.launch();
+const desktop = await browser.newContext({
+  viewport: { width: 1200, height: 820 },
+  deviceScaleFactor: 1,
+  locale: "de-DE",
+});
+if (cookie) {
+  const [name, ...rest] = cookie.split("=");
+  await desktop.addCookies([{ name, value: rest.join("="), url: BASE }]);
+}
+
+const handy = await browser.newContext({
+  viewport: { width: 390, height: 800 },
+  deviceScaleFactor: 1,
+  locale: "de-DE",
+});
+
+async function schuss(context, pfad, datei, { ganzeSeite = true, vorher } = {}) {
+  const page = await context.newPage();
+  await page.goto(BASE + pfad, { waitUntil: "networkidle" });
+  if (vorher) await vorher(page);
+  await page.waitForTimeout(300);
+  await page.screenshot({ path: join(ZIEL, datei), fullPage: ganzeSeite });
+  await page.close();
+  console.log("  ✓", datei);
+}
+
+console.log("Bilder werden erzeugt:");
+
+await schuss(desktop, "/", "01-startseite.png");
+
+await schuss(desktop, "/erstellen/website", "02-website-formular.png", {
+  vorher: async (page) => {
+    await page.locator("#website-url").fill("https://example.com/nordwind");
+    await page.waitForTimeout(900);
+  },
+});
+
+await schuss(desktop, "/erstellen/website", "03-dynamisch.png", {
+  vorher: async (page) => {
+    await page.locator("#website-url").fill("https://example.com/nordwind");
+    await page.locator('button[data-mode="dynamic"]').click();
+    await page.waitForTimeout(900);
+  },
+});
+
+await schuss(desktop, "/meine-codes", "04-meine-codes-liste.png");
+
+await schuss(desktop, "/meine-codes", "05-meine-codes-karten.png", {
+  vorher: async (page) => {
+    await page.locator('button[data-view="cards"]').click();
+    await page.waitForTimeout(600);
+  },
+});
+
+await schuss(desktop, "/meine-codes", "06-ziel-bearbeiten.png", {
+  ganzeSeite: false,
+  vorher: async (page) => {
+    await page.locator('button[data-view="list"]').click();
+    await page.waitForTimeout(400);
+    // Bewusst die letzte Zeile: ein Website-Code, dessen Dialog ganz ins Bild passt.
+    await page.locator("tbody tr").last().getByRole("button", { name: /bearbeiten/ }).click();
+    await page.getByRole("heading", { name: "Ziel bearbeiten" }).waitFor();
+  },
+});
+
+await schuss(handy, `/s/${links.slug}`, "07-landing-links.png");
+await schuss(handy, `/s/${social.slug}`, "08-landing-social.png");
+await schuss(handy, `/s/${pdf.slug}`, "09-landing-pdf.png");
+await schuss(handy, `/s/${feedback.slug}`, "09b-landing-feedback.png");
+await schuss(desktop, `/meine-codes/${feedback.id}/feedback`, "10-feedback-auswertung.png");
+
+await schuss(desktop, "/verwaltung", "11-verwaltung.png");
+await schuss(desktop, "/verwaltung/typen", "12-verwaltung-typen.png");
+await schuss(desktop, "/verwaltung/gruppen", "13-verwaltung-gruppen.png");
+await schuss(desktop, "/verwaltung/domains", "14-verwaltung-domains.png");
+await schuss(desktop, "/konto", "15-konto.png");
+
+await browser.close();
+
+/* ------------------------------------------------------------ Aufräumen */
+
+for (const eintrag of angelegt) {
+  await api(`/api/codes/${eintrag.id}`, { method: "DELETE" });
+}
+
+console.log(`\nFertig — ${angelegt.length} Beispielcodes wieder entfernt.`);
+console.log(`Die Bilder liegen in ${ZIEL}.`);

docs/sicherheit.md

@@ -0,0 +1,285 @@
+# Anmeldung und Sitzungen — Durchsicht nach OWASP
+
+Durchsicht der Anmeldung, der Sitzungsverwaltung und der Berechtigungen gegen
+die einschlägigen OWASP-Merkblätter. Stand: 15.08.2026.
+
+Geprüft gegen:
+
+- [Password Storage Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html)
+- [Session Management Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html)
+- [Cross-Site Request Forgery Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
+- [Authentication Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html)
+
+> **Wozu das gehört.** Die Anwendung ist ein selbst gehostetes Werkzeug für
+> ein Team, nicht ein öffentlicher Dienst mit Zehntausenden Konten. Wo eine
+> Empfehlung erkennbar auf den zweiten Fall gemünzt ist, steht unten, warum
+> hier etwas anderes gilt — und wie man es strenger einstellt.
+
+---
+
+## Was behoben wurde
+
+### 1. scrypt lag unter der empfohlenen Stärke
+
+**Befund:** Die Passwörter wurden mit scrypt bei `N = 2^15` gehasht. Das
+Merkblatt nennt `N = 2^17 (128 MiB), r = 8, p = 1`.
+
+**Behoben:** `N = 2^17`. Alte Hashes bleiben gültig — die Parameter stehen im
+Hash. Beim nächsten erfolgreichen Anmelden wird das Passwort still neu
+gehasht (`needsRehash()`); das ist der einzige Moment, in dem das
+Klartextpasswort vorliegt.
+
+**Nebenwirkung:** Ein Anmeldevorgang kostet jetzt spürbar mehr Rechenzeit und
+rund 128 MiB Arbeitsspeicher. Genau das ist der Zweck.
+
+### 2. Passwörter hatten keine Obergrenze
+
+**Befund:** Die Eingabe war nach oben offen. Ein „Passwort“ von mehreren
+Megabyte hätte scrypt beschäftigt — an einem Endpunkt, der **ohne Anmeldung**
+erreichbar ist. Ein Denial-of-Service mit wenigen Anfragen.
+
+**Behoben:** 128 Zeichen, geprüft vor dem Hashen, in allen drei Formularen
+(Anmelden, Ersteinrichtung, Passwortwechsel) sowie in der Benutzerverwaltung.
+
+### 3. Kein CSRF-Schutz außer `SameSite`
+
+**Befund:** Der Sitzungs-Cookie war `SameSite=Lax`, mehr nicht. Das Merkblatt
+sagt ausdrücklich, dass das allein nicht genügt: `SameSite` wirkt auf der
+Ebene der registrierbaren Domain, nicht des Ursprungs. Besonders heikel war
+`POST /api/uploads` — es nimmt `multipart/form-data` entgegen, und das kann
+ein Formular auf einer fremden Seite abschicken.
+
+**Behoben:** Jeder schreibende Zugriff (POST, PUT, PATCH, DELETE) wird gegen
+den `Origin`-Header geprüft, verglichen mit dem Host der Anfrage — nicht mit
+`BASE_URL`, weil die Anwendung absichtlich unter mehreren Domains läuft.
+Fehlt der Header ganz, wird durchgelassen: Browser setzen ihn bei fremden
+Zugriffen immer, Skripte und Kommandozeilenwerkzeuge oft gar nicht.
+
+### 4. Keine Schutzheader
+
+**Befund:** Die Anwendung setzte keinen einzigen: kein `X-Frame-Options`,
+keine `Content-Security-Policy`, kein `Referrer-Policy`,
+kein `X-Content-Type-Options`. Die Verwaltung ließ sich also in eine fremde
+Seite einbetten und per Clickjacking fernsteuern. Dazu verriet
+`X-Powered-By: Next.js`, wonach jemand Schwachstellen suchen müsste.
+
+**Behoben** in `src/proxy.ts`:
+
+| Header | Wert |
+| --- | --- |
+| `Content-Security-Policy` | `frame-ancestors 'none'` |
+| `X-Frame-Options` | `DENY` |
+| `X-Content-Type-Options` | `nosniff` |
+| `Referrer-Policy` | `strict-origin-when-cross-origin` |
+| `Permissions-Policy` | Kamera, Mikrofon, Standort, Bezahlen aus |
+
+`X-Powered-By` ist abgeschaltet.
+
+**Bewusst nicht gesetzt** ist eine vollständige `Content-Security-Policy` für
+Skripte. Next.js bringt eingebettete Skripte mit; dafür bräuchte es Nonces
+durch die ganze Anwendung. Eine Policy mit `unsafe-inline` sähe nach Schutz
+aus, ohne einer zu sein. Siehe [Offen](#offen).
+
+### 5. Sitzungen ohne absolute Obergrenze
+
+**Befund:** Die Sitzung lief 30 Tage nach der letzten Nutzung ab — und wurde
+bei jeder Nutzung verlängert. Eine einmal entwendete Sitzung hätte durch
+regelmäßige Nutzung **unbegrenzt** weitergelebt.
+
+**Behoben:** Zusätzlich eine harte Grenze ab dem Anmelden. Über die
+Verlängerung hinaus wird nie verlängert.
+
+| Einstellung | Voreinstellung | Empfehlung des Merkblatts |
+| --- | --- | --- |
+| `SESSION_IDLE_DAYS` | 30 Tage | 15–30 **Minuten** bei geringem Risiko |
+| `SESSION_MAX_DAYS` | 90 Tage | 4–8 **Stunden** absolut |
+
+Die Voreinstellungen liegen bewusst weit darüber. Die Zahlen des Merkblatts
+zielen auf öffentlich erreichbare Anwendungen; bei einem internen Werkzeug,
+an dem man täglich arbeitet, wäre eine halbstündige Abmeldung eine Zumutung
+und würde nur dazu führen, dass jemand den Browser dauerhaft offen lässt. Wer
+strenger fahren will, setzt beide Werte in der `.env` — dafür sind sie
+einstellbar.
+
+### 6. `Secure` fehlte hinter einem TLS-Proxy
+
+**Befund:** Das `Secure`-Flag am Cookie hing allein an `BASE_URL`. Wer die
+Anwendung hinter einem Proxy mit HTTPS betreibt, aber `BASE_URL` auf `http`
+stehen lässt, bekam den Cookie ohne `Secure` — er wäre über eine
+unverschlüsselte Verbindung mitgegangen.
+
+**Behoben:** Zusätzlich wird `X-Forwarded-Proto` ausgewertet.
+
+### 7. Die Anmeldung verriet, welche Konten es gibt
+
+**Befund:** Bei falschem Passwort kam immer dieselbe Meldung — richtig. Aber
+drei Fälle fielen aus der Reihe und bestätigten damit die Existenz eines
+Kontos:
+
+- ein deaktiviertes Konto („Dieses Konto ist deaktiviert“),
+- ein Konto aus dem Verzeichnis („meldet sich über den externen Anbieter an“),
+- ein gesperrtes Konto (429 mit Wartezeit).
+
+**Behoben** für die ersten beiden:
+
+- Die Prüfung auf „deaktiviert“ steht jetzt **nach** der Passwortprüfung. Wer
+  bis dahin kommt, hat das Konto nachweislich in der Hand — ihm darf man
+  sagen, warum es nicht weitergeht.
+- Verzeichnis-Konten bekommen die allgemeine Meldung. Der Knopf für den
+  Anbieter steht daneben.
+
+**Bewusst offen gelassen:** die Sperrmeldung. Sie muss vor der Passwortprüfung
+kommen — das ist ihr Zweck. Wer sie versteckt, lässt einen rechtmäßigen
+Benutzer 15 Minuten im Dunkeln stehen. Bei einem Werkzeug, in dem die
+E-Mail-Adressen der Kollegen ohnehin bekannt sind, wiegt die Verständlichkeit
+schwerer als ein Hinweis, den ein Angreifer auch anders bekommt.
+
+### 8. Kontosperre schützte nicht gegen breites Durchprobieren
+
+**Befund:** Nach 8 Fehlversuchen wurde ein **Konto** 15 Minuten gesperrt. Wer
+stattdessen ein Passwort gegen viele Konten probiert, löst diese Sperre nie
+aus.
+
+**Behoben:** zusätzlich eine Bremse je Absender — 20 Versuche in 5 Minuten,
+danach 429. Im Arbeitsspeicher und damit pro Container; die Adresse dient nur
+als Schlüssel und wird nirgends gespeichert.
+
+### 9. Ersteinrichtung mit Wettlauf
+
+**Befund:** Zwischen „gibt es schon einen Benutzer?“ und dem Anlegen lag eine
+Lücke. Zwei gleichzeitige Aufrufe auf einer frischen Installation hätten
+**zwei** Administratoren erzeugt — einer davon ungebeten.
+
+**Behoben:** Prüfung und Anlegen laufen in einer serialisierbaren
+Transaktion. Ein Test schickt drei Anfragen gleichzeitig; genau eine kommt
+durch.
+
+### 10. Abgelaufene Sitzungen blieben liegen
+
+**Befund:** `pruneExpiredSessions()` existierte, wurde aber nirgends
+aufgerufen. Kein Sicherheitsproblem — abgelaufene Sitzungen werden bei der
+Nutzung abgewiesen —, aber die Tabelle wuchs unbegrenzt.
+
+**Behoben:** Beim Nachführen einer Sitzung (höchstens stündlich je Sitzung)
+wird beiläufig aufgeräumt.
+
+---
+
+## Was schon vorher stimmte
+
+| Anforderung | Umsetzung |
+| --- | --- |
+| Sitzungs-Token aus einem CSPRNG, ≥ 128 Bit | 32 Byte aus `randomBytes` |
+| Token nicht im Klartext gespeichert | in der Datenbank nur der SHA-256 |
+| `HttpOnly` | gesetzt |
+| `SameSite` | `Lax` |
+| Pfad so eng wie möglich | `/` — die Anwendung liegt an der Wurzel |
+| Neue Sitzung beim Anmelden | immer ein frisches Token; keine Sitzungsfixierung möglich |
+| Alle Sitzungen beenden beim Passwortwechsel | ja, danach sofort eine neue |
+| Sitzung entwerten beim Deaktivieren | bei jedem Zugriff wird `isActive` geprüft |
+| Passwortvergleich in konstanter Zeit | `timingSafeEqual` |
+| Gleiche Antwortzeit für unbekannte Adressen | Vergleich gegen einen Attrappen-Hash mit denselben Parametern |
+| Berechtigungen an einer Stelle | `src/lib/auth/policy.ts`; jede Route fragt sie |
+| Serverseitige Prüfung, nicht nur ausgeblendete Knöpfe | ja |
+
+Zur **Anmeldung über OIDC** (siehe [authentik.md](authentik.md)): PKCE mit
+S256, `state` gegen CSRF, `nonce` gegen wiedereingereichte Token, Prüfung des
+ID-Tokens gegen den JWKS des Anbieters samt Aussteller, Empfänger und Ablauf.
+Die Rückkehradresse ist fest verdrahtet — es gibt keinen Parameter, über den
+sich eine offene Weiterleitung bauen ließe. Verknüpft wird ein bestehendes
+Konto nur bei **bestätigter** E-Mail-Adresse.
+
+---
+
+## Offen
+
+Bewusst nicht umgesetzt, mit Begründung.
+
+**E-Mail-Verifizierung.** Es gibt keine — und sie würde derzeit auch nichts
+bringen. Die Anwendung kennt **keine Selbstregistrierung**: Es gibt nur
+`login`, `setup`, `logout` und `change-password`. Konten legt ein
+Administrator an, der die Adresse selbst einträgt. Eine Bestätigungsmail
+würde also belegen, dass eine Adresse existiert, aber niemanden hereinlassen
+und niemanden fernhalten.
+
+Dazu kommt: Es gibt **kein „Passwort vergessen" per E-Mail**. Zurücksetzen
+kann nur ein Administrator unter Verwaltung → Benutzer. Damit ist die
+unbestätigte Adresse auch kein Übernahmeweg — bei einem Reset per Mail wäre
+sie einer. Die Adresse ist hier schlicht ein Anmeldename.
+
+Nötig würde die Verifizierung in dem Moment, in dem sich Leute selbst
+registrieren dürfen. Dann allerdings zwingend, zusammen mit einem
+SMTP-Versand, Ablauffristen für die Bestätigungslinks und einem Weg für
+nicht zugestellte Mails.
+
+Zwei Stellen bleiben davon ohnehin unberührt, weil dort nicht der
+Administrator die Adresse einträgt:
+
+- **Die Ersteinrichtung.** Wer zuerst kommt, wird Administrator. Dagegen hilft
+  keine Verifizierung, sondern nur, das Fenster zu schließen — siehe unten.
+- **Die Anmeldung über einen Anbieter.** Dort bürgt der Anbieter für die
+  Adresse, und genau das prüft die Anwendung: Ein bestehendes Konto wird nur
+  bei `email_verified` verknüpft.
+
+**Das Zeitfenster der Ersteinrichtung.** Solange es keinen Benutzer gibt und
+die Anmeldung eingeschaltet ist, wird das erste Konto ohne jede Legitimation
+angelegt — und ist Administrator der Installation. Steht die Anwendung schon
+öffentlich, bevor der Betreiber sein Konto anlegt, kann ein Fremder sie
+übernehmen.
+
+Heute ist das eine Frage der Reihenfolge: erst starten, sofort das erste
+Konto anlegen, dann erreichbar machen. Sauberer wäre ein einmaliges Token,
+das beim ersten Start ins Protokoll geschrieben wird und für die
+Ersteinrichtung nötig ist. Steht als Vorschlag in der
+[Roadmap](roadmap.md).
+
+**Vollständige Content-Security-Policy für Skripte.** Bräuchte Nonces durch
+die ganze Anwendung, weil Next.js eingebettete Skripte ausliefert. Der Nutzen
+wäre echt — es ist die zweite Verteidigungslinie gegen XSS —, aber halb
+umgesetzt ist sie wertlos. Gehört als eigenes Vorhaben auf die
+[Roadmap](roadmap.md), nicht nebenbei erledigt.
+
+**`__Host-` als Präfix des Cookie-Namens.** Das Merkblatt nennt es die
+stärkste Variante. Es setzt `Secure` voraus — der Name müsste sich also je
+nach Betriebsart ändern, und beim Umstellen von HTTP auf HTTPS würden alle
+Sitzungen still ungültig. Für eine Anwendung, die auch im LAN über HTTP läuft,
+ist das mehr Verwirrung als Gewinn. Unter reinem HTTPS wäre es eine sinnvolle
+Ergänzung.
+
+**Abgleich gegen bekannt gewordene Passwörter.** Eine Prüfung gegen die
+Have-I-Been-Pwned-Liste (k-Anonymität, ohne das Passwort zu übertragen) wäre
+der wirksamste einzelne Schritt für die Passwortqualität. Sie setzt aber
+voraus, dass die Anwendung ins Internet telefonieren darf — bei einer selbst
+gehosteten Installation nicht selbstverständlich. Sinnvoll als abschaltbare
+Option.
+
+**Zweiter Faktor.** Nicht vorhanden. Wer ihn braucht, bekommt ihn heute über
+den Umweg Authentik: Dort lässt sich TOTP oder WebAuthn erzwingen, und diese
+Anwendung übernimmt nur das Ergebnis. Das ist die bessere Arbeitsteilung als
+eine eigene halbgare Umsetzung.
+
+**Protokollierung sicherheitsrelevanter Ereignisse.** Fehlversuche, Sperren
+und Rechteänderungen werden nicht eigens protokolliert. Für den Betrieb im
+Team verzichtbar; bei mehr Konten wäre es das Erste, was fehlt.
+
+**Verteilte Bremse.** Die Zähler für Anmeldeversuche und Rückmeldungen liegen
+im Arbeitsspeicher und gelten damit je Container. Bei mehreren Instanzen
+hinter einem Lastverteiler bräuchte es einen gemeinsamen Speicher.
+
+---
+
+## Nachgeprüft
+
+Die Härtungen sind durch Tests belegt (21 Prüfungen), unter anderem:
+
+- Alle fünf Schutzheader sind an jeder Antwort vorhanden, `X-Powered-By` ist
+  weg.
+- Ein schreibender Zugriff mit fremdem `Origin` wird abgewiesen — auch beim
+  Upload; mit eigenem oder ohne `Origin` geht er durch.
+- Hochgeladene Dateien behalten ihre eigene, schärfere Sandbox-Regel.
+- Ein 5000 Zeichen langes Passwort wird abgewiesen, bevor gerechnet wird.
+- Drei gleichzeitige Ersteinrichtungen erzeugen genau einen Administrator.
+- Eine unbekannte Adresse ist an der Antwort nicht von einem falschen
+  Passwort zu unterscheiden — auch nicht bei einem Verzeichnis-Konto.
+- Der Sitzungs-Cookie trägt `HttpOnly`, `SameSite=Lax`, `Path=/` und ein
+  ausreichend langes Token; `Secure` erscheint nur unter HTTPS.

next.config.ts

@@ -9,6 +9,10 @@ const nextConfig: NextConfig = {
   // qrcode und der Postgres-Treiber laufen ausschließlich serverseitig und
   // sollen nicht vom Bundler verarbeitet werden.
   serverExternalPackages: ["qrcode", "pg"],
+
+  // „X-Powered-By: Next.js" verrät nur, wonach jemand Schwachstellen suchen
+  // müsste. Die Schutzheader setzt src/middleware.ts.
+  poweredByHeader: false,
 };
 
 export default nextConfig;

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "qrcode-generator",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "qrcode-generator",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "dependencies": {
         "@prisma/adapter-pg": "^7.9.1",
         "@prisma/client": "^7.9.1",
+        "jose": "^6.2.8",
         "next": "16.3.0",
         "pg": "^8.16.3",
         "qrcode": "^1.5.4",
@@ -28,6 +29,7 @@
         "dotenv": "^17.2.4",
         "eslint": "^9",
         "eslint-config-next": "16.3.0",
+        "playwright": "^1.62.1",
         "prisma": "^7.9.1",
         "tailwindcss": "^4",
         "typescript": "^5"
@@ -5024,6 +5026,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5950,6 +5967,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/jose": {
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.8.tgz",
+      "integrity": "sha512-Bsdjwm3Qsd/P0jR+BHDe3LytDfY7WBq2HmCCLIwuVRHMuEC9ae7/R474GIUdF1NgCyZjzVo/A9DOiOBtXq8ZoQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7085,6 +7111,38 @@
         "pathe": "^2.0.3"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode-generator",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,6 +16,7 @@
   "dependencies": {
     "@prisma/adapter-pg": "^7.9.1",
     "@prisma/client": "^7.9.1",
+    "jose": "^6.2.8",
     "next": "16.3.0",
     "pg": "^8.16.3",
     "qrcode": "^1.5.4",
@@ -34,6 +35,7 @@
     "dotenv": "^17.2.4",
     "eslint": "^9",
     "eslint-config-next": "16.3.0",
+    "playwright": "^1.62.1",
     "prisma": "^7.9.1",
     "tailwindcss": "^4",
     "typescript": "^5"

prisma/migrations/20260814083213_qr_typ_freigaben/migration.sql

@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "QrTypeSetting" (
+    "type" TEXT NOT NULL,
+    "enabled" BOOLEAN NOT NULL,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "QrTypeSetting_pkey" PRIMARY KEY ("type")
+);

prisma/migrations/20260814095859_anmeldung_gruppen_rollen/migration.sql

@@ -0,0 +1,124 @@
+-- Anmeldung, Gruppen und Rollen.
+--
+-- Die Reihenfolge ist wichtig: `QrCode.groupId` ist verpflichtend, es gibt
+-- aber möglicherweise schon Codes. Deshalb wird die Spalte erst ohne
+-- Einschränkung angelegt, dann mit der Standardgruppe gefüllt und erst
+-- danach auf NOT NULL gesetzt. Ohne diesen Zwischenschritt scheitert die
+-- Migration auf jeder Installation, die bereits benutzt wurde.
+
+-- CreateEnum
+CREATE TYPE "Role" AS ENUM ('ADMIN', 'EDITOR', 'VIEWER');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "name" TEXT,
+    "passwordHash" TEXT NOT NULL,
+    "isInstanceAdmin" BOOLEAN NOT NULL DEFAULT false,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "failedLogins" INTEGER NOT NULL DEFAULT 0,
+    "lockedUntil" TIMESTAMP(3),
+    "lastLoginAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL,
+    "tokenHash" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "lastSeenAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Group" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Group_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Membership" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "groupId" TEXT NOT NULL,
+    "role" "Role" NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Membership_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE INDEX "User_email_idx" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_tokenHash_key" ON "Session"("tokenHash");
+
+-- CreateIndex
+CREATE INDEX "Session_userId_idx" ON "Session"("userId");
+
+-- CreateIndex
+CREATE INDEX "Session_expiresAt_idx" ON "Session"("expiresAt");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Group_name_key" ON "Group"("name");
+
+-- CreateIndex
+CREATE INDEX "Membership_groupId_idx" ON "Membership"("groupId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Membership_userId_groupId_key" ON "Membership"("userId", "groupId");
+
+-- Standardgruppe anlegen. Sie ist auch bei ausgeschalteter Anmeldung die
+-- Heimat aller Codes, damit es keinen Sonderfall "Code ohne Gruppe" gibt.
+INSERT INTO "Group" ("id", "name", "description", "createdAt", "updatedAt")
+VALUES (
+    'grp_standard',
+    'Standard',
+    'Beim ersten Start angelegt. Enthält alle Codes, die vor Einführung der Benutzerverwaltung entstanden sind.',
+    CURRENT_TIMESTAMP,
+    CURRENT_TIMESTAMP
+);
+
+-- AlterTable: erst nullable anlegen …
+ALTER TABLE "QrCode" ADD COLUMN "createdById" TEXT,
+ADD COLUMN "groupId" TEXT;
+
+-- … bestehende Codes der Standardgruppe zuordnen …
+UPDATE "QrCode" SET "groupId" = 'grp_standard' WHERE "groupId" IS NULL;
+
+-- … und erst jetzt verpflichtend machen.
+ALTER TABLE "QrCode" ALTER COLUMN "groupId" SET NOT NULL;
+
+-- CreateIndex
+CREATE INDEX "QrCode_groupId_idx" ON "QrCode"("groupId");
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Membership" ADD CONSTRAINT "Membership_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Membership" ADD CONSTRAINT "Membership_groupId_fkey" FOREIGN KEY ("groupId") REFERENCES "Group"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "QrCode" ADD CONSTRAINT "QrCode_groupId_fkey" FOREIGN KEY ("groupId") REFERENCES "Group"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "QrCode" ADD CONSTRAINT "QrCode_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20260814110000_multi_domain/migration.sql

@@ -0,0 +1,86 @@
+-- Mehrere Domains für Kurz-URLs.
+--
+-- Zwei Dinge sind hier heikel und deshalb ausdrücklich schrittweise gelöst:
+--
+-- 1. `QrCode.domainId` ist verpflichtend, es gibt aber schon Codes. Die
+--    Spalte entsteht zuerst ohne Einschränkung, wird gefüllt und erst danach
+--    auf NOT NULL gesetzt.
+-- 2. `slug` war global eindeutig und ist es künftig nur noch je Domain. Der
+--    alte Index muss weichen, bevor der neue greifen kann.
+
+-- CreateTable
+CREATE TABLE "Domain" (
+    "id" TEXT NOT NULL,
+    "hostname" TEXT NOT NULL,
+    "label" TEXT,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Domain_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DomainGrant" (
+    "id" TEXT NOT NULL,
+    "domainId" TEXT NOT NULL,
+    "groupId" TEXT NOT NULL,
+    "isDefault" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "DomainGrant_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Domain_hostname_key" ON "Domain"("hostname");
+
+-- CreateIndex
+CREATE INDEX "DomainGrant_groupId_idx" ON "DomainGrant"("groupId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DomainGrant_domainId_groupId_key" ON "DomainGrant"("domainId", "groupId");
+
+-- Standard-Domain. Der Hostname ist zunächst ein Platzhalter: die
+-- Migration kennt BASE_URL nicht. Beim ersten Start ersetzt
+-- ensureDefaultDomain() ihn durch den Hostnamen aus BASE_URL.
+INSERT INTO "Domain" ("id", "hostname", "label", "isActive", "createdAt", "updatedAt")
+VALUES (
+    'dom_standard',
+    'standard.invalid',
+    'Standard-Domain',
+    true,
+    CURRENT_TIMESTAMP,
+    CURRENT_TIMESTAMP
+);
+
+-- Alle bestehenden Gruppen bekommen die Standard-Domain als Voreinstellung.
+INSERT INTO "DomainGrant" ("id", "domainId", "groupId", "isDefault", "createdAt")
+SELECT 'dg_std_' || "Group"."id", 'dom_standard', "Group"."id", true, CURRENT_TIMESTAMP
+FROM "Group";
+
+-- AlterTable: erst nullable …
+ALTER TABLE "QrCode" ADD COLUMN "domainId" TEXT;
+
+-- … bestehende Codes der Standard-Domain zuordnen …
+UPDATE "QrCode" SET "domainId" = 'dom_standard' WHERE "domainId" IS NULL;
+
+-- … und erst jetzt verpflichtend machen.
+ALTER TABLE "QrCode" ALTER COLUMN "domainId" SET NOT NULL;
+
+-- Eindeutigkeit des Slugs von global auf „je Domain“ umstellen.
+DROP INDEX "QrCode_slug_key";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "QrCode_domainId_slug_key" ON "QrCode"("domainId", "slug");
+
+-- CreateIndex
+CREATE INDEX "QrCode_domainId_idx" ON "QrCode"("domainId");
+
+-- AddForeignKey
+ALTER TABLE "DomainGrant" ADD CONSTRAINT "DomainGrant_domainId_fkey" FOREIGN KEY ("domainId") REFERENCES "Domain"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DomainGrant" ADD CONSTRAINT "DomainGrant_groupId_fkey" FOREIGN KEY ("groupId") REFERENCES "Group"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "QrCode" ADD CONSTRAINT "QrCode_domainId_fkey" FOREIGN KEY ("domainId") REFERENCES "Domain"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20260814140000_datei_uploads/migration.sql

@@ -0,0 +1,24 @@
+-- Hochgeladene Dateien für die Typen „PDF" und „Bild".
+--
+-- Der Inhalt liegt als bytea in der Datenbank. Damit bleibt es bei einem
+-- Volumen, das gesichert werden muss.
+CREATE TABLE "Upload" (
+    "id" TEXT NOT NULL,
+    "filename" TEXT NOT NULL,
+    "mimeType" TEXT NOT NULL,
+    "size" INTEGER NOT NULL,
+    "data" BYTEA NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "qrCodeId" TEXT,
+
+    CONSTRAINT "Upload_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "Upload_qrCodeId_idx" ON "Upload"("qrCodeId");
+CREATE INDEX "Upload_createdAt_idx" ON "Upload"("createdAt");
+
+-- Wird ein Code gelöscht, verschwindet seine Datei mit ihm.
+ALTER TABLE "Upload"
+    ADD CONSTRAINT "Upload_qrCodeId_fkey"
+    FOREIGN KEY ("qrCodeId") REFERENCES "QrCode"("id")
+    ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20260814150000_feedback/migration.sql

@@ -0,0 +1,20 @@
+-- Rückmeldungen zu einem Feedback-Code.
+--
+-- Ohne IP-Adresse und ohne Gerätekennung: Wer einen Aushang scannt und eine
+-- Note vergibt, soll nicht wiedererkennbar sein.
+CREATE TABLE "Feedback" (
+    "id" TEXT NOT NULL,
+    "qrCodeId" TEXT NOT NULL,
+    "rating" INTEGER NOT NULL,
+    "comment" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Feedback_pkey" PRIMARY KEY ("id")
+);
+
+CREATE INDEX "Feedback_qrCodeId_createdAt_idx" ON "Feedback"("qrCodeId", "createdAt");
+
+ALTER TABLE "Feedback"
+    ADD CONSTRAINT "Feedback_qrCodeId_fkey"
+    FOREIGN KEY ("qrCodeId") REFERENCES "QrCode"("id")
+    ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20260814170000_oidc/migration.sql

@@ -0,0 +1,9 @@
+-- Anmeldung über einen externen Anbieter (OpenID Connect).
+--
+-- `oidcSubject` ist die stabile Kennung beim Anbieter. Sie und nicht die
+-- E-Mail-Adresse entscheidet, wer wiedererkannt wird — Adressen ändern sich.
+ALTER TABLE "User" ADD COLUMN "oidcSubject" TEXT;
+CREATE UNIQUE INDEX "User_oidcSubject_key" ON "User"("oidcSubject");
+
+-- Konten, die sich nur über den Anbieter anmelden, haben kein Passwort.
+ALTER TABLE "User" ALTER COLUMN "passwordHash" DROP NOT NULL;

prisma/migrations/20260815100000_sitzung_absolute_grenze/migration.sql

@@ -0,0 +1,9 @@
+-- Harte Obergrenze für Sitzungen, unabhängig von der Aktivität.
+--
+-- Bestehende Sitzungen bekommen 90 Tage ab jetzt — sie sollen durch die
+-- Änderung nicht plötzlich alle ungültig werden.
+ALTER TABLE "Session"
+    ADD COLUMN "absoluteExpiresAt" TIMESTAMP(3) NOT NULL
+    DEFAULT (CURRENT_TIMESTAMP + INTERVAL '90 days');
+
+CREATE INDEX "Session_absoluteExpiresAt_idx" ON "Session"("absoluteExpiresAt");

prisma/schema.prisma

@@ -10,27 +10,239 @@ datasource db {
   provider = "postgresql"
 }
 
+/// Rolle eines Benutzers innerhalb einer Gruppe.
+///
+/// Darüber liegt noch eine Ebene: `User.isInstanceAdmin`. Sie darf Gruppen
+/// und Benutzer überhaupt erst anlegen — ohne sie gäbe es niemanden, der die
+/// erste Gruppe erstellt.
+enum Role {
+  /// Darf zusätzlich Mitglieder und Rollen der Gruppe verwalten.
+  ADMIN
+  /// Darf Codes anlegen, ändern und löschen.
+  EDITOR
+  /// Darf nur lesen und herunterladen.
+  VIEWER
+}
+
+model User {
+  id              String       @id @default(cuid())
+  email           String       @unique
+  name            String?
+  /// scrypt-Hash, siehe src/lib/auth/password.ts — nie das Klartextpasswort.
+  /// Leer bei Konten, die sich ausschließlich über den externen Anbieter
+  /// anmelden: dort gibt es hier kein Passwort zu prüfen.
+  passwordHash    String?
+  /// Stabile Kennung beim externen Anbieter (OIDC `sub`). Bleibt leer, solange
+  /// sich das Konto nur mit Passwort anmeldet.
+  oidcSubject     String?      @unique
+  /// Darf Gruppen, Benutzer und Domains verwalten.
+  isInstanceAdmin Boolean      @default(false)
+  /// Deaktivierte Benutzer können sich nicht anmelden; laufende Sitzungen
+  /// werden beim nächsten Zugriff verworfen.
+  isActive        Boolean      @default(true)
+  failedLogins    Int          @default(0)
+  lockedUntil     DateTime?
+  lastLoginAt     DateTime?
+  createdAt       DateTime     @default(now())
+  updatedAt       DateTime     @updatedAt
+
+  sessions        Session[]
+  memberships     Membership[]
+  createdCodes    QrCode[]     @relation("QrCodeCreator")
+
+  @@index([email])
+}
+
+/// Angemeldete Sitzung. In der Datenbank statt in einem signierten Cookie,
+/// damit sie sich serverseitig beenden lässt — etwa wenn ein Benutzer
+/// deaktiviert wird.
+model Session {
+  id         String   @id @default(cuid())
+  /// SHA-256 des Cookie-Werts. Der Wert selbst steht nirgends in der Datenbank:
+  /// wer sie liest, kann sich damit trotzdem nicht anmelden.
+  tokenHash  String   @unique
+  userId     String
+  user       User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  /// Läuft ohne Aktivität ab; wird beim Arbeiten nachgeführt.
+  expiresAt  DateTime
+  /// Harte Obergrenze ab dem Anmelden. Ohne sie könnte eine gestohlene
+  /// Sitzung durch regelmäßige Nutzung unbegrenzt weiterleben.
+  absoluteExpiresAt DateTime @default(dbgenerated("CURRENT_TIMESTAMP + INTERVAL '90 days'"))
+  lastSeenAt DateTime @default(now())
+  createdAt  DateTime @default(now())
+
+  @@index([userId])
+  @@index([expiresAt])
+  @@index([absoluteExpiresAt])
+}
+
+/// Eine Gruppe bündelt Benutzer und die Codes, die ihnen gehören.
+model Group {
+  id          String       @id @default(cuid())
+  name        String       @unique
+  description String?
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+
+  memberships  Membership[]
+  codes        QrCode[]
+  domainGrants DomainGrant[]
+}
+
+/// Mitgliedschaft eines Benutzers in einer Gruppe, mit Rolle. Ein Benutzer
+/// kann in mehreren Gruppen sein — mit unterschiedlicher Rolle je Gruppe.
+model Membership {
+  id        String   @id @default(cuid())
+  userId    String
+  groupId   String
+  role      Role
+  createdAt DateTime @default(now())
+
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  group     Group    @relation(fields: [groupId], references: [id], onDelete: Cascade)
+
+  @@unique([userId, groupId])
+  @@index([groupId])
+}
+
+/// Eine Domain, unter der Kurz-URLs ausgeliefert werden.
+///
+/// Die Weiterleitung erkennt am `Host`-Header, welche Domain gemeint ist, und
+/// prüft ihn gegen diese Tabelle. Ein unbekannter Hostname führt zu 404 —
+/// damit lässt sich über einen gefälschten Header keine fremde Domain
+/// ansprechen.
+model Domain {
+  id        String        @id @default(cuid())
+  /// Kleingeschrieben, ohne Schema, ggf. mit Port — z. B. "qr.example.com".
+  hostname  String        @unique
+  label     String?
+  isActive  Boolean       @default(true)
+  createdAt DateTime      @default(now())
+  updatedAt DateTime      @updatedAt
+
+  grants    DomainGrant[]
+  codes     QrCode[]
+}
+
+/// Zuteilung einer Domain an eine Gruppe. Eine Domain kann mehreren Gruppen
+/// dienen; welche davon die Voreinstellung der Gruppe ist, steht in
+/// `isDefault`.
+model DomainGrant {
+  id        String   @id @default(cuid())
+  domainId  String
+  groupId   String
+  isDefault Boolean  @default(false)
+  createdAt DateTime @default(now())
+
+  domain    Domain   @relation(fields: [domainId], references: [id], onDelete: Cascade)
+  group     Group    @relation(fields: [groupId], references: [id], onDelete: Cascade)
+
+  @@unique([domainId, groupId])
+  @@index([groupId])
+}
+
+/// Freigabe eines QR-Typs durch die Verwaltung.
+///
+/// Es gibt nur Zeilen für Typen, die bewusst umgeschaltet wurden — fehlt ein
+/// Eintrag, gilt der Typ als freigegeben. So bleibt eine frische Installation
+/// ohne Vorbelegung nutzbar, und neue Typen aus späteren Versionen sind
+/// automatisch sichtbar.
+model QrTypeSetting {
+  /// Kennung aus der Typ-Registry, z. B. "website".
+  type      String   @id
+  enabled   Boolean
+  updatedAt DateTime @updatedAt
+}
+
 /// Ein dynamischer QR-Code. Der QR-Code kodiert `{BASE_URL}/r/{slug}` und
 /// leitet beim Aufruf auf das Ziel weiter, das aus `data` aufgelöst wird.
 ///
-/// `type` + `data` sind bewusst generisch gehalten: V1 kennt nur den Typ
+/// `type` + `data` sind bewusst generisch gehalten: die Typ-Module legen ihr
-/// "website" (`data = { url: "https://…" }`), V2-Typen (vCard, WLAN, …)
+/// eigenes Payload-Format in `data` ab, ohne Schemaänderung.
-/// legen ihr eigenes Payload-Format in `data` ab, ohne Schemaänderung.
 model QrCode {
-  id         String    @id @default(cuid())
+  id          String    @id @default(cuid())
-  slug       String    @unique
+  /// Nur je Domain eindeutig — derselbe sprechende Slug darf auf zwei
-  type       String
+  /// Domains liegen. Weil eine Domain mehreren Gruppen dienen kann, gilt
-  label      String?
+  /// diese Eindeutigkeit über Gruppengrenzen hinweg.
-  data       Json
+  slug        String
-  fgColor    String    @default("#000000")
+  type        String
-  bgColor    String    @default("#FFFFFF")
+  label       String?
-  size       Int       @default(512)
+  data        Json
-  ecLevel    String    @default("M")
+  fgColor     String    @default("#000000")
-  margin     Int       @default(4)
+  bgColor     String    @default("#FFFFFF")
-  scans      Int       @default(0)
+  size        Int       @default(512)
-  lastScanAt DateTime?
+  ecLevel     String    @default("M")
-  createdAt  DateTime  @default(now())
+  margin      Int       @default(4)
-  updatedAt  DateTime  @updatedAt
+  scans       Int       @default(0)
+  lastScanAt  DateTime?
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
 
+  /// Domain, unter der die Kurz-URL dieses Codes erreichbar ist.
+  domainId    String
+  domain      Domain    @relation(fields: [domainId], references: [id])
+  /// Jeder Code gehört einer Gruppe — auch bei ausgeschalteter Anmeldung.
+  /// Dann ist es die beim ersten Start angelegte Standardgruppe.
+  groupId     String
+  group       Group     @relation(fields: [groupId], references: [id])
+  /// Wer den Code angelegt hat. Leer für Codes aus der Zeit vor der
+  /// Anmeldung und für Codes, deren Ersteller gelöscht wurde.
+  createdById String?
+  createdBy   User?     @relation("QrCodeCreator", fields: [createdById], references: [id], onDelete: SetNull)
+
+  /// Dateien, die zu diesem Code gehören — beim Löschen gehen sie mit.
+  uploads     Upload[]
+  /// Rückmeldungen, die über die Landingpage eingegangen sind.
+  feedback    Feedback[]
+
+  @@unique([domainId, slug])
+  @@index([createdAt])
+  @@index([groupId])
+  @@index([domainId])
+}
+
+/// Eine hochgeladene Datei — das PDF hinter einem PDF-Code, das Bild hinter
+/// einem Bild-Code.
+///
+/// Der Inhalt liegt in der Datenbank, nicht auf der Platte. Damit gibt es
+/// weiterhin genau ein Volumen zu sichern: Wer die Datenbank sichert, hat
+/// alles. Bei Dateigrößen im einstelligen Megabyte-Bereich und einer
+/// Installation dieser Größenordnung ist das der bessere Tausch als ein
+/// zweites Volumen, das beim Sichern vergessen werden kann.
+model Upload {
+  id        String   @id @default(cuid())
+  /// Ursprünglicher Dateiname, für den Download.
+  filename  String
+  mimeType  String
+  /// Größe in Bytes — als Angabe für die Oberfläche, ohne die Datei zu laden.
+  size      Int
+  data      Bytes
+  createdAt DateTime @default(now())
+
+  /// 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)
+
+  @@index([qrCodeId])
   @@index([createdAt])
 }
+
+/// Eine Rückmeldung, die jemand über die Landingpage eines Feedback-Codes
+/// abgegeben hat.
+///
+/// Bewusst ohne jeden Bezug zur Person: keine IP-Adresse, kein Kennzeichen
+/// des Geräts. Wer einen Zettel an der Wand scannt und eine Note vergibt,
+/// soll nicht wiedererkennbar sein.
+model Feedback {
+  id        String   @id @default(cuid())
+  qrCodeId  String
+  qrCode    QrCode   @relation(fields: [qrCodeId], references: [id], onDelete: Cascade)
+  /// 1 bis 5.
+  rating    Int
+  comment   String?
+  createdAt DateTime @default(now())
+
+  @@index([qrCodeId, createdAt])
+}

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

@@ -0,0 +1,111 @@
+import type { Metadata } from "next";
+import { redirect } from "next/navigation";
+
+import { LoginForm, SetupForm } from "@/components/auth-forms";
+import { Icon } from "@/components/icons";
+import { Notice } from "@/components/ui";
+import { getActor, isAuthEnabled, isSetupOpen } from "@/lib/auth/actor";
+import { getOidcConfig, isOidcEnabled } from "@/lib/auth/oidc";
+import { MIN_PASSWORD_LENGTH } from "@/lib/auth/password";
+
+export const metadata: Metadata = { title: "Anmelden" };
+export const dynamic = "force-dynamic";
+
+type PageProps = { searchParams: Promise<{ fehler?: string }> };
+
+export default async function SignInPage({ searchParams }: PageProps) {
+  // Ohne Anmeldung gibt es hier nichts zu tun.
+  if (!isAuthEnabled()) redirect("/");
+
+  const actor = await getActor();
+  if (actor.kind === "user") redirect("/");
+
+  const setup = await isSetupOpen();
+  const { fehler } = await searchParams;
+
+  // Eine unvollständige OIDC-Konfiguration soll die Anmeldeseite nicht
+  // unbenutzbar machen — dann bleibt wenigstens das Passwortfeld.
+  let oidc: { label: string; nurOidc: boolean } | null = null;
+  let oidcFehler: string | null = null;
+  if (isOidcEnabled()) {
+    try {
+      const config = getOidcConfig();
+      oidc = { label: config.buttonLabel, nurOidc: !config.allowLocalLogin };
+    } catch (error) {
+      oidcFehler =
+        error instanceof Error
+          ? error.message
+          : "Die Anmeldung über den externen Anbieter ist nicht eingerichtet.";
+    }
+  }
+
+  // Bei reiner Anbieter-Anmeldung gibt es keine Ersteinrichtung mit Passwort:
+  // Der erste, der sich über den Anbieter anmeldet, wird Administrator.
+  const zeigeFormular = !oidc?.nurOidc;
+
+  return (
+    <div className="mx-auto flex max-w-md flex-col gap-6 px-4 py-14 sm:px-6">
+      <div className="text-center">
+        <span className="mx-auto flex size-12 items-center justify-center rounded-xl bg-indigo-600 text-white">
+          <Icon name={setup && zeigeFormular ? "lock" : "qr"} className="size-6" />
+        </span>
+        <h1 className="mt-4 text-2xl font-bold tracking-tight text-slate-900">
+          {setup && zeigeFormular ? "Ersteinrichtung" : "Anmelden"}
+        </h1>
+        <p className="mt-2 text-sm text-slate-600">
+          {setup && zeigeFormular
+            ? "Es gibt noch keinen Benutzer. Lege jetzt den ersten Administrator an — danach ist diese Seite geschlossen."
+            : "Bitte melde dich an, um QR-Codes zu erstellen und zu verwalten."}
+        </p>
+      </div>
+
+      {fehler ? <Notice tone="warning">{fehler}</Notice> : null}
+      {oidcFehler ? <Notice tone="warning">{oidcFehler}</Notice> : null}
+
+      {oidc ? (
+        <a
+          href="/api/auth/oidc/start"
+          className="flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-3 font-medium text-white transition-colors hover:bg-indigo-700"
+        >
+          <Icon name="lock" className="size-4" />
+          {oidc.label}
+        </a>
+      ) : null}
+
+      {oidc && zeigeFormular ? (
+        <div className="flex items-center gap-3 text-xs text-slate-400 uppercase">
+          <span className="h-px flex-1 bg-slate-200" />
+          oder mit Passwort
+          <span className="h-px flex-1 bg-slate-200" />
+        </div>
+      ) : null}
+
+      {zeigeFormular ? (
+        setup ? (
+          <SetupForm minLength={MIN_PASSWORD_LENGTH} />
+        ) : (
+          <LoginForm />
+        )
+      ) : null}
+
+      {setup && zeigeFormular ? (
+        <Notice tone="info">
+          Der erste Benutzer wird Administrator der Installation und darf
+          Gruppen, Benutzer und die QR-Typen verwalten.
+        </Notice>
+      ) : oidc?.nurOidc ? (
+        <p className="text-center text-sm text-slate-500">
+          Die Anmeldung mit Passwort ist abgeschaltet (<code>OIDC_ONLY=true</code>).
+          {setup
+            ? " Wer sich zuerst anmeldet, wird Administrator dieser Installation."
+            : ""}
+        </p>
+      ) : (
+        <p className="text-center text-sm text-slate-500">
+          Passwort vergessen? Ein Administrator kann es unter Verwaltung →
+          Benutzer zurücksetzen.
+        </p>
+      )}
+    </div>
+  );
+}

src/app/(app)/erstellen/[type]/page.tsx

@@ -0,0 +1,79 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+import { Icon } from "@/components/icons";
+import { QrGenerator } from "@/components/qr-generator";
+import { requirePageActor } from "@/lib/auth/guard";
+import { getQrTypeState } from "@/lib/qr/availability";
+import { getQrType } from "@/lib/qr/registry";
+
+type Props = { params: Promise<{ type: string }> };
+
+// Die Freigabe der Typen kommt aus der Datenbank und ist jederzeit änderbar.
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { type } = await params;
+  const qrType = getQrType(type);
+  return { title: qrType ? `${qrType.title}-QR-Code` : "QR-Code erstellen" };
+}
+
+/** Erklärseite statt 404 — der Typ existiert, ist nur (noch) nicht nutzbar. */
+function Hinweis({
+  icon,
+  titel,
+  text,
+}: {
+  icon: Parameters<typeof Icon>[0]["name"];
+  titel: string;
+  text: string;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6">
+      <span className="mx-auto flex size-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
+        <Icon name={icon} className="size-7" />
+      </span>
+      <h1 className="mt-5 text-2xl font-bold text-slate-900">{titel}</h1>
+      <p className="mt-2 text-slate-600">{text}</p>
+      <Link
+        href="/"
+        className="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+      >
+        Zur Typ-Auswahl
+      </Link>
+    </div>
+  );
+}
+
+export default async function CreatePage({ params }: Props) {
+  await requirePageActor();
+  const { type } = await params;
+  const state = await getQrTypeState(type);
+
+  if (!state) {
+    notFound();
+  }
+
+  if (!state.enabled) {
+    return (
+      <Hinweis
+        icon="lock"
+        titel={`„${state.qrType.title}“ ist abgeschaltet`}
+        text="Dieser QR-Typ wurde in der Verwaltung abgeschaltet. Ein Administrator kann ihn unter Verwaltung → QR-Typen wieder freigeben."
+      />
+    );
+  }
+
+  if (!state.implemented) {
+    return (
+      <Hinweis
+        icon={state.qrType.icon}
+        titel={`„${state.qrType.title}“ ist bald verfügbar`}
+        text="Dieser QR-Typ folgt in einer späteren Version. Bereits verfügbare Typen findest du in der Typ-Auswahl."
+      />
+    );
+  }
+
+  return <QrGenerator typeId={state.qrType.id} />;
+}

src/app/(app)/kein-zugriff/page.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { Icon } from "@/components/icons";
+
+export const metadata: Metadata = { title: "Kein Zugriff" };
+
+export default function NoAccessPage() {
+  return (
+    <div className="mx-auto max-w-md px-4 py-20 text-center sm:px-6">
+      <span className="mx-auto flex size-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
+        <Icon name="lock" className="size-7" />
+      </span>
+      <h1 className="mt-5 text-2xl font-bold text-slate-900">Kein Zugriff</h1>
+      <p className="mt-2 text-slate-600">
+        Für diesen Bereich fehlt dir die nötige Berechtigung. Wenn du meinst,
+        dass das ein Versehen ist, wende dich an einen Administrator.
+      </p>
+      <Link
+        href="/"
+        className="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+      >
+        Zur Startseite
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,153 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { ChangePasswordForm, SignOutCard } from "@/components/account";
+import { Badge, Card, CardTitle, Notice } from "@/components/ui";
+import { isAuthEnabled } from "@/lib/auth/actor";
+import { requirePageActor } from "@/lib/auth/guard";
+import { MIN_PASSWORD_LENGTH } from "@/lib/auth/password";
+import { ROLE_DESCRIPTIONS, ROLE_LABELS } from "@/lib/auth/policy";
+import { prisma } from "@/lib/db";
+
+export const metadata: Metadata = { title: "Konto" };
+export const dynamic = "force-dynamic";
+
+export default async function AccountPage() {
+  const actor = await requirePageActor();
+
+  // Konten aus dem externen Verzeichnis haben hier kein Passwort.
+  const ausVerzeichnis =
+    actor.kind === "user"
+      ? ((await prisma.user.findUnique({
+          where: { id: actor.user.id },
+          select: { passwordHash: true },
+        }))?.passwordHash ?? null) === null
+      : false;
+
+  // Bei ausgeschalteter Anmeldung gibt es kein Konto — dann erklärt die Seite,
+  // wie sich das umstellen lässt, statt einfach leer zu sein.
+  if (actor.kind !== "user") {
+    return (
+      <div className="mx-auto max-w-2xl px-4 py-10 sm:px-6">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900">
+          Konto
+        </h1>
+        <div className="mt-5">
+          <Notice tone="info">
+            <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">
+              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">
+              docker compose up -d
+            </code>{" "}
+            ausführen. Beim nächsten Aufruf legst du den ersten Administrator
+            an.
+          </Notice>
+        </div>
+        <Link
+          href="/"
+          className="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+        >
+          Zur Typ-Auswahl
+        </Link>
+      </div>
+    );
+  }
+
+  const { user } = actor;
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="mb-7">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+          Konto
+        </h1>
+        <p className="mt-2 text-slate-600">
+          Deine Anmeldedaten und die Gruppen, in denen du mitarbeitest.
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <Card>
+          <CardTitle>Angemeldet als</CardTitle>
+          <dl className="space-y-2 text-sm">
+            <div className="flex flex-wrap gap-x-2">
+              <dt className="text-slate-500">Name:</dt>
+              <dd className="text-slate-900">{user.name?.trim() || "—"}</dd>
+            </div>
+            <div className="flex flex-wrap gap-x-2">
+              <dt className="text-slate-500">E-Mail:</dt>
+              <dd className="text-slate-900">{user.email}</dd>
+            </div>
+            <div className="flex flex-wrap items-center gap-x-2">
+              <dt className="text-slate-500">Rolle:</dt>
+              <dd>
+                {user.isInstanceAdmin ? (
+                  <Badge tone="accent">Administrator der Installation</Badge>
+                ) : (
+                  <span className="text-slate-900">Benutzer</span>
+                )}
+              </dd>
+            </div>
+          </dl>
+        </Card>
+
+        <Card>
+          <CardTitle
+            hint={
+              user.isInstanceAdmin
+                ? "Als Administrator der Installation siehst du ohnehin alle Gruppen."
+                : undefined
+            }
+          >
+            Meine Gruppen
+          </CardTitle>
+          {user.memberships.length === 0 ? (
+            <p className="text-sm text-slate-600">
+              Du bist in keiner Gruppe. Bitte einen Administrator, dich einer
+              zuzuordnen — sonst kannst du keine Codes anlegen.
+            </p>
+          ) : (
+            <ul className="space-y-2">
+              {user.memberships.map((membership) => (
+                <li
+                  key={membership.groupId}
+                  className="flex flex-wrap items-center gap-2 rounded-lg border border-slate-200 p-3"
+                >
+                  <span className="font-medium text-slate-900">
+                    {membership.groupName}
+                  </span>
+                  <Badge tone="neutral">{ROLE_LABELS[membership.role]}</Badge>
+                  <span className="w-full text-sm text-slate-500">
+                    {ROLE_DESCRIPTIONS[membership.role]}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+
+        {isAuthEnabled() ? (
+          <>
+            {ausVerzeichnis ? (
+              <Card>
+                <CardTitle>Passwort</CardTitle>
+                <p className="mt-2 text-sm text-slate-600">
+                  Dieses Konto meldet sich über den externen Anbieter an. Ein
+                  Passwort gibt es hier nicht — geändert wird es beim Anbieter.
+                </p>
+              </Card>
+            ) : (
+              <ChangePasswordForm minLength={MIN_PASSWORD_LENGTH} />
+            )}
+            <SignOutCard />
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/app/(app)/layout.tsx

@@ -0,0 +1,116 @@
+import Link from "next/link";
+
+import { LogoutButton } from "@/components/auth-forms";
+import { Icon } from "@/components/icons";
+import { actorLabel, getActor, isAuthEnabled } from "@/lib/auth/actor";
+import { can } from "@/lib/auth/policy";
+
+// Der Kopfbereich hängt von der Anmeldung ab und darf nicht vorgerendert
+// werden.
+export const dynamic = "force-dynamic";
+
+const NAV_LINK =
+  "rounded-lg px-3 py-2 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900";
+
+/**
+ * Rahmen der eigentlichen Anwendung: Kopfzeile mit Navigation, Inhalt,
+ * Fußzeile. Die öffentlichen Landingpages liegen bewusst außerhalb dieser
+ * Gruppe und bekommen davon nichts ab.
+ */
+export default async function AppLayout({ children }: LayoutProps<"/">) {
+  const actor = await getActor();
+  const signedIn = actor.kind !== "anonymous";
+  const showAdmin = can(actor, "instance:manage");
+
+  return (
+    <div className="flex flex-1 flex-col">
+      <header className="border-b border-slate-200 bg-white">
+        <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">
+              <Icon name="qr" className="size-5" />
+            </span>
+            {/* Auf schmalen Geräten reicht das Zeichen — sonst passt die
+                Navigation nicht mehr in eine Zeile. */}
+            <span className="hidden sm:inline">QR-Code-Generator</span>
+          </Link>
+
+          <nav className="flex flex-wrap items-center gap-0.5 text-sm font-medium sm:gap-1">
+            {signedIn ? (
+              <>
+                <Link href="/" className={NAV_LINK}>
+                  Erstellen
+                </Link>
+                <Link href="/meine-codes" className={NAV_LINK}>
+                  Meine Codes
+                </Link>
+                {showAdmin ? (
+                  <Link href="/verwaltung" className={NAV_LINK}>
+                    Verwaltung
+                  </Link>
+                ) : null}
+              </>
+            ) : null}
+
+            {isAuthEnabled() && actor.kind === "user" ? (
+              <>
+                <span
+                  aria-hidden="true"
+                  className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
+                />
+                <Link
+                  href="/konto"
+                  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">
+                    {actorLabel(actor).slice(0, 2)}
+                  </span>
+                  <span className="hidden truncate sm:inline">
+                    {actorLabel(actor)}
+                  </span>
+                </Link>
+                <LogoutButton />
+              </>
+            ) : null}
+
+            {isAuthEnabled() && actor.kind === "anonymous" ? (
+              <Link href="/anmelden" className={NAV_LINK}>
+                Anmelden
+              </Link>
+            ) : null}
+
+            {/* Ohne Anmeldung gibt es kein Konto. Das gehört sichtbar
+                gesagt — sonst sucht man den Abmelden-Knopf vergeblich. */}
+            {!isAuthEnabled() ? (
+              <>
+                <span
+                  aria-hidden="true"
+                  className="mx-1 hidden h-5 w-px bg-slate-200 sm:block"
+                />
+                <Link
+                  href="/konto"
+                  title="Die Anmeldung ist ausgeschaltet — hier steht, wie du sie einschaltest"
+                  className="rounded-lg px-3 py-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+                >
+                  Ohne Anmeldung
+                </Link>
+              </>
+            ) : null}
+          </nav>
+        </div>
+      </header>
+
+      <main className="flex-1">{children}</main>
+
+      <footer className="border-t border-slate-200 bg-white">
+        <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
+        </div>
+      </footer>
+    </div>
+  );
+}

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

@@ -0,0 +1,164 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+import { Icon } from "@/components/icons";
+import { Card } from "@/components/ui";
+import { requirePageActor } from "@/lib/auth/guard";
+import { can } from "@/lib/auth/policy";
+import { prisma } from "@/lib/db";
+import { FEEDBACK_SCALES, feedbackDataSchema } from "@/lib/qr/types/feedback";
+
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = { title: "Rückmeldungen" };
+
+type PageProps = { params: Promise<{ id: string }> };
+
+function formatDate(value: Date): string {
+  return new Intl.DateTimeFormat("de-DE", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(value);
+}
+
+export default async function FeedbackResultsPage({ params }: PageProps) {
+  const { id } = await params;
+  const actor = await requirePageActor();
+
+  const code = await prisma.qrCode.findUnique({
+    where: { id },
+    include: {
+      feedback: { orderBy: { createdAt: "desc" }, take: 200 },
+    },
+  });
+
+  if (!code || code.type !== "feedback") notFound();
+  if (!can(actor, "codes:read", { groupId: code.groupId })) notFound();
+
+  const daten = feedbackDataSchema.safeParse(code.data);
+  const skala = daten.success ? daten.data.scale : "stars";
+  const titel = daten.success ? daten.data.title : (code.label ?? "Feedback");
+
+  const eintraege = code.feedback;
+  const anzahl = eintraege.length;
+  const schnitt =
+    anzahl > 0
+      ? eintraege.reduce((summe, eintrag) => summe + eintrag.rating, 0) / anzahl
+      : 0;
+
+  // Verteilung von 5 nach 1 — so liest man eine Bewertungsübersicht.
+  const verteilung = [5, 4, 3, 2, 1].map((note) => ({
+    note,
+    anzahl: eintraege.filter((eintrag) => eintrag.rating === note).length,
+  }));
+  const groesste = Math.max(1, ...verteilung.map((zeile) => zeile.anzahl));
+
+  const kommentare = eintraege.filter((eintrag) => eintrag.comment);
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
+      <Link
+        href="/meine-codes"
+        className="mb-5 inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition-colors hover:text-slate-900"
+      >
+        <Icon name="arrowLeft" className="size-4" />
+        Zurück zu Meine Codes
+      </Link>
+
+      <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+        {titel}
+      </h1>
+      <p className="mt-2 text-slate-600">
+        {anzahl === 0
+          ? "Es ist noch keine Rückmeldung eingegangen."
+          : `${anzahl} ${anzahl === 1 ? "Rückmeldung" : "Rückmeldungen"} · ${code.scans} ${code.scans === 1 ? "Scan" : "Scans"}`}
+      </p>
+
+      {anzahl > 0 ? (
+        <>
+          <Card className="mt-7">
+            <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
+              <div>
+                <p className="text-4xl font-bold text-slate-900 tabular-nums">
+                  {schnitt.toFixed(1).replace(".", ",")}
+                </p>
+                <p className="text-sm text-slate-500">von 5 im Schnitt</p>
+              </div>
+
+              <div className="min-w-0 flex-1 space-y-1.5">
+                {verteilung.map((zeile) => (
+                  <div key={zeile.note} className="flex items-center gap-2.5">
+                    <span className="w-10 shrink-0 text-right text-sm text-slate-500 tabular-nums">
+                      {zeile.note}{" "}
+                      <span aria-hidden="true">
+                        {FEEDBACK_SCALES[skala].symbols[zeile.note - 1]}
+                      </span>
+                    </span>
+                    <span className="h-2.5 min-w-0 flex-1 overflow-hidden rounded-full bg-slate-100">
+                      <span
+                        className="block h-full rounded-full bg-indigo-500"
+                        style={{
+                          width: `${Math.round((zeile.anzahl / groesste) * 100)}%`,
+                        }}
+                      />
+                    </span>
+                    <span className="w-8 shrink-0 text-sm text-slate-600 tabular-nums">
+                      {zeile.anzahl}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+
+          {kommentare.length > 0 ? (
+            <div className="mt-7">
+              <h2 className="mb-3 text-lg font-semibold text-slate-900">
+                Kommentare ({kommentare.length})
+              </h2>
+              <ul className="space-y-3">
+                {kommentare.map((eintrag) => (
+                  <li
+                    key={eintrag.id}
+                    className="rounded-xl border border-slate-200 bg-white 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">
+                        {eintrag.rating}/5
+                      </span>
+                      <span aria-hidden="true">·</span>
+                      <time dateTime={eintrag.createdAt.toISOString()}>
+                        {formatDate(eintrag.createdAt)}
+                      </time>
+                    </div>
+                    <p className="whitespace-pre-wrap text-slate-800">
+                      {eintrag.comment}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+              {anzahl >= 200 ? (
+                <p className="mt-3 text-sm text-slate-500">
+                  Angezeigt werden die 200 jüngsten Rückmeldungen.
+                </p>
+              ) : null}
+            </div>
+          ) : (
+            <p className="mt-7 text-slate-600">
+              Bisher hat niemand etwas dazugeschrieben.
+            </p>
+          )}
+        </>
+      ) : (
+        <Card className="mt-7">
+          <p className="text-slate-600">
+            Sobald jemand den Code scannt und eine Bewertung abgibt, steht sie
+            hier. Die Rückmeldungen enthalten keinen Namen und keine
+            IP-Adresse.
+          </p>
+        </Card>
+      )}
+    </div>
+  );
+}

src/app/(app)/meine-codes/page.tsx

@@ -1,12 +1,19 @@
 import type { Metadata } from "next";
 
 import { CodesList } from "@/components/codes-list";
+import { requirePageActor } from "@/lib/auth/guard";
 
 export const metadata: Metadata = { title: "Meine Codes" };
 
-export default function MyCodesPage() {
+export const dynamic = "force-dynamic";
+
+export default async function MyCodesPage() {
+  await requirePageActor();
+
+  // Breiter als die übrigen Seiten: Die Liste soll viele Projekte
+  // nebeneinander zeigen können.
   return (
-    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 sm:py-10">
+    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-10">
       <div className="mb-7">
         <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
           Meine Codes

src/app/(app)/page.tsx

@@ -0,0 +1,133 @@
+import Link from "next/link";
+
+import { Icon } from "@/components/icons";
+import { Badge, Notice } from "@/components/ui";
+import { requirePageActor } from "@/lib/auth/guard";
+import { getVisibleQrTypes } from "@/lib/qr/availability";
+
+// Welche Typen sichtbar sind, steht in der Datenbank und ist jederzeit
+// änderbar — die Startseite darf deshalb nicht vorgerendert werden.
+export const dynamic = "force-dynamic";
+
+export default async function HomePage() {
+  await requirePageActor();
+  const types = await getVisibleQrTypes();
+  const usableCount = types.filter((entry) => entry.usable).length;
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
+      <div className="max-w-2xl">
+        <h1 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
+          Was möchtest du erstellen?
+        </h1>
+        <p className="mt-3 text-base text-slate-600">
+          Wähle einen Typ, gib deine Daten ein und lade den fertigen QR-Code als
+          PNG oder SVG herunter. Auf Wunsch als dynamischer Code, dessen Ziel du
+          später änderst, ohne den Code neu drucken zu müssen.
+        </p>
+      </div>
+
+      {usableCount === 0 ? (
+        <div className="mt-9 max-w-2xl">
+          <Notice tone="warning">
+            {types.length === 0
+              ? "Zurzeit ist kein QR-Typ freigegeben."
+              : "Zurzeit ist kein QR-Typ zum Erstellen freigegeben — die unten gezeigten Typen folgen erst in einer späteren Version."}{" "}
+            Unter{" "}
+            <Link href="/verwaltung/typen" className="font-medium underline">
+              Verwaltung → QR-Typen
+            </Link>{" "}
+            lassen sich Typen wieder freigeben.
+          </Notice>
+        </div>
+      ) : null}
+
+      {types.length === 0 ? null : (
+        <ul className="mt-9 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {types.map(({ qrType, usable }) => {
+            const tile = (
+              <>
+                <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-slate-100 text-slate-400"
+                  }
+                >
+                  <Icon name={qrType.icon} className="size-6" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex flex-wrap items-center gap-2">
+                    <span
+                      className={
+                        usable
+                          ? "font-semibold text-slate-900"
+                          : "font-semibold text-slate-500"
+                      }
+                    >
+                      {qrType.title}
+                    </span>
+                    {/* Kein Abzeichen „Beliebt“ mehr: Es stand an jedem
+                        nutzbaren Typ und sagte damit nichts. Hier steht nur
+                        noch, was die Wahl beeinflusst — nämlich wenn ein Typ
+                        zwingend eine Kurz-URL braucht und deshalb nicht ohne
+                        diesen Server funktioniert. */}
+                    {!usable ? (
+                      <Badge tone="soon">Bald verfügbar</Badge>
+                    ) : !qrType.supportsStatic ? (
+                      <Badge tone="neutral">nur dynamisch</Badge>
+                    ) : null}
+                  </span>
+                  <span
+                    className={
+                      usable
+                        ? "mt-1 block text-sm text-slate-600"
+                        : "mt-1 block text-sm text-slate-400"
+                    }
+                  >
+                    {qrType.description}
+                  </span>
+                </span>
+              </>
+            );
+
+            return (
+              <li key={qrType.id}>
+                {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"
+                  >
+                    {tile}
+                  </Link>
+                ) : (
+                  <div
+                    aria-disabled="true"
+                    title={`„${qrType.title}“ folgt in einer späteren Version`}
+                    className="flex h-full cursor-not-allowed items-start gap-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50/60 p-4"
+                  >
+                    {tile}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {usableCount > 0 && usableCount < types.length ? (
+        <p className="mt-8 text-sm text-slate-500">
+          Die übrigen Typen folgen in einer späteren Version. Welche Kacheln
+          hier erscheinen, legst du unter{" "}
+          <Link
+            href="/verwaltung/typen"
+            className="font-medium text-slate-600 underline"
+          >
+            Verwaltung → QR-Typen
+          </Link>{" "}
+          fest.
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { Icon } from "@/components/icons";
+import { UserAdmin } from "@/components/user-admin";
+import { requirePagePermission } from "@/lib/auth/guard";
+import { MIN_PASSWORD_LENGTH } from "@/lib/auth/password";
+
+export const metadata: Metadata = { title: "Benutzer" };
+export const dynamic = "force-dynamic";
+
+export default async function UsersPage() {
+  const actor = await requirePagePermission("instance:manage");
+
+  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" />
+        Verwaltung
+      </Link>
+
+      <div className="mb-7">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+          Benutzer
+        </h1>
+        <p className="mt-2 text-slate-600">
+          Konten anlegen, Passwörter setzen und Zugänge deaktivieren. Wer in
+          welcher Gruppe mitarbeitet, legst du unter{" "}
+          <Link href="/verwaltung/gruppen" className="font-medium underline">
+            Gruppen
+          </Link>{" "}
+          fest.
+        </p>
+      </div>
+
+      <UserAdmin
+        minPasswordLength={MIN_PASSWORD_LENGTH}
+        currentUserId={actor.kind === "user" ? actor.user.id : null}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { DomainAdmin } from "@/components/domain-admin";
+import { Icon } from "@/components/icons";
+import { requirePagePermission } from "@/lib/auth/guard";
+import { baseUrlHostname } from "@/lib/domains";
+
+export const metadata: Metadata = { title: "Domains" };
+export const dynamic = "force-dynamic";
+
+export default async function DomainsPage() {
+  await requirePagePermission("instance:manage");
+
+  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" />
+        Verwaltung
+      </Link>
+
+      <div className="mb-7">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+          Domains
+        </h1>
+        <p className="mt-2 text-slate-600">
+          Unter welchen Adressen Kurz-URLs ausgeliefert werden. Eine Domain
+          kann mehreren Gruppen dienen; der Slug eines Codes ist je Domain
+          eindeutig.
+        </p>
+      </div>
+
+      <DomainAdmin baseUrlHostname={baseUrlHostname()} />
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { GroupAdmin } from "@/components/group-admin";
+import { Icon } from "@/components/icons";
+import { requirePageActor } from "@/lib/auth/guard";
+import { can } from "@/lib/auth/policy";
+
+export const metadata: Metadata = { title: "Gruppen" };
+export const dynamic = "force-dynamic";
+
+export default async function GroupsPage() {
+  // Bewusst nur „angemeldet“: ein Gruppen-Administrator darf seine eigene
+  // Gruppe pflegen, auch ohne Rechte an der Installation.
+  const actor = await requirePageActor();
+  const canCreate = can(actor, "instance:manage");
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
+      <Link
+        href={canCreate ? "/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" />
+        {canCreate ? "Verwaltung" : "Zur Typ-Auswahl"}
+      </Link>
+
+      <div className="mb-7">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+          Gruppen
+        </h1>
+        <p className="mt-2 text-slate-600">
+          Eine Gruppe bündelt Benutzer und die Codes, die ihnen gehören. Jedes
+          Mitglied hat darin eine Rolle: Administrator, Bearbeiter oder
+          Betrachter.
+        </p>
+      </div>
+
+      <GroupAdmin canCreate={canCreate} />
+    </div>
+  );
+}

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

@@ -0,0 +1,116 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+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 { prisma } from "@/lib/db";
+
+export const metadata: Metadata = { title: "Verwaltung" };
+export const dynamic = "force-dynamic";
+
+function Tile({
+  href,
+  icon,
+  title,
+  description,
+  hint,
+}: {
+  href: string;
+  icon: IconName;
+  title: string;
+  description: string;
+  hint: string;
+}) {
+  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"
+    >
+      <span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
+        <Icon name={icon} className="size-6" />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="font-semibold text-slate-900">{title}</span>
+        <span className="mt-1 block text-sm text-slate-600">{description}</span>
+        <span className="mt-2 block text-xs text-slate-500 tabular-nums">
+          {hint}
+        </span>
+      </span>
+    </Link>
+  );
+}
+
+export default async function AdminPage() {
+  await requirePagePermission("instance:manage");
+
+  const [userCount, groupCount, codeCount, domainCount] = await Promise.all([
+    prisma.user.count(),
+    prisma.group.count(),
+    prisma.qrCode.count(),
+    prisma.domain.count(),
+  ]);
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 sm:py-10">
+      <div className="mb-7">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+          Verwaltung
+        </h1>
+        <p className="mt-2 text-slate-600">
+          Benutzer, Gruppen und die verfügbaren QR-Typen.
+        </p>
+      </div>
+
+      {!isAuthEnabled() ? (
+        <div className="mb-6">
+          <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">
+              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">
+              docker compose up -d
+            </code>
+            ausführen. Beim nächsten Aufruf legst du den ersten Administrator
+            an. Benutzer und Gruppen lassen sich schon jetzt vorbereiten.
+          </Notice>
+        </div>
+      ) : null}
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <Tile
+          href="/verwaltung/benutzer"
+          icon="contact"
+          title="Benutzer"
+          description="Konten anlegen, Passwörter zurücksetzen, deaktivieren."
+          hint={`${userCount} ${userCount === 1 ? "Benutzer" : "Benutzer"} angelegt`}
+        />
+        <Tile
+          href="/verwaltung/gruppen"
+          icon="list"
+          title="Gruppen"
+          description="Gruppen anlegen und Mitglieder mit Rollen zuordnen."
+          hint={`${groupCount} ${groupCount === 1 ? "Gruppe" : "Gruppen"}, ${codeCount} ${codeCount === 1 ? "Code" : "Codes"}`}
+        />
+        <Tile
+          href="/verwaltung/domains"
+          icon="globe"
+          title="Domains"
+          description="Adressen, unter denen Kurz-URLs ausgeliefert werden."
+          hint={`${domainCount} ${domainCount === 1 ? "Domain" : "Domains"} registriert`}
+        />
+        <Tile
+          href="/verwaltung/typen"
+          icon="qr"
+          title="QR-Typen"
+          description="Festlegen, welche Typen auf der Startseite erscheinen."
+          hint="15 Typen insgesamt"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { Icon } from "@/components/icons";
+import { TypeSettings, type TypeSetting } from "@/components/type-settings";
+import { requirePagePermission } from "@/lib/auth/guard";
+import { getQrTypeAvailability } from "@/lib/qr/availability";
+
+export const metadata: Metadata = { title: "QR-Typen" };
+
+export const dynamic = "force-dynamic";
+
+export default async function TypeSettingsPage() {
+  await requirePagePermission("instance:manage");
+  const availability = await getQrTypeAvailability();
+
+  const initial: TypeSetting[] = availability.map(
+    ({ qrType, implemented, enabled }) => ({
+      id: qrType.id,
+      title: qrType.title,
+      description: qrType.description,
+      icon: qrType.icon,
+      implemented,
+      enabled,
+    }),
+  );
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 sm:py-10">
+      <Link
+        href="/"
+        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 Typ-Auswahl
+      </Link>
+
+      <div className="mb-7">
+        <h1 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+          QR-Typen
+        </h1>
+        <p className="mt-2 text-slate-600">
+          Lege fest, welche Typen auf der Startseite erscheinen. Abgeschaltete
+          Typen sind komplett ausgeblendet und lassen sich nicht mehr neu
+          anlegen.
+        </p>
+        <p className="mt-2 text-sm text-slate-500">
+          Bereits gespeicherte dynamische Codes bleiben davon unberührt: sie
+          leiten weiter und lassen sich weiter bearbeiten. Ein gedruckter Code
+          wird durch das Abschalten seines Typs also nicht ungültig.
+        </p>
+      </div>
+
+      <TypeSettings initial={initial} />
+    </div>
+  );
+}

src/app/api/admin/domains/[id]/route.ts

@@ -0,0 +1,160 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import { requirePermission } from "@/lib/auth/policy";
+import { prisma } from "@/lib/db";
+import { DEFAULT_DOMAIN_ID } from "@/lib/domains";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+type Context = { params: Promise<{ id: string }> };
+
+const updateSchema = z.object({
+  label: z.string().trim().max(80).nullable().optional(),
+  isActive: z.boolean().optional(),
+  /**
+   * Vollständige Liste der Gruppen, die diese Domain nutzen dürfen. Wer
+   * fehlt, verliert die Zuteilung.
+   */
+  grants: z
+    .array(
+      z.object({
+        groupId: z.string().trim().min(1),
+        isDefault: z.boolean().default(false),
+      }),
+    )
+    .optional(),
+});
+
+export async function PATCH(
+  request: NextRequest,
+  context: Context,
+): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+    const { id } = await context.params;
+
+    const domain = await prisma.domain.findUnique({ where: { id } });
+    if (!domain) {
+      throw new QrRequestError("Diese Domain existiert nicht (mehr).", 404);
+    }
+
+    const parsed = updateSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    if (parsed.data.label !== undefined || parsed.data.isActive !== undefined) {
+      await prisma.domain.update({
+        where: { id },
+        data: {
+          ...(parsed.data.label !== undefined
+            ? { label: parsed.data.label || null }
+            : {}),
+          ...(parsed.data.isActive !== undefined
+            ? { isActive: parsed.data.isActive }
+            : {}),
+        },
+      });
+    }
+
+    if (parsed.data.grants !== undefined) {
+      const grants = parsed.data.grants;
+
+      const known = await prisma.group.findMany({
+        where: { id: { in: grants.map((g) => g.groupId) } },
+        select: { id: true },
+      });
+      if (known.length !== grants.length) {
+        throw new QrRequestError(
+          "Mindestens eine der ausgewählten Gruppen existiert nicht mehr.",
+        );
+      }
+
+      // Eine Gruppe, die diese Domain noch für Codes verwendet, darf die
+      // Zuteilung nicht verlieren — sonst zeigten deren Kurz-URLs auf eine
+      // Domain, die der Gruppe gar nicht mehr gehört.
+      const stillInUse = await prisma.qrCode.findMany({
+        where: { domainId: id, groupId: { notIn: grants.map((g) => g.groupId) } },
+        select: { group: { select: { name: true } } },
+        distinct: ["groupId"],
+      });
+      if (stillInUse.length > 0) {
+        const names = stillInUse.map((entry) => entry.group.name).join(", ");
+        throw new QrRequestError(
+          `Diese Gruppen haben noch Codes unter dieser Domain: ${names}. Solange die Codes bestehen, muss die Zuteilung bleiben.`,
+        );
+      }
+
+      await prisma.$transaction([
+        prisma.domainGrant.deleteMany({
+          where: { domainId: id, groupId: { notIn: grants.map((g) => g.groupId) } },
+        }),
+        ...grants.map((grant) =>
+          prisma.domainGrant.upsert({
+            where: {
+              domainId_groupId: { domainId: id, groupId: grant.groupId },
+            },
+            create: {
+              domainId: id,
+              groupId: grant.groupId,
+              isDefault: grant.isDefault,
+            },
+            update: { isDefault: grant.isDefault },
+          }),
+        ),
+        // Je Gruppe darf nur eine Domain die Voreinstellung sein.
+        ...grants
+          .filter((grant) => grant.isDefault)
+          .map((grant) =>
+            prisma.domainGrant.updateMany({
+              where: { groupId: grant.groupId, domainId: { not: id } },
+              data: { isDefault: false },
+            }),
+          ),
+      ]);
+    }
+
+    return Response.json({ ok: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function DELETE(
+  _request: NextRequest,
+  context: Context,
+): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+    const { id } = await context.params;
+
+    if (id === DEFAULT_DOMAIN_ID) {
+      throw new QrRequestError(
+        "Die Standard-Domain lässt sich nicht löschen — sie fängt Aufrufe über nicht registrierte Adressen ab.",
+      );
+    }
+
+    const domain = await prisma.domain.findUnique({
+      where: { id },
+      include: { _count: { select: { codes: true } } },
+    });
+    if (!domain) {
+      throw new QrRequestError("Diese Domain existiert nicht (mehr).", 404);
+    }
+
+    if (domain._count.codes > 0) {
+      throw new QrRequestError(
+        `Unter dieser Domain liegen noch ${domain._count.codes} ${domain._count.codes === 1 ? "Code" : "Codes"}. Sie zu löschen würde gedruckte Codes ins Leere laufen lassen — schalte sie stattdessen ab, wenn sie nicht mehr genutzt werden soll.`,
+      );
+    }
+
+    await prisma.domain.delete({ where: { id } });
+    return new Response(null, { status: 204 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

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

@@ -0,0 +1,107 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import { requirePermission } from "@/lib/auth/policy";
+import { prisma } from "@/lib/db";
+import { ensureDefaultDomain, normalizeHostname } from "@/lib/domains";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Ein Hostname, optional mit Port. Bewusst ohne Schema und ohne Pfad — das
+ * ist der Wert, den ein Browser im `Host`-Header sendet.
+ */
+const hostnameSchema = z
+  .string()
+  .trim()
+  .min(1, { error: "Bitte gib einen Hostnamen ein." })
+  .max(253, { error: "Der Hostname ist zu lang." })
+  .transform(normalizeHostname)
+  .refine((value) => /^[a-z0-9.-]+(:\d{1,5})?$/.test(value), {
+    error:
+      "Das ist kein gültiger Hostname. Erwartet wird z. B. qr.example.com — ohne https:// und ohne Pfad.",
+  })
+  .refine((value) => value.includes(".") || value.startsWith("localhost"), {
+    error: "Bitte gib den vollständigen Hostnamen an, z. B. qr.example.com",
+  });
+
+const createSchema = z.object({
+  hostname: hostnameSchema,
+  label: z.string().trim().max(80).optional(),
+});
+
+export async function GET(): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+
+    // Sorgt dafür, dass die Standard-Domain den Hostnamen aus BASE_URL trägt.
+    await ensureDefaultDomain();
+
+    const domains = await prisma.domain.findMany({
+      orderBy: { hostname: "asc" },
+      include: {
+        grants: { include: { group: { select: { id: true, name: true } } } },
+        _count: { select: { codes: true } },
+      },
+    });
+
+    const groups = await prisma.group.findMany({
+      orderBy: { name: "asc" },
+      select: { id: true, name: true },
+    });
+
+    return Response.json({
+      domains: domains.map((domain) => ({
+        id: domain.id,
+        hostname: domain.hostname,
+        label: domain.label,
+        isActive: domain.isActive,
+        codeCount: domain._count.codes,
+        grants: domain.grants.map((grant) => ({
+          groupId: grant.group.id,
+          groupName: grant.group.name,
+          isDefault: grant.isDefault,
+        })),
+      })),
+      groups,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function POST(request: NextRequest): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+
+    const parsed = createSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    const existing = await prisma.domain.findUnique({
+      where: { hostname: parsed.data.hostname },
+      select: { id: true },
+    });
+    if (existing) {
+      throw new QrRequestError("Diese Domain ist bereits registriert.", 409);
+    }
+
+    const domain = await prisma.domain.create({
+      data: {
+        hostname: parsed.data.hostname,
+        label: parsed.data.label || null,
+      },
+    });
+
+    return Response.json(
+      { domain: { id: domain.id, hostname: domain.hostname } },
+      { status: 201 },
+    );
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

src/app/api/admin/groups/[id]/route.ts

@@ -0,0 +1,143 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import { DEFAULT_GROUP_ID } from "@/lib/auth/groups";
+import { requirePermission } from "@/lib/auth/policy";
+import { prisma } from "@/lib/db";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+type Context = { params: Promise<{ id: string }> };
+
+const updateSchema = z.object({
+  name: z.string().trim().min(1).max(80).optional(),
+  description: z.string().trim().max(300).nullable().optional(),
+  /**
+   * Vollständige Mitgliederliste. Wer fehlt, verliert die Mitgliedschaft —
+   * so bleibt der Zustand nach dem Speichern eindeutig.
+   */
+  members: z
+    .array(
+      z.object({
+        userId: z.string().trim().min(1),
+        role: z.enum(["ADMIN", "EDITOR", "VIEWER"], {
+          error: "Ungültige Rolle.",
+        }),
+      }),
+    )
+    .optional(),
+});
+
+export async function PATCH(
+  request: NextRequest,
+  context: Context,
+): Promise<Response> {
+  try {
+    const actor = await getActor();
+    const { id } = await context.params;
+
+    const group = await prisma.group.findUnique({ where: { id } });
+    if (!group) {
+      throw new QrRequestError("Diese Gruppe existiert nicht (mehr).", 404);
+    }
+
+    const parsed = updateSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    // Name und Beschreibung sind Sache der Instanz-Verwaltung, Mitglieder
+    // darf auch ein Administrator der Gruppe selbst pflegen.
+    if (parsed.data.name !== undefined || parsed.data.description !== undefined) {
+      requirePermission(actor, "instance:manage");
+    }
+    if (parsed.data.members !== undefined) {
+      requirePermission(actor, "group:manage", { groupId: id });
+    }
+
+    if (parsed.data.name !== undefined || parsed.data.description !== undefined) {
+      await prisma.group.update({
+        where: { id },
+        data: {
+          ...(parsed.data.name !== undefined ? { name: parsed.data.name } : {}),
+          ...(parsed.data.description !== undefined
+            ? { description: parsed.data.description || null }
+            : {}),
+        },
+      });
+    }
+
+    if (parsed.data.members !== undefined) {
+      const members = parsed.data.members;
+
+      const known = await prisma.user.findMany({
+        where: { id: { in: members.map((m) => m.userId) } },
+        select: { id: true },
+      });
+      if (known.length !== members.length) {
+        throw new QrRequestError(
+          "Mindestens einer der ausgewählten Benutzer existiert nicht mehr.",
+        );
+      }
+
+      // In einer Transaktion, damit die Gruppe nie ohne Mitglieder dasteht,
+      // weil das Setzen der neuen Liste fehlgeschlagen ist.
+      await prisma.$transaction([
+        prisma.membership.deleteMany({
+          where: { groupId: id, userId: { notIn: members.map((m) => m.userId) } },
+        }),
+        ...members.map((member) =>
+          prisma.membership.upsert({
+            where: {
+              userId_groupId: { userId: member.userId, groupId: id },
+            },
+            create: { userId: member.userId, groupId: id, role: member.role },
+            update: { role: member.role },
+          }),
+        ),
+      ]);
+    }
+
+    return Response.json({ ok: true });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function DELETE(
+  _request: NextRequest,
+  context: Context,
+): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+    const { id } = await context.params;
+
+    if (id === DEFAULT_GROUP_ID) {
+      throw new QrRequestError(
+        "Die Standardgruppe lässt sich nicht löschen — ohne sie hätten Codes bei ausgeschalteter Anmeldung keine Heimat.",
+      );
+    }
+
+    const group = await prisma.group.findUnique({
+      where: { id },
+      include: { _count: { select: { codes: true } } },
+    });
+    if (!group) {
+      throw new QrRequestError("Diese Gruppe existiert nicht (mehr).", 404);
+    }
+
+    if (group._count.codes > 0) {
+      throw new QrRequestError(
+        `Diese Gruppe enthält noch ${group._count.codes} ${group._count.codes === 1 ? "Code" : "Codes"}. Lösche oder verschiebe sie zuerst — sonst würden gedruckte Codes ins Leere führen.`,
+      );
+    }
+
+    await prisma.group.delete({ where: { id } });
+    return new Response(null, { status: 204 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

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

@@ -0,0 +1,90 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import { can, requirePermission, visibleGroupIds } from "@/lib/auth/policy";
+import { prisma } from "@/lib/db";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+const createSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, { error: "Bitte gib einen Namen für die Gruppe ein." })
+    .max(80, { error: "Der Name darf höchstens 80 Zeichen lang sein." }),
+  description: z.string().trim().max(300).optional(),
+});
+
+/** Gruppen samt Mitgliedern — gefiltert nach dem, was der Actor sehen darf. */
+export async function GET(): Promise<Response> {
+  try {
+    const actor = await getActor();
+    if (actor.kind === "anonymous") {
+      throw new QrRequestError("Bitte melde dich an.", 401);
+    }
+
+    const visible = visibleGroupIds(actor);
+    const groups = await prisma.group.findMany({
+      where: visible === null ? undefined : { id: { in: visible } },
+      orderBy: { name: "asc" },
+      include: {
+        memberships: {
+          include: { user: { select: { id: true, email: true, name: true } } },
+          orderBy: { createdAt: "asc" },
+        },
+        _count: { select: { codes: true } },
+      },
+    });
+
+    return Response.json({
+      groups: groups.map((group) => ({
+        id: group.id,
+        name: group.name,
+        description: group.description,
+        codeCount: group._count.codes,
+        canManage: can(actor, "group:manage", { groupId: group.id }),
+        members: group.memberships.map((m) => ({
+          userId: m.user.id,
+          email: m.user.email,
+          name: m.user.name,
+          role: m.role,
+        })),
+      })),
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function POST(request: NextRequest): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+
+    const parsed = createSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    const existing = await prisma.group.findUnique({
+      where: { name: parsed.data.name },
+      select: { id: true },
+    });
+    if (existing) {
+      throw new QrRequestError("Eine Gruppe mit diesem Namen gibt es schon.", 409);
+    }
+
+    const group = await prisma.group.create({
+      data: {
+        name: parsed.data.name,
+        description: parsed.data.description || null,
+      },
+    });
+
+    return Response.json({ group: { id: group.id, name: group.name } }, { status: 201 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

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

@@ -0,0 +1,56 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import { requirePermission } from "@/lib/auth/policy";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import {
+  getQrTypeAvailability,
+  setQrTypeEnabled,
+} from "@/lib/qr/availability";
+import { QR_TYPE_IDS } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+const updateSchema = z.object({
+  type: z.enum(QR_TYPE_IDS, { error: "Unbekannter QR-Typ." }),
+  enabled: z.boolean({ error: "Der Schalter muss wahr oder falsch sein." }),
+});
+
+/** Zustand aller QR-Typen für die Verwaltung. */
+export async function GET(): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+    const types = await getQrTypeAvailability();
+    return Response.json({
+      types: types.map(({ qrType, implemented, enabled, usable }) => ({
+        id: qrType.id,
+        title: qrType.title,
+        description: qrType.description,
+        icon: qrType.icon,
+        implemented,
+        enabled,
+        usable,
+      })),
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+/** Einen Typ freigeben oder abschalten. */
+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 setQrTypeEnabled(parsed.data.type, parsed.data.enabled);
+    return Response.json({ type: parsed.data.type, enabled: parsed.data.enabled });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

src/app/api/admin/users/[id]/route.ts

@@ -0,0 +1,175 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import {
+  describePasswordRules,
+  hashPassword,
+  MAX_PASSWORD_LENGTH,
+  MIN_PASSWORD_LENGTH,
+} from "@/lib/auth/password";
+import { requirePermission } from "@/lib/auth/policy";
+import { destroyAllSessions } from "@/lib/auth/session";
+import { prisma } from "@/lib/db";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+type Context = { params: Promise<{ id: string }> };
+
+const updateSchema = z.object({
+  name: z.string().trim().max(120).nullable().optional(),
+  isActive: z.boolean().optional(),
+  isInstanceAdmin: z.boolean().optional(),
+  password: z
+    .string()
+    .min(MIN_PASSWORD_LENGTH, {
+      error: `Das Passwort ist zu kurz. ${describePasswordRules()}`,
+    })
+    .max(MAX_PASSWORD_LENGTH, {
+      error: `Das Passwort darf höchstens ${MAX_PASSWORD_LENGTH} Zeichen lang sein.`,
+    })
+    .optional(),
+  /** Sperre nach Fehlversuchen aufheben. */
+  unlock: z.boolean().optional(),
+});
+
+/**
+ * Verhindert, dass sich die Installation selbst aussperrt: es muss immer
+ * mindestens ein aktiver Administrator übrig bleiben.
+ */
+async function assertNotLastAdmin(userId: string, action: string) {
+  const user = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { isInstanceAdmin: true, isActive: true },
+  });
+  if (!user?.isInstanceAdmin || !user.isActive) return;
+
+  const others = await prisma.user.count({
+    where: { isInstanceAdmin: true, isActive: true, id: { not: userId } },
+  });
+  if (others === 0) {
+    throw new QrRequestError(
+      `Das ist der letzte aktive Administrator — ${action} würde die Installation unbedienbar machen. Lege zuerst einen weiteren Administrator an.`,
+    );
+  }
+}
+
+export async function PATCH(
+  request: NextRequest,
+  context: Context,
+): Promise<Response> {
+  try {
+    const actor = await getActor();
+    requirePermission(actor, "instance:manage");
+
+    const { id } = await context.params;
+    const parsed = updateSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    const target = await prisma.user.findUnique({ where: { id } });
+    if (!target) {
+      throw new QrRequestError("Dieser Benutzer existiert nicht (mehr).", 404);
+    }
+
+    const data: {
+      name?: string | null;
+      isActive?: boolean;
+      isInstanceAdmin?: boolean;
+      passwordHash?: string;
+      failedLogins?: number;
+      lockedUntil?: Date | null;
+    } = {};
+
+    if (parsed.data.name !== undefined) {
+      data.name = parsed.data.name || null;
+    }
+
+    if (parsed.data.isActive === false) {
+      await assertNotLastAdmin(id, "das Deaktivieren");
+      data.isActive = false;
+    } else if (parsed.data.isActive === true) {
+      data.isActive = true;
+    }
+
+    if (parsed.data.isInstanceAdmin === false) {
+      await assertNotLastAdmin(id, "der Entzug der Administratorrechte");
+      data.isInstanceAdmin = false;
+    } else if (parsed.data.isInstanceAdmin === true) {
+      data.isInstanceAdmin = true;
+    }
+
+    if (parsed.data.password) {
+      data.passwordHash = await hashPassword(parsed.data.password);
+      data.failedLogins = 0;
+      data.lockedUntil = null;
+    }
+
+    if (parsed.data.unlock) {
+      data.failedLogins = 0;
+      data.lockedUntil = null;
+    }
+
+    if (Object.keys(data).length === 0) {
+      return jsonError("Es wurden keine Änderungen übermittelt.");
+    }
+
+    const updated = await prisma.user.update({ where: { id }, data });
+
+    // Deaktivieren oder ein neues Passwort beenden laufende Sitzungen —
+    // sonst bliebe der Betroffene angemeldet.
+    if (data.isActive === false || data.passwordHash) {
+      await destroyAllSessions(id);
+    }
+
+    return Response.json({
+      user: {
+        id: updated.id,
+        email: updated.email,
+        isActive: updated.isActive,
+        isInstanceAdmin: updated.isInstanceAdmin,
+      },
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function DELETE(
+  _request: NextRequest,
+  context: Context,
+): Promise<Response> {
+  try {
+    const actor = await getActor();
+    requirePermission(actor, "instance:manage");
+
+    const { id } = await context.params;
+
+    if (actor.kind === "user" && actor.user.id === id) {
+      throw new QrRequestError(
+        "Du kannst dein eigenes Konto nicht löschen.",
+      );
+    }
+
+    const target = await prisma.user.findUnique({
+      where: { id },
+      select: { id: true },
+    });
+    if (!target) {
+      throw new QrRequestError("Dieser Benutzer existiert nicht (mehr).", 404);
+    }
+
+    await assertNotLastAdmin(id, "das Löschen");
+
+    // Die Codes des Benutzers bleiben bestehen; nur der Ersteller entfällt
+    // (onDelete: SetNull). Gedruckte Codes dürfen nicht daran hängen, wer
+    // sie einmal angelegt hat.
+    await prisma.user.delete({ where: { id } });
+    return new Response(null, { status: 204 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

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

@@ -0,0 +1,111 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor } from "@/lib/auth/actor";
+import {
+  describePasswordRules,
+  hashPassword,
+  MAX_PASSWORD_LENGTH,
+  MIN_PASSWORD_LENGTH,
+} from "@/lib/auth/password";
+import { requirePermission } from "@/lib/auth/policy";
+import { prisma } from "@/lib/db";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+const createSchema = z.object({
+  email: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .min(1, { error: "Bitte gib eine E-Mail-Adresse ein." })
+    .max(254, { error: "Die Adresse ist zu lang." })
+    .refine((value) => /^[^\s@]+@[^\s@.]+\.[^\s@]+$/.test(value), {
+      error: "Das ist keine gültige E-Mail-Adresse.",
+    }),
+  name: z.string().trim().max(120).optional(),
+  password: z
+  .string()
+  .min(MIN_PASSWORD_LENGTH, { error: `Das Passwort ist zu kurz. ${describePasswordRules()}`, })
+  .max(MAX_PASSWORD_LENGTH, {
+    error: `Das Passwort darf höchstens ${MAX_PASSWORD_LENGTH} Zeichen lang sein.`,
+  }),
+  isInstanceAdmin: z.boolean().default(false),
+});
+
+export async function GET(): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+
+    const users = await prisma.user.findMany({
+      orderBy: [{ isInstanceAdmin: "desc" }, { email: "asc" }],
+      include: {
+        memberships: { include: { group: { select: { id: true, name: true } } } },
+        _count: { select: { sessions: true } },
+      },
+    });
+
+    return Response.json({
+      users: users.map((user) => ({
+        id: user.id,
+        email: user.email,
+        name: user.name,
+        isInstanceAdmin: user.isInstanceAdmin,
+        isActive: user.isActive,
+        isLocked: Boolean(
+          user.lockedUntil && user.lockedUntil.getTime() > Date.now(),
+        ),
+        lastLoginAt: user.lastLoginAt?.toISOString() ?? null,
+        createdAt: user.createdAt.toISOString(),
+        activeSessions: user._count.sessions,
+        memberships: user.memberships.map((m) => ({
+          groupId: m.group.id,
+          groupName: m.group.name,
+          role: m.role,
+        })),
+      })),
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function POST(request: NextRequest): Promise<Response> {
+  try {
+    requirePermission(await getActor(), "instance:manage");
+
+    const parsed = createSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    const existing = await prisma.user.findUnique({
+      where: { email: parsed.data.email },
+      select: { id: true },
+    });
+    if (existing) {
+      throw new QrRequestError(
+        "Diese E-Mail-Adresse ist bereits vergeben.",
+        409,
+      );
+    }
+
+    const user = await prisma.user.create({
+      data: {
+        email: parsed.data.email,
+        name: parsed.data.name || null,
+        passwordHash: await hashPassword(parsed.data.password),
+        isInstanceAdmin: parsed.data.isInstanceAdmin,
+      },
+    });
+
+    return Response.json(
+      { user: { id: user.id, email: user.email } },
+      { status: 201 },
+    );
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

src/app/api/auth/oidc/callback/route.ts

@@ -0,0 +1,226 @@
+import type { NextRequest } from "next/server";
+import { cookies } from "next/headers";
+
+import { isAuthEnabled } from "@/lib/auth/actor";
+import {
+  exchangeCode,
+  getOidcConfig,
+  isOidcEnabled,
+  OIDC_FLOW_COOKIE,
+  type OidcConfig,
+  type OidcIdentity,
+} from "@/lib/auth/oidc";
+import { createSession } from "@/lib/auth/session";
+import { prisma } from "@/lib/db";
+import { getBaseUrl } from "@/lib/env";
+
+export const dynamic = "force-dynamic";
+
+/** Zurück zur Anmeldeseite, mit einer Meldung, die dort angezeigt wird. */
+function zurueckMitFehler(meldung: string): Response {
+  const ziel = new URL("/anmelden", getBaseUrl());
+  ziel.searchParams.set("fehler", meldung);
+  return Response.redirect(ziel.toString(), 302);
+}
+
+type FlowState = { state: string; nonce: string; codeVerifier: string };
+
+/**
+ * Erkennt Fehler, deren Meldung an den Browser darf. Wie in `lib/http.ts`
+ * über eine Eigenschaft statt `instanceof` — die Fehlerklassen landen in
+ * mehreren Bündeln und hätten dort verschiedene Identitäten.
+ */
+function istBenutzerfehler(error: unknown): error is Error {
+  return (
+    error instanceof Error &&
+    (error as Error & { userFacing?: unknown }).userFacing === true
+  );
+}
+
+function readFlow(raw: string | undefined): FlowState | null {
+  if (!raw) return null;
+  try {
+    const wert = JSON.parse(raw) as Partial<FlowState>;
+    if (
+      typeof wert.state === "string" &&
+      typeof wert.nonce === "string" &&
+      typeof wert.codeVerifier === "string"
+    ) {
+      return wert as FlowState;
+    }
+  } catch {
+    // Unbrauchbarer Cookie — behandeln wie keiner.
+  }
+  return null;
+}
+
+/**
+ * Legt das Konto an oder findet es wieder.
+ *
+ * Wiedererkannt wird über die Kennung des Anbieters (`sub`), nicht über die
+ * E-Mail-Adresse — Adressen ändern sich, die Kennung nicht. Ein bestehendes
+ * Konto mit derselben Adresse wird beim ersten Mal verknüpft, damit aus einem
+ * lokal angelegten Administrator nicht plötzlich ein zweites Konto wird.
+ */
+async function findeOderLegeAn(
+  identity: OidcIdentity,
+  config: OidcConfig,
+): Promise<{ id: string; isActive: boolean } | { fehler: string }> {
+  const nachSubject = await prisma.user.findUnique({
+    where: { oidcSubject: identity.subject },
+  });
+
+  const istAdmin = config.adminGroup
+    ? identity.groups.includes(config.adminGroup)
+    : undefined;
+
+  if (nachSubject) {
+    const aktualisiert = await prisma.user.update({
+      where: { id: nachSubject.id },
+      data: {
+        email: identity.email,
+        name: identity.name ?? nachSubject.name,
+        lastLoginAt: new Date(),
+        failedLogins: 0,
+        lockedUntil: null,
+        // Nur wenn eine Admin-Gruppe konfiguriert ist, entscheidet der
+        // Anbieter darüber. Sonst bleibt es bei dem, was hier eingestellt ist.
+        ...(istAdmin === undefined ? {} : { isInstanceAdmin: istAdmin }),
+      },
+    });
+    return { id: aktualisiert.id, isActive: aktualisiert.isActive };
+  }
+
+  const nachEmail = await prisma.user.findUnique({
+    where: { email: identity.email },
+  });
+
+  if (nachEmail) {
+    // Verknüpfen nur bei bestätigter Adresse: Sonst könnte sich beim Anbieter
+    // jemand eine fremde Adresse eintragen und damit ein hiesiges Konto
+    // übernehmen.
+    if (!identity.emailVerified) {
+      return {
+        fehler:
+          "Es gibt hier schon ein Konto mit dieser E-Mail-Adresse, der Anbieter hat sie aber nicht bestätigt.",
+      };
+    }
+    const verknuepft = await prisma.user.update({
+      where: { id: nachEmail.id },
+      data: {
+        oidcSubject: identity.subject,
+        name: identity.name ?? nachEmail.name,
+        lastLoginAt: new Date(),
+        failedLogins: 0,
+        lockedUntil: null,
+        ...(istAdmin === undefined ? {} : { isInstanceAdmin: istAdmin }),
+      },
+    });
+    return { id: verknuepft.id, isActive: verknuepft.isActive };
+  }
+
+  // Neues Konto. Ohne Passwort — angemeldet wird über den Anbieter.
+  const standardgruppe = await prisma.group.findFirst({
+    orderBy: { createdAt: "asc" },
+    select: { id: true },
+  });
+
+  // Der erste Mensch, der sich überhaupt anmeldet, wird Administrator —
+  // sonst gäbe es bei `OIDC_ONLY=true` niemanden, der die Verwaltung öffnen
+  // kann. Das entspricht der Ersteinrichtung bei der Passwort-Anmeldung.
+  const istErster = (await prisma.user.count()) === 0;
+
+  const angelegt = await prisma.user.create({
+    data: {
+      email: identity.email,
+      name: identity.name,
+      passwordHash: null,
+      oidcSubject: identity.subject,
+      isInstanceAdmin: istAdmin ?? istErster,
+      lastLoginAt: new Date(),
+      memberships: standardgruppe
+        ? { create: { groupId: standardgruppe.id, role: config.defaultRole } }
+        : undefined,
+    },
+  });
+
+  return { id: angelegt.id, isActive: angelegt.isActive };
+}
+
+export async function GET(request: NextRequest): Promise<Response> {
+  const store = await cookies();
+
+  try {
+    if (!isAuthEnabled() || !isOidcEnabled()) {
+      return zurueckMitFehler("Die Anmeldung über den Anbieter ist ausgeschaltet.");
+    }
+
+    const params = request.nextUrl.searchParams;
+
+    // Der Anbieter meldet einen Abbruch oder eine verweigerte Freigabe.
+    const fehler = params.get("error");
+    if (fehler) {
+      const beschreibung = params.get("error_description");
+      console.error("OIDC: Anbieter meldet Fehler:", fehler, beschreibung);
+      return zurueckMitFehler(
+        fehler === "access_denied"
+          ? "Der Anbieter hat die Anmeldung abgelehnt. Ist dein Konto für diese Anwendung freigegeben?"
+          : "Die Anmeldung beim Anbieter ist fehlgeschlagen.",
+      );
+    }
+
+    const flow = readFlow(store.get(OIDC_FLOW_COOKIE)?.value);
+    if (!flow) {
+      return zurueckMitFehler(
+        "Der Anmeldevorgang ist abgelaufen. Bitte noch einmal beginnen.",
+      );
+    }
+
+    const code = params.get("code");
+    const state = params.get("state");
+
+    if (!code || !state) {
+      return zurueckMitFehler("Die Antwort des Anbieters war unvollständig.");
+    }
+    if (state !== flow.state) {
+      // Klassischer CSRF-Schutz: Die Antwort gehört nicht zu diesem Aufruf.
+      return zurueckMitFehler(
+        "Die Antwort des Anbieters passt nicht zu diesem Anmeldevorgang.",
+      );
+    }
+
+    const config = getOidcConfig();
+    const identity = await exchangeCode({
+      config,
+      code,
+      codeVerifier: flow.codeVerifier,
+      nonce: flow.nonce,
+    });
+
+    const ergebnis = await findeOderLegeAn(identity, config);
+    if ("fehler" in ergebnis) {
+      return zurueckMitFehler(ergebnis.fehler);
+    }
+    if (!ergebnis.isActive) {
+      return zurueckMitFehler(
+        "Dieses Konto ist in der Anwendung deaktiviert. Bitte wende dich an einen Administrator.",
+      );
+    }
+
+    await createSession(ergebnis.id);
+
+    const ziel = new URL("/", getBaseUrl());
+    return Response.redirect(ziel.toString(), 302);
+  } catch (error) {
+    console.error("OIDC: Rückmeldung konnte nicht verarbeitet werden:", error);
+    // Nur Meldungen, die ausdrücklich für die Oberfläche gedacht sind —
+    // alles andere könnte Interna verraten.
+    const meldung = istBenutzerfehler(error)
+      ? error.message
+      : "Die Anmeldung ist fehlgeschlagen.";
+    return zurueckMitFehler(meldung);
+  } finally {
+    // In jedem Fall aufräumen — der Cookie ist nur für einen Durchlauf gut.
+    store.delete(OIDC_FLOW_COOKIE);
+  }
+}

src/app/api/auth/oidc/start/route.ts

@@ -0,0 +1,79 @@
+import { createHash, randomBytes } from "node:crypto";
+import { cookies } from "next/headers";
+
+import { isAuthEnabled } from "@/lib/auth/actor";
+import {
+  discover,
+  getOidcConfig,
+  isOidcEnabled,
+  OIDC_FLOW_COOKIE,
+  OIDC_FLOW_MINUTES,
+  redirectUri,
+} from "@/lib/auth/oidc";
+import { errorResponse } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+function base64url(buffer: Buffer): string {
+  return buffer.toString("base64url");
+}
+
+/**
+ * Schickt den Browser zum Anbieter.
+ *
+ * Mit PKCE (RFC 7636): Der Code allein nützt niemandem, weil beim Einlösen
+ * zusätzlich das Geheimnis aus diesem Aufruf nötig ist. Das schützt auch dann,
+ * wenn der Code unterwegs sichtbar wird — etwa in einem Proxy-Protokoll.
+ */
+export async function GET(): Promise<Response> {
+  try {
+    if (!isAuthEnabled()) {
+      throw new QrRequestError(
+        "Die Anmeldung ist ausgeschaltet (AUTH_ENABLED=false).",
+        400,
+      );
+    }
+    if (!isOidcEnabled()) {
+      throw new QrRequestError(
+        "Die Anmeldung über einen externen Anbieter ist ausgeschaltet (OIDC_ENABLED=false).",
+        400,
+      );
+    }
+
+    const config = getOidcConfig();
+    const meta = await discover(config.issuer);
+
+    const state = base64url(randomBytes(32));
+    const nonce = base64url(randomBytes(32));
+    const codeVerifier = base64url(randomBytes(32));
+    const codeChallenge = base64url(
+      createHash("sha256").update(codeVerifier).digest(),
+    );
+
+    const store = await cookies();
+    store.set(OIDC_FLOW_COOKIE, JSON.stringify({ state, nonce, codeVerifier }), {
+      httpOnly: true,
+      // `lax` genügt: Der Anbieter schickt per GET zurück, dabei wird der
+      // Cookie mitgeschickt.
+      sameSite: "lax",
+      path: "/",
+      secure: (process.env.BASE_URL ?? "").startsWith("https://"),
+      maxAge: OIDC_FLOW_MINUTES * 60,
+    });
+
+    const ziel = new URL(meta.authorization_endpoint);
+    ziel.searchParams.set("response_type", "code");
+    ziel.searchParams.set("client_id", config.clientId);
+    ziel.searchParams.set("redirect_uri", redirectUri());
+    ziel.searchParams.set("scope", config.scopes);
+    ziel.searchParams.set("state", state);
+    ziel.searchParams.set("nonce", nonce);
+    ziel.searchParams.set("code_challenge", codeChallenge);
+    ziel.searchParams.set("code_challenge_method", "S256");
+
+    return Response.redirect(ziel.toString(), 302);
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

src/app/api/auth/route.ts

@@ -0,0 +1,339 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { getActor, isAuthEnabled, isSetupOpen } from "@/lib/auth/actor";
+import {
+  describePasswordRules,
+  hashPassword,
+  MAX_PASSWORD_LENGTH,
+  MIN_PASSWORD_LENGTH,
+  needsRehash,
+  verifyPassword,
+} from "@/lib/auth/password";
+import {
+  createSession,
+  destroyAllSessions,
+  destroySession,
+} from "@/lib/auth/session";
+import {
+  clearAttempts,
+  requestOrigin,
+  tooManyAttempts,
+} from "@/lib/auth/throttle";
+import { prisma } from "@/lib/db";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { QrRequestError } from "@/lib/qr/type-module";
+
+export const dynamic = "force-dynamic";
+
+/** Sperrdauer nach zu vielen Fehlversuchen. */
+const MAX_ATTEMPTS = 8;
+const LOCK_MINUTES = 15;
+
+/**
+ * Wird gegen einen nicht vorhandenen Benutzer gerechnet, damit die
+ * Antwortzeit nicht verrät, ob es die Adresse gibt. Die Parameter entsprechen
+ * denen echter Hashes — sonst wäre die Rechnung zu schnell.
+ */
+const DUMMY_HASH = "scrypt$131072$8$1$AAAAAAAAAAAAAAAAAAAAAA==$AAAA";
+
+const emailSchema = z
+  .string()
+  .trim()
+  .toLowerCase()
+  .min(1, { error: "Bitte gib deine E-Mail-Adresse ein." })
+  .max(254, { error: "Die Adresse ist zu lang." })
+  .refine((value) => /^[^\s@]+@[^\s@.]+\.[^\s@]+$/.test(value), {
+    error: "Das ist keine gültige E-Mail-Adresse.",
+  });
+
+const loginSchema = z.object({
+  action: z.literal("login"),
+  email: emailSchema,
+  password: z
+    .string()
+    .min(1, { error: "Bitte gib dein Passwort ein." })
+    .max(MAX_PASSWORD_LENGTH, { error: "Das Passwort ist zu lang." }),
+});
+
+const setupSchema = z.object({
+  action: z.literal("setup"),
+  email: emailSchema,
+  name: z.string().trim().max(120).optional(),
+  password: z
+    .string()
+    .min(MIN_PASSWORD_LENGTH, {
+      error: `Das Passwort ist zu kurz. ${describePasswordRules()}`,
+    })
+    .max(MAX_PASSWORD_LENGTH, {
+      error: `Das Passwort darf höchstens ${MAX_PASSWORD_LENGTH} Zeichen lang sein.`,
+    }),
+});
+
+const logoutSchema = z.object({ action: z.literal("logout") });
+
+const changePasswordSchema = z.object({
+  action: z.literal("change-password"),
+  currentPassword: z
+    .string()
+    .min(1, { error: "Bitte gib dein bisheriges Passwort ein." })
+    .max(MAX_PASSWORD_LENGTH, { error: "Das Passwort ist zu lang." }),
+  newPassword: z
+    .string()
+    .min(MIN_PASSWORD_LENGTH, {
+      error: `Das neue Passwort ist zu kurz. ${describePasswordRules()}`,
+    })
+    .max(MAX_PASSWORD_LENGTH, {
+      error: `Das Passwort darf höchstens ${MAX_PASSWORD_LENGTH} Zeichen lang sein.`,
+    }),
+});
+
+const bodySchema = z.discriminatedUnion("action", [
+  loginSchema,
+  setupSchema,
+  logoutSchema,
+  changePasswordSchema,
+]);
+
+/** Wer ist angemeldet? Von der Oberfläche für den Kopfbereich genutzt. */
+export async function GET(): Promise<Response> {
+  try {
+    const actor = await getActor();
+    return Response.json({
+      authEnabled: isAuthEnabled(),
+      setupOpen: await isSetupOpen(),
+      user:
+        actor.kind === "user"
+          ? {
+              id: actor.user.id,
+              email: actor.user.email,
+              name: actor.user.name,
+              isInstanceAdmin: actor.user.isInstanceAdmin,
+              memberships: actor.user.memberships,
+            }
+          : null,
+    });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+export async function POST(request: NextRequest): Promise<Response> {
+  try {
+    const parsed = bodySchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    if (parsed.data.action === "logout") {
+      await destroySession();
+      return Response.json({ ok: true });
+    }
+
+    if (!isAuthEnabled()) {
+      throw new QrRequestError(
+        "Die Anmeldung ist ausgeschaltet. Setze AUTH_ENABLED=true in der .env, um sie zu aktivieren.",
+      );
+    }
+
+    // Das `await` ist hier nicht optional: ohne es verlässt das Promise den
+    // try-Block, bevor es sich auflöst — eine Ablehnung käme dann nie im
+    // catch an und würde als nackter 500er beim Aufrufer landen.
+    if (parsed.data.action === "change-password") {
+      return await handleChangePassword(parsed.data);
+    }
+    if (parsed.data.action === "setup") {
+      return await handleSetup(parsed.data);
+    }
+    return await handleLogin(parsed.data, requestOrigin(request.headers));
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+/**
+ * Eigenes Passwort ändern. Das bisherige muss stimmen — sonst könnte jemand
+ * an einem unbeaufsichtigten Rechner das Konto übernehmen.
+ */
+async function handleChangePassword(
+  input: z.infer<typeof changePasswordSchema>,
+): Promise<Response> {
+  const actor = await getActor();
+  if (actor.kind !== "user") {
+    throw new QrRequestError("Bitte melde dich an.", 401);
+  }
+
+  const user = await prisma.user.findUnique({ where: { id: actor.user.id } });
+  if (!user) {
+    throw new QrRequestError("Dieses Konto existiert nicht mehr.", 404);
+  }
+
+  // Konten aus dem externen Verzeichnis haben hier kein Passwort — das
+  // wird beim Anbieter gewechselt, nicht hier.
+  if (!user.passwordHash) {
+    throw new QrRequestError(
+      "Dieses Konto meldet sich über den externen Anbieter an. Das Passwort wird dort geändert.",
+      400,
+    );
+  }
+
+  if (!(await verifyPassword(input.currentPassword, user.passwordHash))) {
+    throw new QrRequestError("Das bisherige Passwort stimmt nicht.", 403);
+  }
+
+  if (input.currentPassword === input.newPassword) {
+    throw new QrRequestError(
+      "Das neue Passwort ist mit dem bisherigen identisch.",
+    );
+  }
+
+  await prisma.user.update({
+    where: { id: user.id },
+    data: {
+      passwordHash: await hashPassword(input.newPassword),
+      failedLogins: 0,
+      lockedUntil: null,
+    },
+  });
+
+  // Alle Sitzungen beenden — auch die eigene — und sofort eine neue
+  // aufmachen. So fliegen andere Geräte raus, ohne dass man sich hier neu
+  // anmelden muss.
+  await destroyAllSessions(user.id);
+  await createSession(user.id);
+
+  return Response.json({ ok: true });
+}
+
+/** Legt den ersten Benutzer an — nur solange es noch keinen gibt. */
+async function handleSetup(
+  input: z.infer<typeof setupSchema>,
+): Promise<Response> {
+  if (!(await isSetupOpen())) {
+    throw new QrRequestError(
+      "Die Ersteinrichtung ist bereits abgeschlossen. Bitte melde dich an.",
+      403,
+    );
+  }
+
+  // Das Hashen dauert; erst danach in die Transaktion, damit sie kurz bleibt.
+  const passwordHash = await hashPassword(input.password);
+
+  // Serialisierbar, weil zwischen der Prüfung „gibt es schon jemanden?" und
+  // dem Anlegen sonst ein zweiter Aufruf dazwischenkommen könnte — und dann
+  // gäbe es zwei Administratoren, von denen einer ungebeten ist.
+  const user = await prisma.$transaction(
+    async (tx) => {
+      if ((await tx.user.count()) > 0) {
+        throw new QrRequestError(
+          "Die Ersteinrichtung ist bereits abgeschlossen. Bitte melde dich an.",
+          403,
+        );
+      }
+      return tx.user.create({
+        data: {
+          email: input.email,
+          name: input.name && input.name.length > 0 ? input.name : null,
+          passwordHash,
+          isInstanceAdmin: true,
+        },
+      });
+    },
+    { isolationLevel: "Serializable" },
+  );
+
+  await createSession(user.id);
+  return Response.json({ ok: true, email: user.email }, { status: 201 });
+}
+
+async function handleLogin(
+  input: z.infer<typeof loginSchema>,
+  absender: string,
+): Promise<Response> {
+  // Vor allem anderen: Wer viele Konten durchprobiert, löst nie eine
+  // Kontosperre aus — dagegen hilft nur eine Bremse je Absender.
+  const wartezeit = tooManyAttempts(`login:${absender}`);
+  if (wartezeit !== null) {
+    throw new QrRequestError(
+      `Zu viele Anmeldeversuche. Bitte warte ${Math.ceil(wartezeit / 60)} Minute${wartezeit > 60 ? "n" : ""}.`,
+      429,
+    );
+  }
+
+  const user = await prisma.user.findUnique({ where: { email: input.email } });
+
+  // Immer dieselbe Meldung, egal ob die Adresse existiert — sonst ließe sich
+  // damit herausfinden, welche Konten es gibt.
+  const invalid = new QrRequestError(
+    "E-Mail-Adresse oder Passwort stimmt nicht.",
+    401,
+  );
+
+  if (!user) {
+    // Trotzdem einmal rechnen, damit die Antwortzeit nichts verrät.
+    await verifyPassword(input.password, DUMMY_HASH);
+    throw invalid;
+  }
+
+  if (user.lockedUntil && user.lockedUntil.getTime() > Date.now()) {
+    const minutes = Math.ceil(
+      (user.lockedUntil.getTime() - Date.now()) / 60000,
+    );
+    throw new QrRequestError(
+      `Zu viele Fehlversuche. Bitte versuche es in ${minutes} Minute${minutes === 1 ? "" : "n"} erneut.`,
+      429,
+    );
+  }
+
+  // Konten aus dem Verzeichnis haben hier kein Passwort. Bewusst dieselbe
+  // Meldung wie bei falschen Zugangsdaten: Ein eigener Text würde verraten,
+  // dass es diese Adresse gibt. Der Knopf für den Anbieter steht daneben.
+  if (!user.passwordHash) {
+    await verifyPassword(input.password, DUMMY_HASH);
+    throw invalid;
+  }
+
+  if (!(await verifyPassword(input.password, user.passwordHash))) {
+    const failedLogins = user.failedLogins + 1;
+    await prisma.user.update({
+      where: { id: user.id },
+      data: {
+        failedLogins,
+        lockedUntil:
+          failedLogins >= MAX_ATTEMPTS
+            ? new Date(Date.now() + LOCK_MINUTES * 60 * 1000)
+            : null,
+      },
+    });
+    throw invalid;
+  }
+
+  // Erst nach geprüftem Passwort: Wer bis hierher kommt, hat das Konto
+  // nachweislich in der Hand — ihm darf man sagen, warum es nicht weitergeht.
+  if (!user.isActive) {
+    throw new QrRequestError(
+      "Dieses Konto ist deaktiviert. Bitte wende dich an einen Administrator.",
+      403,
+    );
+  }
+
+  // Der Hash stammt womöglich aus einer Zeit mit schwächeren Parametern.
+  // Jetzt ist der einzige Moment, in dem das Klartextpasswort vorliegt.
+  const passwordHash = needsRehash(user.passwordHash)
+    ? await hashPassword(input.password)
+    : undefined;
+
+  await prisma.user.update({
+    where: { id: user.id },
+    data: {
+      failedLogins: 0,
+      lockedUntil: null,
+      lastLoginAt: new Date(),
+      ...(passwordHash ? { passwordHash } : {}),
+    },
+  });
+
+  clearAttempts(`login:${absender}`);
+  await createSession(user.id);
+  return Response.json({ ok: true, email: user.email });
+}

src/app/api/codes/[id]/qr/route.ts

@@ -1,5 +1,7 @@
 import type { NextRequest } from "next/server";
 
+import { getActor } from "@/lib/auth/actor";
+import { requirePermission } from "@/lib/auth/policy";
 import { prisma } from "@/lib/db";
 import { shortUrl } from "@/lib/env";
 import { errorResponse } from "@/lib/http";
@@ -27,11 +29,18 @@ export async function GET(
       request.nextUrl.searchParams.get("format") === "png" ? "png" : "svg";
     const isDownload = request.nextUrl.searchParams.get("download") === "1";
 
-    const code = await prisma.qrCode.findUnique({ where: { id } });
+    const code = await prisma.qrCode.findUnique({
+      where: { id },
+      include: { domain: { select: { hostname: true } } },
+    });
     if (!code) {
       throw new QrRequestError("Dieser QR-Code existiert nicht (mehr).", 404);
     }
 
+    // Das Bild verrät die Kurz-URL und damit das Ziel — es gehört hinter
+    // dieselbe Prüfung wie die Liste.
+    requirePermission(await getActor(), "codes:read", { groupId: code.groupId });
+
     const design = designSchema.parse({
       fgColor: code.fgColor,
       bgColor: code.bgColor,
@@ -40,7 +49,7 @@ export async function GET(
       margin: code.margin,
     });
 
-    const content = shortUrl(code.slug);
+    const content = shortUrl(code.slug, code.domain.hostname);
     const body =
       format === "png"
         ? new Uint8Array(await renderPng(content, design))

src/app/api/codes/[id]/route.ts

@@ -2,17 +2,27 @@ import type { NextRequest } from "next/server";
 import { z } from "zod";
 
 import type { Prisma } from "@/generated/prisma/client";
+import { getActor } from "@/lib/auth/actor";
+import { requirePermission } from "@/lib/auth/policy";
 import { toJsonInput, toQrCodeDto } from "@/lib/codes";
 import { prisma } from "@/lib/db";
 import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { requireImplementedQrType } from "@/lib/qr/availability";
 import { designSchema } from "@/lib/qr/design";
-import { getActiveQrType } from "@/lib/qr/registry";
+import { assertDynamicPossible } from "@/lib/qr/request";
-import { QrRequestError } from "@/lib/qr/request";
+import { attachUploads } from "@/lib/uploads";
+import { QrRequestError } from "@/lib/qr/type-module";
 
 export const dynamic = "force-dynamic";
 
 type Context = { params: Promise<{ id: string }> };
 
+const WITH_RELATIONS = {
+  group: { select: { name: true } },
+  domain: { select: { hostname: true } },
+  createdBy: { select: { name: true, email: true } },
+} as const;
+
 const updateSchema = z.object({
   data: z.record(z.string(), z.unknown()).optional(),
   design: designSchema.optional(),
@@ -25,7 +35,10 @@ const updateSchema = z.object({
 });
 
 async function loadCode(id: string) {
-  const code = await prisma.qrCode.findUnique({ where: { id } });
+  const code = await prisma.qrCode.findUnique({
+    where: { id },
+    include: WITH_RELATIONS,
+  });
   if (!code) {
     throw new QrRequestError("Dieser QR-Code existiert nicht (mehr).", 404);
   }
@@ -38,7 +51,10 @@ export async function GET(
 ): Promise<Response> {
   try {
     const { id } = await context.params;
-    return Response.json({ code: toQrCodeDto(await loadCode(id)) });
+    const actor = await getActor();
+    const code = await loadCode(id);
+    requirePermission(actor, "codes:read", { groupId: code.groupId });
+    return Response.json({ code: toQrCodeDto(code) });
   } catch (error) {
     return errorResponse(error);
   }
@@ -51,26 +67,35 @@ export async function PATCH(
 ): Promise<Response> {
   try {
     const { id } = await context.params;
+    const actor = await getActor();
+
     const parsed = updateSchema.safeParse(await request.json());
     if (!parsed.success) {
       return jsonError(firstZodMessage(parsed.error));
     }
 
     const existing = await loadCode(id);
+    requirePermission(actor, "codes:update", { groupId: existing.groupId });
+
     const update: Prisma.QrCodeUpdateInput = {};
+    /** Dateien, die nach der Änderung zu diesem Code gehören. */
+    let neueDateien: string[] | null = null;
 
     if (parsed.data.data !== undefined) {
-      const qrType = getActiveQrType(existing.type);
+      // Bewusst nur „ausprogrammiert“, nicht „freigegeben“: ein in der
-      if (!qrType) {
+      // Verwaltung abgeschalteter Typ soll bestehende Codes nicht
-        throw new QrRequestError(
+      // unbearbeitbar machen — sie sind längst gedruckt.
-          "Der Typ dieses Codes wird in dieser Version nicht unterstützt.",
+      const qrType = requireImplementedQrType(existing.type);
-        );
-      }
       const validated = qrType.validate(parsed.data.data);
       if (!validated.ok) {
         return jsonError(validated.message);
       }
+      // Auch beim Bearbeiten: die neuen Daten müssen ein Weiterleitungsziel
+      // hergeben. Sonst könnte man einen laufenden Code durch eine Änderung
+      // stillschweigend unbrauchbar machen.
+      assertDynamicPossible(qrType, validated.data);
       update.data = toJsonInput(validated.data);
+      neueDateien = qrType.uploadIds(validated.data);
     }
 
     if (parsed.data.label !== undefined) {
@@ -88,7 +113,18 @@ export async function PATCH(
       return jsonError("Es wurden keine Änderungen übermittelt.");
     }
 
-    const updated = await prisma.qrCode.update({ where: { id }, data: update });
+    const updated = await prisma.qrCode.update({
+      where: { id },
+      data: update,
+      include: WITH_RELATIONS,
+    });
+
+    // Eine ausgetauschte Datei verliert dabei ihren Bezug zum Code und wird
+    // später als verwaist weggeräumt.
+    if (neueDateien !== null) {
+      await attachUploads(updated.id, neueDateien);
+    }
+
     return Response.json({ code: toQrCodeDto(updated) });
   } catch (error) {
     return errorResponse(error);
@@ -101,7 +137,10 @@ export async function DELETE(
 ): Promise<Response> {
   try {
     const { id } = await context.params;
-    await loadCode(id);
+    const actor = await getActor();
+    const existing = await loadCode(id);
+    requirePermission(actor, "codes:delete", { groupId: existing.groupId });
+
     await prisma.qrCode.delete({ where: { id } });
     return new Response(null, { status: 204 });
   } catch (error) {

src/app/api/codes/route.ts

@@ -1,14 +1,19 @@
 import type { NextRequest } from "next/server";
 import { z } from "zod";
 
+import { getActor } from "@/lib/auth/actor";
+import { resolveTargetGroup } from "@/lib/auth/groups";
+import { requirePermission, visibleGroupIds } from "@/lib/auth/policy";
 import { toJsonInput, toQrCodeDto } from "@/lib/codes";
 import { prisma } from "@/lib/db";
+import { resolveTargetDomain } from "@/lib/domains";
 import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { requireAvailableQrType } from "@/lib/qr/availability";
 import { designSchema } from "@/lib/qr/design";
-import { getActiveQrType } from "@/lib/qr/registry";
+import { assertDynamicPossible } from "@/lib/qr/request";
-import { QrRequestError } from "@/lib/qr/request";
+import { QR_TYPE_IDS, QrRequestError } from "@/lib/qr/type-module";
-import { QR_TYPE_IDS } from "@/lib/qr/type-module";
 import { generateSlug } from "@/lib/slug";
+import { attachUploads } from "@/lib/uploads";
 
 export const dynamic = "force-dynamic";
 
@@ -21,6 +26,10 @@ const createSchema = z.object({
     .trim()
     .max(120, { error: "Der Name darf höchstens 120 Zeichen lang sein." })
     .optional(),
+  /** In welcher Gruppe der Code angelegt wird. Ohne Anmeldung bedeutungslos. */
+  groupId: z.string().trim().min(1).optional(),
+  /** Unter welcher Domain die Kurz-URL entsteht. */
+  domainId: z.string().trim().min(1).optional(),
 });
 
 function isUniqueViolation(error: unknown): boolean {
@@ -32,10 +41,25 @@ function isUniqueViolation(error: unknown): boolean {
   );
 }
 
-/** Alle dynamischen Codes, neueste zuerst. */
+/** Die dynamischen Codes, die der Anfragende sehen darf — neueste zuerst. */
 export async function GET(): Promise<Response> {
   try {
-    const codes = await prisma.qrCode.findMany({ orderBy: { createdAt: "desc" } });
+    const actor = await getActor();
+    if (actor.kind === "anonymous") {
+      throw new QrRequestError("Bitte melde dich an.", 401);
+    }
+
+    const visible = visibleGroupIds(actor);
+    const codes = await prisma.qrCode.findMany({
+      where: visible === null ? undefined : { groupId: { in: visible } },
+      orderBy: { createdAt: "desc" },
+      include: {
+        group: { select: { name: true } },
+        domain: { select: { hostname: true } },
+        createdBy: { select: { name: true, email: true } },
+      },
+    });
+
     return Response.json({ codes: codes.map(toQrCodeDto) });
   } catch (error) {
     return errorResponse(error);
@@ -45,30 +69,33 @@ export async function GET(): Promise<Response> {
 /** Legt einen dynamischen Code an und vergibt dafür eine freie Kurz-URL. */
 export async function POST(request: NextRequest): Promise<Response> {
   try {
+    const actor = await getActor();
+
     const parsed = createSchema.safeParse(await request.json());
     if (!parsed.success) {
       return jsonError(firstZodMessage(parsed.error));
     }
 
     const { type, design, label } = parsed.data;
-    const qrType = getActiveQrType(type);
+
-    if (!qrType) {
+    // Zielgruppe zuerst: davon hängt ab, ob überhaupt angelegt werden darf.
-      throw new QrRequestError(
+    const groupId = await resolveTargetGroup(actor, parsed.data.groupId);
-        "Dieser QR-Typ ist in dieser Version noch nicht verfügbar.",
+    requirePermission(actor, "codes:create", { groupId });
-        404,
+
-      );
+    // Die Domain bestimmt, unter welchem Hostnamen die Kurz-URL erreichbar
-    }
+    // ist — und der Slug ist nur je Domain eindeutig.
-    if (!qrType.supportsDynamic) {
+    const domainId = await resolveTargetDomain(actor, groupId, parsed.data.domainId);
-      throw new QrRequestError(
+
-        `Der QR-Typ „${qrType.title}“ unterstützt keine dynamischen Codes.`,
+    const qrType = await requireAvailableQrType(type);
-      );
-    }
 
     const validated = qrType.validate(parsed.data.data);
     if (!validated.ok) {
       return jsonError(validated.message);
     }
 
+    // Erst hier, nach der Validierung: die Probe braucht die geprüften Daten.
+    assertDynamicPossible(qrType, validated.data);
+
     // Slug-Kollisionen sind extrem unwahrscheinlich, aber nicht unmöglich.
     for (let attempt = 0; attempt < 5; attempt += 1) {
       try {
@@ -78,9 +105,21 @@ export async function POST(request: NextRequest): Promise<Response> {
             type: qrType.id,
             label: label && label.length > 0 ? label : null,
             data: toJsonInput(validated.data),
+            groupId,
+            domainId,
+            createdById: actor.kind === "user" ? actor.user.id : null,
             ...design,
           },
+          include: {
+            group: { select: { name: true } },
+            domain: { select: { hostname: true } },
+            createdBy: { select: { name: true, email: true } },
+          },
         });
+        // Erst jetzt gehören die hochgeladenen Dateien zu diesem Code —
+        // vorher lagen sie ohne Bezug herum.
+        await attachUploads(created.id, qrType.uploadIds(validated.data));
+
         return Response.json({ code: toQrCodeDto(created) }, { status: 201 });
       } catch (error) {
         if (!isUniqueViolation(error)) throw error;

src/app/api/feedback/route.ts

@@ -0,0 +1,95 @@
+import type { NextRequest } from "next/server";
+import { z } from "zod";
+
+import { prisma } from "@/lib/db";
+import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+
+export const dynamic = "force-dynamic";
+
+const feedbackSchema = z.object({
+  codeId: z.string().trim().min(1),
+  rating: z
+    .number()
+    .int()
+    .min(1, { error: "Bitte wähle eine Bewertung." })
+    .max(5, { error: "Bitte wähle eine Bewertung." }),
+  comment: z
+    .string()
+    .trim()
+    .max(1000, { error: "Der Text ist zu lang (höchstens 1000 Zeichen)." })
+    .default(""),
+});
+
+/**
+ * Grobe Bremse gegen Fluten.
+ *
+ * Im Arbeitsspeicher und damit pro Container — bei einem Dienst dieser Größe
+ * genügt das. Die Adresse wird nur als Schlüssel benutzt und nirgends
+ * gespeichert; nach dem Zeitfenster ist sie wieder weg.
+ */
+const FENSTER_MS = 60_000;
+const MAX_PRO_FENSTER = 10;
+const zaehler = new Map<string, { anzahl: number; bis: number }>();
+
+function zuSchnell(schluessel: string): boolean {
+  const jetzt = Date.now();
+  const eintrag = zaehler.get(schluessel);
+
+  if (!eintrag || eintrag.bis < jetzt) {
+    zaehler.set(schluessel, { anzahl: 1, bis: jetzt + FENSTER_MS });
+    // Gelegentlich ausmisten, damit die Tabelle nicht wächst.
+    if (zaehler.size > 5000) {
+      for (const [key, wert] of zaehler) {
+        if (wert.bis < jetzt) zaehler.delete(key);
+      }
+    }
+    return false;
+  }
+
+  eintrag.anzahl += 1;
+  return eintrag.anzahl > MAX_PRO_FENSTER;
+}
+
+/** Nimmt eine Rückmeldung von einer öffentlichen Landingpage entgegen. */
+export async function POST(request: NextRequest): Promise<Response> {
+  try {
+    const parsed = feedbackSchema.safeParse(await request.json());
+    if (!parsed.success) {
+      return jsonError(firstZodMessage(parsed.error));
+    }
+
+    const herkunft =
+      request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+      request.headers.get("x-real-ip") ||
+      "unbekannt";
+
+    if (zuSchnell(herkunft)) {
+      return jsonError(
+        "Zu viele Rückmeldungen in kurzer Zeit. Bitte versuche es gleich noch einmal.",
+        429,
+      );
+    }
+
+    // Nur Codes, die tatsächlich Feedback einsammeln — sonst ließen sich
+    // beliebige Codes mit Einträgen zumüllen.
+    const code = await prisma.qrCode.findUnique({
+      where: { id: parsed.data.codeId },
+      select: { id: true, type: true },
+    });
+    if (!code || code.type !== "feedback") {
+      return jsonError("Zu diesem Code lässt sich keine Rückmeldung abgeben.", 404);
+    }
+
+    await prisma.feedback.create({
+      data: {
+        qrCodeId: code.id,
+        rating: parsed.data.rating,
+        comment: parsed.data.comment.length > 0 ? parsed.data.comment : null,
+      },
+    });
+
+    return Response.json({ ok: true }, { status: 201 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}

src/app/api/qr/download/route.ts

@@ -1,6 +1,7 @@
 import type { NextRequest } from "next/server";
 import { z } from "zod";
 
+import { getActor, requireSignedIn } from "@/lib/auth/actor";
 import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
 import { CONTENT_TYPES, renderPng, renderSvg } from "@/lib/qr/render";
 import {
@@ -17,6 +18,10 @@ const downloadSchema = qrRequestSchema.extend({
 /** Liefert den fertigen QR-Code als PNG- oder SVG-Datei zum Herunterladen. */
 export async function POST(request: NextRequest): Promise<Response> {
   try {
+    // Der Generator steht nur Angemeldeten offen; die Weiterleitung
+    // unter /r/{slug} bleibt davon unberührt und öffentlich.
+    requireSignedIn(await getActor());
+
     const parsed = downloadSchema.safeParse(await request.json());
     if (!parsed.success) {
       return jsonError(firstZodMessage(parsed.error));
@@ -31,7 +36,7 @@ export async function POST(request: NextRequest): Promise<Response> {
       );
     }
 
-    const { qrType, data, content } = resolveQrRequest(parsed.data);
+    const { qrType, data, content } = await resolveQrRequest(parsed.data);
 
     const body =
       format === "png"

src/app/api/qr/preview/route.ts

@@ -1,5 +1,6 @@
 import type { NextRequest } from "next/server";
 
+import { getActor, requireSignedIn } from "@/lib/auth/actor";
 import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
 import { renderSvg } from "@/lib/qr/render";
 import { qrRequestSchema, resolveQrRequest } from "@/lib/qr/request";
@@ -10,12 +11,16 @@ import { qrRequestSchema, resolveQrRequest } from "@/lib/qr/request";
  */
 export async function POST(request: NextRequest): Promise<Response> {
   try {
+    // Der Generator steht nur Angemeldeten offen; die Weiterleitung
+    // unter /r/{slug} bleibt davon unberührt und öffentlich.
+    requireSignedIn(await getActor());
+
     const parsed = qrRequestSchema.safeParse(await request.json());
     if (!parsed.success) {
       return jsonError(firstZodMessage(parsed.error));
     }
 
-    const { content } = resolveQrRequest(parsed.data);
+    const { content } = await resolveQrRequest(parsed.data);
     const svg = await renderSvg(content, parsed.data.design);
 
     return Response.json({

src/app/api/uploads/[id]/route.ts

@@ -0,0 +1,50 @@
+import type { NextRequest } from "next/server";
+
+import { prisma } from "@/lib/db";
+
+export const dynamic = "force-dynamic";
+
+type Context = { params: Promise<{ id: string }> };
+
+/**
+ * Liefert eine hochgeladene Datei aus.
+ *
+ * Bewusst ohne Anmeldung: Die Landingpages sind öffentlich, und wer einen
+ * Code scannt, soll das hinterlegte PDF sehen können. Der Schutz liegt in der
+ * nicht erratbaren Id — dieselbe Überlegung wie beim Slug einer Kurz-URL.
+ */
+export async function GET(
+  request: NextRequest,
+  context: Context,
+): Promise<Response> {
+  const { id } = await context.params;
+
+  const upload = await prisma.upload.findUnique({ where: { id } });
+  if (!upload) {
+    return new Response("Datei nicht gefunden", {
+      status: 404,
+      headers: { "Content-Type": "text/plain; charset=utf-8" },
+    });
+  }
+
+  // `?download` erzwingt das Speichern statt der Anzeige.
+  const alsDownload = request.nextUrl.searchParams.has("download");
+
+  return new Response(new Uint8Array(upload.data), {
+    headers: {
+      "Content-Type": upload.mimeType,
+      "Content-Length": String(upload.size),
+      // Der Typ steht fest — der Browser soll nicht raten und daraus
+      // womöglich etwas Ausführbares machen.
+      "X-Content-Type-Options": "nosniff",
+      // Ein PDF darf Skripte enthalten. Ausgeliefert von derselben Adresse
+      // wie die Anwendung könnte es damit auf angemeldete Sitzungen
+      // zugreifen; die Sandbox nimmt ihm diese Möglichkeit.
+      "Content-Security-Policy": "sandbox; default-src 'none'; frame-ancestors 'none'",
+      "X-Frame-Options": "DENY",
+      "Content-Disposition": `${alsDownload ? "attachment" : "inline"}; filename*=UTF-8''${encodeURIComponent(upload.filename)}`,
+      // Der Inhalt einer Id ändert sich nie — die Id wechselt mit der Datei.
+      "Cache-Control": "public, max-age=31536000, immutable",
+    },
+  });
+}

src/app/api/uploads/route.ts

@@ -0,0 +1,70 @@
+import type { NextRequest } from "next/server";
+
+import { getActor } from "@/lib/auth/actor";
+import { resolveTargetGroup } from "@/lib/auth/groups";
+import { requirePermission } from "@/lib/auth/policy";
+import { assertSameOrigin, errorResponse, jsonError } from "@/lib/http";
+import {
+  cleanupOrphanedUploads,
+  isUploadKind,
+  maxUploadBytes,
+  storeUpload,
+} from "@/lib/uploads";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Nimmt eine Datei entgegen und gibt ihre Id zurück.
+ *
+ * Der Upload passiert vor dem Speichern des Codes — anders geht es nicht, das
+ * Formular braucht die Id, um sie im Code zu hinterlegen. Dateien ohne Code
+ * bleiben deshalb erst einmal liegen und werden später weggeräumt.
+ */
+export async function POST(request: NextRequest): Promise<Response> {
+  try {
+    // Diese Route liegt außerhalb des Proxys (siehe src/proxy.ts) und prüft
+    // die Herkunft deshalb selbst.
+    assertSameOrigin(request.headers);
+
+    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();
+    } catch {
+      return jsonError("Die Datei konnte nicht gelesen werden.");
+    }
+
+    const kind = form.get("kind");
+    if (!isUploadKind(kind)) {
+      return jsonError("Unbekannte Dateiart.");
+    }
+
+    const file = form.get("file");
+    if (!(file instanceof File)) {
+      return jsonError("Es wurde keine Datei mitgeschickt.");
+    }
+
+    const upload = await storeUpload(file, kind);
+
+    // Beiläufig aufräumen. Scheitert das, ist der Upload trotzdem gültig.
+    try {
+      await cleanupOrphanedUploads();
+    } catch (error) {
+      console.error("Verwaiste Uploads konnten nicht entfernt werden:", error);
+    }
+
+    return Response.json({ upload }, { status: 201 });
+  } catch (error) {
+    return errorResponse(error);
+  }
+}
+
+/** Damit die Oberfläche die Grenze nennen kann, bevor jemand wählt. */
+export async function GET(): Promise<Response> {
+  return Response.json({ maxBytes: maxUploadBytes() });
+}

src/app/erstellen/[type]/page.tsx

@@ -1,56 +0,0 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-
-import { Icon } from "@/components/icons";
-import { QrGenerator } from "@/components/qr-generator";
-import { QR_TYPE_IDS, getActiveQrType, getQrType } from "@/lib/qr/registry";
-
-type Props = { params: Promise<{ type: string }> };
-
-/** Alle bekannten Typen vorab erzeugen — auch die noch inaktiven. */
-export function generateStaticParams() {
-  return QR_TYPE_IDS.map((type) => ({ type }));
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { type } = await params;
-  const qrType = getQrType(type);
-  return { title: qrType ? `${qrType.title}-QR-Code` : "QR-Code erstellen" };
-}
-
-export default async function CreatePage({ params }: Props) {
-  const { type } = await params;
-  const qrType = getQrType(type);
-
-  if (!qrType) {
-    notFound();
-  }
-
-  // Registrierte, aber noch nicht implementierte Typen bekommen eine
-  // erklärende Seite statt einer 404.
-  if (!getActiveQrType(type)) {
-    return (
-      <div className="mx-auto max-w-2xl px-4 py-16 text-center sm:px-6">
-        <span className="mx-auto flex size-14 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
-          <Icon name={qrType.icon} className="size-7" />
-        </span>
-        <h1 className="mt-5 text-2xl font-bold text-slate-900">
-          „{qrType.title}“ ist bald verfügbar
-        </h1>
-        <p className="mt-2 text-slate-600">
-          Dieser QR-Typ folgt in Version 2. In Version 1 steht der Typ „Website“
-          zur Verfügung.
-        </p>
-        <Link
-          href="/erstellen/website"
-          className="mt-6 inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
-        >
-          Website-QR-Code erstellen
-        </Link>
-      </div>
-    );
-  }
-
-  return <QrGenerator typeId={qrType.id} />;
-}

src/app/layout.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 
-import { Icon } from "@/components/icons";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -13,46 +11,18 @@ export const metadata: Metadata = {
     "QR-Codes erstellen: statisch oder dynamisch, mit eigenen Farben, frei wählbarer Größe und Download als PNG oder SVG.",
 };
 
+/**
+ * Wurzel-Layout — bewusst nur `html` und `body`.
+ *
+ * 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.
+ */
 export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
     <html lang="de" className="h-full">
-      <body className="flex min-h-full flex-col">
+      <body className="flex min-h-full flex-col">{children}</body>
-        <header className="border-b border-slate-200 bg-white">
-          <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 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">
-                <Icon name="qr" className="size-5" />
-              </span>
-              QR-Code-Generator
-            </Link>
-            <nav className="flex items-center gap-1 text-sm font-medium">
-              <Link
-                href="/"
-                className="rounded-lg px-3 py-2 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
-              >
-                Erstellen
-              </Link>
-              <Link
-                href="/meine-codes"
-                className="rounded-lg px-3 py-2 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
-              >
-                Meine Codes
-              </Link>
-            </nav>
-          </div>
-        </header>
-
-        <main className="flex-1">{children}</main>
-
-        <footer className="border-t border-slate-200 bg-white">
-          <div className="mx-auto max-w-6xl px-4 py-6 text-sm text-slate-500 sm:px-6">
-            QR-Code-Generator · Version 1 — QR-Typ „Website/URL“
-          </div>
-        </footer>
-      </body>
     </html>
   );
 }

src/app/page.tsx

@@ -1,93 +0,0 @@
-import Link from "next/link";
-
-import { Icon } from "@/components/icons";
-import { Badge } from "@/components/ui";
-import { qrTypeList } from "@/lib/qr/registry";
-
-export default function HomePage() {
-  return (
-    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6 sm:py-14">
-      <div className="max-w-2xl">
-        <h1 className="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
-          Was möchtest du erstellen?
-        </h1>
-        <p className="mt-3 text-base text-slate-600">
-          Wähle einen Typ, gib deine Daten ein und lade den fertigen QR-Code als
-          PNG oder SVG herunter. Auf Wunsch als dynamischer Code, dessen Ziel du
-          später änderst, ohne den Code neu drucken zu müssen.
-        </p>
-      </div>
-
-      <ul className="mt-9 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-        {qrTypeList.map((type) => {
-          const tile = (
-            <>
-              <span
-                className={
-                  type.active
-                    ? "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-slate-100 text-slate-400"
-                }
-              >
-                <Icon name={type.icon} className="size-6" />
-              </span>
-              <span className="min-w-0 flex-1">
-                <span className="flex flex-wrap items-center gap-2">
-                  <span
-                    className={
-                      type.active
-                        ? "font-semibold text-slate-900"
-                        : "font-semibold text-slate-500"
-                    }
-                  >
-                    {type.title}
-                  </span>
-                  {type.active ? (
-                    <Badge tone="popular">Beliebt</Badge>
-                  ) : (
-                    <Badge tone="soon">Bald verfügbar</Badge>
-                  )}
-                </span>
-                <span
-                  className={
-                    type.active
-                      ? "mt-1 block text-sm text-slate-600"
-                      : "mt-1 block text-sm text-slate-400"
-                  }
-                >
-                  {type.description}
-                </span>
-              </span>
-            </>
-          );
-
-          return (
-            <li key={type.id}>
-              {type.active ? (
-                <Link
-                  href={`/erstellen/${type.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"
-                >
-                  {tile}
-                </Link>
-              ) : (
-                <div
-                  aria-disabled="true"
-                  title={`„${type.title}“ folgt in Version 2`}
-                  className="flex h-full cursor-not-allowed items-start gap-4 rounded-2xl border border-dashed border-slate-200 bg-slate-50/60 p-4"
-                >
-                  {tile}
-                </div>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-
-      <p className="mt-8 text-sm text-slate-500">
-        In Version 1 ist der Typ „Website“ verfügbar. Die übrigen Typen folgen in
-        Version 2.
-      </p>
-    </div>
-  );
-}

src/app/r/[slug]/route.ts

@@ -1,6 +1,7 @@
 import type { NextRequest } from "next/server";
 
 import { prisma } from "@/lib/db";
+import { ensureDefaultDomain, resolveRequestDomain } from "@/lib/domains";
 import { getQrType } from "@/lib/qr/registry";
 import { isValidSlug } from "@/lib/slug";
 
@@ -34,9 +35,13 @@ function notFound(message: string): Response {
  *
  * Bewusst 302 (temporär): Das Ziel ist jederzeit änderbar, ein permanenter
  * Redirect würde in Browsern und Zwischenspeichern hängen bleiben.
+ *
+ * Der Slug ist nur je Domain eindeutig, deshalb wird zuerst die Domain aus
+ * dem `Host`-Header bestimmt. Ein unbekannter Hostname endet hier — sonst
+ * ließe sich über einen gefälschten Header ein fremder Code ansprechen.
  */
 export async function GET(
-  _request: NextRequest,
+  request: NextRequest,
   context: Context,
 ): Promise<Response> {
   const { slug } = await context.params;
@@ -45,7 +50,25 @@ export async function GET(
     return notFound("Diese Kurz-Adresse ist ungültig.");
   }
 
-  const code = await prisma.qrCode.findUnique({ where: { slug } });
+  const matched = await resolveRequestDomain(request.headers);
+
+  // Aufruf über eine nicht registrierte Adresse — etwa direkt über die IP im
+  // LAN. Dann gilt die Standard-Domain aus BASE_URL.
+  const domain = matched ?? {
+    ...(await ensureDefaultDomain()),
+    isActive: true,
+  };
+
+  if (!domain.isActive) {
+    return notFound(
+      "Diese Adresse ist zurzeit abgeschaltet. Bitte wende dich an denjenigen, der den Code erstellt hat.",
+    );
+  }
+
+  const code = await prisma.qrCode.findUnique({
+    where: { domainId_slug: { domainId: domain.id, slug } },
+  });
+
   if (!code) {
     return notFound(
       "Der Code wurde gelöscht oder hat nie existiert. Bitte wende dich an denjenigen, der ihn erstellt hat.",
@@ -58,10 +81,21 @@ export async function GET(
   }
 
   let target: string;
-  try {
+  if (qrType.hasLandingPage) {
-    target = qrType.redirectTarget(code.data);
+    // Kein fremdes Ziel — die Seite liefern wir selbst aus. Bewusst relativ,
-  } catch {
+    // damit der Aufruf auf der Adresse bleibt, über die er hereinkam (auch
-    return notFound("Das Ziel dieses Codes ist nicht mehr gültig.");
+    // wenn das eine nicht registrierte ist, etwa eine IP im LAN).
+    target = `/s/${slug}`;
+  } else {
+    try {
+      // Der User-Agent geht mit: Typen wie der App-Link entscheiden daran,
+      // wohin die Weiterleitung führt.
+      target = qrType.redirectTarget(code.data, {
+        userAgent: request.headers.get("user-agent") ?? undefined,
+      });
+    } catch {
+      return notFound("Das Ziel dieses Codes ist nicht mehr gültig.");
+    }
   }
 
   // Der Zähler darf die Weiterleitung nicht ausbremsen oder blockieren.

src/app/s/[slug]/page.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+
+import { qrLandings } from "@/components/landing";
+import { LandingNotice } from "@/components/landing/shell";
+import { prisma } from "@/lib/db";
+import { ensureDefaultDomain, resolveRequestDomain } from "@/lib/domains";
+import { getQrType } from "@/lib/qr/registry";
+import { isValidSlug } from "@/lib/slug";
+
+export const dynamic = "force-dynamic";
+
+type PageProps = { params: Promise<{ slug: string }> };
+
+/**
+ * Öffentliche Landingpage eines dynamischen Codes.
+ *
+ * Hierher schickt `/r/[slug]` alle Typen, die keine fremde Adresse haben,
+ * sondern eine Seite: Linksammlungen, hinterlegte Dateien, Feedback.
+ *
+ * Der Scan-Zähler wird bewusst **nicht** hier erhöht, sondern in `/r/[slug]`.
+ * Sonst zählte jedes Neuladen dieser Seite als weiterer Scan.
+ */
+async function loadCode(slug: string) {
+  if (!isValidSlug(slug)) return null;
+
+  const matched = await resolveRequestDomain(await headers());
+  const domain = matched ?? { ...(await ensureDefaultDomain()), isActive: true };
+  if (!domain.isActive) return null;
+
+  return prisma.qrCode.findUnique({
+    where: { domainId_slug: { domainId: domain.id, slug } },
+  });
+}
+
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const code = await loadCode(slug);
+  const qrType = code ? getQrType(code.type) : undefined;
+
+  if (!code || !qrType?.hasLandingPage) {
+    return { title: "Nicht gefunden" };
+  }
+
+  let title = qrType.title;
+  try {
+    title = qrType.summary(code.data);
+  } catch {
+    // Daten passen nicht mehr zum Schema — der Typname tut es auch.
+  }
+  // Absolut, damit der Titel nicht mit dem Anwendungsnamen ergänzt wird:
+  // Wer hier landet, hat mit dem Generator nichts zu tun.
+  return { title: { absolute: title } };
+}
+
+export default async function LandingPage({ params }: PageProps) {
+  const { slug } = await params;
+  const code = await loadCode(slug);
+
+  if (!code) {
+    return (
+      <LandingNotice title="Diese Seite gibt es nicht">
+        Der Code wurde gelöscht oder hat nie existiert. Bitte wende dich an
+        denjenigen, der ihn erstellt hat.
+      </LandingNotice>
+    );
+  }
+
+  const qrType = getQrType(code.type);
+  const Landing = qrType?.hasLandingPage ? qrLandings[qrType.id] : undefined;
+
+  if (!qrType || !Landing) {
+    return (
+      <LandingNotice title="Diese Seite gibt es nicht">
+        Dieser Code führt nicht auf eine Seite. Bitte wende dich an denjenigen,
+        der ihn erstellt hat.
+      </LandingNotice>
+    );
+  }
+
+  // Alte Datensätze können nach einer Schema-Änderung unbrauchbar sein. Das
+  // ist kein Grund, den Besuchern einen Absturz zu zeigen.
+  if (!qrType.validate(code.data).ok) {
+    return (
+      <LandingNotice title="Diese Seite ist gerade nicht verfügbar">
+        Die hinterlegten Inhalte sind unvollständig. Bitte wende dich an
+        denjenigen, der den Code erstellt hat.
+      </LandingNotice>
+    );
+  }
+
+  return (
+    <Landing
+      data={code.data}
+      label={code.label}
+      slug={code.slug}
+      codeId={code.id}
+    />
+  );
+}

src/components/account.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { Icon } from "@/components/icons";
+import { PasswordInput } from "@/components/password-input";
+import { Button, Card, CardTitle, Field, Notice } from "@/components/ui";
+import { ApiError, apiJson } from "@/lib/api-client";
+
+export function ChangePasswordForm({ minLength }: { minLength: number }) {
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [repeat, setRepeat] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [done, setDone] = useState(false);
+
+  const mismatch = repeat.length > 0 && next !== repeat;
+  const tooShort = next.length > 0 && next.length < minLength;
+
+  const submit = async () => {
+    setPending(true);
+    setError(null);
+    setDone(false);
+    try {
+      await apiJson("/api/auth", {
+        method: "POST",
+        json: {
+          action: "change-password",
+          currentPassword: current,
+          newPassword: next,
+        },
+      });
+      setCurrent("");
+      setNext("");
+      setRepeat("");
+      setDone(true);
+    } catch (caught) {
+      setError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Das Passwort konnte nicht geändert werden.",
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardTitle hint="Nach der Änderung wirst du auf allen anderen Geräten abgemeldet.">
+        Passwort ändern
+      </CardTitle>
+
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (mismatch || tooShort) return;
+          void submit();
+        }}
+      >
+        {error ? <Notice tone="error">{error}</Notice> : null}
+        {done ? (
+          <Notice tone="success">
+            Das Passwort wurde geändert. Andere Geräte wurden abgemeldet.
+          </Notice>
+        ) : null}
+
+        <Field label="Bisheriges Passwort" htmlFor="current-password">
+          <PasswordInput
+            id="current-password"
+            autoComplete="current-password"
+            required
+            value={current}
+            disabled={pending}
+            onChange={(event) => setCurrent(event.target.value)}
+          />
+        </Field>
+
+        <Field
+          label="Neues Passwort"
+          htmlFor="next-password"
+          error={tooShort ? `Mindestens ${minLength} Zeichen.` : null}
+          hint={`Mindestens ${minLength} Zeichen.`}
+        >
+          <PasswordInput
+            id="next-password"
+            autoComplete="new-password"
+            required
+            invalid={tooShort}
+            value={next}
+            disabled={pending}
+            onChange={(event) => setNext(event.target.value)}
+          />
+        </Field>
+
+        <Field
+          label="Neues Passwort wiederholen"
+          htmlFor="repeat-password"
+          error={mismatch ? "Die beiden Passwörter stimmen nicht überein." : null}
+        >
+          <PasswordInput
+            id="repeat-password"
+            autoComplete="new-password"
+            required
+            invalid={mismatch}
+            value={repeat}
+            disabled={pending}
+            onChange={(event) => setRepeat(event.target.value)}
+          />
+        </Field>
+
+        <div>
+          <Button type="submit" disabled={pending || mismatch || tooShort}>
+            {pending ? "Wird geändert …" : "Passwort ändern"}
+          </Button>
+        </div>
+      </form>
+    </Card>
+  );
+}
+
+export function SignOutCard() {
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
+
+  return (
+    <Card>
+      <CardTitle hint="Beendet die Sitzung auf diesem Gerät.">Abmelden</CardTitle>
+      <div>
+        <Button
+          type="button"
+          variant="secondary"
+          disabled={pending}
+          onClick={async () => {
+            setPending(true);
+            try {
+              await apiJson("/api/auth", {
+                method: "POST",
+                json: { action: "logout" },
+              });
+            } finally {
+              // refresh() verwirft den serverseitig gerenderten Kopfbereich —
+              // sonst stünde dort noch der abgemeldete Name.
+              router.replace("/anmelden");
+              router.refresh();
+            }
+          }}
+        >
+          <Icon name="lock" className="size-4" />
+          {pending ? "Wird abgemeldet …" : "Jetzt abmelden"}
+        </Button>
+      </div>
+    </Card>
+  );
+}

src/components/auth-forms.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { PasswordInput } from "@/components/password-input";
+import { Button, Card, Field, Notice, TextInput } from "@/components/ui";
+import { ApiError, apiJson } from "@/lib/api-client";
+
+function useSubmit() {
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (json: unknown) => {
+    setPending(true);
+    setError(null);
+    try {
+      await apiJson("/api/auth", { method: "POST", json });
+      // refresh() ist hier entscheidend: Kopfbereich und Startseite werden
+      // serverseitig je nach Anmeldung unterschiedlich gerendert, und ohne
+      // Verwerfen des Zwischenspeichers käme die Seite von vor der Anmeldung.
+      router.replace("/");
+      router.refresh();
+    } catch (caught) {
+      setError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Anmeldung ist fehlgeschlagen.",
+      );
+      setPending(false);
+    }
+  };
+
+  return { submit, pending, error, router };
+}
+
+export function LoginForm() {
+  const { submit, pending, error } = useSubmit();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  return (
+    <Card>
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void submit({ action: "login", email, password });
+        }}
+      >
+        {error ? <Notice tone="error">{error}</Notice> : null}
+
+        <Field label="E-Mail-Adresse" htmlFor="login-email">
+          <TextInput
+            id="login-email"
+            type="email"
+            autoComplete="username"
+            autoFocus
+            required
+            value={email}
+            disabled={pending}
+            onChange={(event) => setEmail(event.target.value)}
+          />
+        </Field>
+
+        <Field label="Passwort" htmlFor="login-password">
+          <PasswordInput
+            id="login-password"
+            autoComplete="current-password"
+            required
+            value={password}
+            disabled={pending}
+            onChange={(event) => setPassword(event.target.value)}
+          />
+        </Field>
+
+        <Button type="submit" disabled={pending}>
+          {pending ? "Wird angemeldet …" : "Anmelden"}
+        </Button>
+      </form>
+    </Card>
+  );
+}
+
+export function SetupForm({ minLength }: { minLength: number }) {
+  const { submit, pending, error } = useSubmit();
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+  const [password, setPassword] = useState("");
+  const [repeat, setRepeat] = useState("");
+
+  const mismatch = repeat.length > 0 && password !== repeat;
+
+  return (
+    <Card>
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (mismatch) return;
+          void submit({ action: "setup", email, name, password });
+        }}
+      >
+        {error ? <Notice tone="error">{error}</Notice> : null}
+
+        <Field label="Name (optional)" htmlFor="setup-name">
+          <TextInput
+            id="setup-name"
+            autoComplete="name"
+            value={name}
+            disabled={pending}
+            onChange={(event) => setName(event.target.value)}
+          />
+        </Field>
+
+        <Field label="E-Mail-Adresse" htmlFor="setup-email">
+          <TextInput
+            id="setup-email"
+            type="email"
+            autoComplete="username"
+            required
+            value={email}
+            disabled={pending}
+            onChange={(event) => setEmail(event.target.value)}
+          />
+        </Field>
+
+        <Field
+          label="Passwort"
+          htmlFor="setup-password"
+          hint={`Mindestens ${minLength} Zeichen.`}
+        >
+          <PasswordInput
+            id="setup-password"
+            autoComplete="new-password"
+            required
+            minLength={minLength}
+            value={password}
+            disabled={pending}
+            onChange={(event) => setPassword(event.target.value)}
+          />
+        </Field>
+
+        <Field
+          label="Passwort wiederholen"
+          htmlFor="setup-repeat"
+          error={mismatch ? "Die beiden Passwörter stimmen nicht überein." : null}
+        >
+          <PasswordInput
+            id="setup-repeat"
+            autoComplete="new-password"
+            required
+            invalid={mismatch}
+            value={repeat}
+            disabled={pending}
+            onChange={(event) => setRepeat(event.target.value)}
+          />
+        </Field>
+
+        <Button type="submit" disabled={pending || mismatch}>
+          {pending ? "Wird angelegt …" : "Administrator anlegen"}
+        </Button>
+      </form>
+    </Card>
+  );
+}
+
+export function LogoutButton() {
+  const router = useRouter();
+  const [pending, setPending] = useState(false);
+
+  return (
+    <button
+      type="button"
+      disabled={pending}
+      onClick={async () => {
+        setPending(true);
+        try {
+          await apiJson("/api/auth", {
+            method: "POST",
+            json: { action: "logout" },
+          });
+        } finally {
+          router.replace("/anmelden");
+          router.refresh();
+        }
+      }}
+      className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 disabled:opacity-50"
+    >
+      {pending ? "…" : "Abmelden"}
+    </button>
+  );
+}

src/components/codes-list.tsx

@@ -6,7 +6,16 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { Icon } from "@/components/icons";
 import { Modal } from "@/components/modal";
 import { qrForms } from "@/components/qr-forms";
-import { Badge, Button, Card, Field, Notice, TextInput } from "@/components/ui";
+import {
+  Badge,
+  Button,
+  Card,
+  Field,
+  Notice,
+  Select,
+  TextInput,
+  cx,
+} from "@/components/ui";
 import { ApiError, apiJson } from "@/lib/api-client";
 import type { QrCodeDto } from "@/lib/dto";
 import { qrTypes } from "@/lib/qr/registry";
@@ -17,11 +26,45 @@ const dateFormat = new Intl.DateTimeFormat("de-DE", {
   timeStyle: "short",
 });
 
+const shortDateFormat = new Intl.DateTimeFormat("de-DE", {
+  dateStyle: "short",
+});
+
 function formatDate(value: string | null): string {
   if (!value) return "—";
   return dateFormat.format(new Date(value));
 }
 
+function formatShortDate(value: string | null): string {
+  if (!value) return "—";
+  return shortDateFormat.format(new Date(value));
+}
+
+type View = "list" | "cards";
+type SortKey = "neueste" | "aelteste" | "name" | "scans";
+
+const SORT_LABELS: Record<SortKey, string> = {
+  neueste: "Neueste zuerst",
+  aelteste: "Älteste zuerst",
+  name: "Name (A–Z)",
+  scans: "Meiste Scans",
+};
+
+/** Merkt sich die gewählte Ansicht über Seitenwechsel hinweg. */
+const VIEW_STORAGE_KEY = "qrgen.codes.view";
+
+function readStoredView(): View {
+  if (typeof window === "undefined") return "list";
+  return window.localStorage.getItem(VIEW_STORAGE_KEY) === "cards"
+    ? "cards"
+    : "list";
+}
+
+/** Name, unter dem ein Code in der Liste geführt wird. */
+function displayName(code: QrCodeDto): string {
+  return code.label?.trim() || code.summary;
+}
+
 export function CodesList() {
   const [codes, setCodes] = useState<QrCodeDto[] | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
@@ -38,6 +81,23 @@ export function CodesList() {
 
   const [copiedId, setCopiedId] = useState<string | null>(null);
 
+  const [view, setView] = useState<View>("list");
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<SortKey>("neueste");
+  const [groupFilter, setGroupFilter] = useState("alle");
+
+  // Erst nach dem Einhängen lesen — auf dem Server gibt es keinen
+  // localStorage, und ein abweichender Startwert führte zu Hydrationsfehlern.
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setView(readStoredView());
+  }, []);
+
+  const changeView = (next: View) => {
+    setView(next);
+    window.localStorage.setItem(VIEW_STORAGE_KEY, next);
+  };
+
   const load = useCallback(async () => {
     try {
       const result = await apiJson<{ codes: QrCodeDto[] }>("/api/codes");
@@ -128,12 +188,154 @@ export function CodesList() {
     }
   };
 
+  /* -------------------------------------------------- Filtern und Sortieren */
+
+  // Gruppen kommen aus den geladenen Codes — ein eigener Abruf wäre dafür
+  // unnötig, und Gruppen ohne Codes gehören hier ohnehin nicht in die Auswahl.
+  const groups = useMemo(() => {
+    const seen = new Map<string, string>();
+    for (const code of codes ?? []) {
+      if (code.groupName) seen.set(code.groupId, code.groupName);
+    }
+    return [...seen].map(([id, name]) => ({ id, name })).sort((a, b) =>
+      a.name.localeCompare(b.name, "de"),
+    );
+  }, [codes]);
+
+  const visible = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+
+    const filtered = (codes ?? []).filter((code) => {
+      if (groupFilter !== "alle" && code.groupId !== groupFilter) return false;
+      if (!needle) return true;
+      return [
+        displayName(code),
+        code.target,
+        code.shortUrl,
+        code.slug,
+        qrTypes[code.type]?.title ?? code.type,
+      ]
+        .join(" ")
+        .toLowerCase()
+        .includes(needle);
+    });
+
+    const sorted = [...filtered];
+    sorted.sort((a, b) => {
+      switch (sort) {
+        case "aelteste":
+          return a.createdAt.localeCompare(b.createdAt);
+        case "name":
+          return displayName(a).localeCompare(displayName(b), "de");
+        case "scans":
+          return b.scans - a.scans;
+        default:
+          return b.createdAt.localeCompare(a.createdAt);
+      }
+    });
+    return sorted;
+  }, [codes, query, sort, groupFilter]);
+
   /* ---------------------------------------------------------------- View */
 
   if (codes === null) {
     return <p className="text-sm text-slate-500">Codes werden geladen …</p>;
   }
 
+  /** Herunterladen und Löschen — in beiden Ansichten dieselben Ziele. */
+  const pngHref = (code: QrCodeDto) =>
+    `/api/codes/${code.id}/qr?format=png&download=1`;
+  const svgHref = (code: QrCodeDto) =>
+    `/api/codes/${code.id}/qr?format=svg&download=1`;
+
+  const toolbar = codes.length > 0 && (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="relative min-w-0 flex-1 basis-56">
+        <Icon
+          name="search"
+          className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-slate-400"
+        />
+        <TextInput
+          type="search"
+          aria-label="Codes durchsuchen"
+          placeholder="Suchen nach Name, Ziel oder Kurz-URL …"
+          className="pl-9"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+      </div>
+
+      {groups.length > 1 ? (
+        <Select
+          aria-label="Nach Gruppe filtern"
+          className="!w-auto"
+          value={groupFilter}
+          onChange={(event) => setGroupFilter(event.target.value)}
+        >
+          <option value="alle">Alle Gruppen</option>
+          {groups.map((group) => (
+            <option key={group.id} value={group.id}>
+              {group.name}
+            </option>
+          ))}
+        </Select>
+      ) : null}
+
+      <Select
+        aria-label="Sortierung"
+        className="!w-auto"
+        value={sort}
+        onChange={(event) => setSort(event.target.value as SortKey)}
+      >
+        {(Object.keys(SORT_LABELS) as SortKey[]).map((key) => (
+          <option key={key} value={key}>
+            {SORT_LABELS[key]}
+          </option>
+        ))}
+      </Select>
+
+      <div
+        role="group"
+        aria-label="Ansicht"
+        className="flex shrink-0 rounded-lg border border-slate-300 bg-white p-0.5"
+      >
+        {(
+          [
+            ["list", "viewList", "Als Liste anzeigen"],
+            ["cards", "viewGrid", "Als Karten anzeigen"],
+          ] as const
+        ).map(([value, icon, label]) => (
+          <button
+            key={value}
+            type="button"
+            aria-pressed={view === value}
+            aria-label={label}
+            title={label}
+            data-view={value}
+            onClick={() => changeView(value)}
+            className={cx(
+              "rounded-md p-2 transition-colors",
+              view === value
+                ? "bg-indigo-50 text-indigo-700"
+                : "text-slate-500 hover:bg-slate-100 hover:text-slate-700",
+            )}
+          >
+            <Icon name={icon} className="size-4" />
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  const resultCount =
+    codes.length > 0 ? (
+      <p className="text-sm text-slate-500 tabular-nums">
+        {visible.length === codes.length
+          ? `${codes.length} ${codes.length === 1 ? "Code" : "Codes"}`
+          : `${visible.length} von ${codes.length} Codes`}
+      </p>
+    ) : null;
+
   return (
     <div className="space-y-4">
       {loadError ? <Notice tone="error">{loadError}</Notice> : null}
@@ -159,11 +361,234 @@ export function CodesList() {
         </Card>
       ) : null}
 
-      {codes.map((code) => (
+      {toolbar}
+      {resultCount}
+
+      {codes.length > 0 && visible.length === 0 ? (
+        <Card className="text-center">
+          <p className="text-sm text-slate-600">
+            Kein Code passt zur Suche.{" "}
+            <button
+              type="button"
+              onClick={() => {
+                setQuery("");
+                setGroupFilter("alle");
+              }}
+              className="font-medium text-indigo-600 underline"
+            >
+              Filter zurücksetzen
+            </button>
+          </p>
+        </Card>
+      ) : null}
+
+      {/* ------------------------------------------------------ Listenansicht */}
+      {view === "list" && visible.length > 0 ? (
+        <div className="rounded-2xl border border-slate-200 bg-white 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. */}
+          {/* Feste Spaltenbreiten: so bekommt der Name den ganzen Rest und
+              kürzt selbst, statt die Tabelle breiter zu machen als die Seite. */}
+          <table className="w-full table-fixed text-sm">
+            <thead>
+              <tr className="border-b border-slate-200 bg-slate-50 text-left text-xs font-semibold tracking-wide text-slate-500 uppercase">
+                <th scope="col" className="py-2.5 pr-2 pl-3 sm:pr-3 sm:pl-4">
+                  Name
+                </th>
+                <th scope="col" className="hidden w-44 px-3 py-2.5 md:table-cell lg:w-56">
+                  Kurz-URL
+                </th>
+                <th scope="col" className="hidden w-40 px-3 py-2.5 sm:table-cell lg:w-56">
+                  Ziel
+                </th>
+                {groups.length > 1 ? (
+                  <th scope="col" className="hidden w-32 px-3 py-2.5 lg:table-cell">
+                    Gruppe
+                  </th>
+                ) : null}
+                <th scope="col" className="w-16 px-3 py-2.5 text-right sm:w-20">
+                  Scans
+                </th>
+                <th
+                  scope="col"
+                  className="hidden w-24 px-3 py-2.5 whitespace-nowrap sm:table-cell"
+                >
+                  Erstellt
+                </th>
+                <th scope="col" className="w-20 py-2.5 pr-4 pl-3 text-right sm:w-36">
+                  <span className="sr-only">Aktionen</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {visible.map((code) => (
+                <tr key={code.id} className="hover:bg-slate-50/70">
+                  <td className="py-2.5 pr-2 pl-3 sm:pr-3 sm:pl-4">
+                    <div className="flex items-center gap-2 sm:gap-3">
+                      {/* Reines Bild zum Wiedererkennen — zum Herunterladen
+                          stehen PNG und SVG am Zeilenende. */}
+                      <span className="qr-canvas size-8 shrink-0 rounded-md border border-slate-200 p-0.5 sm:size-10">
+                        {/* eslint-disable-next-line @next/next/no-img-element -- vom Server gerendertes SVG */}
+                        <img
+                          src={`/api/codes/${code.id}/qr`}
+                          alt=""
+                          loading="lazy"
+                          className="h-full w-full object-contain"
+                        />
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <div
+                          data-code-name
+                          className="truncate font-medium text-slate-900"
+                        >
+                          {displayName(code)}
+                        </div>
+                        {/* Solange die Kurz-URL keine eigene Spalte hat, steht
+                            sie hier — sie ist wichtiger als der Typ. */}
+                        <div className="truncate text-xs text-slate-500">
+                          {/* Nur der Pfad: Der Hostname ist auf dem Handy
+                              gleich für alle Zeilen, der Slug unterscheidet. */}
+                          <span className="font-mono md:hidden" title={code.shortUrl}>
+                            {code.shortUrl.replace(/^https?:\/\/[^/]+/, "")}
+                          </span>
+                          <span className="hidden md:inline">
+                            {qrTypes[code.type]?.title ?? code.type}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+
+                  <td className="hidden px-3 py-2.5 md:table-cell">
+                    <div className="flex items-center gap-1.5">
+                      <a
+                        href={code.shortUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="truncate font-mono text-xs text-indigo-600 hover:underline"
+                        title={code.shortUrl}
+                      >
+                        {code.shortUrl.replace(/^https?:\/\//, "")}
+                      </a>
+                      <button
+                        type="button"
+                        onClick={() => void copy(code)}
+                        title="Kurz-URL kopieren"
+                        className="rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+                      >
+                        <Icon
+                          name={copiedId === code.id ? "check" : "copy"}
+                          className="size-3.5"
+                        />
+                      </button>
+                    </div>
+                  </td>
+
+                  <td className="hidden px-3 py-2.5 sm:table-cell">
+                    {code.target ? (
+                      <a
+                        href={code.target}
+                        target="_blank"
+                        rel="noreferrer"
+                        title={code.target}
+                        className="block truncate text-slate-700 hover:underline"
+                      >
+                        {code.target.replace(/^https?:\/\//, "")}
+                      </a>
+                    ) : (
+                      <span className="block truncate text-red-600" title={code.summary}>
+                        {code.summary}
+                      </span>
+                    )}
+                  </td>
+
+                  {groups.length > 1 ? (
+                    <td className="hidden px-3 py-2.5 text-slate-600 lg:table-cell">
+                      <span className="block truncate" title={code.groupName ?? undefined}>
+                        {code.groupName ?? "—"}
+                      </span>
+                    </td>
+                  ) : null}
+
+                  <td className="px-3 py-2.5 text-right font-semibold text-slate-900 tabular-nums">
+                    {code.scans}
+                  </td>
+
+                  <td
+                    className="hidden px-3 py-2.5 whitespace-nowrap text-slate-500 tabular-nums sm:table-cell"
+                    title={`Erstellt: ${formatDate(code.createdAt)}\nLetzter Scan: ${formatDate(code.lastScanAt)}`}
+                  >
+                    {formatShortDate(code.createdAt)}
+                  </td>
+
+                  <td className="py-2.5 pr-4 pl-3">
+                    <div className="flex items-center justify-end gap-0.5">
+                      {/* Ein Feedback-Code ohne Weg zu den Antworten waere
+                          nur die halbe Sache. */}
+                      {code.type === "feedback" ? (
+                        <Link
+                          href={`/meine-codes/${code.id}/feedback`}
+                          title="Rückmeldungen ansehen"
+                          aria-label={`Rückmeldungen zu ${displayName(code)} ansehen`}
+                          className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900"
+                        >
+                          <Icon name="star" className="size-4" />
+                        </Link>
+                      ) : null}
+                      <button
+                        type="button"
+                        onClick={() => openEdit(code)}
+                        title="Ziel bearbeiten"
+                        aria-label={`Ziel von ${displayName(code)} bearbeiten`}
+                        className="rounded-md p-1.5 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900"
+                      >
+                        <Icon name="pencil" className="size-4" />
+                      </button>
+                      {/* Auf dem Handy fehlt der Platz; dort führt der Weg zum
+                          Download über die Kartenansicht. */}
+                      <a
+                        href={pngHref(code)}
+                        title="Als PNG herunterladen"
+                        className="hidden rounded-md px-1.5 py-1 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 sm:inline-block"
+                      >
+                        PNG
+                      </a>
+                      <a
+                        href={svgHref(code)}
+                        title="Als SVG herunterladen"
+                        className="hidden rounded-md px-1.5 py-1 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-900 sm:inline-block"
+                      >
+                        SVG
+                      </a>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setDeleting(code);
+                          setDeleteError(null);
+                        }}
+                        title="Löschen"
+                        aria-label={`${displayName(code)} löschen`}
+                        className="rounded-md p-1.5 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                      >
+                        <Icon name="trash" className="size-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : null}
+
+      {/* ------------------------------------------------------ Kartenansicht */}
+      {view === "cards" &&
+        visible.map((code) => (
         <Card key={code.id}>
           <div className="flex flex-col gap-5 sm:flex-row">
             <a
-              href={`/api/codes/${code.id}/qr?format=png&download=1`}
+              href={pngHref(code)}
               title="Als PNG herunterladen"
               className="qr-canvas size-28 shrink-0 self-start rounded-xl border border-slate-200 p-1.5"
             >
@@ -171,6 +596,7 @@ export function CodesList() {
               <img
                 src={`/api/codes/${code.id}/qr`}
                 alt={`QR-Code für ${code.summary}`}
+                loading="lazy"
                 className="h-full w-full object-contain"
               />
             </a>
@@ -241,6 +667,15 @@ export function CodesList() {
               </div>
 
               <div className="mt-4 flex flex-wrap gap-2">
+                {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"
+                  >
+                    <Icon name="star" className="size-3.5" />
+                    Rückmeldungen
+                  </Link>
+                ) : null}
                 <Button
                   type="button"
                   variant="secondary"

src/components/domain-admin.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { Icon } from "@/components/icons";
+import { Modal } from "@/components/modal";
+import {
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Field,
+  Notice,
+  TextInput,
+} from "@/components/ui";
+import { ApiError, apiJson } from "@/lib/api-client";
+
+type Grant = { groupId: string; groupName: string; isDefault: boolean };
+
+type AdminDomain = {
+  id: string;
+  hostname: string;
+  label: string | null;
+  isActive: boolean;
+  codeCount: number;
+  grants: Grant[];
+};
+
+type GroupOption = { id: string; name: string };
+
+export function DomainAdmin({ baseUrlHostname }: { baseUrlHostname: string }) {
+  const [domains, setDomains] = useState<AdminDomain[] | null>(null);
+  const [groups, setGroups] = useState<GroupOption[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState({ hostname: "", label: "" });
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const [editing, setEditing] = useState<AdminDomain | null>(null);
+  const [grants, setGrants] = useState<Grant[]>([]);
+  const [grantError, setGrantError] = useState<string | null>(null);
+
+  const [deleting, setDeleting] = useState<AdminDomain | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const result = await apiJson<{
+        domains: AdminDomain[];
+        groups: GroupOption[];
+      }>("/api/admin/domains");
+      setDomains(result.domains);
+      setGroups(result.groups);
+      setError(null);
+    } catch (caught) {
+      setDomains([]);
+      setError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Domains konnten nicht geladen werden.",
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    // setState folgt erst nach dem await der Netzwerkantwort.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    void load();
+  }, [load]);
+
+  const create = async () => {
+    setFormError(null);
+    try {
+      await apiJson("/api/admin/domains", { method: "POST", json: form });
+      setCreating(false);
+      setForm({ hostname: "", label: "" });
+      await load();
+    } catch (caught) {
+      setFormError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Domain konnte nicht angelegt werden.",
+      );
+    }
+  };
+
+  const patch = async (id: string, body: unknown, onDone?: () => void) => {
+    setBusy(id);
+    setError(null);
+    try {
+      await apiJson(`/api/admin/domains/${id}`, { method: "PATCH", json: body });
+      await load();
+      onDone?.();
+      return true;
+    } catch (caught) {
+      const message =
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Änderung konnte nicht gespeichert werden.";
+      if (onDone) setGrantError(message);
+      else setError(message);
+      return false;
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const remove = async () => {
+    if (!deleting) return;
+    try {
+      await apiJson(`/api/admin/domains/${deleting.id}`, { method: "DELETE" });
+      setDeleting(null);
+      await load();
+    } catch (caught) {
+      setError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Domain konnte nicht gelöscht werden.",
+      );
+      setDeleting(null);
+    }
+  };
+
+  if (domains === null) {
+    return <p className="text-sm text-slate-500">Domains werden geladen …</p>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {error ? <Notice tone="error">{error}</Notice> : null}
+
+      <Notice tone="info">
+        Eine Domain wirkt erst, wenn dein Reverse Proxy sie auf diese Anwendung
+        weiterleitet. Die Weiterleitung erkennt sie am{" "}
+        <code className="font-mono text-xs">Host</code>-Header und prüft ihn
+        gegen diese Liste — ein unbekannter Hostname endet mit 404.
+      </Notice>
+
+      <div className="flex justify-end">
+        <Button type="button" onClick={() => setCreating(true)}>
+          Domain registrieren
+        </Button>
+      </div>
+
+      {domains.map((domain) => (
+        <Card key={domain.id}>
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <h2 className="font-mono font-semibold text-slate-900">
+                  {domain.hostname}
+                </h2>
+                {domain.hostname === baseUrlHostname ? (
+                  <Badge tone="accent">aus BASE_URL</Badge>
+                ) : null}
+                {!domain.isActive ? (
+                  <Badge tone="soon">abgeschaltet</Badge>
+                ) : null}
+                <Badge tone="neutral">
+                  {domain.codeCount} {domain.codeCount === 1 ? "Code" : "Codes"}
+                </Badge>
+              </div>
+
+              {domain.label ? (
+                <p className="mt-1 text-sm text-slate-600">{domain.label}</p>
+              ) : null}
+
+              <p className="mt-2 text-sm text-slate-600">
+                {domain.grants.length === 0
+                  ? "Keiner Gruppe zugeteilt — niemand kann hier Codes anlegen."
+                  : domain.grants
+                      .map(
+                        (grant) =>
+                          `${grant.groupName}${grant.isDefault ? " (Voreinstellung)" : ""}`,
+                      )
+                      .join(" · ")}
+              </p>
+
+              <div className="mt-4 flex flex-wrap gap-2">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="sm"
+                  disabled={busy === domain.id}
+                  onClick={() => {
+                    setEditing(domain);
+                    setGrants(domain.grants);
+                    setGrantError(null);
+                  }}
+                >
+                  <Icon name="pencil" className="size-3.5" />
+                  Gruppen zuteilen
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="sm"
+                  disabled={busy === domain.id}
+                  onClick={() => void patch(domain.id, { isActive: !domain.isActive })}
+                >
+                  {domain.isActive ? "Abschalten" : "Einschalten"}
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="text-red-600 hover:bg-red-50"
+                  disabled={busy === domain.id}
+                  onClick={() => setDeleting(domain)}
+                >
+                  <Icon name="trash" className="size-3.5" />
+                  Löschen
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Card>
+      ))}
+
+      {/* --------------------------------------------------- Registrieren */}
+      <Modal
+        open={creating}
+        title="Domain registrieren"
+        onClose={() => setCreating(false)}
+        footer={
+          <>
+            <Button type="button" variant="secondary" onClick={() => setCreating(false)}>
+              Abbrechen
+            </Button>
+            <Button type="button" onClick={() => void create()}>
+              Registrieren
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          {formError ? <Notice tone="error">{formError}</Notice> : null}
+          <Field
+            label="Hostname"
+            htmlFor="new-domain-host"
+            hint="Ohne https:// und ohne Pfad — genau so, wie er im Browser steht."
+          >
+            <TextInput
+              id="new-domain-host"
+              className="font-mono"
+              placeholder="qr.example.com"
+              value={form.hostname}
+              onChange={(event) =>
+                setForm({ ...form, hostname: event.target.value })
+              }
+            />
+          </Field>
+          <Field label="Bezeichnung (optional)" htmlFor="new-domain-label">
+            <TextInput
+              id="new-domain-label"
+              placeholder="Kundenprojekt Nord"
+              value={form.label}
+              onChange={(event) => setForm({ ...form, label: event.target.value })}
+            />
+          </Field>
+        </div>
+      </Modal>
+
+      {/* ------------------------------------------------------- Zuteilung */}
+      <Modal
+        open={editing !== null}
+        title={`Gruppen für ${editing?.hostname ?? ""}`}
+        onClose={() => setEditing(null)}
+        footer={
+          <>
+            <Button type="button" variant="secondary" onClick={() => setEditing(null)}>
+              Abbrechen
+            </Button>
+            <Button
+              type="button"
+              disabled={busy === editing?.id}
+              onClick={() =>
+                editing &&
+                void patch(
+                  editing.id,
+                  {
+                    grants: grants.map((grant) => ({
+                      groupId: grant.groupId,
+                      isDefault: grant.isDefault,
+                    })),
+                  },
+                  () => setEditing(null),
+                )
+              }
+            >
+              Speichern
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          {grantError ? <Notice tone="error">{grantError}</Notice> : null}
+          <p className="text-sm text-slate-600">
+            Mehrere Gruppen dürfen dieselbe Domain nutzen. Die Voreinstellung
+            bestimmt, welche Domain beim Anlegen eines Codes vorausgewählt ist.
+          </p>
+
+          <ul className="space-y-2">
+            {groups.map((group) => {
+              const grant = grants.find((entry) => entry.groupId === group.id);
+              return (
+                <li
+                  key={group.id}
+                  className="flex flex-wrap items-center gap-3 rounded-lg border border-slate-200 p-2.5"
+                >
+                  <Checkbox
+                    id={`grant-${group.id}`}
+                    label={group.name}
+                    checked={Boolean(grant)}
+                    onChange={(event) =>
+                      setGrants((current) =>
+                        event.target.checked
+                          ? [
+                              ...current,
+                              {
+                                groupId: group.id,
+                                groupName: group.name,
+                                isDefault: false,
+                              },
+                            ]
+                          : current.filter((entry) => entry.groupId !== group.id),
+                      )
+                    }
+                  />
+                  {grant ? (
+                    <label className="ml-auto flex items-center gap-1.5 text-xs text-slate-600">
+                      <input
+                        type="checkbox"
+                        className="size-3.5 rounded border-slate-300 accent-indigo-600"
+                        checked={grant.isDefault}
+                        onChange={(event) =>
+                          setGrants((current) =>
+                            current.map((entry) =>
+                              entry.groupId === group.id
+                                ? { ...entry, isDefault: event.target.checked }
+                                : entry,
+                            ),
+                          )
+                        }
+                      />
+                      Voreinstellung
+                    </label>
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </Modal>
+
+      {/* -------------------------------------------------------- Löschen */}
+      <Modal
+        open={deleting !== null}
+        title="Domain löschen?"
+        onClose={() => setDeleting(null)}
+        footer={
+          <>
+            <Button type="button" variant="secondary" onClick={() => setDeleting(null)}>
+              Abbrechen
+            </Button>
+            <Button type="button" variant="danger" onClick={() => void remove()}>
+              Endgültig löschen
+            </Button>
+          </>
+        }
+      >
+        {deleting ? (
+          <p className="text-sm text-slate-600">
+            <strong className="font-mono text-slate-900">
+              {deleting.hostname}
+            </strong>{" "}
+            wird entfernt.
+            {deleting.codeCount > 0
+              ? ` Unter dieser Domain liegen noch ${deleting.codeCount} ${deleting.codeCount === 1 ? "Code" : "Codes"} — das Löschen wird deshalb abgelehnt. Schalte sie stattdessen ab.`
+              : " Es liegen keine Codes darunter."}
+          </p>
+        ) : null}
+      </Modal>
+    </div>
+  );
+}

src/components/group-admin.tsx

@@ -0,0 +1,401 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { Icon } from "@/components/icons";
+import { Modal } from "@/components/modal";
+import {
+  Badge,
+  Button,
+  Card,
+  Field,
+  Notice,
+  Select,
+  TextInput,
+} from "@/components/ui";
+import { ApiError, apiJson } from "@/lib/api-client";
+
+type Role = "ADMIN" | "EDITOR" | "VIEWER";
+
+const ROLE_LABELS: Record<Role, string> = {
+  ADMIN: "Administrator",
+  EDITOR: "Bearbeiter",
+  VIEWER: "Betrachter",
+};
+
+const ROLE_HINTS: Record<Role, string> = {
+  ADMIN: "darf auch Mitglieder verwalten",
+  EDITOR: "darf Codes anlegen und ändern",
+  VIEWER: "darf nur ansehen",
+};
+
+type Member = { userId: string; email: string; name: string | null; role: Role };
+
+type AdminGroup = {
+  id: string;
+  name: string;
+  description: string | null;
+  codeCount: number;
+  canManage: boolean;
+  members: Member[];
+};
+
+type PickerUser = { id: string; email: string; name: string | null };
+
+export function GroupAdmin({ canCreate }: { canCreate: boolean }) {
+  const [groups, setGroups] = useState<AdminGroup[] | null>(null);
+  const [users, setUsers] = useState<PickerUser[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const [creating, setCreating] = useState(false);
+  const [form, setForm] = useState({ name: "", description: "" });
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const [editing, setEditing] = useState<AdminGroup | null>(null);
+  const [members, setMembers] = useState<Member[]>([]);
+  const [memberError, setMemberError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const [deleting, setDeleting] = useState<AdminGroup | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const result = await apiJson<{ groups: AdminGroup[] }>("/api/admin/groups");
+      setGroups(result.groups);
+      setError(null);
+    } catch (caught) {
+      setGroups([]);
+      setError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Gruppen konnten nicht geladen werden.",
+      );
+    }
+
+    if (canCreate) {
+      try {
+        const result = await apiJson<{ users: PickerUser[] }>("/api/admin/users");
+        setUsers(result.users);
+      } catch {
+        // Ohne Benutzerliste lässt sich zwar niemand hinzufügen, die
+        // Gruppenübersicht bleibt aber brauchbar.
+      }
+    }
+  }, [canCreate]);
+
+  useEffect(() => {
+    // setState folgt erst nach dem await der Netzwerkantwort.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    void load();
+  }, [load]);
+
+  const create = async () => {
+    setFormError(null);
+    try {
+      await apiJson("/api/admin/groups", { method: "POST", json: form });
+      setCreating(false);
+      setForm({ name: "", description: "" });
+      await load();
+    } catch (caught) {
+      setFormError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Gruppe konnte nicht angelegt werden.",
+      );
+    }
+  };
+
+  const saveMembers = async () => {
+    if (!editing) return;
+    setSaving(true);
+    setMemberError(null);
+    try {
+      await apiJson(`/api/admin/groups/${editing.id}`, {
+        method: "PATCH",
+        json: { members: members.map((m) => ({ userId: m.userId, role: m.role })) },
+      });
+      setEditing(null);
+      await load();
+    } catch (caught) {
+      setMemberError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Mitglieder konnten nicht gespeichert werden.",
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async () => {
+    if (!deleting) return;
+    try {
+      await apiJson(`/api/admin/groups/${deleting.id}`, { method: "DELETE" });
+      setDeleting(null);
+      await load();
+    } catch (caught) {
+      setError(
+        caught instanceof ApiError
+          ? caught.message
+          : "Die Gruppe konnte nicht gelöscht werden.",
+      );
+      setDeleting(null);
+    }
+  };
+
+  if (groups === null) {
+    return <p className="text-sm text-slate-500">Gruppen werden geladen …</p>;
+  }
+
+  const available = users.filter(
+    (user) => !members.some((member) => member.userId === user.id),
+  );
+
+  return (
+    <div className="space-y-4">
+      {error ? <Notice tone="error">{error}</Notice> : null}
+
+      {canCreate ? (
+        <div className="flex justify-end">
+          <Button type="button" onClick={() => setCreating(true)}>
+            Gruppe anlegen
+          </Button>
+        </div>
+      ) : null}
+
+      {groups.map((group) => (
+        <Card key={group.id}>
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <h2 className="font-semibold text-slate-900">{group.name}</h2>
+                <Badge tone="neutral">
+                  {group.codeCount} {group.codeCount === 1 ? "Code" : "Codes"}
+                </Badge>
+              </div>
+              {group.description ? (
+                <p className="mt-1 text-sm text-slate-600">{group.description}</p>
+              ) : null}
+
+              <ul className="mt-3 space-y-1 text-sm">
+                {group.members.length === 0 ? (
+                  <li className="text-slate-500">Noch keine Mitglieder.</li>
+                ) : (
+                  group.members.map((member) => (
+                    <li key={member.userId} className="text-slate-700">
+                      {member.name?.trim() || member.email}
+                      <span className="text-slate-500">
+                        {" "}
+                        — {ROLE_LABELS[member.role]}
+                      </span>
+                    </li>
+                  ))
+                )}
+              </ul>
+
+              <div className="mt-4 flex flex-wrap gap-2">
+                {group.canManage ? (
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="sm"
+                    onClick={() => {
+                      setEditing(group);
+                      setMembers(group.members);
+                      setMemberError(null);
+                    }}
+                  >
+                    <Icon name="pencil" className="size-3.5" />
+                    Mitglieder verwalten
+                  </Button>
+                ) : null}
+                {canCreate ? (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="text-red-600 hover:bg-red-50"
+                    onClick={() => setDeleting(group)}
+                  >
+                    <Icon name="trash" className="size-3.5" />
+                    Löschen
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </Card>
+      ))}
+
+      {/* ------------------------------------------------------- Anlegen */}
+      <Modal
+        open={creating}
+        title="Gruppe anlegen"
+        onClose={() => setCreating(false)}
+        footer={
+          <>
+            <Button type="button" variant="secondary" onClick={() => setCreating(false)}>
+              Abbrechen
+            </Button>
+            <Button type="button" onClick={() => void create()}>
+              Anlegen
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          {formError ? <Notice tone="error">{formError}</Notice> : null}
+          <Field label="Name" htmlFor="new-group-name">
+            <TextInput
+              id="new-group-name"
+              value={form.name}
+              onChange={(event) => setForm({ ...form, name: event.target.value })}
+            />
+          </Field>
+          <Field label="Beschreibung (optional)" htmlFor="new-group-description">
+            <TextInput
+              id="new-group-description"
+              value={form.description}
+              onChange={(event) =>
+                setForm({ ...form, description: event.target.value })
+              }
+            />
+          </Field>
+        </div>
+      </Modal>
+
+      {/* ---------------------------------------------------- Mitglieder */}
+      <Modal
+        open={editing !== null}
+        title={`Mitglieder von „${editing?.name ?? ""}“`}
+        onClose={() => setEditing(null)}
+        footer={
+          <>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => setEditing(null)}
+              disabled={saving}
+            >
+              Abbrechen
+            </Button>
+            <Button type="button" onClick={() => void saveMembers()} disabled={saving}>
+              {saving ? "Speichert …" : "Speichern"}
+            </Button>
+          </>
+        }
+      >
+        <div className="space-y-4">
+          {memberError ? <Notice tone="error">{memberError}</Notice> : null}
+
+          {members.length === 0 ? (
+            <p className="text-sm text-slate-500">
+              Diese Gruppe hat noch keine Mitglieder.
+            </p>
+          ) : (
+            <ul className="space-y-2">
+              {members.map((member) => (
+                <li
+                  key={member.userId}
+                  className="flex flex-wrap items-center gap-2 rounded-lg border border-slate-200 p-2.5"
+                >
+                  <span className="min-w-0 flex-1 truncate text-sm text-slate-800">
+                    {member.name?.trim() || member.email}
+                  </span>
+                  <Select
+                    aria-label={`Rolle von ${member.email}`}
+                    className="!w-auto"
+                    value={member.role}
+                    onChange={(event) =>
+                      setMembers((current) =>
+                        current.map((entry) =>
+                          entry.userId === member.userId
+                            ? { ...entry, role: event.target.value as Role }
+                            : entry,
+                        ),
+                      )
+                    }
+                  >
+                    {(Object.keys(ROLE_LABELS) as Role[]).map((role) => (
+                      <option key={role} value={role}>
+                        {ROLE_LABELS[role]} — {ROLE_HINTS[role]}
+                      </option>
+                    ))}
+                  </Select>
+                  <button
+                    type="button"
+                    aria-label={`${member.email} entfernen`}
+                    onClick={() =>
+                      setMembers((current) =>
+                        current.filter((entry) => entry.userId !== member.userId),
+                      )
+                    }
+                    className="rounded p-1.5 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                  >
+                    <Icon name="trash" className="size-4" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {available.length > 0 ? (
+            <Field label="Mitglied hinzufügen" htmlFor="add-member">
+              <Select
+                id="add-member"
+                value=""
+                onChange={(event) => {
+                  const user = users.find((u) => u.id === event.target.value);
+                  if (!user) return;
+                  setMembers((current) => [
+                    ...current,
+                    {
+                      userId: user.id,
+                      email: user.email,
+                      name: user.name,
+                      role: "EDITOR",
+                    },
+                  ]);
+                }}
+              >
+                <option value="">Benutzer wählen …</option>
+                {available.map((user) => (
+                  <option key={user.id} value={user.id}>
+                    {user.name?.trim() || user.email}
+                  </option>
+                ))}
+              </Select>
+            </Field>
+          ) : null}
+        </div>
+      </Modal>
+
+      {/* -------------------------------------------------------- Löschen */}
+      <Modal
+        open={deleting !== null}
+        title="Gruppe löschen?"
+        onClose={() => setDeleting(null)}
+        footer={
+          <>
+            <Button type="button" variant="secondary" onClick={() => setDeleting(null)}>
+              Abbrechen
+            </Button>
+            <Button type="button" variant="danger" onClick={() => void remove()}>
+              Endgültig löschen
+            </Button>
+          </>
+        }
+      >
+        {deleting ? (
+          <p className="text-sm text-slate-600">
+            <strong className="text-slate-900">{deleting.name}</strong> wird
+            gelöscht und alle Mitgliedschaften entfallen.
+            {deleting.codeCount > 0
+              ? ` Die Gruppe enthält noch ${deleting.codeCount} ${deleting.codeCount === 1 ? "Code" : "Codes"} — das Löschen wird deshalb abgelehnt.`
+              : " Sie enthält keine Codes."}
+          </p>
+        ) : null}
+      </Modal>
+    </div>
+  );
+}

src/components/icons.tsx

@@ -115,6 +115,49 @@ const PATHS = {
     </>
   ),
   check: <path d="m4.5 12.5 5 5 10-11" />,
+  search: (
+    <>
+      <circle cx="10.8" cy="10.8" r="6.3" />
+      <path d="m15.5 15.5 5 5" />
+    </>
+  ),
+  viewList: (
+    <>
+      <rect x="3" y="4.5" width="18" height="4" rx="1.2" />
+      <rect x="3" y="10" width="18" height="4" rx="1.2" />
+      <rect x="3" y="15.5" width="18" height="4" rx="1.2" />
+    </>
+  ),
+  viewGrid: (
+    <>
+      <rect x="3.5" y="3.5" width="7" height="7" rx="1.5" />
+      <rect x="13.5" y="3.5" width="7" height="7" rx="1.5" />
+      <rect x="3.5" y="13.5" width="7" height="7" rx="1.5" />
+      <rect x="13.5" y="13.5" width="7" height="7" rx="1.5" />
+    </>
+  ),
+  eye: (
+    <>
+      <path d="M2.5 12s3.6-6.5 9.5-6.5S21.5 12 21.5 12s-3.6 6.5-9.5 6.5S2.5 12 2.5 12Z" />
+      <circle cx="12" cy="12" r="3" />
+    </>
+  ),
+  eyeOff: (
+    <>
+      <path d="M10.8 6.1A8.6 8.6 0 0 1 12 5.5c5.9 0 9.5 6.5 9.5 6.5a16 16 0 0 1-3 3.8" />
+      <path d="M6.5 6.9A15.7 15.7 0 0 0 2.5 12s3.6 6.5 9.5 6.5a8.8 8.8 0 0 0 4-1" />
+      <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
+      <path d="m3 3 18 18" />
+    </>
+  ),
+  dice: (
+    <>
+      <rect x="3.5" y="3.5" width="17" height="17" rx="3" />
+      <circle cx="8.5" cy="8.5" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="15.5" cy="15.5" r="1.1" fill="currentColor" stroke="none" />
+      <circle cx="12" cy="12" r="1.1" fill="currentColor" stroke="none" />
+    </>
+  ),
   copy: (
     <>
       <rect x="9" y="9" width="12" height="12" rx="2" />

src/components/landing/feedback-landing.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+
+import { LandingShell } from "@/components/landing/shell";
+import type { LandingProps } from "@/components/landing/types";
+import { FEEDBACK_SCALES, feedbackDataSchema } from "@/lib/qr/types/feedback";
+
+export function FeedbackLanding({ data, codeId }: LandingProps) {
+  const { title, question, scale, allowComment, commentLabel, thankYou } =
+    feedbackDataSchema.parse(data);
+
+  const [note, setNote] = useState<number | null>(null);
+  const [kommentar, setKommentar] = useState("");
+  const [laeuft, setLaeuft] = useState(false);
+  const [fertig, setFertig] = useState(false);
+  const [fehler, setFehler] = useState<string | null>(null);
+
+  const symbole = FEEDBACK_SCALES[scale].symbols;
+
+  async function absenden() {
+    if (note === null) return;
+    setLaeuft(true);
+    setFehler(null);
+    try {
+      const response = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ codeId, rating: note, comment: kommentar }),
+      });
+      if (!response.ok) {
+        const body = await response.json().catch(() => null);
+        setFehler(body?.error ?? "Die Rückmeldung konnte nicht gesendet werden.");
+        return;
+      }
+      setFertig(true);
+    } catch {
+      setFehler(
+        "Die Rückmeldung konnte nicht gesendet werden. Besteht die Verbindung noch?",
+      );
+    } finally {
+      setLaeuft(false);
+    }
+  }
+
+  if (fertig) {
+    return (
+      <LandingShell title={title}>
+        <div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-6 py-10 text-center">
+          <p className="text-4xl" aria-hidden="true">
+            ✓
+          </p>
+          <p className="mt-3 text-lg font-medium text-emerald-900">
+            {thankYou}
+          </p>
+        </div>
+      </LandingShell>
+    );
+  }
+
+  return (
+    <LandingShell title={title}>
+      <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
+        <fieldset>
+          <legend className="text-center text-base font-medium text-slate-900">
+            {question}
+          </legend>
+
+          <div className="mt-5 flex justify-center gap-1.5 sm:gap-2">
+            {symbole.map((symbol, index) => {
+              const wert = index + 1;
+              const gewaehlt = note !== null && note >= wert;
+              return (
+                <button
+                  key={wert}
+                  type="button"
+                  aria-label={`${wert} von 5`}
+                  aria-pressed={note === wert}
+                  disabled={laeuft}
+                  onClick={() => setNote(wert)}
+                  className={
+                    scale === "stars"
+                      ? `rounded-lg px-1 text-4xl transition-transform hover:scale-110 sm:text-5xl ${
+                          gewaehlt ? "text-amber-400" : "text-slate-200"
+                        }`
+                      : `rounded-lg px-1 text-3xl transition-transform hover:scale-110 sm:text-4xl ${
+                          note === wert
+                            ? "scale-110"
+                            : "opacity-40 grayscale"
+                        }`
+                  }
+                >
+                  {symbol}
+                </button>
+              );
+            })}
+          </div>
+
+          {note !== null ? (
+            <p className="mt-2 text-center text-sm text-slate-500">
+              {note} von 5
+            </p>
+          ) : null}
+        </fieldset>
+
+        {allowComment ? (
+          <div className="mt-6">
+            <label
+              htmlFor="feedback-comment"
+              className="mb-1.5 block text-sm font-medium text-slate-700"
+            >
+              {commentLabel}
+            </label>
+            <textarea
+              id="feedback-comment"
+              rows={3}
+              maxLength={1000}
+              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"
+              placeholder="Optional"
+            />
+          </div>
+        ) : null}
+
+        {fehler ? (
+          <p role="alert" className="mt-4 text-sm text-red-600">
+            {fehler}
+          </p>
+        ) : null}
+
+        <button
+          type="button"
+          disabled={note === null || laeuft}
+          onClick={() => void absenden()}
+          className="mt-6 w-full rounded-lg bg-indigo-600 px-4 py-3 font-medium text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+        >
+          {laeuft ? "Wird gesendet …" : "Absenden"}
+        </button>
+
+        <p className="mt-3 text-center text-xs text-slate-400">
+          Deine Rückmeldung wird ohne Namen und ohne IP-Adresse gespeichert.
+        </p>
+      </div>
+    </LandingShell>
+  );
+}

src/components/landing/image-landing.tsx

@@ -0,0 +1,36 @@
+import { LandingShell } from "@/components/landing/shell";
+import type { LandingProps } from "@/components/landing/types";
+import { imageDataSchema } from "@/lib/qr/types/image";
+
+export function ImageLanding({ data }: LandingProps) {
+  const { title, description, images } = imageDataSchema.parse(data);
+
+  return (
+    <LandingShell title={title || "Bilder"} subtitle={description || null}>
+      <div className="space-y-4">
+        {images.map((image, index) => (
+          <figure
+            key={image.fileId}
+            className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element -- eigene
+                Auslieferung ohne bekannte Maße; der Optimierer von Next
+                brächte hier nichts. */}
+            <img
+              src={`/api/uploads/${image.fileId}`}
+              alt={image.caption || `Bild ${index + 1}`}
+              // Das erste Bild sieht man sofort, die übrigen erst beim Scrollen.
+              loading={index === 0 ? "eager" : "lazy"}
+              className="block w-full"
+            />
+            {image.caption ? (
+              <figcaption className="border-t border-slate-100 px-4 py-3 text-sm text-slate-600">
+                {image.caption}
+              </figcaption>
+            ) : null}
+          </figure>
+        ))}
+      </div>
+    </LandingShell>
+  );
+}

src/components/landing/index.ts

@@ -0,0 +1,29 @@
+import type { ComponentType } from "react";
+
+import { FeedbackLanding } from "@/components/landing/feedback-landing";
+import { ImageLanding } from "@/components/landing/image-landing";
+import { LinksLanding } from "@/components/landing/links-landing";
+import { PdfLanding } from "@/components/landing/pdf-landing";
+import { SocialLanding } from "@/components/landing/social-landing";
+import type { LandingProps } from "@/components/landing/types";
+import { VideoLanding } from "@/components/landing/video-landing";
+import type { QrTypeId } from "@/lib/qr/type-module";
+
+/**
+ * Zuordnung QR-Typ → öffentliche Landingpage.
+ *
+ * Dritter Teil des Musters aus Typ-Registry (`src/lib/qr/registry.ts`) und
+ * Formular-Registry (`src/components/qr-forms/index.ts`): Ein Typ, der
+ * `hasLandingPage` meldet, braucht hier genau einen Eintrag.
+ */
+export const qrLandings: Partial<Record<QrTypeId, ComponentType<LandingProps>>> =
+  {
+    links: LinksLanding,
+    social: SocialLanding,
+    pdf: PdfLanding,
+    image: ImageLanding,
+    feedback: FeedbackLanding,
+    video: VideoLanding,
+  };
+
+export type { LandingProps };

src/components/landing/links-landing.tsx

@@ -0,0 +1,34 @@
+import { Icon } from "@/components/icons";
+import { LandingShell } from "@/components/landing/shell";
+import type { LandingProps } from "@/components/landing/types";
+import { linksDataSchema } from "@/lib/qr/types/links";
+
+export function LinksLanding({ data }: LandingProps) {
+  const { title, description, links } = linksDataSchema.parse(data);
+
+  return (
+    <LandingShell title={title} subtitle={description || null}>
+      <ul className="space-y-3">
+        {links.map((link, index) => (
+          <li key={`${index}-${link.url}`}>
+            <a
+              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"
+            >
+              <span className="min-w-0 flex-1 font-medium break-words">
+                {link.label}
+              </span>
+              <Icon
+                name="external"
+                className="size-4 shrink-0 text-slate-400"
+                aria-hidden="true"
+              />
+            </a>
+          </li>
+        ))}
+      </ul>
+    </LandingShell>
+  );
+}

src/components/landing/pdf-landing.tsx

@@ -0,0 +1,49 @@
+import { Icon } from "@/components/icons";
+import { LandingShell } from "@/components/landing/shell";
+import type { LandingProps } from "@/components/landing/types";
+import { pdfDataSchema } from "@/lib/qr/types/pdf";
+import { formatBytes } from "@/lib/uploads";
+
+export function PdfLanding({ data }: LandingProps) {
+  const { fileId, filename, size, title, description } =
+    pdfDataSchema.parse(data);
+  const href = `/api/uploads/${fileId}`;
+
+  return (
+    <LandingShell
+      title={title || filename || "PDF-Dokument"}
+      subtitle={description || null}
+    >
+      <div className="rounded-2xl border border-slate-200 bg-white 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" />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="truncate font-medium text-slate-900">{filename}</p>
+            <p className="text-sm text-slate-500">
+              PDF{size > 0 ? ` · ${formatBytes(size)}` : ""}
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-5 grid gap-2 sm:grid-cols-2">
+          <a
+            href={href}
+            className="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+          >
+            <Icon name="document" className="size-4" />
+            Dokument öffnen
+          </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"
+          >
+            <Icon name="download" className="size-4" />
+            Herunterladen
+          </a>
+        </div>
+      </div>
+    </LandingShell>
+  );
+}

src/components/landing/shell.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+
+/**
+ * Rahmen aller öffentlichen Landingpages.
+ *
+ * Diese Seiten sehen Leute, die einen Code gescannt haben — meist auf dem
+ * Handy, oft unterwegs, ohne Bezug zu dieser Anwendung. Deshalb: eine Spalte,
+ * große Schrift, keine Navigation, kein Hinweis auf die Verwaltung.
+ */
+export function LandingShell({
+  title,
+  subtitle,
+  children,
+  footer,
+}: {
+  title: string;
+  subtitle?: string | null;
+  children: ReactNode;
+  footer?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-1 flex-col bg-slate-50">
+      <main className="mx-auto w-full max-w-lg flex-1 px-4 py-10 sm:px-6 sm:py-14">
+        <header className="mb-7 text-center">
+          <h1 className="text-2xl font-bold tracking-tight text-balance text-slate-900 sm:text-3xl">
+            {title}
+          </h1>
+          {subtitle ? (
+            <p className="mt-2.5 text-pretty text-slate-600">{subtitle}</p>
+          ) : null}
+        </header>
+        {children}
+      </main>
+      {footer ? (
+        <footer className="px-4 pb-8 text-center text-xs text-slate-400">
+          {footer}
+        </footer>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Ein Fehlerbild im selben Gewand — etwa wenn ein Code gelöscht wurde.
+ * Bewusst ohne Schuldzuweisung: wer hier landet, kann nichts dafür.
+ */
+export function LandingNotice({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="grid flex-1 place-items-center bg-slate-50 px-4 py-16">
+      <div className="max-w-md text-center">
+        <h1 className="text-xl font-bold text-slate-900 sm:text-2xl">
+          {title}
+        </h1>
+        <p className="mt-3 leading-relaxed text-pretty text-slate-600">
+          {children}
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/landing/social-landing.tsx

@@ -0,0 +1,52 @@
+import { Icon } from "@/components/icons";
+import { LandingShell } from "@/components/landing/shell";
+import type { LandingProps } from "@/components/landing/types";
+import {
+  getSocialNetwork,
+  socialHandleLabel,
+} from "@/lib/qr/social-networks";
+import { socialDataSchema } from "@/lib/qr/types/social";
+
+export function SocialLanding({ data }: LandingProps) {
+  const { title, description, profiles } = socialDataSchema.parse(data);
+
+  return (
+    <LandingShell title={title} subtitle={description || null}>
+      <ul className="space-y-3">
+        {profiles.map((profile) => {
+          const network = getSocialNetwork(profile.network);
+          return (
+            <li key={profile.network}>
+              <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"
+              >
+                <span
+                  aria-hidden="true"
+                  className="flex size-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
+                  style={{ backgroundColor: network?.color ?? "#475569" }}
+                >
+                  {network?.monogram ?? "?"}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block font-medium">
+                    {network?.label ?? profile.network}
+                  </span>
+                  <span className="block truncate text-sm text-slate-500">
+                    {socialHandleLabel(profile.url)}
+                  </span>
+                </span>
+                <Icon
+                  name="external"
+                  className="size-4 shrink-0 text-slate-400"
+                  aria-hidden="true"
+                />
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </LandingShell>
+  );
+}

src/components/landing/types.ts

@@ -0,0 +1,14 @@
+/**
+ * Was eine Landingpage über den Code weiß, den jemand gescannt hat.
+ *
+ * `data` ist bereits vom Typ-Modul geprüft; die Komponente parst es nur noch
+ * einmal mit ihrem eigenen Schema, um typisiert damit zu arbeiten.
+ */
+export type LandingProps = {
+  data: unknown;
+  /** Interner Name des Codes — nicht öffentlich, nur als Rückfallebene. */
+  label: string | null;
+  slug: string;
+  /** Datenbank-Id des Codes, für Landingpages mit Rückmeldung. */
+  codeId: string;
+};

src/components/landing/video-landing.tsx

@@ -0,0 +1,67 @@
+import { Icon } from "@/components/icons";
+import { LandingShell } from "@/components/landing/shell";
+import type { LandingProps } from "@/components/landing/types";
+import { EmbeddedVideo } from "@/components/landing/video-player";
+import { resolveVideoSource, videoDataSchema } from "@/lib/qr/types/video";
+
+export function VideoLanding({ data }: LandingProps) {
+  const { url, title, description } = videoDataSchema.parse(data);
+  const quelle = resolveVideoSource(url);
+
+  return (
+    <LandingShell
+      title={title || "Video"}
+      subtitle={description || null}
+      footer={
+        quelle.kind === "youtube" || quelle.kind === "vimeo" ? (
+          <a
+            href={url}
+            rel="noopener noreferrer"
+            className="underline underline-offset-2 hover:text-slate-600"
+          >
+            Bei {quelle.label} öffnen
+          </a>
+        ) : null
+      }
+    >
+      {quelle.kind === "youtube" || quelle.kind === "vimeo" ? (
+        <EmbeddedVideo
+          embedUrl={quelle.embedUrl}
+          provider={quelle.label}
+          title={title || "Video"}
+        />
+      ) : quelle.kind === "file" ? (
+        <video
+          controls
+          // Nicht von allein laden: Wer unterwegs scannt, zahlt das Volumen.
+          preload="none"
+          className="aspect-video w-full rounded-2xl bg-black shadow-sm"
+        >
+          <source src={url} />
+          Dein Browser kann dieses Video nicht abspielen.
+        </video>
+      ) : (
+        <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"
+        >
+          <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" />
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block font-medium">Video ansehen</span>
+            <span className="block truncate text-sm text-slate-500">
+              {quelle.label}
+            </span>
+          </span>
+          <Icon
+            name="external"
+            className="size-4 shrink-0 text-slate-400"
+            aria-hidden="true"
+          />
+        </a>
+      )}
+    </LandingShell>
+  );
+}

src/components/landing/video-player.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+
+import { Icon } from "@/components/icons";
+
+/**
+ * Eingebettetes Video mit Zwei-Klick-Lösung.
+ *
+ * Ein Rahmen von YouTube oder Vimeo baut beim Laden eine Verbindung zum
+ * Anbieter auf — auf einer Seite, die Fremde nach einem Scan zu sehen
+ * bekommen, ist das ohne Zustimmung nicht in Ordnung. Deshalb erscheint der
+ * Rahmen erst nach einem Klick, und es steht vorher da, was dabei passiert.
+ */
+export function EmbeddedVideo({
+  embedUrl,
+  provider,
+  title,
+}: {
+  embedUrl: string;
+  provider: string;
+  title: string;
+}) {
+  const [gestartet, setGestartet] = useState(false);
+
+  if (gestartet) {
+    return (
+      <div className="aspect-video overflow-hidden rounded-2xl bg-black shadow-sm">
+        <iframe
+          src={embedUrl}
+          title={title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          className="h-full w-full border-0"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <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"
+    >
+      <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">
+        Beim Abspielen wird eine Verbindung zu {provider} hergestellt. Dabei
+        werden Daten an den Anbieter übertragen.
+      </span>
+    </button>
+  );
+}

src/components/password-input.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState, type InputHTMLAttributes } from "react";
+
+import { Icon } from "@/components/icons";
+import { CONTROL_BASE, cx } from "@/components/ui";
+
+/**
+ * Passwortfeld: verdeckt als Voreinstellung, mit Auge zum Aufdecken.
+ *
+ * Der Umschalter ist kein Beiwerk. Wer ein Passwort für jemand anderen setzt,
+ * muss es ablesen können, um es weiterzugeben — sichtbar sein soll es aber
+ * nur auf ausdrücklichen Wunsch und nicht schon beim Tippen vor fremden Augen
+ * oder in einer Bildschirmübertragung.
+ */
+export function PasswordInput({
+  invalid,
+  className,
+  revealLabel = "Passwort anzeigen",
+  hideLabel = "Passwort verbergen",
+  ...props
+}: Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  invalid?: boolean;
+  revealLabel?: string;
+  hideLabel?: string;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className="relative">
+      <input
+        type={visible ? "text" : "password"}
+        className={cx(
+          CONTROL_BASE,
+          "pr-11",
+          visible ? "font-mono" : undefined,
+          invalid ? "border-red-400" : "border-slate-300",
+          className,
+        )}
+        {...props}
+      />
+      <button
+        type="button"
+        onClick={() => setVisible((current) => !current)}
+        aria-label={visible ? hideLabel : revealLabel}
+        aria-pressed={visible}
+        title={visible ? hideLabel : revealLabel}
+        className="absolute top-1/2 right-1 -translate-y-1/2 rounded-md p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+      >
+        <Icon name={visible ? "eyeOff" : "eye"} className="size-4" />
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Erzeugt ein zufälliges, gut vorlesbares Passwort.
+ *
+ * Ohne leicht verwechselbare Zeichen (0/O, 1/l/I), dafür in Vierergruppen —
+ * ein Administrator muss es am Telefon durchgeben können.
+ */
+export function generatePassword(groups = 4): string {
+  const alphabet = "23456789abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
+  const bytes = new Uint32Array(groups * 4);
+  crypto.getRandomValues(bytes);
+
+  const chars = Array.from(bytes, (value) => alphabet[value % alphabet.length]);
+  return (chars.join("").match(/.{1,4}/g) ?? []).join("-");
+}

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

@@ -0,0 +1,116 @@
+"use client";
+
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { Checkbox, Field, Select, TextArea, TextInput } from "@/components/ui";
+import { FEEDBACK_SCALES } from "@/lib/qr/types/feedback";
+
+export function FeedbackForm({ value, onChange, error, disabled }: QrFormProps) {
+  const title = typeof value.title === "string" ? value.title : "";
+  const question = typeof value.question === "string" ? value.question : "";
+  const scale = value.scale === "faces" ? "faces" : "stars";
+  const allowComment = value.allowComment !== false;
+  const commentLabel =
+    typeof value.commentLabel === "string" ? value.commentLabel : "";
+  const thankYou = typeof value.thankYou === "string" ? value.thankYou : "";
+
+  return (
+    <div className="space-y-5">
+      <Field
+        label="Überschrift der Seite"
+        htmlFor="feedback-title"
+        error={error}
+        hint="Wo hängt der Code? Zum Beispiel „Gastraum“ oder „Werkstatt“."
+      >
+        <TextInput
+          id="feedback-title"
+          value={title}
+          invalid={Boolean(error)}
+          disabled={disabled}
+          maxLength={80}
+          placeholder="Wie war dein Besuch?"
+          onChange={(event) => onChange({ ...value, title: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Frage"
+        htmlFor="feedback-question"
+        hint="Steht über den Bewertungssymbolen."
+      >
+        <TextInput
+          id="feedback-question"
+          value={question}
+          disabled={disabled}
+          maxLength={160}
+          placeholder="Wie zufrieden bist du?"
+          onChange={(event) =>
+            onChange({ ...value, question: event.target.value })
+          }
+        />
+      </Field>
+
+      <Field
+        label="Bewertungsskala"
+        htmlFor="feedback-scale"
+        hint="In beiden Fällen wird 1 bis 5 gespeichert."
+      >
+        <Select
+          id="feedback-scale"
+          value={scale}
+          disabled={disabled}
+          onChange={(event) => onChange({ ...value, scale: event.target.value })}
+        >
+          {Object.entries(FEEDBACK_SCALES).map(([id, eintrag]) => (
+            <option key={id} value={id}>
+              {eintrag.label}
+            </option>
+          ))}
+        </Select>
+      </Field>
+
+      <Checkbox
+        id="feedback-allow-comment"
+        checked={allowComment}
+        disabled={disabled}
+        onChange={(event) =>
+          onChange({ ...value, allowComment: event.target.checked })
+        }
+        label="Zusätzlich einen freien Text zulassen"
+        hint="Sonst gibt es nur die Note — das senkt die Hemmschwelle."
+      />
+
+      {allowComment ? (
+        <Field label="Beschriftung des Textfelds" htmlFor="feedback-comment-label">
+          <TextInput
+            id="feedback-comment-label"
+            value={commentLabel}
+            disabled={disabled}
+            maxLength={120}
+            placeholder="Möchtest du uns noch etwas sagen?"
+            onChange={(event) =>
+              onChange({ ...value, commentLabel: event.target.value })
+            }
+          />
+        </Field>
+      ) : null}
+
+      <Field
+        label="Text nach dem Absenden"
+        htmlFor="feedback-thanks"
+        hint="Das Letzte, was jemand von dieser Seite sieht."
+      >
+        <TextArea
+          id="feedback-thanks"
+          rows={2}
+          value={thankYou}
+          disabled={disabled}
+          maxLength={200}
+          placeholder="Danke für deine Rückmeldung!"
+          onChange={(event) =>
+            onChange({ ...value, thankYou: event.target.value })
+          }
+        />
+      </Field>
+    </div>
+  );
+}

src/components/qr-forms/file-field.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useId, useRef, useState } from "react";
+
+import { Icon } from "@/components/icons";
+import { Button } from "@/components/ui";
+import { UPLOAD_KINDS, type UploadKind } from "@/lib/uploads.shared";
+
+export type UploadedFile = {
+  fileId: string;
+  filename: string;
+  size: number;
+};
+
+/**
+ * Datei auswählen und sofort hochladen.
+ *
+ * Der Upload passiert vor dem Speichern des Codes, weil das Formular die Id
+ * der Datei braucht. Bleibt der Code ungespeichert, räumt der Server die
+ * Datei später von selbst weg.
+ */
+export function FileField({
+  kind,
+  onUploaded,
+  disabled,
+  label,
+}: {
+  kind: UploadKind;
+  onUploaded: (file: UploadedFile) => void;
+  disabled?: boolean;
+  label: string;
+}) {
+  const inputId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [laeuft, setLaeuft] = useState(false);
+  const [fehler, setFehler] = useState<string | null>(null);
+
+  async function hochladen(file: File) {
+    setFehler(null);
+    setLaeuft(true);
+    try {
+      const form = new FormData();
+      form.set("kind", kind);
+      form.set("file", file);
+
+      const response = await fetch("/api/uploads", {
+        method: "POST",
+        body: form,
+      });
+      const body = await response.json().catch(() => null);
+
+      if (!response.ok) {
+        setFehler(body?.error ?? "Die Datei konnte nicht hochgeladen werden.");
+        return;
+      }
+
+      onUploaded({
+        fileId: body.upload.id,
+        filename: body.upload.filename,
+        size: body.upload.size,
+      });
+    } catch {
+      setFehler(
+        "Die Datei konnte nicht hochgeladen werden. Besteht die Verbindung noch?",
+      );
+    } finally {
+      setLaeuft(false);
+      // Damit dieselbe Datei erneut gewählt werden kann.
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        id={inputId}
+        type="file"
+        accept={UPLOAD_KINDS[kind].accept}
+        disabled={disabled || laeuft}
+        className="sr-only"
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (file) void hochladen(file);
+        }}
+      />
+      <Button
+        type="button"
+        variant="secondary"
+        disabled={disabled || laeuft}
+        onClick={() => inputRef.current?.click()}
+      >
+        {laeuft ? (
+          "Wird hochgeladen …"
+        ) : (
+          <>
+            <Icon name="download" className="size-4 rotate-180" />
+            {label}
+          </>
+        )}
+      </Button>
+
+      {fehler ? (
+        <p role="alert" className="mt-2 text-sm text-red-600">
+          {fehler}
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,193 @@
+"use client";
+
+import { Icon } from "@/components/icons";
+import { FileField } from "@/components/qr-forms/file-field";
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { Field, TextArea, TextInput } from "@/components/ui";
+import { MAX_IMAGES, type ImageEntry } from "@/lib/qr/types/image";
+import { formatBytes } from "@/lib/uploads.shared";
+
+function readImages(value: unknown): ImageEntry[] {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((entry) => {
+    const record = (entry ?? {}) as Record<string, unknown>;
+    if (typeof record.fileId !== "string" || record.fileId.length === 0) {
+      return [];
+    }
+    return [
+      {
+        fileId: record.fileId,
+        filename: typeof record.filename === "string" ? record.filename : "bild",
+        size: typeof record.size === "number" ? record.size : 0,
+        caption: typeof record.caption === "string" ? record.caption : "",
+      },
+    ];
+  });
+}
+
+export function ImageForm({ value, onChange, error, disabled }: QrFormProps) {
+  const title = typeof value.title === "string" ? value.title : "";
+  const description =
+    typeof value.description === "string" ? value.description : "";
+  const images = readImages(value.images);
+
+  const setImages = (next: ImageEntry[]) => onChange({ ...value, images: next });
+
+  const move = (index: number, direction: -1 | 1) => {
+    const target = index + direction;
+    if (target < 0 || target >= images.length) return;
+    const next = [...images];
+    [next[index], next[target]] = [next[target], next[index]];
+    setImages(next);
+  };
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <div className="mb-2 flex items-baseline justify-between gap-3">
+          <span className="text-sm font-medium text-slate-700">Bilder</span>
+          <span className="text-xs text-slate-500">
+            {images.length} von {MAX_IMAGES}
+          </span>
+        </div>
+
+        {images.length > 0 ? (
+          <ul className="mb-3 space-y-3">
+            {images.map((image, index) => (
+              <li
+                key={image.fileId}
+                className="rounded-xl border border-slate-200 bg-slate-50/70 p-3"
+              >
+                <div className="flex items-start gap-3">
+                  {/* eslint-disable-next-line @next/next/no-img-element -- eigene
+                      Auslieferung, unbekannte Maße */}
+                  <img
+                    src={`/api/uploads/${image.fileId}`}
+                    alt=""
+                    className="size-14 shrink-0 rounded-lg border border-slate-200 bg-white object-cover"
+                  />
+                  <div className="min-w-0 flex-1 space-y-2">
+                    <p className="truncate text-sm text-slate-600">
+                      {image.filename}
+                      {image.size > 0 ? ` · ${formatBytes(image.size)}` : ""}
+                    </p>
+                    <TextInput
+                      aria-label={`Bildunterschrift von Bild ${index + 1}`}
+                      value={image.caption}
+                      disabled={disabled}
+                      maxLength={120}
+                      placeholder="Bildunterschrift (optional)"
+                      onChange={(event) =>
+                        setImages(
+                          images.map((entry, i) =>
+                            i === index
+                              ? { ...entry, caption: event.target.value }
+                              : entry,
+                          ),
+                        )
+                      }
+                    />
+                  </div>
+
+                  <div className="flex shrink-0 flex-col gap-0.5">
+                    <button
+                      type="button"
+                      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"
+                    >
+                      <Icon name="arrowLeft" className="size-4 rotate-90" />
+                    </button>
+                    <button
+                      type="button"
+                      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"
+                    >
+                      <Icon name="arrowLeft" className="size-4 -rotate-90" />
+                    </button>
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      onClick={() =>
+                        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"
+                    >
+                      <Icon name="trash" className="size-4" />
+                    </button>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        {images.length < MAX_IMAGES ? (
+          <FileField
+            kind="image"
+            label={images.length === 0 ? "Bild auswählen" : "Weiteres Bild"}
+            disabled={disabled}
+            onUploaded={(file) =>
+              setImages([
+                ...images,
+                {
+                  fileId: file.fileId,
+                  filename: file.filename,
+                  size: file.size,
+                  caption: "",
+                },
+              ])
+            }
+          />
+        ) : null}
+
+        {error ? (
+          <p role="alert" className="mt-2 text-sm text-red-600">
+            {error}
+          </p>
+        ) : (
+          <p className="mt-2 text-sm text-slate-500">
+            PNG, JPEG, WebP, GIF oder AVIF. Mehrere Bilder erscheinen
+            untereinander als Galerie.
+          </p>
+        )}
+      </div>
+
+      <Field
+        label="Titel (optional)"
+        htmlFor="image-title"
+        hint="Steht über den Bildern."
+      >
+        <TextInput
+          id="image-title"
+          value={title}
+          disabled={disabled}
+          maxLength={80}
+          placeholder="Impressionen vom Hoffest"
+          onChange={(event) => onChange({ ...value, title: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Kurzer Text (optional)"
+        htmlFor="image-description"
+        hint="Eine Zeile zur Einordnung."
+      >
+        <TextArea
+          id="image-description"
+          rows={2}
+          value={description}
+          disabled={disabled}
+          maxLength={300}
+          onChange={(event) =>
+            onChange({ ...value, description: event.target.value })
+          }
+        />
+      </Field>
+    </div>
+  );
+}

src/components/qr-forms/index.ts

@@ -1,18 +1,48 @@
 import type { ComponentType } from "react";
 
-import { WebsiteForm } from "@/components/qr-forms/website-form";
+import { FeedbackForm } from "@/components/qr-forms/feedback-form";
+import { ImageForm } from "@/components/qr-forms/image-form";
+import { LinksForm } from "@/components/qr-forms/links-form";
+import { PaymentForm } from "@/components/qr-forms/payment-form";
+import { PdfForm } from "@/components/qr-forms/pdf-form";
+import {
+  AppForm,
+  EmailForm,
+  LocationForm,
+  SmsForm,
+  WhatsappForm,
+  WifiForm,
+} from "@/components/qr-forms/simple-forms";
+import { SocialForm } from "@/components/qr-forms/social-form";
 import type { QrFormProps } from "@/components/qr-forms/types";
+import { VCardForm } from "@/components/qr-forms/vcard-form";
+import { VideoForm } from "@/components/qr-forms/video-form";
+import { WebsiteForm } from "@/components/qr-forms/website-form";
 import type { QrTypeId } from "@/lib/qr/type-module";
 
 /**
  * Zuordnung QR-Typ → Formular-Komponente.
  *
  * Gegenstück zur Typ-Registry in `src/lib/qr/registry.ts`: dort liegt die
- * Logik (Validierung, Kodierung), hier die Eingabemaske. Ein V2-Typ braucht
+ * Logik (Validierung, Kodierung), hier die Eingabemaske. Ein neuer Typ
- * genau einen zusätzlichen Eintrag an beiden Stellen.
+ * braucht genau einen zusätzlichen Eintrag an beiden Stellen.
  */
 export const qrForms: Partial<Record<QrTypeId, ComponentType<QrFormProps>>> = {
   website: WebsiteForm,
+  vcard: VCardForm,
+  app: AppForm,
+  links: LinksForm,
+  social: SocialForm,
+  pdf: PdfForm,
+  image: ImageForm,
+  feedback: FeedbackForm,
+  video: VideoForm,
+  whatsapp: WhatsappForm,
+  email: EmailForm,
+  sms: SmsForm,
+  location: LocationForm,
+  payment: PaymentForm,
+  wifi: WifiForm,
 };
 
 export type { QrFormProps };

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

@@ -0,0 +1,177 @@
+"use client";
+
+import { Icon } from "@/components/icons";
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { Button, Field, TextArea, TextInput } from "@/components/ui";
+import { MAX_LINKS, type LinkEntry } from "@/lib/qr/types/links";
+
+/**
+ * Liest die Linkliste aus den Formulardaten heraus.
+ *
+ * Die Daten kommen als `QrFormData` — ein flaches Objekt ohne Garantien.
+ * Beim Bearbeiten eines gespeicherten Codes stammen sie aus der Datenbank und
+ * können nach einer Schema-Änderung unvollständig sein; deshalb hier prüfen
+ * statt annehmen.
+ */
+function readLinks(value: unknown): LinkEntry[] {
+  if (!Array.isArray(value)) return [{ label: "", url: "" }];
+  const entries = value.map((entry) => {
+    const record = (entry ?? {}) as Record<string, unknown>;
+    return {
+      label: typeof record.label === "string" ? record.label : "",
+      url: typeof record.url === "string" ? record.url : "",
+    };
+  });
+  return entries.length > 0 ? entries : [{ label: "", url: "" }];
+}
+
+export function LinksForm({ value, onChange, error, disabled }: QrFormProps) {
+  const title = typeof value.title === "string" ? value.title : "";
+  const description =
+    typeof value.description === "string" ? value.description : "";
+  const links = readLinks(value.links);
+
+  const setLinks = (next: LinkEntry[]) => onChange({ ...value, links: next });
+
+  const updateLink = (index: number, patch: Partial<LinkEntry>) =>
+    setLinks(links.map((link, i) => (i === index ? { ...link, ...patch } : link)));
+
+  const move = (index: number, direction: -1 | 1) => {
+    const target = index + direction;
+    if (target < 0 || target >= links.length) return;
+    const next = [...links];
+    [next[index], next[target]] = [next[target], next[index]];
+    setLinks(next);
+  };
+
+  return (
+    <div className="space-y-5">
+      <Field
+        label="Überschrift der Seite"
+        htmlFor="links-title"
+        hint="Steht groß über der Linkliste, z. B. der Projektname."
+      >
+        <TextInput
+          id="links-title"
+          value={title}
+          disabled={disabled}
+          maxLength={80}
+          placeholder="Projekt Nordwind"
+          onChange={(event) => onChange({ ...value, title: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Kurzer Text (optional)"
+        htmlFor="links-description"
+        hint="Eine Zeile zur Einordnung — was findet man hier?"
+      >
+        <TextArea
+          id="links-description"
+          rows={2}
+          value={description}
+          disabled={disabled}
+          maxLength={300}
+          placeholder="Alle Unterlagen zum Projekt auf einen Blick."
+          onChange={(event) =>
+            onChange({ ...value, description: event.target.value })
+          }
+        />
+      </Field>
+
+      <div>
+        <div className="mb-2 flex items-baseline justify-between gap-3">
+          <span className="text-sm font-medium text-slate-700">Links</span>
+          <span className="text-xs text-slate-500">
+            {links.length} von {MAX_LINKS}
+          </span>
+        </div>
+
+        <ul className="space-y-3">
+          {links.map((link, index) => (
+            <li
+              key={index}
+              className="rounded-xl border border-slate-200 bg-slate-50/70 p-3"
+            >
+              <div className="flex items-start gap-2">
+                <div className="min-w-0 flex-1 space-y-2">
+                  <TextInput
+                    aria-label={`Beschriftung von Link ${index + 1}`}
+                    value={link.label}
+                    disabled={disabled}
+                    maxLength={80}
+                    placeholder="Beschriftung, z. B. Preisliste"
+                    onChange={(event) =>
+                      updateLink(index, { label: event.target.value })
+                    }
+                  />
+                  <TextInput
+                    aria-label={`Adresse von Link ${index + 1}`}
+                    inputMode="url"
+                    spellCheck={false}
+                    value={link.url}
+                    disabled={disabled}
+                    maxLength={2048}
+                    placeholder="https://example.com/preisliste.pdf"
+                    onChange={(event) =>
+                      updateLink(index, { url: event.target.value })
+                    }
+                  />
+                </div>
+
+                <div className="flex shrink-0 flex-col gap-0.5">
+                  <button
+                    type="button"
+                    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"
+                  >
+                    <Icon name="arrowLeft" className="size-4 rotate-90" />
+                  </button>
+                  <button
+                    type="button"
+                    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"
+                  >
+                    <Icon name="arrowLeft" className="size-4 -rotate-90" />
+                  </button>
+                  <button
+                    type="button"
+                    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"
+                  >
+                    <Icon name="trash" className="size-4" />
+                  </button>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+
+        {links.length < MAX_LINKS ? (
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            disabled={disabled}
+            onClick={() => setLinks([...links, { label: "", url: "" }])}
+            className="mt-3"
+          >
+            Link hinzufügen
+          </Button>
+        ) : null}
+
+        {error ? (
+          <p role="alert" className="mt-2 text-sm text-red-600">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+"use client";
+
+import { Field, FieldRow, Notice, Select, TextInput } from "@/components/ui";
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { formatIban } from "@/lib/qr/encoding";
+import {
+  PAYMENT_VARIANTS,
+  PAYMENT_VARIANT_LABELS,
+  type PaymentVariant,
+} from "@/lib/qr/types/payment";
+
+function text(value: Record<string, unknown>, key: string): string {
+  const raw = value[key];
+  return typeof raw === "string" ? raw : "";
+}
+
+export function PaymentForm({ value, onChange, error, disabled }: QrFormProps) {
+  const variante = (
+    PAYMENT_VARIANTS.includes(value.variante as PaymentVariant)
+      ? value.variante
+      : "girocode"
+  ) as PaymentVariant;
+
+  const set = (key: string, next: string) =>
+    onChange({ ...value, [key]: next });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Field label="Zahlungsart" htmlFor="pay-variante">
+        <Select
+          id="pay-variante"
+          value={variante}
+          disabled={disabled}
+          onChange={(event) => set("variante", event.target.value)}
+        >
+          {PAYMENT_VARIANTS.map((option) => (
+            <option key={option} value={option}>
+              {PAYMENT_VARIANT_LABELS[option]}
+            </option>
+          ))}
+        </Select>
+      </Field>
+
+      {variante === "girocode" ? (
+        <>
+          <Field label="Empfänger" htmlFor="pay-empfaenger" error={error}>
+            <TextInput
+              id="pay-empfaenger"
+              placeholder="Name des Kontoinhabers"
+              value={text(value, "empfaenger")}
+              invalid={Boolean(error)}
+              disabled={disabled}
+              onChange={(event) => set("empfaenger", event.target.value)}
+            />
+          </Field>
+
+          <Field
+            label="IBAN"
+            htmlFor="pay-iban"
+            hint="Wird beim Verlassen des Feldes in Vierergruppen dargestellt."
+          >
+            <TextInput
+              id="pay-iban"
+              spellCheck={false}
+              placeholder="DE02 1203 0000 0000 2020 51"
+              className="font-mono"
+              value={text(value, "iban")}
+              disabled={disabled}
+              onChange={(event) => set("iban", event.target.value.toUpperCase())}
+              onBlur={(event) => set("iban", formatIban(event.target.value))}
+            />
+          </Field>
+
+          <FieldRow>
+            <Field label="BIC (optional)" htmlFor="pay-bic">
+              <TextInput
+                id="pay-bic"
+                spellCheck={false}
+                className="font-mono uppercase"
+                placeholder="BYLADEM1001"
+                value={text(value, "bic")}
+                disabled={disabled}
+                onChange={(event) => set("bic", event.target.value.toUpperCase())}
+              />
+            </Field>
+            <Field
+              label="Betrag in Euro (optional)"
+              htmlFor="pay-betrag"
+              hint="Leer lassen, damit der Zahlende ihn selbst einträgt."
+            >
+              <TextInput
+                id="pay-betrag"
+                inputMode="decimal"
+                placeholder="49,90"
+                value={text(value, "betrag")}
+                disabled={disabled}
+                onChange={(event) => set("betrag", event.target.value)}
+              />
+            </Field>
+          </FieldRow>
+
+          <Field label="Verwendungszweck (optional)" htmlFor="pay-zweck">
+            <TextInput
+              id="pay-zweck"
+              maxLength={140}
+              placeholder="Rechnung 2026-0815"
+              value={text(value, "verwendungszweck")}
+              disabled={disabled}
+              onChange={(event) => set("verwendungszweck", event.target.value)}
+            />
+          </Field>
+
+          <Notice tone="info">
+            Der GiroCode wird von Banking-Apps gelesen und füllt die
+            Überweisung vor. Er funktioniert nur als statischer Code — für
+            einen dynamischen Code die Variante „Zahlungslink“ wählen.
+          </Notice>
+        </>
+      ) : (
+        <Field
+          label="Zahlungsadresse"
+          htmlFor="pay-link"
+          error={error}
+          hint="Zum Beispiel PayPal.Me, ein Stripe-Zahlungslink oder die Zahlungsseite deines Shops."
+        >
+          <TextInput
+            id="pay-link"
+            placeholder="https://paypal.me/name/49.90"
+            value={text(value, "zahlungslink")}
+            invalid={Boolean(error)}
+            disabled={disabled}
+            onChange={(event) => set("zahlungslink", event.target.value)}
+          />
+        </Field>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,110 @@
+"use client";
+
+import { Icon } from "@/components/icons";
+import { FileField } from "@/components/qr-forms/file-field";
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { Field, TextArea, TextInput } from "@/components/ui";
+import { formatBytes } from "@/lib/uploads.shared";
+
+export function PdfForm({ value, onChange, error, disabled }: QrFormProps) {
+  const fileId = typeof value.fileId === "string" ? value.fileId : "";
+  const filename = typeof value.filename === "string" ? value.filename : "";
+  const size = typeof value.size === "number" ? value.size : 0;
+  const title = typeof value.title === "string" ? value.title : "";
+  const description =
+    typeof value.description === "string" ? value.description : "";
+
+  return (
+    <div className="space-y-5">
+      <div>
+        <span className="mb-1.5 block text-sm font-medium text-slate-700">
+          PDF-Datei
+        </span>
+
+        {fileId ? (
+          <div className="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50/70 p-3">
+            <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-red-50 text-red-600">
+              <Icon name="document" className="size-5" />
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-sm font-medium text-slate-900">
+                {filename || "Dokument"}
+              </p>
+              <p className="text-xs text-slate-500">
+                {size > 0 ? formatBytes(size) : "PDF"}
+              </p>
+            </div>
+            <button
+              type="button"
+              disabled={disabled}
+              onClick={() =>
+                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"
+            >
+              <Icon name="trash" className="size-4" />
+            </button>
+          </div>
+        ) : (
+          <FileField
+            kind="pdf"
+            label="PDF auswählen"
+            disabled={disabled}
+            onUploaded={(file) =>
+              onChange({
+                ...value,
+                fileId: file.fileId,
+                filename: file.filename,
+                size: file.size,
+              })
+            }
+          />
+        )}
+
+        {error ? (
+          <p role="alert" className="mt-2 text-sm text-red-600">
+            {error}
+          </p>
+        ) : (
+          <p className="mt-2 text-sm text-slate-500">
+            Die Datei liegt anschließend hier und ist über den Code erreichbar.
+            Sie lässt sich jederzeit austauschen, ohne den Code neu zu drucken.
+          </p>
+        )}
+      </div>
+
+      <Field
+        label="Titel (optional)"
+        htmlFor="pdf-title"
+        hint="Steht über dem Dokument. Ohne Angabe gilt der Dateiname."
+      >
+        <TextInput
+          id="pdf-title"
+          value={title}
+          disabled={disabled}
+          maxLength={80}
+          placeholder="Preisliste 2026"
+          onChange={(event) => onChange({ ...value, title: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Kurzer Text (optional)"
+        htmlFor="pdf-description"
+        hint="Eine Zeile zur Einordnung."
+      >
+        <TextArea
+          id="pdf-description"
+          rows={2}
+          value={description}
+          disabled={disabled}
+          maxLength={300}
+          onChange={(event) =>
+            onChange({ ...value, description: event.target.value })
+          }
+        />
+      </Field>
+    </div>
+  );
+}

src/components/qr-forms/simple-forms.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import {
+  Checkbox,
+  Field,
+  FieldRow,
+  Notice,
+  Select,
+  TextArea,
+  TextInput,
+} from "@/components/ui";
+import { PasswordInput } from "@/components/password-input";
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { parseCoordinates } from "@/lib/qr/encoding";
+import {
+  WIFI_SECURITY,
+  WIFI_SECURITY_LABELS,
+  type WifiSecurity,
+} from "@/lib/qr/types/wifi";
+
+/** Liest ein Textfeld aus den generischen Formulardaten. */
+function text(value: Record<string, unknown>, key: string): string {
+  const raw = value[key];
+  return typeof raw === "string" ? raw : "";
+}
+
+/* ------------------------------------------------------------------ E-Mail */
+
+export function EmailForm({ value, onChange, error, disabled }: QrFormProps) {
+  const set = (key: string, next: string) =>
+    onChange({ ...value, [key]: next });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Field label="Empfänger" htmlFor="email-empfaenger" error={error}>
+        <TextInput
+          id="email-empfaenger"
+          type="email"
+          inputMode="email"
+          autoComplete="email"
+          placeholder="name@example.com"
+          value={text(value, "empfaenger")}
+          invalid={Boolean(error)}
+          disabled={disabled}
+          onChange={(event) => set("empfaenger", event.target.value)}
+        />
+      </Field>
+
+      <Field label="Betreff (optional)" htmlFor="email-betreff">
+        <TextInput
+          id="email-betreff"
+          value={text(value, "betreff")}
+          disabled={disabled}
+          onChange={(event) => set("betreff", event.target.value)}
+        />
+      </Field>
+
+      <Field
+        label="Nachricht (optional)"
+        htmlFor="email-text"
+        hint="Wird als vorbereiteter Text in die E-Mail übernommen."
+      >
+        <TextArea
+          id="email-text"
+          value={text(value, "text")}
+          disabled={disabled}
+          onChange={(event) => set("text", event.target.value)}
+        />
+      </Field>
+    </div>
+  );
+}
+
+/* --------------------------------------------------------------------- SMS */
+
+export function SmsForm({ value, onChange, error, disabled }: QrFormProps) {
+  const set = (key: string, next: string) =>
+    onChange({ ...value, [key]: next });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Field
+        label="Rufnummer"
+        htmlFor="sms-nummer"
+        error={error}
+        hint="International mit Ländervorwahl, z. B. +49 151 23456789"
+      >
+        <TextInput
+          id="sms-nummer"
+          type="tel"
+          inputMode="tel"
+          placeholder="+49 151 23456789"
+          value={text(value, "nummer")}
+          invalid={Boolean(error)}
+          disabled={disabled}
+          onChange={(event) => set("nummer", event.target.value)}
+        />
+      </Field>
+
+      <Field label="Nachricht (optional)" htmlFor="sms-text">
+        <TextArea
+          id="sms-text"
+          value={text(value, "text")}
+          disabled={disabled}
+          onChange={(event) => set("text", event.target.value)}
+        />
+      </Field>
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------- WhatsApp */
+
+export function WhatsappForm({ value, onChange, error, disabled }: QrFormProps) {
+  const set = (key: string, next: string) =>
+    onChange({ ...value, [key]: next });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Field
+        label="WhatsApp-Nummer"
+        htmlFor="wa-nummer"
+        error={error}
+        hint="Mit Ländervorwahl und ohne führende Null, z. B. +49 151 23456789"
+      >
+        <TextInput
+          id="wa-nummer"
+          type="tel"
+          inputMode="tel"
+          placeholder="+49 151 23456789"
+          value={text(value, "nummer")}
+          invalid={Boolean(error)}
+          disabled={disabled}
+          onChange={(event) => set("nummer", event.target.value)}
+        />
+      </Field>
+
+      <Field
+        label="Vorbereitete Nachricht (optional)"
+        htmlFor="wa-text"
+        hint="Steht beim Öffnen des Chats bereits im Eingabefeld."
+      >
+        <TextArea
+          id="wa-text"
+          value={text(value, "text")}
+          disabled={disabled}
+          onChange={(event) => set("text", event.target.value)}
+        />
+      </Field>
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------- WLAN */
+
+export function WifiForm({ value, onChange, error, disabled }: QrFormProps) {
+  const security = (
+    WIFI_SECURITY.includes(value.verschluesselung as WifiSecurity)
+      ? value.verschluesselung
+      : "WPA"
+  ) as WifiSecurity;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Field label="Netzwerkname (SSID)" htmlFor="wifi-ssid" error={error}>
+        <TextInput
+          id="wifi-ssid"
+          autoComplete="off"
+          spellCheck={false}
+          placeholder="Gaeste-WLAN"
+          value={text(value, "ssid")}
+          invalid={Boolean(error)}
+          disabled={disabled}
+          onChange={(event) => onChange({ ...value, ssid: event.target.value })}
+        />
+      </Field>
+
+      <Field label="Verschlüsselung" htmlFor="wifi-security">
+        <Select
+          id="wifi-security"
+          value={security}
+          disabled={disabled}
+          onChange={(event) =>
+            onChange({ ...value, verschluesselung: event.target.value })
+          }
+        >
+          {WIFI_SECURITY.map((option) => (
+            <option key={option} value={option}>
+              {WIFI_SECURITY_LABELS[option]}
+            </option>
+          ))}
+        </Select>
+      </Field>
+
+      {security !== "nopass" ? (
+        <Field label="Passwort" htmlFor="wifi-password">
+          <PasswordInput
+            id="wifi-password"
+            autoComplete="off"
+            spellCheck={false}
+            revealLabel="WLAN-Passwort anzeigen"
+            hideLabel="WLAN-Passwort verbergen"
+            value={text(value, "passwort")}
+            disabled={disabled}
+            onChange={(event) =>
+              onChange({ ...value, passwort: event.target.value })
+            }
+          />
+        </Field>
+      ) : null}
+
+      <Checkbox
+        id="wifi-hidden"
+        label="Netzwerk ist versteckt"
+        hint="Nur ankreuzen, wenn die SSID nicht gesendet wird."
+        checked={value.versteckt === true}
+        disabled={disabled}
+        onChange={(event) =>
+          onChange({ ...value, versteckt: event.target.checked })
+        }
+      />
+
+      <Notice tone="info">
+        Der Code enthält das Passwort im Klartext — wer ihn scannt oder
+        abfotografiert, kennt es. Für Gästenetze ist das gewollt, für das
+        eigene Netz eher nicht.
+      </Notice>
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------- Standort */
+
+export function LocationForm({ value, onChange, error, disabled }: QrFormProps) {
+  const set = (key: string, next: string) =>
+    onChange({ ...value, [key]: next });
+
+  /** Erlaubt es, einen Kartenlink einzufügen, statt Zahlen abzutippen. */
+  const handlePaste = (raw: string) => {
+    const parsed = parseCoordinates(raw);
+    if (parsed) {
+      onChange({
+        ...value,
+        breitengrad: String(parsed.latitude),
+        laengengrad: String(parsed.longitude),
+      });
+      return true;
+    }
+    return false;
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Field
+        label="Kartenlink einfügen (optional)"
+        htmlFor="geo-paste"
+        hint="Adresse aus Google Maps, Apple Karten oder OpenStreetMap — die Koordinaten werden übernommen."
+      >
+        <TextInput
+          id="geo-paste"
+          placeholder="https://www.google.com/maps/@52.516,13.377,15z"
+          disabled={disabled}
+          onChange={(event) => {
+            if (handlePaste(event.target.value)) {
+              event.target.value = "";
+            }
+          }}
+        />
+      </Field>
+
+      <FieldRow>
+        <Field label="Breitengrad" htmlFor="geo-lat" error={error}>
+          <TextInput
+            id="geo-lat"
+            inputMode="decimal"
+            placeholder="52.516"
+            value={text(value, "breitengrad")}
+            invalid={Boolean(error)}
+            disabled={disabled}
+            onChange={(event) => set("breitengrad", event.target.value)}
+          />
+        </Field>
+        <Field label="Längengrad" htmlFor="geo-lon">
+          <TextInput
+            id="geo-lon"
+            inputMode="decimal"
+            placeholder="13.377"
+            value={text(value, "laengengrad")}
+            disabled={disabled}
+            onChange={(event) => set("laengengrad", event.target.value)}
+          />
+        </Field>
+      </FieldRow>
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------- App-Link */
+
+export function AppForm({ value, onChange, error, disabled }: QrFormProps) {
+  const set = (key: string, next: string) =>
+    onChange({ ...value, [key]: next });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Notice tone="info">
+        Der App-Link gibt es nur als dynamischen Code: erst beim Scannen steht
+        fest, welches Gerät ihn öffnet — und damit, wohin es geht.
+      </Notice>
+
+      <Field
+        label="iOS — App Store"
+        htmlFor="app-ios"
+        error={error}
+        hint="https://apps.apple.com/…"
+      >
+        <TextInput
+          id="app-ios"
+          placeholder="https://apps.apple.com/de/app/…"
+          value={text(value, "ios")}
+          invalid={Boolean(error)}
+          disabled={disabled}
+          onChange={(event) => set("ios", event.target.value)}
+        />
+      </Field>
+
+      <Field
+        label="Android — Google Play"
+        htmlFor="app-android"
+        hint="https://play.google.com/store/apps/…"
+      >
+        <TextInput
+          id="app-android"
+          placeholder="https://play.google.com/store/apps/details?id=…"
+          value={text(value, "android")}
+          disabled={disabled}
+          onChange={(event) => set("android", event.target.value)}
+        />
+      </Field>
+
+      <Field
+        label="Alle übrigen Geräte"
+        htmlFor="app-fallback"
+        hint="Wird auf Rechnern und unbekannten Geräten geöffnet — meist die Website der App."
+      >
+        <TextInput
+          id="app-fallback"
+          placeholder="https://example.com"
+          value={text(value, "fallback")}
+          disabled={disabled}
+          onChange={(event) => set("fallback", event.target.value)}
+        />
+      </Field>
+    </div>
+  );
+}

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

@@ -0,0 +1,170 @@
+"use client";
+
+import { Icon } from "@/components/icons";
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { Button, Field, Select, TextArea, TextInput } from "@/components/ui";
+import { SOCIAL_NETWORKS, getSocialNetwork } from "@/lib/qr/social-networks";
+import { MAX_PROFILES } from "@/lib/qr/types/social";
+
+type Profile = { network: string; url: string };
+
+function readProfiles(value: unknown): Profile[] {
+  if (!Array.isArray(value)) return [{ network: "instagram", url: "" }];
+  const entries = value.map((entry) => {
+    const record = (entry ?? {}) as Record<string, unknown>;
+    return {
+      network: typeof record.network === "string" ? record.network : "website",
+      url: typeof record.url === "string" ? record.url : "",
+    };
+  });
+  return entries.length > 0 ? entries : [{ network: "instagram", url: "" }];
+}
+
+export function SocialForm({ value, onChange, error, disabled }: QrFormProps) {
+  const title = typeof value.title === "string" ? value.title : "";
+  const description =
+    typeof value.description === "string" ? value.description : "";
+  const profiles = readProfiles(value.profiles);
+
+  const belegt = new Set(profiles.map((profile) => profile.network));
+  const naechstesFreies =
+    SOCIAL_NETWORKS.find((network) => !belegt.has(network.id))?.id ?? "website";
+
+  const setProfiles = (next: Profile[]) =>
+    onChange({ ...value, profiles: next });
+
+  const updateProfile = (index: number, patch: Partial<Profile>) =>
+    setProfiles(
+      profiles.map((profile, i) => (i === index ? { ...profile, ...patch } : profile)),
+    );
+
+  return (
+    <div className="space-y-5">
+      <Field
+        label="Überschrift der Seite"
+        htmlFor="social-title"
+        hint="Meist der Name, unter dem man euch kennt."
+      >
+        <TextInput
+          id="social-title"
+          value={title}
+          disabled={disabled}
+          maxLength={80}
+          placeholder="Bäckerei Sonnenschein"
+          onChange={(event) => onChange({ ...value, title: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Kurzer Text (optional)"
+        htmlFor="social-description"
+        hint="Eine Zeile darunter, z. B. „Folge uns für Neues aus der Backstube“."
+      >
+        <TextArea
+          id="social-description"
+          rows={2}
+          value={description}
+          disabled={disabled}
+          maxLength={300}
+          onChange={(event) =>
+            onChange({ ...value, description: event.target.value })
+          }
+        />
+      </Field>
+
+      <div>
+        <div className="mb-2 flex items-baseline justify-between gap-3">
+          <span className="text-sm font-medium text-slate-700">Profile</span>
+          <span className="text-xs text-slate-500">
+            {profiles.length} von {MAX_PROFILES}
+          </span>
+        </div>
+
+        <ul className="space-y-3">
+          {profiles.map((profile, index) => {
+            const network = getSocialNetwork(profile.network);
+            return (
+              <li
+                key={index}
+                className="rounded-xl border border-slate-200 bg-slate-50/70 p-3"
+              >
+                <div className="flex items-start gap-2">
+                  <div className="min-w-0 flex-1 space-y-2">
+                    <Select
+                      aria-label={`Netzwerk von Profil ${index + 1}`}
+                      value={profile.network}
+                      disabled={disabled}
+                      onChange={(event) =>
+                        updateProfile(index, { network: event.target.value })
+                      }
+                    >
+                      {SOCIAL_NETWORKS.map((entry) => (
+                        <option
+                          key={entry.id}
+                          value={entry.id}
+                          // Doppelte Netzwerke lehnt die Prüfung ohnehin ab —
+                          // besser, sie stehen gar nicht erst zur Wahl.
+                          disabled={
+                            entry.id !== profile.network && belegt.has(entry.id)
+                          }
+                        >
+                          {entry.label}
+                        </option>
+                      ))}
+                    </Select>
+                    <TextInput
+                      aria-label={`Profil ${index + 1}`}
+                      inputMode="url"
+                      spellCheck={false}
+                      value={profile.url}
+                      disabled={disabled}
+                      maxLength={2048}
+                      placeholder={network?.placeholder ?? "https://example.com"}
+                      onChange={(event) =>
+                        updateProfile(index, { url: event.target.value })
+                      }
+                    />
+                  </div>
+
+                  <button
+                    type="button"
+                    disabled={disabled || profiles.length === 1}
+                    onClick={() =>
+                      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"
+                  >
+                    <Icon name="trash" className="size-4" />
+                  </button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+
+        {profiles.length < MAX_PROFILES &&
+        profiles.length < SOCIAL_NETWORKS.length ? (
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            disabled={disabled}
+            onClick={() =>
+              setProfiles([...profiles, { network: naechstesFreies, url: "" }])
+            }
+            className="mt-3"
+          >
+            Profil hinzufügen
+          </Button>
+        ) : null}
+
+        {error ? (
+          <p role="alert" className="mt-2 text-sm text-red-600">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+"use client";
+
+import {
+  Field,
+  FieldRow,
+  FieldSet,
+  TextArea,
+  TextInput,
+} from "@/components/ui";
+import type { QrFormProps } from "@/components/qr-forms/types";
+
+function text(value: Record<string, unknown>, key: string): string {
+  const raw = value[key];
+  return typeof raw === "string" ? raw : "";
+}
+
+export function VCardForm({ value, onChange, error, disabled }: QrFormProps) {
+  const field = (key: string) => ({
+    value: text(value, key),
+    disabled,
+    onChange: (event: { target: { value: string } }) =>
+      onChange({ ...value, [key]: event.target.value }),
+  });
+
+  return (
+    <div className="flex flex-col gap-5">
+      <FieldRow>
+        <Field label="Vorname" htmlFor="vc-vorname">
+          <TextInput id="vc-vorname" autoComplete="given-name" {...field("vorname")} />
+        </Field>
+        <Field label="Nachname" htmlFor="vc-nachname" error={error}>
+          <TextInput
+            id="vc-nachname"
+            autoComplete="family-name"
+            invalid={Boolean(error)}
+            {...field("nachname")}
+          />
+        </Field>
+      </FieldRow>
+
+      <FieldSet legend="Firma">
+        <FieldRow>
+          <Field label="Organisation" htmlFor="vc-org">
+            <TextInput id="vc-org" autoComplete="organization" {...field("organisation")} />
+          </Field>
+          <Field label="Position" htmlFor="vc-position">
+            <TextInput
+              id="vc-position"
+              autoComplete="organization-title"
+              {...field("position")}
+            />
+          </Field>
+        </FieldRow>
+      </FieldSet>
+
+      <FieldSet legend="Kontakt">
+        <FieldRow>
+          <Field label="Telefon" htmlFor="vc-tel">
+            <TextInput id="vc-tel" type="tel" inputMode="tel" {...field("telefon")} />
+          </Field>
+          <Field label="Mobil" htmlFor="vc-mobil">
+            <TextInput id="vc-mobil" type="tel" inputMode="tel" {...field("mobil")} />
+          </Field>
+        </FieldRow>
+        <Field label="E-Mail" htmlFor="vc-email">
+          <TextInput
+            id="vc-email"
+            type="email"
+            inputMode="email"
+            autoComplete="email"
+            {...field("email")}
+          />
+        </Field>
+        <Field label="Webseite" htmlFor="vc-web">
+          <TextInput id="vc-web" placeholder="https://example.com" {...field("webseite")} />
+        </Field>
+      </FieldSet>
+
+      <FieldSet legend="Anschrift">
+        <Field label="Straße und Hausnummer" htmlFor="vc-strasse">
+          <TextInput id="vc-strasse" autoComplete="street-address" {...field("strasse")} />
+        </Field>
+        <FieldRow>
+          <Field label="Postleitzahl" htmlFor="vc-plz">
+            <TextInput id="vc-plz" autoComplete="postal-code" {...field("plz")} />
+          </Field>
+          <Field label="Ort" htmlFor="vc-ort">
+            <TextInput id="vc-ort" autoComplete="address-level2" {...field("ort")} />
+          </Field>
+        </FieldRow>
+        <Field label="Land" htmlFor="vc-land">
+          <TextInput id="vc-land" autoComplete="country-name" {...field("land")} />
+        </Field>
+      </FieldSet>
+
+      <FieldSet legend="Sonstiges">
+        <Field
+          label="Notiz"
+          htmlFor="vc-notiz"
+          hint="Landet im Notizfeld des Kontakts."
+        >
+          <TextArea id="vc-notiz" {...field("notiz")} />
+        </Field>
+      </FieldSet>
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+"use client";
+
+import type { QrFormProps } from "@/components/qr-forms/types";
+import { Field, TextArea, TextInput } from "@/components/ui";
+import { resolveVideoSource } from "@/lib/qr/types/video";
+
+const HINWEIS: Record<string, string> = {
+  youtube: "Erkannt als YouTube-Video — es wird eingebettet abgespielt.",
+  vimeo: "Erkannt als Vimeo-Video — es wird eingebettet abgespielt.",
+  file: "Erkannt als Videodatei — sie wird direkt auf der Seite abgespielt.",
+  link:
+    "Diese Adresse lässt sich nicht einbetten. Auf der Seite erscheint stattdessen ein Link dorthin.",
+};
+
+export function VideoForm({ value, onChange, error, disabled }: QrFormProps) {
+  const url = typeof value.url === "string" ? value.url : "";
+  const title = typeof value.title === "string" ? value.title : "";
+  const description =
+    typeof value.description === "string" ? value.description : "";
+
+  const erkannt = url.trim().length > 0 ? resolveVideoSource(url.trim()) : null;
+
+  return (
+    <div className="space-y-5">
+      <Field
+        label="Adresse des Videos"
+        htmlFor="video-url"
+        error={error}
+        hint={
+          erkannt
+            ? HINWEIS[erkannt.kind]
+            : "YouTube, Vimeo oder eine direkte Videodatei (.mp4, .webm)."
+        }
+      >
+        <TextInput
+          id="video-url"
+          inputMode="url"
+          spellCheck={false}
+          value={url}
+          invalid={Boolean(error)}
+          disabled={disabled}
+          placeholder="https://www.youtube.com/watch?v=…"
+          onChange={(event) => onChange({ ...value, url: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Titel (optional)"
+        htmlFor="video-title"
+        hint="Steht über dem Video."
+      >
+        <TextInput
+          id="video-title"
+          value={title}
+          disabled={disabled}
+          maxLength={80}
+          placeholder="Rundgang durch die Werkstatt"
+          onChange={(event) => onChange({ ...value, title: event.target.value })}
+        />
+      </Field>
+
+      <Field
+        label="Kurzer Text (optional)"
+        htmlFor="video-description"
+        hint="Eine Zeile zur Einordnung."
+      >
+        <TextArea
+          id="video-description"
+          rows={2}
+          value={description}
+          disabled={disabled}
+          maxLength={300}
+          onChange={(event) =>
+            onChange({ ...value, description: event.target.value })
+          }
+        />
+      </Field>
+    </div>
+  );
+}