fix(ui): Ueberbreite auf dem Handy beseitigen (#038)

Beim Oeffnen der Warnungen und auf der Host-Detailansicht zoomte der Browser
die ganze Seite heraus. Ursache war jeweils ein Element breiter als das
Fenster: die 22 rem breite Klappliste, drei Tabellen ohne table-responsive
und eine 32-stellige Server-ID ohne Umbruch.

Klapplisten richten sich auf dem Telefon jetzt am Fenster aus statt am Knopf,
die Tabellen bekommen ihre Huelle, lange IDs duerfen umbrechen. Geprueft mit
einer neuen Aufnahme in Telefonbreite (--mobil).

Dabei ein eigener Fehler aus #037 aufgefallen: Die Laufzeit-Detailseite
rechnete weiter mit dem Listenpreis statt mit dem Betrag nach Rabatt - Marge
und Vorschlag fuer die Kundenrechnung waren um den Rabatt zu hoch.

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

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 ||