From a42966ad8e64af67a200213e3651d31f20e54db1 Mon Sep 17 00:00:00 2001
From: Gulum <gulum@rismer.de>
Date: Sun, 7 Jun 2026 00:38:46 +0200
Subject: [PATCH] STAMMBAUM-EXPAND: +-Button prominenter + Mini-Legende
 (Stammbaum-UX)

Punkt 1 - Expand-Button sichtbar/zuverlaessig:
- 40px solid-fill (war 32px outline), box-shadow, flex-centered;
  deutlich sichtbar auf 190px Karte, touch-tauglich (>=40px Tap-Target).
  Hover/focus-visible: opacity + outline.
- Edge-case (Litter mit null-Eltern): +-Button bleibt sichtbar --
  unbekannt-Karten sind korrektes Feedback fuer quarantaenierte Eltern.

Punkt 2 - Bottom-Hint Mini-Legende:
- stammbaum-hint -> stammbaum-hints ul (flex-wrap, 3 Items):
  Umwurzeln / Name=Akte / +=Nachladen. Gut lesbar auf 390px.
  de.ts: hintName + hintExpand (neue Keys; tapHint bleibt fuer card title).

e2e: +2 Specs x 2 Viewports = 4 neue Tests (Legende + Expand-Klick).
Emil (Gen 4, litterId w-emil) liefert Testanker im Mock-Stammbaum.

Gate: vitest 122/122 e2e 166+68skipped build+tsc+eslint clean.
---
 gerbil-manager-web/e2e/stammbaum.spec.ts      | 31 ++++++++++++++
 .../src/pages/StammbaumPage.tsx               |  6 ++-
 gerbil-manager-web/src/pages/stammbaum.css    | 40 ++++++++++++-------
 gerbil-manager-web/src/strings/de.ts          |  3 ++
 4 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/gerbil-manager-web/e2e/stammbaum.spec.ts b/gerbil-manager-web/e2e/stammbaum.spec.ts
index 2eac21b..db9da06 100644
--- a/gerbil-manager-web/e2e/stammbaum.spec.ts
+++ b/gerbil-manager-web/e2e/stammbaum.spec.ts
@@ -79,3 +79,34 @@ test('Namenloser Ahne zeigt Platzhalter in der Stammbaum-Karte (UI-POLISH-2)', a
   // Karte selbst zeigt '(ohne Namen)' statt leer
   await expect(page.locator('.pedigree-card__nametext')).toHaveText(de.pages.gerbils.nameless)
 })
+
+test('Mini-Legende zeigt alle drei Interaktionshinweise (STAMMBAUM-EXPAND)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+
+  const hints = page.locator('.stammbaum-hints')
+  await expect(hints).toBeVisible()
+  await expect(hints).toContainText(t.tapHint)
+  await expect(hints).toContainText(t.hintName)
+  await expect(hints).toContainText(t.hintExpand)
+})
+
+test('＋-Knopf ist sichtbar und lädt weitere Vorfahren nach (STAMMBAUM-EXPAND)', async ({ page }) => {
+  skipUnlessMock()
+  await page.goto('/rennmaeuse/kruemel/stammbaum')
+  await expect(page.locator('.pedigree-card').first()).toBeVisible()
+
+  // Einpassen, damit die 4. Generation (Emil mit ＋) im Viewport liegt.
+  const fit = page.getByRole('button', { name: t.zoomFit })
+  if (await fit.isVisible()) await fit.click()
+  await page.waitForTimeout(600)
+
+  // ＋-Button muss an der Tiefengrenze erscheinen (Emil hat litterId w-emil).
+  const expandBtn = page.getByRole('button', { name: t.expand }).first()
+  await expect(expandBtn).toBeVisible()
+
+  // Klick auf ＋: Emil wird aufgeklappt → Max (sein Vater) taucht als Link auf.
+  await expandBtn.click({ force: true })
+  await expect(page.getByRole('link', { name: 'Max' })).toBeVisible({ timeout: 8000 })
+})
diff --git a/gerbil-manager-web/src/pages/StammbaumPage.tsx b/gerbil-manager-web/src/pages/StammbaumPage.tsx
index 437b93d..8f93b01 100644
--- a/gerbil-manager-web/src/pages/StammbaumPage.tsx
+++ b/gerbil-manager-web/src/pages/StammbaumPage.tsx
@@ -335,7 +335,11 @@ export default function StammbaumPage() {
             />
           )}
         </div>
-        <p className="stammbaum-hint">{t.tapHint}</p>
+        <ul className="stammbaum-hints">
+          <li>{t.tapHint}</li>
+          <li>{t.hintName}</li>
+          <li>{t.hintExpand}</li>
+        </ul>
       </section>
 
       {/* Druckansicht: am Bildschirm unsichtbar, ersetzt beim Drucken alles. */}
diff --git a/gerbil-manager-web/src/pages/stammbaum.css b/gerbil-manager-web/src/pages/stammbaum.css
index 6592a4b..d03692c 100644
--- a/gerbil-manager-web/src/pages/stammbaum.css
+++ b/gerbil-manager-web/src/pages/stammbaum.css
@@ -34,10 +34,15 @@
   color: var(--color-text);
 }
 
-.stammbaum-hint {
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
+.stammbaum-hints {
+  list-style: none;
+  padding: 0;
   margin: 0.4rem 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.1rem 1rem;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
 }
 
 /* ── Zeichenfläche ────────────────────────────────────────────── */
@@ -175,20 +180,27 @@
 .pedigree-card__expand {
   flex: none;
   margin-left: auto;
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
   border-radius: 50%;
-  border: 1px solid var(--color-accent);
-  background: var(--color-accent-soft);
-  color: var(--color-accent);
-  font-size: 1.05rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.pedigree-card__expand:hover {
+  border: none;
   background: var(--color-accent);
   color: #fff;
+  font-size: 1.3rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 5px rgb(0 0 0 / 28%);
+}
+
+.pedigree-card__expand:hover,
+.pedigree-card__expand:focus-visible {
+  opacity: 0.82;
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
 }
 
 /* ── Druckansicht (Ahnentafel als CSS-Grid, Hunde-Zertifikat-Optik) ──
diff --git a/gerbil-manager-web/src/strings/de.ts b/gerbil-manager-web/src/strings/de.ts
index 96f64ed..1e6e40a 100644
--- a/gerbil-manager-web/src/strings/de.ts
+++ b/gerbil-manager-web/src/strings/de.ts
@@ -355,6 +355,9 @@ export const de = {
       /** Auf Karten am Rand: weitere Vorfahren nachladen. */
       expand: 'Vorfahren laden',
       tapHint: 'Tippe auf ein Tier, um dessen Stammbaum anzuzeigen.',
+      /** Mini-Legende unter dem Baum (STAMMBAUM-EXPAND). */
+      hintName: 'Namenslink: Tierakte öffnen',
+      hintExpand: '＋: weitere Vorfahren nachladen',
       zoomIn: 'Vergrößern',
       zoomOut: 'Verkleinern',
       zoomFit: 'Ansicht einpassen',