Merge branch 'phase/035-mobil-tabellen'

Breite Tabellen (Kunden, Rechnungen, Ablauf-Kalender) werden unterhalb von
768 px zu Karten: jede Angabe mit ihrer Beschriftung, statt rechts
abgeschnitten zu sein. Kartenkoepfe brechen um, die Jahresbahn bekommt eine
schmalere Namensspalte und einen Hinweis aufs Wischen.

Standort am Host (#036): Das Formular sendete nur den Kunden, die Aktion las
aber auch standortId - jede Kundenzuweisung hat den Standort still geloescht.
Jetzt stehen Kunde und Standort in einem Formular, die Liste richtet sich nach
dem Kunden, und die Aktion prueft, dass der Standort zum Kunden gehoert.

Nebenbefund: Das Kontrollkaestchen fuer den Rechnungsstatus trug
pl-touch-target und wurde dadurch selbst zum 44 Pixel hohen leeren Kasten.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

CHANGELOG.md

@@ -17,6 +17,46 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
 
 ### Sicherheit
 
+## [0.21.0] – 2026-10-03
+
+### Hinzugefügt
+- Standort eines Hosts lässt sich in der Detailansicht setzen; die Auswahl richtet sich nach dem gewählten Kunden (#036)
+- Breite Tabellen werden auf dem Telefon zu Karten: jede Angabe mit ihrer Beschriftung, statt rechts abgeschnitten zu sein (#035)
+
+### Behoben
+- **Jede Kundenzuweisung löschte den Standort des Hosts**, weil das Formular ihn nicht mitsendete, die Aktion ihn aber las (#036)
+- Ein Standort, der zu einem anderen Kunden gehört, wird nicht mehr gespeichert (#036)
+- Kartenköpfe mit Knöpfen liefen auf dem Telefon über den Rand (#035)
+- Das Kontrollkästchen für den Rechnungsstatus wurde auf dem Telefon zum 44 Pixel hohen leeren Kasten (#035)
+
+## [0.20.2] – 2026-10-03
+
+### Behoben
+- **Das Seitenmenü ließ sich auf dem Handy nicht schließen.** Es gab weder eine Fläche zum Antippen noch ein Schließen beim Navigieren – das Markup stammt von AdminLTE, dessen JavaScript wir bewusst nicht einbinden (#034)
+- Die Dashboard-Tabelle war auf dem Telefon rechts abgeschnitten; sie zeigt dort jetzt Host und Ablauf, den Kunden klein darunter (#034)
+
+### Hinzugefügt
+- Schließen-Knopf im Menükopf, Schließen per Escape, und der Inhalt hinter dem offenen Menü scrollt nicht mehr mit (#034)
+
+## [0.20.1] – 2026-10-03
+
+### Behoben
+- **Abmelden führte auf `0.0.0.0:3000`** und damit ins Leere. Next.js macht Weiterleitungen aus Server Actions serverseitig absolut und nahm dafür die Lausch-Adresse des Servers. Betroffen waren Abmelden, die Sitzungsprüfung und das Löschen eines Kunden (#033)
+- Eine als Lausch-Adresse eingetragene `APP_URL` (`0.0.0.0`, `::`) wird jetzt übergangen statt übernommen (#033)
+- Die LXC-Installation brach mit *404 – Could not fetch install/proxledger-install.sh* ab: Ein per curl geladenes ct-Skript kennt seine Herkunft nicht und suchte bei den community-scripts (#032)
+
+### Geändert
+- Vorgabe für den Arbeitsspeicher des LXC von 2 auf 4 GB – `next build` scheitert sonst während der Installation am Speicher (#032)
+
+## [0.20.0] – 2026-10-03
+
+### Hinzugefügt
+- `deploy/update.sh` und `deploy/backup.sh` erkennen die Installationsart selbst und beherrschen jetzt auch die Installation als Dienst (Node und PostgreSQL direkt im Container) – nicht mehr nur Docker (#031)
+- Eine fehlgeschlagene Sicherung bricht die Aktualisierung ab, bevor etwas verändert wird (#031)
+
+### Behoben
+- Die Zustandsprüfung des Web-Containers konnte nie gelingen: Next bindet im Standalone-Modus an die Adresse aus `HOSTNAME`, und Docker setzt dort den Containernamen – der Server lauschte nur auf der Container-IP. `web` blieb dauerhaft auf „health: starting“ (#031)
+
 ## [0.19.2] – 2026-10-03
 
 ### Sicherheit

DEVLOG.md

@@ -2,7 +2,7 @@
 
 ## Zeitübersicht
 
-**Gesamt:** 15 h 23 min
+**Gesamt:** 18 h 58 min
 
 | Issue | Zeit |
 |---|---|
@@ -36,6 +36,12 @@
 | #028 Passkeys | 0 h 45 min |
 | #029 Einrichtungsdokumentation | 0 h 40 min |
 | #030 netbird Reverse Proxy | 0 h 20 min |
+| #031 Update für beide Varianten | 0 h 45 min |
+| #032 LXC-Installation korrigiert | 0 h 20 min |
+| #033 Weiterleitung auf Lausch-Adresse | 0 h 30 min |
+| #034 Bedienung auf dem Handy | 0 h 40 min |
+| #035 Tabellen als Karten | 0 h 50 min |
+| #036 Standort am Host | 0 h 30 min |
 
 | Meilenstein | Zeit |
 |---|---|
@@ -58,7 +64,7 @@
 
 ## 2026-09-17 · Sitzung 1 · 19:36–laufend
 **Issue:** #001–#007 (Meilensteine v0.1.0 bis v0.4.0)
-**Version:** 0.19.2
+**Version:** 0.21.0
 
 ### Erledigt
 - Auftrag gelesen, Rückfragen gestellt
@@ -169,6 +175,20 @@
 - `npm audit` vor der Freigabe erneut laufen lassen: In den zwei Wochen seit dem letzten Stand kam eine kritische Meldung zu Next.js dazu (RCE in `next/og`). Wir nutzen `next/og` nicht, waren also nicht angreifbar – angehoben auf 16.3.8, Tests und Build grün
 - Lehre für den Betrieb: Vor jedem Produktivgang und danach regelmäßig `npm audit` prüfen, nicht nur bei Änderungen am Code
 
+- Update- und Sicherungsskript für beide Installationsarten (#031). Beim Durchspielen zwei Fehler gefunden: Die Zustandsprüfung des Web-Containers konnte nie gelingen (Next bindet an `HOSTNAME`, Docker setzt dort den Containernamen), und eine fehlgeschlagene Sicherung hielt die Aktualisierung nicht auf
+- Lehre: Ein Skript, das nie unter echten Bedingungen gelaufen ist, ist eine Behauptung. Erst der Durchlauf gegen einen laufenden Stapel hat beide Fehler gezeigt
+
+- Erster echter Einsatz durch Florian – und prompt zwei Fehler, die kein Test gezeigt hatte (#032, #033)
+- #033 war hausgemacht: Mein `HOSTNAME=0.0.0.0` aus #031 hat den Healthcheck repariert und dafür alle Weiterleitungen aus Server Actions auf `0.0.0.0` gelenkt. Vorher stand dort der Containername – derselbe Fehler, nur unauffälliger
+- Lehre: Weiterleitungen gehören aus der konfigurierten Adresse gebaut, nie aus dem, was der Server über sich selbst weiß
+
+- Mobile Bedienung (#034): Das Menü ließ sich auf dem Telefon nicht schließen – AdminLTE-Markup ohne AdminLTE-JavaScript. Eigener Zustand, abdunkelnde Fläche, Schließen beim Navigieren und mit Escape
+- Lehre: Die Mobilansicht war mit Screenshots geprüft, nicht mit den Fingern. Ein Bild zeigt nicht, dass etwas nicht wieder weggeht
+
+- Breite Tabellen werden auf dem Telefon zu Karten (#035); dabei fiel auf, dass `pl-touch-target` am Kontrollkästchen selbst saß und es zum leeren Kasten aufblies
+- Standort am Host (#036): Die Meldung lautete „kann man nicht einstellen“ – tatsächlich löschte jede Kundenzuweisung den vorhandenen Standort, weil das Formular ihn nicht mitsendete und die Aktion ihn trotzdem las
+- Beide Fehler kamen aus dem echten Einsatz, nicht aus den Tests. Das bleibt die ergiebigste Quelle
+
 ### Nächster Schritt
 - #016 Benutzerhandbuch mit Screenshots, danach #017 Favicons und #019 CI-Pipeline
 - Für 1.0.0 fehlt noch: PMG (kein Host verfügbar) und der Fall „aktive Subscription auf PBS“ (#023)

Dockerfile

@@ -24,6 +24,9 @@ RUN npx prisma generate \
 FROM basis AS laufzeit
 ENV NODE_ENV=production
 ENV PORT=3000
+# Ohne diese Zeile nimmt Next den von Docker gesetzten HOSTNAME als Bindeadresse und lauscht
+# nur auf der Container-IP. Die Zustandsprüfung über 127.0.0.1 schlägt dann immer fehl.
+ENV HOSTNAME=0.0.0.0
 
 RUN addgroup -g 1001 -S proxledger && adduser -S proxledger -u 1001 -G proxledger
 

deploy/backup.sh

@@ -1,5 +1,6 @@
 #!/usr/bin/env bash
-# Sichert Datenbank und hochgeladene PDFs von ProxLedger.
+# Sichert Datenbank, hochgeladene PDFs und die Konfiguration von ProxLedger.
+# Erkennt selbst, ob die Installation mit Docker oder als Dienst im Container läuft.
 #
 #   ./backup.sh /pfad/zum/sicherungsordner
 #
@@ -13,17 +14,50 @@ set -o pipefail
 ZIEL="${1:-/var/backups/proxledger}"
 AUFBEWAHRUNG_TAGE="${AUFBEWAHRUNG_TAGE:-30}"
 STAND=$(date +%Y%m%d-%H%M%S)
-COMPOSE_VERZEICHNIS="${COMPOSE_VERZEICHNIS:-/opt/proxledger}"
+VERZEICHNIS="${COMPOSE_VERZEICHNIS:-$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)}"
 
 mkdir -p "$ZIEL"
-cd "$COMPOSE_VERZEICHNIS"
+cd "$VERZEICHNIS"
 
-echo "Sichere Datenbank …"
+# Siehe deploy/update.sh – der Dienst ist das eindeutigere Merkmal.
-docker compose exec -T postgres pg_dump -U "${POSTGRES_USER:-proxledger}" "${POSTGRES_DB:-proxledger}" \
+if systemctl cat proxledger.service >/dev/null 2>&1; then
-  | gzip > "${ZIEL}/datenbank-${STAND}.sql.gz"
+  ART="dienst"
+else
+  ART="docker"
+fi
 
-echo "Sichere hochgeladene Dateien …"
+echo "Sichere ProxLedger (${ART}) nach ${ZIEL} …"
-docker compose run --rm -T --entrypoint tar web -czf - /data/uploads > "${ZIEL}/uploads-${STAND}.tar.gz" 2>/dev/null || true
+
+if [ "$ART" = "docker" ]; then
+  echo "Sichere Datenbank …"
+  docker compose exec -T postgres pg_dump -U "${POSTGRES_USER:-proxledger}" "${POSTGRES_DB:-proxledger}" \
+    | gzip > "${ZIEL}/datenbank-${STAND}.sql.gz"
+
+  echo "Sichere hochgeladene Dateien …"
+  docker compose run --rm -T --entrypoint tar web -czf - /data/uploads > "${ZIEL}/uploads-${STAND}.tar.gz" 2>/dev/null || true
+else
+  # DATABASE_URL steht in der .env; pg_dump versteht sie direkt.
+  # shellcheck disable=SC1091
+  set -o allexport
+  . ./.env
+  set +o allexport
+
+  [ -n "${DATABASE_URL:-}" ] || {
+    echo "DATABASE_URL fehlt in der .env – ohne sie keine Sicherung." >&2
+    exit 1
+  }
+
+  echo "Sichere Datenbank …"
+  pg_dump "$DATABASE_URL" | gzip > "${ZIEL}/datenbank-${STAND}.sql.gz"
+
+  echo "Sichere hochgeladene Dateien …"
+  UPLOADS="${UPLOAD_DIR:-${VERZEICHNIS}/data/uploads}"
+  if [ -d "$UPLOADS" ]; then
+    tar -czf "${ZIEL}/uploads-${STAND}.tar.gz" -C "$(dirname "$UPLOADS")" "$(basename "$UPLOADS")"
+  else
+    echo "  (kein Upload-Verzeichnis unter ${UPLOADS})"
+  fi
+fi
 
 echo "Sichere Konfiguration …"
 cp .env "${ZIEL}/env-${STAND}.txt"

deploy/community-scripts/README.md

@@ -6,6 +6,10 @@ installieren Node.js 24 und PostgreSQL 17, holen ProxLedger aus dem Git-Reposito
 systemd-Dienste ein (Dashboard und Worker) und schreiben die erzeugten Zugangsdaten nach
 `/opt/proxledger/.credentials`.
 
+**Ressourcen:** Die Vorgabe ist 2 CPU-Kerne, **4 GB RAM** und 12 GB Platte. Die 4 GB braucht
+`next build` während der Installation; im Betrieb genügen 2 GB, die sich im Nachhinein in Proxmox
+wieder absenken lassen.
+
 | Datei | Zweck |
 |---|---|
 | `ct/proxledger.sh` | Container anlegen, Ressourcen abfragen, Aktualisierung (`update_script`) |
@@ -19,8 +23,26 @@ Auf dem Proxmox-VE-Host als root:
 bash -c "$(curl -fsSL https://git.wilde-server.de/florian.wilde/ProxLedger/raw/branch/main/deploy/community-scripts/ct/proxledger.sh)"
 ```
 
-Das Gerüst (`build.func`, `install.func`) lädt das Skript von den community-scripts nach – das ist
+Das Gerüst (`build.func`) lädt das Skript von den community-scripts nach – das ist öffentlich und ohne
-öffentlich und ohne Konto erreichbar. Nur ProxLedger selbst kommt aus dem eigenen Git.
+Konto erreichbar. Nur ProxLedger selbst kommt aus dem eigenen Git.
+
+**Wichtig:** Ein per `curl` geladenes ct-Skript kann seine eigene Herkunft nicht ermitteln. Ohne
+Angabe sucht das Gerüst `install/proxledger-install.sh` bei den community-scripts auf GitHub und
+bricht mit *404 – Could not fetch install/proxledger-install.sh* ab. Das ct-Skript setzt deshalb
+
+```bash
+COMMUNITY_SCRIPTS_URL="https://git.wilde-server.de/florian.wilde/ProxLedger/raw/branch/main/deploy/community-scripts"
+```
+
+selbst. Für einen anderen Zweig oder einen Fork lässt sich die Angabe von außen überschreiben:
+
+```bash
+COMMUNITY_SCRIPTS_URL=https://git.example.de/<nutzer>/ProxLedger/raw/branch/<zweig>/deploy/community-scripts \
+  bash -c "$(curl -fsSL …/ct/proxledger.sh)"
+```
+
+Das Verzeichnis dahinter muss `ct/` und `install/` enthalten – deshalb zeigt die Angabe auf
+`deploy/community-scripts`, nicht auf die Wurzel des Repositorys.
 
 Zwei Umgebungsvariablen steuern die Quelle, solange das Repository nicht öffentlich ist:
 

deploy/community-scripts/ct/proxledger.sh

@@ -1,5 +1,10 @@
 #!/usr/bin/env bash
-_CS_DEFAULT_URL="https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main"
+# Woher die App-Skripte kommen. Ein per curl geladenes ct-Skript kann seine eigene Herkunft nicht
+# ermitteln – ohne diese Angabe sucht das Geruest install/proxledger-install.sh bei den
+# community-scripts und bricht mit 404 ab. Ueberschreibbar fuer eigene Zweige oder Forks.
+COMMUNITY_SCRIPTS_URL="${COMMUNITY_SCRIPTS_URL:-https://git.wilde-server.de/florian.wilde/ProxLedger/raw/branch/main/deploy/community-scripts}"
+export COMMUNITY_SCRIPTS_URL
+_CS_DEFAULT_URL="$COMMUNITY_SCRIPTS_URL"
 _cs_boot="${COMMUNITY_SCRIPTS_CORE_DIR:-$(dirname "${BASH_SOURCE[0]}")/../../core}/core/build.func"
 source "$_cs_boot" 2>/dev/null || source <(curl -fsSL "${COMMUNITY_SCRIPTS_CORE_URL:-https://raw.githubusercontent.com/community-scripts/core/main}/core/build.func")
 # Copyright (c) 2021-2026 tteck
@@ -10,8 +15,10 @@ source "$_cs_boot" 2>/dev/null || source <(curl -fsSL "${COMMUNITY_SCRIPTS_CORE_
 APP="ProxLedger"
 var_tags="${var_tags:-monitoring;licensing}"
 var_cpu="${var_cpu:-2}"
-var_ram="${var_ram:-2048}"
+# 4 GB fuer die Installation: `next build` braucht deutlich mehr als 2 GB und bricht sonst mit
-var_disk="${var_disk:-10}"
+# einem Speicherfehler ab. Nach der Installation genuegen 2 GB im Betrieb.
+var_ram="${var_ram:-4096}"
+var_disk="${var_disk:-12}"
 var_os="${var_os:-debian}"
 var_version="${var_version:-13}"
 var_arm64="${var_arm64:-yes}"

deploy/community-scripts/install/proxledger-install.sh

@@ -40,7 +40,13 @@ msg_info "Setting up ProxLedger"
 $STD git clone --branch "$ZWEIG" --depth 1 "$QUELLE" /opt/proxledger
 cd /opt/proxledger
 
-IP_ADRESSE=$(hostname -I | awk '{print $1}')
+# Erreichbare Adresse des Containers ermitteln. `hostname -I` liefert sie in aller Regel;
+# notfalls hilft die Route nach draussen. 0.0.0.0 waere eine Lausch-Adresse und im Browser nutzlos.
+IP_ADRESSE=$(hostname -I 2>/dev/null | awk '{print $1}')
+if [ -z "$IP_ADRESSE" ] || [ "$IP_ADRESSE" = "0.0.0.0" ]; then
+  IP_ADRESSE=$(ip route get 1.1.1.1 2>/dev/null | awk '/src/ {print $7; exit}')
+fi
+[ -n "$IP_ADRESSE" ] || IP_ADRESSE="localhost"
 cat <<EOF >/opt/proxledger/.env
 DATABASE_URL="postgresql://${DB_USER}:${DB_PASS}@localhost:5432/${DB_NAME}?schema=public"
 APP_SECRET="${APP_SECRET}"
@@ -107,6 +113,8 @@ msg_ok "Created Services"
 {
   echo "ProxLedger"
   echo "Adresse:     http://${IP_ADRESSE}:3000"
+  echo "             (Im Journal steht 0.0.0.0:3000 - das ist nur die Lausch-Adresse,"
+  echo "              im Browser gehoert die obige IP oder der spaetere DNS-Name hinein.)"
   echo "Benutzer:    admin@proxledger.local"
   echo "Passwort:    ${ADMIN_PASS}"
   echo

deploy/lxc-installer.sh

@@ -181,4 +181,5 @@ printf '  3. Für den Betrieb über HTTPS einen Reverse Proxy davorsetzen (Beisp
 echo
 gelb "APP_URL in /opt/proxledger/.env auf die endgültige Adresse setzen, sobald der Reverse Proxy steht."
 printf '  Logs ansehen:   pct exec %s -- docker compose -f /opt/proxledger/docker-compose.yml logs -f\n' "$CTID"
-printf '  Aktualisieren:  pct exec %s -- bash -c "cd /opt/proxledger && git pull && docker compose up -d --build"\n' "$CTID"
+printf '  Aktualisieren:  pct exec %s -- bash -c "bash /opt/proxledger/deploy/update.sh"\n' "$CTID"
+printf '  Sichern:        pct exec %s -- bash -c "bash /opt/proxledger/deploy/backup.sh /var/backups/proxledger"\n' "$CTID"

deploy/update.sh

@@ -1,7 +1,8 @@
 #!/usr/bin/env bash
-# ProxLedger aktualisieren (Docker-Installation).
+# ProxLedger aktualisieren – erkennt selbst, ob die Installation mit Docker
+# oder als Dienst im Container (Node + PostgreSQL direkt) läuft.
 #
-#   bash deploy/update.sh            # Quelltext holen, neu bauen, migrieren, neu starten
+#   bash deploy/update.sh                 # sichern, holen, bauen, migrieren, neu starten
 #   bash deploy/update.sh --ohne-sicherung
 #
 # Vor dem Aktualisieren wird gesichert – das dauert Sekunden und erspart schlechte Abende.
@@ -23,38 +24,105 @@ fehler() {
 SICHERN="ja"
 [ "${1:-}" = "--ohne-sicherung" ] && SICHERN="nein"
 
-command -v docker >/dev/null 2>&1 || fehler "Docker nicht gefunden."
+# Wohin gesichert wird. Der Standardort gehört root; wer anders arbeitet, setzt SICHERUNG_ZIEL.
-[ -f .env ] || fehler "Keine .env gefunden – wird dieses Skript im richtigen Verzeichnis ausgeführt?"
+SICHERUNG_ZIEL="${SICHERUNG_ZIEL:-/var/backups/proxledger}"
 
+# ---------------------------------------------------------------- Art der Installation
+#
+# Der systemd-Dienst ist das eindeutigere Merkmal: Die docker-compose.yml liegt auch im
+# Quelltext der Dienst-Installation, ein Dienst namens proxledger aber nur dort.
+installationsart() {
+  if systemctl cat proxledger.service >/dev/null 2>&1; then
+    printf 'dienst'
+  elif command -v docker >/dev/null 2>&1 && [ -f docker-compose.yml ]; then
+    printf 'docker'
+  fi
+}
+
+ART=$(installationsart)
+[ -n "$ART" ] || fehler "Keine Installation gefunden – weder der Dienst proxledger noch Docker mit docker-compose.yml."
+
+blau "Installationsart: ${ART}"
+
+# ---------------------------------------------------------------- Sicherung
 if [ "$SICHERN" = "ja" ]; then
-  blau "Sicherung anlegen …"
+  blau "Sicherung anlegen nach ${SICHERUNG_ZIEL} …"
-  bash deploy/backup.sh
+  if ! bash deploy/backup.sh "$SICHERUNG_ZIEL"; then
+    fehler "Die Sicherung ist fehlgeschlagen – deshalb wird nicht aktualisiert.
+  Häufigste Ursache: fehlende Rechte am Zielordner. Mögliche Wege:
+    sudo bash deploy/update.sh
+    SICHERUNG_ZIEL=/pfad/mit/rechten bash deploy/update.sh
+    bash deploy/update.sh --ohne-sicherung   (nur wenn anderweitig gesichert ist)"
+  fi
   gruen "Sicherung abgeschlossen."
+else
+  printf '\033[1;33m! Ohne Sicherung – auf eigenes Risiko.\033[0m\n'
 fi
 
+# ---------------------------------------------------------------- Quelltext
 if [ -d .git ]; then
   blau "Neuen Stand holen …"
   git pull --ff-only
+else
+  printf '\033[1;33m! Kein Git-Verzeichnis – der Quelltext bleibt wie er ist.\033[0m\n'
 fi
 
-blau "Abbilder neu bauen …"
+# ---------------------------------------------------------------- Aktualisieren
-docker compose build --pull
+if [ "$ART" = "docker" ]; then
+  [ -f .env ] || fehler "Keine .env gefunden – wird dieses Skript im richtigen Verzeichnis ausgeführt?"
 
-blau "Datenbank migrieren …"
+  blau "Abbilder neu bauen …"
-docker compose run --rm migrate
+  docker compose build --pull
 
-blau "Dienste neu starten …"
+  blau "Datenbank migrieren …"
-docker compose up -d
+  docker compose run --rm migrate
 
-# Kurz warten und nachsehen, ob das Dashboard wieder antwortet.
+  blau "Dienste neu starten …"
+  docker compose up -d
+else
+  command -v npm >/dev/null 2>&1 || fehler "npm nicht gefunden – gehört zur Installation als Dienst."
+  [ -f .env ] || fehler "Keine .env gefunden (erwartet in ${VERZEICHNIS})."
+
+  # Die .env trägt APP_SECRET; ein git pull fasst sie nicht an, aber sicher ist sicher.
+  cp .env "/tmp/proxledger-env-$(date +%s).sicherung"
+
+  blau "Abhängigkeiten installieren …"
+  npm ci
+
+  blau "Datenbank migrieren …"
+  npx prisma generate
+  npx prisma migrate deploy
+
+  blau "Anwendung bauen …"
+  npm run build
+  npm run build:worker
+
+  blau "Dienste neu starten …"
+  systemctl restart proxledger proxledger-worker
+fi
+
+# ---------------------------------------------------------------- Prüfen
 blau "Warte auf das Dashboard …"
-for versuch in $(seq 1 30); do
+PORT="${PORT:-3000}"
-  if docker compose exec -T web wget -qO- http://localhost:3000/api/gesundheit >/dev/null 2>&1; then
+
+for versuch in $(seq 1 45); do
+  if [ "$ART" = "docker" ]; then
+    erreichbar=$(docker compose exec -T web wget -qO- "http://127.0.0.1:3000/api/gesundheit" >/dev/null 2>&1 && echo ja || echo nein)
+  else
+    erreichbar=$(curl -fsS -o /dev/null --max-time 2 "http://localhost:${PORT}/api/gesundheit" && echo ja || echo nein)
+  fi
+
+  if [ "$erreichbar" = "ja" ]; then
     gruen "ProxLedger läuft wieder (nach ${versuch} s)."
-    docker compose ps
+    [ "$ART" = "docker" ] && docker compose ps
+    [ "$ART" = "dienst" ] && systemctl --no-pager --lines=0 status proxledger proxledger-worker | grep -E "●|Active:"
     exit 0
   fi
   sleep 1
 done
 
-fehler "Das Dashboard antwortet nicht. Protokoll ansehen: docker compose logs -n 50 web"
+if [ "$ART" = "docker" ]; then
+  fehler "Das Dashboard antwortet nicht. Protokoll ansehen: docker compose logs -n 50 web"
+else
+  fehler "Das Dashboard antwortet nicht. Protokoll ansehen: journalctl -u proxledger -n 50"
+fi

docker-compose.yml

@@ -60,7 +60,7 @@ services:
     volumes:
       - uploads:/data
     healthcheck:
-      test: ["CMD", "wget", "-qO-", "http://localhost:3000/api/gesundheit"]
+      test: ["CMD", "wget", "-qO-", "http://127.0.0.1:3000/api/gesundheit"]
       interval: 30s
       timeout: 5s
       retries: 5

docs/anleitung/README.md

@@ -175,6 +175,9 @@ weitergeben, und der Zurück-Knopf funktioniert wie erwartet.
 
 ---
 
+Im Detail eines Hosts lassen sich Kunde **und Standort** gemeinsam ändern. Die Standortliste zeigt nur
+die Standorte des gewählten Kunden; angelegt werden sie auf der Kundenseite.
+
 ## 4a. Cluster
 
 **In Proxmox hat jeder Knoten eine eigene Subscription** mit eigener Server-ID – ein Cluster mit drei
@@ -396,31 +399,46 @@ Rückweg immer nutzbar.
 **Sichern:**
 
 ```bash
-./deploy/backup.sh /var/backups/proxledger
+bash /opt/proxledger/deploy/backup.sh /var/backups/proxledger
 ```
 
-Das Skript sichert Datenbank, hochgeladene PDFs und die `.env`. Für regelmäßige Sicherungen in die
+Das Skript sichert Datenbank, hochgeladene PDFs und die `.env` – und erkennt selbst, ob die
-Crontab eintragen:
+Installation mit Docker oder als Dienst im Container läuft. Für regelmäßige Sicherungen in die Crontab:
 
 ```
 30 2 * * * /opt/proxledger/deploy/backup.sh /var/backups/proxledger
 ```
 
-**Zurückspielen:**
+**Zurückspielen** (Docker):
 
 ```bash
 gunzip -c datenbank-20260917-023000.sql.gz | docker compose exec -T postgres psql -U proxledger proxledger
 ```
 
+Bei der Installation als Dienst stattdessen:
+
+```bash
+gunzip -c datenbank-20260917-023000.sql.gz | psql "$DATABASE_URL"
+```
+
 **Aktualisieren:**
 
 ```bash
-cd /opt/proxledger
+bash /opt/proxledger/deploy/update.sh
-git pull
-docker compose up -d --build
 ```
 
-Migrationen laufen dabei automatisch.
+Ein Befehl für beide Installationsarten. Der Reihe nach: sichern, neuen Stand holen, bauen,
+migrieren, neu starten – und zum Schluss prüfen, ob das Dashboard wieder antwortet. Schlägt die
+Sicherung fehl, bricht das Skript ab, **bevor** etwas verändert wird.
+
+| Aufruf | Wirkung |
+|---|---|
+| `bash deploy/update.sh` | der übliche Weg |
+| `SICHERUNG_ZIEL=/pfad bash deploy/update.sh` | anderer Ort für die Sicherung |
+| `bash deploy/update.sh --ohne-sicherung` | nur, wenn anderweitig gesichert ist |
+
+Beim LXC-Weg nach Art der Helper-Scripts geht es auch über das Skript auf dem Proxmox-Host – dort
+erkennt das Gerüst eine vorhandene Installation und bietet die Aktualisierung an.
 
 > `APP_SECRET` unbedingt mitsichern: Ohne diesen Wert sind alle Sitzungen ungültig. Und beachte, dass eine
 > Sicherung die Zugangsdaten für SMTP und Webhook im Klartext enthält – sie gehört entsprechend geschützt.
@@ -458,6 +476,11 @@ Server-ID stehen in der Detailansicht unter *Subscription-Historie*.
 
 ## Anhang: dunkles Design und Mobilansicht
 
+Auf dem Telefon öffnet das Symbol links oben das Menü; es schließt sich durch Antippen der
+abgedunkelten Fläche, über das Kreuz im Menükopf, mit Escape – und von selbst, sobald ein Eintrag
+gewählt wurde. Die Tabellen zeigen auf schmalen Bildschirmen nur die wichtigsten Spalten; die
+übrigen Angaben stehen auf der jeweiligen Detailseite.
+
 Das Dashboard folgt der Einstellung des Betriebssystems und lässt sich über das Mondsymbol in der
 Kopfleiste umschalten.
 

docs/betrieb/sicherung.md

@@ -14,10 +14,15 @@ Maschinenkennung, nicht an einem Token.
 ## Sichern
 
 ```bash
-bash deploy/backup.sh          # Datenbank und Uploads
+bash deploy/backup.sh /var/backups/proxledger
 ```
 
-Beim LXC-Weg reicht zusätzlich die gewohnte Proxmox-Sicherung des Containers.
+Das Skript erkennt selbst, ob die Installation mit Docker oder als Dienst läuft, und sichert in beiden
+Fällen Datenbank, Uploads und `.env`. Beim LXC-Weg reicht zusätzlich die gewohnte Proxmox-Sicherung
+des Containers.
+
+Vor jeder Aktualisierung läuft es ohnehin automatisch – [`deploy/update.sh`](../../deploy/update.sh)
+ruft es als Erstes auf und bricht ab, wenn es fehlschlägt.
 
 ## Zurückspielen
 

docs/issues/031-update-skript-beide-varianten.md

@@ -0,0 +1,33 @@
+# #031 Update- und Sicherungsskript für beide Installationsarten
+**Status:** erledigt
+**Meilenstein:** v0.20.0
+**Labels:** deployment
+**Geschätzt:** 2 h   **Tatsächlich:** 0 h 45 min
+
+## Ziel
+`deploy/update.sh` und `deploy/backup.sh` konnten nur Docker. Die Installation als Dienst (Node und
+PostgreSQL direkt im LXC) ging leer aus – dort half nur der Weg über das Gerüst der community-scripts.
+
+## Aufgaben
+- [x] Beide Skripte erkennen die Installationsart selbst (systemd-Dienst oder Docker)
+- [x] Dienst-Weg: `npm ci`, `prisma migrate deploy`, bauen, `systemctl restart`
+- [x] Sicherung für den Dienst-Weg: `pg_dump` über `DATABASE_URL`, Uploads aus `UPLOAD_DIR`
+- [x] Fehlgeschlagene Sicherung bricht die Aktualisierung ab – **vor** jeder Änderung
+- [x] Hinweis am Ende von `deploy/lxc-installer.sh` auf die Skripte umgestellt
+- [x] Handbuch und Betriebsdoku angepasst
+- [x] Docker-Weg vollständig durchgespielt
+
+## Zwei Fehler beim Durchspielen gefunden
+1. **Die Zustandsprüfung des Web-Containers konnte nie gelingen.** Next bindet im Standalone-Modus an
+   die Adresse aus `HOSTNAME` – und Docker setzt darin den Containernamen. Der Server lauschte also
+   nur auf der Container-IP, nicht auf `127.0.0.1`. Der Dienst `web` blieb dauerhaft auf
+   „health: starting“; von außen war er trotzdem erreichbar, deshalb fiel es bisher nicht auf.
+   Behoben mit `ENV HOSTNAME=0.0.0.0` im Dockerfile; die Prüfungen verwenden jetzt `127.0.0.1`
+   statt `localhost` (das löst im Container auch auf `::1` auf).
+2. **Die Sicherung scheiterte stumm an fehlenden Rechten** (`/var/backups` gehört root) und die
+   Aktualisierung lief trotzdem weiter. Jetzt bricht sie ab und nennt die drei Auswege.
+
+## Prüfung
+Vollständiger Durchlauf gegen einen laufenden Stapel: Sicherung (Datenbank 6,3 KB mit 25 Tabellen,
+Uploads, `.env`), Abbilder gebaut, migriert, neu gestartet, Dashboard nach zwei Sekunden wieder da.
+Danach stand `web` zum ersten Mal auf **healthy**.

docs/issues/032-lxc-installation-korrekturen.md

@@ -0,0 +1,27 @@
+# #032 LXC-Installation: Herkunft der Skripte und Speicher
+**Status:** erledigt
+**Meilenstein:** v0.20.1
+**Labels:** deployment
+**Geschätzt:** 1 h   **Tatsächlich:** 0 h 20 min
+
+## Auslöser
+Erster echter Lauf auf `hv-rz5-pve-02`: Der Container entstand, dann brach es ab mit
+
+```
+curl: (22) The requested URL returned error: 404
+✖️  Could not fetch install/proxledger-install.sh
+📁  Looked in: https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main
+```
+
+## Ursache
+Ein per `curl` geladenes ct-Skript kann seine eigene Herkunft nicht ermitteln. Das Gerüst setzt dann
+die Standardadresse der community-scripts ein und sucht dort `install/proxledger-install.sh`.
+
+## Behebung
+- Das ct-Skript setzt `COMMUNITY_SCRIPTS_URL` selbst auf die eigene Gitea-Adresse (für Forks und
+  andere Zweige weiterhin überschreibbar).
+- Vorgabe für den Arbeitsspeicher von 2 auf **4 GB** angehoben: `next build` braucht während der
+  Installation deutlich mehr als 2 GB und wäre nach zehn Minuten am Speicher gescheitert.
+- Die ermittelte Adresse wird geprüft; `hostname -I` ohne Ergebnis fällt auf die Route nach außen
+  zurück, und in den Zugangsdaten steht der Hinweis, dass `0.0.0.0` aus dem Journal keine
+  aufrufbare Adresse ist.

docs/issues/033-weiterleitung-lauschadresse.md

@@ -0,0 +1,35 @@
+# #033 Abmelden führte auf die Lausch-Adresse
+**Status:** erledigt
+**Meilenstein:** v0.20.1
+**Labels:** bug, deployment
+**Geschätzt:** 1 h   **Tatsächlich:** 0 h 30 min
+
+## Auslöser
+Im Docker-Betrieb führte **Abmelden** auf `0.0.0.0:3000/login` – eine Adresse, die kein Browser
+aufrufen kann (`ERR_ADDRESS_INVALID`).
+
+## Ursache
+Hausgemacht, und zwar in #031: Für die Zustandsprüfung des Containers wurde `ENV HOSTNAME=0.0.0.0`
+gesetzt, damit der Server auf allen Schnittstellen lauscht. Next.js macht eine Weiterleitung aus
+einer Server Action aber **serverseitig absolut** und nimmt dafür genau diese Adresse. Vorher stand
+dort der Containername (`http://0a5963a591df:3000/`) – derselbe Fehler, nur weniger auffällig.
+
+Betroffen waren alle Weiterleitungen, die nicht über eine `Request` liefen: Abmelden, die Prüfung in
+`sitzungErforderlich` und das Löschen eines Kunden.
+
+## Behebung
+- Neuer Helfer `eigenerPfad()` in `src/lib/adresse.ts`: baut die Adresse aus Einstellung, `APP_URL`
+  oder den Kopfzeilen der Anfrage – nie aus der Lausch-Adresse.
+- `oeffentlicheBasis()` übergeht unbrauchbare Angaben (`0.0.0.0`, `::`) jetzt ausdrücklich, statt sie
+  zu übernehmen. Eine falsch eingetragene Adresse macht das Dashboard damit nicht unbenutzbar.
+- Zwei zusätzliche Tests.
+
+## Prüfung
+Gegen einen Docker-Stapel durchgespielt: Mit `APP_URL=http://0.0.0.0:3000` in der `.env` – also der
+Fehlkonfiguration – leitet die Anwendung jetzt auf den tatsächlich aufgerufenen Namen
+(`http://localhost:3003/login`) statt auf die Lausch-Adresse.
+
+## Lehre
+Der Fix für die Zustandsprüfung hat einen zweiten Fehler sichtbar gemacht, der vorher nur anders
+aussah. Weiterleitungen gehören grundsätzlich aus der **konfigurierten** Adresse gebaut, nicht aus
+dem, was der Server zufällig über sich selbst weiß.

docs/issues/034-mobile-bedienung.md

@@ -0,0 +1,28 @@
+# #034 Bedienung auf dem Handy
+**Status:** erledigt
+**Meilenstein:** v0.20.2
+**Labels:** ui, bug
+**Geschätzt:** 2 h   **Tatsächlich:** 0 h 40 min
+
+## Auslöser
+Florian im produktiven Einsatz auf dem Telefon: „Das Menü geht nicht weg.“ Dazu eine Tabelle, von der
+rechts die Hälfte abgeschnitten war.
+
+## Ursache
+Das Markup stammt von AdminLTE, dessen JavaScript binden wir bewusst nicht ein. Die Klasse
+`sidebar-open` ließ sich damit setzen – aber nichts nahm sie wieder weg: keine Fläche zum Antippen,
+kein Schließen beim Navigieren, kein Escape. Auf dem Telefon blieb das Menü über dem Inhalt stehen.
+
+## Behebung
+- Eigener, winziger Zustand (`menuZustand.ts`), auf den Kopfzeile und Menü gemeinsam hören
+- Abdunkelnde Fläche hinter dem Menü – antippen schließt (ein `button`, damit auch per Tastatur erreichbar)
+- Schließen-Knopf im Menükopf, nur auf schmalen Bildschirmen
+- Schließt beim Navigieren und mit Escape
+- Der Inhalt dahinter scrollt nicht mehr mit, solange das Menü offen ist
+- Dashboard-Tabelle: auf dem Telefon nur Host und Ablauf, der Kunde steht klein unter dem Hostnamen.
+  Key und Rechnungsstände erscheinen ab Tablet-Breite – die Host-Tabelle machte das schon vorher so.
+- Fünf Tests für die Zustandslogik
+
+## Nicht geändert
+Die abdunkelnde Fläche gilt nur unter 992 px. Auf breiten Bildschirmen bleibt es beim bisherigen
+Verhalten: Das Menü klappt zu Symbolen zusammen, statt sich über den Inhalt zu legen.

docs/issues/035-mobile-tabellen.md

@@ -0,0 +1,28 @@
+# #035 Tabellen auf dem Handy als Karten
+**Status:** erledigt
+**Meilenstein:** v0.21.0
+**Labels:** ui
+**Geschätzt:** 3 h   **Tatsächlich:** 0 h 50 min
+
+## Auslöser
+„Etwas schöner darstellen auf dem Handy muss doch drin sein.“ Auf Rechnungen, Kunden und Jahresbahn
+war rechts jeweils die Hälfte abgeschnitten, Knöpfe im Kartenkopf liefen über den Rand, und Namen
+brachen Buchstabe für Buchstabe um.
+
+## Aufgaben
+- [x] `.pl-karten-tabelle`: unterhalb von 768 px wird jede Tabellenzeile zur Karte, jede Zelle bekommt
+      ihre Beschriftung aus `data-label` davor
+- [x] Angewandt auf Kunden, Rechnungen und den Ablauf-Kalender der Jahresbahn
+- [x] Kartenkopf bricht um, statt über den Rand zu laufen
+- [x] Jahresbahn: schmalere Namensspalte auf dem Telefon, dazu der Hinweis aufs seitliche Wischen
+- [x] Mobilansichten der breiten Seiten kommen jetzt mit in die Bilderstrecke
+
+## Warum Karten statt Scrollen
+Eine Tabelle mit elf Spalten lässt sich auf 390 px nicht sinnvoll anzeigen. Seitliches Scrollen
+versteckt die Hälfte der Angaben, und Spalten wegzulassen nimmt sie ganz weg. Als Karte steht jede
+Angabe mit ihrer Beschriftung da – länger, aber vollständig.
+
+## Nebenbefund
+Das Kontrollkästchen für den Rechnungsstatus trug `pl-touch-target`, also `min-height: 44px` – und
+wurde damit selbst zum 44 Pixel hohen leeren Kasten. Die Fläche zum Treffen bekommt jetzt sein Umfeld,
+das Kästchen behält seine Größe.

docs/issues/036-standort-am-host.md

@@ -0,0 +1,22 @@
+# #036 Standort am Host setzen
+**Status:** erledigt
+**Meilenstein:** v0.21.0
+**Labels:** bug, ui
+**Geschätzt:** 1 h   **Tatsächlich:** 0 h 30 min
+
+## Auslöser
+„Den Standort bei den Hosts kann man nicht einstellen.“
+
+## Was wirklich los war
+Schlimmer als gemeldet: Das Formular in der Host-Detailansicht sendete **nur** den Kunden. Die Aktion
+`hostKundeSetzen` las aber auch `standortId` – und bekam nichts. Jede Kundenzuweisung hat damit den
+Standort **stillschweigend gelöscht**. Setzen ging nur beim Ausrollen über die Sammelzuweisung unter
+*Hosts → Nicht zugeordnet*; danach war er beim nächsten Speichern wieder weg.
+
+## Behebung
+- Kunde und Standort in **einem** Formular, die Standortliste richtet sich nach dem gewählten Kunden
+- Wechselt der Kunde, wird die Standortauswahl zurückgesetzt statt stehen zu bleiben
+- Hat ein Kunde keine Standorte, sagt das Formular es, statt eine leere Auswahl anzubieten
+- Die Aktion prüft jetzt, dass der Standort zum Kunden gehört, und verwirft ihn sonst – eine falsche
+  Zuordnung wäre schlimmer als keine
+- Vier Tests, darunter der Fall „Standort eines anderen Kunden“

docs/issues/README.md

@@ -34,4 +34,10 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | [#028](028-passkeys.md) | Anmeldung mit Passkeys | erledigt | v0.18.0 | 4 h | 0 h 45 min |
 | [#029](029-betriebsdokumentation.md) | Einrichtungsdokumentation | erledigt | v0.19.0 | 3 h | 0 h 40 min |
 | [#030](030-netbird-reverse-proxy.md) | netbird Reverse Proxy in die Anleitung | erledigt | v0.19.1 | 1 h | 0 h 20 min |
-| | **Summe** | | | **147 h** | **15 h 23 min** |
+| [#031](031-update-skript-beide-varianten.md) | Update- und Sicherungsskript für beide Varianten | erledigt | v0.20.0 | 2 h | 0 h 45 min |
+| [#032](032-lxc-installation-korrekturen.md) | LXC-Installation: Herkunft der Skripte und Speicher | erledigt | v0.20.1 | 1 h | 0 h 20 min |
+| [#033](033-weiterleitung-lauschadresse.md) | Abmelden führte auf die Lausch-Adresse | erledigt | v0.20.1 | 1 h | 0 h 30 min |
+| [#034](034-mobile-bedienung.md) | Bedienung auf dem Handy | erledigt | v0.20.2 | 2 h | 0 h 40 min |
+| [#035](035-mobile-tabellen.md) | Tabellen auf dem Handy als Karten | erledigt | v0.21.0 | 3 h | 0 h 50 min |
+| [#036](036-standort-am-host.md) | Standort am Host setzen | erledigt | v0.21.0 | 1 h | 0 h 30 min |
+| | **Summe** | | | **157 h** | **18 h 58 min** |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "proxledger",
-  "version": "0.19.2",
+  "version": "0.21.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

scripts/screenshots.mjs

@@ -195,7 +195,8 @@ async function main() {
       console.log(`  ${seite}-dunkel.png`);
     }
 
-    for (const seite of ["dashboard", "hosts"]) {
+    // Die Seiten mit den breitesten Tabellen – dort entscheidet sich die Mobilansicht (#035).
+    for (const seite of ["dashboard", "hosts", "kunden", "rechnungen", "jahresbahn"]) {
       const eintrag = SEITEN.find((s) => s.name === seite);
       await aufnehmen(hell, eintrag.pfad, path.join(ZIEL, `mobil-${seite}.png`), 390, 1500, adresse);
       console.log(`  mobil-${seite}.png`);

src/app/(dashboard)/hosts/[id]/page.tsx

@@ -16,7 +16,7 @@ import { Tabs } from "@/components/ui/Tabs";
 import { PRODUKT_TEXT } from "@/lib/anzeige";
 import { prisma } from "@/lib/db";
 import { formatDatum, formatDatumZeit, formatEuro, formatUptime, formatZahl } from "@/lib/format";
-import { hostKundeSetzen } from "@/server/actions/host-detail";
+import { KundeStandortFormular } from "@/components/hosts/KundeStandortFormular";
 import { hostTokenWiderrufen } from "@/server/actions/tokens";
 import { hostMitDetails } from "@/server/queries/hostliste";
 import { meldungsGrenze } from "@/server/queries/hosts";
@@ -43,7 +43,11 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
 
   const kunden = await prisma.kunde.findMany({
     orderBy: { name: "asc" },
-    select: { id: true, name: true },
+    select: {
+      id: true,
+      name: true,
+      standorte: { orderBy: { name: "asc" }, select: { id: true, name: true } },
+    },
   });
 
   // Welche Cluster-Mitglieder melden sich selbst? Fehlende Knoten haben keinen Agent (#022).
@@ -167,30 +171,12 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                 <Zeile bezeichnung="Erstmals gesehen">{formatDatum(host.erstmalsGesehenAm)}</Zeile>
                 <Zeile bezeichnung="Letzte Meldung">{formatDatumZeit(host.letzterReportAm)}</Zeile>
 
-                <form action={hostKundeSetzen} className="mt-3">
+                <KundeStandortFormular
-                  <input type="hidden" name="hostId" value={host.id} />
+                  hostId={host.id}
-                  <label className="form-label small" htmlFor="kundeId">
+                  kunden={kunden}
-                    Kunde ändern
+                  kundeId={host.kundeId}
-                  </label>
+                  standortId={host.standortId}
-                  <div className="input-group input-group-sm">
+                />
-                    <select
-                      id="kundeId"
-                      name="kundeId"
-                      className="form-select"
-                      defaultValue={host.kundeId ?? ""}
-                    >
-                      <option value="">– nicht zugeordnet –</option>
-                      {kunden.map((kunde) => (
-                        <option key={kunde.id} value={kunde.id}>
-                          {kunde.name}
-                        </option>
-                      ))}
-                    </select>
-                    <button type="submit" className="btn btn-outline-primary">
-                      Setzen
-                    </button>
-                  </div>
-                </form>
               </Card>
             </div>
 

src/app/(dashboard)/jahresbahn/page.tsx

@@ -41,8 +41,8 @@ export default async function JahresbahnSeite() {
               <p className="mb-0 text-body-secondary">Noch kein Host mit Ablaufdatum gemeldet.</p>
             ) : (
               <div className="table-responsive">
-                <div style={{ minWidth: "820px" }}>
+                <div className="pl-timeline">
-                  <div className="d-flex text-body-secondary small mb-2" style={{ marginLeft: "13rem" }}>
+                  <div className="d-flex text-body-secondary small mb-2 pl-timeline-kopf">
                     {monate.map((monat) => (
                       <div key={monat} style={{ width: `${100 / 12}%` }}>
                         {monat}
@@ -72,7 +72,7 @@ export default async function JahresbahnSeite() {
                               : "var(--pl-info)";
                         return (
                           <div key={eintrag.hostId} className="d-flex align-items-center mb-1">
-                            <div className="small text-truncate" style={{ width: "13rem" }}>
+                            <div className="small text-truncate pl-timeline-name">
                               <Link href={`/hosts/${eintrag.hostId}`} className="text-decoration-none">
                                 {eintrag.hostname}
                               </Link>
@@ -112,7 +112,8 @@ export default async function JahresbahnSeite() {
             )}
 
             <p className="small text-body-secondary mb-0">
-              Die rote Linie markiert heute ({formatDatum(jetzt)}). Balkenfarbe: rot unter 14 Tagen, gelb
+              <span className="d-md-none">Seitwärts wischen zeigt die späteren Monate. </span>Die rote
+              Linie markiert heute ({formatDatum(jetzt)}). Balkenfarbe: rot unter 14 Tagen, gelb
               unter 30 Tagen, sonst blau. Ein Klick führt zur Laufzeit mit ihren Rechnungen.
             </p>
           </Card>
@@ -125,11 +126,11 @@ export default async function JahresbahnSeite() {
                 tabelle
               >
                 <div className="table-responsive">
-                  <table className="table table-striped align-middle">
+                  <table className="table table-striped align-middle pl-karten-tabelle">
                     <thead>
                       <tr>
-                        <th scope="col">Ablauf</th>
                         <th scope="col">Host</th>
+                        <th scope="col">Ablauf</th>
                         <th scope="col">Kunde</th>
                         <th scope="col">Key</th>
                         <th scope="col">Proxmox</th>
@@ -139,15 +140,15 @@ export default async function JahresbahnSeite() {
                     <tbody>
                       {naechste90Tage.map((eintrag) => (
                         <tr key={eintrag.hostId}>
-                          <td>
+                          <td className="pl-karten-kopf">
-                            <AblaufBadge datum={eintrag.ablauf.toISOString()} heute={jetzt} />
+                            <Link href={`/hosts/${eintrag.hostId}`} className="fw-semibold text-decoration-none">
-                          </td>
-                          <td>
-                            <Link href={`/hosts/${eintrag.hostId}`} className="text-decoration-none">
                               {eintrag.hostname}
                             </Link>
                           </td>
-                          <td>
+                          <td data-label="Ablauf">
+                            <AblaufBadge datum={eintrag.ablauf.toISOString()} heute={jetzt} />
+                          </td>
+                          <td data-label="Kunde">
                             {eintrag.kunde ? (
                               <Link href={`/kunden/${eintrag.kunde.id}`} className="text-decoration-none">
                                 {eintrag.kunde.name}
@@ -156,13 +157,13 @@ export default async function JahresbahnSeite() {
                               <span className="badge pl-bg-neutral">Nicht zugeordnet</span>
                             )}
                           </td>
-                          <td>
+                          <td data-label="Key">
                             <CopyableCode wert={eintrag.key} />
                           </td>
-                          <td>
+                          <td data-label="Proxmox">
                             <EinkaufBadge bezahlt={eintrag.einkaufBezahlt} />
                           </td>
-                          <td>
+                          <td data-label="Kundenrechnung">
                             <VerkaufBadge erstellt={eintrag.verkaufErstellt ?? false} bezahlt={false} />
                           </td>
                         </tr>

src/app/(dashboard)/kunden/page.tsx

@@ -39,7 +39,7 @@ export default async function KundenSeite() {
             }
           >
             <div className="table-responsive">
-              <table className="table table-striped align-middle">
+              <table className="table table-striped align-middle pl-karten-tabelle">
                 <thead>
                   <tr>
                     <th scope="col">Kunde</th>
@@ -56,26 +56,28 @@ export default async function KundenSeite() {
                     const punkte = rechnungspunkte.get(kunde.id);
                     return (
                       <tr key={kunde.id}>
-                        <td>
+                        <td className="pl-karten-kopf">
                           <Link href={`/kunden/${kunde.id}`} className="fw-semibold text-decoration-none">
                             {kunde.name}
                           </Link>
                           <div className="small text-body-secondary">{kunde.ansprechpartner ?? "–"}</div>
                         </td>
-                        <td className="pl-mono">{kunde.kundennummer}</td>
+                        <td className="pl-mono" data-label="Kundennummer">
-                        <td>{kunde.hosts}</td>
+                          {kunde.kundennummer}
-                        <td>{kunde.aktiv}</td>
+                        </td>
-                        <td>
+                        <td data-label="Hosts">{kunde.hosts}</td>
+                        <td data-label="Aktiv lizenziert">{kunde.aktiv}</td>
+                        <td data-label="Nächster Ablauf">
                           <AblaufBadge datum={kunde.naechsterAblauf?.toISOString() ?? null} heute={heute} />
                         </td>
-                        <td>
+                        <td data-label="Warnungen">
                           {kunde.offeneAlerts > 0 ? (
                             <Badge farbe="warning">{kunde.offeneAlerts} offen</Badge>
                           ) : (
                             <Badge farbe="success">keine</Badge>
                           )}
                         </td>
-                        <td>
+                        <td data-label="Rechnungen">
                           {punkte && punkte.offen > 0 ? (
                             <Badge farbe="danger">{punkte.offen} offen</Badge>
                           ) : (

src/app/(dashboard)/page.tsx

@@ -121,12 +121,22 @@ export default async function DashboardSeite() {
                   <table className="table table-striped align-middle">
                     <thead>
                       <tr>
+                        {/* Auf dem Handy bleiben Host und Ablauf; der Rest käme ohnehin nur
+                            per Seitwärtsscrollen ins Bild (#034). */}
                         <th scope="col">Host</th>
-                        <th scope="col">Kunde</th>
+                        <th scope="col" className="d-none d-md-table-cell">
-                        <th scope="col">Key</th>
+                          Kunde
+                        </th>
+                        <th scope="col" className="d-none d-lg-table-cell">
+                          Key
+                        </th>
                         <th scope="col">Ablauf</th>
-                        <th scope="col">Proxmox</th>
+                        <th scope="col" className="d-none d-sm-table-cell">
-                        <th scope="col">Kundenrechnung</th>
+                          Proxmox
+                        </th>
+                        <th scope="col" className="d-none d-sm-table-cell">
+                          Kundenrechnung
+                        </th>
                       </tr>
                     </thead>
                     <tbody>
@@ -137,8 +147,12 @@ export default async function DashboardSeite() {
                               {host.hostname}
                             </Link>
                             {host.meldetNicht ? <KeineMeldungBadge /> : null}
+                            {/* Auf schmalen Bildschirmen steht der Kunde hier mit darunter. */}
+                            <div className="small text-body-secondary d-md-none">
+                              {host.kunde ? host.kunde.name : "Nicht zugeordnet"}
+                            </div>
                           </td>
-                          <td>
+                          <td className="d-none d-md-table-cell">
                             {host.kunde ? (
                               <Link href={`/kunden/${host.kunde.id}`} className="text-decoration-none">
                                 {host.kunde.name}
@@ -152,16 +166,16 @@ export default async function DashboardSeite() {
                               </Link>
                             )}
                           </td>
-                          <td>
+                          <td className="d-none d-lg-table-cell">
                             <CopyableCode wert={host.subKey} />
                           </td>
                           <td>
                             <AblaufBadge datum={host.nextduedate?.toISOString() ?? null} heute={heute} />
                           </td>
-                          <td>
+                          <td className="d-none d-sm-table-cell">
                             <EinkaufBadge bezahlt={host.einkaufBezahlt} />
                           </td>
-                          <td>
+                          <td className="d-none d-sm-table-cell">
                             <VerkaufBadge erstellt={host.verkaufErstellt} bezahlt={host.verkaufBezahlt} />
                           </td>
                         </tr>

src/app/(dashboard)/rechnungen/page.tsx

@@ -197,7 +197,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
             </form>
 
             <div className="table-responsive">
-              <table className="table table-striped align-middle">
+              <table className="table table-striped align-middle pl-karten-tabelle">
                 <thead>
                   <tr>
                     <th scope="col">Kunde</th>
@@ -234,7 +234,13 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                     const faelligIn = tageBis(zeile.einkaufFaelligAm, heute);
                     return (
                       <tr key={zeile.id}>
-                        <td>
+                        {/* Auf dem Telefon steht der Host als Überschrift der Karte, sonst als Spalte. */}
+                        <td className="d-md-none pl-karten-kopf">
+                          <Link href={`/hosts/${zeile.hostId}`} className="fw-semibold text-decoration-none">
+                            {zeile.hostname}
+                          </Link>
+                        </td>
+                        <td data-label="Kunde">
                           {zeile.kunde ? (
                             <Link href={`/kunden/${zeile.kunde.id}`} className="text-decoration-none">
                               {zeile.kunde.name}
@@ -248,13 +254,13 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                             {zeile.hostname}
                           </Link>
                         </td>
-                        <td className="d-none d-lg-table-cell">
+                        <td className="d-none d-lg-table-cell" data-label="Laufzeit">
                           <Link href={`/rechnungen/${zeile.id}`} className="text-decoration-none">
                             {formatDatum(zeile.start)} – {formatDatum(zeile.ende)}
                           </Link>
                           {zeile.vorschlag ? <Badge farbe="info">Vorschlag</Badge> : null}
                         </td>
-                        <td>
+                        <td data-label="Proxmox-Rechnung">
                           <CopyableCode wert={zeile.einkaufNummer} />
                           {zeile.einkaufBezahlt === false && faelligIn !== null && faelligIn <= 7 ? (
                             <div className="small pl-text-danger">
@@ -262,8 +268,10 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                             </div>
                           ) : null}
                         </td>
-                        <td className="d-none d-xl-table-cell">{formatEuro(zeile.einkaufBetrag)}</td>
+                        <td className="d-none d-xl-table-cell" data-label="Einkauf">
-                        <td className="text-center">
+                          {formatEuro(zeile.einkaufBetrag)}
+                        </td>
+                        <td className="text-center" data-label="Einkauf bezahlt">
                           <StatusHaken
                             laufzeitId={zeile.id}
                             hostId={zeile.hostId}
@@ -273,11 +281,13 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                             titel="Proxmox-Rechnung bezahlt"
                           />
                         </td>
-                        <td>
+                        <td data-label="Kundenrechnung">
                           <CopyableCode wert={zeile.verkaufNummer} />
                         </td>
-                        <td className="d-none d-xl-table-cell">{formatEuro(zeile.verkaufBetrag)}</td>
+                        <td className="d-none d-xl-table-cell" data-label="Verkauf">
-                        <td className="text-center">
+                          {formatEuro(zeile.verkaufBetrag)}
+                        </td>
+                        <td className="text-center" data-label="Rechnung erstellt">
                           <StatusHaken
                             laufzeitId={zeile.id}
                             hostId={zeile.hostId}
@@ -286,7 +296,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                             titel="Kundenrechnung erstellt"
                           />
                         </td>
-                        <td className="text-center">
+                        <td className="text-center" data-label="Vom Kunden bezahlt">
                           <StatusHaken
                             laufzeitId={zeile.id}
                             hostId={zeile.hostId}
@@ -297,6 +307,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                           />
                         </td>
                         <td
+                          data-label="Marge"
                           className={`d-none d-xl-table-cell ${(zeile.marge ?? 0) >= 0 ? "pl-text-success" : "pl-text-danger"}`}
                         >
                           {zeile.marge === null ? "–" : formatEuro(zeile.marge)}
@@ -306,7 +317,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                   })}
                   {zeilen.length === 0 ? (
                     <tr>
-                      <td colSpan={11} className="text-center text-body-secondary py-4">
+                      <td colSpan={12} className="text-center text-body-secondary py-4">
                         Nichts gefunden. <Link href="/rechnungen?status=alle">Alle anzeigen</Link>
                       </td>
                     </tr>

src/app/globals.css

@@ -186,6 +186,19 @@ body {
   display: none;
 }
 
+/*
+ * Fläche hinter dem geöffneten Menü auf schmalen Bildschirmen. Ein Knopf statt eines div,
+ * damit sie auch per Tastatur erreichbar ist.
+ */
+.pl-menu-hintergrund {
+  position: fixed;
+  inset: 0;
+  z-index: 1037; /* unter dem Menü (1038), über allem anderen */
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  border: 0;
+}
+
 /* ---------- Inhaltsbereich ---------- */
 
 .app-content-header {
@@ -369,10 +382,128 @@ body {
   transform: translateX(-50%);
 }
 
+/* Zeitleiste der Jahresbahn: Breiten als Klassen, damit sie auf dem Telefon kleiner ausfallen. */
+.pl-timeline {
+  min-width: 820px;
+}
+
+.pl-timeline-kopf {
+  margin-left: 13rem;
+}
+
+.pl-timeline-name {
+  width: 13rem;
+}
+
 /* ---------- Mobil ---------- */
 
 @media (max-width: 575.98px) {
   .pl-touch-target {
     min-height: 44px;
   }
+
+  /*
+   * Ein Kontrollkästchen darf nicht selbst 44 px hoch werden – sonst steht in der Zeile ein
+   * großer leerer Kasten. Die Fläche zum Treffen bekommt stattdessen sein Umfeld (#035).
+   */
+  .pl-haken {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .pl-haken .form-check-input {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+}
+
+/*
+ * Breite Tabellen auf dem Telefon: Jede Zeile wird zur Karte, jede Zelle bekommt ihre
+ * Beschriftung aus `data-label` davor. Das ersetzt das Scrollen nach rechts, bei dem die
+ * Hälfte der Angaben unsichtbar bleibt (#035).
+ *
+ * Zellen ohne `data-label` stehen für sich – etwa eine Zeile mit Knöpfen.
+ */
+@media (max-width: 767.98px) {
+  .pl-karten-tabelle,
+  .pl-karten-tabelle tbody,
+  .pl-karten-tabelle tr,
+  .pl-karten-tabelle td {
+    display: block;
+    width: 100%;
+  }
+
+  .pl-karten-tabelle thead {
+    display: none;
+  }
+
+  .pl-karten-tabelle tr {
+    padding: 0.35rem 0.25rem;
+    border-bottom: 1px solid var(--bs-border-color);
+  }
+
+  .pl-karten-tabelle tr:last-child {
+    border-bottom: 0;
+  }
+
+  .pl-karten-tabelle td {
+    display: flex;
+    gap: 0.75rem;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 0.3rem 0.75rem;
+    text-align: right;
+    border: 0;
+  }
+
+  .pl-karten-tabelle td::before {
+    flex: 0 0 auto;
+    font-size: 0.8125rem;
+    color: var(--bs-secondary-color);
+    text-align: left;
+    content: attr(data-label);
+  }
+
+  /* Die erste Zelle trägt den Namen – sie steht als Überschrift der Karte für sich. */
+  .pl-karten-tabelle td.pl-karten-kopf {
+    display: block;
+    padding-top: 0.6rem;
+    font-size: 1.0625rem;
+    text-align: left;
+  }
+
+  .pl-karten-tabelle td.pl-karten-kopf::before {
+    content: none;
+  }
+
+  /* Lange Namen und Schlüssel sollen umbrechen, aber nicht Buchstabe für Buchstabe. */
+  .pl-karten-tabelle td a,
+  .pl-karten-tabelle td .pl-mono {
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
+  /* Auf dem Telefon bleibt mehr Platz für die Monate, wenn die Namensspalte schrumpft. */
+  .pl-timeline {
+    min-width: 560px;
+  }
+
+  .pl-timeline-kopf {
+    margin-left: 7rem;
+  }
+
+  .pl-timeline-name {
+    width: 7rem;
+  }
+
+  /* Kartenkopf mit Knöpfen: untereinander statt nebeneinander über den Rand hinaus. */
+  .card-header {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .card-header .card-tools {
+    flex-wrap: wrap;
+    width: 100%;
+  }
 }

src/components/hosts/KundeStandortFormular.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { hostKundeSetzen } from "@/server/actions/host-detail";
+
+export interface KundeMitStandorten {
+  id: string;
+  name: string;
+  standorte: { id: string; name: string }[];
+}
+
+/**
+ * Kunde und Standort eines Hosts ändern (#036).
+ *
+ * Beides gehört in **ein** Formular: Die Standorte hängen am Kunden, und ein Formular, das nur den
+ * Kunden sendet, würde den Standort beim Speichern mitlöschen – genau das passierte vorher.
+ */
+export function KundeStandortFormular({
+  hostId,
+  kunden,
+  kundeId,
+  standortId,
+}: {
+  hostId: string;
+  kunden: KundeMitStandorten[];
+  kundeId: string | null;
+  standortId: string | null;
+}) {
+  const [gewaehlterKunde, setGewaehlterKunde] = useState(kundeId ?? "");
+  const standorte = kunden.find((kunde) => kunde.id === gewaehlterKunde)?.standorte ?? [];
+
+  return (
+    <form action={hostKundeSetzen} className="mt-3">
+      <input type="hidden" name="hostId" value={hostId} />
+
+      <label className="form-label small" htmlFor="kundeId">
+        Kunde ändern
+      </label>
+      <select
+        id="kundeId"
+        name="kundeId"
+        className="form-select form-select-sm mb-2"
+        value={gewaehlterKunde}
+        onChange={(e) => setGewaehlterKunde(e.target.value)}
+      >
+        <option value="">– nicht zugeordnet –</option>
+        {kunden.map((kunde) => (
+          <option key={kunde.id} value={kunde.id}>
+            {kunde.name}
+          </option>
+        ))}
+      </select>
+
+      <label className="form-label small" htmlFor="standortId">
+        Standort
+      </label>
+      <div className="input-group input-group-sm">
+        <select
+          id="standortId"
+          name="standortId"
+          className="form-select"
+          defaultValue={standortId ?? ""}
+          disabled={standorte.length === 0}
+          // `key` erzwingt ein frisches Feld, wenn der Kunde wechselt – sonst bliebe die alte Auswahl stehen.
+          key={gewaehlterKunde}
+        >
+          <option value="">– keiner –</option>
+          {standorte.map((standort) => (
+            <option key={standort.id} value={standort.id}>
+              {standort.name}
+            </option>
+          ))}
+        </select>
+        <button type="submit" className="btn btn-outline-primary">
+          Setzen
+        </button>
+      </div>
+
+      {gewaehlterKunde && standorte.length === 0 ? (
+        <div className="form-text">
+          Für diesen Kunden gibt es noch keinen Standort. Anlegen lässt er sich auf der Kundenseite.
+        </div>
+      ) : null}
+    </form>
+  );
+}

src/components/layout/Header.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
 import { SearchDialog, type SuchEintrag } from "./SearchDialog";
 import type { Rolle } from "@/generated/prisma/enums";
 import { ROLLEN_TEXT } from "@/server/auth/rollen";
+import { menuUmschalten } from "./menuZustand";
 
 export interface KopfleistenAlert {
   id: string;
@@ -58,16 +59,9 @@ export function Header({
     return () => window.removeEventListener("keydown", tasten);
   }, []);
 
-  /** Sidebar umschalten: auf schmalen Bildschirmen als Overlay, sonst eingeklappt. */
+  /** Seitenmenü umschalten – der Zustand liegt in menuZustand.ts, damit das Menü selbst ihn kennt. */
   const sidebarUmschalten = useCallback(() => {
-    const body = document.body;
+    menuUmschalten();
-    if (window.innerWidth < 992) {
-      body.classList.toggle("sidebar-open");
-      body.classList.remove("sidebar-collapse");
-    } else {
-      body.classList.toggle("sidebar-collapse");
-      body.classList.remove("sidebar-open");
-    }
   }, []);
 
   function themaUmschalten() {

src/components/layout/Sidebar.tsx

@@ -2,10 +2,11 @@
 
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { LogoMitSchriftzug } from "@/components/Logo";
 import type { Rolle } from "@/generated/prisma/enums";
 import { darf } from "@/server/auth/rollen";
+import { menuSchliessen, useMenuOffen } from "./menuZustand";
 
 interface MenuEintrag {
   href: string;
@@ -30,6 +31,21 @@ export function Sidebar({
   const pathname = usePathname();
   const router = useRouter();
   const [suche, setSuche] = useState("");
+  const menuOffen = useMenuOffen();
+
+  // Nach dem Navigieren hat das Menü seinen Zweck erfüllt – auf dem Handy verdeckt es sonst alles.
+  useEffect(() => {
+    menuSchliessen();
+  }, [pathname]);
+
+  // Escape schließt, wie bei jedem anderen Overlay auch.
+  useEffect(() => {
+    function taste(ereignis: KeyboardEvent) {
+      if (ereignis.key === "Escape") menuSchliessen();
+    }
+    window.addEventListener("keydown", taste);
+    return () => window.removeEventListener("keydown", taste);
+  }, []);
 
   const haupt: MenuEintrag[] = [
     { href: "/", titel: "Dashboard", icon: "bi-speedometer2" },
@@ -105,11 +121,30 @@ export function Sidebar({
   }
 
   return (
-    <aside className="app-sidebar shadow" data-bs-theme="dark">
+    <>
-      <div className="sidebar-brand">
+      {/* Fläche hinter dem Menü: antippen schließt. Ohne sie bleibt das Menü auf dem Handy stehen. */}
+      {menuOffen ? (
+        <button
+          type="button"
+          className="pl-menu-hintergrund d-lg-none"
+          aria-label="Menü schließen"
+          onClick={menuSchliessen}
+        />
+      ) : null}
+
+      <aside className="app-sidebar shadow" data-bs-theme="dark">
+      <div className="sidebar-brand d-flex align-items-center justify-content-between">
         <Link href="/" className="brand-link">
           <LogoMitSchriftzug variante="sidebar" groesse={34} />
         </Link>
+        <button
+          type="button"
+          className="btn btn-link text-white d-lg-none pl-touch-target me-2"
+          aria-label="Menü schließen"
+          onClick={menuSchliessen}
+        >
+          <i className="bi bi-x-lg" aria-hidden="true" />
+        </button>
       </div>
 
       <div className="pl-sidebar-user">
@@ -147,6 +182,7 @@ export function Sidebar({
           </ul>
         </nav>
       </div>
-    </aside>
+      </aside>
+    </>
   );
 }

src/components/layout/menuZustand.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+/**
+ * Zustand des Seitenmenüs auf schmalen Bildschirmen (#034).
+ *
+ * AdminLTE bringt dafür eigenes JavaScript mit, das wir bewusst nicht einbinden – die Klasse
+ * `sidebar-open` am `body` allein lässt sich aber nicht wieder loswerden: Kein Hintergrund zum
+ * Antippen, kein Schließen beim Navigieren. Deshalb ein eigener, winziger Zustand, auf den
+ * Kopfzeile und Menü gemeinsam hören.
+ */
+
+const SCHMAL = 992;
+
+let offen = false;
+const zuhoerer = new Set<() => void>();
+
+function melden() {
+  for (const ruf of zuhoerer) ruf();
+}
+
+/** Setzt die Klassen, die das AdminLTE-Stylesheet auswertet. */
+function klassenSetzen() {
+  const body = document.body;
+  body.classList.toggle("sidebar-open", offen);
+  // Auf schmalen Bildschirmen liegt das Menü über dem Inhalt; dahinter soll nichts mitscrollen.
+  body.style.overflow = offen && window.innerWidth < SCHMAL ? "hidden" : "";
+}
+
+export function menuUmschalten() {
+  if (window.innerWidth >= SCHMAL) {
+    // Breiter Bildschirm: Das Menü bleibt stehen und wird nur schmaler.
+    document.body.classList.toggle("sidebar-collapse");
+    document.body.classList.remove("sidebar-open");
+    return;
+  }
+
+  offen = !offen;
+  document.body.classList.remove("sidebar-collapse");
+  klassenSetzen();
+  melden();
+}
+
+export function menuSchliessen() {
+  if (!offen) return;
+  offen = false;
+  klassenSetzen();
+  melden();
+}
+
+function abonnieren(ruf: () => void) {
+  zuhoerer.add(ruf);
+  return () => {
+    zuhoerer.delete(ruf);
+  };
+}
+
+export function useMenuOffen(): boolean {
+  // Auf dem Server ist das Menü nie offen – sonst käme es beim ersten Rendern zu einem Unterschied.
+  return useSyncExternalStore(
+    abonnieren,
+    () => offen,
+    () => false,
+  );
+}

src/components/rechnungen/StatusHaken.tsx

@@ -37,7 +37,7 @@ export function StatusHaken({
   }
 
   return (
-    <span className="d-inline-flex align-items-center justify-content-center">
+    <span className="pl-haken d-inline-flex align-items-center justify-content-center">
       {laeuft ? (
         <span
           className="spinner-border spinner-border-sm text-body-secondary"
@@ -47,7 +47,7 @@ export function StatusHaken({
       ) : (
         <input
           type="checkbox"
-          className="form-check-input pl-touch-target"
+          className="form-check-input"
           checked={wert}
           disabled={deaktiviert}
           onChange={(e) => umschalten(e.target.checked)}

src/lib/adresse.ts

@@ -9,31 +9,34 @@
  * sich fälschen; für eine Weiterleitung auf die eigene Seite ist das unkritisch, als erste Wahl aber
  * unnötig.
  */
-export function oeffentlicheBasis(request: Request, eingetragen?: string): URL {
+/**
-  if (eingetragen) {
+ * Lausch-Adressen taugen nicht als Ziel für einen Browser: `0.0.0.0` heißt „alle Schnittstellen“.
-    try {
+ * Steht so etwas in der Konfiguration, wird es übergangen statt eine unerreichbare Seite zu bauen.
-      return new URL(eingetragen);
+ */
-    } catch {
+const UNBRAUCHBAR = new Set(["0.0.0.0", "::", "[::]", "", "0"]);
-      // Unbrauchbarer Eintrag: weiter mit den übrigen Quellen.
-    }
-  }
 
-  if (process.env.APP_URL) {
+function brauchbar(adresse: string | undefined): URL | null {
-    try {
+  if (!adresse) return null;
-      return new URL(process.env.APP_URL);
+  try {
-    } catch {
+    const ergebnis = new URL(adresse);
-      // ebenso
+    return UNBRAUCHBAR.has(ergebnis.hostname) ? null : ergebnis;
-    }
+  } catch {
+    return null;
   }
+}
+
+export function oeffentlicheBasis(request: Request, eingetragen?: string): URL {
+  const ausEinstellung = brauchbar(eingetragen);
+  if (ausEinstellung) return ausEinstellung;
+
+  const ausUmgebung = brauchbar(process.env.APP_URL);
+  if (ausUmgebung) return ausUmgebung;
 
   const gastgeber = request.headers.get("x-forwarded-host") ?? request.headers.get("host");
   if (gastgeber) {
     const schema = request.headers.get("x-forwarded-proto") ?? new URL(request.url).protocol.replace(":", "");
-    try {
+    const ausKopfzeile = brauchbar(`${schema}://${gastgeber}`);
-      return new URL(`${schema}://${gastgeber}`);
+    if (ausKopfzeile) return ausKopfzeile;
-    } catch {
-      // ebenso
-    }
   }
 
   return new URL(request.url);
@@ -43,3 +46,19 @@ export function oeffentlicheBasis(request: Request, eingetragen?: string): URL {
 export function eigeneAdresse(request: Request, pfad: string, eingetragen?: string): URL {
   return new URL(pfad, oeffentlicheBasis(request, eingetragen));
 }
+
+/**
+ * Dasselbe für Server Actions und Seiten, die keine `Request` zur Hand haben.
+ *
+ * Nötig, weil Next.js eine Weiterleitung aus einer Server Action serverseitig absolut macht – und
+ * dafür die Adresse nimmt, auf die der Server lauscht. Im Container ist das `0.0.0.0` (oder der
+ * Containername); im Browser landet man damit auf einer Seite, die es nicht gibt.
+ */
+export async function eigenerPfad(pfad: string, eingetragen?: string): Promise<string> {
+  const { headers } = await import("next/headers");
+  const kopfzeilen = await headers();
+
+  // Die Anfrage selbst gibt es hier nicht; eine leere mit den echten Kopfzeilen genügt.
+  const basis = oeffentlicheBasis(new Request("http://platzhalter.invalid", { headers: kopfzeilen }), eingetragen);
+  return new URL(pfad, basis).toString();
+}

src/server/actions/auth.ts

@@ -2,12 +2,16 @@
 
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { eigenerPfad } from "@/lib/adresse";
 import { SITZUNGS_COOKIE } from "@/lib/sitzung";
 import { protokolliere } from "@/server/audit";
+import { einstellungen } from "@/server/einstellungen";
 
 /** Abmelden aus dem Benutzermenü. Die Anmeldung selbst läuft über /api/auth/anmelden. */
 export async function abmelden() {
   (await cookies()).delete(SITZUNGS_COOKIE);
   await protokolliere("abmeldung", "Benutzer", null, {});
-  redirect("/login");
+
+  const { dashboardUrl } = await einstellungen();
+  redirect(await eigenerPfad("/login", dashboardUrl));
 }

src/server/actions/host-detail.ts

@@ -57,8 +57,24 @@ export async function hostKundeSetzen(formular: FormData) {
   const standortId = formular.get("standortId")?.toString() || null;
   if (!hostId) return;
 
-  await prisma.host.update({ where: { id: hostId }, data: { kundeId, standortId } });
+  // Ein Standort gehört immer zu einem Kunden. Passt beides nicht zusammen – etwa weil der Kunde
-  await protokolliere("host.zugewiesen", "Host", hostId, { kundeId, standortId });
+  // gewechselt hat –, wird der Standort verworfen statt eine falsche Zuordnung zu speichern.
+  const gueltigerStandort =
+    standortId && kundeId
+      ? ((await prisma.standort.findFirst({
+          where: { id: standortId, kundeId },
+          select: { id: true },
+        })) ?? null)
+      : null;
+
+  await prisma.host.update({
+    where: { id: hostId },
+    data: { kundeId, standortId: gueltigerStandort?.id ?? null },
+  });
+  await protokolliere("host.zugewiesen", "Host", hostId, {
+    kundeId,
+    standortId: gueltigerStandort?.id ?? null,
+  });
 
   if (kundeId) {
     await prisma.alert.updateMany({

src/server/actions/kunden.ts

@@ -6,6 +6,7 @@ import { z } from "zod";
 import { prisma } from "@/lib/db";
 import { protokolliere } from "@/server/audit";
 import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
+import { eigenerPfad } from "@/lib/adresse";
 
 export interface AktionsErgebnis {
   fehler?: string;
@@ -79,7 +80,7 @@ export async function kundeLoeschen(formular: FormData) {
 
   revalidatePath("/kunden");
   revalidatePath("/hosts/nicht-zugeordnet");
-  redirect("/kunden");
+  redirect(await eigenerPfad("/kunden"));
 }
 
 const standortSchema = z.object({

src/server/auth/sitzungspflicht.ts

@@ -2,6 +2,7 @@ import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 import { cache } from "react";
 import type { Rolle } from "@/generated/prisma/enums";
+import { eigenerPfad } from "@/lib/adresse";
 import { prisma } from "@/lib/db";
 import { type GeleseneSitzung, SITZUNGS_COOKIE, sitzungLesen } from "@/lib/sitzung";
 import { darf, type Recht } from "./rollen";
@@ -68,10 +69,10 @@ export const angemeldet = cache(async (): Promise<AngemeldeterBenutzer | null> =
  */
 export async function sitzungErforderlich(recht?: Recht): Promise<AngemeldeterBenutzer> {
   const benutzer = await angemeldet();
-  if (!benutzer) redirect("/login?fehler=Bitte+anmelden.");
+  if (!benutzer) redirect(await eigenerPfad("/login?fehler=Bitte+anmelden."));
 
   if (recht && !darf(benutzer.rolle, recht)) {
-    redirect("/?fehler=Für+diesen+Bereich+fehlt+die+Berechtigung.");
+    redirect(await eigenerPfad("/?fehler=Für+diesen+Bereich+fehlt+die+Berechtigung."));
   }
 
   return benutzer;

tests/host-standort.test.ts

@@ -0,0 +1,94 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { datenbankLeeren, datenbankVerfuegbar, testPrisma } from "./helpers/db";
+
+/** Zuweisung von Kunde und Standort an einen Host (#036). */
+vi.mock("@/server/auth/sitzungspflicht", () => ({
+  sitzungErforderlich: async () => ({ benutzerId: "test", rolle: "ADMIN", kundeId: null }),
+  sichtbarerKunde: async () => null,
+  darfEinkaufSehen: async () => true,
+  angemeldet: async () => null,
+}));
+vi.mock("next/cache", () => ({ revalidatePath: () => {} }));
+
+const { hostKundeSetzen } = await import("@/server/actions/host-detail");
+
+async function aufbau() {
+  const [kundeA, kundeB] = await Promise.all([
+    testPrisma.kunde.create({ data: { name: "Kunde A", kundennummer: "K-A" } }),
+    testPrisma.kunde.create({ data: { name: "Kunde B", kundennummer: "K-B" } }),
+  ]);
+  const [standortA, standortB] = await Promise.all([
+    testPrisma.standort.create({ data: { kundeId: kundeA.id, name: "Rechenzentrum A" } }),
+    testPrisma.standort.create({ data: { kundeId: kundeB.id, name: "Rechenzentrum B" } }),
+  ]);
+  const host = await testPrisma.host.create({
+    data: { agentId: "a-1", hostname: "pve-01", produkt: "PVE" },
+  });
+  return { kundeA, kundeB, standortA, standortB, host };
+}
+
+function formular(werte: Record<string, string>) {
+  const daten = new FormData();
+  for (const [name, wert] of Object.entries(werte)) daten.set(name, wert);
+  return daten;
+}
+
+describe.runIf(datenbankVerfuegbar)("Kunde und Standort setzen", () => {
+  beforeEach(async () => {
+    await datenbankLeeren();
+  });
+
+  afterAll(async () => {
+    await testPrisma.$disconnect();
+  });
+
+  it("setzt Kunde und Standort zusammen", async () => {
+    const { kundeA, standortA, host } = await aufbau();
+
+    await hostKundeSetzen(formular({ hostId: host.id, kundeId: kundeA.id, standortId: standortA.id }));
+
+    const danach = await testPrisma.host.findUniqueOrThrow({ where: { id: host.id } });
+    expect(danach.kundeId).toBe(kundeA.id);
+    expect(danach.standortId).toBe(standortA.id);
+  });
+
+  it("verwirft einen Standort, der zu einem anderen Kunden gehört", async () => {
+    const { kundeA, standortB, host } = await aufbau();
+
+    await hostKundeSetzen(formular({ hostId: host.id, kundeId: kundeA.id, standortId: standortB.id }));
+
+    const danach = await testPrisma.host.findUniqueOrThrow({ where: { id: host.id } });
+    expect(danach.kundeId).toBe(kundeA.id);
+    expect(danach.standortId).toBeNull();
+  });
+
+  it("löst die Zuordnung samt Standort, wenn kein Kunde gewählt ist", async () => {
+    const { kundeA, standortA, host } = await aufbau();
+    await hostKundeSetzen(formular({ hostId: host.id, kundeId: kundeA.id, standortId: standortA.id }));
+
+    await hostKundeSetzen(formular({ hostId: host.id, kundeId: "", standortId: "" }));
+
+    const danach = await testPrisma.host.findUniqueOrThrow({ where: { id: host.id } });
+    expect(danach.kundeId).toBeNull();
+    expect(danach.standortId).toBeNull();
+  });
+
+  it("schließt die Warnung „Host ohne Kunde“ beim Zuweisen", async () => {
+    const { kundeA, host } = await aufbau();
+    await testPrisma.alert.create({
+      data: {
+        regel: "host-ohne-kunde",
+        fingerprint: `host-ohne-kunde:${host.id}`,
+        schwere: "INFO",
+        titel: "Host ohne Kunde",
+        beschreibung: "…",
+        hostId: host.id,
+      },
+    });
+
+    await hostKundeSetzen(formular({ hostId: host.id, kundeId: kundeA.id }));
+
+    const alert = await testPrisma.alert.findFirstOrThrow({ where: { hostId: host.id } });
+    expect(alert.erledigtAm).not.toBeNull();
+  });
+});

tests/menu-zustand.test.ts

@@ -0,0 +1,91 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * Prüft das Öffnen und Schließen des Seitenmenüs. Statt eines echten Browsers genügen hier
+ * Attrappen für `document.body` und `window` – geprüft wird, welche Klassen gesetzt werden.
+ */
+
+const klassen = new Set<string>();
+let breite = 390;
+
+function aufraeumen() {
+  klassen.clear();
+  breite = 390;
+}
+
+beforeEach(async () => {
+  aufraeumen();
+  vi.resetModules();
+
+  const body = {
+    classList: {
+      toggle(name: string, an?: boolean) {
+        const soll = an ?? !klassen.has(name);
+        if (soll) klassen.add(name);
+        else klassen.delete(name);
+      },
+      remove(name: string) {
+        klassen.delete(name);
+      },
+      contains: (name: string) => klassen.has(name),
+    },
+    style: { overflow: "" },
+  };
+
+  vi.stubGlobal("document", { body });
+  vi.stubGlobal("window", {
+    get innerWidth() {
+      return breite;
+    },
+  });
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("Seitenmenü auf schmalen Bildschirmen", () => {
+  it("öffnet und schließt wieder", async () => {
+    const { menuUmschalten, menuSchliessen } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    expect(klassen.has("sidebar-open")).toBe(true);
+
+    menuSchliessen();
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+
+  it("sperrt den Inhalt hinter dem offenen Menü gegen Scrollen", async () => {
+    const { menuUmschalten, menuSchliessen } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    expect((document.body as unknown as { style: { overflow: string } }).style.overflow).toBe("hidden");
+
+    menuSchliessen();
+    expect((document.body as unknown as { style: { overflow: string } }).style.overflow).toBe("");
+  });
+
+  it("schließt auch beim zweiten Antippen des Knopfes", async () => {
+    const { menuUmschalten } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    menuUmschalten();
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+
+  it("macht ein zweites Schließen zum Nichts", async () => {
+    const { menuSchliessen } = await import("@/components/layout/menuZustand");
+
+    menuSchliessen();
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+
+  it("klappt auf breiten Bildschirmen nur ein, statt zu überlagern", async () => {
+    breite = 1400;
+    const { menuUmschalten } = await import("@/components/layout/menuZustand");
+
+    menuUmschalten();
+    expect(klassen.has("sidebar-collapse")).toBe(true);
+    expect(klassen.has("sidebar-open")).toBe(false);
+  });
+});

tests/sicherheit.test.ts

@@ -100,6 +100,19 @@ describe("Öffentliche Adresse", () => {
     expect(eigeneAdresse(anfrageMit({}), "/").host).toBe("0a5963a591df:3000");
   });
 
+  it("übergeht eine Lausch-Adresse in der Konfiguration", () => {
+    // 0.0.0.0 heißt „alle Schnittstellen“ – als Ziel im Browser ist das unbrauchbar.
+    // Genau so stand es nach einer Installation in der .env und führte beim Abmelden ins Leere.
+    const anfrage = anfrageMit({ host: "proxledger.firma.de" });
+    expect(eigeneAdresse(anfrage, "/login", "http://0.0.0.0:3000").host).toBe("proxledger.firma.de");
+  });
+
+  it("übergeht auch eine Lausch-Adresse aus der Umgebung", () => {
+    vi.stubEnv("APP_URL", "http://0.0.0.0:3000");
+    const anfrage = anfrageMit({ host: "proxledger.firma.de" });
+    expect(eigeneAdresse(anfrage, "/login").host).toBe("proxledger.firma.de");
+  });
+
   it("übergeht einen unbrauchbaren Eintrag, statt zu scheitern", () => {
     const anfrage = anfrageMit({ "x-forwarded-host": "dashboard.kunde.de" });
     expect(eigeneAdresse(anfrage, "/", "keine-adresse").host).toBe("dashboard.kunde.de");