Merge branch 'phase/040-tags-sichtbar'

Gleichnamige Hosts in verschiedenen Kundennetzen liessen sich in der Liste
nicht auseinanderhalten. Schlagworte und Notizen gab es zwar schon, aber nur
im Reiter "Notizen und Tags" - und damit nutzlos zum Unterscheiden.

Jetzt stehen die Schlagworte als anklickbare Abzeichen in der Liste und oben
im Host-Detail, es gibt einen Filter dafuer, eine Notiz zeigt ein
Zettel-Symbol mit dem Text beim Ueberfahren, und beides wird mitdurchsucht -
auch von der globalen Suche.

Bewusst kein zweites Feld "Kommentar": Das haette dieselbe Angabe an zwei
Orten gehalten.

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

CHANGELOG.md

@@ -17,6 +17,32 @@ und dieses Projekt folgt [Semantic Versioning](https://semver.org/lang/de/).
 
 ### Sicherheit
 
+## [0.23.0] – 2026-10-03
+
+### Hinzugefügt
+- Schlagworte stehen jetzt in der Host-Liste und oben im Host-Detail; ein Klick darauf filtert die Liste (#040)
+- Filter „Alle Schlagworte“ in der Host-Liste (#040)
+- Eine vorhandene Notiz zeigt ein Zettel-Symbol in der Liste; der Text erscheint beim Überfahren und steht oben im Host-Detail (#040)
+- Suche und globale Suche finden Hosts auch über Schlagwort und Notiztext (#040)
+
+## [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 43 min
 
 | Issue | Zeit |
 |---|---|
@@ -43,6 +43,9 @@
 | #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 |
+| #040 Schlagworte sichtbar | 0 h 40 min |
 
 | Meilenstein | Zeit |
 |---|---|
@@ -65,7 +68,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.23.0
 
 ### Erledigt
 - Auftrag gelesen, Rückfragen gestellt
@@ -194,6 +197,17 @@
 - 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
+
+- Schlagworte und Notizen sichtbar gemacht (#040). Beides gab es längst – nur eben versteckt in einem Reiter, und damit nutzlos zum Unterscheiden gleichnamiger Hosts
+- Kein neues Feld gebaut: Ein zweites „Kommentar“ hätte dieselbe Angabe an zwei Orten gehalten
+
 ### 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/anleitung/README.md

@@ -192,6 +192,19 @@ Dashboard vergleicht sie mit den Hosts, die sich tatsächlich melden:
 Hier laufen auf `hv-rz5-pve-02` und `hv-rz5-pve-03` noch keine Agents – das Dashboard sagt es zweimal
 deutlich. Sobald dort installiert wird, schließen sich die Warnungen von selbst.
 
+### Gleichnamige Hosts auseinanderhalten
+
+In verschiedenen Kundennetzen heißen Hosts oft gleich – `hv-pve-01` gibt es womöglich dreimal. Dafür
+gibt es Schlagworte und Notizen, zu finden im Host-Detail unter *Notizen und Tags*:
+
+- **Schlagworte** erscheinen als Abzeichen unter dem Hostnamen in der Liste. Ein Klick darauf zeigt
+  alle Hosts mit diesem Schlagwort; dasselbe geht über die Auswahl *Alle Schlagworte*.
+- **Notizen** zeigen in der Liste ein Zettel-Symbol, dessen Text beim Überfahren erscheint. Im
+  Host-Detail steht die Notiz oben bei den Stammdaten.
+- Beides wird mitdurchsucht – auch von der globalen Suche (Strg+K).
+
+Bewährt haben sich kurze, wiederverwendbare Worte: `cluster`, `backup`, `produktiv`, `aussenstelle`.
+
 ---
 
 ## 5. Kunden und Standorte pflegen

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/040-schlagworte-sichtbar.md

@@ -0,0 +1,26 @@
+# #040 Schlagworte und Notizen sichtbar machen
+**Status:** erledigt
+**Meilenstein:** v0.23.0
+**Labels:** ui
+**Geschätzt:** 2 h   **Tatsächlich:** 0 h 40 min
+
+## Auslöser
+„Manche Hosts haben gleiche Namen.“ Zwei Hosts namens `hv-pve-01` bei verschiedenen Kunden sind in
+der Liste nur am Kunden auseinanderzuhalten – und wenn beide zum selben Kunden gehören, gar nicht.
+
+## Ausgangslage
+Schlagworte und Notizen gab es schon: im Host-Detail unter *Notizen und Tags*. Sie waren nur nirgends
+zu sehen, außer in diesem einen Reiter. Damit taugten sie nicht zum Unterscheiden.
+
+## Behebung
+- **Host-Liste:** Schlagworte als Abzeichen unter dem Namen, jedes anklickbar – ein Klick filtert die
+  Liste darauf. Eine vorhandene Notiz zeigt ein kleines Zettel-Symbol, dessen Text beim Überfahren erscheint.
+- **Filterleiste:** Auswahl „Alle Schlagworte“, die nur tatsächlich vergebene Worte anbietet.
+- **Host-Detail:** Schlagworte und Notiz stehen oben in der Host-Karte, nicht erst im Reiter.
+- **Suche:** Die Hostsuche und die globale Suche (Strg+K) finden jetzt auch über Schlagwort und
+  Notiztext; die Trefferzeile nennt die Schlagworte.
+- Sechs Tests, darunter zwei gleichnamige Hosts bei verschiedenen Kunden.
+
+## Entscheidung
+Keine neue Datenstruktur. Schlagworte und Notizen waren bereits vorhanden und wurden nur nicht
+gezeigt – ein zweites Feld „Kommentar“ hätte dieselbe Angabe an zwei Orten gehalten.

docs/issues/README.md

@@ -41,4 +41,7 @@ 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 |
+| [#040](040-schlagworte-sichtbar.md) | Schlagworte und Notizen sichtbar machen | erledigt | v0.23.0 | 2 h | 0 h 40 min |
+| | **Summe** | | | **165 h** | **21 h 43 min** |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "proxledger",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "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

@@ -108,6 +108,27 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                   <h2 className="h5 mt-2 mb-1">{host.hostname}</h2>
                   <div className="text-body-secondary small">{host.fqdn ?? "Kein FQDN gemeldet"}</div>
                   {meldetNicht ? <KeineMeldungBadge /> : null}
+
+                  {/* Schlagworte und Notiz stehen hier, nicht nur im Reiter – bei gleichnamigen
+                      Hosts ist das die Stelle, an der man sie braucht (#040). */}
+                  {host.tags.length > 0 ? (
+                    <div className="mt-2 d-flex flex-wrap gap-1 justify-content-center">
+                      {host.tags.map((tag) => (
+                        <Link
+                          key={tag.id}
+                          href={`/hosts?tag=${encodeURIComponent(tag.name)}`}
+                          className="badge pl-bg-neutral text-decoration-none"
+                        >
+                          {tag.name}
+                        </Link>
+                      ))}
+                    </div>
+                  ) : null}
+                  {host.notizen ? (
+                    <p className="small text-body-secondary mt-2 mb-0 text-start border-start ps-2">
+                      {host.notizen}
+                    </p>
+                  ) : null}
                 </div>
 
                 <Zeile bezeichnung="Kunde">
@@ -225,62 +246,66 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     inhalt: (
                       <>
                         <h3 className="h6">Keys</h3>
-                        <table className="table table-striped align-middle mb-4">
-                          <thead>
-                            <tr>
-                              <th scope="col">Key</th>
-                              <th scope="col">Erstmals gemeldet</th>
-                              <th scope="col">Zuletzt gemeldet</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {host.keyHistorie.map((eintrag) => (
-                              <tr key={eintrag.id}>
-                                <td>
-                                  <CopyableCode wert={eintrag.key} />
-                                </td>
-                                <td>{formatDatum(eintrag.ersteMeldung)}</td>
-                                <td>{formatDatum(eintrag.letzteMeldung)}</td>
-                              </tr>
-                            ))}
-                            {host.keyHistorie.length === 0 ? (
+                        <div className="table-responsive mb-4">
+                          <table className="table table-striped align-middle mb-0">
+                            <thead>
                               <tr>
-                                <td colSpan={3} className="text-body-secondary">
-                                  Noch kein Key gemeldet.
-                                </td>
+                                <th scope="col">Key</th>
+                                <th scope="col">Erstmals gemeldet</th>
+                                <th scope="col">Zuletzt gemeldet</th>
                               </tr>
-                            ) : null}
-                          </tbody>
-                        </table>
+                            </thead>
+                            <tbody>
+                              {host.keyHistorie.map((eintrag) => (
+                                <tr key={eintrag.id}>
+                                  <td>
+                                    <CopyableCode wert={eintrag.key} />
+                                  </td>
+                                  <td>{formatDatum(eintrag.ersteMeldung)}</td>
+                                  <td>{formatDatum(eintrag.letzteMeldung)}</td>
+                                </tr>
+                              ))}
+                              {host.keyHistorie.length === 0 ? (
+                                <tr>
+                                  <td colSpan={3} className="text-body-secondary">
+                                    Noch kein Key gemeldet.
+                                  </td>
+                                </tr>
+                              ) : null}
+                            </tbody>
+                          </table>
+                        </div>
 
                         <h3 className="h6">Server-IDs</h3>
-                        <table className="table table-striped align-middle mb-0">
-                          <thead>
-                            <tr>
-                              <th scope="col">Server-ID</th>
-                              <th scope="col">Erstmals gemeldet</th>
-                              <th scope="col">Zuletzt gemeldet</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {host.serverIdHistorie.map((eintrag) => (
-                              <tr key={eintrag.id}>
-                                <td>
-                                  <CopyableCode wert={eintrag.serverId} />
-                                </td>
-                                <td>{formatDatum(eintrag.ersteMeldung)}</td>
-                                <td>{formatDatum(eintrag.letzteMeldung)}</td>
-                              </tr>
-                            ))}
-                            {host.serverIdHistorie.length === 0 ? (
+                        <div className="table-responsive">
+                          <table className="table table-striped align-middle mb-0">
+                            <thead>
                               <tr>
-                                <td colSpan={3} className="text-body-secondary">
-                                  Noch keine Server-ID gemeldet.
-                                </td>
+                                <th scope="col">Server-ID</th>
+                                <th scope="col">Erstmals gemeldet</th>
+                                <th scope="col">Zuletzt gemeldet</th>
                               </tr>
-                            ) : null}
-                          </tbody>
-                        </table>
+                            </thead>
+                            <tbody>
+                              {host.serverIdHistorie.map((eintrag) => (
+                                <tr key={eintrag.id}>
+                                  <td>
+                                    <CopyableCode wert={eintrag.serverId} />
+                                  </td>
+                                  <td>{formatDatum(eintrag.ersteMeldung)}</td>
+                                  <td>{formatDatum(eintrag.letzteMeldung)}</td>
+                                </tr>
+                              ))}
+                              {host.serverIdHistorie.length === 0 ? (
+                                <tr>
+                                  <td colSpan={3} className="text-body-secondary">
+                                    Noch keine Server-ID gemeldet.
+                                  </td>
+                                </tr>
+                              ) : 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 +367,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 +380,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>
-                                    {formatDatum(laufzeit.start)} – {formatDatum(laufzeit.ende)}
+                                  <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 +413,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 +423,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,53 +461,55 @@ export default async function HostDetailSeite({ params }: { params: Promise<{ id
                     titel: "Tokens",
                     icon: "bi-key-fill",
                     inhalt: (
-                      <table className="table table-striped align-middle mb-0">
-                        <thead>
-                          <tr>
-                            <th scope="col">Anfang</th>
-                            <th scope="col">Erstellt</th>
-                            <th scope="col">Zuletzt benutzt</th>
-                            <th scope="col">Zustand</th>
-                            <th scope="col" className="text-end">
-                              Aktion
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {host.tokens.map((token) => (
-                            <tr key={token.id}>
-                              <td className="pl-mono">{token.praefix}…</td>
-                              <td>{formatDatum(token.erstelltAm)}</td>
-                              <td>{formatDatumZeit(token.letzteNutzungAm)}</td>
-                              <td>
-                                {token.widerrufenAm ? (
-                                  <Badge farbe="neutral">Widerrufen</Badge>
-                                ) : (
-                                  <Badge farbe="success">Aktiv</Badge>
-                                )}
-                              </td>
-                              <td className="text-end">
-                                {token.widerrufenAm ? null : (
-                                  <form action={hostTokenWiderrufen}>
-                                    <input type="hidden" name="id" value={token.id} />
-                                    <input type="hidden" name="hostId" value={host.id} />
-                                    <button type="submit" className="btn btn-sm btn-outline-danger">
-                                      Widerrufen
-                                    </button>
-                                  </form>
-                                )}
-                              </td>
-                            </tr>
-                          ))}
-                          {host.tokens.length === 0 ? (
+                      <div className="table-responsive">
+                        <table className="table table-striped align-middle mb-0">
+                          <thead>
                             <tr>
-                              <td colSpan={5} className="text-body-secondary">
-                                Kein Token vorhanden – dieser Host stammt aus den Demo-Daten.
-                              </td>
+                              <th scope="col">Anfang</th>
+                              <th scope="col">Erstellt</th>
+                              <th scope="col">Zuletzt benutzt</th>
+                              <th scope="col">Zustand</th>
+                              <th scope="col" className="text-end">
+                                Aktion
+                              </th>
                             </tr>
-                          ) : null}
-                        </tbody>
-                      </table>
+                          </thead>
+                          <tbody>
+                            {host.tokens.map((token) => (
+                              <tr key={token.id}>
+                                <td className="pl-mono">{token.praefix}…</td>
+                                <td>{formatDatum(token.erstelltAm)}</td>
+                                <td>{formatDatumZeit(token.letzteNutzungAm)}</td>
+                                <td>
+                                  {token.widerrufenAm ? (
+                                    <Badge farbe="neutral">Widerrufen</Badge>
+                                  ) : (
+                                    <Badge farbe="success">Aktiv</Badge>
+                                  )}
+                                </td>
+                                <td className="text-end">
+                                  {token.widerrufenAm ? null : (
+                                    <form action={hostTokenWiderrufen}>
+                                      <input type="hidden" name="id" value={token.id} />
+                                      <input type="hidden" name="hostId" value={host.id} />
+                                      <button type="submit" className="btn btn-sm btn-outline-danger">
+                                        Widerrufen
+                                      </button>
+                                    </form>
+                                  )}
+                                </td>
+                              </tr>
+                            ))}
+                            {host.tokens.length === 0 ? (
+                              <tr>
+                                <td colSpan={5} className="text-body-secondary">
+                                  Kein Token vorhanden – dieser Host stammt aus den Demo-Daten.
+                                </td>
+                              </tr>
+                            ) : null}
+                          </tbody>
+                        </table>
+                      </div>
                     ),
                   },
                 ]}

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

@@ -68,6 +68,7 @@ export default async function HostsSeite({ searchParams }: { searchParams: SuchP
   const filter: HostFilter = {
     q: einzeln(roh.q),
     kunde: einzeln(roh.kunde),
+    tag: einzeln(roh.tag),
     status: einzeln(roh.status),
     produkt: einzeln(roh.produkt),
     ablauf: einzeln(roh.ablauf) as HostFilter["ablauf"],
@@ -85,6 +86,7 @@ export default async function HostsSeite({ searchParams }: { searchParams: SuchP
   const basis: Record<string, string | undefined> = {
     q: filter.q,
     kunde: filter.kunde,
+    tag: filter.tag,
     status: filter.status,
     produkt: filter.produkt,
     ablauf: filter.ablauf,
@@ -117,7 +119,7 @@ export default async function HostsSeite({ searchParams }: { searchParams: SuchP
               </>
             }
           >
-            <HostFilterLeiste kunden={optionen.kunden} werte={basis} />
+            <HostFilterLeiste kunden={optionen.kunden} tags={optionen.tags} werte={basis} />
 
             <div className="table-responsive">
               <table className="table table-striped align-middle">
@@ -152,7 +154,28 @@ export default async function HostsSeite({ searchParams }: { searchParams: SuchP
                           {host.hostname}
                         </Link>
                         {host.meldetNicht ? <KeineMeldungBadge /> : null}
+                        {host.notizen ? (
+                          // Gerade bei gleichnamigen Hosts hilft die Notiz beim Auseinanderhalten (#040).
+                          <i
+                            className="bi bi-sticky ms-2 text-body-secondary"
+                            title={host.notizen}
+                            aria-label={`Notiz: ${host.notizen}`}
+                          />
+                        ) : null}
                         <div className="small text-body-secondary">{host.ips.join(", ") || "–"}</div>
+                        {host.tags.length > 0 ? (
+                          <div className="mt-1 d-flex flex-wrap gap-1">
+                            {host.tags.map((tag) => (
+                              <Link
+                                key={tag.id}
+                                href={`/hosts?tag=${encodeURIComponent(tag.name)}`}
+                                className="badge pl-bg-neutral text-decoration-none"
+                              >
+                                {tag.name}
+                              </Link>
+                            ))}
+                          </div>
+                        ) : null}
                       </td>
                       <td>
                         {host.kunde ? (

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/hosts/HostFilterLeiste.tsx

@@ -9,9 +9,11 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
  */
 export function HostFilterLeiste({
   kunden,
+  tags,
   werte,
 }: {
   kunden: { id: string; name: string }[];
+  tags: string[];
   werte: Record<string, string | undefined>;
 }) {
   const router = useRouter();
@@ -26,7 +28,7 @@ export function HostFilterLeiste({
     router.push(`${pathname}?${neu.toString()}`);
   }
 
-  const aktiveFilter = ["kunde", "status", "produkt", "ablauf", "rechnung", "q"].filter(
+  const aktiveFilter = ["kunde", "tag", "status", "produkt", "ablauf", "rechnung", "q"].filter(
     (schluessel) => werte[schluessel],
   ).length;
 
@@ -76,6 +78,27 @@ export function HostFilterLeiste({
         </select>
       </div>
 
+      {tags.length > 0 ? (
+        <div className="col-6 col-md-2">
+          <label className="visually-hidden" htmlFor="tag">
+            Schlagwort
+          </label>
+          <select
+            className="form-select"
+            id="tag"
+            value={werte.tag ?? ""}
+            onChange={(e) => setzen("tag", e.target.value)}
+          >
+            <option value="">Alle Schlagworte</option>
+            {tags.map((tag) => (
+              <option key={tag} value={tag}>
+                {tag}
+              </option>
+            ))}
+          </select>
+        </div>
+      ) : null}
+
       <div className="col-6 col-md-2">
         <select
           className="form-select"

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>

src/server/queries/hostliste.ts

@@ -6,6 +6,8 @@ import { sichtbarerKunde } from "@/server/auth/sitzungspflicht";
 export interface HostFilter {
   q?: string;
   kunde?: string;
+  /** Schlagwort, nach dem gefiltert wird (#040). */
+  tag?: string;
   status?: string;
   produkt?: string;
   ablauf?: "30" | "14" | "abgelaufen";
@@ -20,6 +22,10 @@ export const SEITENGROESSE = 25;
 function bedingung(filter: HostFilter, jetzt: Date): Prisma.HostWhereInput {
   const und: Prisma.HostWhereInput[] = [];
 
+  if (filter.tag) {
+    und.push({ tags: { some: { name: filter.tag } } });
+  }
+
   if (filter.q && filter.q.trim().length > 0) {
     const suche = filter.q.trim();
     und.push({
@@ -30,6 +36,8 @@ function bedingung(filter: HostFilter, jetzt: Date): Prisma.HostWhereInput {
         { subKey: { contains: suche, mode: "insensitive" } },
         { ips: { has: suche } },
         { kunde: { name: { contains: suche, mode: "insensitive" } } },
+        { notizen: { contains: suche, mode: "insensitive" } },
+        { tags: { some: { name: { contains: suche, mode: "insensitive" } } } },
         // Suche nach einer Proxmox-Rechnungsnummer führt ebenfalls zum Host.
         {
           laufzeiten: {
@@ -113,6 +121,7 @@ export async function hostListe(filter: HostFilter, jetzt: Date = new Date()) {
       include: {
         kunde: { select: { id: true, name: true } },
         standort: { select: { name: true } },
+        tags: { orderBy: { name: "asc" }, select: { id: true, name: true } },
       },
     }),
   ]);
@@ -181,5 +190,12 @@ export async function filterOptionen() {
     orderBy: { name: "asc" },
     select: { id: true, name: true },
   });
-  return { kunden };
+
+  // Nur Schlagworte, die auch an einem sichtbaren Host hängen – sonst stünden leere zur Auswahl.
+  const tags = await prisma.tag.findMany({
+    where: { hosts: { some: kundeId ? { kundeId } : {} } },
+    orderBy: { name: "asc" },
+    select: { name: true },
+  });
+  return { kunden, tags: tags.map((tag) => tag.name) };
 }

src/server/queries/hosts.ts

@@ -103,7 +103,9 @@ export async function suchIndex() {
         subKey: true,
         ips: true,
         produkt: true,
+        notizen: true,
         kunde: { select: { name: true } },
+        tags: { select: { name: true } },
       },
     }),
     prisma.kunde.findMany({
@@ -128,9 +130,17 @@ export async function suchIndex() {
       titel: host.hostname,
       untertitel: `${host.produkt} · ${host.kunde?.name ?? "Nicht zugeordnet"}${
         host.subKey ? ` · ${host.subKey}` : ""
-      }`,
+      }${host.tags.length > 0 ? ` · ${host.tags.map((tag) => tag.name).join(", ")}` : ""}`,
       href: `/hosts/${host.id}`,
-      begriffe: [host.hostname, host.fqdn, host.serverId, host.subKey, ...host.ips]
+      begriffe: [
+        host.hostname,
+        host.fqdn,
+        host.serverId,
+        host.subKey,
+        host.notizen,
+        ...host.tags.map((tag) => tag.name),
+        ...host.ips,
+      ]
         .filter((w): w is string => Boolean(w))
         .map((w) => w.toLowerCase()),
     })),

tests/host-tags.test.ts

@@ -0,0 +1,89 @@
+import { afterAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { datenbankLeeren, datenbankVerfuegbar, testPrisma } from "./helpers/db";
+
+/** Schlagworte und Notizen in Liste, Filter und Suche (#040). */
+vi.mock("@/server/auth/sitzungspflicht", () => ({
+  sichtbarerKunde: async () => null,
+  darfEinkaufSehen: async () => true,
+  angemeldet: async () => null,
+  sitzungErforderlich: async () => {
+    throw new Error("in diesem Test nicht vorgesehen");
+  },
+}));
+
+const { hostListe, filterOptionen } = await import("@/server/queries/hostliste");
+const { suchIndex } = await import("@/server/queries/hosts");
+
+async function hosts() {
+  // Zwei Hosts mit demselben Namen bei verschiedenen Kunden – genau der Fall aus der Praxis.
+  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" } }),
+  ]);
+
+  await testPrisma.host.create({
+    data: {
+      agentId: "a-1",
+      hostname: "hv-pve-01",
+      produkt: "PVE",
+      kundeId: kundeA.id,
+      notizen: "Steht im Serverraum links",
+      tags: { connectOrCreate: [{ where: { name: "rechenzentrum" }, create: { name: "rechenzentrum" } }] },
+    },
+  });
+  await testPrisma.host.create({
+    data: {
+      agentId: "a-2",
+      hostname: "hv-pve-01",
+      produkt: "PVE",
+      kundeId: kundeB.id,
+      tags: { connectOrCreate: [{ where: { name: "aussenstelle" }, create: { name: "aussenstelle" } }] },
+    },
+  });
+}
+
+describe.runIf(datenbankVerfuegbar)("Schlagworte und Notizen", () => {
+  beforeEach(async () => {
+    await datenbankLeeren();
+    await hosts();
+  });
+
+  afterAll(async () => {
+    await testPrisma.$disconnect();
+  });
+
+  it("liefert die Schlagworte zu jedem Host mit", async () => {
+    const liste = await hostListe({});
+    const namen = liste.hosts.flatMap((host) => host.tags.map((tag) => tag.name)).sort();
+    expect(namen).toEqual(["aussenstelle", "rechenzentrum"]);
+  });
+
+  it("filtert nach Schlagwort", async () => {
+    const liste = await hostListe({ tag: "aussenstelle" });
+    expect(liste.gesamt).toBe(1);
+    expect(liste.hosts[0].kunde?.name).toBe("Kunde B");
+  });
+
+  it("findet einen Host über sein Schlagwort", async () => {
+    const liste = await hostListe({ q: "rechenzentrum" });
+    expect(liste.gesamt).toBe(1);
+    expect(liste.hosts[0].kunde?.name).toBe("Kunde A");
+  });
+
+  it("findet einen Host über seine Notiz", async () => {
+    const liste = await hostListe({ q: "serverraum" });
+    expect(liste.gesamt).toBe(1);
+  });
+
+  it("bietet nur vergebene Schlagworte zur Auswahl an", async () => {
+    const { tags } = await filterOptionen();
+    expect(tags).toEqual(["aussenstelle", "rechenzentrum"]);
+  });
+
+  it("nimmt Schlagworte und Notizen in die globale Suche auf", async () => {
+    const eintraege = await suchIndex();
+    const treffer = eintraege.filter((eintrag) => eintrag.begriffe.includes("rechenzentrum"));
+    expect(treffer).toHaveLength(1);
+    expect(treffer[0].untertitel).toContain("rechenzentrum");
+  });
+});