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.

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

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>

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>