STATUS-MODEL-FE: Zucht/Liebhaber/Abzugeben wählbar; Verstorben+Abgegeben abgeleitet (gated auf Pam BE)

Merge feature/litter-juvenile-details (LITTER-JUVENILE-DETAILS): pro Jungtier Farbschlag/Abgabedatum/Abnehmer/Todestag/Ursache im Wurf-Detail
LITTER-JUVENILE-DETAILS: Farbschlag/Abgabe/Abnehmer/Todesdaten pro Jungtier im Wurf-Detail
2026-06-07 03:36:10 +02:00 · 2026-06-07 03:25:53 +02:00 · 2026-06-07 03:23:22 +02:00 · 2026-06-07 03:16:55 +02:00 · 2026-06-07 03:16:02 +02:00 · 2026-06-07 03:03:45 +02:00
29 changed files with 1065 additions and 67 deletions
--- a/GerbilManager.Tests/CmsPublishTests.cs
+++ b/GerbilManager.Tests/CmsPublishTests.cs
@@ -0,0 +1,103 @@
 using GerbilManagerWebAPI.Endpoints;
 namespace GerbilManager.Tests;
 /// <summary>WEB-2: POST /api/publish — atomic swap, file layout, staging cleanup.</summary>
 public class CmsPublishTests
 {
    private static string TempRoot() =>
        Path.Combine(Path.GetTempPath(), "gm-publish-test-" + Guid.NewGuid().ToString("N"));
    [Fact]
    public async Task Publish_erstellt_live_Verzeichnis_mit_allen_Dateien()
    {
        var root = TempRoot();
        try
        {
            var files = new Dictionary<string, string>
            {
                ["index.html"]        = "<html>start</html>",
                ["kontakt/index.html"] = "<html>kontakt</html>",
                ["assets/site.css"]   = "body {}",
            };
            await CmsEndpoints.PublishToDirectoryAsync(files, root);
            Assert.True(File.Exists(Path.Combine(root, "live", "index.html")));
            Assert.True(File.Exists(Path.Combine(root, "live", "kontakt", "index.html")));
            Assert.True(File.Exists(Path.Combine(root, "live", "assets", "site.css")));
            Assert.Equal("<html>start</html>",
                await File.ReadAllTextAsync(Path.Combine(root, "live", "index.html")));
        }
        finally { if (Directory.Exists(root)) Directory.Delete(root, true); }
    }
    [Fact]
    public async Task Publish_atomarer_Swap_ueberschreibt_alte_live_Version()
    {
        var root = TempRoot();
        try
        {
            await CmsEndpoints.PublishToDirectoryAsync(
                new Dictionary<string, string> { ["index.html"] = "version-1" }, root);
            await CmsEndpoints.PublishToDirectoryAsync(
                new Dictionary<string, string> { ["index.html"] = "version-2" }, root);
            var content = await File.ReadAllTextAsync(Path.Combine(root, "live", "index.html"));
            Assert.Equal("version-2", content);
        }
        finally { if (Directory.Exists(root)) Directory.Delete(root, true); }
    }
    [Fact]
    public async Task Publish_kein_staging_oder_old_Verzeichnis_nach_Swap()
    {
        var root = TempRoot();
        try
        {
            await CmsEndpoints.PublishToDirectoryAsync(
                new Dictionary<string, string> { ["index.html"] = "x" }, root);
            Assert.False(Directory.Exists(Path.Combine(root, "_staging_new")));
            Assert.False(Directory.Exists(Path.Combine(root, "_old")));
        }
        finally { if (Directory.Exists(root)) Directory.Delete(root, true); }
    }
    [Fact]
    public async Task Publish_mehrfach_ohne_Fehler()
    {
        var root = TempRoot();
        try
        {
            for (int i = 1; i <= 3; i++)
            {
                await CmsEndpoints.PublishToDirectoryAsync(
                    new Dictionary<string, string> { ["index.html"] = $"v{i}" }, root);
            }
            Assert.Equal("v3",
                await File.ReadAllTextAsync(Path.Combine(root, "live", "index.html")));
        }
        finally { if (Directory.Exists(root)) Directory.Delete(root, true); }
    }
    [Fact]
    public async Task Publish_UTF8_Inhalt_korrekt_gespeichert()
    {
        var root = TempRoot();
        try
        {
            const string german = "<html>Züchter — Rennmäuse & mehr</html>";
            await CmsEndpoints.PublishToDirectoryAsync(
                new Dictionary<string, string> { ["index.html"] = german }, root);
            var content = await File.ReadAllTextAsync(
                Path.Combine(root, "live", "index.html"),
                System.Text.Encoding.UTF8);
            Assert.Equal(german, content);
        }
        finally { if (Directory.Exists(root)) Directory.Delete(root, true); }
    }
 }
--- a/GerbilManager.Tests/GerbilSearchTests.cs
+++ b/GerbilManager.Tests/GerbilSearchTests.cs
@@ -0,0 +1,58 @@
 using System.Net;
 using System.Net.Http.Json;
 using GerbilManagerWebAPI.Models;
 namespace GerbilManager.Tests;
 /// <summary>SEARCH-1: separator-insensitive name search + OriginBreeder (Herkunft) filter.</summary>
 public class GerbilSearchTests : IClassFixture<ApiFactory>
 {
    private readonly HttpClient _client;
    public GerbilSearchTests(ApiFactory factory) => _client = factory.CreateClient();
    private static HttpContent Gerbil(string name, string? originBreeder = null) =>
        JsonContent.Create(new
        {
            name,
            gender = "female",
            originBreeder,
        });
    [Theory]
    [InlineData("Clan-Kleine-Chaoten", "clankleinechaoten")]
    [InlineData("Clan Kleine Chaoten", "clankleinechaoten")]
    [InlineData("v.d. Kleinen_Chaoten", "vdkleinenchaoten")]
    public void Normalize_strips_separators_and_lowercases(string input, string expected) =>
        Assert.Equal(expected, GerbilSearch.Normalize(input));
    [Fact]
    public async Task NameSearch_filter_matches_across_separators()
    {
        var create = await _client.PostAsync("/gerbils", Gerbil("Clan-Kleine-Chaoten"));
        Assert.Equal(HttpStatusCode.Created, create.StatusCode);
        // Gridify contains is "=*value" (no trailing '*', per the main hotfix 0ee2b53).
        // The client normalizes the user's term the same way the column is normalized.
        var json = await _client.GetStringAsync("/gerbils?filter=nameSearch=*clankleinechaoten");
        Assert.Contains("Clan-Kleine-Chaoten", json);
        // a term that doesn't normalize-match must NOT return it
        var miss = await _client.GetStringAsync("/gerbils?filter=nameSearch=*completelyother");
        Assert.DoesNotContain("Clan-Kleine-Chaoten", miss);
    }
    [Fact]
    public async Task OriginBreeder_is_filterable_and_listed_in_breeders_endpoint()
    {
        await _client.PostAsync("/gerbils", Gerbil("Herkunftstier", originBreeder: "Zucht der kleinen Chaoten"));
        // distinct-values dropdown source
        var breeders = await _client.GetStringAsync("/gerbils/breeders");
        Assert.Contains("Zucht der kleinen Chaoten", breeders);
        // Gridify filter on the field
        var filtered = await _client.GetStringAsync("/gerbils?filter=originBreeder==Zucht der kleinen Chaoten");
        Assert.Contains("Herkunftstier", filtered);
    }
 }
--- a/GerbilManagerWebAPI/Cms/PublicSiteOptions.cs
+++ b/GerbilManagerWebAPI/Cms/PublicSiteOptions.cs
@@ -0,0 +1,16 @@
 namespace GerbilManagerWebAPI.Cms
 {
    /// <summary>
    /// WEB-2: path where POST /api/publish writes the rendered static site.
    /// Env var: PublicSite__RootPath (empty = publish disabled, returns 503).
    /// In production this volume is shared with the publicsite-nginx container.
    /// </summary>
    public sealed class PublicSiteOptions
    {
        public const string SectionName = "PublicSite";
        public string? RootPath { get; set; }
        public bool IsConfigured => !string.IsNullOrWhiteSpace(RootPath);
    }
 }
--- a/GerbilManagerWebAPI/Endpoints/CmsEndpoints.cs
+++ b/GerbilManagerWebAPI/Endpoints/CmsEndpoints.cs
@@ -1,3 +1,4 @@
 using System.Text;
 using System.Text.Json;
 using System.Text.Json.Nodes;
 using GerbilManagerWebAPI.Cms;
@@ -5,6 +6,7 @@ using GerbilManagerWebAPI.Dtos;
 using GerbilManagerWebAPI.Models;
 using Microsoft.AspNetCore.Http.HttpResults;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.Options;
 namespace GerbilManagerWebAPI.Endpoints
 {
@@ -32,6 +34,21 @@ namespace GerbilManagerWebAPI.Endpoints
                return TypedResults.Ok(files.Select(kv => new { path = kv.Key, size = kv.Value.Length }).ToList());
            });
            // ---- WEB-2: publish — rendert Snapshot auf Disk, atomic swap live/ ----
            api.MapPost("/publish", async (ApplicationContext db, IOptions<PublicSiteOptions> opts) =>
            {
                if (!opts.Value.IsConfigured)
                    return Results.Problem(
                        detail: "PublicSite__RootPath ist nicht konfiguriert. Setze die Umgebungsvariable.",
                        statusCode: 503,
                        title: "PublicSite nicht konfiguriert");
                var snapshot = await new SiteSnapshotService(db).BuildAsync();
                var files = SiteRenderer.Render(snapshot);
                await PublishToDirectoryAsync(files, opts.Value.RootPath!);
                return Results.Ok(new { filesPublished = files.Count });
            });
            // ---- WEB-3: lokale Vorschau — rendert live (nur veröffentlichte Seiten)
            //      und liefert die Datei mit passendem Content-Type aus. Relative
            //      Links/CSS der gerenderten Seite funktionieren dadurch im
@@ -169,6 +186,36 @@ namespace GerbilManagerWebAPI.Endpoints
            return app;
        }
        /// <summary>
        /// WEB-2: Writes rendered files to <paramref name="rootPath"/>/_staging_new, then
        /// atomically swaps to live/ (rename on the same filesystem = one syscall, never partial).
        /// </summary>
        internal static async Task PublishToDirectoryAsync(
            IReadOnlyDictionary<string, string> files, string rootPath)
        {
            var stagingDir = Path.Combine(rootPath, "_staging_new");
            var liveDir    = Path.Combine(rootPath, "live");
            var oldDir     = Path.Combine(rootPath, "_old");
            if (Directory.Exists(stagingDir)) Directory.Delete(stagingDir, recursive: true);
            Directory.CreateDirectory(stagingDir);
            foreach (var (relativePath, content) in files)
            {
                var normalPath = relativePath.Replace('/', Path.DirectorySeparatorChar);
                var fullPath = Path.Combine(stagingDir, normalPath);
                Directory.CreateDirectory(Path.GetDirectoryName(fullPath)!);
                await File.WriteAllTextAsync(fullPath, content, Encoding.UTF8);
            }
            // Atomic swap: _staging_new → live
            if (Directory.Exists(oldDir)) Directory.Delete(oldDir, recursive: true);
            if (Directory.Exists(liveDir)) Directory.Move(liveDir, oldDir);
            Directory.Move(stagingDir, liveDir);
            try { if (Directory.Exists(oldDir)) Directory.Delete(oldDir, recursive: true); }
            catch { /* non-fatal — old dir gone on next publish */ }
        }
        /// <summary>WEB-3: Content-Type der Vorschau-Dateien (Renderer erzeugt HTML + CSS).</summary>
        private static string PreviewContentType(string path) =>
            path.EndsWith(".css", StringComparison.OrdinalIgnoreCase) ? "text/css; charset=utf-8"
--- a/GerbilManagerWebAPI/Program.cs
+++ b/GerbilManagerWebAPI/Program.cs
@@ -48,6 +48,9 @@ builder.Services.AddHttpClient<GerbilManagerWebAPI.Inbox.DraftReplyService>(
 // FEAT-NAMEGEN: Name suggestions via Gemini (same AI section, same wire client).
 builder.Services.AddHttpClient<GerbilManagerWebAPI.Names.NameSuggestionService>(
    http => http.Timeout = TimeSpan.FromSeconds(60));
 // WEB-2: public site publish path (env var PublicSite__RootPath; empty = disabled)
 builder.Services.AddOptions<GerbilManagerWebAPI.Cms.PublicSiteOptions>()
    .BindConfiguration(GerbilManagerWebAPI.Cms.PublicSiteOptions.SectionName);
 // INBOX-0: Gmail inbox. App Password encrypted at rest via Data Protection.
 // AR-3: persist the key ring so encrypted passwords survive image redeployments.
--- a/deploy/truenas/.env.example
+++ b/deploy/truenas/.env.example
@@ -21,6 +21,11 @@ KEYS_PATH=/mnt/JailStorage/DockerVolumes/gerbilmanager/keys
 # Backup-Rotation: Anzahl Tage (Standard: 7)
 BACKUP_KEEP_DAYS=7
 # WEB-2: Oeffentliche Webseite (Shared Volume: api schreibt, publicsite-nginx liest)
 PUBLICSITE_PATH=/mnt/JailStorage/DockerVolumes/gerbilmanager/publicsite
 # Port fuer den publicsite-nginx (Julian's externer nginx leitet darauf weiter)
 PUBLICSITE_PORT=8081
 # KI-Funktionen (Verkaufstext + Posteingang-Entwurf)
 # Beliebiger OpenAI-kompatibler Anbieter — Optionen in docs/ai-provider.md
 # Leer lassen = KI deaktiviert (kein Fehler, nur 503 AiKeyMissing)
--- a/deploy/truenas/compose.yaml
+++ b/deploy/truenas/compose.yaml
@@ -48,9 +48,12 @@ services:
      AI__BaseUrl: "${AI__BaseUrl:-}"
      AI__ApiKey: "${AI__ApiKey:-}"
      AI__Model: "${AI__Model:-gemini-flash-latest}"
      # WEB-2: Pfad wo POST /api/publish die oeffentliche Seite hinschreibt
      PublicSite__RootPath: /data/publicsite
    volumes:
      - photos:/data/photos
      - keys:/data/keys
      - publicsite:/data/publicsite
    depends_on:
      db:
        condition: service_healthy
@@ -74,6 +77,21 @@ services:
      api:
        condition: service_healthy
  # --- nginx Public Site (WEB-2) ---
  # Serviert NUR die statische oeffentliche Seite (live/ aus dem publicsite-Volume).
  # SICHERHEIT: Kein Proxy auf api/frontend — nur statisches HTML nach aussen.
  # Julian's externer nginx-Proxy leitet <DOMAIN> auf Port 8081 weiter.
  publicsite:
    image: nginx:alpine
    restart: unless-stopped
    ports:
      - "${PUBLICSITE_PORT:-8081}:80"
    volumes:
      - publicsite:/usr/share/nginx/html:ro
      - ./nginx/publicsite.conf:/etc/nginx/conf.d/default.conf:ro
    depends_on:
      - api
  # --- Backup-Sidecar (taeglicher pg_dump + Foto-Archiv + Rotation) ---
  backup:
    image: postgres:17-alpine
@@ -122,3 +140,10 @@ volumes:
      type: none
      o: bind
      device: "${BACKUPS_PATH:-/mnt/JailStorage/DockerVolumes/gerbilmanager/backups}"
  # WEB-2: gemeinsames Volume fuer api (rw) und publicsite-nginx (ro).
  publicsite:
    driver: local
    driver_opts:
      type: none
      o: bind
      device: "${PUBLICSITE_PATH:-/mnt/JailStorage/DockerVolumes/gerbilmanager/publicsite}"
--- a/deploy/truenas/nginx/publicsite.conf
+++ b/deploy/truenas/nginx/publicsite.conf
@@ -0,0 +1,29 @@
 # GerbilManager — publicsite nginx (WEB-2)
 # Serviert die statische oeffentliche Seite aus dem live/-Verzeichnis des Shared Volumes.
 # SICHERHEIT: Kein Proxy auf die API, kein Zugriff auf den Manager.
 server {
    listen 80;
    root /usr/share/nginx/html/live;
    index index.html;
    charset utf-8;
    # Alle Seiten: no-cache (Aenderungen sofort sichtbar nach Veroeffentlichen)
    location / {
        try_files $uri $uri/index.html =404;
        add_header Cache-Control "no-cache, must-revalidate";
        add_header X-Content-Type-Options "nosniff";
        add_header X-Frame-Options "SAMEORIGIN";
    }
    # CSS/Bilder: kurze TTL (1 Tag)
    location ~* \.(css|png|jpg|jpeg|gif|ico|webp|svg)$ {
        try_files $uri =404;
        expires 1d;
        add_header Cache-Control "public, max-age=86400";
    }
    # Kein Zugriff auf Staging-Verzeichnisse
    location ~ ^/_(staging_new|old)/ {
        return 403;
    }
 }
--- a/deploy/truenas/vhost-snippet.conf
+++ b/deploy/truenas/vhost-snippet.conf
@@ -0,0 +1,37 @@
 # GerbilManager — Externer nginx-Vhost fuer die oeffentliche Webseite (WEB-2)
 # In Julians bestehenden nginx-Reverse-Proxy einfuegen.
 # <DOMAIN> ersetzen sobald der Hostname feststeht (Julian liefert ihn).
 #
 # SICHERHEIT: Dieser Vhost zeigt NUR auf den publicsite-Container (Port 8081).
 # Der Manager (API + Frontend, Port 80) ist NICHT erreichbar von aussen —
 # er hat keine Authentifizierung und muss LAN-only bleiben.
 server {
    listen 80;
    server_name <DOMAIN>;
    location / {
        proxy_pass http://127.0.0.1:8081;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # Kein Buffering fuer kleine statische HTML-Seiten
        proxy_buffering off;
    }
 }
 # Fuer HTTPS (empfohlen, z.B. per Let's Encrypt via certbot):
 # server {
 #     listen 443 ssl;
 #     server_name <DOMAIN>;
 #     ssl_certificate     /etc/letsencrypt/live/<DOMAIN>/fullchain.pem;
 #     ssl_certificate_key /etc/letsencrypt/live/<DOMAIN>/privkey.pem;
 #     location / {
 #         proxy_pass http://127.0.0.1:8081;
 #         proxy_set_header Host              $host;
 #         proxy_set_header X-Real-IP         $remote_addr;
 #         proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
 #         proxy_set_header X-Forwarded-Proto $scheme;
 #     }
 # }
--- a/docs/web-deploy.md
+++ b/docs/web-deploy.md
@@ -0,0 +1,136 @@
 # GerbilManager — Oeffentliche Webseite (Self-Hosted, TrueNAS)
 > **Zielgruppe:** Julian.
 > Die oeffentliche Seite (Jimdo-Ersatz) laeuft self-hosted auf der TrueNAS neben dem Manager.
 > Strato-Domain → DynDNS → IP → Julians nginx-Proxy → publicsite-Container (Port 8081).
 ---
 ## Architektur
 ```
 Internet
    |  HTTPS/HTTP
    v
 Julians nginx-Reverse-Proxy (laeuft schon auf NAS)
    |  proxy_pass http://127.0.0.1:8081
    v
 publicsite (nginx:alpine, Port 8081)  ← liest nur: /usr/share/nginx/html/live/
    |                                             (Shared Volume, read-only)
    | [POST /api/publish im Manager schreibt in dasselbe Volume]
    v
 api (.NET, Port 8080 intern)          → schreibt: /data/publicsite/live/
    |                                             (Shared Volume, read-write)
    v
 Manager (frontend-nginx, Port 80)     ← LAN-only, NIE internet-exponiert
 ```
 **SICHERHEIT — harte Bedingung:**
 - Nur `publicsite` (Port 8081) wird ins Internet weitergeleitet.
 - Der Manager (API + Frontend, Port 80) hat KEINE Authentifizierung → LAN-only.
 - Der `publicsite`-nginx proxied NICHT auf die API — er serviert nur statisches HTML.
 ---
 ## Erstinstallation
 ### 1. Verzeichnis anlegen
 ```bash
 mkdir -p /mnt/JailStorage/DockerVolumes/gerbilmanager/publicsite
 ```
 Das Verzeichnis wird von der API beschrieben (laeuft als root im Container) — keine ACL-Aenderung noetig.
 Beim ersten `POST /api/publish` legt die API automatisch `live/` und `_staging_new/` darunter an.
 ### 2. .env erganzen
 In `deploy/truenas/.env` hinzufuegen (oder aus `.env.example` uebernehmen):
 ```env
 PUBLICSITE_PATH=/mnt/JailStorage/DockerVolumes/gerbilmanager/publicsite
 PUBLICSITE_PORT=8081
 ```
 ### 3. Compose-Stack neu starten
 ```bash
 cd /opt/gerbilmanager
 docker compose -f deploy/truenas/compose.yaml up -d
 ```
 Der neue `publicsite`-Container startet und serviert Port 8081.
 Solange noch nicht veroeffentlicht wurde, zeigt er einen 404 (live/-Verzeichnis leer).
 ### 4. Julians externen nginx konfigurieren
 Inhalt von `deploy/truenas/vhost-snippet.conf` in den bestehenden nginx-Proxy einfuegen
 (als eigenen `server`-Block oder per `include`):
 ```bash
 # Auf der NAS, nginx-Konfigverzeichnis (z.B. /etc/nginx/conf.d/ oder sites-available):
 nano /etc/nginx/conf.d/gerbilmanager-public.conf
 # <DOMAIN> durch den tatsaechlichen Hostnamen ersetzen
 nginx -t && nginx -s reload
 ```
 ---
 ## Seite veroeffentlichen (Publish-Ablauf)
 1. Im Manager einloggen (http://\<NAS-IP\>/)
 2. Navigiere zu **Webseite** → Inhalte bearbeiten → **Veroeffentlichen**
 3. Klick auf "Veroeffentlichen" loest `POST /api/publish` aus.
 **Was passiert intern:**
 ```
 POST /api/publish
  → API baut SiteSnapshot aus DB (alle Published-Seiten)
  → SiteRenderer rendert Snapshot → HTML-Dateien (path → content Map)
  → Schreibt Dateien nach /data/publicsite/_staging_new/
  → Atomic Swap: _staging_new/ → live/   (rename = ein Syscall, nie halb-geschrieben)
  → publicsite-nginx serviert beim naechsten Request sofort den neuen Stand
  → Kein Container-Restart, kein Image-Rebuild, kein CI
 Response: { "filesPublished": N }
 ```
 **Endergebnis:** publicsite-nginx liest sofort den neuen Stand aus `live/`.
 ---
 ## Verifikation
 ```bash
 # publicsite-Container laeuft?
 docker compose -f deploy/truenas/compose.yaml ps publicsite
 # Seite lokal abrufbar?
 curl -s http://localhost:8081/ | head -5
 # live/-Verzeichnis gefuellt?
 ls /mnt/JailStorage/DockerVolumes/gerbilmanager/publicsite/live/
 # Oeffentlich erreichbar (nach DNS-Propagation)?
 curl -s http://<DOMAIN>/ | grep "Kleine Chaoten"
 ```
 ---
 ## Sicherheitstrennung (Pflichtcheck)
 | Was | Port | Internet-exponiert? |
 |-----|------|---------------------|
 | Manager (api + frontend) | 80 | **NEIN** — LAN-only |
 | Oeffentliche Seite (publicsite) | 8081 | Ja, via Julians nginx-Proxy |
 | API-Doku (Scalar) | 80/scalar | **NEIN** — LAN-only |
 Der Manager-nginx (gerbilmanager-frontend, Port 80) und die API (Port 8080 intern)
 sind NICHT in `vhost-snippet.conf` eingetragen und NICHT in Julians externem Proxy konfiguriert.
 Sie sind ausschliesslich im Heimnetz erreichbar.
 ---
 ## Hostname noch ausstehend
 `<DOMAIN>` in `deploy/truenas/vhost-snippet.conf` ist ein Platzhalter.
 Julian nennt den Hostnamen/Subdomain → ersetzen und nginx neu laden.
--- a/gerbil-manager-web/e2e/farbschlag-sync.spec.ts
+++ b/gerbil-manager-web/e2e/farbschlag-sync.spec.ts
@@ -0,0 +1,79 @@
 /** FARBSCHLAG-GENOTYPE-SYNC: Bidirektionale Sync im Tier-Formular. */
 import { de, expect, skipUnlessMock, test } from './fixtures'
 const t = de.pages.gerbils
 test('Farbschlag-Auswahl füllt Gencode automatisch aus', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')
  const farbschlagSelect = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
    .locator('select')
  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')
  // Vor der Auswahl ist das Gencode-Feld leer.
  await expect(genotypeInput).toHaveValue('')
  // 'Agouti' wählen → Gencode wird automatisch befüllt.
  await farbschlagSelect.selectOption({ label: 'Agouti' })
  await expect(genotypeInput).toHaveValue('AA CC DD EE GG PP spsp rere')
 })
 test('Gencode-Eingabe aktualisiert die Farbschlag-Auswahl', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')
  const farbschlagSelect = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
    .locator('select')
  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')
  // Gencode für Schwarz eintippen → Farbschlag-Select springt auf 'Schwarz'.
  await genotypeInput.fill('aa CC DD EE GG PP spsp rere')
  await expect(farbschlagSelect).toHaveValue('cv-schwarz')
 })
 test('Gencode ohne passende Farbschlag-Auswahl leert das Dropdown', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')
  const farbschlagSelect = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
    .locator('select')
  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')
  // Zuerst eine bekannte Farbe wählen, damit das Select belegt ist.
  await farbschlagSelect.selectOption({ label: 'Agouti' })
  await expect(farbschlagSelect).not.toHaveValue('')
  // Marder-Genotyp: bekannte Farbe im Engine, aber NICHT im Mock-Dropdown
  // → Select wird auf '' (kein Eintrag) zurückgesetzt.
  await genotypeInput.fill('aa cchmcchm DD EE GG PP spsp rere')
  await expect(farbschlagSelect).toHaveValue('')
 })
 test('Unbekannter Genotyp leert das Farbschlag-Dropdown (Unbekannt-Fall)', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')
  const farbschlagSelect = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.colorVariety}")`) })
    .locator('select')
  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')
  await farbschlagSelect.selectOption({ label: 'Blau' })
  await expect(farbschlagSelect).not.toHaveValue('')
  // aa CC dd EE gg pp → Unbekannter Farbschlag (nicht im Katalog) → Select leert sich.
  await genotypeInput.fill('aa CC dd EE gg pp spsp rere')
  await expect(farbschlagSelect).toHaveValue('')
 })
--- a/gerbil-manager-web/e2e/juvenile-details.spec.ts
+++ b/gerbil-manager-web/e2e/juvenile-details.spec.ts
@@ -0,0 +1,30 @@
 /** LITTER-JUVENILE-DETAILS: Jungtier-Felder (Farbschlag/Abgabe/Verstorben) im Wurf-Detail. */
 import { de, expect, skipUnlessMock, test } from './fixtures'
 const t = de.pages.litters
 test('Jungtier-Liste zeigt Farbschlag, Abgabedatum, Abnehmer, Todesdatum und Todesursache', async ({
  page,
 }) => {
  skipUnlessMock()
  await page.goto('/wuerfe/w-kruemel')
  await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
  // Krümel: Active, colorVarietyId cv-agouti → Farbschlag 'Agouti'
  const kruemelCard = page.getByRole('link', { name: /Krümel/ })
  await expect(kruemelCard).toBeVisible()
  await expect(kruemelCard).toContainText(`${t.detail.juvenileFields.colorVariety}: Agouti`)
  // Pippa: GivenAway, Gold, goHomeDate 2025-05-01, Abnehmer Familie Huber
  const pippaCard = page.getByRole('link', { name: /Pippa/ })
  await expect(pippaCard).toBeVisible()
  await expect(pippaCard).toContainText(`${t.detail.juvenileFields.colorVariety}: Gold`)
  await expect(pippaCard).toContainText(t.detail.juvenileFields.goHomeDate)
  await expect(pippaCard).toContainText(`${t.detail.juvenileFields.receiver}: Familie Huber`)
  // Benny: Deceased, no colorVarietyId, dateOfDeath + causeOfDeath
  const bennyCard = page.getByRole('link', { name: /Benny/ })
  await expect(bennyCard).toBeVisible()
  await expect(bennyCard).toContainText(t.detail.juvenileFields.dateOfDeath)
  await expect(bennyCard).toContainText(`${t.detail.juvenileFields.causeOfDeath}: Altersschwäche`)
 })
--- a/gerbil-manager-web/e2e/mock-data.ts
+++ b/gerbil-manager-web/e2e/mock-data.ts
@@ -91,7 +91,7 @@ function gerbil(
    id,
    name,
    gender,
-    status: 'Active',
+    status: 'Breeding',
    dateOfBirth,
    dateOfDeath: null,
    causeOfDeath: null,
@@ -151,6 +151,19 @@ export function seedDb(): MockDb {
      enclosureId: 'enc-leer',
      notes: 'neugieriger Entdecker',
    },
    // LITTER-JUVENILE-DETAILS: Jungtiere für Wurf K mit Zusatzinfos.
    {
      ...gerbil('pup-abgabe', 'Pippa', 'female', '2025-03-12', 'w-kruemel', 'cv-gold'),
      status: 'GivenAway' as const,
      goHomeDate: '2025-05-01',
      receiverContactId: 'con-huber',
    },
    {
      ...gerbil('pup-verstorben', 'Benny', 'male', '2025-03-12', 'w-kruemel', null),
      status: 'Deceased' as const,
      dateOfDeath: '2025-04-15',
      causeOfDeath: 'Altersschwäche',
    },
    // UI-POLISH-1: Import-Stub ohne Namen — testet den '(ohne Namen)'-Platzhalter in Liste + Detail.
    gerbil('nameless-stub', '', 'male', '2023-01-01', null, null),
  ]
--- a/gerbil-manager-web/e2e/stammbaum.spec.ts
+++ b/gerbil-manager-web/e2e/stammbaum.spec.ts
@@ -110,3 +110,47 @@ test('＋-Knopf ist sichtbar und lädt weitere Vorfahren nach (STAMMBAUM-EXPAND)
  await expandBtn.click({ force: true })
  await expect(page.getByRole('link', { name: 'Max' })).toBeVisible({ timeout: 8000 })
 })
 test('Würfe-Panel zeigt Würfe des Wurzeltiers + Link öffnet Wurf (STAMMBAUM-LITTERS)', async ({ page }) => {
  skipUnlessMock()
  // Fridolin ist Vater von Wurf K (5 Junge) — Panel muss erscheinen.
  await page.goto('/rennmaeuse/fridolin/stammbaum')
  await expect(page.locator('.pedigree-card').first()).toBeVisible()
  const panel = page.locator('.stammbaum-litters-panel')
  await expect(panel).toBeVisible()
  await expect(panel).toContainText(t.littersTitle)
  await expect(panel).toContainText('Wurf K')
  await expect(panel).toContainText('5')
  // Link-Klick → Wurf-Detailseite
  const wurfLink = panel.getByRole('link', { name: /Wurf K/ })
  await expect(wurfLink).toBeVisible()
  await wurfLink.click()
  await expect(page).toHaveURL(/\/wuerfe\/w-kruemel/)
 })
 test('Kein Würfe-Panel wenn Wurzeltier keine Würfe hat (STAMMBAUM-LITTERS)', async ({ page }) => {
  skipUnlessMock()
  // Krümel hat noch keine Würfe als Elternteil → Panel muss fehlen.
  await page.goto('/rennmaeuse/kruemel/stammbaum')
  await expect(page.locator('.pedigree-card').first()).toBeVisible()
  await expect(page.locator('.stammbaum-litters-panel')).not.toBeVisible()
 })
 test('Knoten-Karte zeigt volles Geburtsdatum (STAMMBAUM-FULLDATE)', async ({ page }) => {
  skipUnlessMock()
  // Krümel: dateOfBirth '2025-03-12' → formatDate → '12.03.2025'
  await page.goto('/rennmaeuse/kruemel/stammbaum')
  await expect(page.locator('.pedigree-card').first()).toBeVisible()
  await expect(page.locator('.pedigree-card__year').first()).toContainText('12.03.2025')
 })
 test('Gencode-Chip zeigt Genotyp statt Farbname (STAMMBAUM-GENCODE)', async ({ page }) => {
  skipUnlessMock()
  // Fridolin ist Vater von Krümel — genotype 'aa CC DD EE GG PP spsp rere'
  await page.goto('/rennmaeuse/kruemel/stammbaum')
  await expect(page.locator('.pedigree-card').first()).toBeVisible()
  const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
  await expect(fridolinCard.locator('.pedigree-chip')).toContainText('aa CC')
 })
--- a/gerbil-manager-web/e2e/status-model.spec.ts
+++ b/gerbil-manager-web/e2e/status-model.spec.ts
@@ -0,0 +1,58 @@
 /** STATUS-MODEL: Zucht/Liebhaber wählbar; Verstorben/Abgegeben abgeleitet (read-only). */
 import { de, expect, skipUnlessMock, test, uniqueName } from './fixtures'
 const t = de.pages.gerbils
 test('Tier-Formular zeigt nur wählbare Statuswerte im Dropdown', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')
  const statusField = page.locator('label.field', {
    has: page.locator(`span:text-is("${t.fields.status}")`),
  })
  // Zucht (Breeding) ist vorausgewählt
  await expect(statusField.locator('select')).toHaveValue('Breeding')
  // Optionen: nur Zucht, Liebhaber, Abzugeben (NICHT Verstorben/Abgegeben)
  const opts = statusField.locator('select option')
  await expect(opts.filter({ hasText: t.statusLabels.Breeding })).toHaveCount(1)
  await expect(opts.filter({ hasText: t.statusLabels.Pet })).toHaveCount(1)
  await expect(opts.filter({ hasText: t.statusLabels.ForSale })).toHaveCount(1)
  await expect(opts.filter({ hasText: t.statusLabels.Deceased })).toHaveCount(0)
  await expect(opts.filter({ hasText: t.statusLabels.GivenAway })).toHaveCount(0)
 })
 test('Tier-Formular zeigt abgeleiteten Status Verstorben als Text + Hinweis', async ({ page }) => {
  skipUnlessMock()
  // Willi ist Deceased
  await page.goto('/rennmaeuse/willi/bearbeiten')
  // Status-Select ist NICHT vorhanden (abgeleitet)
  const statusField = page.locator('.field', {
    has: page.locator(`span:text-is("${t.fields.status}")`),
  })
  await expect(statusField).toBeVisible()
  await expect(statusField.locator('select')).toHaveCount(0)
  await expect(statusField).toContainText(t.statusLabels.Deceased)
  await expect(statusField).toContainText(t.form.statusDerivedHint.Deceased)
 })
 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')
 })
 test('Neues Tier anlegen mit Status Liebhaber', async ({ page }) => {
  skipUnlessMock()
  const name = uniqueName('Tier')
  await page.goto('/rennmaeuse/neu')
  await page.getByLabel(`${t.fields.name} *`).fill(name)
  await page.getByLabel(`${t.fields.gender} *`).selectOption({ label: t.genderLabels.male })
  const statusField = page.locator('label.field', {
    has: page.locator(`span:text-is("${t.fields.status}")`),
  })
  await statusField.locator('select').selectOption({ label: t.statusLabels.Pet })
  await page.getByRole('button', { name: t.form.save, exact: true }).click()
  await expect(page.getByRole('heading', { name })).toBeVisible()
 })
--- a/gerbil-manager-web/src/api/tests/names.test.ts
+++ b/gerbil-manager-web/src/api/tests/names.test.ts
@@ -62,7 +62,12 @@ describe('NAMEGEN_USAGES', () => {
    expect(codes).toContain('mythg')
    expect(codes).toContain('ger')
    expect(codes).toContain('arb')
-    expect(codes).toHaveLength(5)
+    expect(codes).toContain('disney')
    expect(codes).toContain('pokemon')
    expect(codes).toContain('encities')
    expect(codes).toContain('hrcities')
    expect(codes).toContain('usstates')
    expect(codes).toHaveLength(10)
  })
  it('every usage has a non-empty label', () => {
--- a/gerbil-manager-web/src/api/names.ts
+++ b/gerbil-manager-web/src/api/names.ts
@@ -13,6 +13,11 @@ export const NAMEGEN_USAGES = [
  { code: 'mythg', label: 'Griech. Mythologie' },
  { code: 'ger', label: 'Deutsch' },
  { code: 'arb', label: 'Arabisch' },
  { code: 'disney', label: 'Disney' },
  { code: 'pokemon', label: 'Pokémon' },
  { code: 'encities', label: 'Englische Städte' },
  { code: 'hrcities', label: 'Kroatische Städte' },
  { code: 'usstates', label: 'US-Bundesstaaten' },
 ] as const
 export type NamegenUsageCode = (typeof NAMEGEN_USAGES)[number]['code']
--- a/gerbil-manager-web/src/api/types.ts
+++ b/gerbil-manager-web/src/api/types.ts
@@ -10,9 +10,11 @@
 export type Gender = 'unknown' | 'male' | 'female'
 export const GENDERS: Gender[] = ['unknown', 'male', 'female']
-/** Gerbil.Status — C# enum { Active, Deceased, GivenAway, ForSale }. */
+/** Gerbil.Status — C# enum { Breeding, Pet, Deceased, GivenAway, ForSale }. STATUS-MODEL: Active→Breeding (gated on Pam feature/status-model). */
-export type GerbilStatus = 'Active' | 'Deceased' | 'GivenAway' | 'ForSale'
+export type GerbilStatus = 'Breeding' | 'Pet' | 'Deceased' | 'GivenAway' | 'ForSale'
-export const GERBIL_STATUSES: GerbilStatus[] = ['Active', 'ForSale', 'Deceased', 'GivenAway']
+export const GERBIL_STATUSES: GerbilStatus[] = ['Breeding', 'Pet', 'ForSale', 'Deceased', 'GivenAway']
 /** Statuses the user can pick freely in the form; Deceased+GivenAway are derived by the backend. */
 export const SELECTABLE_STATUSES: GerbilStatus[] = ['Breeding', 'Pet', 'ForSale']
 /** ISO date string "YYYY-MM-DD" (maps to C# DateOnly). */
 export type DateOnlyString = string
--- a/gerbil-manager-web/src/components/AppShell.tsx
+++ b/gerbil-manager-web/src/components/AppShell.tsx
@@ -1,19 +1,21 @@
 import { useState } from 'react'
 import type { ReactNode } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
 import { de } from '../strings/de'
 import GerbilIcon from './GerbilIcon'
 import './appShell.css'
 interface NavItem {
  to: string
  label: string
-  icon: string
+  icon: ReactNode
  end?: boolean
 }
 // Primary items are always visible in the phone bottom bar; secondary items
 // move into the "Mehr" sheet on phones and appear inline in the desktop sidebar.
 const PRIMARY: NavItem[] = [
-  { to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭' },
+  { to: '/rennmaeuse', label: de.nav.gerbils, icon: <GerbilIcon size="1.25em" /> },
  { to: '/wuerfe', label: de.nav.litters, icon: '🍼' },
  { to: '/genetik', label: de.nav.genetics, icon: '🧬' },
 ]
@@ -46,7 +48,7 @@ export default function AppShell() {
  return (
    <div className="app-shell">
      <header className="app-header">
-        <span className="app-logo" aria-hidden="true">🐭</span>
+        <span className="app-logo" aria-hidden="true"><GerbilIcon size="1.5rem" /></span>
        <h1 className="app-title">{de.app.title}</h1>
      </header>
--- a/gerbil-manager-web/src/components/GerbilIcon.tsx
+++ b/gerbil-manager-web/src/components/GerbilIcon.tsx
@@ -0,0 +1,35 @@
 import type { CSSProperties } from 'react'
 interface Props {
  size?: string | number
  style?: CSSProperties
  className?: string
 }
 /** Reusable gerbil silhouette icon — upright sitting pose, long tail with tuft. fill=currentColor. */
 export default function GerbilIcon({ size = '1em', style, className }: Props) {
  return (
    <svg
      viewBox="0 0 64 64"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      style={{ display: 'inline-block', verticalAlign: '-0.125em', flexShrink: 0, ...style }}
      className={className}
      role="img"
      aria-label="Rennmaus"
    >
      {/* body — sitting upright */}
      <path d="M40 14c6 0 11 5 11 12 0 4-2 7-2 11 0 10-6 16-15 16-8 0-14-6-14-15 0-13 9-24 20-24z" />
      {/* ear */}
      <circle cx="46" cy="15" r="5" />
      {/* hind paw */}
      <ellipse cx="24" cy="52" rx="9" ry="3.5" />
      {/* long curved tail with tuft */}
      <path d="M16 51c-7 1-13-2-15-9-1-4 0-8 3-10 1 3 1 6 3 8 3 3 7 4 11 4z" />
      {/* front paw */}
      <path d="M30 45c3 0 5 1 5 4-3 1-6 1-7-2 0-1 1-2 2-2z" />
    </svg>
  )
 }
--- a/gerbil-manager-web/src/pages/GerbilFormPage.tsx
+++ b/gerbil-manager-web/src/pages/GerbilFormPage.tsx
@@ -3,10 +3,10 @@ import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { de } from '../strings/de'
 import { createGerbil, getGerbil, updateGerbil } from '../api/gerbils'
 import { listColorVarieties, listContacts, listEnclosures, listLitters } from '../api/lookups'
-import { GENDERS, GERBIL_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
+import { GENDERS, SELECTABLE_STATUSES, type CreateGerbil, type Gender, type GerbilStatus } from '../api/types'
 import { useApi, useMutation } from '../hooks/useApi'
 import { genderLabel, statusLabel } from '../format/labels'
-import { fromDisplayString } from '../genetics'
+import { fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG } from '../genetics'
 import FarbschlagImage from '../components/FarbschlagImage'
 import NameSuggestPanel from '../components/NameSuggestPanel'
 import '../components/NameSuggestPanel.css'
@@ -34,7 +34,7 @@ interface FormState {
 const EMPTY: FormState = {
  name: '',
  gender: '',
-  status: 'Active',
+  status: 'Breeding',
  dateOfBirth: '',
  dateOfDeath: '',
  causeOfDeath: '',
@@ -245,16 +245,29 @@ export default function GerbilFormPage() {
          {errors.gender && <small className="error-text">{errors.gender}</small>}
        </label>
-        <label className="field">
+        {/* STATUS-MODEL: Deceased/GivenAway are derived by the backend — show as read-only with hint */}
-          <span>{t.fields.status}</span>
+        {form.status === 'Deceased' || form.status === 'GivenAway' ? (
-          <select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
+          <div className="field">
-            {GERBIL_STATUSES.map((s) => (
+            <span>{t.fields.status}</span>
-              <option key={s} value={s}>
+            <span className="muted">
-                {statusLabel(s)}
+              {statusLabel(form.status)}
-              </option>
+              <small className="muted" style={{ marginLeft: '0.5rem' }}>
-            ))}
+                ({t.form.statusDerivedHint[form.status]})
-          </select>
+              </small>
-        </label>
+            </span>
          </div>
        ) : (
          <label className="field">
            <span>{t.fields.status}</span>
            <select value={form.status} onChange={(e) => set('status', e.target.value as GerbilStatus)}>
              {SELECTABLE_STATUSES.map((s) => (
                <option key={s} value={s}>
                  {statusLabel(s)}
                </option>
              ))}
            </select>
          </label>
        )}
        <label className="field">
          <span>{t.fields.dateOfBirth}</span>
@@ -307,7 +320,14 @@ export default function GerbilFormPage() {
          <span className="farbschlag-value">
            <select
              value={form.colorVarietyId}
-              onChange={(e) => set('colorVarietyId', e.target.value)}
+              onChange={(e) => {
                const newId = e.target.value
                set('colorVarietyId', newId)
                if (newId) {
                  const variety = (colorVarieties.data ?? []).find((cv) => cv.id === newId)
                  if (variety?.canonicalGenotype) set('genotype', variety.canonicalGenotype)
                }
              }}
            >
              <option value="">{t.form.none}</option>
              {(colorVarieties.data ?? []).map((cv) => (
@@ -387,7 +407,23 @@ export default function GerbilFormPage() {
            className="input"
            value={form.genotype}
            placeholder="Aa CC Dd EE GG Pp Spsp rere"
-            onChange={(e) => set('genotype', e.target.value)}
+            onChange={(e) => {
              const val = e.target.value
              set('genotype', val)
              if (val.trim() !== '' && isGenotypeValid(val)) {
                try {
                  const name = genotypeToFarbschlag(fromDisplayString(val))
                  if (name === UNKNOWN_FARBSCHLAG) {
                    set('colorVarietyId', '')
                  } else {
                    const match = (colorVarieties.data ?? []).find((cv) => cv.name === name)
                    set('colorVarietyId', match?.id ?? '')
                  }
                } catch {
                  // invalid while typing — leave colorVarietyId unchanged
                }
              }
            }}
            aria-invalid={Boolean(errors.genotype)}
          />
          <small className={errors.genotype ? 'error-text' : 'muted'}>
--- a/gerbil-manager-web/src/pages/GerbilsPage.tsx
+++ b/gerbil-manager-web/src/pages/GerbilsPage.tsx
@@ -29,7 +29,7 @@ const SORT_ORDER_BY: Record<SortKey, string> = {
 export default function GerbilsPage() {
  const t = de.pages.gerbils
  const [search, setSearch] = useState('')
-  const [status, setStatus] = useState<GerbilStatus | ''>('Active')
+  const [status, setStatus] = useState<GerbilStatus | ''>('Breeding')
  const [gender, setGender] = useState<Gender | ''>('')
  const [colorVarietyId, setColorVarietyId] = useState('')
  const [originBreeder, setOriginBreeder] = useState('')
@@ -64,7 +64,7 @@ export default function GerbilsPage() {
  const resetFilters = () => {
    setSearch('')
-    setStatus('Active')
+    setStatus('Breeding')
    setGender('')
    setColorVarietyId('')
    setOriginBreeder('')
@@ -85,7 +85,7 @@ export default function GerbilsPage() {
  // UX-MOBILE-1: count non-default filter values for the badge.
  const activeFilterCount =
-    (status !== 'Active' ? 1 : 0) +
+    (status !== 'Breeding' ? 1 : 0) +
    (gender !== '' ? 1 : 0) +
    (colorVarietyId !== '' ? 1 : 0) +
    (originBreeder !== '' ? 1 : 0) +
--- a/gerbil-manager-web/src/pages/StammbaumPage.tsx
+++ b/gerbil-manager-web/src/pages/StammbaumPage.tsx
@@ -22,11 +22,13 @@ import Tree from 'react-d3-tree'
 import type { CustomNodeElementProps, Point, RawNodeDatum } from 'react-d3-tree'
 import { de } from '../strings/de'
 import { ApiError } from '../api/client'
 import { listLitters } from '../api/litters'
 import { listColorVarieties } from '../api/lookups'
 import { getInbreedingCoefficient } from '../api/pedigree'
-import type { Gender, Gerbil } from '../api/types'
+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 {
  DEFAULT_GENERATIONS,
@@ -156,6 +158,13 @@ export default function StammbaumPage() {
      ? `${(inbreeding.data * 100).toLocaleString('de-DE', { maximumFractionDigits: 1 })} %`
      : t.inbreeding.unavailable
  /* ── Würfe des Wurzeltiers (STAMMBAUM-LITTERS): aktualisiert bei Umwurzeln ── */
  const rootLitters = useApi(
    () => listLitters({ filter: `fatherId=${id}|motherId=${id}`, orderBy: 'date desc', pageSize: 50 }),
    [id],
  )
  const rootLitterItems = rootLitters.data?.items ?? []
  /* ── react-d3-tree-Daten ── */
  const nodesByPath = useMemo(() => (root ? collectNodes(root) : null), [root])
  const datum = useMemo(() => (root ? toRawNodeDatum(root, t.unknown) : null), [root, t])
@@ -315,25 +324,30 @@ export default function StammbaumPage() {
          </button>
        </div>
-        <div className="stammbaum-canvas" ref={canvasRef}>
+        <div className="stammbaum-layout">
-          {view && (
+          {rootLitterItems.length > 0 && (
-            <Tree
+            <LittersPanel litters={rootLitterItems} t={t} />
              key={id}
              data={datum}
              renderCustomNodeElement={renderNode}
              orientation="horizontal"
              pathFunc="step"
              translate={view.translate}
              zoom={view.zoom}
              scaleExtent={{ min: ZOOM_MIN, max: ZOOM_MAX }}
              zoomable
              draggable
              collapsible={false}
              nodeSize={{ x: NODE_X, y: NODE_Y }}
              separation={{ siblings: 1, nonSiblings: 1 }}
              onUpdate={handleTreeUpdate}
            />
          )}
          <div className="stammbaum-canvas" ref={canvasRef}>
            {view && (
              <Tree
                key={id}
                data={datum}
                renderCustomNodeElement={renderNode}
                orientation="horizontal"
                pathFunc="step"
                translate={view.translate}
                zoom={view.zoom}
                scaleExtent={{ min: ZOOM_MIN, max: ZOOM_MAX }}
                zoomable
                draggable
                collapsible={false}
                nodeSize={{ x: NODE_X, y: NODE_Y }}
                separation={{ siblings: 1, nonSiblings: 1 }}
                onUpdate={handleTreeUpdate}
              />
            )}
          </div>
        </div>
        <ul className="stammbaum-hints">
          <li>{t.tapHint}</li>
@@ -366,7 +380,7 @@ function PedigreeCard({
  const t = de.pages.stammbaum
  const g = node.gerbil
  const chip = farbschlag ? chipColorFor(farbschlag) : null
-  const year = g.dateOfBirth ? g.dateOfBirth.slice(0, 4) : null
+  const dob = g.dateOfBirth ? formatDate(g.dateOfBirth) : null
  return (
    <div
      className={isRoot ? 'pedigree-card pedigree-card--root' : 'pedigree-card'}
@@ -376,7 +390,7 @@ function PedigreeCard({
    >
      {/* Foto-Platzhalter — echte Fotos kommen mit FEAT-6. */}
      <div className="pedigree-card__photo" aria-hidden="true">
-        🐭
+        <GerbilIcon size="1.6rem" />
      </div>
      <div className="pedigree-card__body">
        <div className="pedigree-card__name">
@@ -393,11 +407,12 @@ function PedigreeCard({
          <span
            className="pedigree-chip"
            style={chip ? { background: chip.bg, color: chip.fg } : undefined}
            title={farbschlag}
          >
-            {farbschlag}
+            {g.genotype || farbschlag}
          </span>
        )}
-        {year && <span className="pedigree-card__year">* {year}</span>}
+        {dob && <span className="pedigree-card__year">* {dob}</span>}
      </div>
      {node.expandable && (
        <button
@@ -417,6 +432,36 @@ function PedigreeCard({
  )
 }
 /* ── Würfe-Panel (STAMMBAUM-LITTERS) ─────────────────────────────── */
 function LittersPanel({
  litters,
  t,
 }: {
  litters: Litter[]
  t: { littersTitle: string; littersJunge: string }
 }) {
  return (
    <aside className="stammbaum-litters-panel" aria-label={t.littersTitle}>
      <div className="stammbaum-litters-panel__title">{t.littersTitle}</div>
      <ul className="stammbaum-litters-panel__list">
        {litters.map((l) => (
          <li key={l.id}>
            <Link to={`/wuerfe/${l.id}`} className="stammbaum-litters-panel__link">
              <span className="stammbaum-litters-panel__name">{l.name}</span>
              {l.totalBorn != null && (
                <span className="stammbaum-litters-panel__born">
                  {l.totalBorn} {t.littersJunge}
                </span>
              )}
            </Link>
          </li>
        ))}
      </ul>
    </aside>
  )
 }
 function SexIcon({ gender }: { gender: Gender }) {
  const symbol = gender === 'male' ? '♂' : gender === 'female' ? '♀' : '?'
  return (
--- a/gerbil-manager-web/src/pages/WurfDetailPage.tsx
+++ b/gerbil-manager-web/src/pages/WurfDetailPage.tsx
@@ -1,13 +1,14 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { de } from '../strings/de'
 import { getLitter } from '../api/litters'
 import { getGerbil, listGerbils } from '../api/gerbils'
 import { listColorVarieties, listContacts } from '../api/lookups'
 import { condition } from '../api/gridify'
 import { useApi } from '../hooks/useApi'
-import { formatDate } from '../format/labels'
+import { formatDate, genderLabel } from '../format/labels'
 import { isValidGenotype } from '../format/genotypeText'
-import { breed, fromDisplayString, type BreedingResult } from '../genetics'
+import { breed, fromDisplayString, genotypeToFarbschlag, UNKNOWN_FARBSCHLAG, type BreedingResult } from '../genetics'
 import BreedingResultView from '../components/BreedingResultView'
 export default function WurfDetailPage() {
@@ -43,6 +44,38 @@ export default function WurfDetailPage() {
    return breed(fromDisplayString(fg), fromDisplayString(mg))
  }, [father.data, mother.data])
  // Farbschlag + Abnehmer lookups for the juvenile list.
  const colorVarieties = useApi(() => listColorVarieties(), [])
  const contacts = useApi(() => listContacts(), [])
  const colorNameById = useMemo(
    () => new Map((colorVarieties.data ?? []).map((c) => [c.id, c.name])),
    [colorVarieties.data],
  )
  const contactNameById = useMemo(
    () => new Map((contacts.data ?? []).map((c) => [c.id, c.name])),
    [contacts.data],
  )
  const farbschlagOf = useCallback(
    (g: { colorVarietyId: string | null; genotype: string | null }): string | null => {
      if (g.colorVarietyId) {
        const name = colorNameById.get(g.colorVarietyId)
        if (name) return name
      }
      if (g.genotype?.trim()) {
        try {
          const name = genotypeToFarbschlag(fromDisplayString(g.genotype))
          return name === UNKNOWN_FARBSCHLAG ? null : name
        } catch {
          return null
        }
      }
      return null
    },
    [colorNameById],
  )
  if (litter.loading) return <p className="muted">{de.common.loading}</p>
  if (litter.error || !litter.data) {
    return (
@@ -117,14 +150,24 @@ export default function WurfDetailPage() {
      {!juveniles.loading && registered === 0 && <p className="muted">{t.detail.noJuveniles}</p>}
      {registered > 0 && (
        <ul className="card-list">
-          {(juveniles.data?.items ?? []).map((g) => (
+          {(juveniles.data?.items ?? []).map((g) => {
-            <li key={g.id}>
+            const farbe = farbschlagOf(g)
-              <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
+            const receiver = g.receiverContactId ? contactNameById.get(g.receiverContactId) : null
-                <span className="gerbil-card__name">{g.name}</span>
+            const tJf = t.detail.juvenileFields
-                <span className="gerbil-card__meta">{de.pages.gerbils.genderLabels[g.gender]}</span>
+            return (
-              </Link>
+              <li key={g.id}>
-            </li>
+                <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
-          ))}
+                  <span className="gerbil-card__name">{g.name}</span>
                  <span className="gerbil-card__meta">{genderLabel(g.gender)}</span>
                  {farbe && <span className="gerbil-card__meta">{tJf.colorVariety}: {farbe}</span>}
                  {g.goHomeDate && <span className="gerbil-card__meta">{tJf.goHomeDate}: {formatDate(g.goHomeDate)}</span>}
                  {receiver && <span className="gerbil-card__meta">{tJf.receiver}: {receiver}</span>}
                  {g.dateOfDeath && <span className="gerbil-card__meta">{tJf.dateOfDeath}: {formatDate(g.dateOfDeath)}</span>}
                  {g.causeOfDeath && <span className="gerbil-card__meta">{tJf.causeOfDeath}: {g.causeOfDeath}</span>}
                </Link>
              </li>
            )
          })}
        </ul>
      )}
--- a/gerbil-manager-web/src/pages/stammbaum.css
+++ b/gerbil-manager-web/src/pages/stammbaum.css
@@ -45,9 +45,132 @@
  color: var(--color-text-muted);
 }
 /* ── Würfe-Panel + Layout (STAMMBAUM-LITTERS) ────────────────── */
 .stammbaum-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
 }
 /* Desktop: Würfe-Panel links vom Baum. */
 .stammbaum-litters-panel {
  flex: none;
  width: 148px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-right: 1px solid var(--color-border);
  margin-right: 0;
 }
 .stammbaum-litters-panel__title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
 }
 .stammbaum-litters-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow-y: auto;
  max-height: calc(clamp(18rem, 62dvh, 46rem) - 3rem);
 }
 .stammbaum-litters-panel__link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.4rem;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 .stammbaum-litters-panel__link:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
 }
 .stammbaum-litters-panel__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .stammbaum-litters-panel__born {
  color: var(--color-text-muted);
  font-size: 0.72rem;
 }
 /* Mobil (≤520px): Panel als kompakter horizontaler Streifen ÜBER dem Baum. */
@media (max-width: 520px) {
  .stammbaum-layout {
    flex-direction: column;
  }
  .stammbaum-litters-panel {
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
  }
  .stammbaum-litters-panel__title {
    flex: none;
    white-space: nowrap;
  }
  .stammbaum-litters-panel__list {
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.4rem;
  }
  .stammbaum-litters-panel__link {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }
  .stammbaum-litters-panel__born {
    color: var(--color-text-muted);
  }
  /* Canvas behält explizite Höhe in column-Richtung. */
  .stammbaum-canvas {
    flex: 0 0 auto;
  }
 }
 /* ── Zeichenfläche ────────────────────────────────────────────── */
 .stammbaum-canvas {
  flex: 1 1 auto;
  min-width: 0;
  height: clamp(18rem, 62dvh, 46rem);
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
@@ -162,14 +285,15 @@
 .pedigree-chip {
  align-self: flex-start;
  max-width: 100%;
-  font-size: 0.68rem;
+  font-size: 0.62rem;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
  background: var(--color-accent-soft);
  color: var(--color-accent);
-  white-space: nowrap;
+  white-space: normal;
  word-break: break-word;
  overflow: hidden;
-  text-overflow: ellipsis;
+  line-height: 1.3;
 }
 .pedigree-card__year {
--- a/gerbil-manager-web/src/pedigree/tests/build.test.ts
+++ b/gerbil-manager-web/src/pedigree/tests/build.test.ts
@@ -22,7 +22,7 @@ function makeGerbil(id: string, name: string, litterId: string | null = null): G
    id,
    name,
    gender: 'unknown',
-    status: 'Active',
+    status: 'Breeding',
    dateOfBirth: null,
    dateOfDeath: null,
    causeOfDeath: null,
--- a/gerbil-manager-web/src/statistics/tests/aggregate.test.ts
+++ b/gerbil-manager-web/src/statistics/tests/aggregate.test.ts
@@ -27,7 +27,7 @@ function makeGerbil(over: Partial<Gerbil> & { id: string }): Gerbil {
  return {
    name: over.id,
    gender: 'unknown',
-    status: 'Active' as GerbilStatus,
+    status: 'Breeding' as GerbilStatus,
    dateOfBirth: null,
    dateOfDeath: null,
    causeOfDeath: null,
--- a/gerbil-manager-web/src/statistics/aggregate.ts
+++ b/gerbil-manager-web/src/statistics/aggregate.ts
@@ -83,7 +83,7 @@ export function farbschlagDistribution(
 ): NameCount[] {
  const byName = new Map<string | null, number>()
  for (const g of gerbils) {
-    if (g.status !== 'Active') continue
+    if (g.status !== 'Breeding' && g.status !== 'Pet') continue
    const name = resolveName(g)
    byName.set(name, (byName.get(name) ?? 0) + 1)
  }
--- a/gerbil-manager-web/src/strings/de.ts
+++ b/gerbil-manager-web/src/strings/de.ts
@@ -124,6 +124,11 @@ export const de = {
        isDeafUnknown: 'Unbekannt',
        isDeafYes: 'Ja',
        isDeafNo: 'Nein',
        // STATUS-MODEL: Hinweis für abgeleitete Statuswerte
        statusDerivedHint: {
          Deceased: 'Wird automatisch gesetzt wenn Todesdatum erfasst.',
          GivenAway: 'Wird automatisch gesetzt nach Abgabe.',
        },
        save: 'Speichern',
        cancel: 'Abbrechen',
        saving: 'Speichern …',
@@ -141,8 +146,10 @@ export const de = {
        male: 'Männlich',
        female: 'Weiblich',
      },
      // STATUS-MODEL: Breeding/Pet ersetzen Active; Deceased+GivenAway = abgeleitet (Backend)
      statusLabels: {
-        Active: 'Aktiv',
+        Breeding: 'Zucht',
        Pet: 'Liebhaber',
        Deceased: 'Verstorben',
        GivenAway: 'Abgegeben',
        ForSale: 'Zur Abgabe',
@@ -189,6 +196,14 @@ export const de = {
        edit: 'Bearbeiten',
        back: 'Zurück zur Liste',
        notFound: 'Dieser Wurf wurde nicht gefunden.',
        // LITTER-JUVENILE-DETAILS: pro-Jungtier-Felder
        juvenileFields: {
          colorVariety: 'Farbschlag',
          goHomeDate: 'Abgegeben',
          receiver: 'Abnehmer',
          dateOfDeath: 'Verstorben',
          causeOfDeath: 'Todesursache',
        },
      },
      // Formular
      form: {
@@ -358,6 +373,9 @@ export const de = {
      /** Mini-Legende unter dem Baum (STAMMBAUM-EXPAND). */
      hintName: 'Namenslink: Tierakte öffnen',
      hintExpand: '＋: weitere Vorfahren nachladen',
      /** Würfe-Panel links (STAMMBAUM-LITTERS). */
      littersTitle: 'Würfe',
      littersJunge: 'Junge',
      zoomIn: 'Vergrößern',
      zoomOut: 'Verkleinern',
      zoomFit: 'Ansicht einpassen',
Author	SHA1	Message	Date
Gulum	40f3ce250d	STATUS-MODEL-FE: Zucht/Liebhaber/Abzugeben wählbar; Verstorben+Abgegeben abgeleitet (gated auf Pam BE)	2026-06-07 03:36:10 +02:00
Gulum	2d54cb901f	Merge feature/litter-juvenile-details (LITTER-JUVENILE-DETAILS): pro Jungtier Farbschlag/Abgabedatum/Abnehmer/Todestag/Ursache im Wurf-Detail Some checks failed CI / Backend Tests (.NET) (push) Successful in 1m16s Details CI / Docker Build & Push (push) Has been cancelled Details CI / Frontend Tests (Node/Vite) (push) Has been cancelled Details	2026-06-07 03:25:53 +02:00
Gulum	03f8e4de90	LITTER-JUVENILE-DETAILS: Farbschlag/Abgabe/Abnehmer/Todesdaten pro Jungtier im Wurf-Detail	2026-06-07 03:23:22 +02:00
Gulum	25af10a736	Merge feature/farbschlag-genotype-sync (FARBSCHLAG-GENOTYPE-SYNC): Farbschlag↔Gencode bidirektionale Sync im Tier-Formular Some checks failed CI / Backend Tests (.NET) (push) Successful in 1m2s Details CI / Docker Build & Push (push) Has been cancelled Details CI / Frontend Tests (Node/Vite) (push) Has been cancelled Details	2026-06-07 03:16:55 +02:00
Gulum	ade40eef5e	FARBSCHLAG-GENOTYPE-SYNC: Farbschlag↔Gencode bidirektionale Sync im Tier-Formular	2026-06-07 03:16:02 +02:00
Gulum	c1b215d06f	Merge feature/stammbaum-fulldate (STAMMBAUM): volles Geburtsdatum + Gencode-Chip + GerbilIcon (🐭→Rennmaus app-weit) Some checks failed CI / Backend Tests (.NET) (push) Successful in 1m0s Details CI / Frontend Tests (Node/Vite) (push) Successful in 9m32s Details CI / Docker Build & Push (push) Failing after 9s Details	2026-06-07 03:03:45 +02:00
Gulum	7525970ffc	STAMMBAUM-FULLDATE: GerbilIcon-SVG + Gencode-Chip + Gerbil-Icon ersetzt 🐭 app-weit	2026-06-07 02:53:31 +02:00
Gulum	bfc90f8581	STAMMBAUM-FULLDATE: volles Geburtsdatum auf Knoten-Karten (formatDate statt slice 4) + e2e	2026-06-07 02:47:12 +02:00
Gulum	c45bcc99f0	Merge feature/ops-2 (OPS-2): TrueNAS Goldeye deploy config (registry git.rismer.de + JailStorage paths) + ops runbook Some checks failed CI / Backend Tests (.NET) (push) Successful in 59s Details CI / Frontend Tests (Node/Vite) (push) Successful in 9m33s Details CI / Docker Build & Push (push) Failing after 8s Details # Conflicts: # deploy/truenas/compose.yaml	2026-06-07 02:28:00 +02:00
Gulum	c4a661b5b6	Merge feature/search-1 (SEARCH-1): regression tests for separator-insensitive nameSearch + OriginBreeder filter	2026-06-07 02:27:21 +02:00
Gulum	30b2fff775	Merge feature/web-2 (WEB-2): self-host public site — POST /api/publish (atomic swap) + publicsite nginx + vhost + docs Some checks failed CI / Frontend Tests (Node/Vite) (push) Successful in 9m32s Details CI / Docker Build & Push (push) Failing after 10s Details CI / Backend Tests (.NET) (push) Successful in 59s Details	2026-06-07 01:45:30 +02:00
Gulum	c0ecf2022d	WEB-2: Self-hosted public site (publicsite-nginx + POST /api/publish, atomic swap) POST /api/publish: rendert SiteSnapshot->HTML in _staging_new/, atomic swap -> live/ (rename, ein Syscall). publicsite-nginx:alpine serviert live/ read-only auf Port 8081. Shared Volume api(rw)/publicsite(ro). Manager bleibt LAN-only. 5 neue Tests (atomic swap, UTF-8, mehrfach), 184/184 gruen. compose config OK. Vhost-Snippet + web-deploy.md (Deutsch) beigelegt; <DOMAIN> wartet auf Julian.	2026-06-07 01:44:28 +02:00
Gulum	04971bf3bb	Merge feature/stammbaum-litters (STAMMBAUM-LITTERS): Würfe des Wurzeltiers links im Viewer + Link Some checks failed CI / Backend Tests (.NET) (push) Successful in 58s Details CI / Docker Build & Push (push) Has been cancelled Details CI / Frontend Tests (Node/Vite) (push) Has been cancelled Details	2026-06-07 01:38:10 +02:00
Gulum	08500757d7	STAMMBAUM-LITTERS: Wuerfe des Wurzeltiers links im Stammbaum-Viewer Layout: stammbaum-layout (flex-row Desktop / flex-column Mobil) wraps [Wuerfe-Panel \| Canvas]. Panel 148px breit, border-right Trenner; auf Mobil (<=520px) horizontaler Scroll-Streifen ueber dem Canvas. Daten: useApi(listLitters fatherId=id\|motherId=id) reagiert automatisch auf Umwurzeln (id-Param). Kein Panel wenn Wurzeltier keine Wuerfe hat. Pro Wurf: Wurfname (fett) + N Junge + Link zu /wuerfe/{id}. CSS: flex 0 0 auto Mobil-Override sichert Canvas-Hoehe im column-Mode. de.ts: littersTitle, littersJunge (Stammbaum-Sektion, disjunkt). Gate: vitest 122/122 e2e 20/20 Stammbaum (4 neue Tests x 2 Viewports) build+tsc+eslint clean.	2026-06-07 01:37:08 +02:00
Gulum	05ef3d9567	Merge feature/namegen-2-fe (NAMEGEN-2-FE): 10 Namens-Kategorien UI (disney/pokemon/EN+HR-Städte/US-Staaten) Some checks failed CI / Backend Tests (.NET) (push) Successful in 59s Details CI / Docker Build & Push (push) Has been cancelled Details CI / Frontend Tests (Node/Vite) (push) Has been cancelled Details	2026-06-07 01:35:40 +02:00
Gulum	c452b69dd6	NAMEGEN-2-FE: 5 neue Namenskategorien (Disney, Pokémon, Englische/Kroatische Städte, US-Bundesstaaten) - NAMEGEN_USAGES: +disney, +pokemon, +encities, +hrcities, +usstates (jetzt 10 Einträge) - names.test.ts: Count-Test 5→10, neue toContain-Checks für alle 5 Codes Gate: vitest 107/107, e2e 160/160, tsc clean	2026-06-06 21:48:08 +02:00
Gulum	f20a42a94b	SEARCH-1: tests — Normalize unit + separator-insensitive nameSearch filter + OriginBreeder/breeders endpoint (SQLite in-memory round-trip)	2026-06-06 09:04:20 +02:00