FEAT-5: Probeverpaarung entry point from animal detail (?parent=) + stored-vs-engine Farbschlag mismatch hint

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

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

@@ -73,6 +73,7 @@ export default function GerbilDetailPage() {
   const g = gerbil.data
   const geno = describeGenotype(g.genotype)
   const lookup = (map: Map<string, string>, key: string | null) => (key ? (map.get(key) ?? '—') : '—')
+  const storedColorName = g.colorVarietyId ? (colorName.get(g.colorVarietyId) ?? null) : null
 
   return (
     <section className="page">
@@ -85,6 +86,9 @@ export default function GerbilDetailPage() {
           <Link to={`/rennmaeuse/${g.id}/bearbeiten`} className="btn btn--primary">
             {t.detail.edit}
           </Link>
+          <Link to={`/genetik?parent=${g.id}`} className="btn">
+            {t.detail.testMating}
+          </Link>
           <Link to="/rennmaeuse" className="btn">
             {t.detail.back}
           </Link>
@@ -117,7 +121,19 @@ export default function GerbilDetailPage() {
       {geno ? (
         <dl className="def-list">
           <Row label={t.fields.genotype} value={<code>{geno.display}</code>} />
-          <Row label={t.detail.resolvedFarbschlag} value={geno.farbschlag} />
+          <Row
+            label={t.detail.resolvedPrefix}
+            value={
+              <>
+                {geno.farbschlag}
+                {storedColorName &&
+                  geno.farbschlag !== de.genetics.unknownFarbschlag &&
+                  storedColorName !== geno.farbschlag && (
+                    <small className="mismatch-hint"> ⚠ {t.detail.farbschlagMismatch}</small>
+                  )}
+              </>
+            }
+          />
         </dl>
       ) : (
         <p className="muted">{t.detail.genotypeNotSet}</p>