Zwei neue Hase-Varianten (HasiGott, Mama Hase) + abwechselnde Foto/Text-Seite pro Familie; Hauptkategorie-Überschrift auf Kategorie-Seiten

- Zwei neue Unterkategorien unter "Hase" angelegt: "HasiGott" und "Mama
  Hase", jeweils mit eigenem Charaktertext, bereit für echte Produktfotos
  sobald VanVan sie im Adminbereich hinzufügt.
- Neue Logik: Innerhalb einer Tier-Familie (gleicher Slug-Präfix, z.B.
  "hase-*") wechselt die Vorstellungsbox jetzt automatisch die Seite ab —
  1. Mitglied Foto links/Text rechts (HasiDog, unverändert), 2. Mitglied
  Foto rechts/Text links (HasiGott), 3. wieder links (Mama Hase), und so
  weiter für alle künftigen Varianten.
- Kategorie-Seiten (z.B. "DIY Plushies") zeigen jetzt eine
  Hauptkategorie-Überschrift zwischen der Unterkategorien-Chip-Reihe und
  der eigentlichen Produktreihe darunter.

Verifiziert per Puppeteer gegen den echten Build: neue Seiten laden
fehlerfrei, HasiDog bleibt korrekt "nicht gespiegelt" (1. Familienmitglied),
Hauptkategorie-Überschrift sitzt an der richtigen Stelle.

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

@@ -40,6 +40,9 @@ const items = productsByCategory(category.slug);
           </div>
         </>
       )}
+      {items.length > 0 && (
+        <h2 class="kategorie-section-label">{category.icon} {category.name[lang]}</h2>
+      )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       ) : (

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

@@ -21,6 +21,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 const echtProdukte = productsByUnterkategorie(category.slug, sub.slug);
 const featured = echtProdukte[0];
 const weitere = echtProdukte.slice(1);
+
+// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt
+// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt
+// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen.
+const familyPrefix = sub.slug.split("-")[0];
+const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? [];
+const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug);
+const introReverse = familyIndex % 2 === 1;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} bi Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -37,7 +45,7 @@ const weitere = echtProdukte.slice(1);
 
   {featured ? (
     <section class="section-tight">
-      <div class="container grid grid-2 intro">
+      <div class={`container grid grid-2 intro ${introReverse ? "intro-reverse" : ""}`}>
         <a class="portrait-frame portrait" href={`/ch/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
@@ -45,7 +53,7 @@ const weitere = echtProdukte.slice(1);
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
         </a>
-        <div>
+        <div class="intro-text">
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
           <h2><a href={`/ch/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
           <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>

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

@@ -40,6 +40,9 @@ const items = productsByCategory(category.slug);
           </div>
         </>
       )}
+      {items.length > 0 && (
+        <h2 class="kategorie-section-label">{category.icon} {category.name[lang]}</h2>
+      )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       ) : (

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

@@ -21,6 +21,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 const echtProdukte = productsByUnterkategorie(category.slug, sub.slug);
 const featured = echtProdukte[0];
 const weitere = echtProdukte.slice(1);
+
+// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt
+// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt
+// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen.
+const familyPrefix = sub.slug.split("-")[0];
+const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? [];
+const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug);
+const introReverse = familyIndex % 2 === 1;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} at Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -37,7 +45,7 @@ const weitere = echtProdukte.slice(1);
 
   {featured ? (
     <section class="section-tight">
-      <div class="container grid grid-2 intro">
+      <div class={`container grid grid-2 intro ${introReverse ? "intro-reverse" : ""}`}>
         <a class="portrait-frame portrait" href={`/en/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
@@ -45,7 +53,7 @@ const weitere = echtProdukte.slice(1);
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
         </a>
-        <div>
+        <div class="intro-text">
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
           <h2><a href={`/en/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
           <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>

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

@@ -40,6 +40,9 @@ const items = productsByCategory(category.slug);
           </div>
         </>
       )}
+      {items.length > 0 && (
+        <h2 class="kategorie-section-label">{category.icon} {category.name[lang]}</h2>
+      )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       ) : (

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

@@ -21,6 +21,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 const echtProdukte = productsByUnterkategorie(category.slug, sub.slug);
 const featured = echtProdukte[0];
 const weitere = echtProdukte.slice(1);
+
+// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt
+// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt
+// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen.
+const familyPrefix = sub.slug.split("-")[0];
+const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? [];
+const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug);
+const introReverse = familyIndex % 2 === 1;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} chez Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -37,7 +45,7 @@ const weitere = echtProdukte.slice(1);
 
   {featured ? (
     <section class="section-tight">
-      <div class="container grid grid-2 intro">
+      <div class={`container grid grid-2 intro ${introReverse ? "intro-reverse" : ""}`}>
         <a class="portrait-frame portrait" href={`/fr/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
@@ -45,7 +53,7 @@ const weitere = echtProdukte.slice(1);
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
         </a>
-        <div>
+        <div class="intro-text">
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
           <h2><a href={`/fr/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
           <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>

src/pages/shop/[kategorie].astro

@@ -40,6 +40,9 @@ const items = productsByCategory(category.slug);
           </div>
         </>
       )}
+      {items.length > 0 && (
+        <h2 class="kategorie-section-label">{category.icon} {category.name[lang]}</h2>
+      )}
       {items.length > 0 ? (
         <div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
       ) : (

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

@@ -24,6 +24,14 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
 const echtProdukte = productsByUnterkategorie(category.slug, sub.slug);
 const featured = echtProdukte[0];
 const weitere = echtProdukte.slice(1);
+
+// Innerhalb einer Tier-Familie (gleicher Slug-Präfix vor dem ersten "-", z.B. "hase") wechselt
+// die Foto-/Text-Seite ab: 1. Mitglied Foto links, 2. Foto rechts, 3. wieder links, usw. — sorgt
+// für optische Abwechslung, sobald mehrere Varianten einer Serie eigene Seiten bekommen.
+const familyPrefix = sub.slug.split("-")[0];
+const familyMembers = category.subcategories?.filter((s) => s.slug.split("-")[0] === familyPrefix) ?? [];
+const familyIndex = familyMembers.findIndex((s) => s.slug === sub.slug);
+const introReverse = familyIndex % 2 === 1;
 ---
 <Layout title={`${sub.name[lang]} – ${category.name[lang]}`} description={`${sub.name[lang]} bei Van's DIY & Bastelbedarf.`} lang={lang} path={`/shop/${category.slug}/${sub.slug}/`}>
   <div class="container">
@@ -40,7 +48,7 @@ const weitere = echtProdukte.slice(1);
 
   {featured ? (
     <section class="section-tight">
-      <div class="container grid grid-2 intro">
+      <div class={`container grid grid-2 intro ${introReverse ? "intro-reverse" : ""}`}>
         <a class="portrait-frame portrait" href={`/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
@@ -48,7 +56,7 @@ const weitere = echtProdukte.slice(1);
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
         </a>
-        <div>
+        <div class="intro-text">
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
           <h2><a href={`/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
           <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>