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.

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;