STAMMBAUM-FULLDATE: GerbilIcon-SVG + Gencode-Chip + Gerbil-Icon ersetzt 🐭 app-weit

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>}

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 {