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/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() %}