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.

GerbilManagerWebAPI/ApplicationContext.cs

@@ -291,7 +291,7 @@ public class ApplicationContext : DbContext
         (string Name, string Genotype, int SortOrder)[] catalog =
         {
             // --- C-locus white / partial albino (IDs 1-3) ---
-            ("Pink Eyed White (PEW)", "AA chch DD EE GG pp spsp rere",  0),
+            ("REW",                   "AA chch DD EE GG pp spsp rere",  0),
             ("Hermelin",              "aa chch DD EE GG PP spsp rere",  1),
             ("Himalaya",              "AA chch DD EE GG PP spsp rere",  2),
             // --- Zobel / colourpoint dark (ID 4) ---

GerbilManagerWebAPI/Migrations/20260606231220_RenameREW.cs

@@ -0,0 +1,33 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace GerbilManagerWebAPI.Migrations
+{
+    /// <inheritdoc />
+    public partial class RenameREW : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.UpdateData(
+                table: "ColorVarieties",
+                keyColumn: "Id",
+                keyValue: new Guid("00000000-0000-0000-0000-000000000001"),
+                column: "Name",
+                value: "REW");
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.UpdateData(
+                table: "ColorVarieties",
+                keyColumn: "Id",
+                keyValue: new Guid("00000000-0000-0000-0000-000000000001"),
+                column: "Name",
+                value: "Pink Eyed White (PEW)");
+        }
+    }
+}

GerbilManagerWebAPI/Migrations/ApplicationContextModelSnapshot.cs

@@ -216,7 +216,7 @@ namespace GerbilManagerWebAPI.Migrations
                         {
                             Id = new Guid("00000000-0000-0000-0000-000000000001"),
                             CanonicalGenotype = "AA chch DD EE GG pp spsp rere",
-                            Name = "Pink Eyed White (PEW)",
+                            Name = "REW",
                             SortOrder = 0
                         },
                         new

HUMANQUESTION.md

@@ -50,28 +50,30 @@ Weitere Eigenschaften lassen sich jederzeit **additiv** ergänzen (1-Zeilen-Änd
 
 Durch die vielen neuen Stammbaum-Dateien sind **13 neue Konflikt-Tiere** aufgetaucht (**7 erledigt:** Kazumi/Filou/Sokrates/Osamu/Percy/Iwana/Eragon ✅ — **6 offen**) (gleicher Name+Datum, widersprüchliche Angaben in mehreren Diagrammen). Sie warten in Quarantäne — **nichts ist verloren**, sie laden automatisch nach, sobald du je Tier kurz sagst was stimmt. (Uw=G + „Vorhandensein gewinnt" sind schon angewendet; das hier ist der echte Rest.)
 
+_Quelldatei = die Stammbaum-Datei(en) in `C:\Users\gulum\dev\Sttammbäume\`, in denen das Tier vorkommt. **Mehrere Dateien = Ursache des Konflikts** (widersprüchliche Angaben in verschiedenen Diagrammen)._
+
 **A) Nur Sterbedatum offen** (Gencode einig — bei Osamu/Filou/Sunny zusätzlich „taub" beibehalten):
-| Tier | Sterbedatum — welches? |
+| Tier | Sterbedatum — welches? | Quelldatei(en) |
-|---|---|
+|---|---|---|
-| Isa of Golden Lights (*24.12.2014) | 21.07.2018 ↔ 21.10.2018 |
+| Isa of Golden Lights (*24.12.2014) | 21.07.2018 ↔ 21.10.2018 | Stammbaum von **Ella**.xlsx · von **Kalea**.xlsx |
-| Jack II v.d. K.C. (*14.02.2016) | 06.10.2019 ↔ 20.10.2019 |
+| Jack II v.d. K.C. (*14.02.2016) | 06.10.2019 ↔ 20.10.2019 | Stammbaum von **Kalea**.xlsx · von **Rainny**.xlsx · von **Ren**.xlsx |
-| ~~Osamu v.d. K.C. (*10.12.2015)~~ ✅ | **18.12.2020** (erledigt) |
+| ~~Osamu v.d. K.C. (*10.12.2015)~~ ✅ | **18.12.2020** (erledigt) | — |
-| ~~Filou v.d. K.C. (*24.11.2014)~~ ✅ | **31.08.2019** (erledigt) |
+| ~~Filou v.d. K.C. (*24.11.2014)~~ ✅ | **31.08.2019** (erledigt) | — |
-| Sunny von PZ Karl (*10.04.2014) | 30.04.2019 ↔ 05.05.2019 |
+| Sunny von PZ Karl (*10.04.2014) | 30.04.2019 ↔ 05.05.2019 | Stammbaum von **Vance**.xlsx · von **Yurikas und Pintos Sohn**.xlsx |
 
 **B) Gencode-Konflikt** (+ ggf. Sterbedatum):
-| Tier | Konflikt — was stimmt? |
+| Tier | Konflikt — was stimmt? | Quelldatei(en) |
-|---|---|
+|---|---|---|
-| Milon v.d. K.C. (*27.11.2014) | A-Locus: **Aa** ↔ **aa** |
+| Milon v.d. K.C. (*27.11.2014) | A-Locus: **Aa** ↔ **aa** | Stammbaum von **South Dakota**.xlsx · von **Tennessee**.xlsx |
-| ~~Percy of little runners (*16.12.2017)~~ ✅ | P-Locus **Pp** (erledigt) |
+| ~~Percy of little runners (*16.12.2017)~~ ✅ | P-Locus **Pp** (erledigt) | — |
-| ~~Iwana of little runners (*02.10.2018)~~ ✅ | P-Locus **Pp** (erledigt) |
+| ~~Iwana of little runners (*02.10.2018)~~ ✅ | P-Locus **Pp** (erledigt) | — |
-| ~~Sokrates v.d. K.C. (*14.12.2015)~~ ✅ | **D-** + Sterbedatum **20.05.2019** (erledigt) |
+| ~~Sokrates v.d. K.C. (*14.12.2015)~~ ✅ | **D-** + Sterbedatum **20.05.2019** (erledigt) | — |
-| ~~Eragon (Elieus, *18.05.2016)~~ ✅ | C **CC** (vollfarbig) + Name **„Elieus gen. Eragon"**. Korrekter Datensatz lädt bereits (CC); Colourpoint-Variante „Kleiner Warnowrenner …" bleibt als Dublette in Quarantäne — kein weiterer Schritt nötig. |
+| ~~Eragon (Elieus, *18.05.2016)~~ ✅ | C **CC** (vollfarbig) + Name **„Elieus gen. Eragon"**. Korrekter Datensatz lädt bereits (CC); Colourpoint-Variante „Kleiner Warnowrenner …" bleibt als Dublette in Quarantäne — kein weiterer Schritt nötig. | — |
-| Dakota of sweet little mouse (*30.01.2015) | A: **Aa**↔**aa** · P: **pp**↔**PP** · Sp: **Spsp**↔**spsp** |
+| Dakota of sweet little mouse (*30.01.2015) | A: **Aa**↔**aa** · P: **pp**↔**PP** · Sp: **Spsp**↔**spsp** | Stammbaum von **Jiminy of Black Forest**.xlsx · von **Yurikas und Pintos Sohn**.xlsx |
-| ~~Kazumi v.d. K.C. (*23.04.2013)~~ ✅ | **Aa Cc[chm] DD ee[f] GG PP Spsp** (erledigt) |
+| ~~Kazumi v.d. K.C. (*23.04.2013)~~ ✅ | **Aa Cc[chm] DD ee[f] GG PP Spsp** (erledigt) | — |
-| Max von Privat (*01.02.2013) | D: **D-**↔**DD** · P: **P-**↔**PP** · Sterbedatum (4 Varianten: 04.02.2016 / 04.03.2016 / 2014 / 30.12.2015) |
+| Max von Privat (*01.02.2013) | D: **D-**↔**DD** · P: **P-**↔**PP** · Sterbedatum (4 Varianten: 04.02.2016 / 04.03.2016 / 2014 / 30.12.2015) | Stammbaum von **Danako**.xlsx · von **Kalea**.xlsx · von **Vance**.xlsx · von **Wildfire und Vestras Kids**.xlsx · von **Yurikas und Pintos Sohn**.xlsx |
 
-*(Alle Gencode-Varianten + Quelldateien: `tools/import/output/review-report.md`.)*
+*(Alle Gencode-Varianten + Quelldateien-Details: `tools/import/output/review-report.md`.)*
 
 ---
 

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

@@ -110,3 +110,30 @@ 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()
+})

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

@@ -185,15 +185,11 @@ describe('Farbschlag catalog', () => {
   })
 
   it('frozen contract names round-trip to themselves (DB-key guard)', () => {
-    // The first 18 are the frozen ColorVariety keys — their representative
+    // The first 17 frozen ColorVariety keys — their representative genotype
-    // genotype MUST resolve back to their own name, never a later variety.
+    // MUST resolve back to their own name, never a later variety.
-    // GEN-4 exception: 'Pink Eyed White (PEW)' (ch/ch+pp) now computes 'REW'
+    // GEN-4c: 'REW' (formerly 'Pink Eyed White (PEW)') round-trips correctly:
-    // because the REW engine check (both C-alleles reduced + pp) fires first.
+    // chch+pp → REW engine check → 'REW' = entry.name.
-    // PEW stays in the catalog as a user-pickable import name; its computed
-    // farbschlag is intentionally 'REW' per Julian's extended rule.
-    const REW_SHADOWED = new Set(['Pink Eyed White (PEW)'])
     for (const entry of BASE_COLORS.slice(0, FROZEN_COUNT)) {
-      if (REW_SHADOWED.has(entry.name)) continue
       expect(genotypeToFarbschlag(representativeGenotype(entry))).toBe(entry.name)
     }
   })
@@ -224,7 +220,7 @@ describe('Farbschlag catalog', () => {
 
   it('CATALOG seed view mirrors the ColorVariety table shape', () => {
     expect(CATALOG).toHaveLength(CATALOG_SIZE)
-    expect(CATALOG[0]).toMatchObject({ name: 'Pink Eyed White (PEW)', sortOrder: 0 })
+    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.
     expect(new Set(CATALOG.map((c) => c.name)).size).toBe(CATALOG.length)
@@ -396,10 +392,10 @@ describe('GEN-3c: no Unbekannt when the E locus is known (family fallback)', ()
 
 describe('GEN-3d: dominance tiebreak for unknown loci', () => {
   it('unknown-C reads as full-colour, NOT a c^h/c^chm white', () => {
-    // 'aa C- DD EE GG PP' -> Schwarz (dominant C reading), never PEW/Hermelin/Himalaya.
+    // 'aa C- DD EE GG PP' -> Schwarz (dominant C reading), never REW/Hermelin/Himalaya.
     const name = genotypeToFarbschlag(fromDisplayString('aa C- DD EE GG PP spsp rere'))
     expect(name).toBe('Schwarz')
-    expect(['Pink Eyed White (PEW)', 'Hermelin', 'Himalaya']).not.toContain(name)
+    expect(['REW', 'Hermelin', 'Himalaya']).not.toContain(name)
   })
 
   it('unknown second marker allele defaults UNMARKED, not Schecke (marker-aware)', () => {
@@ -549,15 +545,16 @@ describe('GEN-4: Dilute prefix, REW, no-bare-Fuchs', () => {
   })
 
   it('REW: both C alleles reduced (no full C) + pp = REW — all three cases (Julian confirmed)', () => {
-    // hom cchm/cchm + pp
+    // hom cchm/cchm + pp — A/D/E/G-independent (REW-2: Julian: "egal ob AA oder aa")
-    expect(name('AA cchmcchm DD EE GG pp spsp rere')).toBe('REW')  // CP-Gold
+    expect(name('AA cchmcchm DD EE GG pp spsp rere')).toBe('REW')  // CP-Gold (A-)
+    expect(name('aa cchmcchm DD EE GG pp spsp rere')).toBe('REW')  // aa: REW-2 verification
     expect(name('AA cchmcchm DD ee GG pp spsp rere')).toBe('REW')  // CP-Goldfuchs
     expect(name('AA cchmcchm DD EE gg pp spsp rere')).toBe('REW')  // CP-Elfenbein
     expect(name('AA cchmcchm DD ee gg pp spsp rere')).toBe('REW')  // CP-Apricot
     expect(name('AA cchmcchm dd EE GG pp spsp rere')).toBe('REW')  // CP-dd Gold
     // het cchm/ch + pp (Julian: also REW)
     expect(name('AA cchmch DD EE GG pp spsp rere')).toBe('REW')
-    // ch/ch + pp (Julian: also REW — subsumes PEW)
+    // ch/ch + pp (Julian: also REW; PEW renamed to REW in catalog per GEN-4c)
     expect(name('AA chch DD EE GG pp spsp rere')).toBe('REW')
     expect(name('aa chch DD EE GG pp spsp rere')).toBe('REW')
     // Counterproof: full C present → NOT REW (residual pigment)

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

@@ -51,7 +51,7 @@ export const BASE_COLORS: readonly FarbschlagEntry[] = [
   // GEN-3a: 'Schwarzschimmel' REMOVED (breeder C5: no such variety; efef base is
   // Orangeschimmel — see the GEN-2 block below). This was an authorized exception
   // to the frozen-name rule; the ColorVariety seed drops it too.
-  { name: 'Pink Eyed White (PEW)', english: 'Pink Eyed White', tokens: { C: 'ch', P: 'p' }, image: 'rotaugen-weiss-pew-d-sep-e-sep.jpg' },
+  { name: 'REW', english: 'Pink Eyed White', tokens: { C: 'ch', P: 'p' }, image: 'rotaugen-weiss-pew-d-sep-e-sep.jpg' },
   { name: 'Hermelin', english: 'Dark Tailed White', tokens: { A: 'a', C: 'ch', D: 'D', P: 'P' }, image: 'hermelin.jpeg' },
   { name: 'Himalaya', english: 'Himalayan', tokens: { A: 'A', C: 'ch', D: 'D', P: 'P' }, image: 'himalaya.jpg' },
   { name: 'Zobel', english: 'Sable', tokens: { A: 'a', C: 'cchm', D: 'D', E: 'E', G: 'g', P: 'P' }, image: 'zobel.jpeg' },
@@ -268,7 +268,7 @@ export function farbschlagFor(g: Genotype): FarbschlagMatch {
   // AND pink-eyed (pp) = REW (Rotaugenweiß), A/D/E/G-independent.
   //   cchm/cchm + pp → REW  (CP varieties with pink-eye)
   //   cchm/ch  + pp → REW  (het colourpoint + pink-eye)
-  //   ch/ch    + pp → REW  (this also subsumes the frozen 'Pink Eyed White (PEW)' entry)
+  //   ch/ch    + pp → REW  (Julian confirmed PEW=REW; the 'REW' catalog entry matches here)
   // Counterproof: at least one full 'C' + pp → NOT REW (residual pigment remains).
   const [c0, c1] = resolvedPair(g, 'C')
   const [p0, p1] = resolvedPair(g, 'P')

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

@@ -1,6 +1,6 @@
 [
   {
-    "name": "Pink Eyed White (PEW)",
+    "name": "REW",
     "english": "Pink Eyed White",
     "canonicalGenotype": "AA chch DD EE GG pp spsp rere",
     "sortOrder": 0,

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

@@ -1,6 +1,6 @@
 [
   {
-    "name": "Pink Eyed White (PEW)",
+    "name": "REW",
     "english": "Pink Eyed White",
     "canonicalGenotype": "AA c[h]c[h] DD EE GG pp spsp rere",
     "sortOrder": 0,

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

@@ -22,9 +22,10 @@ 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'
@@ -156,6 +157,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,6 +323,10 @@ export default function StammbaumPage() {
           </button>
         </div>
 
+        <div className="stammbaum-layout">
+          {rootLitterItems.length > 0 && (
+            <LittersPanel litters={rootLitterItems} t={t} />
+          )}
           <div className="stammbaum-canvas" ref={canvasRef}>
             {view && (
               <Tree
@@ -335,6 +347,7 @@ export default function StammbaumPage() {
               />
             )}
           </div>
+        </div>
         <ul className="stammbaum-hints">
           <li>{t.tapHint}</li>
           <li>{t.hintName}</li>
@@ -417,6 +430,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 (

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;

gerbil-manager-web/src/pedigree/chipColors.ts

@@ -13,6 +13,9 @@ export interface ChipColor {
 
 const CHIP_COLORS: Record<string, ChipColor> = {
   // Colourpoint / C-Serie
+  // GEN-4c: PEW renamed to REW in catalog (Julian: PEW=REW). Both kept here for
+  // backward-compat during DB migration (old animals may still carry the old name).
+  'REW': { bg: '#f7f3ec', fg: '#8a7d6b' },
   'Pink Eyed White (PEW)': { bg: '#f7f3ec', fg: '#8a7d6b' },
   Hermelin: { bg: '#f3ede2', fg: '#8a7d6b' },
   Himalaya: { bg: '#efe6d8', fg: '#8a7d6b' },

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

@@ -358,6 +358,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',