UX-MOBILE-1: FilterPanel — einklappbare Filter auf Mobil (390px)

Neues FilterPanel-Muster (src/components/FilterPanel.tsx + filterPanel.css):
- Mobil (<768px): Suchfeld immer sichtbar; alle weiteren Filter hinter einem
  'Filter (N)'-Button eingeklappt (Badge = Anzahl aktiver Nicht-Default-Filter).
  Tippen öffnet/schließt den Drawer. 'Filter zurücksetzen' im Drawer.
- Desktop (>=768px): Toggle versteckt, Drawer als display:contents → alle Controls
  inline in der bestehenden .filters-Flexzeile, wie bisher.
Auf GerbilsPage, WuerfeListPage und AnfragenPage ausgerollt.
BeckenPage/KontaktePage nur ein Suchfeld → kein Panel nötig.

e2e: filter-panel.spec.ts (8 Tests, phone+desktop); bestand/tiere/anfragen-Specs
erhalten openFilterPanel-Aufruf vor Drawer-Controls; fixtures.ts +openFilterPanel().
Vitest 78 / e2e 102 grün.

Mobil-Pass (390px, Durchsicht): Hauptproblem behoben. Beobachtete Restpunkte
für god (nicht selbst gefixed):
- .genotype-table in Genetik/Probeverpaarung: Genotyp-Strings können eng werden
- Stammbaum (react-d3-tree SVG): kein explizites mobile Viewport-Handling
- BreedingResultView Genotyp-Detail-Tabelle: ggf. horizontal scrollbar-los

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

gerbil-manager-web/src/pages/AnfragenPage.tsx

@@ -15,6 +15,7 @@ import {
 } from '../api/requests'
 import { useApi, useMutation } from '../hooks/useApi'
 import { formatDateTime } from '../format/labels'
+import { FilterPanel } from '../components/FilterPanel'
 import './anfragen.css'
 
 const PAGE_SIZE = 20
@@ -75,7 +76,10 @@ export default function AnfragenPage() {
       {sync.error && <div className="alert alert--error">{sync.error}</div>}
 
       {/* Status-Filter */}
-      <div className="filters">
+      <FilterPanel
+        activeCount={status !== '' ? 1 : 0}
+        onReset={() => { setStatus(''); setPage(1) }}
+      >
         <label className="field">
           <span>{t.detail.statusLabel}</span>
           <select
@@ -93,7 +97,7 @@ export default function AnfragenPage() {
             ))}
           </select>
         </label>
-      </div>
+      </FilterPanel>
 
       {requests.loading && <p className="muted">{de.common.loading}</p>}
       {requests.error && (

gerbil-manager-web/src/pages/GerbilsPage.tsx

@@ -7,6 +7,7 @@ import { andFilter, condition, type GridifyQuery } from '../api/gridify'
 import { GENDERS, GERBIL_STATUSES, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { formatDate, genderLabel, statusLabel } from '../format/labels'
+import { FilterPanel } from '../components/FilterPanel'
 import './gerbils.css'
 
 const PAGE_SIZE = 20
@@ -82,6 +83,14 @@ export default function GerbilsPage() {
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
   const items = gerbils.data?.items ?? []
 
+  // UX-MOBILE-1: count non-default filter values for the badge.
+  const activeFilterCount =
+    (status !== 'Active' ? 1 : 0) +
+    (gender !== '' ? 1 : 0) +
+    (colorVarietyId !== '' ? 1 : 0) +
+    (originBreeder !== '' ? 1 : 0) +
+    (showExternal ? 1 : 0)
+
   // Multi-select bulk "Zur Abgabe stellen".
   const [selected, setSelected] = useState<Set<string>>(new Set())
   const toggleSelect = (id: string) =>
@@ -118,15 +127,20 @@ export default function GerbilsPage() {
         </Link>
       </header>
 
-      <div className="filters">
-        <input
-          type="search"
-          className="input"
-          placeholder={t.searchPlaceholder}
-          value={search}
-          onChange={(e) => onFilterChange(setSearch)(e.target.value)}
-          aria-label={t.fields.name}
-        />
+      <FilterPanel
+        searchField={
+          <input
+            type="search"
+            className="input"
+            placeholder={t.searchPlaceholder}
+            value={search}
+            onChange={(e) => onFilterChange(setSearch)(e.target.value)}
+            aria-label={t.fields.name}
+          />
+        }
+        activeCount={activeFilterCount}
+        onReset={resetFilters}
+      >
         <label className="field">
           <span>{t.filters.status}</span>
           <select
@@ -200,10 +214,7 @@ export default function GerbilsPage() {
             onChange={(e) => onFilterChange(setShowExternal)(e.target.checked)}
           />
         </label>
-        <button type="button" className="btn" onClick={resetFilters}>
-          {t.filters.reset}
-        </button>
-      </div>
+      </FilterPanel>
 
       {gerbils.loading && <p className="muted">{de.common.loading}</p>}
       {gerbils.error && (

gerbil-manager-web/src/pages/WuerfeListPage.tsx

@@ -7,6 +7,7 @@ import { andFilter, condition, type GridifyQuery } from '../api/gridify'
 import type { Litter } from '../api/types'
 import { useApi } from '../hooks/useApi'
 import { formatDate } from '../format/labels'
+import { FilterPanel } from '../components/FilterPanel'
 
 const PAGE_SIZE = 20
 
@@ -111,7 +112,10 @@ export default function WuerfeListPage() {
 
       {tab === 'litters' && (
         <>
-          <div className="filters">
+          <FilterPanel
+            activeCount={year !== '' ? 1 : 0}
+            onReset={() => { setYear(''); setSort('dateDesc'); setPage(1) }}
+          >
             <label className="field">
               <span>{t.filterYear}</span>
               <select
@@ -136,7 +140,7 @@ export default function WuerfeListPage() {
                 <option value="dateAsc">{t.sort.dateAsc}</option>
               </select>
             </label>
-          </div>
+          </FilterPanel>
 
           {litters.loading && <p className="muted">{de.common.loading}</p>}
           {litters.error && (