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() {
/>
)}
-
{t.tapHint}
+
+ - {t.tapHint}
+ - {t.hintName}
+ - {t.hintExpand}
+
{/* 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',