Merge branch 'phase/039-laufzeit-zugang'

Im Reiter Rechnungen der Host-Detailansicht war die Laufzeit nie verlinkt,
und in der Rechnungsliste ist diese Spalte erst ab 992 px sichtbar. Auf dem
Telefon fuehrte damit kein Weg zu den Rechnungsformularen.

Die Laufzeit ist jetzt ein Link und zugleich Ueberschrift der Karte; in der
Liste bleibt sie auf dem Telefon sichtbar und entfaellt nur zwischen 768 und
992 px. Dafuer braucht es eine eigene Klasse: Bootstraps d-*-Hilfsklassen
setzen display mit !important und ueberschreiben das Kartenlayout.

Nebenbefund: Auch dieser Reiter rechnete den Einkauf ohne Rabatt - dritte
Stelle nach #037 und #038.

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

CHANGELOG.md

@@ -17,6 +17,24 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
 
 ### Sicherheit
 
+## [0.22.2] – 2026-10-03
+
+### Behoben
+- **Auf dem Telefon führte kein Weg zu den Rechnungsformularen**: Im Reiter *Rechnungen* der Host-Detailansicht war die Laufzeit nicht verlinkt, und in der Rechnungsliste ist diese Spalte erst ab 992 px sichtbar (#039)
+- Der Reiter *Rechnungen* rechnete den Einkauf noch ohne Rabatt (#039)
+
+### Geändert
+- Der Reiter *Rechnungen* nutzt auf dem Telefon das Kartenlayout (#039)
+
+## [0.22.1] – 2026-10-03
+
+### Behoben
+- **Die ganze Seite wurde auf dem Telefon herausgezoomt**, sobald die Warnungen geöffnet wurden oder eine Host-Detailansicht eine lange Server-ID enthielt. Ursache war jeweils ein Element breiter als das Fenster (#038)
+- Die Laufzeit-Detailseite rechnete noch mit dem Listenpreis statt mit dem Betrag nach Rabatt – Marge und der Vorschlag für die Kundenrechnung waren um den Rabatt zu hoch (#037)
+
+### Hinzugefügt
+- `npm run screenshots -- --mobil name=/pfad` für gezielte Aufnahmen in Telefonbreite (#038)
+
 ## [0.22.0] – 2026-10-03
 
 ### Geändert

DEVLOG.md

@@ -2,7 +2,7 @@
 
 ## Zeitübersicht
 
-**Gesamt:** 19 h 53 min
+**Gesamt:** 21 h 03 min
 
 | Issue | Zeit |
 |---|---|
@@ -43,6 +43,8 @@
 | #035 Tabellen als Karten | 0 h 50 min |
 | #036 Standort am Host | 0 h 30 min |
 | #037 Rabatt je Position | 0 h 55 min |
+| #038 Überbreite auf dem Handy | 0 h 40 min |
+| #039 Zugang zur Laufzeit | 0 h 30 min |
 
 | Meilenstein | Zeit |
 |---|---|
@@ -65,7 +67,7 @@
 
 ## 2026-09-17 · Sitzung 1 · 19:36–laufend
 **Issue:** #001–#007 (Meilensteine v0.1.0 bis v0.4.0)
-**Version:** 0.22.0
+**Version:** 0.22.2
 
 ### Erledigt
 - Auftrag gelesen, Rückfragen gestellt
@@ -194,6 +196,14 @@
 - Florians Schilderung des Ablaufs (unbezahlte Rechnung → Kundenrechnung → Kunde zahlt → selbst zahlen → PAID-Fassung) ergab die zwölfte Warnregel
 - Lehre: Ein Beleg aus der Praxis sagt mehr über das Datenmodell als jede Annahme darüber, wie Rechnungen aussehen
 
+- Überbreite auf dem Handy (#038): Drei Verursacher, ein Muster – ein Element breiter als das Fenster zoomt die ganze Seite heraus
+- Dabei einen eigenen Fehler aus #037 gefunden: Die Detailseite rechnete weiter mit dem Listenpreis. Beim Ändern einer Rechengröße reicht es nicht, die Abfragen anzupassen – auch die Seiten rechnen selbst
+- Das Aufnahme-Skript kann jetzt gezielt in Telefonbreite aufnehmen; damit ließ sich die Behebung belegen statt nur behaupten
+
+- #039: Auf dem Telefon führte kein Weg zu den Rechnungsformularen – die Laufzeit war nicht verlinkt und die Spalte erst ab 992 px sichtbar
+- Dritte Stelle, die den Einkauf ohne Rabatt rechnete. Beim Ändern einer Rechengröße gehört jede Stelle gesucht, die sie selbst bildet – nicht nur die Abfragen
+- Bootstraps `d-*`-Klassen setzen `display` mit `!important`; für Spalten in der Kartenansicht braucht es eigene Klassen
+
 ### 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)

docs/issues/038-ueberbreite-handy.md

@@ -0,0 +1,31 @@
+# #038 Seite wird auf dem Handy herausgezoomt
+**Status:** erledigt
+**Meilenstein:** v0.22.1
+**Labels:** bug, ui
+**Geschätzt:** 2 h   **Tatsächlich:** 0 h 40 min
+
+## Auslöser
+Zwei Meldungen aus dem Einsatz: Beim Öffnen der Warnungen verkleinerte sich die ganze Seite, und die
+Host-Detailansicht saß verschoben im Bild.
+
+## Ursache
+Beides derselbe Mechanismus: Ein Element ist breiter als das Fenster, also zoomt der Browser die
+**ganze Seite** heraus, damit sie hineinpasst. Drei Verursacher:
+
+1. Die Klappliste der Warnungen war mit 22 rem fest breiter als ein 390-px-Fenster.
+2. Drei Tabellen in der Host-Detailansicht (Keys, Server-IDs, Tokens) standen ohne
+   `table-responsive` – anders als die übrigen.
+3. Eine 32-stellige Server-ID bricht nicht von selbst um.
+
+## Behebung
+- Klapplisten richten sich auf dem Telefon am Fenster aus (`position: fixed`, links und rechts 0,5 rem,
+  höchstens 70 % Fensterhöhe mit eigenem Scroll) statt am Knopf
+- Die drei Tabellen bekommen ihre Hülle
+- Lange Schlüssel und IDs dürfen umbrechen (`overflow-wrap: anywhere`)
+- `npm run screenshots -- --mobil name=/pfad` nimmt gezielt eine Seite in Telefonbreite auf; damit
+  wurde die Host-Detailansicht gegengeprüft
+
+## Nachtrag zu #037
+Beim Prüfen fiel auf, dass die Laufzeit-Detailseite noch mit dem **Listenpreis** rechnete statt mit
+dem Betrag nach Rabatt – Marge und Vorschlag für die Kundenrechnung waren dort um den Rabatt zu hoch.
+Die Seite zeigt jetzt „990,00 € · 1.100,00 € − 110,00 € Rabatt“ und rechnet mit 990.

docs/issues/039-zugang-zur-laufzeit.md

@@ -0,0 +1,32 @@
+# #039 Auf dem Telefon führte kein Weg zur Laufzeit
+**Status:** erledigt
+**Meilenstein:** v0.22.2
+**Labels:** bug, ui
+**Geschätzt:** 1 h   **Tatsächlich:** 0 h 30 min
+
+## Auslöser
+„Kann ich am Handy nicht rein.“ Gemeint war der Reiter *Rechnungen* in der Host-Detailansicht: Die
+Zeile zeigt Laufzeit, Rechnung und Beträge – aber nichts davon war anklickbar.
+
+## Ursache
+Zwei Stellen:
+
+1. In der Host-Detailansicht war die Laufzeit nie verlinkt, auch am Rechner nicht. Man kam nur über
+   die Rechnungsliste dorthin.
+2. In der Rechnungsliste ist die Laufzeit-Spalte erst ab 992 px eingeblendet. Auf dem Telefon fehlte
+   damit der einzige Verweis auf die Formulare – die Karte verwies nur auf den Host.
+
+## Behebung
+- Die Laufzeit in der Host-Detailansicht ist ein Link und zugleich die Überschrift der Karte
+- In der Rechnungsliste bleibt die Laufzeit auf dem Telefon sichtbar; ausgeblendet wird sie nur
+  zwischen 768 und 992 px, wo die Tabelle am engsten ist
+- Der Reiter *Rechnungen* nutzt ebenfalls das Kartenlayout
+
+## Nebenbefund
+Auch dieser Reiter rechnete den Einkauf noch ohne Rabatt – 1.100 € statt 990 €. Dritte Stelle nach
+#037 und #038; alle gefunden, weil Florian die Zahl auf dem Bildschirm mit seiner Rechnung verglichen hat.
+
+## Gelernt
+Bootstraps `d-*`-Hilfsklassen setzen `display` mit `!important` und überschreiben damit das
+Kartenlayout. Für Spalten, die in der Kartenansicht sichtbar bleiben sollen, braucht es eine eigene
+Klasse (`pl-spalte-laufzeit`).

docs/issues/README.md

@@ -41,4 +41,6 @@ Details und Architektur: [../architektur.md](../architektur.md). Zeiten werden a
 | [#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 |
 | [#037](037-rabatt-und-ablauf.md) | Rabatt je Position und der tatsächliche Ablauf | erledigt | v0.22.0 | 3 h | 0 h 55 min |
-| | **Summe** | | | **160 h** | **19 h 53 min** |
+| [#038](038-ueberbreite-handy.md) | Seite wird auf dem Handy herausgezoomt | erledigt | v0.22.1 | 2 h | 0 h 40 min |
+| [#039](039-zugang-zur-laufzeit.md) | Auf dem Telefon führte kein Weg zur Laufzeit | erledigt | v0.22.2 | 1 h | 0 h 30 min |
+| | **Summe** | | | **163 h** | **21 h 03 min** |

package.json

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

scripts/screenshots.mjs

@@ -25,6 +25,14 @@ const BASIS = process.env.SCREENSHOT_URL ?? "http://localhost:3000";
 const ZIEL = path.join(process.cwd(), "docs", "anleitung", "bilder");
 const ALLE = process.argv.includes("--alle");
 
+/** Zusätzliche Handy-Aufnahmen von der Befehlszeile: --mobil name=/pfad */
+const MOBIL_ZUSATZ = process.argv
+  .filter((wert, i) => process.argv[i - 1] === "--mobil")
+  .map((eintrag) => {
+    const [name, ...rest] = eintrag.split("=");
+    return { name, pfad: rest.join("="), titel: "Handy" };
+  });
+
 /** Zusätzliche Seiten von der Befehlszeile: --seite name=/pfad */
 const ZUSATZ = process.argv
   .filter((wert, i) => process.argv[i - 1] === "--seite")
@@ -187,6 +195,11 @@ async function main() {
     console.log(`  ${seite.name}.png – ${seite.titel}`);
   }
 
+  for (const seite of MOBIL_ZUSATZ) {
+    await aufnehmen(hell, seite.pfad, path.join(ZIEL, `${seite.name}.png`), 390, 1800, adresse);
+    console.log(`  ${seite.name}.png – ${seite.titel}`);
+  }
+
   if (ALLE) {
     const dunkel = profilVorbereiten("dunkel", true);
     for (const seite of ["dashboard", "hosts", "rechnungen", "warnungen"]) {

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

@@ -225,7 +225,8 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     inhalt: (
                       <>
                         <h3 className="h6">Keys</h3>
-                        <table className="table table-striped align-middle mb-4">
+                        <div className="table-responsive mb-4">
+                          <table className="table table-striped align-middle mb-0">
                             <thead>
                               <tr>
                                 <th scope="col">Key</th>
@@ -252,8 +253,10 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                               ) : null}
                             </tbody>
                           </table>
+                        </div>
 
                         <h3 className="h6">Server-IDs</h3>
+                        <div className="table-responsive">
                           <table className="table table-striped align-middle mb-0">
                             <thead>
                               <tr>
@@ -281,6 +284,7 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                               ) : null}
                             </tbody>
                           </table>
+                        </div>
                         {host.serverIdHistorie.length > 1 ? (
                           <p className="small pl-text-warning mt-2 mb-0">
                             Mehrere Server-IDs bedeuten Hardwaretausch oder Neuinstallation – der Key muss
@@ -342,7 +346,7 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     icon: "bi-receipt",
                     inhalt: (
                       <div className="table-responsive">
-                        <table className="table table-striped align-middle mb-0">
+                        <table className="table table-striped align-middle mb-0 pl-karten-tabelle">
                           <thead>
                             <tr>
                               <th scope="col">Laufzeit</th>
@@ -355,21 +359,28 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                           </thead>
                           <tbody>
                             {host.laufzeiten.map((laufzeit) => {
+                              // Nach Abzug des Rabatts – das ist, was tatsächlich gezahlt wird (#037).
                               const einkauf = laufzeit.proxmoxPosition
-                                ? Number(laufzeit.proxmoxPosition.nettoBetrag)
+                                ? Number(laufzeit.proxmoxPosition.nettoBetrag) -
+                                  Number(laufzeit.proxmoxPosition.rabatt ?? 0)
                                 : null;
                               const verkauf = laufzeit.kundenPosition
                                 ? Number(laufzeit.kundenPosition.nettoBetrag)
                                 : null;
                               return (
                                 <tr key={laufzeit.id}>
-                                  <td>
+                                  <td className="pl-karten-kopf">
+                                    <Link
+                                      href={`/rechnungen/${laufzeit.id}`}
+                                      className="fw-semibold text-decoration-none"
+                                    >
                                       {formatDatum(laufzeit.start)} – {formatDatum(laufzeit.ende)}
+                                    </Link>
                                     {laufzeit.status === "VORSCHLAG" ? (
                                       <span className="badge pl-bg-info ms-2">Vorschlag</span>
                                     ) : null}
                                   </td>
-                                  <td>
+                                  <td data-label="Proxmox-Rechnung">
                                     <CopyableCode wert={laufzeit.proxmoxPosition?.rechnung.nummer ?? null} />
                                     <div>
                                       <EinkaufBadge
@@ -381,8 +392,8 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                                       />
                                     </div>
                                   </td>
-                                  <td>{formatEuro(einkauf)}</td>
-                                  <td>
+                                  <td data-label="Einkauf">{formatEuro(einkauf)}</td>
+                                  <td data-label="Kundenrechnung">
                                     <CopyableCode wert={laufzeit.kundenPosition?.rechnung.nummer ?? null} />
                                     <div>
                                       <VerkaufBadge
@@ -391,8 +402,8 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                                       />
                                     </div>
                                   </td>
-                                  <td>{formatEuro(verkauf)}</td>
-                                  <td>
+                                  <td data-label="Verkauf">{formatEuro(verkauf)}</td>
+                                  <td data-label="Marge">
                                     {einkauf !== null && verkauf !== null
                                       ? formatEuro(verkauf - einkauf)
                                       : "–"}
@@ -429,6 +440,7 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     titel: "Tokens",
                     icon: "bi-key-fill",
                     inhalt: (
+                      <div className="table-responsive">
                         <table className="table table-striped align-middle mb-0">
                           <thead>
                             <tr>
@@ -476,6 +488,7 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                             ) : null}
                           </tbody>
                         </table>
+                      </div>
                     ),
                   },
                 ]}

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

@@ -25,7 +25,10 @@ export default async function LaufzeitSeite({ params }: { params: Promise<{ id:
 
   const einkauf = laufzeit.proxmoxPosition?.rechnung ?? null;
   const verkauf = laufzeit.kundenPosition?.rechnung ?? null;
-  const einkaufBetrag = laufzeit.proxmoxPosition ? Number(laufzeit.proxmoxPosition.nettoBetrag) : null;
+  // Gerechnet wird mit dem Betrag nach Abzug des Rabatts – das ist, was tatsächlich gezahlt wird (#037).
+  const einkaufListenpreis = laufzeit.proxmoxPosition ? Number(laufzeit.proxmoxPosition.nettoBetrag) : null;
+  const einkaufRabatt = Number(laufzeit.proxmoxPosition?.rabatt ?? 0);
+  const einkaufBetrag = einkaufListenpreis === null ? null : einkaufListenpreis - einkaufRabatt;
   const verkaufBetrag = laufzeit.kundenPosition ? Number(laufzeit.kundenPosition.nettoBetrag) : null;
   const marge = einkaufBetrag !== null && verkaufBetrag !== null ? verkaufBetrag - einkaufBetrag : null;
 
@@ -109,7 +112,14 @@ export default async function LaufzeitSeite({ params }: { params: Promise<{ id:
                 <hr />
                 <dl className="row mb-0">
                   <dt className="col-5 fw-normal text-body-secondary">Einkauf netto</dt>
-                  <dd className="col-7">{formatEuro(einkaufBetrag)}</dd>
+                  <dd className="col-7">
+                    {formatEuro(einkaufBetrag)}
+                    {einkaufRabatt > 0 ? (
+                      <span className="small text-body-secondary d-block">
+                        {formatEuro(einkaufListenpreis)} − {formatEuro(einkaufRabatt)} Rabatt
+                      </span>
+                    ) : null}
+                  </dd>
                   <dt className="col-5 fw-normal text-body-secondary">Verkauf netto</dt>
                   <dd className="col-7">{formatEuro(verkaufBetrag)}</dd>
                   <dt className="col-5 fw-normal text-body-secondary">Marge</dt>
@@ -164,7 +174,7 @@ export default async function LaufzeitSeite({ params }: { params: Promise<{ id:
                     nummer: einkauf?.nummer ?? null,
                     datum: einkauf?.datum.toISOString() ?? null,
                     faelligAm: einkauf?.faelligAm?.toISOString() ?? faelligVorschlag,
-                    nettoBetrag: einkaufBetrag,
+                    nettoBetrag: einkaufListenpreis,
                     ustSatz: Number(einkauf?.ustSatz ?? vorgaben.steuersatz),
                     rabatt:
                       laufzeit.proxmoxPosition?.rabatt === null ||

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

@@ -204,7 +204,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                     <th scope="col" className="d-none d-md-table-cell">
                       Host
                     </th>
-                    <th scope="col" className="d-none d-lg-table-cell">
+                    <th scope="col" className="pl-spalte-laufzeit">
                       Laufzeit
                     </th>
                     <th scope="col">Proxmox-Rechnung</th>
@@ -254,7 +254,7 @@ export default async function RechnungenSeite({ searchParams }: { searchParams:
                             {zeile.hostname}
                           </Link>
                         </td>
-                        <td className="d-none d-lg-table-cell" data-label="Laufzeit">
+                        <td className="pl-spalte-laufzeit" data-label="Laufzeit">
                           <Link href={`/rechnungen/${zeile.id}`} className="text-decoration-none">
                             {formatDatum(zeile.start)} – {formatDatum(zeile.ende)}
                           </Link>

src/app/globals.css

@@ -395,6 +395,24 @@ body {
   width: 13rem;
 }
 
+/* Klapplisten in der Kopfzeile (Warnungen, Benutzermenü). */
+.pl-klappliste {
+  width: 22rem;
+  max-width: calc(100vw - 1rem);
+}
+
+/*
+ * Die Laufzeit-Spalte ist auf dem Telefon der einzige Weg zu den Rechnungsformularen, deshalb
+ * bleibt sie dort sichtbar. Zwischen 768 und 992 px ist die Tabelle am engsten – dort entfällt sie.
+ * Bewusst eine eigene Klasse statt der Bootstrap-Hilfsklassen: deren `display: … !important`
+ * überschreibt das Kartenlayout (#039).
+ */
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .pl-spalte-laufzeit {
+    display: none;
+  }
+}
+
 /* ---------- Mobil ---------- */
 
 @media (max-width: 575.98px) {
@@ -425,6 +443,30 @@ body {
  * Zellen ohne `data-label` stehen für sich – etwa eine Zeile mit Knöpfen.
  */
 @media (max-width: 767.98px) {
+  /*
+   * Auf dem Telefon ist die Klappliste breiter als das Fenster – der Browser zoomt dann die
+   * **ganze Seite** heraus, damit sie hineinpasst. Deshalb hier fest am Fenster ausrichten
+   * statt am Knopf (#038).
+   */
+  .pl-klappliste {
+    position: fixed;
+    top: 3.5rem;
+    right: 0.5rem;
+    left: 0.5rem;
+    width: auto;
+    max-width: none;
+    max-height: 70vh;
+    overflow-y: auto;
+  }
+
+  /*
+   * Lange Schlüssel und Server-IDs dürfen umbrechen. Sonst machen sie die Seite breiter als das
+   * Fenster – und der Browser zoomt die ganze Seite heraus, damit sie hineinpasst (#038).
+   */
+  .pl-mono {
+    overflow-wrap: anywhere;
+  }
+
   .pl-karten-tabelle,
   .pl-karten-tabelle tbody,
   .pl-karten-tabelle tr,

src/components/layout/Header.tsx

@@ -140,8 +140,7 @@ export function Header({
               ) : null}
             </button>
             <div
-              className={`dropdown-menu dropdown-menu-end shadow ${glockeOffen ? "show" : ""}`}
-              style={{ width: "22rem" }}
+              className={`dropdown-menu dropdown-menu-end shadow pl-klappliste ${glockeOffen ? "show" : ""}`}
             >
               <span className="dropdown-header">{alerts.length} offene Warnungen</span>
               <div className="dropdown-divider" />
@@ -206,7 +205,9 @@ export function Header({
               <i className="bi bi-person-circle" aria-hidden="true" />
               <span className="d-none d-sm-inline">{benutzer}</span>
             </button>
-            <div className={`dropdown-menu dropdown-menu-end shadow ${benutzerOffen ? "show" : ""}`}>
+            <div
+              className={`dropdown-menu dropdown-menu-end shadow pl-klappliste ${benutzerOffen ? "show" : ""}`}
+            >
               <span className="dropdown-header">
                 Angemeldet als {benutzer} · {ROLLEN_TEXT[rolle]}
               </span>