Anpassungen am bestehenden Webshop laut PDF-Vorgabe

- Persönliche Vorstellung jedes DIY-Plushies-Charakters auf der jeweiligen
  Unterkategorie-Seite (dezente Box im Kartenstil), inkl. eigener HasiDog-Seite
  mit "Mehr über HasiDog"-Button
- Beschreibungstexte "DIY Plushies" und "Häkelzubehör" angepasst (Startseite +
  Kategorieseiten, gemeinsame Datenquelle)
- Shop-Filter erweitert: Unterkategorien jetzt gruppiert unter ihrer Hauptkategorie
  wählbar, inkl. Filterlogik
- Shop-Bannerbild jetzt auch auf allen Kategorie- und Unterkategorie-Seiten,
  gleiche Größe/Abstände/Responsivität wie im Shop
- Keine Design-Änderung: bestehende Farben, Typografie, Karten, Buttons, Abstände
  vollständig erhalten, alles fügt sich nahtlos ins bestehende Layout ein
- Alle Änderungen in DE/EN/CH/FR umgesetzt, Link-Audit durchgeführt

src/pages/en/shop/index.astro

@@ -28,7 +28,16 @@ const t = useTranslations(lang);
           <label for="f-kategorie">{t.shop.categoryLabel}</label>
           <select id="f-kategorie">
             <option value="">{t.shop.allCategories}</option>
-            {categories.map((c) => <option value={c.slug}>{c.name[lang]}</option>)}
+            {categories.map((c) => (
+              c.subcategories && c.subcategories.length > 0 ? (
+                <optgroup label={c.name[lang]}>
+                  <option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
+                  {c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
+                </optgroup>
+              ) : (
+                <option value={c.slug}>{c.name[lang]}</option>
+              )
+            ))}
           </select>
         </div>
         <div class="filter-group">
@@ -58,6 +67,7 @@ const t = useTranslations(lang);
             <div
               class="product-slot"
               data-kategorie={p.kategorie}
+              data-unterkategorie={p.unterkategorie ?? ""}
               data-preis={p.preis}
               data-bestand={p.bestand}
               data-neu={p.badges.includes("neu") ? 1 : 0}
@@ -98,7 +108,11 @@ const t = useTranslations(lang);
 
     let visible = 0;
     slots.forEach((slot) => {
-      const matchKat = !kat || slot.dataset.kategorie === kat;
+      const matchKat = !kat
+        ? true
+        : kat.startsWith("sub:")
+          ? slot.dataset.unterkategorie === kat.slice(4)
+          : slot.dataset.kategorie === kat;
       const matchPreis = Number(slot.dataset.preis) <= maxPreis;
       const matchVerfuegbar = !nurVerfuegbar || Number(slot.dataset.bestand) > 0;
       const show = matchKat && matchPreis && matchVerfuegbar;