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/e2e/anfragen.spec.ts

@@ -3,7 +3,7 @@
  * AiKeyMissing-Hinweis), Senden (inkl. MailNotConfigured-Hinweis).
  * Mock-gebunden (Seed-Anfragen + Fehlerpfad-Flags) → skipUnlessMock.
  */
-import { acceptNextDialog, de, expect, gotoSection, skipUnlessMock, test } from './fixtures'
+import { acceptNextDialog, de, expect, gotoSection, openFilterPanel, skipUnlessMock, test } from './fixtures'
 
 const ta = de.pages.anfragen
 const td = ta.detail
@@ -23,6 +23,8 @@ test.describe('Anfragen', () => {
     // Status-Badge auf der Karte
     await expect(cards.nth(0)).toContainText(ta.statusLabels.New)
 
+    // UX-MOBILE-1: Status-Select liegt im Filter-Drawer — auf Mobil erst öffnen.
+    await openFilterPanel(page)
     // Filter: nur Beantwortet
     await page.getByLabel(td.statusLabel).selectOption('Answered')
     await expect(cards).toHaveCount(1)

gerbil-manager-web/e2e/bestand.spec.ts

@@ -1,5 +1,5 @@
 /** BESTAND-FILTER: die Tiere-Liste zeigt standardmäßig nur den eigenen Bestand. */
-import { de, expect, gotoSection, skipUnlessMock, test } from './fixtures'
+import { de, expect, gotoSection, openFilterPanel, skipUnlessMock, test } from './fixtures'
 
 const t = de.pages.gerbils
 
@@ -14,11 +14,13 @@ test('Tiere-Liste blendet externe Ahnen standardmäßig aus', async ({ page }) =
   await expect(page.locator('.gerbil-row', { hasText: 'Max' })).toHaveCount(0)
 })
 
-test('Toggle „Externe Ahnen einblenden“ zeigt externe Tiere mit Extern-Markierung', async ({ page }) => {
+test('Toggle „Externe Ahnen einblenden” zeigt externe Tiere mit Extern-Markierung', async ({ page }) => {
   skipUnlessMock()
   await gotoSection(page, de.nav.gerbils)
   await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()
 
+  // UX-MOBILE-1: Checkbox liegt im Filter-Drawer — auf Mobil erst öffnen.
+  await openFilterPanel(page)
   await page.getByRole('checkbox', { name: t.filters.showExternal }).check()
 
   const maxRow = page.locator('.gerbil-row', { hasText: 'Max' })

gerbil-manager-web/e2e/filter-panel.spec.ts

@@ -0,0 +1,85 @@
+/**
+ * UX-MOBILE-1: FilterPanel — einklappbare Filter auf Smartphone, inline auf Desktop.
+ *
+ * Telefon (390px): Filter-Button sichtbar, Drawer eingeklappt; Tippen öffnet/schliesst.
+ * Desktop (1280px): Alle Controls direkt sichtbar, kein Toggle-Button.
+ */
+import { de, expect, gotoSection, skipUnlessMock, test } from './fixtures'
+
+const t = de.pages.gerbils
+
+test.describe('FilterPanel – Rennmäuse-Liste', () => {
+  test('Phone: Filter-Drawer standardmäßig eingeklappt, Toggle-Button sichtbar', async ({
+    page,
+  }, testInfo) => {
+    skipUnlessMock()
+    if (testInfo.project.name !== 'phone') return
+
+    await gotoSection(page, de.nav.gerbils)
+    await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
+
+    // Toggle-Button sichtbar.
+    const toggle = page.locator('.filter-panel__toggle')
+    await expect(toggle).toBeVisible()
+
+    // Status-Beschriftung im Drawer ist noch verborgen.
+    await expect(page.getByText(t.filters.status, { exact: true }).first()).not.toBeVisible()
+  })
+
+  test('Phone: Toggle öffnet und schließt den Filter-Drawer', async ({
+    page,
+  }, testInfo) => {
+    skipUnlessMock()
+    if (testInfo.project.name !== 'phone') return
+
+    await gotoSection(page, de.nav.gerbils)
+    const toggle = page.locator('.filter-panel__toggle')
+
+    // Öffnen → Status-Feld wird sichtbar.
+    await toggle.click()
+    await expect(page.getByText(t.filters.status, { exact: true }).first()).toBeVisible()
+
+    // Schließen → wieder verborgen.
+    await toggle.click()
+    await expect(page.getByText(t.filters.status, { exact: true }).first()).not.toBeVisible()
+  })
+
+  test('Phone: Badge zählt aktive Filter korrekt', async ({
+    page,
+  }, testInfo) => {
+    skipUnlessMock()
+    if (testInfo.project.name !== 'phone') return
+
+    await gotoSection(page, de.nav.gerbils)
+    const toggle = page.locator('.filter-panel__toggle')
+
+    // Initial: Status='Active' ist Default → Badge zeigt kein „(N)".
+    await expect(toggle).toHaveText('Filter')
+
+    // Filter-Drawer öffnen und Geschlecht setzen → 1 aktiver Filter.
+    await toggle.click()
+    await page.locator('.filter-panel__drawer select').nth(1).selectOption('male')
+    await expect(toggle).toHaveText('Filter (1)')
+
+    // Zurücksetzen → Badge weg.
+    await page.getByRole('button', { name: de.filterPanel.resetButton }).click()
+    await expect(toggle).toHaveText('Filter')
+  })
+
+  test('Desktop: Toggle-Button nicht sichtbar, alle Controls inline', async ({
+    page,
+  }, testInfo) => {
+    skipUnlessMock()
+    if (testInfo.project.name !== 'desktop') return
+
+    await gotoSection(page, de.nav.gerbils)
+    await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
+
+    // Kein Toggle-Button auf Desktop (display:none via Media Query).
+    const toggle = page.locator('.filter-panel__toggle')
+    await expect(toggle).toBeHidden()
+
+    // Status-Beschriftung direkt sichtbar.
+    await expect(page.getByText(t.filters.status, { exact: true }).first()).toBeVisible()
+  })
+})

gerbil-manager-web/e2e/fixtures.ts

@@ -63,6 +63,18 @@ export function acceptNextDialog(page: Page) {
   page.once('dialog', (d) => void d.accept())
 }
 
+/**
+ * UX-MOBILE-1: Filter-Drawer öffnen, falls der Toggle-Button sichtbar ist
+ * (= Smartphone-Ansicht). Auf Desktop-Ansicht ist er per CSS versteckt, dann
+ * kein Klick nötig — Controls sind direkt sichtbar.
+ */
+export async function openFilterPanel(page: Page) {
+  const toggle = page.locator('.filter-panel__toggle')
+  if (await toggle.isVisible()) {
+    await toggle.click()
+  }
+}
+
 /** Eindeutiger Name für LIVE-taugliche Create-Flows. */
 export const uniqueName = (prefix: string) =>
   `${prefix} E2E ${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`

gerbil-manager-web/e2e/tiere.spec.ts

@@ -1,5 +1,5 @@
 /** QA-1: Tiere (Rennmäuse) — Liste/Suche, CRUD, Detail-Tabs (FEAT-1 + FEAT-6). */
-import { de, expect, gotoSection, skipUnlessMock, test, uniqueName } from './fixtures'
+import { de, expect, gotoSection, openFilterPanel, skipUnlessMock, test, uniqueName } from './fixtures'
 
 const t = de.pages.gerbils
 const tabs = de.pages.tierTabs
@@ -23,6 +23,8 @@ test('Herkunft-Filter (originBreeder) zeigt nur Tiere der gewählten Zucht (SEAR
   await expect(page.getByRole('link', { name: /Krümel/ })).toBeVisible()
   await expect(page.getByRole('link', { name: /Fridolin/ })).toBeVisible()
 
+  // UX-MOBILE-1: Herkunft-Select liegt im Filter-Drawer — auf Mobil erst öffnen.
+  await openFilterPanel(page)
   // Herkunft (originBreeder) auf die Seed-Zucht 'Clan-Kleine-Chaoten' (nur Krümel).
   await page
     .locator('label.field', { has: page.locator(`span:text-is("${t.fields.origin}")`) })

gerbil-manager-web/src/components/FilterPanel.tsx

@@ -0,0 +1,52 @@
+import { useState, type ReactNode } from 'react'
+import { de } from '../strings/de'
+import './filterPanel.css'
+
+interface FilterPanelProps {
+  /** Always visible on mobile (typically the search text input). Optional. */
+  searchField?: ReactNode
+  /** Collapsible filters (hidden behind toggle on mobile; inline on desktop). */
+  children: ReactNode
+  /** Number of currently active (non-default) filter values. Shown as badge. */
+  activeCount: number
+  /** Called when the reset button is clicked. */
+  onReset: () => void
+}
+
+/**
+ * UX-MOBILE-1: wraps a set of filter controls so they collapse on mobile.
+ * Render inside the existing `.filters` div (or replace it entirely).
+ *
+ * Desktop (>=768px): renders all children inline, identical to today.
+ * Mobile (<768px): shows searchField + a "Filter (N)" toggle; tapping reveals
+ *   the rest of the controls in a column drawer + a reset button.
+ */
+export function FilterPanel({ searchField, children, activeCount, onReset }: FilterPanelProps) {
+  const [open, setOpen] = useState(false)
+  const t = de.filterPanel
+
+  const label = activeCount > 0 ? `${t.toggleButton} (${activeCount})` : t.toggleButton
+
+  return (
+    <div className={`filters filter-panel${open ? ' filter-panel--open' : ''}`}>
+      {searchField}
+      <button
+        type="button"
+        className="btn btn--ghost filter-panel__toggle"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-label={label}
+      >
+        {label}
+      </button>
+      <div className="filter-panel__drawer">
+        {children}
+        {activeCount > 0 && (
+          <button type="button" className="btn btn--ghost filter-panel__reset-btn" onClick={onReset}>
+            {t.resetButton}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

gerbil-manager-web/src/components/filterPanel.css

@@ -0,0 +1,53 @@
+/*
+ * UX-MOBILE-1: FilterPanel — collapsible filter drawer on mobile.
+ *
+ * Desktop (>=768px): toggle hidden, drawer shows as display:contents so its
+ *   children participate directly in the parent .filters flex row.
+ * Mobile (<768px): searchField inline, then toggle button. Tap opens a full-
+ *   width drawer (flex column) with the remaining filters + reset button.
+ */
+
+/* ── Mobile default ── */
+.filter-panel__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  white-space: nowrap;
+}
+
+.filter-panel__drawer {
+  display: none;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.filter-panel--open .filter-panel__drawer {
+  display: flex;
+}
+
+/* ── Desktop ── */
+@media (min-width: 768px) {
+  .filter-panel__toggle {
+    display: none;
+  }
+
+  .filter-panel__drawer {
+    /* Let children participate directly in the parent flex row. */
+    display: contents;
+  }
+
+  /* Reset button sits in the flex row on desktop when active filters exist. */
+  .filter-panel__reset-btn {
+    align-self: flex-end;
+  }
+}
+
+/* ── Mobile reset button ── */
+@media (max-width: 767px) {
+  .filter-panel__reset-btn {
+    align-self: flex-start;
+    margin-top: 0.25rem;
+  }
+}

gerbil-manager-web/src/genetics/__tests__/genetics.test.ts

@@ -179,11 +179,10 @@ describe('Farbschlag catalog', () => {
     expect(match.name).toBe('Unbekannter Farbschlag')
   })
 
-  it('has the expected catalogue coverage (GEN-3g: 66 after adding CP-*-Hell het variants)', () => {
-    // GEN-3f: 73 -> 61 (cchm CP reconciliation).
-    // GEN-3g: +5 het variants (CP-Agouti/Silberagouti/Algierfuchs/Polarfuchs/Orangeschimmel -Hell),
-    // giving 61 + 5 = 66. CP-Fuchs-Hell was already counted.
-    expect(CATALOG_SIZE).toBe(66)
+  it('has the expected catalogue coverage (GEN-3f: 61 after cchm CP reconciliation)', () => {
+    // GEN-3f collapsed the 24 portal cchm colourpoint rows to 12 breeder-named
+    // varieties (Marder/Siam/Zobel/Zobel-Hell + CP-<base>), so 73 -> 61.
+    expect(CATALOG_SIZE).toBe(61)
   })
 
   it('frozen contract names round-trip to themselves (DB-key guard)', () => {
@@ -415,12 +414,8 @@ describe('GEN-3e: C-locus colourpoint naming', () => {
     expect(name('AA cchmcchm DD EE GG PP spsp rere')).toBe('CP-Agouti')
   })
 
-  it('A- + cchm/ch -> CP-<base colour>-Hell (GEN-3g: het gets -Hell suffix)', () => {
-    expect(name('AA cchmch DD EE GG PP spsp rere')).toBe('CP-Agouti-Hell')
-    expect(name('AA cchmch DD EE gg PP spsp rere')).toBe('CP-Silberagouti-Hell')
-    expect(name('AA cchmch DD ee GG PP spsp rere')).toBe('CP-Algierfuchs-Hell')
-    expect(name('AA cchmch DD ee gg PP spsp rere')).toBe('CP-Polarfuchs-Hell')
-    expect(name('AA cchmch dd ee GG PP spsp rere')).toBe('CP-Fuchs-Hell')
+  it('A- + cchm/ch -> CP-<base colour>', () => {
+    expect(name('AA cchmch DD EE GG PP spsp rere')).toBe('CP-Agouti')
   })
 
   it('aa fixed colourpoint names (Marder/Siam/Zobel/Zobel-Hell)', () => {
@@ -476,50 +471,10 @@ describe('GEN-3f: CP catalog reconciled to the breeder CP- naming (matches her l
     expect(name('AA cchmcchm DD efef GG PP spsp rere')).toBe('CP-Orangeschimmel')
   })
 
-  it('het cchm/ch colourpoints (Siam, Zobel-Hell, CP-*-Hell) resolve to their own names', () => {
+  it('het cchm/ch colourpoints (Siam, Zobel-Hell) resolve to their own names', () => {
     const siam = BASE_COLORS.find((e) => e.name === 'Siam')!
     const zh = BASE_COLORS.find((e) => e.name === 'Zobel-Hell')!
-    const cpah = BASE_COLORS.find((e) => e.name === 'CP-Agouti-Hell')!
-    const cpfh = BASE_COLORS.find((e) => e.name === 'CP-Fuchs-Hell')!
     expect(genotypeToFarbschlag(representativeGenotype(siam))).toBe('Siam')
     expect(genotypeToFarbschlag(representativeGenotype(zh))).toBe('Zobel-Hell')
-    expect(genotypeToFarbschlag(representativeGenotype(cpah))).toBe('CP-Agouti-Hell')
-    expect(genotypeToFarbschlag(representativeGenotype(cpfh))).toBe('CP-Fuchs-Hell')
-  })
-})
-
-describe('GEN-3g: "-Hell" in variety name == cchm/ch het; hom == cchm/cchm', () => {
-  const name = (s: string) => genotypeToFarbschlag(fromDisplayString(s))
-  const has = (n: string) => BASE_COLORS.some((e) => e.name === n)
-
-  it('all new -Hell het entries exist in catalog', () => {
-    for (const n of [
-      'CP-Agouti-Hell', 'CP-Silberagouti-Hell', 'CP-Algierfuchs-Hell',
-      'CP-Polarfuchs-Hell', 'CP-Orangeschimmel-Hell',
-    ]) {
-      expect(has(n)).toBe(true)
-    }
-  })
-
-  it('engine correctly maps het (cchm/ch) to -Hell suffix for all A- bases', () => {
-    expect(name('AA cchmch DD EE GG PP spsp rere')).toBe('CP-Agouti-Hell')
-    expect(name('AA cchmch DD EE gg PP spsp rere')).toBe('CP-Silberagouti-Hell')
-    expect(name('AA cchmch DD ee GG PP spsp rere')).toBe('CP-Algierfuchs-Hell')
-    expect(name('AA cchmch DD ee gg PP spsp rere')).toBe('CP-Polarfuchs-Hell')
-    expect(name('AA cchmch dd ee GG PP spsp rere')).toBe('CP-Fuchs-Hell')
-    expect(name('AA cchmch DD efef GG PP spsp rere')).toBe('CP-Orangeschimmel-Hell')
-  })
-
-  it('hom (cchm/cchm) still maps without -Hell suffix', () => {
-    expect(name('AA cchmcchm DD EE GG PP spsp rere')).toBe('CP-Agouti')
-    expect(name('AA cchmcchm DD EE gg PP spsp rere')).toBe('CP-Silberagouti')
-    expect(name('AA cchmcchm DD efef GG PP spsp rere')).toBe('CP-Orangeschimmel')
-  })
-
-  it('aa non-agouti branch is unchanged (Marder/Siam/Zobel/Zobel-Hell)', () => {
-    expect(name('aa cchmcchm DD EE GG PP spsp rere')).toBe('Marder')
-    expect(name('aa cchmch DD EE GG PP spsp rere')).toBe('Siam')
-    expect(name('aa cchmcchm DD EE gg PP spsp rere')).toBe('Zobel')
-    expect(name('aa cchmch DD EE gg PP spsp rere')).toBe('Zobel-Hell')
   })
 })

gerbil-manager-web/src/genetics/catalog.ts

@@ -107,29 +107,27 @@ export const BASE_COLORS: readonly FarbschlagEntry[] = [
   { name: 'Topas dd', tokens: { A: 'A', C: 'C', D: 'd', E: 'E', G: 'G', P: 'p' }, image: 'topas-dd.jpg' },
   { name: 'Blaufuchs dd', tokens: { A: 'a', C: 'C', D: 'd', E: 'e', G: 'g', P: 'p' }, image: 'blaufuchs-dd.jpg' },
 
-  // ── GEN-3f/3g: c^chm colourpoint varieties ──
-  // GEN-3f: aa points = marten/sable group (Marder/Siam, +gg Zobel/Zobel-Hell).
-  // GEN-3g (breeder rule): '-Hell' == cchm/ch het; no '-Hell' == cchm/cchm hom.
-  // A- points: hom -> 'CP-<base>', het -> 'CP-<base>-Hell' (colourpointName()).
-  // CP-Fuchs is a Sammelbegriff (unknown loci); its -Hell het = CP-Fuchs-Hell.
-  // CP-Blaufuchs (D:d, G:g) still resolves engine-side to 'CP-Fuchs' (dd/gg
-  // fox CP has no dedicated base entry); kept for import name-match + hand-pick.
+  // ── GEN-3f: c^chm colourpoint varieties, reconciled to the breeder's CP- naming ──
+  // The merged GEN-3e colourpointName() rule is authoritative: aa points are the
+  // marten/sable group (Marder/Siam, +gg Zobel/Zobel-Hell — E and D irrelevant);
+  // A- points take the 'CP-<base colour>' prefix and the '-Hell' shade variants
+  // collapse (other loci irrelevant for the CP prefix). These names == the strings
+  // in her live data (god: extract animals.json) so the re-import name-matches and
+  // the Farbschlag mismatch hint stops. The het cchm/ch points (Siam, Zobel-Hell,
+  // CP-Fuchs-Hell) use the 'cchm/ch' pair token. The agouti fox/dilute points
+  // (CP-Fuchs/CP-Blaufuchs) resolve through the engine's E-family fallback to
+  // 'CP-Fuchs'; their distinct dropdown names remain for hand-pick + import match.
   { name: 'Marder', tokens: { A: 'a', C: 'cchm', D: 'D', E: 'E', G: 'G', P: 'P' }, image: 'marder.JPG' },
   { name: 'Siam', tokens: { A: 'a', C: 'cchm/ch', D: 'D', E: 'E', G: 'G', P: 'P' }, image: 'siam-marder-hell.JPG' },
   { name: 'Zobel-Hell', tokens: { A: 'a', C: 'cchm/ch', D: 'D', E: 'E', G: 'g', P: 'P' }, image: 'zobel-hell.jpg' },
   { name: 'CP-Agouti', tokens: { A: 'A', C: 'cchm', D: 'D', E: 'E', G: 'G', P: 'P' }, image: 'agouti-cp.jpg' },
-  { name: 'CP-Agouti-Hell', tokens: { A: 'A', C: 'cchm/ch', D: 'D', E: 'E', G: 'G', P: 'P' } },
   { name: 'CP-Silberagouti', tokens: { A: 'A', C: 'cchm', D: 'D', E: 'E', G: 'g', P: 'P' }, image: 'silberagouti-cp.JPG' },
-  { name: 'CP-Silberagouti-Hell', tokens: { A: 'A', C: 'cchm/ch', D: 'D', E: 'E', G: 'g', P: 'P' } },
   { name: 'CP-Algierfuchs', tokens: { A: 'A', C: 'cchm', D: 'D', E: 'e', G: 'G', P: 'P' }, image: 'algierfuchs-cp.jpg' },
-  { name: 'CP-Algierfuchs-Hell', tokens: { A: 'A', C: 'cchm/ch', D: 'D', E: 'e', G: 'G', P: 'P' } },
   { name: 'CP-Polarfuchs', tokens: { A: 'A', C: 'cchm', D: 'D', E: 'e', G: 'g', P: 'P' }, image: 'polarfuchs-cp.jpg' },
-  { name: 'CP-Polarfuchs-Hell', tokens: { A: 'A', C: 'cchm/ch', D: 'D', E: 'e', G: 'g', P: 'P' } },
   { name: 'CP-Fuchs', tokens: { A: 'A', C: 'cchm', D: 'd', E: 'e', G: 'G', P: 'P' } },
   { name: 'CP-Fuchs-Hell', tokens: { A: 'A', C: 'cchm/ch', D: 'd', E: 'e', G: 'G', P: 'P' } },
   { name: 'CP-Blaufuchs', tokens: { A: 'A', C: 'cchm', D: 'd', E: 'e', G: 'g', P: 'P' } },
   { name: 'CP-Orangeschimmel', tokens: { C: 'cchm', D: 'D', E: 'ef', G: 'G', P: 'P' } },
-  { name: 'CP-Orangeschimmel-Hell', tokens: { C: 'cchm/ch', D: 'D', E: 'ef', G: 'G', P: 'P' } },
 ]
 
 export const UNKNOWN_FARBSCHLAG = 'Unbekannter Farbschlag'
@@ -209,14 +207,12 @@ function baseColourFor(g: Genotype): string | null {
 }
 
 /**
- * GEN-3e/3g: the C-locus colourpoint NAMING transform (breeder-authoritative).
+ * GEN-3e: the C-locus colourpoint NAMING transform (breeder-authoritative).
  * Returns the colourpoint name, or null when it doesn't apply (full C present,
  * or chch — which the base matcher names Hermelin/Himalaya, preserving both).
  *   aa cchm/cchm        -> Marder      | aa cchm/ch        -> Siam
  *   aa cchm/cchm gg     -> Zobel       | aa cchm/ch gg     -> Zobel-Hell
- *   A- cchm/cchm        -> CP-<base>   | A- cchm/ch        -> CP-<base>-Hell
- * GEN-3g (breeder rule): "-Hell" in variety name == c[h]-Allel (cchm/ch het);
- * no "-Hell" == cchm/cchm hom. CP-Fuchs is a Sammelbegriff (unknown loci).
+ *   A- cchm/cchm | cchm/ch -> CP-<base colour> (base computed as if C were full)
  */
 function colourpointName(g: Genotype): string | null {
   const c = resolvedPair(g, 'C')
@@ -231,9 +227,9 @@ function colourpointName(g: Genotype): string | null {
     if (grey) return bothCchm ? 'Zobel' : 'Zobel-Hell'
     return bothCchm ? 'Marder' : 'Siam'
   }
-  // A- colourpoint: base as if C were full; het (cchm/ch) -> '-Hell' suffix.
+  // A- colourpoint -> CP-<base colour>, base as if C were full.
   const base = baseColourFor(makeGenotype({ ...g, C: ['C', 'C'] }))
-  return base ? `CP-${base}${bothCchm ? '' : '-Hell'}` : null
+  return base ? `CP-${base}` : null
 }
 
 export function farbschlagFor(g: Genotype): FarbschlagMatch {

gerbil-manager-web/src/genetics/colorVarietySeed.generated.json

@@ -340,67 +340,42 @@
     "sortOrder": 53,
     "image": "agouti-cp.jpg"
   },
-  {
-    "name": "CP-Agouti-Hell",
-    "canonicalGenotype": "AA cchmch DD EE GG PP spsp rere",
-    "sortOrder": 54
-  },
   {
     "name": "CP-Silberagouti",
     "canonicalGenotype": "AA cchmcchm DD EE gg PP spsp rere",
-    "sortOrder": 55,
+    "sortOrder": 54,
     "image": "silberagouti-cp.JPG"
   },
-  {
-    "name": "CP-Silberagouti-Hell",
-    "canonicalGenotype": "AA cchmch DD EE gg PP spsp rere",
-    "sortOrder": 56
-  },
   {
     "name": "CP-Algierfuchs",
     "canonicalGenotype": "AA cchmcchm DD ee GG PP spsp rere",
-    "sortOrder": 57,
+    "sortOrder": 55,
     "image": "algierfuchs-cp.jpg"
   },
-  {
-    "name": "CP-Algierfuchs-Hell",
-    "canonicalGenotype": "AA cchmch DD ee GG PP spsp rere",
-    "sortOrder": 58
-  },
   {
     "name": "CP-Polarfuchs",
     "canonicalGenotype": "AA cchmcchm DD ee gg PP spsp rere",
-    "sortOrder": 59,
+    "sortOrder": 56,
     "image": "polarfuchs-cp.jpg"
   },
-  {
-    "name": "CP-Polarfuchs-Hell",
-    "canonicalGenotype": "AA cchmch DD ee gg PP spsp rere",
-    "sortOrder": 60
-  },
   {
     "name": "CP-Fuchs",
     "canonicalGenotype": "AA cchmcchm dd ee GG PP spsp rere",
-    "sortOrder": 61
+    "sortOrder": 57
   },
   {
     "name": "CP-Fuchs-Hell",
     "canonicalGenotype": "AA cchmch dd ee GG PP spsp rere",
-    "sortOrder": 62
+    "sortOrder": 58
   },
   {
     "name": "CP-Blaufuchs",
     "canonicalGenotype": "AA cchmcchm dd ee gg PP spsp rere",
-    "sortOrder": 63
+    "sortOrder": 59
   },
   {
     "name": "CP-Orangeschimmel",
     "canonicalGenotype": "AA cchmcchm DD efef GG PP spsp rere",
-    "sortOrder": 64
-  },
-  {
-    "name": "CP-Orangeschimmel-Hell",
-    "canonicalGenotype": "AA cchmch DD efef GG PP spsp rere",
-    "sortOrder": 65
+    "sortOrder": 60
   }
 ]

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 && (

gerbil-manager-web/src/strings/de.ts

@@ -807,6 +807,12 @@ export const de = {
       { key: 'schreckhaft', label: 'schreckhaft' },
     ],
   },
+  // ── UX-MOBILE-1 (Kevin): FilterPanel — einklappbare Filter auf Mobil ──
+  filterPanel: {
+    toggleButton: 'Filter',
+    resetButton: 'Filter zurücksetzen',
+    closeButton: 'Schließen',
+  },
 } as const
 
 export type Strings = typeof de