GEN-2: surface Farbschlag images (FarbschlagImage component) in breeding results, animal detail, form picker

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

@@ -6,6 +6,7 @@ import { listColorVarieties, listContacts, listEnclosures, listLitters } from '.
 import { useApi } from '../hooks/useApi'
 import { formatDate, genderLabel, statusLabel } from '../format/labels'
 import { fromDisplayString, genotypeToFarbschlag, toDisplayString } from '../genetics'
+import FarbschlagImage from '../components/FarbschlagImage'
 // FEAT-6 (Oscar): Tab-Inhalte + Profilfoto
 import GerbilHealthTab from '../components/GerbilHealthTab'
 import GerbilPhotosTab from '../components/GerbilPhotosTab'
@@ -118,7 +119,19 @@ export default function GerbilDetailPage() {
         {g.status === 'GivenAway' && (
           <Row label={t.fields.goHomeDate} value={formatDate(g.goHomeDate)} />
         )}
-        <Row label={t.fields.colorVariety} value={lookup(colorName, g.colorVarietyId)} />
+        <Row
+          label={t.fields.colorVariety}
+          value={
+            storedColorName ? (
+              <span className="farbschlag-value">
+                <FarbschlagImage name={storedColorName} size={32} />
+                {storedColorName}
+              </span>
+            ) : (
+              '—'
+            )
+          }
+        />
         <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)} />