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

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