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