Coverbilder (bild_url) + responsives Layout für Mobil/Tablet

Teil 1 — Coverbilder: - Migration 0004_bild_url (neuheiten), 0002_bild_url (planung, archiv mit beiden Spiegel-Tabellen); nullable VARCHAR(500), SQLite↔Postgres portabel, bestehende Zeilen bleiben erhalten - BGG-Client extrahiert Cover aus der Thing-Antwort (bevorzugt <image>, sonst <thumbnail>; protokoll-relative URLs → https) - Sync-Upsert pflegt bild_url beim Update; fehlendes Bild löscht keines - Web-Quellen übernehmen img-URLs aus den Listenelementen (src/data-src, relative Pfade gegen die Seiten-URL aufgelöst); SPIEL-Essen nutzt das BILDER-Feld des JSON-Endpunkts - Verschiebung Neuheiten→Planung und Archivierung/Wiederherstellen schreiben bild_url mit - Anzeige: kleine Vorschaubilder (40x56) in den Listen, groß (max 200px) in Planung-Bearbeiten/Prüf-Dialog; Platzhalter-Div ohne Bild; Hotlinking mit loading=lazy + decoding=async Teil 2 — Responsives Layout: - Basislayout: Burger-Menü (Alpine.js) auf Mobil, Desktop-Leiste ab md: - Listen kollabieren <768px zu Karten-Ansichten (Cover links, Titel + Metadaten rechts, Status-Badge oben); Desktop behält Tabellenform - Touch-Ziele >= 44px auf Mobil, Formulare vollbreit mit Labels oben - Sync-Übersicht/Audit-Log bleiben horizontal scrollbare Tabellen Tests: 15 neue Fälle (tests/test_covers.py) — Migration inkl. Daten-Erhalt, BGG-Parsing gemockt, Quellen-Übernahme, Template-Render; 316 Tests grün. README aktualisiert.
2026-08-24 16:54:56 +00:00
parent 20b84a8e1a
commit 96d6af8163
33 changed files with 1134 additions and 69 deletions
--- a/README.md
+++ b/README.md
@@ -96,6 +96,11 @@ Fake-BGG-Client, Prüfprotokoll, Prüfseite) und **planung** (beide Eintragswege
 mit Stub-gemockter dedup-/Benachrichtigungs-/Audit-API, Verlags-Auswahl-
 Dialog, Statuswechsel, Bearbeiten/Löschen, Rechte pro Rolle) plus ein
 Integrationstest mit den echten Plugins (In-App-Nachricht + Audit-Eintrag).
+Dazu die **Coverbilder-Erweiterung**: Migrationen für `bild_url` in allen
+vier Tabellen inkl. Daten-Erhalt beim ALTER TABLE, BGG-Bildextraktion
+(`<image>` bevorzugt, `<thumbnail>` als Rückfallebene, gemockte Antworten),
+Bildübernahme aus Web-Quellen, Update-Pflege des Bildes im Sync-Upsert sowie
+Template-Darstellung (`loading="lazy"`/`decoding="async"` bzw. Platzhalter).
 Dazu das **archiv**-Plugin: 12-Monats-Regel mit eingefrorener Uhr (Grenzfälle
 „genau 12 Monate“, Schaltjahr/29. Februar, UTC-Konsistenz bei
 Zeitzonen-Unterschieden), Job-Lauf mit Audit-Einträgen, Wiederherstellen
@@ -270,7 +275,8 @@ manuelle Synchronisation für die Redaktion, deutsche sortier-/filterbare Liste.

 ### Datentabelle

-Eigene Migration `0001_neuheiten_tabelle`, Tabelle `neuheiten`
+Eigene Migrationen `0001_neuheiten_tabelle`, `0002_bgg_id_nullable`,
+`0003_quellen_status` und `0004_bild_url`; Tabelle `neuheiten`
 (SQLite ↔ Postgres portabel):

 | Spalte | Inhalt |
@@ -279,6 +285,7 @@ Eigene Migration `0001_neuheiten_tabelle`, Tabelle `neuheiten`
 | `verlag` / `autor` | Verlag bzw. Autor(en), kommagetrennt |
 | `erscheinungsjahr` | Erscheinungsjahr — BGG liefert nur das Jahr, kein genaues Datum |
 | `bgg_id` | BoardGameGeek-ID, eindeutig → Merge-Kriterium des Syncs |
+| `bild_url` | URL des Coverbildes (nullable; BGG-Image/-Thumbnail oder Bild der Web-Quelle) |
 | `status` | `neuheit` (spätere Plugins: Planung/Archiv) |
 | `quelle` | Datenquelle (`boardgamegeek`) |
 | `erstellt_am` / `aktualisiert_am` | Zeitstempel |
@@ -288,6 +295,14 @@ Eigene Migration `0001_neuheiten_tabelle`, Tabelle `neuheiten`
 Pro Suchbegriff: `/search?type=boardgame&query=…` → IDs sammeln →
 `/thing?id=…&type=boardgame` in Batches à 20 IDs.

+**Coverbilder:** Aus der Thing-Antwort wird die Bild-URL extrahiert
+(bevorzugt das große `<image>`, sonst das kleinere `<thumbnail>`;
+protokoll-relative URLs werden auf https normalisiert) und in
+`bild_url` gespeichert. Beim Update bestehender Einträge wird das Bild
+mitgepflegt; fehlt es in einer Antwort, bleibt ein bereits gespeichertes
+Bild erhalten. Bilder werden direkt von BGG eingebettet (Hotlinking,
+kein Download) — im UI immer mit `loading="lazy"` und `decoding="async"`.
+
 - **Rate-Limit:** mindestens 1 Sekunde zwischen zwei Requests.
 - **Retry mit Backoff:** exponentielles Zurückhalten bei 5xx, 429 und
  Netzwerkfehlern; HTTP 202 (BGG-Warteschlange) wird gemäß `Retry-After`
@@ -344,7 +359,9 @@ Neben BGG crawlt das Plugin zusätzlich redaktionell gepflegte Web-Quellen
 Adapter in `plugins/neuheiten/quellen/` — mit Rate-Limit (1 Request/s),
 Retry/Backoff, konditionalen Requests (ETag/304), Fehler-Isolation pro Quelle
 und Duplikat-Gate gegen die BGG-Liste. Der Crawler arbeitet standardmäßig rein
-regelbasiert.
+regelbasiert. Liefert eine Quelle im Listenelement ein Bild (`img` mit `src`
+bzw. `data-src`), wird dessen URL in `bild_url` übernommen — sonst bleibt das
+Feld leer.

 Optional kann eine **LLM-Hilfsstufe** (`plugins/neuheiten/quellen/ki_hilfe.py`)
 zugeschaltet werden — konsistent zur Dedup-KI über die
@@ -452,12 +469,14 @@ laufen automatisch durch die dedup-Prüfung.

 ### Datentabelle

-Eigene Migration `0001_planungsliste`, Tabelle `planungsliste`:
+Eigene Migrationen `0001_planungsliste` und `0002_bild_url`,
+Tabelle `planungsliste`:

 | Spalte | Inhalt |
 |--------|--------|
 | `titel` / `verlag` / `autor` | Spieldaten |
 | `bgg_id` | BoardGameGeek-ID (Match-Kriterium der dedup-Prüfung) |
+| `bild_url` | URL des Coverbildes (nullable; wird beim Verschieben aus den Neuheiten übernommen) |
 | `ausgabe` | Magazin-Ausgabe, z. B. „3/2025“ (mehrere parallel möglich) |
 | `rezensent_id` | Zuordnung (FK auf die Benutzer-Tabelle des Kerns) |
 | `status` | `offen` → `in_bearbeitung` → `abgeschlossen` |
@@ -501,9 +520,10 @@ unverändert zurück in die aktive Liste verschieben.

 ### Datentabellen

-Eigene Migration `0001_archiv_tabellen` mit zwei Spiegel-Tabellen
-(SQLite ↔ Postgres portabel, ohne Fremdschlüssel — archivierte Zeilen
-überleben auch das Löschen eines Benutzers):
+Eigene Migrationen `0001_archiv_tabellen` und `0002_bild_url`
+(Spiegel-Tabellen, SQLite ↔ Postgres portabel, ohne Fremdschlüssel —
+archivierte Zeilen überleben auch das Löschen eines Benutzers;
+`bild_url` wird mit archiviert und beim Wiederherstellen zurückgeschrieben):

 | Tabelle | Spiegel von | Besondere Spalten |
 |---------|-------------|-------------------|
@@ -639,6 +659,31 @@ Docker/Podman Compose ist vorgesehen (Henry-Lab, danach Kundenhardware).
 Für Postgres genügt `SPIELE_DATABASE_URL`; die Migrationen sind portabel
 geschrieben.

+## Oberfläche: Coverbilder & responsives Layout
+
+**Coverbilder:** Die Listen (Neuheiten, Planung, Archiv) zeigen je Eintrag
+eine kleine Cover-Vorschau (40×56 px, `loading="lazy"`, `decoding="async"`,
+Alt-Text = Spieltitel); die Detail-/Prüf-Ansichten der Planung zeigen das
+Cover großformatig (max. 200 px Breite). Fehlt ein Bild, erscheint ein
+dezenter CSS-Platzhalter mit Spielicon-Zeichen. Eingebettet wird per
+Hotlink direkt von BGG bzw. der jeweiligen Quelle — es werden keine Bilder
+heruntergeladen oder lokal gespeichert.
+
+**Responsive Verhalten:** Das Basis-Layout ist mobil-first:
+
+- Navigation: Ab Tablet (`md:`) horizontale Leiste; auf Mobilgeräten ein
+  Burger-Menü (Alpine.js) mit vollhöhen Touch-Zielen.
+- Listen: Auf schmalen Screens (<768 px) kollabieren Neuheiten, Planung und
+  Archiv zu Karten-Ansichten — Cover links, Titel + Metadaten rechts,
+  Status-Badge oben. Desktop behält die Tabellenform.
+- Formulare (Planung, Benutzerverwaltung, Einstellungen): vollbreite
+  Eingabefelder mit Labels oberhalb auf Mobil.
+- Sync-Übersicht und Audit-Log bleiben Tabellen und scrollen horizontal
+  (`overflow-x-auto`).
+- Buttons/Links haben auf Mobil mindestens 44 px Höhe (Touch-Ziel).
+
+Getestet gegen 375 px (Smartphone), 768 px (Tablet) und Desktop.
+
 ## Projekt-Fortschritt

 > Diese Tabelle ist der Live-Status. Sie wird bei jedem Push aktualisiert.
@@ -654,7 +699,7 @@ geschrieben.
 | 7 | Plugin `archiv` (12-Monats-Autopilot, Wiederherstellen, täglicher Job) | ✅ fertig |
 | 8 | Plugin `erinnerung` (Redaktionsschluss pro Ausgabe, 4-Wochen-Erinnerung, Tages-Job) | ✅ fertig |
 | 9 | Plugin `export` (CSV + PDF via WeasyPrint) | ✅ fertig |
-| 10 | Integrationstests über alle Plugins | ✅ 217 Tests grün |
+| 10 | Integrationstests über alle Plugins | ✅ 316 Tests grün |
 | 11 | Deployment auf swen.henry.insight-it.de (Compose + Traefik, Live-Check) | ✅ live |

 Legende: ✅ fertig · 🔄 in Arbeit · ⏳ offen · ⚠️ fertig mit offenen Punkten
--- a/plugins/archiv/init.py
+++ b/plugins/archiv/init.py
@@ -71,6 +71,33 @@ def _tabelle_anlegen(conn) -> None:
    ArchivPlanung.__table__.create(conn, checkfirst=True)


+def _spalte_existiert(conn, tabelle: str, spalte: str) -> bool:
+    """Dialekt-agnostische Spaltenprüfung (PRAGMA bzw. information_schema)."""
+    if conn.dialect.name == "sqlite":
+        info = conn.exec_driver_sql(f"PRAGMA table_info({tabelle})").fetchall()
+        return any(zeile[1] == spalte for zeile in info)
+    existiert = conn.exec_driver_sql(
+        "SELECT column_name FROM information_schema.columns "
+        "WHERE table_name = :tabelle AND column_name = :spalte",
+        {"tabelle": tabelle, "spalte": spalte},
+    ).scalar()
+    return existiert is not None
+
+
+def _bild_url_spalten(conn) -> None:
+    """Migration 0002: Spalte bild_url in beiden Spiegel-Tabellen.
+
+    `ALTER TABLE … ADD COLUMN` mit nullable VARCHAR ohne Default ist
+    SQLite- und Postgres-portabel und erhält bestehende Zeilen.
+    """
+    for tabelle in ("archiv_neuheiten", "archiv_planung"):
+        if _spalte_existiert(conn, tabelle, "bild_url"):
+            continue
+        conn.exec_driver_sql(
+            f"ALTER TABLE {tabelle} ADD COLUMN bild_url VARCHAR(500)"
+        )
+
+
 class ArchivPlugin(BasePlugin):
    name = "archiv"
    title = "Archiv"
@@ -89,7 +116,10 @@ class ArchivPlugin(BasePlugin):
    # ---------- Plugin-Vertrag ----------

    def migrations(self) -> list[Migration]:
-        return [Migration(version="0001_archiv_tabellen", up=_tabelle_anlegen)]
+        return [
+            Migration(version="0001_archiv_tabellen", up=_tabelle_anlegen),
+            Migration(version="0002_bild_url", up=_bild_url_spalten),
+        ]

    def navigation(self) -> list[NavEntry]:
        return [NavEntry(label=self.title, url="/archiv")]
--- a/plugins/archiv/models.py
+++ b/plugins/archiv/models.py
@@ -63,6 +63,7 @@ class ArchivNeuheit(_ArchivMeta, Base):
    autor: Mapped[str | None] = mapped_column(String(300))
    erscheinungsjahr: Mapped[int | None] = mapped_column(Integer)
    bgg_id: Mapped[int | None] = mapped_column(Integer)
+    bild_url: Mapped[str | None] = mapped_column(String(500))
    status: Mapped[str] = mapped_column(String(50), default="neuheit")
    quelle: Mapped[str] = mapped_column(String(100), default="boardgamegeek")
    erstellt_am: Mapped[datetime | None] = mapped_column(DateTime)
@@ -83,6 +84,7 @@ class ArchivPlanung(_ArchivMeta, Base):
    verlag: Mapped[str | None] = mapped_column(String(300))
    autor: Mapped[str | None] = mapped_column(String(300))
    bgg_id: Mapped[int | None] = mapped_column(Integer)
+    bild_url: Mapped[str | None] = mapped_column(String(500))
    ausgabe: Mapped[str] = mapped_column(String(100), default="")
    #: Kein FK — Archiv-Zeilen überleben das Löschen des Benutzers.
    rezensent_id: Mapped[int | None] = mapped_column(Integer)
--- a/plugins/archiv/service.py
+++ b/plugins/archiv/service.py
@@ -201,6 +201,7 @@ class ArchivService:
                            autor=zeile["autor"],
                            erscheinungsjahr=zeile["erscheinungsjahr"],
                            bgg_id=zeile["bgg_id"],
+                            bild_url=zeile["bild_url"],
                            status=zeile["status"],
                            quelle=zeile["quelle"],
                            erstellt_am=zeile["erstellt_am"],
@@ -250,6 +251,7 @@ class ArchivService:
                            verlag=zeile["verlag"],
                            autor=zeile["autor"],
                            bgg_id=zeile["bgg_id"],
+                            bild_url=zeile["bild_url"],
                            ausgabe=zeile["ausgabe"],
                            rezensent_id=zeile["rezensent_id"],
                            status=zeile["status"],
@@ -305,6 +307,7 @@ class ArchivService:
                    "verlag": a.verlag,
                    "autor": a.autor,
                    "bgg_id": a.bgg_id,
+                    "bild_url": a.bild_url,
                    "jahr": a.erscheinungsjahr,
                    "ausgabe": "",
                    "status": a.status,
@@ -328,6 +331,7 @@ class ArchivService:
                    "verlag": a.verlag,
                    "autor": a.autor,
                    "bgg_id": a.bgg_id,
+                    "bild_url": a.bild_url,
                    "jahr": None,
                    "ausgabe": a.ausgabe,
                    "status": a.status,
@@ -409,6 +413,7 @@ class ArchivService:
                autor=archiv.autor,
                erscheinungsjahr=archiv.erscheinungsjahr,
                bgg_id=archiv.bgg_id,
+                bild_url=archiv.bild_url,
                status=archiv.status,
                quelle=archiv.quelle,
                erstellt_am=archiv.erstellt_am,
@@ -464,6 +469,7 @@ class ArchivService:
                verlag=archiv.verlag,
                autor=archiv.autor,
                bgg_id=archiv.bgg_id,
+                bild_url=archiv.bild_url,
                ausgabe=archiv.ausgabe,
                rezensent_id=rezensent_id,
                status=archiv.status,
--- a/plugins/archiv/templates/archiv/_cover.html
+++ b/plugins/archiv/templates/archiv/_cover.html
@@ -0,0 +1,24 @@
+{# Coverbild-Vorschau des Archiv-Plugins.
+   Erwartete Variablen: cover_bild (URL oder None), cover_titel,
+   cover_gross (optional: true für großformatige Ansichten).
+   Bilder werden direkt von der Quelle eingebettet (Hotlinking, kein
+   Download) — mit loading="lazy" und decoding="async". Ohne Bild zeigt
+   das Partial einen dezenten Platzhalter mit Spielicon-Zeichen. #}
+{% set _gross = cover_gross | default(false) %}
+{% if _gross %}
+  {% if cover_bild %}
+  <img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async"
+       class="block h-auto w-auto max-w-[200px] max-h-[280px] rounded-lg border border-slate-200 bg-white shadow-sm">
+  {% else %}
+  <div aria-hidden="true" title="Kein Cover vorhanden"
+       class="flex h-[210px] w-[150px] max-w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 text-6xl text-slate-300 select-none">&#127922;</div>
+  {% endif %}
+{% else %}
+  {% if cover_bild %}
+  <img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async" width="40" height="56"
+       class="block h-14 w-10 shrink-0 rounded border border-slate-200 bg-slate-50 object-cover">
+  {% else %}
+  <div aria-hidden="true" title="Kein Cover vorhanden"
+       class="flex h-14 w-10 shrink-0 items-center justify-center rounded border border-dashed border-slate-300 bg-slate-50 text-lg text-slate-400 select-none">&#127922;</div>
+  {% endif %}
+{% endif %}
--- a/plugins/archiv/templates/archiv/index.html
+++ b/plugins/archiv/templates/archiv/index.html
@@ -26,16 +26,16 @@
 {% endif %}

 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
-  <form method="get" action="/archiv" class="flex flex-wrap items-end gap-3">
-    <div>
+  <form method="get" action="/archiv" class="grid grid-cols-1 gap-3 sm:flex sm:flex-wrap sm:items-end">
+    <div class="sm:w-64 lg:w-72">
      <label for="q" class="block text-xs font-medium text-slate-500 mb-1">Suche (Titel, Verlag, Autor)</label>
      <input type="text" id="q" name="q" value="{{ q }}"
-             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-72 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+             class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
-    <div>
+    <div class="sm:w-48">
      <label for="quelle" class="block text-xs font-medium text-slate-500 mb-1">Herkunft</label>
      <select id="quelle" name="quelle"
-              class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+              class="w-full sm:w-auto min-h-[44px] md:min-h-0 border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
              onchange="this.form.submit()">
        <option value="">Alle Listen</option>
        <option value="neuheiten" {% if quelle_filter == 'neuheiten' %}selected{% endif %}>Neuheiten</option>
@@ -43,7 +43,7 @@
      </select>
    </div>
    <button type="submit"
-            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
+            class="w-full sm:w-auto min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
      Suchen
    </button>
    {% if q or quelle_filter %}
@@ -54,10 +54,65 @@

 <p class="text-xs text-slate-400 mb-3">{{ anzahl }} Eintr&auml;ge im Archiv</p>

-<div class="overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
+<!-- Mobil (<768px): Karten-Ansicht — Cover links, Titel+Metadaten rechts, Status oben -->
+<ul class="md:hidden space-y-3" role="list">
+  {% for eintrag in eintraege %}
+  <li class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 flex gap-3">
+    <div class="pt-0.5">
+      {% set cover_bild = eintrag.bild_url %}
+      {% set cover_titel = eintrag.titel %}
+      {% include "archiv/_cover.html" %}
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="flex items-start gap-2">
+        <h3 class="text-sm font-medium leading-snug break-words">
+          {{ eintrag.titel }}
+          {% if eintrag.bgg_id %}
+          <a href="https://boardgamegeek.com/boardgame/{{ eintrag.bgg_id }}" target="_blank" rel="noopener"
+             class="ml-0.5 text-[10px] text-slate-400 hover:text-emerald-700 align-super">BGG&nbsp;{{ eintrag.bgg_id }}</a>
+          {% endif %}
+        </h3>
+        {% if eintrag.quelle == 'neuheiten' %}
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 text-xs">Neuheiten</span>
+        {% else %}
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-violet-100 text-violet-800 text-xs">Planung</span>
+        {% endif %}
+      </div>
+      <dl class="mt-1.5 space-y-0.5 text-xs text-slate-500">
+        {% if eintrag.verlag %}<div><dt class="inline font-medium text-slate-400">Verlag: </dt><dd class="inline">{{ eintrag.verlag }}</dd></div>{% endif %}
+        {% if eintrag.jahr or eintrag.ausgabe %}<div><dt class="inline font-medium text-slate-400">Jahr/Ausgabe: </dt><dd class="inline">{{ eintrag.jahr if eintrag.jahr else eintrag.ausgabe }}</dd></div>{% endif %}
+        <div><dt class="inline font-medium text-slate-400">Status: </dt><dd class="inline">{{ status_anzeige.get(eintrag.status, eintrag.status) }}</dd></div>
+        <div>
+          <dt class="inline font-medium text-slate-400">Archiviert am: </dt>
+          <dd class="inline">{{ eintrag.archiviert_am.strftime('%d.%m.%Y %H:%M') if eintrag.archiviert_am else '—' }}</dd>
+        </div>
+        <div><dt class="inline font-medium text-slate-400">Grund: </dt><dd class="inline">{{ eintrag.grund }}</dd></div>
+      </dl>
+      <form method="post" action="/archiv/{{ eintrag.quelle }}/{{ eintrag.id }}/wiederherstellen" class="mt-2">
+        <button type="submit"
+                class="w-full min-h-[44px] inline-flex items-center justify-center gap-1 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap"
+                title="Eintrag unverändert zurück in die aktive Liste verschieben">
+          &#8635; Wiederherstellen
+        </button>
+      </form>
+    </div>
+  </li>
+  {% else %}
+  <li class="bg-white rounded-xl border border-slate-200 shadow-sm px-4 py-8 text-center text-sm text-slate-400">
+    {% if q or quelle_filter %}
+    Keine Treffer f&uuml;r diese Suche.
+    {% else %}
+    Das Archiv ist leer — nichts zu sehen.
+    {% endif %}
+  </li>
+  {% endfor %}
+</ul>
+
+<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-left text-slate-500">
      <tr>
+        <th class="px-4 py-3 font-medium">Cover</th>
        <th class="px-4 py-3 font-medium">Spieltitel</th>
        <th class="px-4 py-3 font-medium">Herkunft</th>
        <th class="px-4 py-3 font-medium">Verlag</th>
@@ -72,6 +127,11 @@
    <tbody class="divide-y divide-slate-100">
      {% for eintrag in eintraege %}
      <tr class="hover:bg-slate-50">
+        <td class="px-4 py-3">
+          {% set cover_bild = eintrag.bild_url %}
+          {% set cover_titel = eintrag.titel %}
+          {% include "archiv/_cover.html" %}
+        </td>
        <td class="px-4 py-3 font-medium">
          {{ eintrag.titel }}
          {% if eintrag.bgg_id %}
@@ -97,7 +157,7 @@
        <td class="px-4 py-3">
          <form method="post" action="/archiv/{{ eintrag.quelle }}/{{ eintrag.id }}/wiederherstellen">
            <button type="submit"
-                    class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2.5 py-1.5 rounded-lg whitespace-nowrap"
+                    class="text-xs bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-2.5 py-2 rounded-lg whitespace-nowrap"
                    title="Eintrag unverändert zurück in die aktive Liste verschieben">
              &#8635; Wiederherstellen
            </button>
@@ -106,7 +166,7 @@
      </tr>
      {% else %}
      <tr>
-        <td colspan="9" class="px-4 py-8 text-center text-slate-400">
+        <td colspan="10" class="px-4 py-8 text-center text-slate-400">
          {% if q or quelle_filter %}
          Keine Treffer f&uuml;r diese Suche.
          {% else %}
--- a/plugins/benachrichtigung/templates/benachrichtigung/einstellungen.html
+++ b/plugins/benachrichtigung/templates/benachrichtigung/einstellungen.html
@@ -66,7 +66,7 @@
  </div>

  <div class="flex items-center gap-3">
-    <button type="submit" class="px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700">
+    <button type="submit" class="w-full sm:w-auto min-h-[44px] inline-flex items-center justify-center px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium hover:bg-emerald-700 active:bg-emerald-800">
      Speichern
    </button>
    <span class="text-xs text-slate-400">Ohne ausgew&auml;hlten Kanal erhalten Sie keine Benachrichtigungen.</span>
--- a/plugins/neuheiten/init.py
+++ b/plugins/neuheiten/init.py
@@ -255,10 +255,32 @@ class NeuheitenPlugin(BasePlugin):
        def quellen_status_tabelle(conn) -> None:
            QuellenStatus.__table__.create(conn, checkfirst=True)

+        def bild_url_spalte(conn) -> None:
+            """Migration 0004: Spalte bild_url für Coverbilder (nullable).
+
+            `ALTER TABLE … ADD COLUMN` mit nullable VARCHAR ohne Default ist
+            SQLite- und Postgres-portabel und erhält bestehende Zeilen.
+            """
+            info = conn.exec_driver_sql("PRAGMA table_info(neuheiten)").fetchall()
+            vorhanden = any(zeile[1] == "bild_url" for zeile in info)
+            if conn.dialect.name == "sqlite" and vorhanden:
+                return
+            if conn.dialect.name != "sqlite":
+                existiert = conn.exec_driver_sql(
+                    "SELECT column_name FROM information_schema.columns "
+                    "WHERE table_name = 'neuheiten' AND column_name = 'bild_url'"
+                ).scalar()
+                if existiert is not None:
+                    return
+            conn.exec_driver_sql(
+                "ALTER TABLE neuheiten ADD COLUMN bild_url VARCHAR(500)"
+            )
+
        return [
            Migration(version="0001_neuheiten_tabelle", up=neuheiten_tabelle),
            Migration(version="0002_bgg_id_nullable", up=bgg_id_nullable),
            Migration(version="0003_quellen_status", up=quellen_status_tabelle),
+            Migration(version="0004_bild_url", up=bild_url_spalte),
        ]

    def navigation(self) -> list[NavEntry]:
--- a/plugins/neuheiten/bgg.py
+++ b/plugins/neuheiten/bgg.py
@@ -70,9 +70,34 @@ class BggSpiel:
    verlag: str | None
    autor: str | None
    erscheinungsjahr: int | None
+    #: URL des Coverbildes — bevorzugt das größere <image>, sonst das
+    #: <thumbnail>; None, wenn BGG keins liefert.
+    bild_url: str | None = None
    typ: str = TYP_BRETTSPIEL


+def _bild_url(element: ET.Element) -> str | None:
+    """Extrahiert die Coverbild-URL aus einem Thing-Item.
+
+    Bevorzugt das große `<image>`, fällt zurück auf das kleinere
+    `<thumbnail>`. Protokoll-relative URLs (`//cf.geekdo-images.com/…`)
+    werden auf https normalisiert; leere/kaputte Angaben → None.
+    """
+    for tag in ("image", "thumbnail"):
+        roh = element.findtext(tag)
+        if roh is None:
+            continue
+        url = roh.strip()
+        if not url:
+            continue
+        if url.startswith("//"):
+            url = f"https:{url}"
+        if url.startswith(("http://", "https://")):
+            return url
+        return None
+    return None
+
+
 def _attribut_wert(element: ET.Element | None, tag: str) -> str | None:
    """Liest `<tag><value>…</value></tag>` tolerant aus."""
    if element is None:
@@ -161,6 +186,7 @@ def parse_things(xml_daten: bytes | str) -> list[BggSpiel]:
                verlag=_verketten(element, "boardgamepublisher"),
                autor=_verketten(element, "boardgamedesigner"),
                erscheinungsjahr=_jahr(_attribut_wert(element, "yearpublished")),
+                bild_url=_bild_url(element),
                typ=typ,
            )
        )
--- a/plugins/neuheiten/models.py
+++ b/plugins/neuheiten/models.py
@@ -30,6 +30,9 @@ class Neuheit(Base):
    # BGG-ID und speichern NULL (Migration 0002 macht die Spalte nullable,
    # Duplikate werden dort über den Titel gematcht statt über die ID).
    bgg_id: Mapped[int | None] = mapped_column(Integer, unique=True, index=True)
+    # URL des Coverbildes (BGG-Image/Thumbnail bzw. Bild der Web-Quelle);
+    # wird direkt verlinkt (Hotlinking), kein Download (Migration 0004).
+    bild_url: Mapped[str | None] = mapped_column(String(500))
    status: Mapped[str] = mapped_column(String(50), default=STATUS_NEUHEIT, index=True)
    quelle: Mapped[str] = mapped_column(String(100), default="boardgamegeek")
    erstellt_am: Mapped[datetime] = mapped_column(DateTime, server_default=func.now())
--- a/plugins/neuheiten/quellen/init.py
+++ b/plugins/neuheiten/quellen/init.py
@@ -24,6 +24,7 @@ from .basis import (
    jahr_aus_datumsangabe,
    titel_aehnlichkeit,
    titel_normalisieren,
+    bild_aus_element,
 )
 from .brettspielbox import BrettspielboxQuelle
 from .cliquenabend import CliquenabendQuelle
@@ -50,6 +51,7 @@ __all__ = [
    "jahr_aus_datumsangabe",
    "titel_aehnlichkeit",
    "titel_normalisieren",
+    "bild_aus_element",
    "SpielboxQuelle",
    "BrettspielboxQuelle",
    "SpielEssenQuelle",
--- a/plugins/neuheiten/quellen/basis.py
+++ b/plugins/neuheiten/quellen/basis.py
@@ -60,6 +60,52 @@ class QuellenTreffer:
    verlag: str | None = None
    autor: str | None = None
    erscheinungsdatum_oder_quartal: str | None = None
+    #: Bild-URL der Quelle (img im Listenelement), sofern vorhanden; wird
+    #: direkt eingebettet (Hotlinking), nicht heruntergeladen.
+    bild_url: str | None = None
+
+
+def _bild_url_normalisieren(url: str, basis_url: str | None) -> str | None:
+    """Macht aus einer rohen Bildangabe eine absolute http(s)-URL.
+
+    Protokoll-relative URLs (`//host/bild.jpg`) erhalten https voran,
+    pfadrelative Angaben werden gegen die Seiten-URL aufgelöst; alles
+    andere (data:-URIs etc.) wird verworfen.
+    """
+    url = url.strip()
+    if url.startswith("//"):
+        url = f"https:{url}"
+    elif not url.startswith(("http://", "https://")):
+        if basis_url is None:
+            return None
+        from urllib.parse import urljoin
+
+        url = urljoin(basis_url, url)
+    return url if url.startswith(("http://", "https://")) else None
+
+
+def bild_aus_element(element, basis_url: str | None = None) -> str | None:
+    """Liest die erste sinnvolle Bild-URL aus einem HTML-Element.
+
+    Akzeptiert `src` und gängige Lazy-Loading-Attribute (`data-src`,
+    `data-srcset`-Erster); protokoll- und pfadrelative URLs werden gegen
+    `basis_url` (die Seiten-URL) aufgelöst. Kein Bild → None.
+    """
+    if element is None:
+        return None
+    bild = element.find("img") if hasattr(element, "find") else None
+    if bild is None:
+        return None
+    for attribut in ("src", "data-src"):
+        url = bild.get(attribut)
+        if url and url.strip():
+            return _bild_url_normalisieren(url, basis_url)
+    srcset = bild.get("data-srcset") or bild.get("srcset")
+    if srcset:
+        erster = srcset.split(",")[0].strip().split(" ")[0]
+        if erster:
+            return _bild_url_normalisieren(erster, basis_url)
+    return None


@dataclass
--- a/plugins/neuheiten/quellen/brettspielbox.py
+++ b/plugins/neuheiten/quellen/brettspielbox.py
@@ -15,7 +15,7 @@ import re

 from bs4 import BeautifulSoup

-from .basis import QuellenAdapter, QuellenTreffer
+from .basis import QuellenAdapter, QuellenTreffer, bild_aus_element

 TITEL_VERLAG_MUSTER = re.compile(r"^\s*(.+?)\s*\(([^()]*)\)\s*$")

@@ -50,6 +50,7 @@ class BrettspielboxQuelle(QuellenAdapter):
                            autor=None,
                            erscheinungsdatum_oder_quartal=None,
                            quellen_url=quellen_url,
+                            bild_url=bild_aus_element(eintrag, url),
                        )
                    )
        return treffer, []
--- a/plugins/neuheiten/quellen/cliquenabend.py
+++ b/plugins/neuheiten/quellen/cliquenabend.py
@@ -14,7 +14,7 @@ import re

 from bs4 import BeautifulSoup

-from .basis import QuellenAdapter, QuellenTreffer
+from .basis import QuellenAdapter, QuellenTreffer, bild_aus_element

 DATUM_MUSTER = re.compile(r"\d{2}\.\d{2}\.(\d{2})\b")
 BASIS_URL = "https://www.cliquenabend.de"
@@ -72,6 +72,7 @@ class CliquenabendQuelle(QuellenAdapter):
            autor=autor,
            erscheinungsdatum_oder_quartal=datum,
            quellen_url=quellen_url,
+            bild_url=bild_aus_element(spiel_zelle, quellen_url),
        )


--- a/plugins/neuheiten/quellen/spielbox.py
+++ b/plugins/neuheiten/quellen/spielbox.py
@@ -17,7 +17,7 @@ import re

 from bs4 import BeautifulSoup

-from .basis import QuellenAdapter, QuellenTreffer
+from .basis import QuellenAdapter, QuellenTreffer, bild_aus_element

 DATUM_MUSTER = re.compile(r"(\d{2}\.\d{2}\.\d{4})")

@@ -57,6 +57,7 @@ class SpielboxQuelle(QuellenAdapter):
                    autor=None,
                    erscheinungsdatum_oder_quartal=datum,
                    quellen_url=quellen_url,
+                    bild_url=bild_aus_element(element, url),
                )
            )

--- a/plugins/neuheiten/quellen/spielessen.py
+++ b/plugins/neuheiten/quellen/spielessen.py
@@ -121,9 +121,52 @@ class SpielEssenQuelle(QuellenAdapter):
            autor=felder.get("Autor"),
            erscheinungsdatum_oder_quartal=felder.get("Erscheinungsdatum"),
            quellen_url=OEFFENTLICHE_SEITE,
+            bild_url=_bild_aus_produkt(produkt),
        )


+def _bild_aus_produkt(produkt: dict) -> str | None:
+    """Erste nutzbare Bild-URL aus dem BILDER-Feld (tolerant).
+
+    Das Feld ist je nach Messejahr eine Liste von URLs/Pfaden, ein Objekt
+    oder ein String; nur absolute bzw. protokoll-relative http(s)-URLs
+    werden übernommen, alles andere bleibt leer.
+    """
+    def _aus_wert(wert) -> str | None:
+        if isinstance(wert, str):
+            url = wert.strip()
+            if url.startswith("//"):
+                url = f"https:{url}"
+            if url.startswith(("http://", "https://")):
+                return url
+            return None
+        if isinstance(wert, dict):
+            for schluessel in ("URL", "BILD", "SRC", "PATH", "PFAD"):
+                fund = _aus_wert(wert.get(schluessel))
+                if fund:
+                    return fund
+            for unterwert in wert.values():
+                fund = _aus_wert(unterwert)
+                if fund:
+                    return fund
+            return None
+        if isinstance(wert, list):
+            for element in wert:
+                fund = _aus_wert(element)
+                if fund:
+                    return fund
+        return None
+
+    bilder = produkt.get("BILDER")
+    if isinstance(bilder, list):
+        for einzel in bilder:
+            fund = _aus_wert(einzel)
+            if fund:
+                return fund
+        return None
+    return _aus_wert(bilder)
+
+
 def _parse_info(info_html: str) -> dict[str, str]:
    """Liest die INFO-Html-Tabelle (Zeilen „Feld: Wert“) tolerant aus."""
    felder: dict[str, str] = {}
--- a/plugins/neuheiten/quellen_sync.py
+++ b/plugins/neuheiten/quellen_sync.py
@@ -233,6 +233,7 @@ class WebQuellenSyncService:
                                einzel.erscheinungsdatum_oder_quartal
                            ),
                            bgg_id=None,
+                            bild_url=einzel.bild_url,
                            status=STATUS_NEUHEIT,
                            quelle=quelle,
                        )
@@ -258,6 +259,10 @@ class WebQuellenSyncService:
                eintrag.erscheinungsjahr = jahr_aus_datumsangabe(
                    treffer.erscheinungsdatum_oder_quartal
                )
+                # Coverbild mitpflegen; fehlt es im Treffer, bleibt das
+                # bereits gespeicherte Bild erhalten.
+                if treffer.bild_url:
+                    eintrag.bild_url = treffer.bild_url
                return True
        return False

--- a/plugins/neuheiten/sync.py
+++ b/plugins/neuheiten/sync.py
@@ -69,6 +69,7 @@ def speichere_oder_aktualisiere(db: Session, spiel: BggSpiel) -> bool:
                autor=spiel.autor,
                erscheinungsjahr=spiel.erscheinungsjahr,
                bgg_id=spiel.bgg_id,
+                bild_url=spiel.bild_url,
                status=STATUS_NEUHEIT,
                quelle="boardgamegeek",
            )
@@ -78,6 +79,10 @@ def speichere_oder_aktualisiere(db: Session, spiel: BggSpiel) -> bool:
    vorhanden.verlag = spiel.verlag
    vorhanden.autor = spiel.autor
    vorhanden.erscheinungsjahr = spiel.erscheinungsjahr
+    # Coverbild mitpflegen: BGG liefert es ggf. erst nachträglich; ein
+    # fehlendes Bild in der Antwort löscht kein bereits gespeichertes.
+    if spiel.bild_url:
+        vorhanden.bild_url = spiel.bild_url
    return False


--- a/plugins/neuheiten/templates/neuheiten/_cover.html
+++ b/plugins/neuheiten/templates/neuheiten/_cover.html
@@ -0,0 +1,24 @@
+{# Coverbild-Vorschau des Neuheiten-Plugins.
+   Erwartete Variablen: cover_bild (URL oder None), cover_titel,
+   cover_gross (optional: true für großformatige Ansichten).
+   Bilder werden direkt von der Quelle eingebettet (Hotlinking, kein
+   Download) — mit loading="lazy" und decoding="async". Ohne Bild zeigt
+   das Partial einen dezenten Platzhalter mit Spielicon-Zeichen. #}
+{% set _gross = cover_gross | default(false) %}
+{% if _gross %}
+  {% if cover_bild %}
+  <img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async"
+       class="block h-auto w-auto max-w-[200px] max-h-[280px] rounded-lg border border-slate-200 bg-white shadow-sm">
+  {% else %}
+  <div aria-hidden="true" title="Kein Cover vorhanden"
+       class="flex h-[210px] w-[150px] max-w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 text-6xl text-slate-300 select-none">&#127922;</div>
+  {% endif %}
+{% else %}
+  {% if cover_bild %}
+  <img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async" width="40" height="56"
+       class="block h-14 w-10 shrink-0 rounded border border-slate-200 bg-slate-50 object-cover">
+  {% else %}
+  <div aria-hidden="true" title="Kein Cover vorhanden"
+       class="flex h-14 w-10 shrink-0 items-center justify-center rounded border border-dashed border-slate-300 bg-slate-50 text-lg text-slate-400 select-none">&#127922;</div>
+  {% endif %}
+{% endif %}
--- a/plugins/neuheiten/templates/neuheiten/_liste.html
+++ b/plugins/neuheiten/templates/neuheiten/_liste.html
@@ -1,9 +1,59 @@
 <div id="neuheiten-liste">
 <p class="text-xs text-slate-500 mb-2">{{ anzahl }} Eintr&auml;ge</p>
-<div class="overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
+
+<!-- Mobil (<768px): Karten-Ansicht — Cover links, Titel+Metadaten rechts, Status oben -->
+<ul class="md:hidden space-y-3" role="list">
+  {% for eintrag in eintraege %}
+  <li class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 flex gap-3">
+    <div class="pt-0.5">
+      {% set cover_bild = eintrag.bild_url %}
+      {% set cover_titel = eintrag.titel %}
+      {% include "neuheiten/_cover.html" %}
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="flex items-start gap-2">
+        <h3 class="text-sm font-medium leading-snug break-words">
+          {{ eintrag.titel }}
+          {% if eintrag.bgg_id %}
+          <a href="https://boardgamegeek.com/boardgame/{{ eintrag.bgg_id }}" target="_blank" rel="noopener"
+             class="ml-0.5 text-[10px] text-slate-400 hover:text-emerald-700 align-super">BGG&nbsp;{{ eintrag.bgg_id }}</a>
+          {% elif eintrag.quelle and eintrag.quelle != 'boardgamegeek' %}
+          <span class="ml-0.5 text-[10px] uppercase tracking-wide text-sky-600/70 align-super">{{ eintrag.quelle }}</span>
+          {% endif %}
+        </h3>
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-xs">{{ eintrag.status }}</span>
+      </div>
+      <dl class="mt-1.5 space-y-0.5 text-xs text-slate-500">
+        {% if eintrag.verlag %}<div><dt class="inline font-medium text-slate-400">Verlag: </dt><dd class="inline">{{ eintrag.verlag }}</dd></div>{% endif %}
+        {% if eintrag.autor %}<div><dt class="inline font-medium text-slate-400">Autor: </dt><dd class="inline">{{ eintrag.autor }}</dd></div>{% endif %}
+        {% if eintrag.erscheinungsjahr %}<div><dt class="inline font-medium text-slate-400">Jahr: </dt><dd class="inline">{{ eintrag.erscheinungsjahr }}</dd></div>{% endif %}
+        <div>
+          <dt class="inline font-medium text-slate-400">Aktualisiert: </dt>
+          <dd class="inline">{{ eintrag.aktualisiert_am.strftime('%d.%m.%Y %H:%M') if eintrag.aktualisiert_am else '—' }}</dd>
+        </div>
+      </dl>
+      {% if eintrag.status == 'neuheit' %}
+      <form method="post" action="/planung/uebernehmen/{{ eintrag.id }}" class="mt-2">
+        <button type="submit" title="In die Planungsliste verschieben (läuft durch die dedup-Prüfung)"
+                class="w-full min-h-[44px] inline-flex items-center justify-center gap-1 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap">&#8594; Zur Planung</button>
+      </form>
+      {% endif %}
+    </div>
+  </li>
+  {% else %}
+  <li class="bg-white rounded-xl border border-slate-200 shadow-sm px-4 py-8 text-center text-sm text-slate-400">
+    Keine Eintr&auml;ge gefunden.
+    {% if ist_redaktion %}Nutze &bdquo;Jetzt synchronisieren&ldquo;, um die Liste aus BoardGameGeek zu befüllen.{% endif %}
+  </li>
+  {% endfor %}
+</ul>
+
+<!-- Desktop/Tablet (&ge;768px): Tabellenform -->
+<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-left text-slate-500">
      <tr>
+        <th class="px-4 py-3 font-medium">Cover</th>
        {% set basis = '/neuheiten?q=' ~ (q | urlencode) ~ '&status=' ~ (status_filter | urlencode) %}
        {% for key, label in [('titel', 'Spieltitel'), ('verlag', 'Verlag'), ('autor', 'Autor'), ('jahr', 'Erscheinungsjahr'), ('status', 'Status'), ('aktualisiert', 'Aktualisiert')] %}
        <th class="px-4 py-3 font-medium whitespace-nowrap">
@@ -21,6 +71,11 @@
    <tbody class="divide-y divide-slate-100">
      {% for eintrag in eintraege %}
      <tr class="hover:bg-slate-50">
+        <td class="px-4 py-3">
+          {% set cover_bild = eintrag.bild_url %}
+          {% set cover_titel = eintrag.titel %}
+          {% include "neuheiten/_cover.html" %}
+        </td>
        <td class="px-4 py-3 font-medium">
          {{ eintrag.titel }}
          {% if eintrag.bgg_id %}
@@ -43,14 +98,14 @@
          {% if eintrag.status == 'neuheit' %}
          <form method="post" action="/planung/uebernehmen/{{ eintrag.id }}">
            <button type="submit" title="In die Planungsliste verschieben (läuft durch die dedup-Prüfung)"
-                    class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2 py-1 rounded-lg whitespace-nowrap">&#8594; Zur Planung</button>
+                    class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2.5 py-2 rounded-lg whitespace-nowrap">&#8594; Zur Planung</button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% else %}
      <tr>
-        <td colspan="7" class="px-4 py-8 text-center text-slate-400">
+        <td colspan="8" class="px-4 py-8 text-center text-slate-400">
          Keine Eintr&auml;ge gefunden.
          {% if ist_redaktion %}Nutze &bdquo;Jetzt synchronisieren&ldquo;, um die Liste aus BoardGameGeek zu befüllen.{% endif %}
        </td>
--- a/plugins/neuheiten/templates/neuheiten/index.html
+++ b/plugins/neuheiten/templates/neuheiten/index.html
@@ -20,16 +20,16 @@

 <div class="flex flex-wrap items-end gap-3 mb-4">
  {% if ist_redaktion %}
-  <form method="post" action="/neuheiten/sync" class="flex items-end gap-2">
-    <div>
+  <form method="post" action="/neuheiten/sync" class="flex flex-col sm:flex-row items-stretch sm:items-end gap-2">
+    <div class="sm:w-72">
      <label for="suchbegriff" class="block text-xs font-medium text-slate-500 mb-1">
        Sofort auf BoardGameGeek suchen &amp; importieren (optional)
      </label>
      <input type="text" id="suchbegriff" name="suchbegriff" placeholder="Spielname oder Suchbegriff …"
-             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-72 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+             class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
    <button type="submit"
-            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
+            class="min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
      &#8635; Jetzt synchronisieren
    </button>
  </form>
@@ -47,7 +47,7 @@
    {% if ist_redaktion %}
    <form method="post" action="/neuheiten/quellen-sync">
      <button type="submit"
-              class="bg-sky-600 hover:bg-sky-700 text-white font-medium px-3 py-1.5 rounded-lg text-xs whitespace-nowrap">
+              class="min-h-[44px] md:min-h-0 bg-sky-600 hover:bg-sky-700 active:bg-sky-800 text-white font-medium px-3 py-1.5 rounded-lg text-xs whitespace-nowrap">
        &#8635; Web-Quellen synchronisieren
      </button>
    </form>
@@ -106,17 +106,17 @@
 <form method="get" action="/neuheiten"
      hx-get="/neuheiten" hx-target="#neuheiten-liste" hx-swap="outerHTML"
      hx-trigger="input changed delay:300ms from:find input[name='q'], change from:find select[name='status']"
-      class="flex flex-wrap gap-3 mb-4">
+      class="grid grid-cols-1 sm:flex sm:flex-wrap gap-3 mb-4">
  <input type="text" name="q" value="{{ q }}" placeholder="Suche in Titel, Verlag, Autor …"
-         class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-80 focus:outline-none focus:ring-2 focus:ring-emerald-500">
-  <select name="status" class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
+         class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 sm:w-80">
+  <select name="status" class="w-full sm:w-auto min-h-[44px] md:min-h-0 border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white">
    <option value="">Alle Status</option>
    {% for option in status_optionen %}
    <option value="{{ option }}" {% if option == status_filter %}selected{% endif %}>{{ option }}</option>
    {% endfor %}
  </select>
  <noscript>
-    <button type="submit" class="bg-slate-200 hover:bg-slate-300 px-4 py-2 rounded-lg text-sm">Filtern</button>
+    <button type="submit" class="bg-slate-200 hover:bg-slate-300 px-4 py-2 rounded-lg text-sm min-h-[44px] md:min-h-0">Filtern</button>
  </noscript>
 </form>

--- a/plugins/planung/init.py
+++ b/plugins/planung/init.py
@@ -83,7 +83,33 @@ class PlanungPlugin(BasePlugin):
    # ---------- Plugin-Vertrag ----------

    def migrations(self) -> list[Migration]:
-        return [Migration(version="0001_planungsliste", up=_planungs_tabelle)]
+        def bild_url_spalte(conn) -> None:
+            """Migration 0002: Spalte bild_url für Coverbilder (nullable).
+
+            Portabel (SQLite/Postgres): `ALTER TABLE … ADD COLUMN` mit
+            nullable VARCHAR ohne Default; bestehende Zeilen bleiben erhalten.
+            """
+            if conn.dialect.name == "sqlite":
+                info = conn.exec_driver_sql(
+                    "PRAGMA table_info(planungsliste)"
+                ).fetchall()
+                if any(zeile[1] == "bild_url" for zeile in info):
+                    return
+            else:
+                existiert = conn.exec_driver_sql(
+                    "SELECT column_name FROM information_schema.columns "
+                    "WHERE table_name = 'planungsliste' AND column_name = 'bild_url'"
+                ).scalar()
+                if existiert is not None:
+                    return
+            conn.exec_driver_sql(
+                "ALTER TABLE planungsliste ADD COLUMN bild_url VARCHAR(500)"
+            )
+
+        return [
+            Migration(version="0001_planungsliste", up=_planungs_tabelle),
+            Migration(version="0002_bild_url", up=bild_url_spalte),
+        ]

    def navigation(self) -> list[NavEntry]:
        return [NavEntry(label=self.title, url="/planung")]
@@ -161,6 +187,7 @@ class PlanungPlugin(BasePlugin):
        aktion: str,
        versteckt: dict[str, str],
        abbrechen_url: str = "/planung",
+        bild_url: str | None = None,
    ):
        """Auswahl-Dialog bei Verlags-Konflikt: Welcher Verlag wird geführt?"""
        return self.context.templates.TemplateResponse(
@@ -170,6 +197,7 @@ class PlanungPlugin(BasePlugin):
                "user": user,
                "titel_headline": f"Dedup-Prüfung — {titel}",
                "spiel_titel": titel,
+                "bild_url": bild_url,
                "konflikte": ergebnis.konflikte,
                "konflikt_anzeige": KONFLIKT_ANZEIGE,
                "titel_empfehlung": ergebnis.titel_empfehlung,
@@ -354,6 +382,7 @@ class PlanungPlugin(BasePlugin):
                    aktion=f"/planung/uebernehmen/{neuheit_id}",
                    versteckt={"neuheit_id": str(neuheit_id), "verlag_bestaetigt": "1"},
                    abbrechen_url="/neuheiten",
+                    bild_url=zeile.bild_url,
                )

            gewaehlter_verlag = (verlag_wahl.strip() or (zeile.verlag or "")) or None
@@ -362,6 +391,7 @@ class PlanungPlugin(BasePlugin):
                verlag=gewaehlter_verlag,
                autor=zeile.autor,
                bgg_id=zeile.bgg_id,
+                bild_url=zeile.bild_url,
                ausgabe="",
                rezensent_id=user.id,
                status="offen",
--- a/plugins/planung/models.py
+++ b/plugins/planung/models.py
@@ -48,6 +48,8 @@ class Planungseintrag(Base):
    autor: Mapped[str | None] = mapped_column(String(300))
    #: BoardGameGeek-ID, sofern bekannt (Match-Kriterium der dedup-Prüfung).
    bgg_id: Mapped[int | None] = mapped_column(Integer)
+    #: URL des Coverbildes (aus der Neuheitenliste übernommen oder leer).
+    bild_url: Mapped[str | None] = mapped_column(String(500))
    #: Magazin-Ausgabe, z. B. „3/2025“ (mehrere Ausgaben parallel möglich).
    ausgabe: Mapped[str] = mapped_column(String(100), default="")
    rezensent_id: Mapped[int] = mapped_column(ForeignKey("users.id"))
--- a/plugins/planung/templates/planung/_cover.html
+++ b/plugins/planung/templates/planung/_cover.html
@@ -0,0 +1,24 @@
+{# Coverbild-Vorschau des Planung-Plugins.
+   Erwartete Variablen: cover_bild (URL oder None), cover_titel,
+   cover_gross (optional: true für großformatige Ansichten).
+   Bilder werden direkt von der Quelle eingebettet (Hotlinking, kein
+   Download) — mit loading="lazy" und decoding="async". Ohne Bild zeigt
+   das Partial einen dezenten Platzhalter mit Spielicon-Zeichen. #}
+{% set _gross = cover_gross | default(false) %}
+{% if _gross %}
+  {% if cover_bild %}
+  <img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async"
+       class="block h-auto w-auto max-w-[200px] max-h-[280px] rounded-lg border border-slate-200 bg-white shadow-sm">
+  {% else %}
+  <div aria-hidden="true" title="Kein Cover vorhanden"
+       class="flex h-[210px] w-[150px] max-w-[200px] items-center justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 text-6xl text-slate-300 select-none">&#127922;</div>
+  {% endif %}
+{% else %}
+  {% if cover_bild %}
+  <img src="{{ cover_bild }}" alt="Cover: {{ cover_titel }}" loading="lazy" decoding="async" width="40" height="56"
+       class="block h-14 w-10 shrink-0 rounded border border-slate-200 bg-slate-50 object-cover">
+  {% else %}
+  <div aria-hidden="true" title="Kein Cover vorhanden"
+       class="flex h-14 w-10 shrink-0 items-center justify-center rounded border border-dashed border-slate-300 bg-slate-50 text-lg text-slate-400 select-none">&#127922;</div>
+  {% endif %}
+{% endif %}
--- a/plugins/planung/templates/planung/bearbeiten.html
+++ b/plugins/planung/templates/planung/bearbeiten.html
@@ -6,8 +6,16 @@
  {% if user.id == eintrag.rezensent_id %}du{% else %}{{ user.display_name }}{% endif %}
 </p>

+<div class="flex flex-col sm:flex-row gap-5 items-start mb-4">
+<div class="shrink-0 mx-auto sm:mx-0">
+  {% set cover_bild = eintrag.bild_url %}
+  {% set cover_titel = eintrag.titel %}
+  {% set cover_gross = true %}
+  {% include "planung/_cover.html" %}
+</div>
+
 <form method="post" action="/planung/{{ eintrag.id }}/bearbeiten"
-      class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 max-w-2xl space-y-4">
+      class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 max-w-2xl space-y-4 w-full">
  <div>
    <label for="titel" class="block text-xs font-medium text-slate-500 mb-1">Spieltitel *</label>
    <input type="text" id="titel" name="titel" required value="{{ eintrag.titel }}"
@@ -38,4 +46,5 @@
    <a href="{{ abbrechen_url }}" class="text-sm text-slate-500 hover:text-slate-800 underline">Abbrechen</a>
  </div>
 </form>
+</div>
 {% endblock %}
--- a/plugins/planung/templates/planung/index.html
+++ b/plugins/planung/templates/planung/index.html
@@ -17,29 +17,30 @@

 <div class="bg-white border border-slate-200 rounded-xl shadow-sm p-4 mb-6">
  <h2 class="font-semibold mb-3">Titel h&auml;ndisch nachtragen</h2>
-  <form method="post" action="/planung/neu" class="flex flex-wrap items-end gap-3">
-    <div>
+  <!-- Mobil: Felder untereinander vollbreit; ab sm: flexibel nebeneinander -->
+  <form method="post" action="/planung/neu" class="grid grid-cols-1 gap-3 sm:flex sm:flex-wrap sm:items-end">
+    <div class="sm:w-64 lg:w-72">
      <label for="titel" class="block text-xs font-medium text-slate-500 mb-1">Spieltitel *</label>
      <input type="text" id="titel" name="titel" required
-             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-72 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+             class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
-    <div>
+    <div class="sm:w-48 lg:w-52">
      <label for="verlag" class="block text-xs font-medium text-slate-500 mb-1">Verlag</label>
      <input type="text" id="verlag" name="verlag"
-             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-52 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+             class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
-    <div>
+    <div class="sm:w-32">
      <label for="ausgabe" class="block text-xs font-medium text-slate-500 mb-1">Ausgabe</label>
      <input type="text" id="ausgabe" name="ausgabe" placeholder="z. B. 3/2025"
-             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-32 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+             class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
-    <div>
+    <div class="sm:w-32">
      <label for="bgg_id" class="block text-xs font-medium text-slate-500 mb-1">BGG-ID (optional)</label>
-      <input type="text" id="bgg_id" name="bgg_id"
-             class="border border-slate-300 rounded-lg px-3 py-2 text-sm w-32 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+      <input type="text" id="bgg_id" name="bgg_id" inputmode="numeric"
+             class="w-full min-h-[44px] border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
    </div>
    <button type="submit"
-            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
+            class="w-full sm:w-auto min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium px-4 py-2 rounded-lg text-sm whitespace-nowrap">
      Pr&uuml;fen &amp; eintragen
    </button>
  </form>
@@ -47,22 +48,95 @@

 <div class="flex items-center mb-3 gap-3">
  <form method="get" action="/planung" class="flex items-center gap-2">
-    <select name="status" class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white"
+    <select name="status" class="border border-slate-300 rounded-lg px-3 py-2 text-sm bg-white min-h-[44px] md:min-h-0"
            onchange="this.form.submit()">
      <option value="">Alle Status</option>
      {% for wert in status_optionen %}
      <option value="{{ wert }}" {% if wert == status_filter %}selected{% endif %}>{{ status_anzeige[wert] }}</option>
      {% endfor %}
    </select>
-    <noscript><button type="submit" class="bg-slate-200 hover:bg-slate-300 px-3 py-2 rounded-lg text-sm">Filtern</button></noscript>
+    <noscript><button type="submit" class="bg-slate-200 hover:bg-slate-300 px-3 py-2 rounded-lg text-sm min-h-[44px] md:min-h-0">Filtern</button></noscript>
  </form>
  <p class="text-xs text-slate-400 ml-auto">{{ anzahl }} Eintr&auml;ge</p>
 </div>

-<div class="overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
+<!-- Mobil (<768px): Karten-Ansicht — Cover links, Titel+Metadaten rechts, Status oben -->
+<ul class="md:hidden space-y-3" role="list">
+  {% for eintrag in eintraege %}
+  <li class="bg-white rounded-xl border border-slate-200 shadow-sm p-3 flex gap-3">
+    <div class="pt-0.5">
+      {% set cover_bild = eintrag.bild_url %}
+      {% set cover_titel = eintrag.titel %}
+      {% include "planung/_cover.html" %}
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="flex items-start gap-2">
+        <h3 class="text-sm font-medium leading-snug break-words">
+          {{ eintrag.titel }}
+          {% if eintrag.bgg_id %}
+          <a href="https://boardgamegeek.com/boardgame/{{ eintrag.bgg_id }}" target="_blank" rel="noopener"
+             class="ml-0.5 text-[10px] text-slate-400 hover:text-emerald-700 align-super">BGG&nbsp;{{ eintrag.bgg_id }}</a>
+          {% endif %}
+          {% if eintrag.pruefung %}
+          <span class="ml-0.5 inline-block px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-xs align-middle"
+                title="Die dedup-Prüfung hatte beim Eintragen Treffer.">&#9888; Pr&uuml;fhinweis</span>
+          {% endif %}
+        </h3>
+        {% if eintrag.status == 'offen' %}
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-slate-200 text-slate-700 text-xs">{{ status_anzeige[eintrag.status] }}</span>
+        {% elif eintrag.status == 'in_bearbeitung' %}
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-sky-100 text-sky-800 text-xs">{{ status_anzeige[eintrag.status] }}</span>
+        {% else %}
+        <span class="ml-auto shrink-0 inline-block px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-xs">{{ status_anzeige[eintrag.status] }}</span>
+        {% endif %}
+      </div>
+      <dl class="mt-1.5 space-y-0.5 text-xs text-slate-500">
+        {% if eintrag.verlag %}<div><dt class="inline font-medium text-slate-400">Verlag: </dt><dd class="inline">{{ eintrag.verlag }}</dd></div>{% endif %}
+        {% if eintrag.ausgabe %}<div><dt class="inline font-medium text-slate-400">Ausgabe: </dt><dd class="inline">{{ eintrag.ausgabe }}</dd></div>{% endif %}
+        <div><dt class="inline font-medium text-slate-400">Rezensent: </dt><dd class="inline">{{ namen.get(eintrag.rezensent_id, '—') }}</dd></div>
+        <div>
+          <dt class="inline font-medium text-slate-400">Aktualisiert: </dt>
+          <dd class="inline">{{ eintrag.aktualisiert_am.strftime('%d.%m.%Y %H:%M') if eintrag.aktualisiert_am else '—' }}</dd>
+        </div>
+      </dl>
+      {% if kann_bearbeiten(eintrag) %}
+      <div class="mt-2 grid grid-cols-1 gap-2">
+        {% if eintrag.status == 'offen' %}
+        <form method="post" action="/planung/{{ eintrag.id }}/status">
+          <input type="hidden" name="status" value="in_bearbeitung">
+          <button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center bg-sky-600 hover:bg-sky-700 active:bg-sky-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap">In Bearbeitung</button>
+        </form>
+        {% endif %}
+        {% if eintrag.status != 'abgeschlossen' %}
+        <form method="post" action="/planung/{{ eintrag.id }}/status">
+          <input type="hidden" name="status" value="abgeschlossen">
+          <button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white px-3 py-2 rounded-lg text-sm whitespace-nowrap">Abgeschlossen</button>
+        </form>
+        {% endif %}
+        <a href="/planung/{{ eintrag.id }}/bearbeiten"
+           class="min-h-[44px] inline-flex items-center justify-center border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-3 py-2 rounded-lg text-sm whitespace-nowrap">Bearbeiten</a>
+        <form method="post" action="/planung/{{ eintrag.id }}/loeschen">
+          <button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center border border-red-200 text-red-600 hover:bg-red-50 px-3 py-2 rounded-lg text-sm whitespace-nowrap">L&ouml;schen</button>
+        </form>
+      </div>
+      {% else %}
+      <p class="mt-2 text-xs text-slate-400">nur {{ namen.get(eintrag.rezensent_id, '') }}</p>
+      {% endif %}
+    </div>
+  </li>
+  {% else %}
+  <li class="bg-white rounded-xl border border-slate-200 shadow-sm px-4 py-8 text-center text-sm text-slate-400">
+    Noch keine Eintr&auml;ge — schiebe einen Titel aus den Neuheiten hierher oder trage ihn oben h&auml;ndisch nach.
+  </li>
+  {% endfor %}
+</ul>
+
+<!-- Desktop/Tablet (&ge;768px): Tabellenform -->
+<div class="hidden md:block overflow-x-auto bg-white rounded-xl border border-slate-200 shadow-sm">
  <table class="w-full text-sm">
    <thead class="bg-slate-50 text-left text-slate-500">
      <tr>
+        <th class="px-4 py-3 font-medium">Cover</th>
        <th class="px-4 py-3 font-medium">Spieltitel</th>
        <th class="px-4 py-3 font-medium">Verlag</th>
        <th class="px-4 py-3 font-medium">Ausgabe</th>
@@ -75,6 +149,11 @@
    <tbody class="divide-y divide-slate-100">
      {% for eintrag in eintraege %}
      <tr class="hover:bg-slate-50">
+        <td class="px-4 py-3">
+          {% set cover_bild = eintrag.bild_url %}
+          {% set cover_titel = eintrag.titel %}
+          {% include "planung/_cover.html" %}
+        </td>
        <td class="px-4 py-3 font-medium">
          {{ eintrag.titel }}
          {% if eintrag.bgg_id %}
@@ -107,19 +186,19 @@
            {% if eintrag.status == 'offen' %}
            <form method="post" action="/planung/{{ eintrag.id }}/status">
              <input type="hidden" name="status" value="in_bearbeitung">
-              <button type="submit" class="text-xs bg-sky-600 hover:bg-sky-700 text-white px-2 py-1 rounded-lg whitespace-nowrap">In Bearbeitung</button>
+              <button type="submit" class="text-xs bg-sky-600 hover:bg-sky-700 text-white px-2.5 py-2 rounded-lg whitespace-nowrap">In Bearbeitung</button>
            </form>
            {% endif %}
            {% if eintrag.status != 'abgeschlossen' %}
            <form method="post" action="/planung/{{ eintrag.id }}/status">
              <input type="hidden" name="status" value="abgeschlossen">
-              <button type="submit" class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2 py-1 rounded-lg whitespace-nowrap">Abgeschlossen</button>
+              <button type="submit" class="text-xs bg-emerald-600 hover:bg-emerald-700 text-white px-2.5 py-2 rounded-lg whitespace-nowrap">Abgeschlossen</button>
            </form>
            {% endif %}
            <a href="/planung/{{ eintrag.id }}/bearbeiten"
-               class="text-xs border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-2 py-1 rounded-lg whitespace-nowrap">Bearbeiten</a>
+               class="text-xs border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-2.5 py-2 rounded-lg whitespace-nowrap">Bearbeiten</a>
            <form method="post" action="/planung/{{ eintrag.id }}/loeschen">
-              <button type="submit" class="text-xs border border-red-200 text-red-600 hover:bg-red-50 px-2 py-1 rounded-lg whitespace-nowrap">L&ouml;schen</button>
+              <button type="submit" class="text-xs border border-red-200 text-red-600 hover:bg-red-50 px-2.5 py-2 rounded-lg whitespace-nowrap">L&ouml;schen</button>
            </form>
          </div>
          {% else %}
@@ -129,7 +208,7 @@
      </tr>
      {% else %}
      <tr>
-        <td colspan="7" class="px-4 py-8 text-center text-slate-400">
+        <td colspan="8" class="px-4 py-8 text-center text-slate-400">
          Noch keine Eintr&auml;ge — schiebe einen Titel aus den Neuheiten hierher oder trage ihn oben h&auml;ndisch nach.
        </td>
      </tr>
--- a/plugins/planung/templates/planung/pruefung.html
+++ b/plugins/planung/templates/planung/pruefung.html
@@ -7,7 +7,14 @@
  der Eintrag angelegt wird.
 </p>

-<div class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-6 text-sm">
+<div class="flex flex-col sm:flex-row gap-4 items-start">
+<div class="shrink-0 mx-auto sm:mx-0">
+  {% set cover_bild = bild_url %}
+  {% set cover_titel = spiel_titel %}
+  {% set cover_gross = true %}
+  {% include "planung/_cover.html" %}
+</div>
+<div class="bg-amber-50 border border-amber-300 rounded-xl p-4 mb-0 sm:mb-6 text-sm w-full">
  <p class="font-medium text-amber-800 mb-2">&#9888; {{ konflikte|length }} Treffer f&uuml;r „{{ spiel_titel }}“</p>
  <ul class="list-disc list-inside space-y-1 text-slate-700">
    {% for konflikt in konflikte %}
@@ -27,6 +34,7 @@
  <p class="mt-2 text-slate-600">Empfohlener Titel: <span class="font-medium">{{ titel_empfehlung }}</span></p>
  {% endif %}
 </div>
+</div>

 <form method="post" action="{{ aktion }}" class="bg-white border border-slate-200 rounded-xl shadow-sm p-4">
  {% for name, wert in versteckt.items() %}
--- a/src/redaktionskern/templates/base.html
+++ b/src/redaktionskern/templates/base.html
@@ -9,16 +9,32 @@
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
 </head>
 <body class="bg-slate-100 text-slate-800 min-h-screen flex flex-col">
-<header class="bg-white border-b border-slate-200">
-  <nav class="max-w-6xl mx-auto px-4 py-3 flex items-center gap-5" aria-label="Hauptnavigation">
+<header class="bg-white border-b border-slate-200" x-data="{ menue: false }">
+  <nav class="max-w-6xl mx-auto px-4 py-2 md:py-3 flex items-center gap-5" aria-label="Hauptnavigation">
    <a href="/" class="font-bold text-emerald-700 whitespace-nowrap">&#127923; {{ app_name }}</a>
-    {% for eintrag in plugin_nav %}
-      <a href="{{ eintrag.url }}" class="text-sm text-slate-600 hover:text-emerald-700">{{ eintrag.label }}</a>
-    {% endfor %}
-    <div class="ml-auto relative" x-data="{ offen: false }">
+    <!-- Desktop: horizontale Navigationsleiste -->
+    <span class="hidden md:flex items-center gap-5 flex-1">
+      {% for eintrag in plugin_nav %}
+        <a href="{{ eintrag.url }}" class="text-sm text-slate-600 hover:text-emerald-700">{{ eintrag.label }}</a>
+      {% endfor %}
+    </span>
+    <!-- Mobil: Burger-Button (Alpine.js), Touch-Ziel &ge;&ge; 44px -->
+    <button type="button" @click="menue = !menue" :aria-expanded="menue.toString()"
+            aria-controls="hauptmenue-mobil" aria-label="Navigation umschalten"
+            class="md:hidden ml-auto inline-flex items-center justify-center min-h-[44px] min-w-[44px] rounded-lg text-slate-600 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500">
+      <svg x-show="!menue" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
+           viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
+      </svg>
+      <svg x-show="menue" x-cloak xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
+           viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+    <div class="relative" x-data="{ offen: false }">
      {% if user %}
        <button type="button" @click="offen = !offen"
-                class="text-sm font-medium px-2 py-1 rounded hover:bg-slate-100">
+                class="text-sm font-medium px-2 py-1 rounded hover:bg-slate-100 inline-flex items-center min-h-[44px] md:min-h-0">
          {{ user.display_name }} &#9662;
        </button>
        <div x-show="offen" x-cloak @click.outside="offen = false"
@@ -33,10 +49,24 @@
          </form>
        </div>
      {% else %}
-        <a href="/login" class="text-sm font-medium text-emerald-700">Anmelden</a>
+        <a href="/login" class="text-sm font-medium text-emerald-700 inline-flex items-center min-h-[44px] md:min-h-0 px-2">Anmelden</a>
      {% endif %}
    </div>
  </nav>
+  <!-- Mobil: ausklappbare Navigation (Burger-Menü) -->
+  <div id="hauptmenue-mobil" x-show="menue" x-cloak @click.outside="menue = false"
+       class="md:hidden border-t border-slate-200 bg-white px-4 pb-3 pt-2">
+    {% for eintrag in plugin_nav %}
+      <a href="{{ eintrag.url }}" @click="menue = false"
+         class="block py-3 text-sm font-medium text-slate-700 hover:text-emerald-700 border-b border-slate-100 last:border-0">
+        {{ eintrag.label }}
+      </a>
+    {% endfor %}
+    {% if not user %}
+    <a href="/login" @click="menue = false"
+       class="block py-3 text-sm font-medium text-emerald-700 border-t border-slate-100 mt-1">Anmelden</a>
+    {% endif %}
+  </div>
 </header>
 <main class="flex-1 max-w-6xl w-full mx-auto px-4 py-6">
 {% block inhalt %}{% endblock %}
--- a/src/redaktionskern/templates/benutzer/formular.html
+++ b/src/redaktionskern/templates/benutzer/formular.html
@@ -66,13 +66,13 @@
           class="w-full border border-slate-300 rounded-lg px-3 py-2">
  </div>

-  <div class="flex gap-3 pt-2">
+  <div class="flex flex-col sm:flex-row gap-3 pt-2">
    <button type="submit"
-            class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg px-4 py-2">
+            class="min-h-[44px] inline-flex items-center justify-center bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium rounded-lg px-4 py-2">
      Speichern
    </button>
    <a href="/admin/benutzer"
-       class="border border-slate-300 rounded-lg px-4 py-2 text-sm hover:bg-slate-50">Abbrechen</a>
+       class="min-h-[44px] inline-flex items-center justify-center border border-slate-300 rounded-lg px-4 py-2 text-sm hover:bg-slate-50">Abbrechen</a>
  </div>
 </form>
 {% endblock %}
--- a/src/redaktionskern/templates/benutzer/liste.html
+++ b/src/redaktionskern/templates/benutzer/liste.html
@@ -4,7 +4,7 @@
 <div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">Benutzerverwaltung</h1>
  <a href="/admin/benutzer/neu"
-     class="bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg px-3 py-2 text-sm font-medium">
+     class="bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white rounded-lg px-3 py-2 text-sm font-medium min-h-[44px] inline-flex items-center">
    + Neuer Benutzer
  </a>
 </div>
--- a/src/redaktionskern/templates/login.html
+++ b/src/redaktionskern/templates/login.html
@@ -27,7 +27,7 @@
               class="w-full border border-slate-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500">
      </div>
      <button type="submit"
-              class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg px-3 py-2">
+              class="w-full min-h-[44px] bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white font-medium rounded-lg px-3 py-2">
        Anmelden
      </button>
    </form>
--- a/tests/test_covers.py
+++ b/tests/test_covers.py
@@ -0,0 +1,481 @@
+"""Tests für die Coverbilder-Erweiterung (bild_url).
+
+Abgedeckt:
+- Migrationen: Spalte bild_url existiert in allen vier Tabellen
+  (neuheiten, planungsliste, archiv_neuheiten, archiv_planung);
+  bestehende Zeilen bleiben beim ALTER TABLE erhalten.
+- BGG-Parsing: `<image>` wird bevorzugt, sonst `<thumbnail>`;
+  protokoll-relative URLs werden auf https normalisiert.
+- Sync-Upsert: bild_url wird angelegt und beim Update mitgepflegt;
+  ein fehlendes Bild in der Antwort löscht kein gespeichertes.
+- Web-Quellen: img im Listenelement wird übernommen und gespeichert.
+- Templates: img-Tag mit loading="lazy"/decoding="async" bei Bild,
+  Platzhalter-Div ohne Bild; große Ansicht in Detailseiten.
+
+Kein echter Netzwerkverkehr — XML/HTML sind gemockt.
+"""
+from __future__ import annotations
+
+import sys
+
+import pytest
+from sqlalchemy import create_engine, select
+from sqlalchemy.orm import sessionmaker
+
+from redaktionskern.db import Base
+from redaktionskern.migrationen import run_migrations
+
+from tests._neuheiten import (
+    BggSpiel,
+    Neuheit,
+    QuellenTreffer,
+    SpielboxQuelle,
+    WebQuellenClient,
+    WebQuellenSyncService,
+    parse_things,
+)
+from tests.conftest import melde_an
+
+# ---------- Hilfsbausteine ----------
+
+
+class FakeUhr:
+    def __init__(self) -> None:
+        self.zeit = 0.0
+
+    def __call__(self) -> float:
+        return self.zeit
+
+
+@pytest.fixture
+def session_factory():
+    engine = create_engine("sqlite://", connect_args={"check_same_thread": False})
+    Base.metadata.create_all(engine)
+    fabrik = sessionmaker(bind=engine, expire_on_commit=False, autoflush=False)
+    yield fabrik
+    engine.dispose()
+
+
+def _spalten(conn, tabelle: str) -> set[str]:
+    info = conn.exec_driver_sql(f"PRAGMA table_info({tabelle})").fetchall()
+    return {zeile[1] for zeile in info}
+
+
+def plugin_modul(app, name: str):
+    """Das Modul des geladenen Plugins (Registry bevorzugt)."""
+    plugin_instanz = app.state.registry.get(name) or sys.modules.get(
+        f"spiele_redaktion_plugins.{name}"
+    )
+    assert plugin_instanz is not None, f"Plugin {name} nicht geladen"
+    return sys.modules[type(plugin_instanz).__module__]
+
+
+# ---------- Migrationen ----------
+
+
+def test_migrations_legen_bild_url_in_allen_tabellen_an(app):
+    with app.state.engine.connect() as conn:
+        for tabelle in ("neuheiten", "planungsliste", "archiv_neuheiten",
+                        "archiv_planung"):
+            assert "bild_url" in _spalten(conn, tabelle), \
+                f"bild_url fehlt in {tabelle}"
+
+
+def test_bild_url_migration_erhaelt_bestehende_daten(app, tmp_path):
+    """ALTER-TABLE-Pfad: alte DB ohne bild_url → Migration fügt die Spalte
+    hinzu und erhält alle bestehenden Zeilen."""
+    engine = create_engine(f"sqlite:///{tmp_path / 'mig.db'}")
+
+    # Alte Migrationen (ohne die bild_url-Schritte) je Plugin ausführen.
+    alte_schritte = {
+        "neuheiten": [m for m in app.state.registry.get("neuheiten").migrations()
+                      if not m.version.startswith("0004")],
+        "planung": [m for m in app.state.registry.get("planung").migrations()
+                    if not m.version.startswith("0002")],
+        "archiv": [m for m in app.state.registry.get("archiv").migrations()
+                   if not m.version.startswith("0002")],
+    }
+    with engine.begin() as conn:
+        for plugin_name, schritte in alte_schritte.items():
+            run_migrations(conn, plugin_name, schritte)
+        # Alten Stand simulieren: die aktuellen Modelle erzeugen die Spalte
+        # schon mit, daher für den Test wieder entfernen.
+        for tabelle in ("neuheiten", "planungsliste",
+                        "archiv_neuheiten", "archiv_planung"):
+            conn.exec_driver_sql(f"ALTER TABLE {tabelle} DROP COLUMN bild_url")
+            assert "bild_url" not in _spalten(conn, tabelle)
+
+    # Bestehende Zeilen einfügen (NOT-NULL-Pflichtspalten gesetzt; die
+    # Defaults der Modelle sind Python-seitig, daher hier explizit).
+    with engine.begin() as conn:
+        conn.exec_driver_sql(
+            "INSERT INTO neuheiten (titel, status, quelle)"
+            " VALUES ('Alter BGG-Titel', 'neuheit', 'boardgamegeek')"
+        )
+        conn.exec_driver_sql(
+            "INSERT INTO planungsliste"
+            " (titel, rezensent_id, status, quelle, ausgabe)"
+            " VALUES ('Alter Plan', 1, 'offen', 'manuell', '')"
+        )
+        conn.exec_driver_sql(
+            "INSERT INTO archiv_neuheiten"
+            " (quell_id, titel, status, quelle, archiviert_von, grund)"
+            " VALUES (1, 'Alt Neuheit', 'neuheit', 'boardgamegeek', 'System', '')"
+        )
+        conn.exec_driver_sql(
+            "INSERT INTO archiv_planung"
+            " (quell_id, titel, rezensent_id, status, quelle, ausgabe,"
+            "  archiviert_von, grund)"
+            " VALUES (2, 'Alt Planung', 1, 'offen', 'manuell', '', 'System', '')"
+        )
+
+    # Neue bild_url-Migrationen anwenden (nur diese sind noch offen).
+    neue_schritte = {
+        "neuheiten": [m for m in app.state.registry.get("neuheiten").migrations()
+                      if m.version == "0004_bild_url"],
+        "planung": [m for m in app.state.registry.get("planung").migrations()
+                    if m.version == "0002_bild_url"],
+        "archiv": [m for m in app.state.registry.get("archiv").migrations()
+                   if m.version == "0002_bild_url"],
+    }
+    with engine.begin() as conn:
+        for plugin_name, schritte in neue_schritte.items():
+            run_migrations(conn, plugin_name, schritte)
+
+    # Spalte vorhanden, Daten vollständig erhalten.
+    with engine.connect() as conn:
+        for tabelle in ("neuheiten", "planungsliste",
+                        "archiv_neuheiten", "archiv_planung"):
+            assert "bild_url" in _spalten(conn, tabelle)
+        titel = {
+            zeile[0]
+            for zeile in conn.exec_driver_sql(
+                "SELECT titel FROM neuheiten"
+            ).fetchall()
+        }
+        assert titel == {"Alter BGG-Titel"}
+        assert conn.exec_driver_sql(
+            "SELECT COUNT(*) FROM planungsliste"
+        ).scalar() == 1
+        assert conn.exec_driver_sql(
+            "SELECT COUNT(*) FROM archiv_neuheiten"
+        ).scalar() == 1
+        assert conn.exec_driver_sql(
+            "SELECT COUNT(*) FROM archiv_planung"
+        ).scalar() == 1
+
+
+# ---------- BGG-Parsing ----------
+
+THING_MIT_BEIDEN = """<?xml version="1.0"?>
+<items termsofuse="https://boardgamegeek.com/xmlapi/termsofuse">
+  <item type="boardgame" id="13">
+    <thumbnail>https://cf.geekdo-images.com/klein_thumb.jpg</thumbnail>
+    <image>https://cf.geekdo-images.com/gross.png</image>
+    <name type="primary" value="Catan"/>
+  </item>
+</items>
+"""
+
+THING_NUR_THUMBNAIL = """<?xml version="1.0"?>
+<items termsofuse="https://boardgamegeek.com/xmlapi/termsofuse">
+  <item type="boardgame" id="13">
+    <thumbnail>https://cf.geekdo-images.com/nur_thumb.jpg</thumbnail>
+    <name type="primary" value="Catan"/>
+  </item>
+</items>
+"""
+
+THING_PROTOKOLL_RELATIV = """<?xml version="1.0"?>
+<items termsofuse="https://boardgamegeek.com/xmlapi/termsofuse">
+  <item type="boardgame" id="13">
+    <image>//cf.geekdo-images.com/relativ.jpg</image>
+    <name type="primary" value="Catan"/>
+  </item>
+</items>
+"""
+
+THING_OHNE_BILD = """<?xml version="1.0"?>
+<items termsofuse="https://boardgamegeek.com/xmlapi/termsofuse">
+  <item type="boardgame" id="13">
+    <name type="primary" value="Catan"/>
+  </item>
+</items>
+"""
+
+
+def test_parse_things_bevorzugt_grosses_image():
+    spiele = parse_things(THING_MIT_BEIDEN)
+    assert len(spiele) == 1
+    assert spiele[0].bild_url == "https://cf.geekdo-images.com/gross.png"
+
+
+def test_parse_things_faellt_auf_thumbnail_zurueck():
+    spiele = parse_things(THING_NUR_THUMBNAIL)
+    assert spiele[0].bild_url == "https://cf.geekdo-images.com/nur_thumb.jpg"
+
+
+def test_parse_things_normalisiert_protokoll_relative_urls():
+    spiele = parse_things(THING_PROTOKOLL_RELATIV)
+    assert spiele[0].bild_url == "https://cf.geekdo-images.com/relativ.jpg"
+
+
+def test_parse_things_ohne_bild_liefert_none():
+    spiele = parse_things(THING_OHNE_BILD)
+    assert spiele[0].bild_url is None
+
+
+# ---------- Sync-Upsert pflegt bild_url ----------
+
+
+def test_upsert_legt_und_pflegt_bild_url(session_factory):
+    from tests._neuheiten import speichere_oder_aktualisiere
+
+    spiel = BggSpiel(
+        bgg_id=13, titel="Catan", verlag="KOSMOS", autor="Klaus Teuber",
+        erscheinungsjahr=1995, bild_url="https://cf.geekdo-images.com/a.jpg",
+    )
+    with session_factory() as db:
+        assert speichere_oder_aktualisiere(db, spiel) is True
+        db.commit()
+
+        # Update: neues Bild wird übernommen …
+        update = BggSpiel(
+            bgg_id=13, titel="Catan", verlag="KOSMOS", autor="Klaus Teuber",
+            erscheinungsjahr=1995, bild_url="https://cf.geekdo-images.com/b.jpg",
+        )
+        assert speichere_oder_aktualisiere(db, update) is False
+        db.commit()
+        eintrag = db.scalar(select(Neuheit).where(Neuheit.bgg_id == 13))
+        assert eintrag.bild_url == "https://cf.geekdo-images.com/b.jpg"
+
+        # … ein fehlendes Bild in der Antwort löscht das gespeicherte nicht.
+        ohne = BggSpiel(
+            bgg_id=13, titel="Catan", verlag="KOSMOS", autor="Klaus Teuber",
+            erscheinungsjahr=1995, bild_url=None,
+        )
+        speichere_oder_aktualisiere(db, ohne)
+        db.commit()
+        db.expire_all()
+        eintrag = db.scalar(select(Neuheit).where(Neuheit.bgg_id == 13))
+        assert eintrag.bild_url == "https://cf.geekdo-images.com/b.jpg"
+
+
+# ---------- Web-Quellen: Bild aus Listenelement übernehmen ----------
+
+SPIELBOX_MIT_BILD = b"""
+<div class="blog">
+ <div class="item column-1">
+  <div class="page-header"><h2><a href="/beitrag/x">Pegasus Spiele: Next Station Berlin</a></h2></div>
+  <img src="/media/next-station.jpg" alt="Next Station Berlin">
+  <p><strong>24.07.2026</strong> - Vorstellung.</p>
+ </div>
+ <div class="item column-2">
+  <div class="page-header"><h2><a href="/beitrag/y">MICROMACRO Kids</a></h2></div>
+  <p><strong>02.03.2026</strong> - Neu.</p>
+ </div>
+</div>
+"""
+
+
+def test_spielbox_adapter_uebernimmt_img_url():
+    quelle = SpielboxQuelle(WebQuellenClient(schlaf=lambda s: None, uhr=FakeUhr()))
+    treffer, folge_links = quelle.seite_verarbeiten(
+        SPIELBOX_MIT_BILD, "https://www.spielbox.de/neuheiten-neue-spiele"
+    )
+    assert [t.titel for t in treffer] == [
+        "Pegasus Spiele: Next Station Berlin", "MICROMACRO Kids",
+    ]
+    # Erstes Element liefert ein Bild, das zweite keins → leer lassen.
+    assert treffer[0].bild_url == "https://www.spielbox.de/media/next-station.jpg"
+    assert treffer[1].bild_url is None
+    assert folge_links == []
+
+
+class _StatischerAdapter:
+    """Adapter-Ersatz mit fester Trefferliste (für Service-Tests)."""
+
+    name = "spielbox"
+    anzeigename = "spielbox Test"
+    start_urls = ("https://spielbox.example.org/liste",)
+
+    def __init__(self, treffer):
+        self._treffer = treffer
+
+    def __call__(self, client):
+        return self
+
+    def sammle(self):
+        from tests._neuheiten import SammelErgebnis
+
+        return SammelErgebnis(treffer=list(self._treffer), seiten=1)
+
+
+def test_quellen_sync_speichert_und_pflegt_bild_url(session_factory):
+    quelle = _StatischerAdapter([
+        QuellenTreffer(
+            titel="Ringträger", verlag="Schmidt Spiele",
+            quellen_url="https://x.example.org/r",
+            bild_url="https://bilder.example.org/ringtraeger.jpg",
+        ),
+    ])
+    service = WebQuellenSyncService(
+        session_factory,
+        adapter_klassen=(quelle,),
+        client_fabrik=lambda validatoren: WebQuellenClient(
+            schlaf=lambda s: None, uhr=FakeUhr(), validatoren=validatoren
+        ),
+    )
+    zeilen = service.laufe()
+    assert zeilen[0].neu == 1
+
+    with session_factory() as db:
+        eintrag = db.query(Neuheit).one()
+        assert eintrag.quelle == "spielbox"
+        assert eintrag.bild_url == "https://bilder.example.org/ringtraeger.jpg"
+
+        # Zweiter Lauf aktualisiert das Bild statt es zu duplizieren.
+        quelle._treffer = [
+            QuellenTreffer(
+                titel="Ringträger", verlag="Schmidt Spiele",
+                quellen_url="https://x.example.org/r",
+                bild_url="https://bilder.example.org/ringtraeger-neu.jpg",
+            ),
+        ]
+    zeilen = service.laufe()
+    assert zeilen[0].aktualisiert == 1 and zeilen[0].neu == 0
+    with session_factory() as db:
+        assert db.query(Neuheit).count() == 1
+        assert db.query(Neuheit).one().bild_url == \
+            "https://bilder.example.org/ringtraeger-neu.jpg"
+
+
+def test_spielessen_extrahiert_bild_aus_bilder_feld(app):
+    klasse = plugin_modul(app, "neuheiten").quellen.spielessen.SpielEssenQuelle
+    adapter = klasse(client=None)  # Parsing-Hilfen brauchen keinen Client
+
+    produkt = {
+        "TITEL": "-60°",
+        "BILDER": [{"URL": "//maps.eyeled-services.de/media/bild.jpg"}],
+    }
+    treffer = adapter._produkt(produkt, {})
+    assert treffer is not None
+    assert treffer.bild_url == "https://maps.eyeled-services.de/media/bild.jpg"
+
+    treffer_ohne = adapter._produkt({"TITEL": "X", "BILDER": []}, {})
+    assert treffer_ohne is not None
+    assert treffer_ohne.bild_url is None
+
+
+# ---------- Planung: Übernahme trägt das Bild mit ----------
+
+
+def test_uebernehmen_kopiert_bild_url_in_die_planung(app, client):
+    with app.state.session_factory() as db:
+        db.add(
+            Neuheit(
+                titel="Cascadia",
+                bgg_id=295947,
+                status="neuheit",
+                bild_url="https://cf.geekdo-images.com/cascadia.jpg",
+            )
+        )
+        db.commit()
+
+    melde_an(client)
+    antwort = client.post("/planung/uebernehmen/1", follow_redirects=False)
+    assert antwort.status_code in (303, 200)
+
+    Planungseintrag = plugin_modul(app, "planung").Planungseintrag
+    with app.state.session_factory() as db:
+        eintrag = db.scalars(select(Planungseintrag)).one()
+        assert eintrag.titel == "Cascadia"
+        assert eintrag.bild_url == "https://cf.geekdo-images.com/cascadia.jpg"
+
+        # Die Neuheit selbst ist jetzt „planung“ und behält ihr Bild.
+        neuheit = db.scalar(select(Neuheit).where(Neuheit.titel == "Cascadia"))
+        assert neuheit.status == "planung"
+        assert neuheit.bild_url == "https://cf.geekdo-images.com/cascadia.jpg"
+
+
+# ---------- Template-Darstellung ----------
+
+
+def test_neuheitenliste_rendert_img_mit_lazy_loading(app, client):
+    with app.state.session_factory() as db:
+        db.add(
+            Neuheit(
+                titel="Catan", bgg_id=13, status="neuheit",
+                bild_url="https://cf.geekdo-images.com/catan.jpg",
+            )
+        )
+        db.commit()
+
+    melde_an(client)
+    antwort = client.get("/neuheiten")
+    assert antwort.status_code == 200
+    text = antwort.text
+    assert '<img src="https://cf.geekdo-images.com/catan.jpg"' in text
+    assert 'loading="lazy"' in text
+    assert 'decoding="async"' in text
+    assert 'alt="Cover: Catan"' in text
+    # Fallback-Zeichen darf daneben nicht auftauchen, wenn Bilder da sind …
+    # (Doch: andere Einträge könnten bildlos sein — hier nur einer.)
+
+    # Mobil-Kartenansicht und Desktop-Tabelle sind beide im Markup.
+    assert 'md:hidden' in text
+    assert 'hidden md:block' in text
+
+
+def test_neuheitenliste_rendert_platzhalter_ohne_bild(app, client):
+    with app.state.session_factory() as db:
+        db.add(Neuheit(titel="Ohne Bild", status="neuheit"))
+        db.commit()
+
+    melde_an(client)
+    antwort = client.get("/neuheiten")
+    assert antwort.status_code == 200
+    assert "<img" not in antwort.text
+    assert "&#127922;" in antwort.text  # Spielicon-Zeichen im Platzhalter-Div
+
+
+def test_planungsliste_zeigt_cover(app, client):
+    from redaktionskern.auth.models import User
+
+    Planungseintrag = plugin_modul(app, "planung").Planungseintrag
+    with app.state.session_factory() as db:
+        benutzer = db.query(User).filter_by(username="admin").first()
+        db.add(
+            Planungseintrag(
+                titel="Cascadia",
+                rezensent_id=benutzer.id,
+                status="offen",
+                bild_url="https://cf.geekdo-images.com/cascadia.jpg",
+            )
+        )
+        db.commit()
+
+    melde_an(client)
+    antwort = client.get("/planung")
+    assert antwort.status_code == 200
+    assert 'src="https://cf.geekdo-images.com/cascadia.jpg"' in antwort.text
+    assert 'loading="lazy"' in antwort.text
+    assert 'decoding="async"' in antwort.text
+
+
+def test_archiv_zeigt_cover(app, client):
+    ArchivNeuheit = plugin_modul(app, "archiv").ArchivNeuheit
+    with app.state.session_factory() as db:
+        db.add(
+            ArchivNeuheit(
+                quell_id=1, titel="Altspiel",
+                bild_url="https://cf.geekdo-images.com/altspiel.jpg",
+            )
+        )
+        db.commit()
+
+    melde_an(client)
+    antwort = client.get("/archiv")
+    assert antwort.status_code == 200
+    assert 'src="https://cf.geekdo-images.com/altspiel.jpg"' in antwort.text
+    assert 'loading="lazy"' in antwort.text
--- a/tests/test_planung.py
+++ b/tests/test_planung.py
@@ -174,7 +174,8 @@ def test_migration_legt_planungsliste_an(app):
            text("SELECT version FROM schema_migrations WHERE plugin='planung'")
        ).fetchall()
    assert "planungsliste" in tabellen
-    assert [z[0] for z in protokoll] == ["0001_planungsliste"]
+    # 0002_bild_url: Coverbild-Spalte (seit der Cover-Erweiterung).
+    assert [z[0] for z in protokoll] == ["0001_planungsliste", "0002_bild_url"]


 def test_anonym_wird_zum_login_umgeleitet(client):