From 7525970ffcecc5f1933327696cd67ef70f9c06dc Mon Sep 17 00:00:00 2001
From: Gulum <gulum@rismer.de>
Date: Sun, 7 Jun 2026 02:53:31 +0200
Subject: [PATCH] =?UTF-8?q?STAMMBAUM-FULLDATE:=20GerbilIcon-SVG=20+=20Genc?=
 =?UTF-8?q?ode-Chip=20+=20Gerbil-Icon=20ersetzt=20=F0=9F=90=AD=20app-weit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gerbil-manager-web/e2e/stammbaum.spec.ts      |  9 +++++
 .../src/components/AppShell.tsx               |  8 +++--
 .../src/components/GerbilIcon.tsx             | 35 +++++++++++++++++++
 .../src/pages/StammbaumPage.tsx               |  6 ++--
 gerbil-manager-web/src/pages/stammbaum.css    |  7 ++--
 5 files changed, 57 insertions(+), 8 deletions(-)
 create mode 100644 gerbil-manager-web/src/components/GerbilIcon.tsx

diff --git a/gerbil-manager-web/e2e/stammbaum.spec.ts b/gerbil-manager-web/e2e/stammbaum.spec.ts
index cfdf83a..e9d6ecf 100644
--- a/gerbil-manager-web/e2e/stammbaum.spec.ts
+++ b/gerbil-manager-web/e2e/stammbaum.spec.ts
@@ -145,3 +145,12 @@ test('Knoten-Karte zeigt volles Geburtsdatum (STAMMBAUM-FULLDATE)', async ({ pag
   await expect(page.locator('.pedigree-card').first()).toBeVisible()
   await expect(page.locator('.pedigree-card__year').first()).toContainText('12.03.2025')
 })
+
+test('Gencode-Chip zeigt Genotyp statt Farbname (STAMMBAUM-GENCODE)', async ({ page }) => {
+  skipUnlessMock()
+  // Fridolin ist Vater von Krümel — genotype 'aa CC DD EE GG PP spsp rere'
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+  const fridolinCard = page.locator('.pedigree-card').filter({ hasText: 'Fridolin' })
+  await expect(fridolinCard.locator('.pedigree-chip')).toContainText('aa CC')
+})
diff --git a/gerbil-manager-web/src/components/AppShell.tsx b/gerbil-manager-web/src/components/AppShell.tsx
index 043260f..06b2c93 100644
--- a/gerbil-manager-web/src/components/AppShell.tsx
+++ b/gerbil-manager-web/src/components/AppShell.tsx
@@ -1,19 +1,21 @@
 import { useState } from 'react'
+import type { ReactNode } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
 import { de } from '../strings/de'
+import GerbilIcon from './GerbilIcon'
 import './appShell.css'
 
 interface NavItem {
   to: string
   label: string
-  icon: string
+  icon: ReactNode
   end?: boolean
 }
 
 // Primary items are always visible in the phone bottom bar; secondary items
 // move into the "Mehr" sheet on phones and appear inline in the desktop sidebar.
 const PRIMARY: NavItem[] = [
-  { to: '/rennmaeuse', label: de.nav.gerbils, icon: '🐭' },
+  { to: '/rennmaeuse', label: de.nav.gerbils, icon: <GerbilIcon size="1.25em" /> },
   { to: '/wuerfe', label: de.nav.litters, icon: '🍼' },
   { to: '/genetik', label: de.nav.genetics, icon: '🧬' },
 ]
@@ -46,7 +48,7 @@ export default function AppShell() {
   return (
     <div className="app-shell">
       <header className="app-header">
-        <span className="app-logo" aria-hidden="true">🐭</span>
+        <span className="app-logo" aria-hidden="true"><GerbilIcon size="1.5rem" /></span>
         <h1 className="app-title">{de.app.title}</h1>
       </header>
 
diff --git a/gerbil-manager-web/src/components/GerbilIcon.tsx b/gerbil-manager-web/src/components/GerbilIcon.tsx
new file mode 100644
index 0000000..7209852
--- /dev/null
+++ b/gerbil-manager-web/src/components/GerbilIcon.tsx
@@ -0,0 +1,35 @@
+import type { CSSProperties } from 'react'
+
+interface Props {
+  size?: string | number
+  style?: CSSProperties
+  className?: string
+}
+
+/** Reusable gerbil silhouette icon — upright sitting pose, long tail with tuft. fill=currentColor. */
+export default function GerbilIcon({ size = '1em', style, className }: Props) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      style={{ display: 'inline-block', verticalAlign: '-0.125em', flexShrink: 0, ...style }}
+      className={className}
+      role="img"
+      aria-label="Rennmaus"
+    >
+      {/* body — sitting upright */}
+      <path d="M40 14c6 0 11 5 11 12 0 4-2 7-2 11 0 10-6 16-15 16-8 0-14-6-14-15 0-13 9-24 20-24z" />
+      {/* ear */}
+      <circle cx="46" cy="15" r="5" />
+      {/* hind paw */}
+      <ellipse cx="24" cy="52" rx="9" ry="3.5" />
+      {/* long curved tail with tuft */}
+      <path d="M16 51c-7 1-13-2-15-9-1-4 0-8 3-10 1 3 1 6 3 8 3 3 7 4 11 4z" />
+      {/* front paw */}
+      <path d="M30 45c3 0 5 1 5 4-3 1-6 1-7-2 0-1 1-2 2-2z" />
+    </svg>
+  )
+}
diff --git a/gerbil-manager-web/src/pages/StammbaumPage.tsx b/gerbil-manager-web/src/pages/StammbaumPage.tsx
index a09240a..a450599 100644
--- a/gerbil-manager-web/src/pages/StammbaumPage.tsx
+++ b/gerbil-manager-web/src/pages/StammbaumPage.tsx
@@ -28,6 +28,7 @@ import { getInbreedingCoefficient } from '../api/pedigree'
 import type { Gender, Gerbil, Litter } from '../api/types'
 import { useApi } from '../hooks/useApi'
 import { formatDate, genderLabel } from '../format/labels'
+import GerbilIcon from '../components/GerbilIcon'
 import { UNKNOWN_FARBSCHLAG, fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
 import {
   DEFAULT_GENERATIONS,
@@ -389,7 +390,7 @@ function PedigreeCard({
     >
       {/* Foto-Platzhalter — echte Fotos kommen mit FEAT-6. */}
       <div className="pedigree-card__photo" aria-hidden="true">
-        🐭
+        <GerbilIcon size="1.6rem" />
       </div>
       <div className="pedigree-card__body">
         <div className="pedigree-card__name">
@@ -406,8 +407,9 @@ function PedigreeCard({
           <span
             className="pedigree-chip"
             style={chip ? { background: chip.bg, color: chip.fg } : undefined}
+            title={farbschlag}
           >
-            {farbschlag}
+            {g.genotype || farbschlag}
           </span>
         )}
         {dob && <span className="pedigree-card__year">* {dob}</span>}
diff --git a/gerbil-manager-web/src/pages/stammbaum.css b/gerbil-manager-web/src/pages/stammbaum.css
index 4814943..13f5836 100644
--- a/gerbil-manager-web/src/pages/stammbaum.css
+++ b/gerbil-manager-web/src/pages/stammbaum.css
@@ -285,14 +285,15 @@
 .pedigree-chip {
   align-self: flex-start;
   max-width: 100%;
-  font-size: 0.68rem;
+  font-size: 0.62rem;
   padding: 0.1rem 0.45rem;
   border-radius: 1rem;
   background: var(--color-accent-soft);
   color: var(--color-accent);
-  white-space: nowrap;
+  white-space: normal;
+  word-break: break-word;
   overflow: hidden;
-  text-overflow: ellipsis;
+  line-height: 1.3;
 }
 
 .pedigree-card__year {