feat(rennmaeuse): Tiere-Liste neu im Rennmaus-Filter-Design

Filter-UX aus dem Design:
- Quick-Chip-Kategorien (Status/Geschlecht/Farbschlag/Herkunft) öffnen ein
  Bottom-Sheet mit Mehrfachauswahl (suchbar bei Farbschlag/Herkunft); aktive
  Filter als entfernbare Chips; Sortierung + "Externe Ahnen" als gleich große
  Chips (Sortierung öffnet dasselbe Drawer).
- Neue zweizeilige Tierkarte (Name + Geschlechts-Kreis + Status-Badge, Meta-Zeile),
  cardIn/Chip/Sheet-Animationen, Titel blendet beim Scrollen aus.

App-weit:
- Design-Palette (Creme/Braun/Terrakotta), Hanken-Grotesk-Schrift und gemeinsamer
  --shadow-Token; obere "Rennmaus-Manager"-Titelleiste entfernt (mobil bleibt die
  untere Aktionsleiste); fixe Shell-Höhe, nur der Hauptbereich scrollt.

Funktion:
- Infinite Scroll via useInfiniteList (seitenweise) + IntersectionObserver-Sentinel.
- Namensgenerator: Option männlich/weiblich/egal.
- Mehrfach-OR-Filter über gridify orGroup; e2e an die neue UI angepasst.

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

GerbilManager.Tests/IngestResolvedServiceTests.cs

@@ -0,0 +1,181 @@
+using GerbilManagerWebAPI.Import;
+using GerbilManagerWebAPI.Models;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.Configuration;
+using System.Text.Json;
+
+namespace GerbilManager.Tests
+{
+    public class IngestResolvedServiceTests : IDisposable
+    {
+        private readonly string _dir;
+        private readonly string _resolvedJsonPath;
+
+        public IngestResolvedServiceTests()
+        {
+            _dir = Path.Combine(Path.GetTempPath(), "ingest-resolved-" + Guid.NewGuid().ToString("N"));
+            Directory.CreateDirectory(_dir);
+            _resolvedJsonPath = Path.Combine(_dir, "resolved_import.json");
+
+            var contactId = Guid.NewGuid();
+            var fatherId = Guid.NewGuid();
+            var motherId = Guid.NewGuid();
+            var litterId = Guid.NewGuid();
+            var photoId = Guid.NewGuid();
+
+            var data = new
+            {
+                Contacts = new[]
+                {
+                    new
+                    {
+                        Id = contactId,
+                        Name = "Test Breeder",
+                        ZuchtName = "Test Zucht",
+                        City = "Test City",
+                        Email = "test@example.com",
+                        Homepage = "",
+                        Phone = "",
+                        Address = ""
+                    }
+                },
+                Litters = new[]
+                {
+                    new
+                    {
+                        Id = litterId,
+                        Name = "Wurf A",
+                        Date = "2026-01-01",
+                        TotalBorn = 5,
+                        DeathsWithin8Weeks = 0,
+                        FatherId = fatherId,
+                        MotherId = motherId,
+                        ExpectedGoHomeDate = (string?)null,
+                        Notes = "Test litter notes",
+                        PairingCode = "PC01",
+                        ExternalRef = "ext-litter-1",
+                        LitterLetter = "A"
+                    }
+                },
+                Gerbils = new[]
+                {
+                    new
+                    {
+                        Id = fatherId,
+                        Name = "Papa",
+                        Gender = "male",
+                        Status = "Breeding",
+                        LitterId = (Guid?)null,
+                        OriginContactId = contactId,
+                        ReceiverContactId = (Guid?)null,
+                        EnclosureId = (Guid?)null,
+                        ColorVarietyId = new Guid("00000000-0000-0000-0000-000000000006"), // Schwarz
+                        DateOfBirth = "2025-01-01",
+                        DateOfDeath = (string?)null,
+                        CauseOfDeath = (string?)null,
+                        GoHomeDate = (string?)null,
+                        Genotype = "aa CC DD EE GG PP spsp rere",
+                        Notes = "",
+                        ImportSource = "docx-export",
+                        ExternalRef = "ext-papa",
+                        RawImportData = "{}",
+                        OriginBreeder = "Test Zucht",
+                        NameSearch = "papa",
+                        CharacterTraits = new string[] {},
+                        CharacterNote = (string?)null,
+                        IsDeaf = false,
+                        IsResident = true
+                    },
+                    new
+                    {
+                        Id = motherId,
+                        Name = "Mama",
+                        Gender = "female",
+                        Status = "Breeding",
+                        LitterId = (Guid?)null,
+                        OriginContactId = contactId,
+                        ReceiverContactId = (Guid?)null,
+                        EnclosureId = (Guid?)null,
+                        ColorVarietyId = new Guid("00000000-0000-0000-0000-000000000006"), // Schwarz
+                        DateOfBirth = "2025-01-01",
+                        DateOfDeath = (string?)null,
+                        CauseOfDeath = (string?)null,
+                        GoHomeDate = (string?)null,
+                        Genotype = "aa CC DD EE GG PP spsp rere",
+                        Notes = "",
+                        ImportSource = "docx-export",
+                        ExternalRef = "ext-mama",
+                        RawImportData = "{}",
+                        OriginBreeder = "Test Zucht",
+                        NameSearch = "mama",
+                        CharacterTraits = new string[] {},
+                        CharacterNote = (string?)null,
+                        IsDeaf = false,
+                        IsResident = true
+                    }
+                },
+                GerbilPhotos = new[]
+                {
+                    new
+                    {
+                        Id = photoId,
+                        GerbilId = fatherId,
+                        FileName = "photo1.jpg",
+                        SortOrder = 0
+                    }
+                }
+            };
+
+            File.WriteAllText(_resolvedJsonPath, JsonSerializer.Serialize(data));
+        }
+
+        public void Dispose()
+        {
+            try { Directory.Delete(_dir, recursive: true); } catch { }
+        }
+
+        private ApplicationContext NewDb()
+        {
+            var opts = new DbContextOptionsBuilder<ApplicationContext>()
+                .UseInMemoryDatabase("ingest-resolved-" + Guid.NewGuid().ToString("N"))
+                .Options;
+            var db = new ApplicationContext(opts);
+            db.Database.EnsureCreated();
+            return db;
+        }
+
+        [Fact]
+        public async Task IngestResolved_loads_data_and_resolves_all_relations()
+        {
+            using var db = NewDb();
+            var config = new ConfigurationBuilder()
+                .AddInMemoryCollection(new Dictionary<string, string?>
+                {
+                    { "Import:SourcePath", _dir }
+                })
+                .Build();
+
+            var service = new IngestResolvedService(db, config, null!);
+            var result = await service.RunAsync();
+
+            Assert.Contains("Ingestion successful!", result);
+
+            // Verify counts
+            Assert.Equal(1, await db.Contacts.CountAsync());
+            Assert.Equal(1, await db.Litters.CountAsync());
+            Assert.Equal(2, await db.Gerbils.CountAsync());
+            Assert.Equal(1, await db.GerbilPhotos.CountAsync());
+
+            // Verify relations
+            var litter = await db.Litters.SingleAsync();
+            var father = await db.Gerbils.SingleAsync(g => g.Name == "Papa");
+            var mother = await db.Gerbils.SingleAsync(g => g.Name == "Mama");
+            var photo = await db.GerbilPhotos.SingleAsync();
+
+            Assert.Equal(father.Id, litter.FatherId);
+            Assert.Equal(mother.Id, litter.MotherId);
+            Assert.Equal(father.Id, photo.GerbilId);
+            Assert.Equal(father.OriginContactId, mother.OriginContactId);
+        }
+    }
+}

GerbilManagerWebAPI/Endpoints/ImportEndpoints.cs

@@ -29,6 +29,13 @@ namespace GerbilManagerWebAPI.Endpoints
                 return TypedResults.Ok(report);
             });
 
+            group.MapPost("/ingest-resolved", async Task<Ok<string>> (
+                ApplicationContext db, IConfiguration config, IWebHostEnvironment env) =>
+            {
+                var result = await new IngestResolvedService(db, config, env).RunAsync();
+                return TypedResults.Ok(result);
+            });
+
             return app;
         }
     }

GerbilManagerWebAPI/Import/IngestResolvedService.cs

@@ -0,0 +1,192 @@
+using System.Text.Json;
+using GerbilManagerWebAPI.Models;
+using Microsoft.EntityFrameworkCore;
+
+namespace GerbilManagerWebAPI.Import
+{
+    public sealed class IngestResolvedService
+    {
+        private readonly ApplicationContext _db;
+        private readonly string _resolvedJsonPath;
+
+        public IngestResolvedService(ApplicationContext db, IConfiguration config, IWebHostEnvironment env)
+        {
+            _db = db;
+            var sourceDir = config["Import:SourcePath"]
+                ?? Path.GetFullPath(Path.Combine(env.ContentRootPath, "..", "tools", "import", "output"));
+            _resolvedJsonPath = Path.Combine(sourceDir, "resolved_import.json");
+        }
+
+        public async Task<string> RunAsync()
+        {
+            if (!File.Exists(_resolvedJsonPath))
+            {
+                return $"Error: Resolved import file not found at {_resolvedJsonPath}. Run resolve_import.py first.";
+            }
+
+            string jsonContent = await File.ReadAllTextAsync(_resolvedJsonPath);
+            var jsonOptions = new JsonSerializerOptions
+            {
+                PropertyNameCaseInsensitive = true
+            };
+            jsonOptions.Converters.Add(new System.Text.Json.Serialization.JsonStringEnumConverter());
+            var data = JsonSerializer.Deserialize<ResolvedImportData>(jsonContent, jsonOptions);
+
+            if (data == null)
+            {
+                return "Error: Failed to deserialize resolved_import.json.";
+            }
+
+            // 1. Provider-agnostic clean wipe of dependent tables to prevent duplicate keys
+            if (_db.Database.ProviderName == "Microsoft.EntityFrameworkCore.InMemory")
+            {
+                // Break circular references first
+                foreach (var l in _db.Litters)
+                {
+                    l.FatherId = null;
+                    l.MotherId = null;
+                }
+                foreach (var g in _db.Gerbils)
+                {
+                    g.LitterId = null;
+                }
+                await _db.SaveChangesAsync();
+
+                _db.GerbilPhotos.RemoveRange(_db.GerbilPhotos);
+                _db.WeightRecords.RemoveRange(_db.WeightRecords);
+                _db.HealthRecords.RemoveRange(_db.HealthRecords);
+                _db.Gerbils.RemoveRange(_db.Gerbils);
+                _db.Litters.RemoveRange(_db.Litters);
+                await _db.SaveChangesAsync();
+            }
+            else
+            {
+                // Break circular references first using ExecuteUpdateAsync
+                await _db.Litters.ExecuteUpdateAsync(s => s
+                    .SetProperty(l => l.FatherId, (Guid?)null)
+                    .SetProperty(l => l.MotherId, (Guid?)null));
+                
+                await _db.Gerbils.ExecuteUpdateAsync(s => s
+                    .SetProperty(g => g.LitterId, (Guid?)null));
+
+                await _db.GerbilPhotos.ExecuteDeleteAsync();
+                await _db.WeightRecords.ExecuteDeleteAsync();
+                await _db.HealthRecords.ExecuteDeleteAsync();
+                await _db.Gerbils.ExecuteDeleteAsync();
+                await _db.Litters.ExecuteDeleteAsync();
+            }
+
+            // 2. Import Contacts (Only add new ones to preserve manually entered contacts)
+            var existingContactIds = await _db.Contacts.Select(c => c.Id).ToHashSetAsync();
+            var addedContactIds = new HashSet<Guid>();
+            int contactsAdded = 0;
+            foreach (var c in data.Contacts)
+            {
+                if (!existingContactIds.Contains(c.Id) && addedContactIds.Add(c.Id))
+                {
+                    _db.Contacts.Add(c);
+                    contactsAdded++;
+                }
+            }
+            await _db.SaveChangesAsync();
+
+            // 3. Pass 1: Insert all Litters with parent references set to null to avoid FK errors
+            var littersToInsert = new List<Litter>();
+            foreach (var l in data.Litters)
+            {
+                littersToInsert.Add(new Litter
+                {
+                    Id = l.Id,
+                    Name = l.Name,
+                    Date = l.Date,
+                    TotalBorn = l.TotalBorn,
+                    DeathsWithin8Weeks = l.DeathsWithin8Weeks,
+                    FatherId = null, // Set in Pass 2
+                    MotherId = null, // Set in Pass 2
+                    ExpectedGoHomeDate = l.ExpectedGoHomeDate,
+                    Notes = l.Notes,
+                    PairingCode = l.PairingCode,
+                    ExternalRef = l.ExternalRef,
+                    LitterLetter = l.LitterLetter
+                });
+            }
+            _db.Litters.AddRange(littersToInsert);
+            await _db.SaveChangesAsync();
+
+            // 4. Pass 1: Insert all Gerbils with LitterId set to null to avoid FK errors
+            var gerbilsToInsert = new List<Gerbil>();
+            foreach (var g in data.Gerbils)
+            {
+                gerbilsToInsert.Add(new Gerbil
+                {
+                    Id = g.Id,
+                    Name = g.Name,
+                    Gender = g.Gender,
+                    Status = g.Status,
+                    LitterId = null, // Set in Pass 2
+                    OriginContactId = g.OriginContactId,
+                    ReceiverContactId = g.ReceiverContactId,
+                    EnclosureId = g.EnclosureId,
+                    ColorVarietyId = g.ColorVarietyId,
+                    DateOfBirth = g.DateOfBirth,
+                    DateOfDeath = g.DateOfDeath,
+                    CauseOfDeath = g.CauseOfDeath,
+                    GoHomeDate = g.GoHomeDate,
+                    Genotype = g.Genotype,
+                    Notes = g.Notes,
+                    ImportSource = g.ImportSource,
+                    ExternalRef = g.ExternalRef,
+                    RawImportData = g.RawImportData,
+                    OriginBreeder = g.OriginBreeder,
+                    NameSearch = g.NameSearch,
+                    CharacterTraits = g.CharacterTraits,
+                    CharacterNote = g.CharacterNote,
+                    IsDeaf = g.IsDeaf,
+                    IsResident = g.IsResident
+                });
+            }
+            _db.Gerbils.AddRange(gerbilsToInsert);
+            await _db.SaveChangesAsync();
+
+            // 5. Pass 2: Set the actual foreign key relationships
+            // Update Litters with their parent animal IDs
+            var littersInDb = await _db.Litters.ToDictionaryAsync(l => l.Id);
+            foreach (var l in data.Litters)
+            {
+                if (littersInDb.TryGetValue(l.Id, out var dbLitter))
+                {
+                    dbLitter.FatherId = l.FatherId;
+                    dbLitter.MotherId = l.MotherId;
+                }
+            }
+
+            // Update Gerbils with their actual LitterId
+            var gerbilsInDb = await _db.Gerbils.ToDictionaryAsync(g => g.Id);
+            foreach (var g in data.Gerbils)
+            {
+                if (gerbilsInDb.TryGetValue(g.Id, out var dbGerbil))
+                {
+                    dbGerbil.LitterId = g.LitterId;
+                }
+            }
+            await _db.SaveChangesAsync();
+
+            // 6. Insert all Photos
+            foreach (var p in data.GerbilPhotos)
+            {
+                _db.GerbilPhotos.Add(p);
+            }
+            await _db.SaveChangesAsync();
+
+            return $"Ingestion successful! Imported {contactsAdded} contacts, {data.Litters.Count} litters, {data.Gerbils.Count} gerbils, and {data.GerbilPhotos.Count} photos.";
+        }
+    }
+
+    public class ResolvedImportData
+    {
+        public List<Contact> Contacts { get; set; } = new();
+        public List<Litter> Litters { get; set; } = new();
+        public List<Gerbil> Gerbils { get; set; } = new();
+        public List<GerbilPhoto> GerbilPhotos { get; set; } = new();
+    }
+}

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, openFilterPanel, skipUnlessMock, test } from './fixtures'
+import { de, expect, gotoSection, skipUnlessMock, test } from './fixtures'
 
 const t = de.pages.gerbils
 
@@ -19,9 +19,8 @@ test('Toggle „Externe Ahnen einblenden” zeigt externe Tiere mit Extern-Marki
   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()
+  // DESIGN (Rennmaus Filter): „Externe Ahnen" ist ein Toggle-Chip (Button), kein Checkbox.
+  await page.getByRole('button', { name: t.filters.showExternalShort }).click()
 
   const maxRow = page.locator('.gerbil-row', { hasText: 'Max' })
   await expect(maxRow).toBeVisible()

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

@@ -1,85 +1,54 @@
 /**
- * UX-MOBILE-1: FilterPanel — einklappbare Filter auf Smartphone, inline auf Desktop.
+ * DESIGN (Rennmaus Filter.html): Quick-Chips-Filter der Rennmäuse-Liste.
  *
- * Telefon (390px): Filter-Button sichtbar, Drawer eingeklappt; Tippen öffnet/schliesst.
- * Desktop (1280px): Alle Controls direkt sichtbar, kein Toggle-Button.
+ * Eine Pillen-Reihe (Status / Geschlecht / Farbschlag / Herkunft) öffnet je ein
+ * Bottom-Sheet mit Mehrfachauswahl; gewählte Werte erscheinen als entfernbare
+ * Chips, „Alle löschen" setzt zurück. Mobile-first; identisches Verhalten auf Desktop.
  */
-import { de, expect, gotoSection, skipUnlessMock, test } from './fixtures'
+import { de, expect, gotoSection, selectListFilter, 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) => {
+test.describe('Quick-Chips-Filter – Rennmäuse-Liste', () => {
+  test('Kategorie-Pillen sind sichtbar', async ({ page }) => {
     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()
+    const quickrow = page.locator('.rmf-quickrow')
+    await expect(quickrow.getByRole('button', { name: t.filters.status })).toBeVisible()
+    await expect(quickrow.getByRole('button', { name: t.filters.gender })).toBeVisible()
+    await expect(quickrow.getByRole('button', { name: t.filters.colorVariety })).toBeVisible()
+    await expect(quickrow.getByRole('button', { name: t.fields.origin })).toBeVisible()
   })
 
-  test('Phone: Toggle öffnet und schließt den Filter-Drawer', async ({
+  test('Mehrfachauswahl erzeugt entfernbare Chips, „Alle löschen" setzt zurück', 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()
+    // Default: Zucht-Chip ist aktiv.
+    await expect(page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding })).toBeVisible()
 
-    // Schließen → wieder verborgen.
-    await toggle.click()
-    await expect(page.getByText(t.filters.status, { exact: true }).first()).not.toBeVisible()
+    // Geschlecht = männlich über das Sheet wählen → zweiter Chip erscheint.
+    await selectListFilter(page, t.filters.gender, t.genderLabels.male)
+    await expect(page.locator('.rmf-chip-val', { hasText: t.genderLabels.male })).toBeVisible()
+
+    // „Alle löschen" entfernt sämtliche Chips.
+    await page.getByRole('button', { name: de.filterBar.clearAll }).click()
+    await expect(page.locator('.rmf-chip')).toHaveCount(0)
   })
 
-  test('Phone: Badge zählt aktive Filter korrekt', async ({
-    page,
-  }, testInfo) => {
+  test('Einzelner Chip lässt sich per Klick entfernen', async ({ page }) => {
     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()
+    const breedingChip = page.locator('.rmf-chip', {
+      has: page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding }),
+    })
+    await expect(breedingChip).toBeVisible()
+    await breedingChip.click()
+    await expect(breedingChip).toHaveCount(0)
   })
 })

gerbil-manager-web/e2e/fixtures.ts

@@ -86,6 +86,18 @@ export async function openFilterPanel(page: Page) {
   }
 }
 
+/**
+ * DESIGN (Rennmaus Filter): wählt einen Wert im Quick-Chips-Filter der Rennmäuse-Liste.
+ * Öffnet das Bottom-Sheet der Kategorie, hakt die Option an und schließt mit „Fertig".
+ */
+export async function selectListFilter(page: Page, categoryLabel: string, optionLabel: string) {
+  // Pille der Kategorie in der Quick-Chips-Reihe öffnen (nicht den aktiven Chip treffen).
+  await page.locator('.rmf-quickrow').getByRole('button', { name: categoryLabel }).click()
+  const sheet = page.getByRole('dialog', { name: categoryLabel })
+  await sheet.getByRole('button', { name: optionLabel, exact: true }).click()
+  await sheet.getByRole('button', { name: de.filterBar.done }).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/navigation.spec.ts

@@ -3,7 +3,7 @@ import { de, expect, gotoSection, test } from './fixtures'
 
 test('alle Bereiche sind über die Navigation erreichbar', async ({ page }) => {
   await page.goto('/')
-  await expect(page.getByRole('heading', { name: de.app.title })).toBeVisible()
+  // DESIGN: the top "Rennmaus-Manager" title bar was removed — the page heading remains.
   await expect(page.getByRole('heading', { name: de.pages.gerbils.title, exact: true })).toBeVisible()
 
   await gotoSection(page, de.nav.gerbils)

gerbil-manager-web/e2e/status-model.spec.ts

@@ -37,10 +37,8 @@ test('Tier-Formular zeigt abgeleiteten Status Verstorben als Text + Hinweis', as
 test('Tiere-Liste zeigt Zucht als Standard-Status-Filter', async ({ page }) => {
   skipUnlessMock()
   await page.goto('/rennmaeuse')
-  const statusSelect = page
-    .locator('label.field', { has: page.locator(`span:text-is("${t.filters.status}")`) })
-    .locator('select')
-  await expect(statusSelect).toHaveValue('Breeding')
+  // DESIGN (Rennmaus Filter): der Default-Status erscheint als aktiver, entfernbarer Chip.
+  await expect(page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding })).toBeVisible()
 })
 
 test('Neues Tier anlegen mit Status Liebhaber', async ({ page }) => {

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, openFilterPanel, skipUnlessMock, test, uniqueName } from './fixtures'
+import { de, expect, gotoSection, selectListFilter, skipUnlessMock, test, uniqueName } from './fixtures'
 
 const t = de.pages.gerbils
 const tabs = de.pages.tierTabs
@@ -23,13 +23,9 @@ 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}")`) })
-    .locator('select')
-    .selectOption({ label: 'Clan-Kleine-Chaoten' })
+  // DESIGN (Rennmaus Filter): Herkunft (originBreeder) über das Quick-Chips-Sheet
+  // auf die Seed-Zucht 'Clan-Kleine-Chaoten' (nur Krümel) filtern.
+  await selectListFilter(page, t.fields.origin, 'Clan-Kleine-Chaoten')
 
   await expect(page.getByRole('link', { name: /Krümel/ })).toBeVisible()
   await expect(page.getByRole('link', { name: /Fridolin/ })).toBeHidden()

gerbil-manager-web/index.html

@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="Verwaltung für Rennmäuse, Würfe und Züchter" />
+    <!-- DESIGN (Rennmaus Filter): Hanken Grotesk als App-Schrift. -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
     <title>Rennmaus-Manager</title>
   </head>
   <body>

gerbil-manager-web/src/api/gridify.ts

@@ -61,6 +61,23 @@ export function andFilter(...conditions: Array<string | null | undefined | false
   return conditions.filter((c): c is string => Boolean(c)).join(',')
 }
 
+/**
+ * Build an OR-group of conditions for one field, e.g. `(status=Breeding|status=ForSale)`.
+ * Used for multi-select filters: several allowed values within one category are OR'd,
+ * while categories are AND'd together by {@link andFilter}.
+ * Returns '' for an empty value list (so andFilter drops it); a single value needs no parens.
+ */
+export function orGroup(
+  field: string,
+  values: ReadonlyArray<string | number | boolean>,
+  op: GridifyOp = '==',
+): string {
+  const parts = values.map((value) => condition({ field, op, value }))
+  if (parts.length === 0) return ''
+  if (parts.length === 1) return parts[0]
+  return `(${parts.join('|')})`
+}
+
 /** Assemble the URL query string ("?...") from a GridifyQuery. */
 export function toQueryString(q: GridifyQuery): string {
   const params = new URLSearchParams()

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

@@ -47,11 +47,6 @@ export default function AppShell() {
 
   return (
     <div className="app-shell">
-      <header className="app-header">
-        <span className="app-logo" aria-hidden="true"><GerbilIcon size="1.5rem" /></span>
-        <h1 className="app-title">{de.app.title}</h1>
-      </header>
-
       <nav className="app-nav" aria-label={de.nav.mainNavigation}>
         <div className="nav-primary">
           {PRIMARY.map((item) => (

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

@@ -0,0 +1,271 @@
+/**
+ * DESIGN (Rennmaus Filter.html): mobile-first filter UX —
+ *   1. a horizontal "Quick-Chips" pill row (one pill per category, with a count badge),
+ *   2. tapping a pill opens a bottom-sheet of multi-select options (✓ checkboxes,
+ *      searchable for long lists like Farbschlag / Herkunft),
+ *   3. active selections appear ABOVE the list as removable chips (so they scroll
+ *      away with the list), with "Alle löschen".
+ *
+ * The user landed on the Quick-Chips concept, dezent style, brown accent. Colors
+ * come from the app's existing tokens. `GerbilFilterBar` is the pill row + sheet;
+ * `ActiveFilterChips` renders the removable chips and is placed above the list.
+ */
+import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { de } from '../strings/de'
+import './gerbilFilterBar.css'
+
+export interface FilterOption {
+  value: string
+  label: string
+  /** Optional swatch dot (used for status colors). */
+  color?: string
+  /** Optional leading symbol (used for gender ♂ ♀ ?). */
+  symbol?: string
+}
+
+export interface FilterCategory {
+  /** Matches the Gridify field / the key into the selected map. */
+  key: string
+  label: string
+  /** Renders a search box above the option list (for long lists). */
+  searchable?: boolean
+  options: FilterOption[]
+}
+
+function countFor(selected: Record<string, string[]>, key: string): number {
+  return (selected[key] ?? []).length
+}
+
+interface GerbilFilterBarProps {
+  categories: FilterCategory[]
+  selected: Record<string, string[]>
+  onToggle: (key: string, value: string) => void
+}
+
+/** The Quick-Chips pill row + the category bottom-sheet. */
+export function GerbilFilterBar({ categories, selected, onToggle }: GerbilFilterBarProps) {
+  const t = de.filterBar
+  const [activeKey, setActiveKey] = useState<string | null>(null)
+  const activeCat = categories.find((c) => c.key === activeKey) ?? null
+
+  return (
+    <div className="rmf">
+      <div className="rmf-quickrow" role="group" aria-label={t.title}>
+        {categories.map((cat) => {
+          const n = countFor(selected, cat.key)
+          return (
+            <button
+              key={cat.key}
+              type="button"
+              className={'rmf-pill' + (n > 0 ? ' is-on' : '')}
+              onClick={() => setActiveKey(cat.key)}
+              aria-haspopup="dialog"
+            >
+              {cat.label}
+              {n > 0 && <span className="rmf-pill-count">{n}</span>}
+              <span className="rmf-pill-chev" aria-hidden="true">▾</span>
+            </button>
+          )
+        })}
+      </div>
+
+      {activeCat && (
+        <FilterSheet
+          cat={activeCat}
+          selected={selected[activeCat.key] ?? []}
+          onToggle={onToggle}
+          onClose={() => setActiveKey(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+interface ActiveFilterChipsProps {
+  categories: FilterCategory[]
+  selected: Record<string, string[]>
+  onRemove: (key: string, value: string) => void
+  onClearAll: () => void
+  /** Optional per-chip accent colour (e.g. status colours); falls back to the app accent. */
+  chipColor?: (key: string, value: string) => string | undefined
+}
+
+/**
+ * Removable chips for the active selections, placed above the list so they scroll
+ * away as you browse. Wraps onto multiple lines — nothing is hidden.
+ */
+export function ActiveFilterChips({
+  categories,
+  selected,
+  onRemove,
+  onClearAll,
+  chipColor,
+}: ActiveFilterChipsProps) {
+  const t = de.filterBar
+
+  const chips = categories.flatMap((cat) => {
+    const labelByValue = new Map(cat.options.map((o) => [o.value, o.label]))
+    return (selected[cat.key] ?? []).map((value) => ({
+      key: cat.key,
+      value,
+      catLabel: cat.label,
+      label: labelByValue.get(value) ?? value,
+    }))
+  })
+
+  if (chips.length === 0) return null
+
+  return (
+    <div className="rmf-chips">
+      {chips.map((c) => {
+        const accent = chipColor?.(c.key, c.value)
+        return (
+          <button
+            key={c.key + c.value}
+            type="button"
+            className="rmf-chip"
+            style={accent ? ({ '--chip': accent } as CSSProperties) : undefined}
+            onClick={() => onRemove(c.key, c.value)}
+            aria-label={`${c.catLabel}: ${c.label} — ${t.remove}`}
+          >
+            <span className="rmf-chip-cat">{c.catLabel}</span>
+            <span className="rmf-chip-val">{c.label}</span>
+            <span className="rmf-chip-x" aria-hidden="true">×</span>
+          </button>
+        )
+      })}
+      {chips.length > 1 && (
+        <button type="button" className="rmf-chip rmf-chip-clear" onClick={onClearAll}>
+          {t.clearAll}
+        </button>
+      )}
+    </div>
+  )
+}
+
+interface BottomSheetProps {
+  title: string
+  onClose: () => void
+  children: ReactNode
+}
+
+/**
+ * Reusable bottom-sheet: dimmed scrim + slide-up panel with grip, title and a
+ * "Fertig" button. Locks body scroll and closes on Escape / scrim tap. Used for
+ * the category filters AND the sort selector (same drawer mechanic).
+ */
+export function BottomSheet({ title, onClose, children }: BottomSheetProps) {
+  const t = de.filterBar
+
+  useEffect(() => {
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => {
+      document.body.style.overflow = prev
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [onClose])
+
+  // Portal to <body> so the sheet escapes any sticky/stacking-context ancestor
+  // (e.g. the sticky header) and renders above the bottom action bar.
+  return createPortal(
+    <div className="rmf-scrim" onClick={onClose} role="presentation">
+      <div
+        className="rmf-sheet"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="rmf-grip" aria-hidden="true" />
+        <div className="rmf-sheet-head">
+          <span className="rmf-sheet-title">{title}</span>
+          <button type="button" className="rmf-sheet-done" onClick={onClose}>
+            {t.done}
+          </button>
+        </div>
+        <div className="rmf-sheet-body">{children}</div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+interface FilterSheetProps {
+  cat: FilterCategory
+  selected: string[]
+  onToggle: (key: string, value: string) => void
+  onClose: () => void
+}
+
+function FilterSheet({ cat, selected, onToggle, onClose }: FilterSheetProps) {
+  return (
+    <BottomSheet title={cat.label} onClose={onClose}>
+      <OptionList cat={cat} selected={selected} onToggle={onToggle} />
+    </BottomSheet>
+  )
+}
+
+interface OptionListProps {
+  cat: FilterCategory
+  selected: string[]
+  onToggle: (key: string, value: string) => void
+}
+
+function OptionList({ cat, selected, onToggle }: OptionListProps) {
+  const t = de.filterBar
+  const [q, setQ] = useState('')
+
+  const options = useMemo(() => {
+    if (!cat.searchable) return cat.options
+    const term = q.trim().toLowerCase()
+    if (!term) return cat.options
+    return cat.options.filter((o) => o.label.toLowerCase().includes(term))
+  }, [cat, q])
+
+  return (
+    <div className="rmf-picker">
+      {cat.searchable && (
+        <input
+          className="rmf-search"
+          placeholder={t.searchPlaceholder}
+          value={q}
+          onChange={(e) => setQ(e.target.value)}
+          autoFocus
+          aria-label={t.searchPlaceholder}
+        />
+      )}
+      <div className={'rmf-optlist' + (cat.searchable ? ' rmf-optlist--scroll' : '')}>
+        {options.length === 0 && <div className="rmf-empty">{t.noMatch}</div>}
+        {options.map((o) => {
+          const on = selected.includes(o.value)
+          return (
+            <button
+              key={o.value}
+              type="button"
+              className={'rmf-opt' + (on ? ' is-on' : '')}
+              onClick={() => onToggle(cat.key, o.value)}
+              aria-pressed={on}
+            >
+              <span className="rmf-opt-box" aria-hidden="true">
+                {on ? '✓' : ''}
+              </span>
+              {o.color && <span className="rmf-opt-dot" style={{ background: o.color }} />}
+              {o.symbol && (
+                <span className="rmf-opt-sym" aria-hidden="true">
+                  {o.symbol}
+                </span>
+              )}
+              <span className="rmf-opt-label">{o.label}</span>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -43,6 +43,39 @@
   width: 5rem;
 }
 
+.namegen-panel__gender {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.namegen-gender-group {
+  display: inline-flex;
+  border: 1px solid var(--color-border);
+  border-radius: 0.4rem;
+  overflow: hidden;
+}
+
+.namegen-gender-btn {
+  background: none;
+  border: none;
+  border-left: 1px solid var(--color-border);
+  padding: 0.35rem 0.7rem;
+  font: inherit;
+  font-size: 0.9rem;
+  cursor: pointer;
+  color: var(--color-text);
+}
+
+.namegen-gender-btn:first-child {
+  border-left: none;
+}
+
+.namegen-gender-btn.is-active {
+  background: var(--color-accent, #2563eb);
+  color: #fff;
+}
+
 .namegen-panel__usages {
   display: flex;
   flex-direction: column;

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

@@ -12,9 +12,17 @@ interface NameSuggestPanelProps {
 
 const ALL_CODES = NAMEGEN_USAGES.map((u) => u.code) as NamegenUsageCode[]
 
+type GenderSelection = 'any' | 'female' | 'male'
+
+/** Map the gerbil form's gender onto the generator's three-way choice. */
+function seedGender(gender: string): GenderSelection {
+  return gender === 'female' || gender === 'male' ? gender : 'any'
+}
+
 export default function NameSuggestPanel({ gender, onPick, onClose }: NameSuggestPanelProps) {
   const t = de.namegen
   const [letter, setLetter] = useState('')
+  const [genderSel, setGenderSel] = useState<GenderSelection>(() => seedGender(gender))
   const [usages, setUsages] = useState<Set<NamegenUsageCode>>(new Set(ALL_CODES))
   const [loading, setLoading] = useState(false)
   const [keyMissing, setKeyMissing] = useState(false)
@@ -39,7 +47,7 @@ export default function NameSuggestPanel({ gender, onPick, onClose }: NameSugges
     try {
       const result = await suggestNames({
         letter: letter.trim() || undefined,
-        gender: gender || undefined,
+        gender: genderSel === 'any' ? undefined : genderSel,
         usages: [...usages] as NamegenUsageCode[],
         count: 6,
       })
@@ -78,6 +86,28 @@ export default function NameSuggestPanel({ gender, onPick, onClose }: NameSugges
           />
         </div>
 
+        <div className="namegen-panel__gender">
+          <span>{t.genderLabel}</span>
+          <div className="namegen-gender-group" role="radiogroup" aria-label={t.genderLabel}>
+            {([
+              ['any', t.genderAny],
+              ['female', t.genderFemale],
+              ['male', t.genderMale],
+            ] as const).map(([value, label]) => (
+              <button
+                key={value}
+                type="button"
+                role="radio"
+                aria-checked={genderSel === value}
+                className={`namegen-gender-btn ${genderSel === value ? 'is-active' : ''}`}
+                onClick={() => setGenderSel(value)}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+
         <div className="namegen-panel__usages">
           <span>{t.usagesLabel}</span>
           <div className="namegen-usages-grid">

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

@@ -0,0 +1,427 @@
+/* DESIGN (Rennmaus Filter.html): Quick-Chips + Bottom-Sheet + entfernbare Chips.
+   Mobile-first. Palette + font sizes are taken 1:1 from the design (the app tokens
+   are now the design's creme/brown/terracotta), so this matches the prototype. */
+
+.rmf {
+  --rmf-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  margin: 0.5rem 0 0.25rem;
+}
+
+/* ---------- Quick-Chips pill row ---------- */
+.rmf-quickrow {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 2px 0 4px;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+.rmf-quickrow::-webkit-scrollbar {
+  display: none;
+}
+.rmf-pill {
+  flex-shrink: 0;
+  cursor: pointer;
+  font: inherit;
+  background: #fff;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  padding: 9px 13px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  box-shadow: var(--shadow);
+  transition: transform 0.12s var(--rmf-ease), border-color 0.15s, color 0.15s, background 0.15s;
+}
+.rmf-pill:active {
+  transform: scale(0.94);
+}
+.rmf-pill.is-on {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: var(--color-accent-soft);
+}
+.rmf-pill-count {
+  background: var(--color-accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 800;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.rmf-pill-chev {
+  font-size: 11px;
+  color: var(--color-text-faint);
+}
+
+/* ---------- Active filter chips ---------- */
+.rmf-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.625rem;
+}
+.rmf-chip {
+  --chip: var(--color-accent);
+  cursor: pointer;
+  font: inherit;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: color-mix(in srgb, var(--chip) 12%, #fff);
+  border: 1px solid color-mix(in srgb, var(--chip) 32%, transparent);
+  color: color-mix(in srgb, var(--chip) 78%, #2b2723);
+  padding: 6px 8px 6px 11px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  animation: rmfChipIn 0.22s var(--rmf-ease);
+  transition: transform 0.1s;
+}
+.rmf-chip:active {
+  transform: scale(0.94);
+}
+.rmf-chip-cat {
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.rmf-chip-val {
+  font-weight: 700;
+}
+.rmf-chip-x {
+  font-size: 15px;
+  line-height: 1;
+  width: 17px;
+  height: 17px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--chip) 22%, transparent);
+  border-radius: 50%;
+}
+.rmf-chip-clear {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+}
+.rmf-chip-clear .rmf-chip-x {
+  display: none;
+}
+@keyframes rmfChipIn {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ---------- Bottom-Sheet ---------- */
+.rmf-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: rgba(43, 33, 25, 0.42);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  animation: rmfScrim 0.2s ease;
+}
+@keyframes rmfScrim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.rmf-sheet {
+  width: 100%;
+  max-width: 460px;
+  background: var(--color-bg);
+  border-radius: 22px 22px 0 0;
+  max-height: 82vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 -8px 40px rgba(43, 33, 25, 0.25);
+  animation: rmfSheetUp 0.32s var(--rmf-ease);
+}
+@keyframes rmfSheetUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.rmf-grip {
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--color-text-faint);
+  opacity: 0.5;
+  margin: 9px auto 4px;
+}
+.rmf-sheet-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 1rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.rmf-sheet-title {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--color-text);
+}
+.rmf-sheet-done {
+  background: var(--color-accent);
+  color: #fff;
+  border: none;
+  font: inherit;
+  font-weight: 700;
+  font-size: 14px;
+  padding: 0.5rem 1rem;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.rmf-sheet-body {
+  overflow-y: auto;
+  padding: 0.5rem 1rem 1.5rem;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ---------- Option list (multi-select checkboxes) ---------- */
+.rmf-picker {
+  display: flex;
+  flex-direction: column;
+}
+.rmf-search {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  background: #fff;
+  border-radius: 14px;
+  padding: 0.75rem 0.875rem;
+  font: inherit;
+  font-size: 1rem;
+  color: var(--color-text);
+  outline: none;
+  margin: 0.25rem 0 0.375rem;
+}
+.rmf-search:focus {
+  border-color: var(--color-accent);
+}
+.rmf-optlist {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 4px;
+}
+.rmf-optlist--scroll {
+  max-height: 46vh;
+  overflow-y: auto;
+}
+.rmf-opt {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  background: none;
+  border: none;
+  font: inherit;
+  padding: 0.75rem 0.375rem;
+  cursor: pointer;
+  color: var(--color-text);
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: left;
+  width: 100%;
+  border-radius: 10px;
+  transition: background 0.12s;
+}
+.rmf-opt:hover {
+  background: var(--color-accent-soft);
+}
+.rmf-opt.is-on {
+  font-weight: 700;
+}
+.rmf-opt-box {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+  border: 1.5px solid var(--color-border);
+  background: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #fff;
+  font-weight: 800;
+  transition: background 0.14s, border-color 0.14s;
+}
+.rmf-opt.is-on .rmf-opt-box {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.rmf-opt-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.rmf-opt-sym {
+  width: 22px;
+  text-align: center;
+  font-size: 16px;
+  color: var(--color-text-muted);
+}
+.rmf-opt-label {
+  flex: 1;
+}
+.rmf-empty {
+  padding: 1.1rem 0.375rem;
+  color: var(--color-text-muted);
+  font-size: 15px;
+}
+
+/* ---------- Search bar ---------- */
+.rmf-searchbar {
+  margin-top: 0.75rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+}
+.rmf-search-ico {
+  padding-left: 0.875rem;
+  font-size: 19px;
+  color: var(--color-text-faint);
+}
+.rmf-searchfield {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  font: inherit;
+  font-size: 16px;
+  color: var(--color-text);
+  padding: 0.875rem 0.75rem;
+  min-width: 0;
+}
+.rmf-searchfield::placeholder {
+  color: var(--color-text-faint);
+}
+.rmf-search-clear {
+  border: none;
+  background: var(--color-accent-soft);
+  color: var(--color-text-muted);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 0.625rem;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+/* ---------- Bar: Externe-Ahnen toggle + Sortieren — two equal-width chips ---------- */
+.rm-bar {
+  display: flex;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin-top: 0.625rem;
+}
+
+/* Shared pill: both chips are the SAME size (flex: 1 → equal width). */
+.rmf-bar-chip {
+  flex: 1 1 0;
+  min-width: 0;
+  cursor: pointer;
+  font: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background: #fff;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+  padding: 8px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: var(--shadow);
+  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
+}
+.rmf-bar-chip:active {
+  transform: scale(0.97);
+}
+/* Externe-Ahnen active state. */
+.rmf-bar-chip.is-on {
+  background: var(--color-accent-soft);
+  border-color: color-mix(in srgb, var(--color-accent) 32%, transparent);
+  color: color-mix(in srgb, var(--color-accent) 78%, #2b2723);
+}
+.rmf-bar-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rmf-bar-chip-ico {
+  color: var(--color-accent);
+  font-weight: 800;
+}
+.rmf-bar-chip-chev {
+  font-size: 11px;
+  color: var(--color-text-faint);
+}
+
+/* Toggle icon circle on the Externe-Ahnen chip (+ → ✓). */
+.rmf-chip-toggle-ico {
+  font-size: 14px;
+  line-height: 1;
+  width: 17px;
+  height: 17px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-weight: 800;
+  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  color: var(--color-accent);
+  transition: background 0.15s, color 0.15s;
+}
+.rmf-bar-chip.is-on .rmf-chip-toggle-ico {
+  background: var(--color-accent);
+  color: #fff;
+}
+
+/* Desktop: the sheet becomes a centered modal rather than a bottom drawer. */
+@media (min-width: 768px) {
+  .rmf-scrim {
+    align-items: center;
+  }
+  .rmf-sheet {
+    border-radius: 18px;
+    max-width: 420px;
+    max-height: 70vh;
+    animation: rmfChipIn 0.2s var(--rmf-ease);
+  }
+}

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

@@ -16,6 +16,7 @@ import {
   fromJSON,
   wildType,
   extractGenotypeFlags,
+  displayGenotypeSafe,
 } from '../genotype'
 import { combineLocus } from '../punnett'
 import { LOCI, type LocusKey } from '../loci'
@@ -686,4 +687,48 @@ describe('GEN-3h: breeder bracket-notation display + E-locus e-before-ef order',
     expect(g.Sp).toEqual(['Sp', 'sp'])
     expect(toDisplayString(g)).toBe('aa c[chm]c[chm] Dd e- Gg Pp Spsp')
   })
+
+  // ── GENOTYPE-PARSE-CRASH / displayGenotypeSafe resilience ───────────────
+  it('handles blank c locus and c[-] resiliently without crashing', () => {
+    // Vandana's genotype
+    const rawVandana = 'Aa Cc Dd eef Gg P? spsp ??'
+    const g = fromDisplayString(rawVandana)
+    expect(g.C).toEqual(['C', '?'])
+    expect(toDisplayString(g)).toBe('Aa C- Dd ee[f] Gg P- spsp')
+
+    // cchmc allele
+    const g2 = fromDisplayString('Aa cchmc Dd ee Gg Pp spsp')
+    expect(g2.C).toEqual(['cchm', '?'])
+    expect(toDisplayString(g2)).toBe('Aa c[chm]- Dd ee Gg Pp spsp')
+
+    // c[-] and blank c standalone
+    const g3 = fromDisplayString('Aa c[-] Dd ee Gg Pp spsp')
+    expect(g3.C).toEqual(['C', 'C']) // default to wild-type since c[-] was skipped
+    expect(toDisplayString(g3)).toBe('Aa CC Dd ee Gg Pp spsp')
+
+    const g4 = fromDisplayString('Aa c Dd ee Gg Pp spsp')
+    expect(g4.C).toEqual(['C', 'C']) // default to wild-type since c was skipped
+    expect(toDisplayString(g4)).toBe('Aa CC Dd ee Gg Pp spsp')
+  })
+
+  it('displayGenotypeSafe formats parsed genotypes and handles fallback safely', () => {
+    // 1. Parseable with unknown alleles, replacing ? with -
+    expect(displayGenotypeSafe('Aa C? Dd')).toBe('Aa C- Dd EE GG PP spsp')
+
+    // 2. Parseable with trailing ?? (stripped completely)
+    expect(displayGenotypeSafe('Aa CC Dd EE GG Pp spsp ??')).toBe('Aa CC Dd EE GG Pp spsp')
+    expect(displayGenotypeSafe('Aa Cc Dd eef Gg P? spsp ??')).toBe('Aa C- Dd ee[f] Gg P- spsp')
+    expect(displayGenotypeSafe('Aa CC Dd EE GG Pp spsp Slsl ??')).toBe('Aa CC Dd EE GG Pp spsp Slsl')
+
+    // 3. Unparseable fallback: removes ?? / -- / [-], replaces remaining ? with -
+    expect(displayGenotypeSafe('Aa Cc XX ??')).toBe('Aa Cc XX')
+    expect(displayGenotypeSafe('Aa Cc XX --')).toBe('Aa Cc XX')
+    expect(displayGenotypeSafe('Aa Cc XX [-]')).toBe('Aa Cc XX')
+    expect(displayGenotypeSafe('Aa Cc? XX')).toBe('Aa Cc- XX')
+
+    // 4. Handles null/undefined/empty
+    expect(displayGenotypeSafe(null)).toBe('')
+    expect(displayGenotypeSafe(undefined)).toBe('')
+    expect(displayGenotypeSafe('')).toBe('')
+  })
 })

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

@@ -192,6 +192,11 @@ function normalizeToken(tok: string): string | null {
   // the generic [-]→? rule below (which makes the bracket-dash a wildcard,
   // leaving the leading allele intact for splitToken).
   t = t.replace(/(?<=[A-Za-z])e\[-\]/g, '?')
+  t = t.replace(/(?<=[A-Za-z])c\[-\]/g, '?')
+  t = t.replace(/(?<=[A-Za-z])c$/g, '?')
+  t = t.replace(/^c\[-\]$/g, '??')
+  t = t.replace(/^c\?$/g, '??')
+  t = t.replace(/^c$/g, '??')
   t = t.replace(/\[-\]/g, '?')       // bare/standalone bracket-unknown → wildcard
   // GEN-3c: plain dash is the breeder's UNKNOWN marker on input; store internally as '?'.
   t = t.replace(/-/g, '?')
@@ -257,6 +262,25 @@ export function fromDisplayString(input: string): Genotype {
   return makeGenotype({ ...base, ...acc })
 }
 
+export function displayGenotypeSafe(raw: string | null | undefined): string {
+  if (!raw) return ''
+  try {
+    const parsed = fromDisplayString(raw)
+    return toDisplayString(parsed)
+  } catch {
+    // Fallback path:
+    return raw
+      .trim()
+      .split(/\s+/)
+      .filter((tok) => {
+        const norm = normalizeToken(tok)
+        return norm !== null && norm !== '?' && norm !== '??'
+      })
+      .map((tok) => tok.replace(/\?/g, '-'))
+      .join(' ')
+  }
+}
+
 export function hasUnknown(g: Genotype): boolean {
   return LOCUS_ORDER.some((l) => g[l][0] === WILDCARD || g[l][1] === WILDCARD)
 }

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

@@ -20,6 +20,7 @@ export {
   toJSON,
   fromJSON,
   hasUnknown,
+  displayGenotypeSafe,
   WILDCARD,
 } from './genotype'
 export type { Genotype, AllelePair } from './genotype'

gerbil-manager-web/src/hooks/useApi.ts

@@ -21,7 +21,7 @@ export interface AsyncState<T> {
   reload: () => void
 }
 
-function messageFor(err: unknown): string {
+export function messageFor(err: unknown): string {
   if (err instanceof ApiError) return err.message
   if (err instanceof Error && err.message) return err.message
   return de.api.errors.unknown

gerbil-manager-web/src/hooks/useInfiniteList.ts

@@ -0,0 +1,116 @@
+/**
+ * Server-paginated infinite list (no react-query).
+ *
+ * `loader(page)` fetches ONE page; pages are accumulated into `items`. The list
+ * never loads everything up front — `loadMore()` (wired to a scroll sentinel)
+ * advances exactly one page at a time until `hasMore` is false.
+ *
+ * Changing `resetKey` (e.g. the filter/sort/search signature) clears the list and
+ * reloads from page 1. `reload()` re-fetches page 1 on demand (e.g. retry).
+ *
+ * Design mirrors useApi (and satisfies the strict react-hooks rules):
+ *  - the request signature lives in `req`; the query reset on `resetKey` change is
+ *    an in-render state adjustment (not a setState-in-effect), so no cascade.
+ *  - `loading` / `loadingMore` are DERIVED from resolved-vs-current request keys,
+ *    never set synchronously inside the fetch effect.
+ *  - the loader is read through a ref so the effect keys purely on the request id.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { messageFor } from './useApi'
+import type { Paged } from '../api/types'
+
+export interface InfiniteListState<T> {
+  items: T[]
+  total: number
+  /** Initial / reset load (page 1) in flight. */
+  loading: boolean
+  /** A subsequent page is being appended. */
+  loadingMore: boolean
+  error: string | null
+  hasMore: boolean
+  /** Advance one page; the scroll sentinel calls this. */
+  loadMore: () => void
+  /** Re-fetch from page 1 (retry). */
+  reload: () => void
+}
+
+interface Req {
+  key: string
+  page: number
+  nonce: number
+}
+
+interface Resolved<T> {
+  reqId: string
+  items: T[]
+  total: number
+  error: string | null
+}
+
+export function useInfiniteList<T>(
+  loader: (page: number) => Promise<Paged<T>>,
+  resetKey: string,
+): InfiniteListState<T> {
+  const loaderRef = useRef(loader)
+  useEffect(() => {
+    loaderRef.current = loader
+  })
+
+  const [req, setReq] = useState<Req>({ key: resetKey, page: 1, nonce: 0 })
+  // Adjust state during render when the query signature changes — the recommended
+  // pattern for deriving state from changed inputs (no setState-in-effect cascade).
+  if (req.key !== resetKey) {
+    setReq({ key: resetKey, page: 1, nonce: 0 })
+  }
+
+  const queryId = `${req.nonce}:${req.key}`
+  const reqId = `${queryId}#${req.page}`
+
+  const [resolved, setResolved] = useState<Resolved<T>>({
+    reqId: '',
+    items: [],
+    total: 0,
+    error: null,
+  })
+
+  useEffect(() => {
+    let cancelled = false
+    const page = req.page
+    const id = `${req.nonce}:${req.key}#${page}`
+    loaderRef
+      .current(page)
+      .then((res) => {
+        if (cancelled) return
+        setResolved((prev) => ({
+          reqId: id,
+          // page 1 replaces (fresh query); later pages append.
+          items: page === 1 ? res.items : [...prev.items, ...res.items],
+          total: res.totalCount,
+          error: null,
+        }))
+      })
+      .catch((err) => {
+        if (!cancelled) setResolved((prev) => ({ ...prev, reqId: id, error: messageFor(err) }))
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [req]) // req is a fresh object per change (key/page/nonce) → one fetch per change
+
+  // Resolved data only counts if it belongs to the current query signature.
+  const resolvedQueryId = resolved.reqId.slice(0, resolved.reqId.lastIndexOf('#'))
+  const sameQuery = resolved.reqId !== '' && resolvedQueryId === queryId
+  const inFlight = resolved.reqId !== reqId
+
+  const items = sameQuery ? resolved.items : []
+  const total = sameQuery ? resolved.total : 0
+  const loading = !sameQuery || (inFlight && req.page === 1)
+  const loadingMore = sameQuery && inFlight && req.page > 1
+  const error = inFlight ? null : sameQuery ? resolved.error : null
+  const hasMore = sameQuery && !inFlight && items.length < total
+
+  const loadMore = useCallback(() => setReq((r) => ({ ...r, page: r.page + 1 })), [])
+  const reload = useCallback(() => setReq((r) => ({ key: r.key, page: 1, nonce: r.nonce + 1 })), [])
+
+  return { items, total, loading, loadingMore, error, hasMore, loadMore, reload }
+}

gerbil-manager-web/src/index.css

@@ -2,15 +2,20 @@
    Seitenleiste links ab 768px (Laptop). */
 
 :root {
-  --color-bg: #faf7f2;
+  /* DESIGN (Rennmaus Filter): the app palette is the design's creme/brown/terracotta. */
+  --color-bg: #f6efe2;
   --color-surface: #ffffff;
-  --color-border: #e5ddd0;
-  --color-text: #3b3026;
-  --color-text-muted: #8a7d6b;
-  --color-accent: #b5651d;
-  --color-accent-soft: #f6e7d7;
+  --color-border: #e7dcc8;
+  --color-text: #3d2e23;
+  --color-text-muted: #8c7f6e;
+  --color-text-faint: #b4a790;
+  --color-accent: #a85f2e;
+  --color-accent-soft: #f3e7da;
+  /* DESIGN (Rennmaus Filter): the single soft elevation used on cards, pills,
+     the search bar and buttons. */
+  --shadow: 0 1px 2px rgba(61, 46, 35, 0.06), 0 2px 8px rgba(61, 46, 35, 0.05);
 
-  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: 'Hanken Grotesk', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   color: var(--color-text);
   background-color: var(--color-bg);
@@ -41,46 +46,41 @@ a {
 
 /* --- Grundgerüst (Smartphone) --- */
 
+/* DESIGN: the top "Rennmaus-Manager" title bar is removed; on mobile only the
+   bottom action bar remains, on desktop the left sidebar.
+   The shell is a fixed viewport box and ONLY the main area scrolls — so the bottom
+   nav (mobile) and the sidebar (desktop) stay put, and the page header's
+   position: sticky pins reliably to the top of the scrolling main area. */
 .app-shell {
   display: grid;
-  min-height: 100dvh;
-  grid-template-rows: auto 1fr auto;
+  height: 100dvh;
+  overflow: hidden;
+  grid-template-rows: 1fr auto;
   grid-template-areas:
-    'header'
     'main'
     'nav';
 }
 
-.app-header {
-  grid-area: header;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background: var(--color-surface);
-  border-bottom: 1px solid var(--color-border);
-  position: sticky;
-  top: 0;
-}
-
-.app-logo {
-  font-size: 1.5rem;
-}
-
-.app-title {
-  font-size: 1.15rem;
-  margin: 0;
-}
-
 .app-main {
   grid-area: main;
-  padding: 1rem;
+  /* No top padding: the page's sticky header pins flush to the top with no gap
+     (pages add their own top spacing via .page). */
+  padding: 0 1rem 1.5rem;
   max-width: 60rem;
   width: 100%;
-  /* UX-MOBILE-2: prevent any wide content (e.g. genotype table) from making
-     the page body scroll horizontally. The .genotype-table-scroll wrapper
-     provides the per-table horizontal scroll. */
+  /* MAIN is the scroll container: min-height:0 lets the 1fr grid row shrink below
+     its content so it can scroll. overflow-anchor:none stops the browser from
+     re-adjusting scroll when the sticky title collapses (no scroll "fight"). */
+  min-height: 0;
+  overflow-y: auto;
   overflow-x: hidden;
+  overflow-anchor: none;
+}
+
+/* Top spacing for page content (replaces the removed .app-main top padding). The
+   Rennmäuse page opts out — its sticky header provides its own top padding. */
+.page {
+  padding-top: 1rem;
 }
 
 /* Tab-Leiste unten */
@@ -92,6 +92,8 @@ a {
   border-top: 1px solid var(--color-border);
   position: sticky;
   bottom: 0;
+  /* Above the sticky page header + cards so it is never overlapped. */
+  z-index: 30;
   padding-bottom: env(safe-area-inset-bottom);
 }
 
@@ -122,10 +124,8 @@ a {
 @media (min-width: 768px) {
   .app-shell {
     grid-template-columns: 14rem 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'header header'
-      'nav    main';
+    grid-template-rows: 1fr;
+    grid-template-areas: 'nav main';
   }
 
   .app-nav {
@@ -136,6 +136,9 @@ a {
     border-right: 1px solid var(--color-border);
     padding: 1rem 0.5rem;
     position: static;
+    /* Sidebar stays fixed; scrolls internally only if the link list is taller
+       than the viewport. */
+    overflow-y: auto;
   }
 
   .nav-link {
@@ -156,7 +159,7 @@ a {
   }
 
   .app-main {
-    padding: 1.5rem 2rem;
+    padding: 0 2rem 1.5rem;
   }
 }
 

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

@@ -6,7 +6,7 @@ import { listLitters as listLittersPaged } from '../api/litters'
 import { listColorVarieties, listContacts, listEnclosures, listLitters } from '../api/lookups'
 import { useApi, useMutation } from '../hooks/useApi'
 import { formatDate, genderLabel, statusLabel } from '../format/labels'
-import { fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
+import { fromDisplayString, genotypeToFarbschlag, displayGenotypeSafe } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
 import Charakterbogen from '../components/Charakterbogen'
 // FEAT-6 (Oscar): Tab-Inhalte + Profilfoto
@@ -22,10 +22,10 @@ function describeGenotype(genotype: string | null): { display: string; farbschla
   if (!genotype || !genotype.trim()) return null
   try {
     const g = fromDisplayString(genotype)
-    return { display: toDisplayString(g), farbschlag: genotypeToFarbschlag(g) }
+    return { display: displayGenotypeSafe(genotype), farbschlag: genotypeToFarbschlag(g) }
   } catch {
-    // Unparseable: show the raw value, no derived Farbschlag.
-    return { display: genotype, farbschlag: de.genetics.unknownFarbschlag }
+    // Unparseable: show the safely-rendered raw value, no derived Farbschlag.
+    return { display: displayGenotypeSafe(genotype), farbschlag: de.genetics.unknownFarbschlag }
   }
 }
 

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

@@ -29,7 +29,7 @@ import type { Gender, Gerbil, Litter } from '../api/types'
 import { useApi } from '../hooks/useApi'
 import { formatDate, genderLabel } from '../format/labels'
 import GerbilIcon from '../components/GerbilIcon'
-import { UNKNOWN_FARBSCHLAG, fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
+import { UNKNOWN_FARBSCHLAG, fromDisplayString, genotypeToFarbschlag, displayGenotypeSafe } from '../genetics'
 import {
   DEFAULT_GENERATIONS,
   ancestorsAt,
@@ -424,7 +424,7 @@ function PedigreeCard({
             style={chip ? { background: chip.bg, color: chip.fg } : undefined}
             title={farbschlag}
           >
-            {g.genotype || farbschlag}
+            {g.genotype ? displayGenotypeSafe(g.genotype) : farbschlag}
           </span>
         )}
         {dob && <span className="pedigree-card__year">* {dob}</span>}
@@ -574,7 +574,13 @@ function PrintCell({
       {farbschlag && <div className="stammbaum-print__sub">{farbschlag}</div>}
       {g.genotype && gen <= 2 && (
         <div className="stammbaum-print__geno">
-          {toDisplayString(fromDisplayString(g.genotype))}
+          {(() => {
+            try {
+              return displayGenotypeSafe(g.genotype)
+            } catch {
+              return g.genotype.replace(/\?/g, '-')
+            }
+          })()}
         </div>
       )}
     </div>

gerbil-manager-web/src/pages/gerbils.css

@@ -1,33 +1,247 @@
 /* FEAT-12a multi-select on the Tiere list — page-scoped. */
 
+/* The sticky header supplies the top spacing, so opt out of the global .page top
+   padding (otherwise the bar wouldn't pin flush to the top). */
+.gerbils-page {
+  padding-top: 0;
+}
+
 .gerbil-row {
+  /* DESIGN (Rennmaus Filter): cards ease in (fade + slight rise) instead of popping
+     when the result set changes. React keys by id, so only newly-appearing rows
+     replay this; rows that persist across a filter change are reused and stay put. */
+  animation: gerbilRowIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+/* Light cascade so a fresh result set sweeps in rather than landing all at once.
+   Capped at the first handful of rows; the rest share the last delay. */
+.gerbil-row:nth-child(1) { animation-delay: 0s; }
+.gerbil-row:nth-child(2) { animation-delay: 0.03s; }
+.gerbil-row:nth-child(3) { animation-delay: 0.06s; }
+.gerbil-row:nth-child(4) { animation-delay: 0.09s; }
+.gerbil-row:nth-child(5) { animation-delay: 0.12s; }
+.gerbil-row:nth-child(6) { animation-delay: 0.15s; }
+.gerbil-row:nth-child(n + 7) { animation-delay: 0.18s; }
+
+@keyframes gerbilRowIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gerbil-row {
+    animation: none;
+  }
+}
+
+.rm-noresults {
+  text-align: center;
+  padding: 2.5rem 1rem;
   display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-
-.gerbil-row__check {
-  width: 1.25rem;
-  height: 1.25rem;
-  min-height: 0;
-  flex: 0 0 auto;
-}
-
-.gerbil-row > .gerbil-card {
-  flex: 1;
-}
-
-.bulk-bar {
-  display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 0.75rem;
-  flex-wrap: wrap;
-  padding: 0.6rem 0.9rem;
-  margin: 0.5rem 0;
-  border: 1px solid var(--color-accent);
-  border-radius: 0.5rem;
-  background: var(--color-accent-soft);
+}
+
+/* Consistent breathing room below the sticky header: between the header and the
+   list (no active filters) and between the active chips and the first card. */
+.gerbils-page .card-list {
+  margin-top: 0.625rem;
+}
+
+/* Infinite scroll: invisible sentinel observed to trigger the next page,
+   plus a centered "loading more" line while a page is being appended. */
+.rmf-sentinel {
+  height: 1px;
+  width: 100%;
+}
+.rmf-loadmore {
+  text-align: center;
+  padding: 0.75rem 0;
+}
+
+/* ---------- DESIGN (Rennmaus Filter): sticky header that blends out on scroll ----------
+   The whole header (title + search + filter pills + bar) sticks to the top; the list
+   scrolls underneath. The title row collapses once a 1px sentinel above the header
+   leaves the viewport. Negative margins let the bar span the app-main padding so its
+   background/border reach edge-to-edge while pinned. */
+.gerbils-scrolltop {
+  height: 1px;
+}
+.gerbils-topbar {
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 10;
+  background: var(--color-bg);
+  /* Horizontal negative margins let the bar's background + border-bottom span the
+     app-main padding edge-to-edge while pinned. The body scrolls, so the app-main
+     top padding scrolls away and the bar pins flush to the viewport top (no gap). */
+  margin: 0 -1rem;
+  padding: 0.5rem 1rem 0.625rem;
+  border-bottom: 1px solid var(--color-border);
+}
+@media (min-width: 768px) {
+  .gerbils-topbar {
+    margin: 0 -2rem;
+    padding: 0.75rem 2rem 0.625rem;
+  }
+}
+
+.gerbils-head h2 {
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--color-text);
+}
+.gerbils-head .muted {
+  font-size: 14px;
+  margin: 2px 0 0;
+}
+.gerbils-head {
+  overflow: hidden;
+  /* Generous cap so the expanded state never clips when the "Neu" button wraps on
+     narrow phones; the collapse still animates cleanly from this height to 0. */
+  max-height: 200px;
+  transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease,
+    margin 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.gerbils-head--condensed {
+  max-height: 0;
+  opacity: 0;
+  margin: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .gerbils-head {
+    transition: none;
+  }
+}
+
+/* ---------- DESIGN (Rennmaus Filter): new two-row list card ----------
+   Name + gender circle + status badge on top, "Farbschlag · Herkunft · geb. Datum"
+   below. Overrides the former single-row grid card from index.css. */
+.gerbil-card {
+  display: flex;
+  flex-direction: column;
+  /* Override the old single-row card's `align-items: center` (index.css) — in a
+     column flex that centers children horizontally and shoved the name off the left. */
+  align-items: stretch;
+  gap: 0.5rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 18px;
+  background: var(--color-surface);
+  box-shadow: var(--shadow);
+  text-decoration: none;
+  color: var(--color-text);
+  transition: border-color 0.15s, box-shadow 0.15s,
+    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
+}
+.gerbil-card:hover {
+  background: var(--color-surface);
+  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
+  box-shadow: 0 2px 6px rgba(61, 46, 35, 0.1), 0 8px 22px rgba(61, 46, 35, 0.08);
+}
+.gerbil-card:active {
+  transform: scale(0.992);
+}
+
+.gerbil-card__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.625rem;
+}
+.gerbil-card__name {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-text);
+  display: inline-flex;
+  align-items: center;
+}
+.gerbil-card__right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+.gerbil-card__meta {
+  font-size: 14px;
+  color: var(--color-text-muted);
+  font-weight: 500;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+}
+.gerbil-card__meta-strong {
+  color: var(--color-text);
+  font-weight: 600;
+}
+.gerbil-card__dot {
+  color: var(--color-text-faint);
+}
+
+/* Status badge: design size (12px/700), coloured per status below. */
+.gerbil-card .badge {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+/* Gender circle (♂/♀/?) — colored disc, from the design's GeschlechtIcon. */
+.gerbil-sex {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.gerbil-sex--male {
+  color: #5a7da8;
+  background: color-mix(in srgb, #5a7da8 12%, #fff);
+}
+.gerbil-sex--female {
+  color: #c2703d;
+  background: color-mix(in srgb, #c2703d 12%, #fff);
+}
+.gerbil-sex--unknown {
+  color: #9a938a;
+  background: color-mix(in srgb, #9a938a 14%, #fff);
+}
+
+/* Status badge coloured per status — scoped to cards so other pages stay as-is. */
+.gerbil-card .badge--breeding {
+  color: #5e8c5a;
+  background: color-mix(in srgb, #5e8c5a 12%, #fff);
+  border: 1px solid color-mix(in srgb, #5e8c5a 30%, transparent);
+}
+.gerbil-card .badge--pet {
+  color: #5a7da8;
+  background: color-mix(in srgb, #5a7da8 12%, #fff);
+  border: 1px solid color-mix(in srgb, #5a7da8 30%, transparent);
+}
+.gerbil-card .badge--forsale {
+  color: #c2703d;
+  background: color-mix(in srgb, #c2703d 12%, #fff);
+  border: 1px solid color-mix(in srgb, #c2703d 30%, transparent);
+}
+.gerbil-card .badge--deceased {
+  color: #8a847b;
+  background: color-mix(in srgb, #8a847b 14%, #fff);
+  border: 1px solid color-mix(in srgb, #8a847b 30%, transparent);
+}
+.gerbil-card .badge--givenaway {
+  color: #b08e5c;
+  background: color-mix(in srgb, #b08e5c 14%, #fff);
+  border: 1px solid color-mix(in srgb, #b08e5c 32%, transparent);
 }

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

@@ -44,6 +44,8 @@ export const de = {
       empty: 'Keine Rennmäuse gefunden.',
       countLabel: 'Tiere',
       searchPlaceholder: 'Name suchen …',
+      // DESIGN (Rennmaus Filter): „geb." Präfix vor dem Geburtsdatum auf der Karte.
+      born: 'geb.',
       // BESTAND-FILTER: Kennzeichnung externer (nicht zum eigenen Bestand gehörender) Tiere
       externalBadge: 'Extern',
       externalTitle: 'Externes Tier — gehört nicht zum eigenen Bestand, nur für den Stammbaum erfasst.',
@@ -58,6 +60,8 @@ export const de = {
         sortBy: 'Sortieren nach',
         // BESTAND-FILTER: eigener Bestand (Clan) vs. externe Ahnen (nur Stammbaum)
         showExternal: 'Externe Ahnen einblenden',
+        // DESIGN (Rennmaus Filter): kurze Variante für den Toggle-Chip.
+        showExternalShort: 'Externe Ahnen',
         showExternalHint: 'Tiere aus fremden Zuchten, die nur für den Stammbaum erfasst sind.',
       },
       // Sortier-Optionen
@@ -872,12 +876,26 @@ export const de = {
     resetButton: 'Filter zurücksetzen',
     closeButton: 'Schließen',
   },
+  // ── DESIGN (Rennmaus Filter): Quick-Chips-Filter mit Bottom-Sheet ──
+  filterBar: {
+    title: 'Filter',
+    done: 'Fertig',
+    clearAll: 'Alle löschen',
+    remove: 'entfernen',
+    searchPlaceholder: 'Suchen …',
+    noMatch: 'Kein Treffer',
+    searchClear: 'Suche leeren',
+  },
   // ── FEAT-NAMEGEN: Namensvorschläge (KI-gestützt, UC-1 Einzeltier) ──
   namegen: {
     button: 'Name vorschlagen',
     panelTitle: 'Namensvorschläge',
     letterLabel: 'Anfangsbuchstabe',
     letterPlaceholder: 'z. B. A',
+    genderLabel: 'Geschlecht',
+    genderAny: 'Egal',
+    genderFemale: 'Weiblich',
+    genderMale: 'Männlich',
     usagesLabel: 'Herkunftskultur',
     loadButton: 'Vorschläge laden',
     loading: 'Lade Vorschläge …',

import_todo.md

@@ -0,0 +1,88 @@
+# TODO: Migration to Unified Database-Ready Format
+
+This is the checklist for migrating the GerbilManager Excel datasets (41 Stammbaum pedigree charts + 1 Wurfchronik litter chronicle) one-by-one into a clean, resolved, relational JSON format (`gerbilmanager_resolved.json`) that can be loaded directly into the database without on-the-fly reconciliation.
+
+---
+
+## 🟩 Phase 1: Preparation & Schema Definition
+- [x] Define the target unified JSON schema that maps 1-to-1 with the Entity Framework database entities:
+  - `Contacts` (breeders/buyers)
+  - `ColorVarieties` (genetics catalog)
+  - `Litters` (with resolved `MotherId` and `FatherId` Guid relations)
+  - `Gerbils` (with resolved `LitterId`, `ColorVarietyId`, `OriginContactId`, `ReceiverContactId` Guid relations)
+  - `GerbilPhotos` (mapped by Guid relation)
+- [x] Extract and verify existing `ColorVarieties` and `Contacts` to establish basic lookup dictionaries.
+
+---
+
+## 🟦 Phase 2: Spreadsheet Extraction & Conversion (One-by-One)
+Convert and extract each spreadsheet's records. For each chart, extract the animals, birth dates, death dates, genders (from cell background color), and genotypes.
+
+### Litter Chronicle
+- [x] `Wurfchronik der Kleine Chaoten Teil1.xlsx` (Litters data base)
+
+### Pedigree Charts (Stammbäume)
+- [x] `Stammbaum von Akio Kids.xlsx`
+- [x] `Stammbaum von Alberto Kids.xlsx`
+- [x] `Stammbaum von CP-Fuchs, CP-Sa Sp von Unity.xlsx`
+- [x] `Stammbaum von Chesnut.xlsx`
+- [x] `Stammbaum von Danako.xlsx`
+- [x] `Stammbaum von Ella.xlsx`
+- [x] `Stammbaum von Emi.xlsx`
+- [x] `Stammbaum von Fire Kids.xlsx`
+- [x] `Stammbaum von Goldfuchs Sp (Pikachu) Kids.xlsx`
+- [x] `Stammbaum von Hana.xlsx`
+- [x] `Stammbaum von Jeremy.xlsx`
+- [x] `Stammbaum von Jiminy of Black Forest.xlsx`
+- [x] `Stammbaum von Jin.xlsx`
+- [x] `Stammbaum von Kalea.xlsx`
+- [x] `Stammbaum von Kazuya.xlsx`
+- [x] `Stammbaum von Kentucky.xlsx`
+- [x] `Stammbaum von Kohlief, Goldfuchsef Sp von Chrissi.xlsx`
+- [x] `Stammbaum von Marlin of Black Forest.xlsx`
+- [x] `Stammbaum von Martin.xlsx`
+- [x] `Stammbaum von Oscar of Black Forest.xlsx`
+- [x] `Stammbaum von Pinto of Fiomi.xlsx`
+- [x] `Stammbaum von Quied Soldier of Black Forest.xlsx`
+- [x] `Stammbaum von Rainny.xlsx`
+- [x] `Stammbaum von Ren.xlsx`
+- [x] `Stammbaum von South Dakota.xlsx`
+- [x] `Stammbaum von Stella Kids.xlsx`
+- [x] `Stammbaum von Tennessee.xlsx`
+- [x] `Stammbaum von Unique of Wild Dreams.xlsx`
+- [x] `Stammbaum von Unit.xlsx`
+- [x] `Stammbaum von Uriana.xlsx`
+- [x] `Stammbaum von Valentino Firehearts Kids.xlsx`
+- [x] `Stammbaum von Vance.xlsx`
+- [x] `Stammbaum von Vestra von den Schlossmäusen.xlsx`
+- [x] `Stammbaum von Watarus Kids.xlsx`
+- [x] `Stammbaum von Wildfire und Vestras Kids.xlsx`
+- [x] `Stammbaum von Xelina.xlsx`
+- [x] `Stammbaum von Yuki.xlsx`
+- [x] `Stammbaum von Yurikas und Pintos Sohn.xlsx`
+- [x] `Stammbaum von Zac (Vance.Dorie).xlsx`
+- [x] `Stammbaum von Zenon von Elea.xlsx`
+- [x] `Stammbaum von little Heros Sohn of little runners.xlsx`
+
+---
+
+## 🟨 Phase 3: Resolution & Relational Mapping
+- [x] Resolve duplicates using the canonical key: `normalize(name) + normalize(dob)` and `Zucht` (breeding line).
+- [x] Inject resolutions from `conflict-decisions.json` to automatically resolve the remaining conflict animals (un-quarantining them and applying correct genotypes/dates).
+- [x] Parse and map all parent-child relationships positionally from the pedigree charts.
+- [x] Map and link all animals to their respective Wurfchronik litters using parentage and DOB.
+- [x] Resolve photo attachments to actual extracted media file paths.
+- [x] Assign permanent UUIDs (Guids) to all records and replace string names in relationships with the actual UUID foreign keys.
+
+---
+
+## 🟧 Phase 4: Data Export & Validation
+- [x] Generate the final `resolved_import.json` containing the relational array collections.
+- [x] Run automated validation tests on the JSON file (check for circular dependencies, broken foreign keys, invalid genotypes, and null dates).
+
+---
+
+## 🟥 Phase 5: Loader Implementation & Database Ingestion
+- [x] Build a simplified loader utility (C# endpoint or local python script) that takes the resolved JSON and directly runs `INSERT`/`UPDATE` transactions.
+- [x] Execute the import onto the target PostgreSQL database.
+- [x] Run verification tests (verify total counts: ~956 animals, and sample check pedigree trees).

tools/import/extract.py

@@ -217,7 +217,7 @@ def extract_stammbaum(path):
             # full block: name above, farbschlag/genotype/breeder below
             dob, death, geno0 = parse_detail(t)
             name = ""
-            for rr in range(r - 1, r - 4, -1):
+            for rr in range(r - 3, r):
                 if (c, rr) in cells and not re.match(r"^\*?\s?\d", cells[(c, rr)]) \
                         and not gt.looks_like_genotype(cells[(c, rr)]):
                     name = clean_name(cells[(c, rr)])

tools/import/output/review-report.md

@@ -4,36 +4,47 @@ _Automatisch erzeugt von `tools/import/extract.py` — **noch nichts in die Date
 
 ## Überblick
 
-- Rohe Tier-Einträge aus den Stammbäumen: **950**
-- Nach Zusammenführung (eindeutige Tiere): **621**
-  - davon mit Geburtsdatum: 326
-  - in mehreren Dateien gefunden (Dubletten zusammengeführt): 158
-- Konflikte zur Klärung: **5**
-- Mehrdeutige / unvollständige Einträge (ohne Name+Datum): **310**
-- Fotos zugeordnet: **137**
+- Rohe Tier-Einträge aus den Stammbäumen: **2451**
+- Nach Zusammenführung (eindeutige Tiere): **1007**
+  - davon mit Geburtsdatum: 682
+  - in mehreren Dateien gefunden (Dubletten zusammengeführt): 461
+- Konflikte zur Klärung: **7**
+- Mehrdeutige / unvollständige Einträge (ohne Name+Datum): **342**
+- Fotos zugeordnet: **417**
 - Würfe aus der Wurfchronik: **752**
-  - Tiere mit Wurf verknüpft: **159** (davon über Geburtsdatum **und** Eltern: 110, nur über Geburtsdatum: 49; mehrdeutig: 10)
+  - Tiere mit Wurf verknüpft: **274** (davon über Geburtsdatum **und** Eltern: 175, nur über Geburtsdatum: 99; mehrdeutig: 14)
   - Würfe mit Datenqualitäts-Hinweisen: 113 (+ 138 Zeilen mit abweichendem Spaltenschema)
 
 ## Zusammenführungs-Schlüssel
 
 Tiere wurden zusammengeführt über **normalisierter Rufname + Geburtsdatum**, mit der **Zucht als Unterscheidungsmerkmal** (Julians Regel: die `[Klammern]` in der Wurfchronik und das `of/von <Linie>`-Suffix der Stammbäume bezeichnen beide die Zucht und werden zusammengeführt — z. B. `[ZdkC]` ≙ `von den Kleinen Chaoten`). Namensvarianten (z. B. `v.d.` ↔ `von den`, `gen.`-Spitznamen) werden als `nameVariants` erhalten.
 
+### Gleicher Name + Geburtsdatum, aber unterschiedliche Zucht (NICHT zusammengeführt — bitte prüfen)
+
+| Tier | Geburtsdatum | Zuchten | Dateien |
+|---|---|---|---|
+| Blacky | 23.07.2009 | PZ Seligenstadt // Privatzucht Seligenstadt | Stammbaum von Danako, Stammbaum von Hana, Stammbaum von Jin, Stammbaum von Unit, Stammbaum von Uriana, Stammbaum von Wildfire und Vestras Kids |
+| Danny | 09.10.2009 | Maintaler PZ // PZ Maintal | Stammbaum von Hana, Stammbaum von Vance |
+| Lola | 10.02.2014 | Chalfont Stud, Freddy Braun // Lennylengo | Stammbaum von Jeremy, Stammbaum von Jiminy of Black Forest, Stammbaum von Marlin of Black Forest, Stammbaum von Zac (Vance.Dorie), Stammbaum von Zenon von Elea |
+| Debby gen. Eva | 08.08.2012 | KK Chaos // KK Chaos of KK Chaos | Stammbaum von Kalea, Stammbaum von Unit, Stammbaum von Uriana |
+
 ## ⚠️ Konflikte (bitte prüfen)
 
 Gleiches Tier (Name+Datum), aber widersprüchliche Angaben in verschiedenen Dateien:
 
 | Tier | Geburtsdatum | abweichende Genotypen | abweichende Farbschläge | Sterbedaten | Dateien |
 |---|---|---|---|---|---|
-| Kazu von den Kleinen Chaoten | 23.04.2013 | Aa Cc[chm] DD e[f]e[f] Gg P Spsp // Aa Cc[chm] DD ee[f] UwUw PP Spsp | — | 03.09.2017 | Stammbaum von Akio Kids, Stammbaum von Vance |
-| Little Runner's Big Ben | 03.02.2020 | Aa Cc[chm] DD Ee Gg PP Spsp // Aa Cc[chm] DD Ee Gg Pp Spsp | — | 14.10.2023 | Stammbaum von CP-Fuchs, CP-Sa Sp von Unity, Stammbaum von Fire Kids, Stammbaum von Goldfuchs Sp (Pikachu) Kids, Stammbaum von Kohlief, Goldfuchsef Sp von Chrissi, Stammbaum von Valentino Firehearts Kids, Stammbaum von Watarus Kids |
-| Vance Jr. von den Kleinen Chaoten | 10.04.2022 | aa Cc[hm] Dd Ee gg P- Spsp // aa Cc[hm] Dd Ee gg P- spsp | Kohlfuchs, hell | — | Stammbaum von Fire Kids, Stammbaum von Stella Kids |
-| Hanami von den Kleinen Chaoten | 10.09.2015 | aa Cc[chm] D- Ee gg P- spsp | — | 12.12.2019 // 14.01.2020 | Stammbaum von Kentucky, Stammbaum von Stella Kids |
-| Skarlett v.d. Kleinen Chaoten | 14.07.2013 | / +2018, Aa Cc[chm] DD ee uw[d]uw[d] PP spsp // Aa Cc[chm] DD ee uw[d]uw[d] PP spsp | — | 17.04.2016 // 2018 | Stammbaum von Vance |
+| Joghurt von Privat | 06.09.2013 | aa CC D- ee GG PP spsp // aa Cc[-] D- ee UwUw PP spsp | Privat | 06.03.2017 | Stammbaum von Akio Kids, Stammbaum von Jin, Stammbaum von Kentucky |
+| Ken'ichi | 01.03.2015 | AA CC DD Ee GG PP spsp | Agouti // DD-Tumor | 02.11.2018 | Stammbaum von Chesnut, Stammbaum von Emi, Stammbaum von Hana, Stammbaum von Kentucky, Stammbaum von Kohlief, Goldfuchsef Sp von Chrissi |
+| DD-Tumor bei Geschwister | 10.09.2015 | aa Cc[chm] D- Ee gg P- spsp // aa Cc[chm] D- Ee uw[d]uw[d] P- spsp | — | 02.01.2020 // 12.12.2019 | Stammbaum von Chesnut, Stammbaum von Emi |
+| Kleiner Warnowrenner Elieus gen. Eragon | 18.05.2016 | aa CC D- Ee Gg pp Spsp [DP] // aa c[chm]c[chm] D- Ee Gg pp Spsp | — | 09.10.2019 | Stammbaum von Chesnut, Stammbaum von Jeremy, Stammbaum von Kentucky, Stammbaum von Martin, Stammbaum von Quied Soldier of Black Forest |
+| Osamu | 10.12.2015 | AA CC DD ee gg P- spsp // AA CC DD ee gg PP spsp // AA CC DD ee uw[d]uw[d] PP spsp | Polarfuchs | 01.10.2020 // 18.12.2020 | Stammbaum von Danako, Stammbaum von Ella, Stammbaum von Jin, Stammbaum von Kazuya, Stammbaum von Kentucky, Stammbaum von Martin, Stammbaum von Rainny, Stammbaum von Ren, Stammbaum von South Dakota, Stammbaum von Stella Kids, Stammbaum von Tennessee, Stammbaum von Zenon von Elea |
+| Harumi | 21.02.2015 | aa Cc[chm] DD EE GG PP Spsp | — | 03.06.2017 // 11.01.2018 | Stammbaum von Danako, Stammbaum von Kalea, Stammbaum von Yurikas und Pintos Sohn |
+| Hanami | 10.09.2015 | aa Cc[chm] D- Ee gg P- spsp // aa Cc[chm] D- Ee uw[d]uw[d] P- spsp | — | 02.01.2020 // 12.12.2019 // 14.01.2020 | Stammbaum von Hana, Stammbaum von Kentucky, Stammbaum von Rainny, Stammbaum von Ren, Stammbaum von Stella Kids, Stammbaum von Vance, Stammbaum von Zac (Vance.Dorie) |
 
 ## Mehrdeutige / unvollständige Einträge
 
-310 Einträge ohne sichere Name+Datum-Kombination (z. B. `Name1 & Name2`-Paarzellen der tiefsten Generation, oder Zellen ohne Datum). Diese werden NICHT automatisch zusammengeführt.
+342 Einträge ohne sichere Name+Datum-Kombination (z. B. `Name1 & Name2`-Paarzellen der tiefsten Generation, oder Zellen ohne Datum). Diese werden NICHT automatisch zusammengeführt.
 
 - Oskar v.d. bunten Fellnase  ·  Stammbaum von Akio Kids.xlsx
 - Raya v.d. bunten Fellnasen  ·  Stammbaum von Akio Kids.xlsx
@@ -78,23 +89,55 @@ Gleiches Tier (Name+Datum), aber widersprüchliche Angaben in verschiedenen Date
 
 ## Wahrscheinliche Zuordnungen unvollständiger Einträge
 
-39 namenlose/datenlose Einträge tragen denselben Namen wie ein vollständiges Tier — vermutlich dasselbe Tier (zur Bestätigung):
+91 namenlose/datenlose Einträge tragen denselben Namen wie ein vollständiges Tier — vermutlich dasselbe Tier (zur Bestätigung):
 
+- „Tai of Lennylengo“  →  Tai of Lennylengo (*01.10.2011)
+- „Arrow PZ Niederlande“  →  Arrow PZ Niederlande (*20.05.2014)
+- „Isa of Golden Lights“  →  Isa of Golden Lights (*24.12.2014)
+- „Leila v. Jessica Walldorf“  →  Leila v. Jessica Walldorf (*08.04.2014)
+- „Osamu“  →  Osamu (*10.12.2015)
+- „Nala“  →  Nala (*06.03.2015)
 - „Oscar of Black Forest“  →  Oscar of Black Forest (*12.06.2019)
 - „Hagrid Rubeus of Black Forest“  →  Hagrid Rubeus of Black Forest (*18.07.2019)
 - „Lilo of LennyLengo“  →  Lilo of LennyLengo (*04.11.2018)
+- „Kazuya“  →  Kazuya (*14.07.2019)
+- „Harumi“  →  Harumi (*21.02.2015)
+- „Pan“  →  Pan (*09.12.2014)
+- „Gin“  →  Gin (*05.02.2015)
+- „Isa of Golden Lights“  →  Isa of Golden Lights (*24.12.2014)
 - „Mystique of Black Forest“  →  Mystique of Black Forest (*12.03.2022)
+- „Elay“  →  Elay (*16.03.2016)
+- „Osamu“  →  Osamu (*10.12.2015)
+- „Baiko“  →  Baiko (*02.06.2019)
 - „Hagrid Rubeus of Black Forest“  →  Hagrid Rubeus of Black Forest (*18.07.2019)
+- „Osamu“  →  Osamu (*10.12.2015)
+- „Umi“  →  Umi (*13.08.2016)
 - „Charly of Golden Lights“  →  Charly of Golden Lights (*05.04.2016)
 - „Ziwa of Golden Lights“  →  Ziwa of Golden Lights (*29.04.2016)
+- „Harumi“  →  Harumi (*21.02.2015)
+- „Pan“  →  Pan (*09.12.2014)
+- „Gin“  →  Gin (*05.02.2015)
+- „Isa of golden lights“  →  Isa of Golden Lights (*24.12.2014)
+- „Porter“  →  Porter (*23.05.2015)
 - „Chelsea von den Kleinen Chaoten“  →  Chelsea von den Kleinen Chaoten (*02.04.2021)
 - „Pinto of Fiomi“  →  Pinto of Fiomi (*28.08.2016)
+- „Nala“  →  Nala (*06.03.2015)
+- „Hanami“  →  Hanami (*10.09.2015)
 - „Living Force's Idefix“  →  Living Force's Idefix (*05.04.2016)
-- „Scarlett of Samsimar“  →  Scarlett of Samsimar (*05.09.2018)
+- „Osamu“  →  Osamu (*10.12.2015)
+- „Baiko“  →  Baiko (*02.06.2019)
+- „Olivia“  →  Olivia (*23.07.2019)
+- „Baiko“  →  Baiko (*02.06.2019)
+- „Olivia“  →  Olivia (*23.07.2019)
 - „Living Force's Idefix“  →  Living Force's Idefix (*05.04.2016)
 - „Rosie of LennyLengo“  →  Rosie of LennyLengo (*15.03.2016)
+- „Pan“  →  Pan (*09.12.2014)
+- „Gin“  →  Gin (*05.02.2015)
+- „Chiako“  →  Chiako (*15.11.2016)
 - „Stich von Privatzucht Gießen“  →  Stich von Privatzucht Gießen (*01.09.2018)
 - „Lilo of LennyLengo“  →  Lilo of LennyLengo (*04.11.2018)
+- „Ken'ichi“  →  Ken'ichi (*01.03.2015)
+- „Rumi“  →  Rumi (*24.02.2017)
 - „Living Force's Idefix“  →  Living Force's Idefix (*05.04.2016)
 - „Rosie of LennyLengo“  →  Rosie of LennyLengo (*15.03.2016)
 - „Living Force's Idefix“  →  Living Force's Idefix (*05.04.2016)
@@ -103,22 +146,11 @@ Gleiches Tier (Name+Datum), aber widersprüchliche Angaben in verschiedenen Date
 - „Little Hero of Black Forest“  →  Little Hero of Black Forest (*22.02.2018)
 - „Little Runner's Destiny“  →  Little Runner's  Destiny (*02.03.2019)
 - „Chevrolet Camaro of Topolino“  →  Chevrolet Camaro of Topolino (*10.04.2018)
+- „Danako“  →  Danako (*22.08.2018)
 - „Marlin of Black Forest“  →  Marlin of Black Forest (*28.05.2019)
+- „Zenon von Elea“  →  Zenon von Elea (*06.10.2019)
 - „Nisha of Black Forest“  →  Nisha of Black Forest (*28.03.2018)
-- „Nisha of Black Forest“  →  Nisha of Black Forest (*28.03.2018)
-- „Dorie of Black Forest“  →  Dorie of Black Forest (*28.05.2019)
-- „Zadar from Zeko i ptica, Croatia“  →  Zadar from Zeko i ptica, Croatia (*12.04.2019)
-- „Living Force's Vally“  →  Living Force's Vally (*01.11.2014)
-- „Pinto of Fiomi“  →  Pinto of Fiomi (*28.08.2016)
-- „Hanse Renner's Poseidon“  →  Hanse Renner's Poseidon (*14.08.2014)
-- „Oscar of Black Forest“  →  Oscar of Black Forest (*12.06.2019)
-- „Hagrid Rubeus of Black Forest“  →  Hagrid Rubeus of Black Forest (*18.07.2019)
-- „Lilo of LennyLengo“  →  Lilo of LennyLengo (*04.11.2018)
-- „Chevrolet Camaro of Topolino“  →  Chevrolet Camaro of Topolino (*10.04.2018)
-- „Lilo of LennyLengo“  →  Lilo of LennyLengo (*04.11.2018)
-- „Rosie of LennyLengo“  →  Rosie of LennyLengo (*15.03.2016)
-- „Rosie of LennyLengo“  →  Rosie of LennyLengo (*15.03.2016)
-- „Little Runner's Destiny“  →  Little Runner's  Destiny (*02.03.2019)
+- „Zenon von Elea“  →  Zenon von Elea (*06.10.2019)
 
 ## Nicht ins 8-Loci-Modell abgebildete Tokens (verbatim erhalten)
 
@@ -126,22 +158,31 @@ Diese Tokens stehen weiter in `rawGenotype`/`unmappedTokens` — Entscheidung (M
 
 | Token | Vorkommen | Bedeutung (Vermutung) |
 |---|---|---|
-| `/+` | 6 | ? |
+| `/+` | 7 | ? |
+| `[meliert]` | 4 | ? |
+| `[Dea/dea]` | 4 | ? |
+| `(Kragen)` | 3 | ? |
+| `/` | 3 | ? |
 | `-g` | 2 | ? |
+| `!DD` | 2 | ? |
+| `Tumor` | 2 | ? |
+| `!` | 2 | ? |
 | `C(C)` | 2 | Schreibweise (C trägt c) |
+| `[dea/*]` | 2 | ? |
+| `(KW` | 2 | ? |
 | `Cc[]` | 1 | ? |
+| `[WFNZ-Maroon]` | 1 | ? |
+| `/+April'2017` | 1 | ? |
+| `[meliert]-[DP]` | 1 | ? |
+| `!Knickschwanz-Gen!` | 1 | ? |
+| `-09.09.2018` | 1 | ? |
+| `[dea/dea]` | 1 | ? |
+| `[DP?]` | 1 | ? |
+| `/+Dezember'2014` | 1 | ? |
+| `(Ansatz)` | 1 | ? |
+| `[WFNZ][dea/*]` | 1 | ? |
 | `-psp` | 1 | ? |
 | `G(G)` | 1 | ? |
-| `/` | 1 | ? |
-| `+2018` | 1 | ? |
-| `chmchm` | 1 | Schreibweise (c[chm]c[chm]) |
-| `c[chm]chm]` | 1 | ? |
-| `Dea/dea]` | 1 | ? |
-| `DD-Tumor` | 1 | ? |
-| `bei` | 1 | ? |
-| `Geschwistern` | 1 | ? |
-| `C-D-` | 1 | ? |
-| `-DD` | 1 | ? |
 
 ## Wurfchronik — Datenqualitäts-Hinweise
 

tools/import/resolve_import.py

@@ -0,0 +1,379 @@
+#!/usr/bin/env python3
+import os
+import json
+import uuid
+import re
+from datetime import datetime
+
+# Import normalization helpers from extract.py
+import extract as ex
+
+HERE = os.path.dirname(os.path.abspath(__file__))
+OUTPUT_DIR = os.path.join(HERE, "output")
+SEEDS_PATH = os.path.join(HERE, "..", "..", "gerbil-manager-web", "src", "genetics", "colorVarietySeed.backend.json")
+
+def generate_guid(key_str):
+    """Generate a stable UUID string based on a key."""
+    return str(uuid.uuid5(uuid.NAMESPACE_DNS, key_str))
+
+def parse_date_only(d):
+    """Convert DD.MM.YYYY string to YYYY-MM-DD for JSON serialization."""
+    if not d:
+        return None
+    try:
+        p = d.split(".")
+        if len(p) == 3:
+            day = int(p[0])
+            month = int(p[1])
+            year = int(p[2])
+            if len(p[2]) == 2:
+                year += 2000
+            # Ensure valid date
+            dt = datetime(year, month, day)
+            return dt.strftime("%Y-%m-%d")
+    except Exception:
+        pass
+    return None
+
+def save_to_csv(data_list, filepath):
+    import csv
+    if not data_list:
+        return
+    headers = list(data_list[0].keys())
+    with open(filepath, "w", encoding="utf-8-sig", newline="") as f:
+        writer = csv.writer(f, delimiter=";")
+        writer.writerow(headers)
+        for row in data_list:
+            values = []
+            for h in headers:
+                val = row[h]
+                if isinstance(val, (list, dict)):
+                    values.append(json.dumps(val, ensure_ascii=False))
+                elif val is None:
+                    values.append("")
+                else:
+                    values.append(str(val))
+            writer.writerow(values)
+
+def main():
+    print("Loading extracted JSON files...")
+    animals_file = os.path.join(OUTPUT_DIR, "animals.json")
+    litters_file = os.path.join(OUTPUT_DIR, "litters.json")
+
+    if not os.path.exists(animals_file) or not os.path.exists(litters_file):
+        print(f"Error: extract.py must be run first to generate animals.json and litters.json in {OUTPUT_DIR}")
+        return
+
+    with open(animals_file, "r", encoding="utf-8") as f:
+        animals = json.load(f)
+    with open(litters_file, "r", encoding="utf-8") as f:
+        litters = json.load(f)
+
+    # Load color variety seeds
+    print("Loading color variety seeds...")
+    with open(SEEDS_PATH, "r", encoding="utf-8") as f:
+        seeds = json.load(f)
+
+    # Map variety name -> Guid
+    variety_map = {}
+    for v in seeds:
+        # UUID is based on SortOrder + 1
+        variety_id = f"00000000-0000-0000-0000-{v['sortOrder'] + 1:012d}"
+        variety_map[v["name"].strip().lower()] = variety_id
+
+    # 1. Establish stable Guid maps
+    animal_guid_map = {a["id"]: generate_guid(f"animal-{a['id']}") for a in animals}
+    litter_guid_map = {l["id"]: generate_guid(f"litter-{l['id']}") for l in litters}
+
+    # Index animals for fast lookup by slug ID and by normalized name+dob
+    animal_by_id = {a["id"]: a for a in animals}
+    animal_by_name_dob = {}
+    for a in animals:
+        key = (ex.norm_name(a["name"]), ex.norm_dob(a["dob"]))
+        if key[0] and key[1]:
+            animal_by_name_dob.setdefault(key, []).append(a)
+
+    # 2. Extract and resolve unique Contacts (Breeders & Zuchten)
+    print("Extracting unique contacts...")
+    contact_names = set()
+    for a in animals:
+        if a.get("breeder"):
+            contact_names.add(a["breeder"].strip())
+        if a.get("zucht"):
+            contact_names.add(a["zucht"].strip())
+    for l in litters:
+        if l.get("damZucht"):
+            contact_names.add(l["damZucht"].strip())
+        if l.get("sireZucht"):
+            contact_names.add(l["sireZucht"].strip())
+
+    contact_guid_map = {}
+    resolved_contacts = []
+    for idx, name in enumerate(sorted(contact_names)):
+        norm = name.strip().lower()
+        if not norm or norm in contact_guid_map:
+            continue
+        c_guid = generate_guid(f"contact-{norm}")
+        contact_guid_map[norm] = c_guid
+        resolved_contacts.append({
+            "Id": c_guid,
+            "Name": name,
+            "ZuchtName": name if "zucht" in norm or "clan" in norm or "runner" in norm else "",
+            "City": "",
+            "Email": "",
+            "Homepage": "",
+            "Phone": "",
+            "Address": ""
+        })
+
+    # 3. Resolve parent relationships for litters
+    print("Resolving litter parents...")
+    litter_parent_map = {} # litter_id -> (father_guid, mother_guid)
+    
+    # Pre-map parents using offspring parentRefs
+    for a in animals:
+        litter_ref = a.get("litterRef")
+        if not litter_ref or not litter_ref.get("litterId"):
+            continue
+        
+        l_id = litter_ref["litterId"]
+        l_parents = litter_parent_map.setdefault(l_id, [None, None]) # [father, mother]
+        
+        for p_ref in a.get("parentRefs", []):
+            p_key = (ex.norm_name(p_ref["name"]), ex.norm_dob(p_ref["dob"]))
+            p_candidates = animal_by_name_dob.get(p_key, [])
+            if p_candidates:
+                p_guid = animal_guid_map[p_candidates[0]["id"]]
+                if p_ref["roleGuess"] == "father":
+                    l_parents[0] = p_guid
+                elif p_ref["roleGuess"] == "mother":
+                    l_parents[1] = p_guid
+
+    # Fallback lookup for parents by name from litter details if offspring has no parentRefs
+    for l in litters:
+        l_parents = litter_parent_map.setdefault(l["id"], [None, None])
+        l_date_str = parse_date_only(l["date"])
+        if not l_date_str:
+            continue
+        l_date = datetime.strptime(l_date_str, "%Y-%m-%d")
+
+        # Fallback Father
+        if not l_parents[0] and l.get("sireName"):
+            sire_norm = ex.norm_name(l["sireName"])
+            # Find an animal with this name born before the litter
+            candidates = []
+            for (name_norm, dob_norm), grp in animal_by_name_dob.items():
+                if name_norm == sire_norm:
+                    for cand in grp:
+                        c_dob_str = parse_date_only(cand["dob"])
+                        if c_dob_str:
+                            c_dob = datetime.strptime(c_dob_str, "%Y-%m-%d")
+                            if c_dob < l_date:
+                                candidates.append(cand)
+            if len(candidates) == 1:
+                l_parents[0] = animal_guid_map[candidates[0]["id"]]
+
+        # Fallback Mother
+        if not l_parents[1] and l.get("damName"):
+            dam_norm = ex.norm_name(l["damName"])
+            candidates = []
+            for (name_norm, dob_norm), grp in animal_by_name_dob.items():
+                if name_norm == dam_norm:
+                    for cand in grp:
+                        c_dob_str = parse_date_only(cand["dob"])
+                        if c_dob_str:
+                            c_dob = datetime.strptime(c_dob_str, "%Y-%m-%d")
+                            if c_dob < l_date:
+                                candidates.append(cand)
+            if len(candidates) == 1:
+                l_parents[1] = animal_guid_map[candidates[0]["id"]]
+
+    # 4. Construct Litters collection
+    resolved_litters = []
+    for l in litters:
+        l_guid = litter_guid_map[l["id"]]
+        p_father, p_mother = litter_parent_map.get(l["id"], [None, None])
+        l_date = parse_date_only(l["date"])
+        if not l_date:
+            continue # Skip litters without dates
+
+        # Inzucht/Frühsterblichkeit mapping
+        deaths_8w = None
+        if l.get("diedLater") is not None or l.get("stillborn") is not None:
+            deaths_8w = (l.get("stillborn") or 0) + (l.get("diedLater") or 0)
+
+        resolved_litters.append({
+            "Id": l_guid,
+            "Name": f"Wurf {l['litterId']}".strip(),
+            "Date": l_date,
+            "TotalBorn": l.get("totalBorn"),
+            "DeathsWithin8Weeks": deaths_8w,
+            "FatherId": p_father,
+            "MotherId": p_mother,
+            "ExpectedGoHomeDate": None,
+            "Notes": l.get("note") if l.get("note") else None,
+            "PairingCode": l.get("zuchtnummer") if l.get("zuchtnummer") else None,
+            "ExternalRef": l["id"],
+            "LitterLetter": l["litterId"] if len(l["litterId"]) <= 2 else None
+        })
+
+    # 5. Determine Residency & Status
+    # C# Residency Rule: IsResident iff Zuchtname matches Clan kennel, OR is parent of resident
+    resident_guids = set()
+    # Step A: Direct Zucht name match
+    for a in animals:
+        if ex.is_clan_zucht(a.get("zucht")) or ex.is_clan_zucht(a.get("zuchtCanon")):
+            resident_guids.add(animal_guid_map[a["id"]])
+
+    # Step B: Parent of Clan offspring
+    # Re-run propagation loop a few times to cover multiple generations
+    for _ in range(5):
+        for l in litters:
+            l_guid = litter_guid_map[l["id"]]
+            # Check if any offspring of this litter is resident
+            offspring_guids = [animal_guid_map[a["id"]] for a in animals if a.get("litterRef") and a["litterRef"].get("litterId") == l["id"]]
+            has_resident_offspring = any(og in resident_guids for og in offspring_guids)
+            
+            if has_resident_offspring:
+                p_father, p_mother = litter_parent_map.get(l["id"], [None, None])
+                if p_father:
+                    resident_guids.add(p_father)
+                if p_mother:
+                    resident_guids.add(p_mother)
+
+    # 6. Construct Gerbils collection
+    resolved_gerbils = []
+    resolved_photos = []
+    
+    for a in animals:
+        a_guid = animal_guid_map[a["id"]]
+        
+        # Resolve ColorVariety
+        cv_id = None
+        fb_key = a["farbschlag"].strip().lower()
+        if fb_key in variety_map:
+            cv_id = variety_map[fb_key]
+        else:
+            # Try matching variants
+            for fbv in a.get("farbschlagVariants", []):
+                fbv_key = fbv.strip().lower()
+                if fbv_key in variety_map:
+                    cv_id = variety_map[fbv_key]
+                    break
+        
+        # Resolve Litter
+        l_id = None
+        l_ref = a.get("litterRef")
+        if l_ref and l_ref.get("litterId") and l_ref["litterId"] in litter_guid_map:
+            l_id = litter_guid_map[l_ref["litterId"]]
+
+        # Resolve Contacts
+        origin_contact_id = None
+        breeder_norm = a.get("breeder", "").strip().lower()
+        zucht_norm = a.get("zucht", "").strip().lower()
+        if breeder_norm in contact_guid_map:
+            origin_contact_id = contact_guid_map[breeder_norm]
+        elif zucht_norm in contact_guid_map:
+            origin_contact_id = contact_guid_map[zucht_norm]
+
+        # Dates
+        dob = parse_date_only(a.get("dob"))
+        death = parse_date_only(a.get("death"))
+
+        # Gender conversion: M -> male, W -> female
+        gender = "Unknown"
+        if a.get("gender") == "M":
+            gender = "male"
+        elif a.get("gender") == "W":
+            gender = "female"
+
+        # Determine Residency
+        is_resident = a_guid in resident_guids
+
+        # Determine Status
+        status = "Breeding"
+        if death:
+            status = "Deceased"
+        elif not is_resident:
+            status = "GivenAway"
+        else:
+            # Age presumed deceased (>7 years)
+            if dob:
+                dt_dob = datetime.strptime(dob, "%Y-%m-%d")
+                dt_now = datetime.now()
+                age_years = (dt_now - dt_dob).days / 365.25
+                if age_years >= 7.0:
+                    status = "Deceased"
+                else:
+                    status = "Breeding" # default to breeding for resident stock
+
+        # Raw Import payload
+        raw_import_payload = json.dumps({
+            "rawGenotype": a["genotype"]["rawGenotype"],
+            "unmappedTokens": a["genotype"]["unmappedTokens"],
+            "breederText": a.get("breeder", "")
+        }, ensure_ascii=False)
+
+        resolved_gerbils.append({
+            "Id": a_guid,
+            "Name": a["name"],
+            "Gender": gender,
+            "Status": status,
+            "LitterId": l_id,
+            "OriginContactId": origin_contact_id,
+            "ReceiverContactId": None,
+            "EnclosureId": None,
+            "ColorVarietyId": cv_id,
+            "DateOfBirth": dob,
+            "DateOfDeath": death,
+            "CauseOfDeath": None,
+            "GoHomeDate": None,
+            "Genotype": a["genotype"]["rawGenotype"] if a["genotype"]["rawGenotype"] else None,
+            "Notes": None,
+            "ImportSource": "docx-export",
+            "ExternalRef": a["id"],
+            "RawImportData": raw_import_payload,
+            "OriginBreeder": a.get("breeder") if a.get("breeder") else (a.get("zucht") if a.get("zucht") else None),
+            "NameSearch": ex.norm_name(a["name"]),
+            "CharacterTraits": [],
+            "CharacterNote": None,
+            "IsDeaf": a.get("deaf"),
+            "IsResident": is_resident
+        })
+
+        # Attach Photos
+        for idx, photo_rel in enumerate(a.get("photos", [])):
+            photo_guid = generate_guid(f"photo-{photo_rel}")
+            resolved_photos.append({
+                "Id": photo_guid,
+                "GerbilId": a_guid,
+                "FileName": os.path.basename(photo_rel),
+                "SortOrder": idx
+            })
+
+    # Save resolved data
+    resolved_data = {
+        "Contacts": resolved_contacts,
+        "Litters": resolved_litters,
+        "Gerbils": resolved_gerbils,
+        "GerbilPhotos": resolved_photos
+    }
+
+    resolved_path = os.path.join(OUTPUT_DIR, "resolved_import.json")
+    with open(resolved_path, "w", encoding="utf-8") as f:
+        json.dump(resolved_data, f, ensure_ascii=False, indent=2)
+
+    # Save resolved CSV files
+    save_to_csv(resolved_contacts, os.path.join(OUTPUT_DIR, "resolved_contacts.csv"))
+    save_to_csv(resolved_litters, os.path.join(OUTPUT_DIR, "resolved_litters.csv"))
+    save_to_csv(resolved_gerbils, os.path.join(OUTPUT_DIR, "resolved_gerbils.csv"))
+    save_to_csv(resolved_photos, os.path.join(OUTPUT_DIR, "resolved_photos.csv"))
+
+    print(f"Success! Saved resolved database-ready records to {resolved_path} (and CSV counterparts):")
+    print(f"  Contacts:      {len(resolved_contacts)}")
+    print(f"  Litters:       {len(resolved_litters)}")
+    print(f"  Gerbils:       {len(resolved_gerbils)}")
+    print(f"  GerbilPhotos:  {len(resolved_photos)}")
+
+if __name__ == "__main__":
+    main()