Unterkategorien-Chips zeigen wieder den Charakternamen (z.B. Hase „HasiDog")

Seit der Umstellung auf "eine Seite pro Tier-Familie" hießen die Chips
nur noch generisch (Kuh, Hase, Wal, ...). Jetzt zeigen sie zusätzlich
den ersten/bekanntesten Charakter der Serie in Anführungszeichen — z.B.
"Hase „HasiDog"" — behalten dabei aber die neue Datenstruktur
(Subcategory.characters) bei, damit Familien mit mehreren Charakteren
(wie Hase: HasiDog, HasiGott, Mama Hase) technisch weiterhin
funktionieren.

Neue Helper-Funktion subcategoryChipLabel() in categories.ts, pro
Sprache mit den richtigen Anführungszeichen (DE/CH „...", EN "...",
FR « ... »).

Verifiziert per Puppeteer: alle 6 Chips zeigen exakt die gewünschten
Labels.

src/data/categories.ts

@@ -55,3 +55,20 @@ export function getCategory(slug: string): Category | undefined {
 export function getSubcategory(categorySlug: string, subSlug: string): Subcategory | undefined {
   return getCategory(categorySlug)?.subcategories?.find((s) => s.slug === subSlug);
 }
+
+const ZITATZEICHEN: Record<Locale, [string, string]> = {
+  de: ["„", "”"],
+  en: ['"', '"'],
+  ch: ["„", "”"],
+  fr: ["« ", " »"],
+};
+
+// Freundliches Kurz-Label für die Unterkategorien-Chips (z.B. "Hase „HasiDog"") — nennt neben
+// dem Familiennamen den ersten/bekanntesten Charakter der Serie, auch wenn die Seite selbst
+// inzwischen mehrere Charaktere zeigen kann (siehe Subcategory.characters).
+export function subcategoryChipLabel(sub: Subcategory, lang: Locale): string {
+  const erster = sub.characters?.[0];
+  if (!erster) return sub.name[lang];
+  const [auf, zu] = ZITATZEICHEN[lang];
+  return `${sub.name[lang]} ${auf}${erster.name[lang]}${zu}`;
+}

src/pages/ch/shop/[kategorie].astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
 import ProductCard from "../../../components/ProductCard.astro";
-import { categories, getCategory } from "../../../data/categories";
+import { categories, getCategory, subcategoryChipLabel } from "../../../data/categories";
 import { productsByCategory } from "../../../data/products";
 import type { Locale } from "../../../i18n/config";
 import { useTranslations } from "../../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
           <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
-              <a class="subcategory-chip" href={`/ch/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
+              <a class="subcategory-chip" href={`/ch/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
             ))}
           </div>
         </>

src/pages/en/shop/[kategorie].astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
 import ProductCard from "../../../components/ProductCard.astro";
-import { categories, getCategory } from "../../../data/categories";
+import { categories, getCategory, subcategoryChipLabel } from "../../../data/categories";
 import { productsByCategory } from "../../../data/products";
 import type { Locale } from "../../../i18n/config";
 import { useTranslations } from "../../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
           <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
-              <a class="subcategory-chip" href={`/en/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
+              <a class="subcategory-chip" href={`/en/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
             ))}
           </div>
         </>

src/pages/fr/shop/[kategorie].astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "../../../layouts/Layout.astro";
 import ProductCard from "../../../components/ProductCard.astro";
-import { categories, getCategory } from "../../../data/categories";
+import { categories, getCategory, subcategoryChipLabel } from "../../../data/categories";
 import { productsByCategory } from "../../../data/products";
 import type { Locale } from "../../../i18n/config";
 import { useTranslations } from "../../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
           <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
-              <a class="subcategory-chip" href={`/fr/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
+              <a class="subcategory-chip" href={`/fr/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
             ))}
           </div>
         </>

src/pages/shop/[kategorie].astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import ProductCard from "../../components/ProductCard.astro";
-import { categories, getCategory } from "../../data/categories";
+import { categories, getCategory, subcategoryChipLabel } from "../../data/categories";
 import { productsByCategory } from "../../data/products";
 import type { Locale } from "../../i18n/config";
 import { useTranslations } from "../../i18n/ui";
@@ -35,7 +35,7 @@ const items = productsByCategory(category.slug);
           <h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
           <div class="subcategory-chips">
             {category.subcategories.map((s) => (
-              <a class="subcategory-chip" href={`/shop/${category.slug}/${s.slug}/`}>{s.name[lang]}</a>
+              <a class="subcategory-chip" href={`/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
             ))}
           </div>
         </>