From c8ab6bf072cded9d2808d443efe878878c670a7b Mon Sep 17 00:00:00 2001
From: Gulum <gulum@rismer.de>
Date: Sat, 6 Jun 2026 21:54:33 +0200
Subject: [PATCH] STAMMBAUM-OPEN: Name in Ahnen-Karte ist Link zur
 Tier-Detailseite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PedigreeCard: <span className=nametext> → <Link to=/rennmaeuse/{id}> mit e.stopPropagation() (Re-Root bleibt auf Karten-Bereich außerhalb des Namens)
- stammbaum.css: .pedigree-card__nametext color:inherit + text-decoration:none; hover→underline
- Kein Link im Drucklayout (PrintPedigree unverändert)
- e2e: href=/rennmaeuse/fridolin verifiziert + Keyboard-Navigation (fokus+Enter) öffnet Detailseite

Gate: vitest 108/108, e2e 162/162, tsc clean
---
 gerbil-manager-web/e2e/stammbaum.spec.ts       | 17 +++++++++++++++++
 gerbil-manager-web/src/pages/StammbaumPage.tsx |  8 +++++++-
 gerbil-manager-web/src/pages/stammbaum.css     |  6 ++++++
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/gerbil-manager-web/e2e/stammbaum.spec.ts b/gerbil-manager-web/e2e/stammbaum.spec.ts
index fa624d9..2eac21b 100644
--- a/gerbil-manager-web/e2e/stammbaum.spec.ts
+++ b/gerbil-manager-web/e2e/stammbaum.spec.ts
@@ -54,6 +54,23 @@ test('unbekanntes Tier zeigt den deutschen Nicht-gefunden-Zustand', async ({ pag
   await expect(page.getByText(t.notFound).or(page.getByText(de.api.errors.notFound))).toBeVisible()
 })
 
+test('Ahnen-Namen sind Links zur Tier-Detailseite (STAMMBAUM-OPEN)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+
+  // Fridolin ist Vater von Krümel — sein Name-Link soll /rennmaeuse/fridolin öffnen
+  const nameLink = page.getByRole('link', { name: 'Fridolin' })
+  await expect(nameLink).toBeVisible()
+  // href korrekt gesetzt
+  await expect(nameLink).toHaveAttribute('href', '/rennmaeuse/fridolin')
+  // Tastatur-Navigation (umgeht Toolbar-Überlappung im SVG-Canvas, testet zugl. Accessibility)
+  await nameLink.focus()
+  await page.keyboard.press('Enter')
+  await expect(page.getByRole('heading', { name: 'Fridolin' })).toBeVisible()
+  await expect(page).toHaveURL(/\/rennmaeuse\/fridolin$/)
+})
+
 test('Namenloser Ahne zeigt Platzhalter in der Stammbaum-Karte (UI-POLISH-2)', async ({ page }) => {
   skipUnlessMock()
   await page.goto('/rennmaeuse/nameless-stub/stammbaum')
diff --git a/gerbil-manager-web/src/pages/StammbaumPage.tsx b/gerbil-manager-web/src/pages/StammbaumPage.tsx
index 7543eda..437b93d 100644
--- a/gerbil-manager-web/src/pages/StammbaumPage.tsx
+++ b/gerbil-manager-web/src/pages/StammbaumPage.tsx
@@ -377,7 +377,13 @@ function PedigreeCard({
       <div className="pedigree-card__body">
         <div className="pedigree-card__name">
           <SexIcon gender={g.gender} />
-          <span className="pedigree-card__nametext">{g.name || de.pages.gerbils.nameless}</span>
+          <Link
+            to={`/rennmaeuse/${g.id}`}
+            className="pedigree-card__nametext"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {g.name || de.pages.gerbils.nameless}
+          </Link>
         </div>
         {farbschlag && (
           <span
diff --git a/gerbil-manager-web/src/pages/stammbaum.css b/gerbil-manager-web/src/pages/stammbaum.css
index 35bf1dd..6592a4b 100644
--- a/gerbil-manager-web/src/pages/stammbaum.css
+++ b/gerbil-manager-web/src/pages/stammbaum.css
@@ -134,6 +134,12 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: inherit;
+  text-decoration: none;
+}
+
+.pedigree-card__nametext:hover {
+  text-decoration: underline;
 }
 
 .pedigree-card__sex--male {