WURF-LINK-Addendum: Herkunft-Zeile zeigt originBreeder + Kontaktlink

- originContactId gesetzt → Link /kontakte/{id} mit Kontaktname (Priorität)
- Sonst originBreeder (Freitext) gesetzt → plain text
- Sonst '—' (bisheriges Fallback)
Behebt: 74 Tiere mit originBreeder sahen '—' obwohl Daten vorhanden

e2e: 2 neue Tests (originBreeder-Text + Kontaktlink)

Gate: vitest 82/82, e2e 126/126, build+tsc clean

GerbilManager.Tests/CmsTests.cs

@@ -11,17 +11,21 @@ public class CmsTests : IClassFixture<ApiFactory>
     public CmsTests(ApiFactory factory) => _client = factory.CreateClient();
 
     [Fact]
-    public async Task Snapshot_has_site_nav_and_six_seeded_pages()
+    public async Task Snapshot_has_site_nav_and_seeded_pages()
     {
         var doc = JsonDocument.Parse(await _client.GetStringAsync("/api/site-snapshot"));
         var root = doc.RootElement;
 
         Assert.Equal("de", root.GetProperty("site").GetProperty("defaultLocale").GetString());
         var nav = root.GetProperty("site").GetProperty("navOrder").EnumerateArray().Select(x => x.GetString()).ToList();
+        // main nav = 6 core pages (Impressum/Datenschutz are footer-only, not in navOrder)
         Assert.Equal(new[] { "start", "ueber-die-zucht", "abgabetiere", "abgabebedingungen", "farben-genetik", "kontakt" }, nav);
 
         var pages = root.GetProperty("pages").EnumerateArray().ToList();
-        Assert.Equal(6, pages.Count);
+        // 8 pages: 6 core + impressum + datenschutz (footer-only legal pages)
+        Assert.Equal(8, pages.Count);
+        Assert.Contains(pages, p => p.GetProperty("slug").GetString() == "impressum");
+        Assert.Contains(pages, p => p.GetProperty("slug").GetString() == "datenschutz");
         // abgabetiere page carries an AbgabetiereList block with a resolved (possibly empty) animals array
         var abg = pages.Single(p => p.GetProperty("slug").GetString() == "abgabetiere");
         var listBlock = abg.GetProperty("blocks").EnumerateArray()

GerbilManager.Tests/SiteRendererTests.cs

@@ -69,10 +69,11 @@ public class SiteRendererTests
         ["data"] = new JsonObject { ["name"] = name, ["email"] = email, ["phone"] = phone },
     };
 
-    private static JsonObject AbgabetiereBlock(string intro, params (string name, string farbe, string? group, string? photo)[] animals)
+    private static JsonObject AbgabetiereBlock(string intro,
+        params (string name, string farbe, string? group, string? photo, string? gender, string? dob, string? note)[] animals)
     {
         var animalArr = new JsonArray();
-        foreach (var (name, farbe, group, photo) in animals)
+        foreach (var (name, farbe, group, photo, gender, dob, note) in animals)
         {
             var photos = new JsonArray();
             if (photo is not null) photos.Add(photo);
@@ -81,6 +82,9 @@ public class SiteRendererTests
                 ["name"] = name,
                 ["farbschlag"] = farbe,
                 ["group"] = group,
+                ["gender"] = gender,
+                ["dateOfBirth"] = dob,
+                ["characterNote"] = note,
                 ["photos"] = photos,
                 ["aiSaleText"] = (JsonNode?)null,
             });
@@ -92,6 +96,7 @@ public class SiteRendererTests
         };
     }
 
+
     // ── Tests ────────────────────────────────────────────────────────────────
 
     [Fact]
@@ -211,16 +216,52 @@ public class SiteRendererTests
     }
 
     [Fact]
-    public void AbgabetiereList_renders_animal_cards_with_name_and_farbschlag()
+    public void AbgabetiereList_renders_group_card_with_name_farbschlag_and_photo()
     {
         var snap = MakeSnapshot(("abgabetiere", "Abgabetiere",
-            Blocks(AbgabetiereBlock("Aktuelle Tiere:", ("Krümel", "CP-Agouti", "Großbecken", "/photos/files/abc.jpg")))));
+            Blocks(AbgabetiereBlock("Aktuelle Tiere:", ("Krümel", "CP-Agouti", "Großbecken", "/photos/files/abc.jpg", null, null, null)))));
         var html = SiteRenderer.Render(snap)["abgabetiere/index.html"];
         Assert.Contains("Krümel", html);
         Assert.Contains("CP-Agouti", html);
         Assert.Contains("Großbecken", html);
         Assert.Contains("/photos/files/abc.jpg", html);
-        Assert.Contains("cms-animal-card", html);
+        Assert.Contains("cms-group-card", html);
+    }
+
+    [Fact]
+    public void AbgabetiereList_group_card_shows_gender_label_and_available_badge()
+    {
+        var snap = MakeSnapshot(("abgabetiere", "Abgabetiere",
+            Blocks(AbgabetiereBlock("",
+                ("Frieda", "Agouti", "Becken 1", null, "female", null, null),
+                ("Rosa", "PEW", "Becken 1", null, "female", null, null)))));
+        var html = SiteRenderer.Render(snap)["abgabetiere/index.html"];
+        Assert.Contains("Weibchen", html);
+        Assert.Contains("Verfügbar", html);
+        Assert.Contains("cms-badge--free", html);
+    }
+
+    [Fact]
+    public void AbgabetiereList_shows_dateOfBirth_and_characterNote()
+    {
+        var snap = MakeSnapshot(("abgabetiere", "Abgabetiere",
+            Blocks(AbgabetiereBlock("",
+                ("Pünktchen", "Siamesisch", null, null, "female", "2024-03-15", "Sehr neugierig und verspielt.")))));
+        var html = SiteRenderer.Render(snap)["abgabetiere/index.html"];
+        Assert.Contains("März 2024", html);
+        Assert.Contains("Sehr neugierig und verspielt.", html);
+    }
+
+    [Fact]
+    public void AbgabetiereList_solo_animal_without_group_gets_its_own_card()
+    {
+        var snap = MakeSnapshot(("abgabetiere", "Abgabetiere",
+            Blocks(AbgabetiereBlock("",
+                ("Einzelkind", "Zobel", null, null, "male", null, null)))));
+        var html = SiteRenderer.Render(snap)["abgabetiere/index.html"];
+        Assert.Contains("Einzelkind", html);
+        Assert.Contains("Männchen", html);
+        Assert.Contains("cms-group-card", html);
     }
 
     [Fact]
@@ -283,6 +324,44 @@ public class SiteRendererTests
         Assert.Equal(7, files.Count);
     }
 
+    [Fact]
+    public void Render_impressum_and_datenschutz_pages_are_rendered()
+    {
+        var snap = MakeSnapshot(
+            ("start", "Startseite", Blocks()),
+            ("impressum", "Impressum", Blocks(RichTextBlock("§ 5 TMG Platzhalter"))),
+            ("datenschutz", "Datenschutz", Blocks(RichTextBlock("Datenschutz Platzhalter"))));
+        var files = SiteRenderer.Render(snap);
+        Assert.True(files.ContainsKey("impressum/index.html"));
+        Assert.True(files.ContainsKey("datenschutz/index.html"));
+        Assert.Contains("§ 5 TMG Platzhalter", files["impressum/index.html"]);
+    }
+
+    [Fact]
+    public void Footer_contains_impressum_and_datenschutz_links()
+    {
+        var snap = MakeSnapshot(
+            ("start", "Startseite", Blocks()),
+            ("kontakt", "Kontakt", Blocks()));
+        var startHtml = SiteRenderer.Render(snap)["index.html"];
+        Assert.Contains("impressum/index.html", startHtml);
+        Assert.Contains("datenschutz/index.html", startHtml);
+        // links in footer, not nav
+        Assert.Contains("site-footer-link", startHtml);
+    }
+
+    [Fact]
+    public void Footer_links_use_correct_relative_path_from_subpage()
+    {
+        var snap = MakeSnapshot(
+            ("start", "Startseite", Blocks()),
+            ("kontakt", "Kontakt", Blocks()));
+        var kontaktHtml = SiteRenderer.Render(snap)["kontakt/index.html"];
+        // subpage needs ../ prefix for footer links
+        Assert.Contains("../impressum/index.html", kontaktHtml);
+        Assert.Contains("../datenschutz/index.html", kontaktHtml);
+    }
+
     // ── Markdown tests ───────────────────────────────────────────────────────
 
     [Theory]

GerbilManagerWebAPI/ApplicationContext.cs

@@ -193,6 +193,15 @@ public class ApplicationContext : DbContext
             (6, "kontakt", "Kontakt"),
         };
 
+        // WEB-6a: footer-only legal pages (not in main nav)
+        (int n, string Slug, string Title, string BodyMd)[] legalPages =
+        {
+            (7, "impressum", "Impressum",
+                "**Angaben gemäß § 5 TMG**\\n\\nSeitenbetreiber: [Name und vollständige Adresse eintragen]\\n\\nE-Mail: [E-Mail-Adresse eintragen]\\n\\n---\\n\\n*Diese Seite wird vom Seitenbetreiber noch vervollständigt.*"),
+            (8, "datenschutz", "Datenschutz",
+                "**Datenschutzerklärung**\\n\\nDiese Webseite dient der Vorstellung unserer Rennmauszucht. Es werden keine personenbezogenen Daten gespeichert oder weitergegeben.\\n\\nBei datenschutzbezogenen Fragen: [E-Mail-Adresse eintragen]\\n\\n---\\n\\n*Diese Seite wird vom Seitenbetreiber noch vervollständigt.*"),
+        };
+
         var pageRows = new List<Page>();
         var blockRows = new List<Block>();
         foreach (var p in pages)
@@ -211,6 +220,12 @@ public class ApplicationContext : DbContext
             Id = Bid(10), PageId = Pid(3), Order = 1, Type = BlockType.AbgabetiereList,
             Data = "{\"mode\":\"auto\",\"intro\":\"\"}",
         });
+        foreach (var lp in legalPages)
+        {
+            pageRows.Add(new Page { Id = Pid(lp.n), Slug = lp.Slug, Title = lp.Title, Status = PageStatus.Published });
+            blockRows.Add(new Block { Id = Bid(lp.n), PageId = Pid(lp.n), Order = 0, Type = BlockType.Heading, Data = $"{{\"text\":\"{lp.Title}\",\"level\":1}}" });
+            blockRows.Add(new Block { Id = Bid(lp.n * 10), PageId = Pid(lp.n), Order = 1, Type = BlockType.RichText, Data = $"{{\"markdown\":\"{lp.BodyMd}\"}}" });
+        }
 
         modelBuilder.Entity<Page>().HasData(pageRows);
         modelBuilder.Entity<Block>().HasData(blockRows);

GerbilManagerWebAPI/Cms/SiteRenderer.cs

@@ -131,7 +131,8 @@ namespace GerbilManagerWebAPI.Cms
         private static string RenderAbgabetiereList(JsonObject d)
         {
             var intro = Str(d["intro"]);
-            var animals = d["animals"] as JsonArray ?? [];
+            var animals = (d["animals"] as JsonArray ?? [])
+                .OfType<JsonObject>().ToList();
             var sb = new StringBuilder("\n<section class=\"cms-abgabe\">\n");
 
             if (!string.IsNullOrWhiteSpace(intro))
@@ -140,39 +141,80 @@ namespace GerbilManagerWebAPI.Cms
             if (animals.Count == 0)
             {
                 sb.Append("  <p class=\"cms-abgabe-empty\">Zurzeit stehen keine Tiere zur Abgabe bereit.</p>\n");
+                sb.Append("</section>\n");
+                return sb.ToString();
             }
-            else
+
+            // Group by Becken name; null group → solo card keyed by animal name
+            var groups = animals
+                .GroupBy(a => Str(a["group"]) ?? ("__solo__" + (Str(a["name"]) ?? "")))
+                .ToList();
+
+            sb.Append("  <div class=\"cms-group-list\">\n");
+            foreach (var grp in groups)
             {
-                sb.Append("  <div class=\"cms-animal-grid\">\n");
-                foreach (var node in animals)
+                var isSolo = grp.Key.StartsWith("__solo__", StringComparison.Ordinal);
+                var groupName = isSolo ? null : grp.Key;
+                var memberList = grp.ToList();
+
+                // Determine group gender label
+                var genders = memberList.Select(a => Str(a["gender"]) ?? "unknown").Distinct().ToList();
+                string genderLabel = genders.Count == 1
+                    ? genders[0] switch { "female" => "Weibchen", "male" => "Männchen", _ => "" }
+                    : genders.Any(g => g != "unknown") ? "Gemischt" : "";
+
+                sb.Append("    <article class=\"cms-group-card\">\n");
+                sb.Append("      <div class=\"cms-group-header\">\n");
+                if (!string.IsNullOrEmpty(groupName))
+                    sb.Append($"        <h3 class=\"cms-group-name\">{H(groupName)}</h3>\n");
+                var metaParts = new List<string>();
+                if (!string.IsNullOrEmpty(genderLabel)) metaParts.Add(H(genderLabel));
+                metaParts.Add("<span class=\"cms-badge cms-badge--free\">Verfügbar</span>");
+                sb.Append($"        <span class=\"cms-group-meta\">{string.Join(" · ", metaParts)}</span>\n");
+                sb.Append("      </div>\n");
+
+                // Gallery: first photo of each animal in the group
+                var gallery = memberList
+                    .Select(a => (
+                        url: (a["photos"] as JsonArray ?? []).FirstOrDefault()?.GetValue<string>(),
+                        name: Str(a["name"]) ?? ""))
+                    .Where(x => !string.IsNullOrEmpty(x.url))
+                    .ToList();
+                if (gallery.Count > 0)
                 {
-                    if (node is not JsonObject a) continue;
-                    var name = H(Str(a["name"]) ?? "");
-                    var farbe = H(Str(a["farbschlag"]) ?? "");
-                    var group = Str(a["group"]);
-                    var saleText = Str(a["aiSaleText"]);
-                    var photos = a["photos"] as JsonArray ?? [];
-
-                    sb.Append("    <article class=\"cms-animal-card\">\n");
-
-                    // Profile photo (first photo)
-                    var firstPhoto = photos.FirstOrDefault()?.GetValue<string>();
-                    if (!string.IsNullOrEmpty(firstPhoto))
-                        sb.Append($"      <img class=\"cms-animal-photo\" src=\"{H(firstPhoto)}\" alt=\"{name}\" loading=\"lazy\">\n");
-
-                    sb.Append("      <div class=\"cms-animal-info\">\n");
-                    sb.Append($"        <h3 class=\"cms-animal-name\">{name}</h3>\n");
-                    if (!string.IsNullOrEmpty(farbe))
-                        sb.Append($"        <p class=\"cms-animal-farbe\">{farbe}</p>\n");
-                    if (!string.IsNullOrWhiteSpace(group))
-                        sb.Append($"        <p class=\"cms-animal-group\">Gruppe: {H(group)}</p>\n");
-                    if (!string.IsNullOrWhiteSpace(saleText))
-                        sb.Append($"        <p class=\"cms-animal-text\">{H(saleText)}</p>\n");
+                    sb.Append("      <div class=\"cms-group-gallery\">\n");
+                    foreach (var (url, name) in gallery)
+                        sb.Append($"        <img src=\"{H(url)}\" alt=\"{H(name)}\" loading=\"lazy\" class=\"cms-group-photo\">\n");
                     sb.Append("      </div>\n");
-                    sb.Append("    </article>\n");
                 }
-                sb.Append("  </div>\n");
+
+                // Per-animal detail rows
+                sb.Append("      <ul class=\"cms-animal-list\">\n");
+                foreach (var a in memberList)
+                {
+                    var name = H(Str(a["name"]) ?? "");
+                    var farbe = Str(a["farbschlag"]);
+                    var dob = Str(a["dateOfBirth"]);
+                    var note = Str(a["characterNote"]);
+                    var saleText = Str(a["aiSaleText"]);
+
+                    sb.Append("        <li class=\"cms-animal-row\">\n");
+                    sb.Append($"          <span class=\"cms-animal-name\">{name}</span>\n");
+                    var details = new List<string>();
+                    if (!string.IsNullOrEmpty(farbe)) details.Add(H(farbe));
+                    if (!string.IsNullOrEmpty(dob) && DateOnly.TryParse(dob, out var dob2))
+                        details.Add($"* {dob2.ToString("MMMM yyyy", System.Globalization.CultureInfo.GetCultureInfo("de-DE"))}");
+                    if (details.Count > 0)
+                        sb.Append($"          <span class=\"cms-animal-detail\">{string.Join(" · ", details)}</span>\n");
+                    var personalityText = note ?? saleText;
+                    if (!string.IsNullOrWhiteSpace(personalityText))
+                        sb.Append($"          <span class=\"cms-animal-note\">{H(personalityText)}</span>\n");
+                    sb.Append("        </li>\n");
+                }
+                sb.Append("      </ul>\n");
+                sb.Append("    </article>\n");
             }
+            sb.Append("  </div>\n");
 
             sb.Append("</section>\n");
             return sb.ToString();
@@ -212,6 +254,10 @@ namespace GerbilManagerWebAPI.Cms
                   </main>
                   <footer class="site-footer">
                     <p>&copy; {H(SiteName)} — Mongolische Rennmäuse</p>
+                    <nav class="site-footer-nav" aria-label="Rechtliches">
+                      <a href="{navBase}impressum/index.html" class="site-footer-link">Impressum</a>
+                      <a href="{navBase}datenschutz/index.html" class="site-footer-link">Datenschutz</a>
+                    </nav>
                   </footer>
                 </body>
                 </html>
@@ -228,6 +274,8 @@ namespace GerbilManagerWebAPI.Cms
                 ["abgabebedingungen"] = "Abgabebedingungen",
                 ["farben-genetik"] = "Farben & Genetik",
                 ["kontakt"] = "Kontakt",
+                ["impressum"] = "Impressum",
+                ["datenschutz"] = "Datenschutz",
             };
 
             var sb = new StringBuilder();
@@ -336,121 +384,256 @@ namespace GerbilManagerWebAPI.Cms
         internal static string SiteCss() => """
             *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
             :root {
-              --color-bg: #fdf8f3;
+              --color-bg: #fdf7f0;
               --color-surface: #fff;
-              --color-text: #2c2c2c;
-              --color-muted: #6b6b6b;
-              --color-accent: #c0392b;
-              --color-border: #e0d8d0;
-              --font-body: system-ui, sans-serif;
-              --max-w: 860px;
+              --color-surface-warm: #fef9f4;
+              --color-text: #2a2118;
+              --color-muted: #7a6d62;
+              --color-accent: #b5331a;
+              --color-accent-hover: #8f2815;
+              --color-accent-soft: #fdf0ed;
+              --color-border: #e8ddd4;
+              --color-badge-free: #2d7a4a;
+              --color-badge-free-bg: #e6f4ec;
+              --font-body: Georgia, "Times New Roman", serif;
+              --font-ui: system-ui, -apple-system, sans-serif;
+              --max-w: 900px;
+              --radius: 10px;
             }
             body {
               font-family: var(--font-body);
               background: var(--color-bg);
               color: var(--color-text);
-              line-height: 1.65;
+              line-height: 1.7;
+              font-size: 1rem;
             }
             a { color: var(--color-accent); text-decoration: none; }
-            a:hover { text-decoration: underline; }
+            a:hover { text-decoration: underline; color: var(--color-accent-hover); }
             img { max-width: 100%; height: auto; display: block; }
+            p { margin-bottom: .75rem; }
 
             /* ── Header ── */
             .site-header {
               background: var(--color-surface);
-              border-bottom: 1px solid var(--color-border);
-              padding: .75rem 1rem;
+              border-bottom: 2px solid var(--color-border);
+              padding: 0 1rem;
               display: flex;
-              flex-wrap: wrap;
-              align-items: center;
-              gap: .5rem 1.5rem;
+              align-items: stretch;
+              gap: 0;
+              min-height: 56px;
             }
             .site-logo {
+              font-family: var(--font-body);
               font-weight: 700;
-              font-size: 1.1rem;
+              font-size: 1.15rem;
               color: var(--color-text);
               white-space: nowrap;
-            }
-            .site-nav { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
-            .site-nav-link {
-              font-size: .9rem;
-              color: var(--color-muted);
-              padding: .2rem .4rem;
-              border-radius: 4px;
-            }
-            .site-nav-link:hover, .site-nav-link[aria-current="page"] {
-              color: var(--color-accent);
-              background: #fef0ee;
+              display: flex;
+              align-items: center;
+              padding-right: 1.5rem;
+              border-right: 1px solid var(--color-border);
               text-decoration: none;
+              flex-shrink: 0;
+            }
+            .site-logo:hover { color: var(--color-accent); text-decoration: none; }
+            .site-nav {
+              display: flex;
+              align-items: center;
+              gap: 0;
+              overflow-x: auto;
+              -webkit-overflow-scrolling: touch;
+              scrollbar-width: none;
+              padding-left: .5rem;
+            }
+            .site-nav::-webkit-scrollbar { display: none; }
+            .site-nav-link {
+              font-family: var(--font-ui);
+              font-size: .875rem;
+              color: var(--color-muted);
+              padding: .5rem .65rem;
+              border-radius: 6px;
+              white-space: nowrap;
+              transition: color .15s, background .15s;
+            }
+            .site-nav-link:hover { color: var(--color-accent); background: var(--color-accent-soft); text-decoration: none; }
+            .site-nav-link[aria-current="page"] {
+              color: var(--color-accent);
+              background: var(--color-accent-soft);
+              font-weight: 600;
             }
 
             /* ── Main ── */
             .site-main {
               max-width: var(--max-w);
-              margin: 2rem auto;
-              padding: 0 1rem 3rem;
+              margin: 2.5rem auto;
+              padding: 0 1rem 4rem;
             }
 
             /* ── Footer ── */
             .site-footer {
-              border-top: 1px solid var(--color-border);
-              padding: 1.5rem 1rem;
+              background: var(--color-surface);
+              border-top: 2px solid var(--color-border);
+              padding: 1.75rem 1rem;
               text-align: center;
+              font-family: var(--font-ui);
               font-size: .85rem;
               color: var(--color-muted);
             }
+            .site-footer-nav { margin-top: .6rem; display: flex; justify-content: center; gap: 1.25rem; }
+            .site-footer-link { color: var(--color-muted); font-size: .8rem; }
+            .site-footer-link:hover { color: var(--color-accent); }
 
             /* ── CMS blocks ── */
-            .cms-heading { margin: 1.5rem 0 .5rem; }
-            h1.cms-heading { font-size: 1.8rem; }
-            h2.cms-heading { font-size: 1.4rem; }
+            .cms-heading { margin: 2rem 0 .6rem; line-height: 1.3; }
+            h1.cms-heading { font-size: 2rem; margin-top: 0; }
+            h2.cms-heading { font-size: 1.5rem; }
+            h3.cms-heading { font-size: 1.2rem; }
             .cms-richtext { margin: 1rem 0; }
             .cms-richtext p { margin-bottom: .75rem; }
             .cms-richtext ul, .cms-richtext ol { margin: .5rem 0 .75rem 1.5rem; }
-            .cms-richtext li { margin-bottom: .3rem; }
-            .cms-image { margin: 1.5rem 0; }
-            .cms-image img { border-radius: 6px; }
+            .cms-richtext li { margin-bottom: .35rem; }
+            .cms-richtext hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }
+            .cms-image { margin: 1.75rem 0; }
+            .cms-image img { border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
             .cms-gallery {
               display: grid;
-              grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+              grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
               gap: .75rem;
-              margin: 1.5rem 0;
+              margin: 1.75rem 0;
             }
-            .cms-gallery-item img { border-radius: 4px; aspect-ratio: 1; object-fit: cover; }
+            .cms-gallery-item img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
             .cms-contact {
               font-style: normal;
+              font-family: var(--font-ui);
               display: flex;
               flex-direction: column;
-              gap: .4rem;
-              margin: 1rem 0;
+              gap: .5rem;
+              margin: 1.25rem 0;
+              background: var(--color-surface-warm);
+              border: 1px solid var(--color-border);
+              border-radius: var(--radius);
+              padding: 1.25rem;
             }
-            .cms-contact-row { display: flex; gap: .5rem; align-items: flex-start; }
+            .cms-contact-row { display: flex; gap: .6rem; align-items: flex-start; }
 
-            /* ── Abgabetiere ── */
-            .cms-abgabe { margin: 1rem 0; }
-            .cms-abgabe-intro { margin-bottom: 1.25rem; font-size: 1.05rem; }
+            /* ── Abgabetiere — group cards ── */
+            .cms-abgabe { margin: 1.25rem 0; }
+            .cms-abgabe-intro { margin-bottom: 1.5rem; font-size: 1.05rem; }
             .cms-abgabe-empty { color: var(--color-muted); font-style: italic; }
-            .cms-animal-grid {
-              display: grid;
-              grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-              gap: 1.25rem;
-            }
-            .cms-animal-card {
+
+            .cms-group-list { display: flex; flex-direction: column; gap: 2rem; }
+
+            .cms-group-card {
               background: var(--color-surface);
               border: 1px solid var(--color-border);
-              border-radius: 8px;
+              border-radius: var(--radius);
               overflow: hidden;
+              box-shadow: 0 2px 6px rgba(0,0,0,.06);
+            }
+            .cms-group-header {
+              padding: 1rem 1.25rem .75rem;
+              display: flex;
+              flex-wrap: wrap;
+              align-items: center;
+              gap: .5rem .75rem;
+              border-bottom: 1px solid var(--color-border);
+              background: var(--color-surface-warm);
+            }
+            .cms-group-name {
+              font-family: var(--font-body);
+              font-size: 1.2rem;
+              font-weight: 700;
+              color: var(--color-text);
+            }
+            .cms-group-meta {
+              font-family: var(--font-ui);
+              font-size: .875rem;
+              color: var(--color-muted);
+              display: flex;
+              align-items: center;
+              gap: .5rem;
             }
-            .cms-animal-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
-            .cms-animal-info { padding: .875rem; }
-            .cms-animal-name { font-size: 1.1rem; font-weight: 600; margin-bottom: .25rem; }
-            .cms-animal-farbe { font-size: .9rem; color: var(--color-muted); margin-bottom: .25rem; }
-            .cms-animal-group { font-size: .85rem; color: var(--color-muted); }
-            .cms-animal-text { font-size: .9rem; margin-top: .5rem; }
 
-            @media (max-width: 480px) {
-              h1.cms-heading { font-size: 1.4rem; }
-              .cms-animal-grid { grid-template-columns: 1fr; }
+            /* availability badge */
+            .cms-badge {
+              display: inline-block;
+              font-size: .75rem;
+              font-weight: 600;
+              font-family: var(--font-ui);
+              padding: .2rem .55rem;
+              border-radius: 20px;
+              letter-spacing: .02em;
+              text-transform: uppercase;
+            }
+            .cms-badge--free {
+              background: var(--color-badge-free-bg);
+              color: var(--color-badge-free);
+            }
+
+            /* group photo strip */
+            .cms-group-gallery {
+              display: flex;
+              gap: .375rem;
+              overflow-x: auto;
+              -webkit-overflow-scrolling: touch;
+              scrollbar-width: none;
+              padding: .75rem 1.25rem;
+              background: #f5ede4;
+            }
+            .cms-group-gallery::-webkit-scrollbar { display: none; }
+            .cms-group-photo {
+              width: 140px;
+              height: 140px;
+              object-fit: cover;
+              border-radius: 6px;
+              flex-shrink: 0;
+            }
+
+            /* animal detail list */
+            .cms-animal-list {
+              list-style: none;
+              padding: .75rem 1.25rem 1.25rem;
+              display: flex;
+              flex-direction: column;
+              gap: .875rem;
+            }
+            .cms-animal-row {
+              display: flex;
+              flex-direction: column;
+              gap: .15rem;
+              padding-bottom: .875rem;
+              border-bottom: 1px solid var(--color-border);
+            }
+            .cms-animal-row:last-child { border-bottom: none; padding-bottom: 0; }
+            .cms-animal-name {
+              font-family: var(--font-body);
+              font-size: 1.05rem;
+              font-weight: 700;
+              color: var(--color-text);
+            }
+            .cms-animal-detail {
+              font-family: var(--font-ui);
+              font-size: .875rem;
+              color: var(--color-muted);
+            }
+            .cms-animal-note {
+              font-style: italic;
+              font-size: .925rem;
+              color: var(--color-text);
+              margin-top: .1rem;
+            }
+
+            /* ── Responsive ── */
+            @media (max-width: 600px) {
+              .site-header { padding: 0 .75rem; min-height: 50px; }
+              .site-logo { font-size: 1rem; padding-right: 1rem; }
+              h1.cms-heading { font-size: 1.5rem; }
+              .site-main { margin-top: 1.5rem; }
+              .cms-group-photo { width: 110px; height: 110px; }
+            }
+            @media (min-width: 700px) {
+              .cms-animal-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
+              .cms-animal-row { border-bottom: none; padding-bottom: 0; border: 1px solid var(--color-border); border-radius: 8px; padding: .75rem; }
             }
             """;
 

GerbilManagerWebAPI/Cms/SiteSnapshotService.cs

@@ -82,6 +82,9 @@ namespace GerbilManagerWebAPI.Cms
                 {
                     g.Id,
                     g.Name,
+                    g.Gender,
+                    g.DateOfBirth,
+                    g.CharacterNote,
                     Farbschlag = g.ColorVariety != null ? g.ColorVariety.Name : null,
                     // group = Becken (enclosure) name — matches how the Abgabe composer
                     // groups ForSale animals by enclosure-mates (god ruling). null = single.
@@ -109,6 +112,9 @@ namespace GerbilManagerWebAPI.Cms
                 arr.Add(new JsonObject
                 {
                     ["name"] = a.Name,
+                    ["gender"] = a.Gender.ToString(),
+                    ["dateOfBirth"] = a.DateOfBirth?.ToString("yyyy-MM-dd"),
+                    ["characterNote"] = a.CharacterNote,
                     ["farbschlag"] = a.Farbschlag,
                     ["group"] = a.Group,
                     ["photos"] = photoArr,

GerbilManagerWebAPI/Migrations/20260606131032_AddImpressumDatenschutzPages.cs

@@ -0,0 +1,71 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+#pragma warning disable CA1814 // Prefer jagged arrays over multidimensional
+
+namespace GerbilManagerWebAPI.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddImpressumDatenschutzPages : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.InsertData(
+                table: "Pages",
+                columns: new[] { "Id", "SeoDescription", "Slug", "Status", "Title" },
+                values: new object[,]
+                {
+                    { new Guid("51720001-0000-0000-0000-000000000007"), null, "impressum", "Published", "Impressum" },
+                    { new Guid("51720001-0000-0000-0000-000000000008"), null, "datenschutz", "Published", "Datenschutz" }
+                });
+
+            migrationBuilder.InsertData(
+                table: "Blocks",
+                columns: new[] { "Id", "Data", "Order", "PageId", "Type" },
+                values: new object[,]
+                {
+                    { new Guid("51720002-0000-0000-0000-000000000007"), "{\"text\":\"Impressum\",\"level\":1}", 0, new Guid("51720001-0000-0000-0000-000000000007"), "Heading" },
+                    { new Guid("51720002-0000-0000-0000-000000000008"), "{\"text\":\"Datenschutz\",\"level\":1}", 0, new Guid("51720001-0000-0000-0000-000000000008"), "Heading" },
+                    { new Guid("51720002-0000-0000-0000-000000000070"), "{\"markdown\":\"**Angaben gemäß § 5 TMG**\\n\\nSeitenbetreiber: [Name und vollständige Adresse eintragen]\\n\\nE-Mail: [E-Mail-Adresse eintragen]\\n\\n---\\n\\n*Diese Seite wird vom Seitenbetreiber noch vervollständigt.*\"}", 1, new Guid("51720001-0000-0000-0000-000000000007"), "RichText" },
+                    { new Guid("51720002-0000-0000-0000-000000000080"), "{\"markdown\":\"**Datenschutzerklärung**\\n\\nDiese Webseite dient der Vorstellung unserer Rennmauszucht. Es werden keine personenbezogenen Daten gespeichert oder weitergegeben.\\n\\nBei datenschutzbezogenen Fragen: [E-Mail-Adresse eintragen]\\n\\n---\\n\\n*Diese Seite wird vom Seitenbetreiber noch vervollständigt.*\"}", 1, new Guid("51720001-0000-0000-0000-000000000008"), "RichText" }
+                });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DeleteData(
+                table: "Blocks",
+                keyColumn: "Id",
+                keyValue: new Guid("51720002-0000-0000-0000-000000000007"));
+
+            migrationBuilder.DeleteData(
+                table: "Blocks",
+                keyColumn: "Id",
+                keyValue: new Guid("51720002-0000-0000-0000-000000000008"));
+
+            migrationBuilder.DeleteData(
+                table: "Blocks",
+                keyColumn: "Id",
+                keyValue: new Guid("51720002-0000-0000-0000-000000000070"));
+
+            migrationBuilder.DeleteData(
+                table: "Blocks",
+                keyColumn: "Id",
+                keyValue: new Guid("51720002-0000-0000-0000-000000000080"));
+
+            migrationBuilder.DeleteData(
+                table: "Pages",
+                keyColumn: "Id",
+                keyValue: new Guid("51720001-0000-0000-0000-000000000007"));
+
+            migrationBuilder.DeleteData(
+                table: "Pages",
+                keyColumn: "Id",
+                keyValue: new Guid("51720001-0000-0000-0000-000000000008"));
+        }
+    }
+}

GerbilManagerWebAPI/Migrations/ApplicationContextModelSnapshot.cs

@@ -103,6 +103,38 @@ namespace GerbilManagerWebAPI.Migrations
                             Order = 1,
                             PageId = new Guid("51720001-0000-0000-0000-000000000003"),
                             Type = "AbgabetiereList"
+                        },
+                        new
+                        {
+                            Id = new Guid("51720002-0000-0000-0000-000000000007"),
+                            Data = "{\"text\":\"Impressum\",\"level\":1}",
+                            Order = 0,
+                            PageId = new Guid("51720001-0000-0000-0000-000000000007"),
+                            Type = "Heading"
+                        },
+                        new
+                        {
+                            Id = new Guid("51720002-0000-0000-0000-000000000070"),
+                            Data = "{\"markdown\":\"**Angaben gemäß § 5 TMG**\\n\\nSeitenbetreiber: [Name und vollständige Adresse eintragen]\\n\\nE-Mail: [E-Mail-Adresse eintragen]\\n\\n---\\n\\n*Diese Seite wird vom Seitenbetreiber noch vervollständigt.*\"}",
+                            Order = 1,
+                            PageId = new Guid("51720001-0000-0000-0000-000000000007"),
+                            Type = "RichText"
+                        },
+                        new
+                        {
+                            Id = new Guid("51720002-0000-0000-0000-000000000008"),
+                            Data = "{\"text\":\"Datenschutz\",\"level\":1}",
+                            Order = 0,
+                            PageId = new Guid("51720001-0000-0000-0000-000000000008"),
+                            Type = "Heading"
+                        },
+                        new
+                        {
+                            Id = new Guid("51720002-0000-0000-0000-000000000080"),
+                            Data = "{\"markdown\":\"**Datenschutzerklärung**\\n\\nDiese Webseite dient der Vorstellung unserer Rennmauszucht. Es werden keine personenbezogenen Daten gespeichert oder weitergegeben.\\n\\nBei datenschutzbezogenen Fragen: [E-Mail-Adresse eintragen]\\n\\n---\\n\\n*Diese Seite wird vom Seitenbetreiber noch vervollständigt.*\"}",
+                            Order = 1,
+                            PageId = new Guid("51720001-0000-0000-0000-000000000008"),
+                            Type = "RichText"
                         });
                 });
 
@@ -1024,6 +1056,20 @@ namespace GerbilManagerWebAPI.Migrations
                             Slug = "kontakt",
                             Status = "Published",
                             Title = "Kontakt"
+                        },
+                        new
+                        {
+                            Id = new Guid("51720001-0000-0000-0000-000000000007"),
+                            Slug = "impressum",
+                            Status = "Published",
+                            Title = "Impressum"
+                        },
+                        new
+                        {
+                            Id = new Guid("51720001-0000-0000-0000-000000000008"),
+                            Slug = "datenschutz",
+                            Status = "Published",
+                            Title = "Datenschutz"
                         });
                 });
 

HUMANQUESTION.md

@@ -10,9 +10,9 @@
 _Stand: 2026-06-06._
 
 Der Manager ist fertig und läuft. Die alten Daten sind importiert
-(**723 Würfe + 247 Tiere + 99 Fotos** sind drin). Mehrere KI-Funktionen sind
-**fertig gebaut, schlafen aber**, bis ein Gemini-Schlüssel hinterlegt ist.
-Jede offene Frage unten zeigt, **was dadurch blockiert ist**.
+(**865 Würfe + 325 Tiere + 138 Fotos** sind drin, Stand Re-Import #2.5). Mehrere
+KI-Funktionen sind **fertig gebaut, schlafen aber**, bis ein Gemini-Schlüssel
+hinterlegt ist. Jede offene Frage unten zeigt, **was dadurch blockiert ist**.
 
 ---
 
@@ -24,7 +24,7 @@ Jede offene Frage unten zeigt, **was dadurch blockiert ist**.
 | A2 | **Abrechnung aktivieren? (EU/Deutschland)** Die Gemini-AGB verlangen für EU-Nutzer die **bezahlte Stufe** — bei eurem Volumen **praktisch 0 €**, aber eure Daten werden dann **nicht** zum Training genutzt. Empfehlung: **Abrechnung einschalten** (bleibt fast gratis). Alternative für volle Privatsphäre: lokales Modell (Ollama). | Datenschutz (v. a. E-Mail-Inhalte) + AGB-konform | dieselben KI-Funktionen wie A1 |
 | A3 | **Gmail App-Passwort.** Einmalig: Google-Konto → 2-Faktor-Bestätigung aktivieren → „App-Passwörter" → eines für „GerbilManager" erstellen → 16-stelligen Code an Michael. | Posteingang verbinden (Anfragen abrufen + Antworten senden) | E-Mail-Posteingang (live) |
 | A4 | **Domain-Name** (ist registriert ✔) + **Cloudflare-Konto & API-Token** (Berechtigung „Cloudflare Pages → Edit"). | Öffentliche Webseite auf Cloudflare veröffentlichen | Veröffentlichung der neuen Webseite (Ersatz für Jimdo) |
-| A5 | **TrueNAS / Gitea — 4 Antworten:** (a) TrueNAS SCALE-Version? (Electric Eel 24.10+?) (b) Gitea Actions aktiviert/aktivierbar? (c) Eigener Postgres-Container (empfohlen) oder bestehender NAS-Postgres? (d) Welcher Dataset-Pfad für Daten/Backups, und ist Port 80 frei? | Manager auf dem NAS betreiben (Produktiv + Backups + CI) | NAS-Deployment (compose + CI sind fertig vorbereitet) |
+| A5 | **TrueNAS / Gitea — Restfragen:** ~~(b) Gitea Actions?~~ ✅ **AKTIV seit 06.06. — CI läuft bereits** (Runner registriert, Backend+Frontend-Tests grün auf dem Runner). **NEU (b2): Docker-Push-Job braucht 2 Repo-Secrets** — in Gitea → Repo → Einstellungen → Actions → Secrets bitte `REGISTRY_USER` (dein Gitea-Login) und `REGISTRY_TOKEN` (Token mit `write:package`) anlegen, dann pusht die CI fertige Images in die Registry. Offen bleiben: (a) TrueNAS SCALE-Version? (c) Eigener Postgres-Container (empfohlen) oder bestehender NAS-Postgres? (d) Dataset-Pfad für Daten/Backups, Port 80 frei? | Manager auf dem NAS betreiben (Produktiv + Backups + CI) | NAS-Deployment (compose fertig; CI ✅ live) |
 
 ## B. Für Julian — kleine Aktionen (jederzeit)
 
@@ -61,7 +61,7 @@ gelisteten Konflikt-Tiere + Tiere mit Sonder-Kürzeln warten in Quarantäne —
 
 ## D. Die 32 Konflikt-Tiere (gleicher Name + Datum, aber widersprüchliche Angaben in mehreren Dateien)
 
-> ✅ **STAND nach Re-Import #2 (06.06.2026):** Alle bisher beantworteten Konflikte sind **live geladen** (+13 Tiere, +31 Würfe, +9 Fotos — u. a. Victoria Welby: **„C" hat jetzt beide Eltern** ✔). Von 32 sind noch **8 in Quarantäne**; 3 davon (Enya, Ella, Zac) löst der Importer demnächst automatisch („genauer gewinnt": `CC` schlägt `C-` — gleiche Logik wie die Beibehalten-Regel). **Wirklich offen: nur die 5 Tiere in D6 unten.**
+> ✅ **STAND nach Re-Import #2.5 (06.06.2026):** Alle bisher beantworteten Konflikte sind **live geladen** (u. a. Victoria Welby: **„C" hat jetzt beide Eltern** ✔). Enya, Ella und Zac wurden inzwischen ebenfalls **automatisch geladen** („genauer gewinnt"-Regel: `CC` schlägt `C-`) → jetzt **325 Tiere** drin, 161 Eltern-Links nachgetragen. **Wirklich offen sind nur noch die 5 Tiere in D6 unten.**
 
 Bitte je Tier kurz sagen, **welche Angabe stimmt**. Gruppiert nach Konflikt-Art.
 Alle Details (sämtliche Genotyp-Varianten + Quelldateien): `tools/import/output/review-report.md`.
@@ -159,7 +159,7 @@ sagen, was ergänzt oder gestrichen werden soll:**
 | Öffentliche Webseite live | in Arbeit | **A4** (Domain + Cloudflare) |
 | E-Mail-Posteingang (Anfragen) | in Arbeit | **A3** (App-Passwort) + **A1/A2** für Entwürfe |
 | NAS-Deployment / Produktiv | fertig vorbereitet | **A5** |
-| Restliche importierte Tiere (Konflikte) | nur noch 8 in Quarantäne (Re-Import #2 ✅) | **D6** (5 Entscheidungen; Enya/Ella/Zac lädt Michael automatisch nach) |
+| Restliche importierte Tiere (Konflikte) | nur noch 5 in Quarantäne (Re-Import #2.5 ✅, Enya/Ella/Zac geladen) | **D6** (5 Entscheidungen) |
 | Handy-Zugriff im WLAN | App läuft | **B2** (Firewall) |
 
 ---

gerbil-manager-web/e2e/fixtures.ts

@@ -55,7 +55,7 @@ export function skipUnlessLive() {
  * Kontakte und Statistik hinter dem „Mehr“-Blatt.
  */
 export async function gotoSection(page: Page, label: string) {
-  const nav = page.getByRole('navigation')
+  const nav = page.getByRole('navigation', { name: de.nav.mainNavigation })
   // App noch nicht geladen (about:blank) -> erst zur Startseite
   if (!(await nav.isVisible())) {
     await page.goto('/')

gerbil-manager-web/e2e/genotype-table.spec.ts

@@ -0,0 +1,54 @@
+/**
+ * UX-MOBILE-2: Genotyp-Tabellen-Overflow — die Tabelle scrollt horizontal,
+ * die Seite selbst bleibt NICHT breiter als der Viewport (kein horizontaler
+ * Page-Overflow auf 390px).
+ */
+import { de, expect, skipUnlessMock, test } from './fixtures'
+
+const tl = de.pages.litters
+
+test('Phone: Genotyp-Detail-Tabelle scrollt im eigenen Wrapper, kein Page-Overflow', async ({
+  page,
+}, testInfo) => {
+  skipUnlessMock()
+  if (testInfo.project.name !== 'phone') return
+
+  // Wurf w-kruemel hat beide Eltern mit Genotypen → BreedingResultView rendert.
+  await page.goto('/wuerfe/w-kruemel')
+  await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
+  await expect(page.getByText(tl.detail.expectedColors).first()).toBeVisible()
+
+  // Genotyp-Detail-Tabelle ausklappen.
+  await page.getByRole('button', { name: de.pages.genetik.showGenotypes }).click()
+
+  // Scroll-Wrapper und Tabelle müssen vorhanden und sichtbar sein.
+  const wrapper = page.locator('.genotype-table-scroll').first()
+  await expect(wrapper).toBeVisible()
+  await expect(wrapper.locator('.genotype-table')).toBeVisible()
+
+  // Wrapper ist selbst scrollbar (Tabelle breiter als der sichtbare Bereich).
+  const wrapperScrollable = await wrapper.evaluate(
+    (el) => el.scrollWidth > el.clientWidth,
+  )
+  expect(wrapperScrollable).toBe(true)
+
+  // Die Seite selbst darf NICHT breiter als der Viewport sein.
+  const pageOverflow = await page.evaluate(
+    () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
+  )
+  expect(pageOverflow).toBe(false)
+})
+
+test('Desktop: Genotyp-Detail-Tabelle zeigt Wrapper auch auf breitem Viewport', async ({
+  page,
+}, testInfo) => {
+  skipUnlessMock()
+  if (testInfo.project.name !== 'desktop') return
+
+  await page.goto('/wuerfe/w-kruemel')
+  await expect(page.getByText(tl.detail.expectedColors).first()).toBeVisible()
+  await page.getByRole('button', { name: de.pages.genetik.showGenotypes }).click()
+
+  await expect(page.locator('.genotype-table-scroll').first()).toBeVisible()
+  await expect(page.locator('.genotype-table').first()).toBeVisible()
+})

gerbil-manager-web/e2e/live-data.spec.ts

@@ -0,0 +1,302 @@
+/**
+ * QA-LIVE-DATA: Tiefe Begehung mit echten Import-Daten (325 Tiere, 865 Würfe, 138 Fotos).
+ * Läuft ausschließlich im LIVE-Modus (E2E_BASE_URL gesetzt).
+ *
+ * Bekannte Datengrundlage (Stand Re-Import #2.5):
+ * - Vance von den Kleinen Chaoten   id=afdaff89-0274-4778-8f2f-3957a81bf58e (Resident, Stammbaum)
+ * - Girasol of Topolino             id=bf20f105-2ea9-475f-89b7-d50e59fb7d3b (9 Fotos)
+ * - Litter 2026-02-10               id=a1db02cf-48ff-4f3a-8eab-33f2360c27f0 (beide Eltern gesetzt)
+ * - 204 Residents, 121 Externe, 15 namenlose Einträge
+ */
+import { de, expect, gotoSection, openFilterPanel, skipUnlessLive, test } from './fixtures'
+
+const t = de.pages.gerbils
+const tl = de.pages.litters
+const td = t.detail
+
+// ── 1. RENNMÄUSE-LISTE ───────────────────────────────────────────────────────
+
+test('Live-Data: Tiere-Liste lädt 325 Einträge (Bestand-Default-Filter inklusive externe)', async ({
+  page,
+}) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.gerbils)
+  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
+  const rows = page.locator('.gerbil-row')
+  await expect(rows.first()).toBeVisible()
+  const count = await rows.count()
+  // Alle 325 oder zumindest Paginierung der ersten Seite (>=20)
+  expect(count).toBeGreaterThanOrEqual(20)
+  // Count-Label sichtbar ("204 Tiere" für Bestand-Default-Filter oder "325 Tiere")
+  await expect(page.locator('p.muted').filter({ hasText: t.countLabel })).toBeVisible()
+})
+
+test('Live-Data: Bestand-Filter sichtbar + umschaltbar (Resident vs. Alle)', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.gerbils)
+  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
+  await openFilterPanel(page)
+  // Filter-Panel oder mindestens der "Nur Bestand"-Toggle ist sichtbar
+  const filterSection = page.locator('.filter-panel, [aria-label*="Filter"], .filter-panel__content')
+  await expect(filterSection.first()).toBeVisible({ timeout: 5_000 })
+})
+
+test('Live-Data: Suche nach "Vance" findet mindestens einen Treffer', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.gerbils)
+  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
+  await page.getByPlaceholder(t.searchPlaceholder).first().fill('Vance')
+  const rows = page.locator('.gerbil-row')
+  await expect(rows.first()).toBeVisible({ timeout: 10_000 })
+  expect(await rows.count()).toBeGreaterThanOrEqual(1)
+  // Name "Vance" soll in einem Ergebnis auftauchen
+  await expect(page.locator('.gerbil-row').filter({ hasText: 'Vance' }).first()).toBeVisible()
+})
+
+test('Live-Data: Suche nach "von den" (Namensmuster) liefert Treffer', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.gerbils)
+  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
+  await page.getByPlaceholder(t.searchPlaceholder).first().fill('von den')
+  const rows = page.locator('.gerbil-row')
+  await expect(rows.first()).toBeVisible({ timeout: 10_000 })
+  expect(await rows.count()).toBeGreaterThanOrEqual(5)
+})
+
+test('Live-Data: Genotyp-Tabelle scrollt horizontal (kein Page-Overflow bei 390px)', async ({
+  page,
+}) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.gerbils)
+  await expect(page.locator('.gerbil-row').first()).toBeVisible()
+  // Kein horizontaler Scroll auf body/html
+  const bodyOverflow = await page.evaluate(() => {
+    const body = document.body
+    const html = document.documentElement
+    return {
+      bodyScrollWidth: body.scrollWidth,
+      htmlScrollWidth: html.scrollWidth,
+      viewportWidth: window.innerWidth,
+    }
+  })
+  expect(bodyOverflow.bodyScrollWidth).toBeLessThanOrEqual(bodyOverflow.viewportWidth + 2)
+  expect(bodyOverflow.htmlScrollWidth).toBeLessThanOrEqual(bodyOverflow.viewportWidth + 2)
+})
+
+// ── 2. TIER-DETAIL ────────────────────────────────────────────────────────────
+
+test('Live-Data: Girasol of Topolino Detail zeigt Fotos-Tab mit mindestens 9 Fotos', async ({
+  page,
+}) => {
+  skipUnlessLive()
+  await page.goto('/rennmaeuse/bf20f105-2ea9-475f-89b7-d50e59fb7d3b')
+  await expect(page.getByRole('heading', { name: 'Girasol of Topolino' })).toBeVisible()
+  // Fotos-Tab anklicken
+  await page.getByRole('tab', { name: td.tabs.photos }).click()
+  // Mindestens ein Foto-Img sichtbar (9 Fotos importiert)
+  const photos = page.locator('img.photo-thumb, img[src*="/photos/files/"], .photo-item img, .photo-list img')
+  await expect(photos.first()).toBeVisible({ timeout: 8_000 })
+  expect(await photos.count()).toBeGreaterThanOrEqual(1)
+})
+
+test('Live-Data: Vance von den Kleinen Chaoten Detail rendert korrekt', async ({ page }) => {
+  skipUnlessLive()
+  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e')
+  await expect(page.getByRole('heading', { name: 'Vance von den Kleinen Chaoten' })).toBeVisible()
+  // Gesundheits-Tab (leer OK, soll aber nicht crashen)
+  await page.getByRole('tab', { name: td.tabs.health }).click()
+  await expect(page).not.toHaveURL('/error')
+  // Gewicht-Tab
+  await page.getByRole('tab', { name: td.tabs.weight }).click()
+  await expect(page).not.toHaveURL('/error')
+})
+
+test('Live-Data: Stammbaum-Link von Tier-Detail navigiert zu StammbaumPage', async ({ page }) => {
+  skipUnlessLive()
+  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e')
+  await expect(page.getByRole('heading', { name: 'Vance von den Kleinen Chaoten' })).toBeVisible()
+  // Stammbaum-Link suchen
+  const stammbaumLink = page.getByRole('link', { name: /Stammbaum/i }).first()
+  if (await stammbaumLink.isVisible()) {
+    await stammbaumLink.click()
+    await expect(page).toHaveURL(/stammbaum/)
+  } else {
+    // Direkt navigieren
+    await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e/stammbaum')
+  }
+  // Stammbaum-SVG oder rd3t-Knoten sichtbar
+  await expect(page.locator('[data-testid="rd3t-svg"], svg.rd3t-svg, .stammbaum-page, svg').first()).toBeVisible({ timeout: 10_000 })
+})
+
+// ── 3. STAMMBAUM-SEITE ───────────────────────────────────────────────────────
+
+test('Live-Data: Stammbaum rendert ohne Page-Overflow (390px)', async ({ page }) => {
+  skipUnlessLive()
+  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e/stammbaum')
+  // Irgendein SVG-Element muss sichtbar sein
+  await expect(page.locator('svg').first()).toBeVisible({ timeout: 12_000 })
+  const overflow = await page.evaluate(() => ({
+    bodyScrollWidth: document.body.scrollWidth,
+    viewportWidth: window.innerWidth,
+  }))
+  expect(overflow.bodyScrollWidth).toBeLessThanOrEqual(overflow.viewportWidth + 2)
+})
+
+test('Live-Data: Stammbaum hat Druck-Button', async ({ page }) => {
+  skipUnlessLive()
+  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e/stammbaum')
+  await expect(page.locator('svg').first()).toBeVisible({ timeout: 12_000 })
+  const printBtn = page.locator('button, a').filter({ hasText: /Drucken|Print|Ahnentafel/i })
+  await expect(printBtn.first()).toBeVisible()
+})
+
+// ── 4. WÜRFE-LISTE ───────────────────────────────────────────────────────────
+
+test('Live-Data: Würfe-Liste zeigt mindestens 20 Einträge (865 Würfe importiert)', async ({
+  page,
+}) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.litters)
+  await expect(page.getByRole('heading', { name: tl.title, exact: true })).toBeVisible()
+  const rows = page.locator('.litter-row, .gerbil-card, li a').filter({ hasText: /Wurf/i })
+  await expect(rows.first()).toBeVisible()
+  expect(await rows.count()).toBeGreaterThanOrEqual(20)
+})
+
+test('Live-Data: Wurf-Detail mit beiden Eltern rendert "Elterntiere"', async ({ page }) => {
+  skipUnlessLive()
+  // Direkt zu einem Wurf mit beiden Eltern navigieren (2026-02-10)
+  await page.goto('/wuerfe/a1db02cf-48ff-4f3a-8eab-33f2360c27f0')
+  // Elterntiere-Section immer sichtbar
+  await expect(page.getByText(tl.detail.parents, { exact: true })).toBeVisible({ timeout: 8_000 })
+  // Vater-Link zu einem Tier
+  await expect(page.locator('a[href*="/rennmaeuse/"]').first()).toBeVisible({ timeout: 5_000 })
+})
+
+test('Live-Data: Wurf-Detail ohne Eltern rendert "Elterntiere" als "unbekannt"', async ({
+  page,
+}) => {
+  skipUnlessLive()
+  // Wurf A (2010-02-18) hat weder Vater noch Mutter
+  await page.goto('/wuerfe/34852596-2bd7-48ad-9175-4223d3d99229')
+  await expect(page.getByText(tl.detail.parents, { exact: true })).toBeVisible({ timeout: 8_000 })
+  // "unbekannt" Platzhalter soll sichtbar sein (kein Link)
+  await expect(page.getByText(tl.detail.unknownParent ?? 'unbekannt')).toBeVisible()
+})
+
+// ── 5. BECKEN / KONTAKTE (leere Zustände) ────────────────────────────────────
+
+test('Live-Data: Becken-Seite zeigt Leer-Zustand (keine Becken importiert)', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.enclosures)
+  await expect(page.getByRole('heading', { name: de.pages.becken.title, exact: true })).toBeVisible({ timeout: 8_000 })
+  // Leer-Meldung oder "Neues Becken"-Button
+  const emptyOrNew = page.locator('*').filter({ hasText: de.pages.becken.empty }).or(
+    page.getByRole('link', { name: de.pages.becken.newButton })
+  )
+  await expect(emptyOrNew.first()).toBeVisible()
+})
+
+test('Live-Data: Kontakte-Seite zeigt Leer-Zustand (keine Kontakte importiert)', async ({
+  page,
+}) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.contacts)
+  await expect(page.getByRole('heading', { name: de.pages.kontakte.title, exact: true })).toBeVisible({ timeout: 8_000 })
+  await expect(page.getByText(de.pages.kontakte.empty)).toBeVisible()
+})
+
+// ── 6. GENETIK / PROBEVERPAARUNG ─────────────────────────────────────────────
+
+test('Live-Data: Genetik-Seite lädt mit echten Genotypen', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.genetics)
+  await expect(page.getByRole('heading', { name: de.pages.genetik.title, exact: true })).toBeVisible({ timeout: 8_000 })
+  // Probeverpaarung-UI sichtbar
+  await expect(page.getByText(de.pages.genetik.subtitle)).toBeVisible()
+  // Tier-Auswahl Vater/Mutter sichtbar
+  await expect(page.locator('select, input[type="search"], [placeholder]').first()).toBeVisible()
+})
+
+// ── 7. STATISTIK ─────────────────────────────────────────────────────────────
+
+test('Live-Data: Statistik-Seite rendert Charts ohne Crash', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.statistics)
+  await expect(page.getByRole('heading', { name: de.pages.statistik.title, exact: true })).toBeVisible({ timeout: 8_000 })
+  // Mindestens ein Chart-Canvas oder SVG (865 Würfe = Charts vorhanden)
+  const chart = page.locator('canvas, svg.bar-chart, svg.line-chart, .chart-wrapper, .bar-chart, .line-chart')
+  await expect(chart.first()).toBeVisible({ timeout: 12_000 })
+})
+
+// ── 8. EINSTELLUNGEN ─────────────────────────────────────────────────────────
+
+test('Live-Data: Einstellungen-Seite lädt Züchterprofil', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.settings)
+  await expect(page.getByRole('heading', { name: de.pages.einstellungen.title, exact: true })).toBeVisible({ timeout: 8_000 })
+  await expect(page.getByText(de.pages.einstellungen.zuchtprofil.title)).toBeVisible()
+})
+
+// ── 9. WEBSEITE (CMS) ────────────────────────────────────────────────────────
+
+test('Live-Data: Webseite-Seite lädt ohne Crash', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.website)
+  await expect(page.getByRole('heading', { name: de.pages.webseite.title, exact: true })).toBeVisible({ timeout: 8_000 })
+  // Seitenliste mit Seeds vorhanden (8 Seiten aus dem Seed)
+  await expect(page.locator('.gerbil-card, li').first()).toBeVisible({ timeout: 5_000 })
+})
+
+// ── 10. ANFRAGEN ─────────────────────────────────────────────────────────────
+
+test('Live-Data: Anfragen-Seite zeigt Leer-Zustand (0 Anfragen)', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.requests)
+  await expect(page.getByRole('heading', { name: de.pages.anfragen.title, exact: true })).toBeVisible({ timeout: 8_000 })
+  // Leer-Text soll sichtbar sein (keine Anfragen live)
+  await expect(page.getByText(de.pages.anfragen.empty)).toBeVisible()
+})
+
+// ── 11. KONSOLEN-FEHLER-MONITOR ───────────────────────────────────────────────
+
+test('Live-Data: Keine unhandled-rejection-Fehler beim Durchlauf aller Hauptseiten', async ({
+  page,
+}) => {
+  skipUnlessLive()
+  const errors: string[] = []
+  page.on('pageerror', (err) => errors.push(err.message))
+  page.on('console', (msg) => {
+    if (msg.type() === 'error') errors.push(`[console.error] ${msg.text()}`)
+  })
+
+  // Navigiere direkt per URL statt gotoSection — gotoSection benutzt getByRole('navigation')
+  // welches bei Seiten mit Pager-Navigation (>1 Page) in strict-mode fehlschlägt (Infra-Bug).
+  for (const path of ['/', '/rennmaeuse', '/statistik', '/genetik', '/einstellungen']) {
+    await page.goto(path)
+    await page.waitForTimeout(800)
+  }
+  // Keine unkritischen Errors (ignoriere CORS-Warnungen, die im Dev-Modus normal sind)
+  const criticalErrors = errors.filter(
+    (e) =>
+      !e.includes('CORS') &&
+      !e.includes('favicon') &&
+      !e.includes('DevTools') &&
+      !e.includes('Warning:'),
+  )
+  expect(criticalErrors).toHaveLength(0)
+})
+
+// ── 12. DESKTOP-OVERFLOW-CHECK ───────────────────────────────────────────────
+// (dieses Projekt-File läuft in beiden Viewports dank playwright.config.ts)
+
+test('Live-Data: Rennmäuse-Liste kein horizontal Overflow (Desktop 1280px)', async ({ page }) => {
+  skipUnlessLive()
+  await gotoSection(page, de.nav.gerbils)
+  await expect(page.locator('.gerbil-row').first()).toBeVisible()
+  const overflow = await page.evaluate(() => ({
+    scrollWidth: document.documentElement.scrollWidth,
+    clientWidth: document.documentElement.clientWidth,
+  }))
+  expect(overflow.scrollWidth).toBeLessThanOrEqual(overflow.clientWidth + 2)
+})

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

@@ -40,18 +40,13 @@ test('Live: Wurf-Detail zeigt Elterntier-Links (mindestens Vater oder Mutter)',
   page,
 }) => {
   skipUnlessLive()
-  // Nach Re-Import #2 hat mindestens Gerbil C (Victoria) beide Eltern.
-  // Der Wurf-Detail ist die einfachste Ansicht, die Eltern-Links rendert.
-  await gotoSection(page, de.nav.litters)
-  await expect(page.getByRole('heading', { name: tl.title, exact: true })).toBeVisible()
+  // Direkt zu einem Wurf mit beiden Eltern navigieren (Re-Import #2.5, stabil).
+  // Wurf (aus Diagramm) 2026-02-10 — fatherId + motherId beide gesetzt.
+  // Kein nth()-Selektor mehr: bei 865 Würfen + Pager-Nav nicht deterministisch.
+  await page.goto('/wuerfe/a1db02cf-48ff-4f3a-8eab-33f2360c27f0')
 
-  // Mindestens 1 Wurf in der Liste; ersten öffnen.
-  const firstLink = page.getByRole('link').filter({ hasText: /.+/ }).nth(1)
-  await expect(firstLink).toBeVisible()
-  await firstLink.click()
-
-  // Detailseite: Elterntier-Abschnitt ist sichtbar
-  await expect(page.getByText(tl.detail.parents)).toBeVisible()
+  // Detailseite: Elterntier-Abschnitt immer sichtbar (kein bedingtes Rendering)
+  await expect(page.getByText(tl.detail.parents, { exact: true })).toBeVisible({ timeout: 8_000 })
   // Mindestens ein Link führt zu einem Tier — bei fehlendem Import fehlt dieser Link
   await expect(page.locator('a[href*="/rennmaeuse/"]').first()).toBeVisible({ timeout: 5_000 })
 })

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

@@ -98,6 +98,35 @@ test('Detailseite zeigt Stammdaten + Tab-Inhalte (Gesundheit/Gewicht/Fotos)', as
   await expect(page.getByText(/85\s*g/)).toBeVisible()
 })
 
+test('Detailseite: Wurf-Feld ist ein Link zur Wurf-Detailseite (WURF-LINK)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/kruemel')
+  // Krümel hat litterId 'w-kruemel' → Name 'Wurf K' → Link /wuerfe/w-kruemel
+  const litterLink = page.getByRole('link', { name: 'Wurf K' })
+  await expect(litterLink).toBeVisible()
+  await litterLink.click()
+  await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
+})
+
+test('Detailseite: Herkunft zeigt originBreeder als Text wenn kein Kontakt (WURF-LINK-Addendum)', async ({ page }) => {
+  skipUnlessMock()
+  // Fridolin hat originContactId=null + originBreeder='Zoohandlung Meier' → plain text, kein Link
+  await page.goto('/rennmaeuse/fridolin')
+  await expect(page.getByRole('heading', { name: 'Fridolin' })).toBeVisible()
+  await expect(page.getByText('Zoohandlung Meier')).toBeVisible()
+  // Kein Link mit diesem Namen — es ist reiner Text
+  await expect(page.getByRole('link', { name: 'Zoohandlung Meier' })).toBeHidden()
+})
+
+test('Detailseite: Herkunft zeigt Kontaktlink wenn originContactId gesetzt (WURF-LINK-Addendum)', async ({ page }) => {
+  skipUnlessMock()
+  // Krümel hat originContactId='con-meier' → Link /kontakte/con-meier (Priorität vor originBreeder)
+  await page.goto('/rennmaeuse/kruemel')
+  const originLink = page.getByRole('link', { name: 'Zoohandlung Meier' })
+  await expect(originLink).toBeVisible()
+  await expect(originLink).toHaveAttribute('href', '/kontakte/con-meier')
+})
+
 test('Tier bearbeiten — Notizen ändern', async ({ page }) => {
   skipUnlessMock()
   await page.goto('/rennmaeuse/kruemel/bearbeiten')

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

@@ -65,28 +65,30 @@ export default function BreedingResultView({ result, title }: BreedingResultView
           </button>
 
           {showGenotypes && (
-            <table className="genotype-table">
-              <thead>
-                <tr>
-                  <th>{t.genotypeLabel}</th>
-                  <th>{t.genotypePreview}</th>
-                  <th>{t.probability}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {result.offspring.map((o) => (
-                  <tr key={o.genotype}>
-                    <td>
-                      <code>{o.genotype}</code>
-                    </td>
-                    <td>{o.farbschlag}</td>
-                    <td>
-                      {o.probability.percent} <small>({o.probability.text})</small>
-                    </td>
+            <div className="genotype-table-scroll">
+              <table className="genotype-table">
+                <thead>
+                  <tr>
+                    <th>{t.genotypeLabel}</th>
+                    <th>{t.genotypePreview}</th>
+                    <th>{t.probability}</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {result.offspring.map((o) => (
+                    <tr key={o.genotype}>
+                      <td>
+                        <code>{o.genotype}</code>
+                      </td>
+                      <td>{o.farbschlag}</td>
+                      <td>
+                        {o.probability.percent} <small>({o.probability.text})</small>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           )}
         </>
       )}

gerbil-manager-web/src/index.css

@@ -77,6 +77,10 @@ a {
   padding: 1rem;
   max-width: 60rem;
   width: 100%;
+  /* UX-MOBILE-2: prevent any wide content (e.g. genotype table) from making
+     the page body scroll horizontally. The .genotype-table-scroll wrapper
+     provides the per-table horizontal scroll. */
+  overflow-x: hidden;
 }
 
 /* Tab-Leiste unten */
@@ -559,8 +563,14 @@ textarea {
   white-space: nowrap;
 }
 
+/* UX-MOBILE-2: scroll wrapper so genotype table scrolls horizontally on mobile
+   instead of overflowing the page. */
+.genotype-table-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 .genotype-table {
-  width: 100%;
   border-collapse: collapse;
   margin-top: 0.75rem;
   font-size: 0.9rem;
@@ -571,6 +581,7 @@ textarea {
   text-align: left;
   padding: 0.4rem 0.5rem;
   border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
 }
 
 .genotype-table code {

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

@@ -173,8 +173,22 @@ export default function GerbilDetailPage() {
           }
         />
         <Row label={t.fields.enclosure} value={lookup(enclosureName, g.enclosureId)} />
-        <Row label={t.fields.litter} value={lookup(litterName, g.litterId)} />
-        <Row label={t.fields.origin} value={lookup(contactName, g.originContactId)} />
+        <Row
+          label={t.fields.litter}
+          value={
+            g.litterId && litterName.has(g.litterId)
+              ? <Link to={`/wuerfe/${g.litterId}`}>{litterName.get(g.litterId)}</Link>
+              : lookup(litterName, g.litterId)
+          }
+        />
+        <Row
+          label={t.fields.origin}
+          value={
+            g.originContactId && contactName.has(g.originContactId)
+              ? <Link to={`/kontakte/${g.originContactId}`}>{contactName.get(g.originContactId)}</Link>
+              : (g.originBreeder || null)
+          }
+        />
         <Row label={t.fields.receiver} value={lookup(contactName, g.receiverContactId)} />
         <Row label={t.fields.notes} value={g.notes} />
       </dl>