Merge feature/gerbil-profilephoto (PROFILEPHOTO-BE): berechnetes profilePhotoUrl aufs Gerbil-DTO (Shared-Dep fuer Avatare, keine Migration, kein N+1)

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:33:01 +02:00 · 2026-06-07 03:25:53 +02:00 · 2026-06-07 03:23:22 +02:00 · 2026-06-07 03:19:00 +02:00 · 2026-06-07 03:16:55 +02:00 · 2026-06-07 03:16:02 +02:00
30 changed files with 1390 additions and 319 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/GerbilProfilePhotoTests.cs
+++ b/GerbilManager.Tests/GerbilProfilePhotoTests.cs
@@ -0,0 +1,83 @@
+using System.Net;
+using System.Net.Http.Json;
+using System.Text.Json;
+using System.Text.RegularExpressions;
+using GerbilManagerWebAPI.Models;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace GerbilManager.Tests;
+
+/// <summary>profilePhotoUrl: computed field on GerbilDto — first photo by sortOrder, or null.</summary>
+public class GerbilProfilePhotoTests : IClassFixture<ApiFactory>
+{
+    private readonly HttpClient _client;
+    private readonly ApiFactory _factory;
+
+    public GerbilProfilePhotoTests(ApiFactory factory)
+    {
+        _factory = factory;
+        _client = factory.CreateClient();
+    }
+
+    private static Guid ExtractId(string json) =>
+        Guid.Parse(Regex.Match(json, "\"id\":\"([^\"]+)\"").Groups[1].Value);
+
+    private static string? GetStr(JsonElement el, string prop) =>
+        el.TryGetProperty(prop, out var v) && v.ValueKind == JsonValueKind.String
+            ? v.GetString() : null;
+
+    private async Task<Guid> CreateGerbil(string name)
+    {
+        var resp = await _client.PostAsync("/gerbils", JsonContent.Create(new { name, gender = "female" }));
+        Assert.Equal(HttpStatusCode.Created, resp.StatusCode);
+        return ExtractId(await resp.Content.ReadAsStringAsync());
+    }
+
+    private void InsertPhotos(Guid gerbilId, params (string fileName, int sortOrder)[] photos)
+    {
+        using var scope = _factory.Services.CreateScope();
+        var db = scope.ServiceProvider.GetRequiredService<ApplicationContext>();
+        foreach (var (fn, so) in photos)
+            db.GerbilPhotos.Add(new GerbilPhoto
+            {
+                Id = Guid.NewGuid(), GerbilId = gerbilId,
+                FileName = fn, SortOrder = so, CreatedAt = DateTimeOffset.UtcNow,
+            });
+        db.SaveChanges();
+    }
+
+    [Fact]
+    public async Task GetById_without_photos_returns_null_profilePhotoUrl()
+    {
+        var id = await CreateGerbil("NoPhoto");
+        var json = await _client.GetStringAsync($"/gerbils/{id}");
+        var el = JsonDocument.Parse(json).RootElement;
+        Assert.True(el.TryGetProperty("profilePhotoUrl", out var v));
+        Assert.Equal(JsonValueKind.Null, v.ValueKind);
+    }
+
+    [Fact]
+    public async Task GetById_with_photos_returns_lowest_sortOrder_url()
+    {
+        var id = await CreateGerbil("PhotoGerbil");
+        InsertPhotos(id, ("second.jpg", 1), ("first.jpg", 0));
+
+        var json = await _client.GetStringAsync($"/gerbils/{id}");
+        var el = JsonDocument.Parse(json).RootElement;
+        Assert.Equal("/photos/files/first.jpg", GetStr(el, "profilePhotoUrl"));
+    }
+
+    [Fact]
+    public async Task GetList_returns_profilePhotoUrl_without_n_plus_1()
+    {
+        var id = await CreateGerbil("ListPhoto");
+        InsertPhotos(id, ("list-photo.jpg", 0));
+
+        var json = await _client.GetStringAsync("/gerbils");
+        var root = JsonDocument.Parse(json).RootElement;
+        var items = root.GetProperty("items").EnumerateArray().ToList();
+        var gerbil = items.FirstOrDefault(x => GetStr(x, "id") == id.ToString());
+        Assert.NotEqual(default, gerbil);
+        Assert.Equal("/photos/files/list-photo.jpg", GetStr(gerbil, "profilePhotoUrl"));
+    }
+}
--- 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/Dtos/ApiDtos.cs
+++ b/GerbilManagerWebAPI/Dtos/ApiDtos.cs
@@ -29,7 +29,8 @@ namespace GerbilManagerWebAPI.Dtos
        List<string> CharacterTraits,
        string? CharacterNote,
        bool? IsDeaf,
-        bool IsResident);
+        bool IsResident,
+        string? ProfilePhotoUrl);

    public record LitterDto(
        Guid Id,
--- 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/Endpoints/GerbilEndpoints.cs
+++ b/GerbilManagerWebAPI/Endpoints/GerbilEndpoints.cs
@@ -2,6 +2,7 @@ using GerbilManagerWebAPI.Common;
 using GerbilManagerWebAPI.Dtos;
 using GerbilManagerWebAPI.Models;
 using Gridify;
+using Gridify.EntityFramework;
 using Microsoft.AspNetCore.Http.HttpResults;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
@@ -16,8 +17,21 @@ namespace GerbilManagerWebAPI.Endpoints

            // GET /gerbils  (Gridify: filter/order/page; e.g. status==Active, litterId==…, orderBy=name)
            group.MapGet("/", async ([AsParameters] GridifyParams query, ApplicationContext db) =>
-                TypedResults.Ok(await db.Gerbils.AsNoTracking()
-                    .ToPagedResultAsync(query, ToDto)));
+            {
+                var q = query.ToQuery();
+                var paging = await db.Gerbils.AsNoTracking().GridifyAsync(q);
+                var ids = paging.Data.Select(g => g.Id).ToList();
+                var photoMap = ids.Count == 0 ? new Dictionary<Guid, string>() :
+                    await db.GerbilPhotos.AsNoTracking()
+                        .Where(p => ids.Contains(p.GerbilId))
+                        .GroupBy(p => p.GerbilId)
+                        .Select(g => new { GerbilId = g.Key, FileName = g.OrderBy(p => p.SortOrder).First().FileName })
+                        .ToDictionaryAsync(x => x.GerbilId, x => x.FileName);
+                var items = paging.Data
+                    .Select(g => ToDto(g, photoMap.TryGetValue(g.Id, out var fn) ? $"/photos/files/{fn}" : null))
+                    .ToList();
+                return TypedResults.Ok(new PagedResult<GerbilDto>(items, paging.Count, q.Page, q.PageSize));
+            });

            // GET /gerbils/breeders — distinct non-empty Herkunft values for the Tiere filter dropdown
            group.MapGet("/breeders", async (ApplicationContext db) =>
@@ -30,7 +44,14 @@ namespace GerbilManagerWebAPI.Endpoints
            group.MapGet("/{id:guid}", async Task<Results<Ok<GerbilDto>, NotFound>> (Guid id, ApplicationContext db) =>
            {
                var g = await db.Gerbils.AsNoTracking().FirstOrDefaultAsync(x => x.Id == id);
-                return g is null ? TypedResults.NotFound() : TypedResults.Ok(ToDto(g));
+                if (g is null) return TypedResults.NotFound();
+                var photoFileName = await db.GerbilPhotos.AsNoTracking()
+                    .Where(p => p.GerbilId == id)
+                    .OrderBy(p => p.SortOrder)
+                    .Select(p => p.FileName)
+                    .FirstOrDefaultAsync();
+                var profilePhotoUrl = photoFileName != null ? $"/photos/files/{photoFileName}" : null;
+                return TypedResults.Ok(ToDto(g, profilePhotoUrl));
            });

            // POST /gerbils
@@ -107,10 +128,10 @@ namespace GerbilManagerWebAPI.Endpoints
            g.IsResident = i.IsResident ?? (isCreate ? true : g.IsResident);
        }

-        internal static GerbilDto ToDto(Gerbil g) => new(
+        internal static GerbilDto ToDto(Gerbil g, string? profilePhotoUrl = null) => new(
            g.Id, g.Name, g.Gender, g.Status, g.LitterId, g.OriginContactId, g.ReceiverContactId,
            g.EnclosureId, g.ColorVarietyId, g.DateOfBirth, g.DateOfDeath, g.CauseOfDeath,
            g.GoHomeDate, g.Genotype, g.Notes, g.ImportSource, g.ExternalRef, g.OriginBreeder,
-            g.CharacterTraits, g.CharacterNote, g.IsDeaf, g.IsResident);
+            g.CharacterTraits, g.CharacterNote, g.IsDeaf, g.IsResident, profilePhotoUrl);
    }
 }
--- 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
@@ -7,20 +7,25 @@ POSTGRES_PASSWORD=aendere_mich_bitte
 # Externer Port fuer das Frontend (Standard: 80)
 PORT=80

-# Gitea Container Registry (Standard: truenas:13000/gulum)
-REGISTRY=truenas:13000/gulum
+# Container Registry (git.rismer.de/gulum)
+REGISTRY=git.rismer.de/gulum
 TAG=latest

-# NAS-Dataset-Pfade (TrueNAS SCALE: /mnt/<Pool>/<Dataset>)
-PGDATA_PATH=/mnt/SSD/gerbil/pgdata
-PHOTOS_PATH=/mnt/SSD/gerbil/photos
-BACKUPS_PATH=/mnt/SSD/gerbil/backups
+# NAS-Dataset-Pfade (TrueNAS SCALE Goldeye: /mnt/JailStorage/DockerVolumes/...)
+PGDATA_PATH=/mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata
+PHOTOS_PATH=/mnt/JailStorage/DockerVolumes/gerbilmanager/photos
+BACKUPS_PATH=/mnt/JailStorage/DockerVolumes/gerbilmanager/backups
 # AR-3: Data Protection Key-Ring (Gmail-App-Passwort-Verschlüsselung)
-KEYS_PATH=/mnt/SSD/gerbil/keys
+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
@@ -29,7 +29,7 @@ services:

  # --- .NET API (GerbilManagerWebAPI) ---
  api:
-    image: "${REGISTRY:-truenas:13000/gulum}/gerbilmanager-api:${TAG:-latest}"
+    image: "${REGISTRY:-git.rismer.de/gulum}/gerbilmanager-api:${TAG:-latest}"
    build:
      context: ../..
      dockerfile: GerbilManagerWebAPI/Dockerfile
@@ -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
@@ -63,7 +66,7 @@ services:

  # --- nginx Frontend (React SPA + API-Proxy) ---
  frontend:
-    image: "${REGISTRY:-truenas:13000/gulum}/gerbilmanager-frontend:${TAG:-latest}"
+    image: "${REGISTRY:-git.rismer.de/gulum}/gerbilmanager-frontend:${TAG:-latest}"
    build:
      context: ../..
      dockerfile: gerbil-manager-web/Dockerfile
@@ -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
@@ -95,19 +113,19 @@ services:

 volumes:
  # NAS-Datasets als Bind-Mounts (Pfade in .env konfigurieren).
-  # TrueNAS: Dataset-Pfad z.B. /mnt/SSD/gerbil/pgdata
+  # TrueNAS Goldeye: /mnt/JailStorage/DockerVolumes/gerbilmanager/<name>
  pgdata:
    driver: local
    driver_opts:
      type: none
      o: bind
-      device: "${PGDATA_PATH:-/mnt/gerbil/pgdata}"
+      device: "${PGDATA_PATH:-/mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata}"
  photos:
    driver: local
    driver_opts:
      type: none
      o: bind
-      device: "${PHOTOS_PATH:-/mnt/gerbil/photos}"
+      device: "${PHOTOS_PATH:-/mnt/JailStorage/DockerVolumes/gerbilmanager/photos}"
  # AR-3: Data Protection key ring — persistiert Gmail-App-Passwort-Verschlüsselung.
  # Muss ein persistentes NAS-Dataset sein (nicht dasselbe wie photos).
  keys:
@@ -115,10 +133,17 @@ volumes:
    driver_opts:
      type: none
      o: bind
-      device: "${KEYS_PATH:-/mnt/gerbil/keys}"
+      device: "${KEYS_PATH:-/mnt/JailStorage/DockerVolumes/gerbilmanager/keys}"
  backups:
    driver: local
    driver_opts:
      type: none
      o: bind
-      device: "${BACKUPS_PATH:-/mnt/gerbil/backups}"
+      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/ops.md
+++ b/docs/ops.md
@@ -1,4 +1,4 @@
-# GerbilManager — Betriebsanleitung (TrueNAS)
+# GerbilManager — Betriebsanleitung (TrueNAS SCALE Goldeye)

 > Zielgruppe: Julian (Systemadministration) und Ehefrau (tägliche Nutzung).
 > Bookmark für die Ehefrau: **http://\<NAS-IP\>/** (z. B. http://truenas/)
@@ -9,13 +9,12 @@

 1. [Übersicht & Architektur](#1-übersicht--architektur)
 2. [Voraussetzungen](#2-voraussetzungen)
-3. [Erstinstallation auf TrueNAS](#3-erstinstallation-auf-truenas)
+3. [Erstinstallation auf TrueNAS Goldeye](#3-erstinstallation-auf-truenas-goldeye)
 4. [App starten / stoppen / aktualisieren](#4-app-starten--stoppen--aktualisieren)
 5. [Backup & Wiederherstellung](#5-backup--wiederherstellung)
 6. [ZFS-Snapshot-Schichtung](#6-zfs-snapshot-schichtung)
 7. [CI/CD via Gitea Actions](#7-cicd-via-gitea-actions)
-8. [Offene Fragen (bitte beantworten)](#8-offene-fragen)
-9. [Fehlerbehebung](#9-fehlerbehebung)
+8. [Fehlerbehebung](#8-fehlerbehebung)

 ---

@@ -23,7 +22,7 @@

 ```
 Browser / Handy
-      |  HTTP :80
+      |  HTTP :80  (oder PORT aus .env, z.B. 8080)
      v
 ┌──────────────────┐
 │  frontend (nginx) │  statisches React-SPA + Reverse-Proxy
@@ -40,9 +39,10 @@ Browser / Handy
 │  db (Postgres 17)│      │  backup (Sidecar)     │
 └──────────────────┘      │  pg_dump + tar + cron │
        │                  └──────────────────────┘
-        └─ pgdata-Volume (NAS-Dataset)
-           photos-Volume  (NAS-Dataset)
-           backups-Volume (NAS-Dataset)
+        └─ pgdata-Volume  → /mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata
+           photos-Volume  → /mnt/JailStorage/DockerVolumes/gerbilmanager/photos
+           backups-Volume → /mnt/JailStorage/DockerVolumes/gerbilmanager/backups
+           keys-Volume    → /mnt/JailStorage/DockerVolumes/gerbilmanager/keys
 ```

 **Einziger veröffentlichter Port:** `80` (konfigurierbar via `PORT` in `.env`).
@@ -54,68 +54,107 @@ Alles andere läuft intern im Docker-Netz.

 | Was | Details |
 |-----|---------|
-| TrueNAS SCALE | Electric Eel 24.10+ (native Docker Custom Apps) |
-| Gitea | http://truenas:13000 — Repository `Gulum/GerbilManager` |
-| Docker | bereits auf TrueNAS vorhanden (Custom Apps nutzen es) |
-| Datasets | Drei ZFS-Datasets anlegen (siehe Schritt 3) |
+| TrueNAS SCALE | **25.10.2.1 „Goldeye"** (native Docker Custom Apps) |
+| Container Registry | `git.rismer.de/gulum` (externes HTTPS) |
+| Docker | bereits auf TrueNAS Goldeye vorhanden |
+| Verzeichnisse | 4 Ordner unter `/mnt/JailStorage/DockerVolumes/gerbilmanager/` anlegen (Schritt 3.1) |

 ---

-## 3. Erstinstallation auf TrueNAS
+## 3. Erstinstallation auf TrueNAS Goldeye

-### 3.1 ZFS-Datasets anlegen
+### 3.1 Verzeichnisse anlegen und Berechtigungen setzen

-In TrueNAS → **Datasets** → **Dataset hinzufügen** (je einmal wiederholen):
-
-| Dataset-Name | Empfohlener Pfad | Verwendung |
-|---|---|---|
-| `gerbil/pgdata` | `/mnt/SSD/gerbil/pgdata` | Postgres-Datenbankdateien |
-| `gerbil/photos` | `/mnt/SSD/gerbil/photos` | Hochgeladene Tierfotos |
-| `gerbil/backups` | `/mnt/SSD/gerbil/backups` | Tägliche Backups |
-
-> **Tipp:** Passe die Pool-Bezeichnung (`SSD`) an deinen tatsächlichen Pool an.
-
-### 3.2 Repository klonen
+Öffne eine Shell auf der NAS (TrueNAS → System → Shell oder SSH):

 ```bash
-# SSH in TrueNAS oder lokale Shell
-git clone http://truenas:13000/Gulum/GerbilManager.git /opt/gerbilmanager
+# Vier Ordner anlegen
+mkdir -p /mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata
+mkdir -p /mnt/JailStorage/DockerVolumes/gerbilmanager/photos
+mkdir -p /mnt/JailStorage/DockerVolumes/gerbilmanager/backups
+mkdir -p /mnt/JailStorage/DockerVolumes/gerbilmanager/keys
+
+# Postgres-Container läuft als UID 999 (postgres) / GID 999 intern.
+# pgdata muss von UID 999 beschreibbar sein; postgres erzwingt chmod 0700.
+chown -R 999:999 /mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata
+chmod 700        /mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata
+
+# photos, backups und keys werden von der API bzw. dem Sidecar beschrieben
+# (laufen als root im Container) — keine weiteren ACL-Anpassungen nötig.
+```
+
+> **TrueNAS Dataset-ACL-Hinweis:** Falls `JailStorage` ein ZFS-Dataset mit NFSv4-ACLs ist,
+> und `chown` meldet „Operation not permitted": setze in TrueNAS → Datasets →
+> `JailStorage` → Berechtigungen → **ACL-Typ: POSIX** (oder nutze das UI-Formular
+> „Eigentümer: 999, Gruppe: 999" für das `pgdata`-Unterverzeichnis).
+
+### 3.2 Registry-Login auf der NAS
+
+```bash
+docker login git.rismer.de
+# Benutzername und Token/Passwort eingeben (Gitea-Account oder Access Token mit read:packages)
+```
+
+Der Login wird unter `/root/.docker/config.json` gespeichert und bleibt nach Reboots erhalten.
+
+### 3.3 Repository klonen
+
+```bash
+git clone https://git.rismer.de/gulum/GerbilManager.git /opt/gerbilmanager
 cd /opt/gerbilmanager
 ```

-### 3.3 Konfiguration anlegen
+### 3.4 Konfiguration anlegen

 ```bash
 cp deploy/truenas/.env.example deploy/truenas/.env
-# Jetzt .env bearbeiten:
 nano deploy/truenas/.env
 ```

 Mindestens setzen:
- `POSTGRES_PASSWORD` — sicheres Passwort (mind. 20 Zeichen)
- `PGDATA_PATH`, `PHOTOS_PATH`, `BACKUPS_PATH` — tatsächliche Dataset-Pfade

-### 3.4 Images bauen und App starten
+| Variable | Wert |
+|----------|------|
+| `POSTGRES_PASSWORD` | Sicheres Passwort (mind. 20 Zeichen, keine `"`) |
+| `AI__BaseUrl` | Gemini: `https://generativelanguage.googleapis.com/v1beta/openai` |
+| `AI__ApiKey` | Dein Gemini API-Key |
+| `AI__Model` | `gemini-2.0-flash` (oder `gemini-flash-latest`) |
+| `PORT` | `80` — falls Port 80 auf der NAS bereits belegt ist: **auf `8080` ändern** |
+
+Die Pfad-Variablen (`PGDATA_PATH`, `PHOTOS_PATH`, etc.) sind bereits auf die Goldeye-Standardpfade
+vorbelegt und müssen nur geändert werden, wenn du einen anderen Pool nutzt.
+
+### 3.5 Images ziehen und App starten

 ```bash
 cd /opt/gerbilmanager
-docker compose -f deploy/truenas/compose.yaml build
+docker compose -f deploy/truenas/compose.yaml pull
 docker compose -f deploy/truenas/compose.yaml up -d
 ```

 Erster Start dauert ca. 2–3 Minuten (Postgres-Init + EF-Migrationen).

-### 3.5 Prüfen
+> **TrueNAS Goldeye Custom App (Alternative):**
+> Statt der Shell kann die App auch über TrueNAS → Apps → „Custom App installieren" →
+> „Install via YAML" deployt werden: compose-Inhalt einfügen, Volumes als Host-Pfade
+> konfigurieren. Die Shell-Methode ist einfacher und gibt mehr Kontrolle.
+
+### 3.6 Verifikation

 ```bash
-# Alle Container laufen?
+# Alle 4 Container laufen?
 docker compose -f deploy/truenas/compose.yaml ps

-# API-Healthcheck
-curl http://localhost/api/health
+# API-Healthcheck (erwartet: {"status":"Healthy"})
+curl -s http://localhost/api/health

-# Webapp im Browser
-http://<NAS-IP>/
+# Tier-Gesamtanzahl prüfen (erwartet > 0 nach Import)
+curl -s "http://localhost/api/gerbils?pageSize=1" | grep -o '"totalCount":[0-9]*'
+
+# API-Doku (Scalar) im Browser
+http://<NAS-IP>/scalar
+
+# Foto-Upload: in der Webapp ein Tier öffnen → Foto hochladen → Foto erscheint
 ```

 ---
@@ -125,6 +164,7 @@ http://<NAS-IP>/
 ### Starten

 ```bash
+cd /opt/gerbilmanager
 docker compose -f deploy/truenas/compose.yaml up -d
 ```

@@ -134,26 +174,17 @@ docker compose -f deploy/truenas/compose.yaml up -d
 docker compose -f deploy/truenas/compose.yaml down
 ```

-### Aktualisieren (nach `git push` auf main)
+### Aktualisieren (nach CI-Push auf main)

 ```bash
 cd /opt/gerbilmanager
 git pull
-docker compose -f deploy/truenas/compose.yaml build
+docker compose -f deploy/truenas/compose.yaml pull
 docker compose -f deploy/truenas/compose.yaml up -d
 ```

 > EF-Migrationen laufen automatisch beim API-Start — kein manueller Schritt nötig.

-### Mit Gitea CI (wenn Actions aktiviert)
-
-Push auf `main` triggert automatisch Build → Test → Image-Push.
-Danach auf der NAS:
-```bash
-docker compose -f deploy/truenas/compose.yaml pull
-docker compose -f deploy/truenas/compose.yaml up -d
-```
-
 ---

 ## 5. Backup & Wiederherstellung
@@ -165,12 +196,12 @@ Der `backup`-Sidecar-Container läuft dauerhaft und sichert täglich um **03:00
 - Komprimiertes Foto-Archiv als `.tar.gz`
 - Rotation: Backups älter als `BACKUP_KEEP_DAYS` (Standard: 7) werden gelöscht

-Backups liegen unter: `${BACKUPS_PATH}/YYYY-MM-DD_HH-MM/`
+Backups liegen unter: `/mnt/JailStorage/DockerVolumes/gerbilmanager/backups/YYYY-MM-DD_HH-MM/`

 ```
-/mnt/SSD/gerbil/backups/
+/mnt/JailStorage/DockerVolumes/gerbilmanager/backups/
  2026-06-06_03-00/
-    gerbilmanager_2026-06-06_03-00.sql   (Datenbank)
+    gerbilmanager_2026-06-06_03-00.sql   (Datenbank-Dump, Klartext SQL)
    photos_2026-06-06_03-00.tar.gz       (Fotos)
  backup.log                              (Protokoll)
 ```
@@ -184,52 +215,68 @@ docker compose -f deploy/truenas/compose.yaml exec backup /bin/sh /scripts/backu
 ### Backup-Log prüfen

 ```bash
-tail -50 /mnt/SSD/gerbil/backups/backup.log
+tail -50 /mnt/JailStorage/DockerVolumes/gerbilmanager/backups/backup.log
 ```

+Backup-Validierung: Das Skript prüft ob der Dump `CREATE TABLE` enthält — fehlt dieser
+Marker, erscheint eine WARNUNG im Log. Größe 0 KB bedeutet Fehlschlag.
+
 ### Wiederherstellung — Runbook

-> **WARNUNG:** Alle aktuellen Daten werden überschrieben!
+> **WARNUNG:** Alle aktuellen Datenbankdaten und Fotos werden überschrieben!

-**Schritt 1:** App stoppen (optional, aber empfohlen)
+**Schritt 1:** API und Frontend stoppen (DB und backup-Sidecar laufen weiter)
 ```bash
 docker compose -f deploy/truenas/compose.yaml stop api frontend
 ```

 **Schritt 2:** Restore ausführen
-```bash
-# Neuestes Backup wiederherstellen:
-docker compose -f deploy/truenas/compose.yaml exec backup \
-    /bin/sh /scripts/restore.sh

-# Bestimmtes Backup wiederherstellen:
-docker compose -f deploy/truenas/compose.yaml exec backup \
-    /bin/sh /scripts/restore.sh 2026-06-05_03-00
+```bash
+# Neuestes Backup automatisch wählen und bestätigen:
+docker compose -f deploy/truenas/compose.yaml exec -T backup \
+    /bin/sh /scripts/restore.sh latest -f
+
+# Bestimmtes Backup (Datum aus Verzeichnisname):
+docker compose -f deploy/truenas/compose.yaml exec -T backup \
+    /bin/sh /scripts/restore.sh 2026-06-06_03-00 -f
 ```

+Das Skript:
+1. Trennt alle offenen DB-Verbindungen
+2. Spielt den SQL-Dump mit `psql -h db -U postgres -d gerbilmanager < dump.sql` ein
+3. Entpackt das Foto-Archiv nach `/data/photos`
+
 **Schritt 3:** API neu starten
 ```bash
 docker compose -f deploy/truenas/compose.yaml start api frontend
 ```

-**Schritt 4:** Prüfen
+**Schritt 4 — Verifikation (Pflicht nach erstem Restore-Drill):**
 ```bash
-curl http://localhost/api/color-varieties | grep -c '"id"'
-# Erwarteter Wert: 73
+# Tier-Anzahl prüfen
+curl -s "http://localhost/api/gerbils?pageSize=1" | grep -o '"totalCount":[0-9]*'
+
+# ColorVariety-Anzahl (Stammdaten, erwartet: >= 60)
+curl -s http://localhost/api/color-varieties | python3 -c "import sys,json; print(len(json.load(sys.stdin)))"
+
+# Foto stichprobenartig prüfen
+ls /mnt/JailStorage/DockerVolumes/gerbilmanager/photos/ | head -5
 ```

-### Restore-Nachweis (Round-Trip-Test)
+### Restore-Nachweis (Round-Trip-Test, lokal 2026-06-06)

-Protokoll vom Test auf lokalem Aspire-Postgres (Vorgänger-Instanz, 2026-06-06 07:09):
+Protokoll vom getesteten Restore auf lokalem Aspire-Postgres:
 ```
 73 ColorVarieties vorhanden
 → DELETE 12 Zeilen → 61 verbleibend
-→ pg_restore eingespielt
+→ psql < dump.sql eingespielt
 → 73 ColorVarieties bestätigt
 Exit-Code: 0
 ```
-Die Container-Restore-Skripte nutzen dieselbe `psql < dump.sql` Logik.
-**Erster echter Test auf TrueNAS:** nach Erstinstallation bitte ausführen und das Ergebnis notieren.
+
+**Erster TrueNAS-Restore-Drill:** nach Erstinstallation bitte ausführen und Tier-Anzahl
+notieren — beweist dass Backup + Restore auf dem NAS korrekt funktionieren.

 ---

@@ -240,15 +287,15 @@ Sie schützen vor versehentlichem Datenverlust auf Dataset-Ebene.

 ### Empfohlene Snapshot-Konfiguration

-In TrueNAS → **Datasets** → Dataset auswählen → **Snapshots** → **Regelmäßige Snapshots**:
+In TrueNAS → **Datasets** → `JailStorage/DockerVolumes/gerbilmanager` → **Snapshots** → **Regelmäßige Snapshots**:

-| Dataset | Häufigkeit | Aufbewahrung |
-|---------|-----------|--------------|
-| `gerbil/photos` | Stündlich | 24 Stunden |
-| `gerbil/photos` | Täglich | 30 Tage |
-| `gerbil/pgdata` | Stündlich | 24 Stunden |
-| `gerbil/pgdata` | Täglich | 30 Tage |
-| `gerbil/backups` | Täglich | 90 Tage |
+| Unterordner | Häufigkeit | Aufbewahrung |
+|-------------|-----------|--------------|
+| `.../photos` | Stündlich | 24 Stunden |
+| `.../photos` | Täglich | 30 Tage |
+| `.../pgdata` | Stündlich | 24 Stunden |
+| `.../pgdata` | Täglich | 30 Tage |
+| `.../backups` | Täglich | 90 Tage |

 > **Hinweis:** `pgdata` enthält Live-Postgres-Dateien. ZFS-Snapshots davon sind crash-konsistent,
 > aber **nicht** application-konsistent — für einen sauberen DB-Restore immer den `pg_dump` verwenden,
@@ -257,94 +304,93 @@ In TrueNAS → **Datasets** → Dataset auswählen → **Snapshots** → **Regel
 ### Snapshot manuell erstellen (z. B. vor Update)

 ```bash
-# TrueNAS CLI
-zfs snapshot SSD/gerbil/photos@vor-update-$(date +%Y%m%d)
-zfs snapshot SSD/gerbil/backups@vor-update-$(date +%Y%m%d)
+# Pool-/Dataset-Name anpassen falls nötig
+zfs snapshot JailStorage/DockerVolumes/gerbilmanager/photos@vor-update-$(date +%Y%m%d)
+zfs snapshot JailStorage/DockerVolumes/gerbilmanager/backups@vor-update-$(date +%Y%m%d)
 ```

 ### Aus ZFS-Snapshot wiederherstellen (Fotos)

 ```bash
-# Snapshot auflisten
-zfs list -t snapshot SSD/gerbil/photos
+# Snapshots auflisten
+zfs list -t snapshot JailStorage/DockerVolumes/gerbilmanager/photos

-# Datei aus Snapshot kopieren
-cp /mnt/SSD/gerbil/photos/.zfs/snapshot/<NAME>/datei.jpg /mnt/SSD/gerbil/photos/
+# Einzelne Datei aus Snapshot kopieren
+cp /mnt/JailStorage/DockerVolumes/gerbilmanager/photos/.zfs/snapshot/<NAME>/datei.jpg \
+   /mnt/JailStorage/DockerVolumes/gerbilmanager/photos/
 ```

 ---

 ## 7. CI/CD via Gitea Actions

-Der Workflow `.gitea/workflows/ci.yml` ist als **Entwurf vorhanden, aber inaktiv**.
+CI pusht Images nach Erfolg zu `git.rismer.de/gulum/gerbilmanager-api` und
+`git.rismer.de/gulum/gerbilmanager-frontend`.

-### Aktivierung
+### Registry-Secrets in Gitea

-1. **Gitea Actions aktivieren:**
-   Gitea → Repository `GerbilManager` → Einstellungen → Actions → "Actions aktivieren"
+Gitea → Repository → Einstellungen → Secrets:

-2. **Gitea Actions Runner installieren** (auf TrueNAS oder einem separaten Gerät):
-   ```bash
-   # Gitea Runner Container (einfachste Variante für TrueNAS)
-   docker run -d --name gitea-runner \
-     -v /var/run/docker.sock:/var/run/docker.sock \
-     -v /opt/gitea-runner:/data \
-     -e GITEA_INSTANCE_URL=http://truenas:13000 \
-     -e GITEA_RUNNER_REGISTRATION_TOKEN=<TOKEN> \
-     gitea/act_runner:latest
-   ```
-   Token: Gitea → Admin → Actions → Runner → "Runner hinzufügen"
+| Secret | Wert |
+|--------|------|
+| `REGISTRY_USER` | Gitea-Benutzername |
+| `REGISTRY_TOKEN` | Gitea Access Token mit `package:write` |

-3. **Registry-Secrets konfigurieren:**
-   Gitea → Repository → Einstellungen → Secrets:
-   - `REGISTRY_USER` — dein Gitea-Benutzername
-   - `REGISTRY_TOKEN` — Gitea Access Token mit `package:write`-Berechtigung
+### Update nach CI-Push

-### Workflow nach Aktivierung
-
-```
-git push origin main
-  → Gitea Actions: dotnet test + npm test + npm run build
-  → Bei Erfolg: docker build + push zu truenas:13000/gulum/
-  → Auf NAS: docker compose pull + up -d
+```bash
+# Auf der NAS nach erfolgreichem CI-Lauf:
+cd /opt/gerbilmanager
+git pull
+docker compose -f deploy/truenas/compose.yaml pull
+docker compose -f deploy/truenas/compose.yaml up -d
 ```

 ---

-## 8. Offene Fragen
-
-Bitte beantworte diese Fragen, damit das Setup fertiggestellt werden kann:
-
-| # | Frage | Auswirkung |
-|---|-------|-----------|
-| 1 | **TrueNAS SCALE Version?** Electric Eel 24.10 hat native Docker Custom Apps. Ältere Versionen nutzen Kubernetes. | Bestimmt ob `docker compose` direkt läuft |
-| 2 | **Gitea Actions verfügbar/aktivierbar?** | CI/CD-Workflow aktiv oder nur manuell deployen |
-| 3 | **Eigener Postgres-Container (empfohlen) oder vorhandene NAS-Postgres-App?** | Isolation vs. geteilte Instanz |
-| 4 | **Genaue Dataset-Pfade?** Poolname und Pfad-Präfix | `.env`-Konfiguration |
-| 5 | **Port-Wahl?** Standard 80 — frei auf der NAS? | `PORT`-Wert in `.env` |
-
---
-
-## 9. Fehlerbehebung
+## 8. Fehlerbehebung

 ### App startet nicht

 ```bash
-# Logs aller Container
 docker compose -f deploy/truenas/compose.yaml logs
-
-# Logs eines bestimmten Containers
 docker compose -f deploy/truenas/compose.yaml logs api
 docker compose -f deploy/truenas/compose.yaml logs db
 ```

+### Port 80 belegt
+
+Falls Port 80 vom TrueNAS-System selbst genutzt wird:
+
+```bash
+# In deploy/truenas/.env:
+PORT=8080
+# Dann neu starten:
+docker compose -f deploy/truenas/compose.yaml up -d
+```
+
+### Postgres startet nicht (Permission denied auf pgdata)
+
+```bash
+# UID 999 muss Eigentümer des pgdata-Verzeichnisses sein:
+chown -R 999:999 /mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata
+chmod 700        /mnt/JailStorage/DockerVolumes/gerbilmanager/pgdata
+docker compose -f deploy/truenas/compose.yaml restart db
+```
+
+### Registry-Pull schlägt fehl
+
+```bash
+# Neu einloggen:
+docker login git.rismer.de
+# Dann pull wiederholen:
+docker compose -f deploy/truenas/compose.yaml pull
+```
+
 ### Datenbank nicht erreichbar

 ```bash
-# DB-Container läuft?
 docker compose -f deploy/truenas/compose.yaml ps db
-
-# Verbindung testen
 docker compose -f deploy/truenas/compose.yaml exec db \
    psql -U postgres -d gerbilmanager -c "\dt"
 ```
@@ -352,27 +398,16 @@ docker compose -f deploy/truenas/compose.yaml exec db \
 ### Backup-Fehler

 ```bash
-# Backup-Log prüfen
-cat /mnt/SSD/gerbil/backups/backup.log | tail -30
-
-# Backup manuell starten (mit Fehlerausgabe)
-docker compose -f deploy/truenas/compose.yaml exec backup \
-    /bin/sh /scripts/backup.sh
+tail -50 /mnt/JailStorage/DockerVolumes/gerbilmanager/backups/backup.log
+docker compose -f deploy/truenas/compose.yaml exec backup /bin/sh /scripts/backup.sh
 ```

 ### Fotos werden nicht angezeigt

-Prüfe ob das `photos`-Volume korrekt gemounted ist:
 ```bash
 docker compose -f deploy/truenas/compose.yaml exec api ls /data/photos
 ```

-### Container-Status zurücksetzen (Neustart)
-
-```bash
-docker compose -f deploy/truenas/compose.yaml restart api
-```
-
 ### Kompletter Neustart (Daten bleiben erhalten)

 ```bash
--- 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
@@ -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/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/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/genetics/tests/genetics.test.ts
+++ b/gerbil-manager-web/src/genetics/tests/genetics.test.ts
@@ -46,8 +46,8 @@ describe('Fraction', () => {
 describe('Genotype serialization', () => {
  it('round-trips display string <-> structured form', () => {
    const g = fromDisplayString('Aa CC Dd EE GG Pp Spsp rere')
-    expect(toDisplayString(g)).toBe('Aa CC Dd EE GG Pp Spsp rere')
-    expect(toDisplayString(fromJSON(toJSON(g)))).toBe('Aa CC Dd EE GG Pp Spsp rere')
+    expect(toDisplayString(g)).toBe('Aa CC Dd EE GG Pp Spsp')
+    expect(toDisplayString(fromJSON(toJSON(g)))).toBe('Aa CC Dd EE GG Pp Spsp')
  })

  it('parses multi-char C-series alleles via maximal munch', () => {
@@ -72,8 +72,8 @@ describe('Genotype serialization', () => {
    expect(g.P).toEqual(['P', 'p'])
  })

-  it('wild type is AA CC DD EE GG PP spsp rere', () => {
-    expect(toDisplayString(wildType())).toBe('AA CC DD EE GG PP spsp rere')
+  it('wild type is AA CC DD EE GG PP spsp (rere omitted)', () => {
+    expect(toDisplayString(wildType())).toBe('AA CC DD EE GG PP spsp')
  })
 })

@@ -102,7 +102,7 @@ describe('Worked example from research report', () => {

    expect(result.offspring).toHaveLength(1)
    const only = result.offspring[0]
-    expect(only.genotype).toBe('Aa CC DD EE GG Pp spsp rere')
+    expect(only.genotype).toBe('Aa CC DD EE GG Pp spsp')
    expect(only.probability.text).toBe('1')
    expect(result.warnings).toHaveLength(0)
  })
@@ -223,8 +223,9 @@ describe('Farbschlag catalog', () => {
    expect(CATALOG[0]).toMatchObject({ name: 'REW', sortOrder: 0 })
    // Every row has a non-empty canonical genotype display string and unique name.
    // GEN-3h: bracket notation (e[f], c[chm], c[h]) allowed in tokens.
+    // GEN-4d: rere omitted from display -> 7 tokens (no Rex, no Sls), 8 (Rex or Sls), 9 (both).
    expect(new Set(CATALOG.map((c) => c.name)).size).toBe(CATALOG.length)
-    expect(CATALOG.every((c) => /^[A-Za-z[\]?-]+( [A-Za-z[\]?-]+){7}$/.test(c.canonicalGenotype))).toBe(true)
+    expect(CATALOG.every((c) => /^[A-Za-z[\]?-]+( [A-Za-z[\]?-]+){6,8}$/.test(c.canonicalGenotype))).toBe(true)
  })

  it('genotypeToFarbschlag (DATA-1 denormalization contract) returns the plain name', () => {
@@ -285,7 +286,7 @@ describe('GEN-3a: Uw=G alias', () => {
  it('always RENDERS G, never Uw (breeder preference)', () => {
    // Uw/uw is an input/import alias only; output must echo G/g.
    expect(toDisplayString(fromDisplayString('AA CC DD EE Uwuw PP spsp rere'))).toBe(
-      'AA CC DD EE Gg PP spsp rere',
+      'AA CC DD EE Gg PP spsp',
    )
    expect(toDisplayString(fromDisplayString('AA CC DD EE uwuw PP spsp rere'))).not.toContain('uw')
  })
@@ -297,10 +298,16 @@ describe('GEN-3a: second spotting locus Sls (WP)', () => {
    expect(fromDisplayString('AA CC DD EE GG PP spsp rere WP').Sls).toEqual(['Sl', 'sl'])
  })

-  it('toDisplayString omits wild-type Sls but shows Slsl', () => {
-    expect(toDisplayString(wildType())).toBe('AA CC DD EE GG PP spsp rere')
+  it('toDisplayString omits wild-type Sls and Re, shows Slsl/Rere when non-wildtype', () => {
+    // GEN-4d: Re (rere) omitted at wildtype, like Sls.
+    expect(toDisplayString(wildType())).toBe('AA CC DD EE GG PP spsp')
+    // Rex het → Rere shown
+    expect(toDisplayString(fromDisplayString('AA CC DD EE GG PP spsp Rere'))).toBe(
+      'AA CC DD EE GG PP spsp Rere',
+    )
+    // WP → Slsl shown, rere still omitted
    expect(toDisplayString(fromDisplayString('AA CC DD EE GG PP spsp rere WP'))).toBe(
-      'AA CC DD EE GG PP spsp rere Slsl',
+      'AA CC DD EE GG PP spsp Slsl',
    )
  })

@@ -330,7 +337,7 @@ describe('GEN-3a: second spotting locus Sls (WP)', () => {
 describe('GEN-3a: flag/metadata tokens tolerated', () => {
  it('dea/taub/Dea/DP/WFNZ/RV/GV do not break parsing (stripped)', () => {
    const g = fromDisplayString('AA CC DD EE GG PP spsp rere dea WFNZ DP RV GV')
-    expect(toDisplayString(g)).toBe('AA CC DD EE GG PP spsp rere')
+    expect(toDisplayString(g)).toBe('AA CC DD EE GG PP spsp')
  })

  it('extractGenotypeFlags reads deafness + tags', () => {
@@ -363,11 +370,11 @@ describe("GEN-3c: unknown allele displays as '-' (stored as '?')", () => {
  it("accepts '-' input, stores '?', displays '-'", () => {
    const g = fromDisplayString('Aa C- DD EE GG Pp spsp rere')
    expect(g.C).toEqual(['C', '?']) // stored internal contract stays '?'
-    expect(toDisplayString(g)).toBe('Aa C- DD EE GG Pp spsp rere') // displayed as '-'
+    expect(toDisplayString(g)).toBe('Aa C- DD EE GG Pp spsp') // displayed as '-'
  })
  it("'?' and '-' inputs are equivalent", () => {
    expect(toDisplayString(fromDisplayString('Aa C? DD EE GG Pp spsp rere'))).toBe(
-      'Aa C- DD EE GG Pp spsp rere',
+      'Aa C- DD EE GG Pp spsp',
    )
  })
 })
@@ -590,15 +597,15 @@ describe('GEN-3h: breeder bracket-notation display + E-locus e-before-ef order',
  it('ef displays as e[f], cchm as c[chm], ch as c[h]', () => {
    // Fuchsschimmel: E=[ef,ef] hom
    expect(toDisplayString(fromDisplayString('AA CC DD efef GG PP spsp rere'))).toBe(
-      'AA CC DD e[f]e[f] GG PP spsp rere',
+      'AA CC DD e[f]e[f] GG PP spsp',
    )
    // C-locus het: cchm + ch
    expect(toDisplayString(fromDisplayString('aa cchmch DD EE GG PP spsp rere'))).toBe(
-      'aa c[chm]c[h] DD EE GG PP spsp rere',
+      'aa c[chm]c[h] DD EE GG PP spsp',
    )
    // C-locus hom cchm
    expect(toDisplayString(fromDisplayString('aa cchmcchm DD EE GG PP spsp rere'))).toBe(
-      'aa c[chm]c[chm] DD EE GG PP spsp rere',
+      'aa c[chm]c[chm] DD EE GG PP spsp',
    )
  })

@@ -608,24 +615,24 @@ describe('GEN-3h: breeder bracket-notation display + E-locus e-before-ef order',
    // Display must swap to [e, ef] per breeder convention.
    const g = fromDisplayString('aa CC DD eef Gg Pp spsp rere')
    expect(g.E).toEqual(['ef', 'e']) // storage order unchanged
-    expect(toDisplayString(g)).toBe('aa CC DD ee[f] Gg Pp spsp rere')
+    expect(toDisplayString(g)).toBe('aa CC DD ee[f] Gg Pp spsp')
  })

  it('E+e stays Ee (E dominant over e, no swap needed)', () => {
    expect(toDisplayString(fromDisplayString('aa CC DD Ee GG PP spsp rere'))).toBe(
-      'aa CC DD Ee GG PP spsp rere',
+      'aa CC DD Ee GG PP spsp',
    )
  })

  it('E+ef displays Ee[f] (E dominant stays first, ef renders as e[f])', () => {
    expect(toDisplayString(fromDisplayString('aa CC DD Eef GG PP spsp rere'))).toBe(
-      'aa CC DD Ee[f] GG PP spsp rere',
+      'aa CC DD Ee[f] GG PP spsp',
    )
  })

  // ── Julian oracle fixtures (HUMANQUESTION D3/D4) ─────────────────────
-  it('Tier C: oracle display string round-trips exactly (aa C- D- ee[f] Gg Pp spsp rere)', () => {
-    const display = 'aa C- D- ee[f] Gg Pp spsp rere'
+  it('Tier C: oracle display string round-trips exactly (aa C- D- ee[f] Gg Pp spsp)', () => {
+    const display = 'aa C- D- ee[f] Gg Pp spsp'
    const g = fromDisplayString(display)
    expect(g.E).toEqual(['ef', 'e'])
    expect(g.C).toEqual(['C', '?'])
@@ -633,16 +640,16 @@ describe('GEN-3h: breeder bracket-notation display + E-locus e-before-ef order',
    // Farbschlag scope is outside GEN-3h; god confirmed colour is correct as-is.
  })

-  it('Zuleika oracle: aa c[chm]c[h] DD Ee Gg PP spsp rere', () => {
-    const display = 'aa c[chm]c[h] DD Ee Gg PP spsp rere'
+  it('Zuleika oracle: aa c[chm]c[h] DD Ee Gg PP spsp', () => {
+    const display = 'aa c[chm]c[h] DD Ee Gg PP spsp'
    const g = fromDisplayString(display)
    expect(g.C).toEqual(['cchm', 'ch'])
    expect(g.E).toEqual(['E', 'e'])
    expect(toDisplayString(g)).toBe(display)
  })

-  it('Milka oracle: aa Cc[h] dd EE Gg P- Spsp rere', () => {
-    const display = 'aa Cc[h] dd EE Gg P- Spsp rere'
+  it('Milka oracle: aa Cc[h] dd EE Gg P- Spsp', () => {
+    const display = 'aa Cc[h] dd EE Gg P- Spsp'
    const g = fromDisplayString(display)
    expect(g.C).toEqual(['C', 'ch'])
    expect(g.D).toEqual(['d', 'd'])
@@ -665,7 +672,7 @@ describe('GEN-3h: breeder bracket-notation display + E-locus e-before-ef order',
  it('e[-] standalone: parses as [e,?], displays e-', () => {
    const g = fromDisplayString('aa CC DD e[-] GG PP spsp rere')
    expect(g.E).toEqual(['e', '?'])
-    expect(toDisplayString(g)).toBe('aa CC DD e- GG PP spsp rere')
+    expect(toDisplayString(g)).toBe('aa CC DD e- GG PP spsp')
  })

  it('CR-1a: Silvain oracle ee[-] parses without crash → [e,?], displays e-', () => {
@@ -677,6 +684,6 @@ describe('GEN-3h: breeder bracket-notation display + E-locus e-before-ef order',
    expect(g.C).toEqual(['cchm', 'cchm'])
    expect(g.D).toEqual(['D', 'd'])
    expect(g.Sp).toEqual(['Sp', 'sp'])
-    expect(toDisplayString(g)).toBe('aa c[chm]c[chm] Dd e- Gg Pp Spsp rere')
+    expect(toDisplayString(g)).toBe('aa c[chm]c[chm] Dd e- Gg Pp Spsp')
  })
 })
--- a/gerbil-manager-web/src/genetics/colorVarietySeed.generated.json
+++ b/gerbil-manager-web/src/genetics/colorVarietySeed.generated.json
@@ -2,425 +2,425 @@
  {
    "name": "REW",
    "english": "Pink Eyed White",
-    "canonicalGenotype": "AA c[h]c[h] DD EE GG pp spsp rere",
+    "canonicalGenotype": "AA c[h]c[h] DD EE GG pp spsp",
    "sortOrder": 0,
    "image": "rotaugen-weiss-pew-d-sep-e-sep.jpg"
  },
  {
    "name": "Hermelin",
    "english": "Dark Tailed White",
-    "canonicalGenotype": "aa c[h]c[h] DD EE GG PP spsp rere",
+    "canonicalGenotype": "aa c[h]c[h] DD EE GG PP spsp",
    "sortOrder": 1,
    "image": "hermelin.jpeg"
  },
  {
    "name": "Himalaya",
    "english": "Himalayan",
-    "canonicalGenotype": "AA c[h]c[h] DD EE GG PP spsp rere",
+    "canonicalGenotype": "AA c[h]c[h] DD EE GG PP spsp",
    "sortOrder": 2,
    "image": "himalaya.jpg"
  },
  {
    "name": "Zobel",
    "english": "Sable",
-    "canonicalGenotype": "aa c[chm]c[chm] DD EE gg PP spsp rere",
+    "canonicalGenotype": "aa c[chm]c[chm] DD EE gg PP spsp",
    "sortOrder": 3,
    "image": "zobel.jpeg"
  },
  {
    "name": "Rotaugenschimmel",
    "english": "Red-Eyed Roan",
-    "canonicalGenotype": "AA CC DD e[f]e[f] GG pp spsp rere",
+    "canonicalGenotype": "AA CC DD e[f]e[f] GG pp spsp",
    "sortOrder": 4,
    "image": "rotaugen-schimmel.jpg"
  },
  {
    "name": "Agouti",
    "english": "Golden Agouti",
-    "canonicalGenotype": "AA CC DD EE GG PP spsp rere",
+    "canonicalGenotype": "AA CC DD EE GG PP spsp",
    "sortOrder": 5,
    "image": "agouti-mit-erklaerung-der-genloci.JPG"
  },
  {
    "name": "Schwarz",
    "english": "Black",
-    "canonicalGenotype": "aa CC DD EE GG PP spsp rere",
+    "canonicalGenotype": "aa CC DD EE GG PP spsp",
    "sortOrder": 6,
    "image": "schwarz.jpg"
  },
  {
    "name": "Silberagouti",
    "english": "Grey Agouti",
-    "canonicalGenotype": "AA CC DD EE gg PP spsp rere",
+    "canonicalGenotype": "AA CC DD EE gg PP spsp",
    "sortOrder": 7,
    "image": "silberagouti.jpg"
  },
  {
    "name": "Anthrazit",
    "english": "Slate",
-    "canonicalGenotype": "aa CC DD EE gg PP spsp rere",
+    "canonicalGenotype": "aa CC DD EE gg PP spsp",
    "sortOrder": 8,
    "image": "anthrazit.jpg"
  },
  {
    "name": "Algierfuchs",
    "english": "Dark-Eyed Honey",
-    "canonicalGenotype": "AA CC DD ee GG PP spsp rere",
+    "canonicalGenotype": "AA CC DD ee GG PP spsp",
    "sortOrder": 9,
    "image": "algierfuchs.jpg"
  },
  {
    "name": "Blau",
    "english": "Blue",
-    "canonicalGenotype": "aa CC dd EE GG PP spsp rere",
+    "canonicalGenotype": "aa CC dd EE GG PP spsp",
    "sortOrder": 10,
    "image": "blau-schwarz-dd.JPG"
  },
  {
    "name": "Gold",
    "english": "Argente Golden",
-    "canonicalGenotype": "AA CC DD EE GG pp spsp rere",
+    "canonicalGenotype": "AA CC DD EE GG pp spsp",
    "sortOrder": 11,
    "image": "gold.jpg"
  },
  {
    "name": "Platin",
    "english": "Lilac",
-    "canonicalGenotype": "aa CC DD EE GG pp spsp rere",
+    "canonicalGenotype": "aa CC DD EE GG pp spsp",
    "sortOrder": 12,
    "image": "platin.JPG"
  },
  {
    "name": "Goldfuchs",
    "english": "Yellow Fox",
-    "canonicalGenotype": "AA CC DD ee GG pp spsp rere",
+    "canonicalGenotype": "AA CC DD ee GG pp spsp",
    "sortOrder": 13,
    "image": "goldfuchs.jpg"
  },
  {
    "name": "Rotfuchs",
    "english": "Argente Nutmeg",
-    "canonicalGenotype": "aa CC DD ee GG pp spsp rere",
+    "canonicalGenotype": "aa CC DD ee GG pp spsp",
    "sortOrder": 14,
    "image": "rotfuchs.JPG"
  },
  {
    "name": "Dilute Gold",
    "english": "dd Argente Golden",
-    "canonicalGenotype": "AA CC dd EE GG pp spsp rere",
+    "canonicalGenotype": "AA CC dd EE GG pp spsp",
    "sortOrder": 15,
    "image": "gold-dd.jpg"
  },
  {
    "name": "Dilute Platin",
    "english": "dd Lilac",
-    "canonicalGenotype": "aa CC dd EE GG pp spsp rere",
+    "canonicalGenotype": "aa CC dd EE GG pp spsp",
    "sortOrder": 16,
    "image": "platin-dd.jpg"
  },
  {
    "name": "Altweiss (REW)",
-    "canonicalGenotype": "aa CC DD EE gg pp spsp rere",
+    "canonicalGenotype": "aa CC DD EE gg pp spsp",
    "sortOrder": 17,
    "image": "altweiss-rew.jpeg"
  },
  {
    "name": "Apricot (Blassfuchs)",
-    "canonicalGenotype": "AA CC DD ee gg pp spsp rere",
+    "canonicalGenotype": "AA CC DD ee gg pp spsp",
    "sortOrder": 18,
    "image": "apricot-blassfuchs.jpg"
  },
  {
    "name": "Blaufuchs",
-    "canonicalGenotype": "aa CC DD ee gg PP spsp rere",
+    "canonicalGenotype": "aa CC DD ee gg PP spsp",
    "sortOrder": 19,
    "image": "blaufuchs.jpg"
  },
  {
    "name": "C-Separator",
-    "canonicalGenotype": "aa CC DD ee gg pp spsp rere",
+    "canonicalGenotype": "aa CC DD ee gg pp spsp",
    "sortOrder": 20,
    "image": "c-separator.jpg"
  },
  {
    "name": "Elfenbein",
-    "canonicalGenotype": "AA CC DD EE gg pp spsp rere",
+    "canonicalGenotype": "AA CC DD EE gg pp spsp",
    "sortOrder": 21,
    "image": "elfenbein.jpg"
  },
  {
    "name": "Kohlfuchs",
-    "canonicalGenotype": "aa CC DD ee GG PP spsp rere",
+    "canonicalGenotype": "aa CC DD ee GG PP spsp",
    "sortOrder": 22,
    "image": "kohlfuchs.jpg"
  },
  {
    "name": "Polarfuchs",
-    "canonicalGenotype": "AA CC DD ee gg PP spsp rere",
+    "canonicalGenotype": "AA CC DD ee gg PP spsp",
    "sortOrder": 23,
    "image": "polarfuchs.jpg"
  },
  {
    "name": "Saphir",
-    "canonicalGenotype": "aa CC DD EE GG pp spsp rere",
+    "canonicalGenotype": "aa CC DD EE GG pp spsp",
    "sortOrder": 24,
    "image": "saphir.jpg"
  },
  {
    "name": "Orangeschimmel",
-    "canonicalGenotype": "AA CC DD e[f]e[f] GG PP spsp rere",
+    "canonicalGenotype": "AA CC DD e[f]e[f] GG PP spsp",
    "sortOrder": 25,
    "image": "schimmel-orangeschimmel.jpg"
  },
  {
    "name": "Topas",
-    "canonicalGenotype": "AA CC DD EE GG pp spsp rere",
+    "canonicalGenotype": "AA CC DD EE GG pp spsp",
    "sortOrder": 26,
    "image": "topas.jpg"
  },
  {
    "name": "Platin-Hell",
-    "canonicalGenotype": "aa CC DD EE GG pp spsp rere",
+    "canonicalGenotype": "aa CC DD EE GG pp spsp",
    "sortOrder": 27,
    "image": "platin-hell.jpg"
  },
  {
    "name": "Dilute Agouti",
-    "canonicalGenotype": "AA CC dd EE GG PP spsp rere",
+    "canonicalGenotype": "AA CC dd EE GG PP spsp",
    "sortOrder": 28,
    "image": "agouti-dd.jpg"
  },
  {
    "name": "Dilute Silberagouti",
-    "canonicalGenotype": "AA CC dd EE gg PP spsp rere",
+    "canonicalGenotype": "AA CC dd EE gg PP spsp",
    "sortOrder": 29,
    "image": "silberagouti-dd.jpg"
  },
  {
    "name": "Dilute Kohlfuchs",
-    "canonicalGenotype": "aa CC dd ee GG PP spsp rere",
+    "canonicalGenotype": "aa CC dd ee GG PP spsp",
    "sortOrder": 30,
    "image": "kohlfuchs-dd.jpg"
  },
  {
    "name": "Dilute Anthrazit",
-    "canonicalGenotype": "aa CC dd EE gg PP spsp rere",
+    "canonicalGenotype": "aa CC dd EE gg PP spsp",
    "sortOrder": 31,
    "image": "anthrazit-dd.jpg"
  },
  {
    "name": "Dilute Algierfuchs",
-    "canonicalGenotype": "AA CC dd ee GG PP spsp rere",
+    "canonicalGenotype": "AA CC dd ee GG PP spsp",
    "sortOrder": 32
  },
  {
    "name": "Dilute Goldfuchs",
-    "canonicalGenotype": "AA CC dd ee GG pp spsp rere",
+    "canonicalGenotype": "AA CC dd ee GG pp spsp",
    "sortOrder": 33
  },
  {
    "name": "Dilute Rotfuchs",
-    "canonicalGenotype": "aa CC dd ee GG pp spsp rere",
+    "canonicalGenotype": "aa CC dd ee GG pp spsp",
    "sortOrder": 34
  },
  {
    "name": "Dilute Polarfuchs",
-    "canonicalGenotype": "AA CC dd ee gg PP spsp rere",
+    "canonicalGenotype": "AA CC dd ee gg PP spsp",
    "sortOrder": 35
  },
  {
    "name": "Silberschimmel",
-    "canonicalGenotype": "AA CC DD e[f]e[f] gg PP spsp rere",
+    "canonicalGenotype": "AA CC DD e[f]e[f] gg PP spsp",
    "sortOrder": 36,
    "image": "silberschimmel.jpg"
  },
  {
    "name": "Polarfuchsschimmel",
-    "canonicalGenotype": "AA CC DD e[f]e[f] gg PP spsp rere",
+    "canonicalGenotype": "AA CC DD e[f]e[f] gg PP spsp",
    "sortOrder": 37,
    "image": "polarfuchsschimmel.jpg"
  },
  {
    "name": "Algierfuchsschimmel",
-    "canonicalGenotype": "AA CC DD e[f]e[f] GG PP spsp rere",
+    "canonicalGenotype": "AA CC DD e[f]e[f] GG PP spsp",
    "sortOrder": 38,
    "image": "algierfuchsschimmel.jpg"
  },
  {
    "name": "Kohlfuchsschimmel",
-    "canonicalGenotype": "aa CC DD e[f]e[f] GG PP spsp rere",
+    "canonicalGenotype": "aa CC DD e[f]e[f] GG PP spsp",
    "sortOrder": 39,
    "image": "kohlfuchsschimmel.jpg"
  },
  {
    "name": "Blaufuchsschimmel",
-    "canonicalGenotype": "aa CC DD e[f]e[f] gg PP spsp rere",
+    "canonicalGenotype": "aa CC DD e[f]e[f] gg PP spsp",
    "sortOrder": 40,
    "image": "blaufuchsschimmel.jpg"
  },
  {
    "name": "Kohlfuchs, hell",
-    "canonicalGenotype": "aa CC DD ee GG PP spsp rere",
+    "canonicalGenotype": "aa CC DD ee GG PP spsp",
    "sortOrder": 41,
    "image": "kohlfuchs-hell.jpg"
  },
  {
    "name": "Goldfuchs, hell",
-    "canonicalGenotype": "AA CC DD ee GG pp spsp rere",
+    "canonicalGenotype": "AA CC DD ee GG pp spsp",
    "sortOrder": 42,
    "image": "goldfuchs-hell.jpg"
  },
  {
    "name": "Goldfuchsschimmel",
-    "canonicalGenotype": "AA CC DD e[f]e[f] GG pp spsp rere",
+    "canonicalGenotype": "AA CC DD e[f]e[f] GG pp spsp",
    "sortOrder": 43,
    "image": "goldfuchsschimmel.jpg"
  },
  {
    "name": "Gold-Hell",
-    "canonicalGenotype": "AA CC DD EE GG pp spsp rere",
+    "canonicalGenotype": "AA CC DD EE GG pp spsp",
    "sortOrder": 44,
    "image": "gold-hell.jpg"
  },
  {
    "name": "Blaufuchs, hell",
-    "canonicalGenotype": "aa CC DD ee gg PP spsp rere",
+    "canonicalGenotype": "aa CC DD ee gg PP spsp",
    "sortOrder": 45,
    "image": "blaufuchs-hell.jpeg"
  },
  {
    "name": "Rotfuchsschimmel",
-    "canonicalGenotype": "aa CC DD e[f]e[f] GG pp spsp rere",
+    "canonicalGenotype": "aa CC DD e[f]e[f] GG pp spsp",
    "sortOrder": 46,
    "image": "rotfuchsschimmel.jpg"
  },
  {
    "name": "Polarfuchs, hell",
-    "canonicalGenotype": "AA CC DD ee gg PP spsp rere",
+    "canonicalGenotype": "AA CC DD ee gg PP spsp",
    "sortOrder": 47,
    "image": "polarfuchs-hell.jpeg"
  },
  {
    "name": "Kohlfuchsschimmel, hell",
-    "canonicalGenotype": "aa CC DD e[f]e[f] GG PP spsp rere",
+    "canonicalGenotype": "aa CC DD e[f]e[f] GG PP spsp",
    "sortOrder": 48,
    "image": "kohlfuchsschimmel-hell.jpg"
  },
  {
    "name": "Rotfuchs, hell",
-    "canonicalGenotype": "aa CC DD ee GG pp spsp rere",
+    "canonicalGenotype": "aa CC DD ee GG pp spsp",
    "sortOrder": 49,
    "image": "rotfuchs-hell.jpg"
  },
  {
    "name": "Kohlfuchs-Hell",
-    "canonicalGenotype": "aa CC DD ee GG PP spsp rere",
+    "canonicalGenotype": "aa CC DD ee GG PP spsp",
    "sortOrder": 50,
    "image": "kohlfuchs-hell-2.jpg"
  },
  {
    "name": "Algierfuchs, hell",
-    "canonicalGenotype": "AA CC DD ee GG PP spsp rere",
+    "canonicalGenotype": "AA CC DD ee GG PP spsp",
    "sortOrder": 51,
    "image": "algierfuchs-hell.JPG"
  },
  {
    "name": "Dilute Topas",
-    "canonicalGenotype": "AA CC dd EE GG pp spsp rere",
+    "canonicalGenotype": "AA CC dd EE GG pp spsp",
    "sortOrder": 52,
    "image": "topas-dd.jpg"
  },
  {
    "name": "Dilute Blaufuchs",
-    "canonicalGenotype": "aa CC dd ee gg pp spsp rere",
+    "canonicalGenotype": "aa CC dd ee gg pp spsp",
    "sortOrder": 53,
    "image": "blaufuchs-dd.jpg"
  },
  {
    "name": "Marder",
-    "canonicalGenotype": "aa c[chm]c[chm] DD EE GG PP spsp rere",
+    "canonicalGenotype": "aa c[chm]c[chm] DD EE GG PP spsp",
    "sortOrder": 54,
    "image": "marder.JPG"
  },
  {
    "name": "Siam",
-    "canonicalGenotype": "aa c[chm]c[h] DD EE GG PP spsp rere",
+    "canonicalGenotype": "aa c[chm]c[h] DD EE GG PP spsp",
    "sortOrder": 55,
    "image": "siam-marder-hell.JPG"
  },
  {
    "name": "Zobel-Hell",
-    "canonicalGenotype": "aa c[chm]c[h] DD EE gg PP spsp rere",
+    "canonicalGenotype": "aa c[chm]c[h] DD EE gg PP spsp",
    "sortOrder": 56,
    "image": "zobel-hell.jpg"
  },
  {
    "name": "CP-Agouti",
-    "canonicalGenotype": "AA c[chm]c[chm] DD EE GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[chm] DD EE GG PP spsp",
    "sortOrder": 57,
    "image": "agouti-cp.jpg"
  },
  {
    "name": "CP-Agouti-Hell",
-    "canonicalGenotype": "AA c[chm]c[h] DD EE GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[h] DD EE GG PP spsp",
    "sortOrder": 58
  },
  {
    "name": "CP-Silberagouti",
-    "canonicalGenotype": "AA c[chm]c[chm] DD EE gg PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[chm] DD EE gg PP spsp",
    "sortOrder": 59,
    "image": "silberagouti-cp.JPG"
  },
  {
    "name": "CP-Silberagouti-Hell",
-    "canonicalGenotype": "AA c[chm]c[h] DD EE gg PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[h] DD EE gg PP spsp",
    "sortOrder": 60
  },
  {
    "name": "CP-Algierfuchs",
-    "canonicalGenotype": "AA c[chm]c[chm] DD ee GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[chm] DD ee GG PP spsp",
    "sortOrder": 61,
    "image": "algierfuchs-cp.jpg"
  },
  {
    "name": "CP-Algierfuchs-Hell",
-    "canonicalGenotype": "AA c[chm]c[h] DD ee GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[h] DD ee GG PP spsp",
    "sortOrder": 62
  },
  {
    "name": "CP-Polarfuchs",
-    "canonicalGenotype": "AA c[chm]c[chm] DD ee gg PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[chm] DD ee gg PP spsp",
    "sortOrder": 63,
    "image": "polarfuchs-cp.jpg"
  },
  {
    "name": "CP-Polarfuchs-Hell",
-    "canonicalGenotype": "AA c[chm]c[h] DD ee gg PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[h] DD ee gg PP spsp",
    "sortOrder": 64
  },
  {
    "name": "CP-Fuchs",
-    "canonicalGenotype": "AA c[chm]c[chm] dd ee GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[chm] dd ee GG PP spsp",
    "sortOrder": 65
  },
  {
    "name": "CP-Fuchs-Hell",
-    "canonicalGenotype": "AA c[chm]c[h] dd ee GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[h] dd ee GG PP spsp",
    "sortOrder": 66
  },
  {
    "name": "CP-Blaufuchs",
-    "canonicalGenotype": "AA c[chm]c[chm] dd ee gg PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[chm] dd ee gg PP spsp",
    "sortOrder": 67
  },
  {
    "name": "CP-Orangeschimmel",
-    "canonicalGenotype": "AA c[chm]c[chm] DD e[f]e[f] GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[chm] DD e[f]e[f] GG PP spsp",
    "sortOrder": 68
  },
  {
    "name": "CP-Orangeschimmel-Hell",
-    "canonicalGenotype": "AA c[chm]c[h] DD e[f]e[f] GG PP spsp rere",
+    "canonicalGenotype": "AA c[chm]c[h] DD e[f]e[f] GG PP spsp",
    "sortOrder": 69
  }
 ]
--- a/gerbil-manager-web/src/genetics/genotype.ts
+++ b/gerbil-manager-web/src/genetics/genotype.ts
@@ -101,18 +101,21 @@ function displayPair(locus: LocusKey, pair: AllelePair): AllelePair {
 }

 /**
- * Compact display string, e.g. "Aa CC Dd EE GG Pp spsp rere".
- * The Sls locus is OMITTED when wild-type (sl/sl) so legacy 8-locus strings and
- * the colour catalog stay byte-identical; it only appears for WP/Sls carriers
- * (e.g. "… spsp rere Slsl"). Round-trips: a missing Sls re-parses to sl/sl.
- * GEN-3c: unknown alleles are STORED as '?' but DISPLAYED as '-' (breeder
- * convention) — e.g. ['C','?'] renders "C-".
- * GEN-3h: sub-alleles use breeder bracket notation (e[f], c[chm], c[h]);
- * E-locus display order is E > e > e[f] (e before e[f] in het pairs).
+ * Compact display string, e.g. "Aa CC Dd EE GG Pp spsp".
+ * The Re locus is OMITTED when wild-type (re/re) — Julian: only show Rex when a
+ * Rex allele is present (Rere/ReRe). Matches the 7-locus notation used by the
+ * breeder. The Sls locus is likewise omitted when wild-type (sl/sl) so legacy
+ * 8-locus strings and the colour catalog stay byte-identical; it only appears for
+ * WP/Sls carriers (e.g. "… spsp Slsl"). Round-trips: missing Re → re/re; missing
+ * Sls → sl/sl. GEN-3c: unknown alleles stored as '?' displayed as '-' (breeder
+ * convention). GEN-3h: bracket notation (e[f], c[chm], c[h]); E-locus display
+ * order E > e > e[f].
 */
 export function toDisplayString(g: Genotype): string {
  return LOCUS_ORDER.filter(
-    (locus) => locus !== 'Sls' || !(g.Sls[0] === 'sl' && g.Sls[1] === 'sl'),
+    (locus) =>
+      !(locus === 'Re' && g.Re[0] === 're' && g.Re[1] === 're') &&
+      !(locus === 'Sls' && g.Sls[0] === 'sl' && g.Sls[1] === 'sl'),
  )
    .map((locus) => {
      const [a, b] = displayPair(locus, g[locus])
--- a/gerbil-manager-web/src/pages/GerbilFormPage.tsx
+++ b/gerbil-manager-web/src/pages/GerbilFormPage.tsx
@@ -6,7 +6,7 @@ import { listColorVarieties, listContacts, listEnclosures, listLitters } from '.
 import { GENDERS, GERBIL_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'
@@ -307,7 +307,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 +394,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/StammbaumPage.tsx
+++ b/gerbil-manager-web/src/pages/StammbaumPage.tsx
@@ -22,12 +22,14 @@ 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 { UNKNOWN_FARBSCHLAG, fromDisplayString, genotypeToFarbschlag } from '../genetics'
+import GerbilIcon from '../components/GerbilIcon'
+import { UNKNOWN_FARBSCHLAG, fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
 import {
  DEFAULT_GENERATIONS,
  ancestorsAt,
@@ -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}>
-          {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 className="stammbaum-layout">
+          {rootLitterItems.length > 0 && (
+            <LittersPanel litters={rootLitterItems} t={t} />
          )}
+          <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 (
@@ -512,7 +557,11 @@ function PrintCell({
        </div>
      )}
      {farbschlag && <div className="stammbaum-print__sub">{farbschlag}</div>}
-      {g.genotype && gen <= 2 && <div className="stammbaum-print__geno">{g.genotype}</div>}
+      {g.genotype && gen <= 2 && (
+        <div className="stammbaum-print__geno">
+          {toDisplayString(fromDisplayString(g.genotype))}
+        </div>
+      )}
    </div>
  )
 }
--- 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,18 +150,27 @@ 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) => (
-            <li key={g.id}>
-              <Link to={`/rennmaeuse/${g.id}`} className="gerbil-card">
-                <span className="gerbil-card__name">{g.name}</span>
-                <span className="gerbil-card__meta">{de.pages.gerbils.genderLabels[g.gender]}</span>
-              </Link>
-            </li>
-          ))}
+          {(juveniles.data?.items ?? []).map((g) => {
+            const farbe = farbschlagOf(g)
+            const receiver = g.receiverContactId ? contactNameById.get(g.receiverContactId) : null
+            const tJf = t.detail.juvenileFields
+            return (
+              <li key={g.id}>
+                <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>
      )}

-      <h3>{t.detail.expectedColors}</h3>
      {expected ? (
        <BreedingResultView result={expected} title={t.detail.expectedColors} />
      ) : (
--- 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/strings/de.ts
+++ b/gerbil-manager-web/src/strings/de.ts
@@ -189,6 +189,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 +366,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	05cb1af39e	Merge feature/gerbil-profilephoto (PROFILEPHOTO-BE): berechnetes profilePhotoUrl aufs Gerbil-DTO (Shared-Dep fuer Avatare, keine Migration, kein N+1) Some checks failed CI / Frontend Tests (Node/Vite) (push) Has been cancelled Details CI / Docker Build & Push (push) Has been cancelled Details CI / Backend Tests (.NET) (push) Has been cancelled Details	2026-06-07 03:33:01 +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	70803efa1f	PROFILEPHOTO: profilePhotoUrl computed field on GerbilDto GET /gerbils/{id}: loads first photo by sortOrder (2 queries, no N+1). GET /gerbils list: batch-loads first photos for the page in one IN query. profilePhotoUrl = /photos/files/{fileName} or null. No migration. 3 new tests: no-photo=null, sortOrder priority, list batch.	2026-06-07 03:19:00 +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	2198c33898	OPS-2: TrueNAS Goldeye 25.10.2.1 Deploy finalisiert Registry truenas:13000 -> git.rismer.de/gulum (alle 6 Stellen). Dataset-Pfade auf /mnt/JailStorage/DockerVolumes/gerbilmanager/ gesetzt. docs/ops.md: vollstaendiges Goldeye-Runbook (Ordner + UID-999-Perms, Registry-Login, Port-80-Fallback, Restore-Drill-Pflichtschritt, ZFS-Pfade). docker compose config: OK.	2026-06-07 01:38:25 +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	7c12a65938	Merge feature/namegen-2-be (NAMEGEN-2-BE): 5 Themen-Kategorien disney/pokemon/encities/hrcities/usstates für /names/suggest 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 01:34:52 +02:00
Gulum	cb5acd2005	Merge feature/genotype-display-rex (GEN-4d + UI-FIX): Rex-Wildtyp 'rere' in Anzeige ausblenden (7 Loci) + doppelte Wurf-Überschrift entfernt Some checks failed CI / Backend Tests (.NET) (push) Successful in 1m0s Details CI / Docker Build & Push (push) Has been cancelled Details CI / Frontend Tests (Node/Vite) (push) Has been cancelled Details	2026-06-07 01:31:19 +02:00
Gulum	bda5479b93	UI-FIX: doppelte Überschrift 'Erwartete Farbschläge' auf Wurf-Detailseite entfernt	2026-06-07 01:29:49 +02:00
Gulum	d5c155953b	GEN-4d: rere (Re-Wildtyp) aus Anzeige ausblenden (Julian) - genotype.ts: toDisplayString filtert Re aus wenn re/re (Wildtyp) — analog zur bestehenden Sls-Regel; Rere/ReRe bleiben sichtbar. Wildtyp-Anzeige jetzt 7 Loci: AA CC DD EE GG PP spsp (ohne rere). - StammbaumPage.tsx: Druck-Ahnentafel nutzt toDisplayString(fromDisplayString(g.genotype)) statt rohem g.genotype-String (Audit: einzige Display-Stelle ausserhalb toDisplayString). (GerbilDetailPage/BreedingResultView gehen bereits via toDisplayString.) - genetics.test.ts: Alle Display-String-Assertions auf 7-Loci-Format aktualisiert; Rere-Nachweis zum Sls/Re-Test ergaenzt; Katalog-Regex auf {6,8}. - colorVarietySeed.generated.json regeneriert (kein rere in canonicalGenotype). - backend.json unveraendert (Pam: DB-Speicherung bleibt volles 8-Loki-Format).	2026-06-07 01:28:06 +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