Fix: Haupt-Charakter einer Tier-Familie verliert Story-Box nicht mehr ohne Produkt

Der letzte Commit hatte Story-Boxen komplett an ein zugeordnetes Produkt
gekoppelt - das entfernte zwar wie gewuenscht HasiGott/Mama Hase (Hase-Familie
hat bereits HasiDog als Produkt), loeschte aber ungewollt auch die Box des
Haupt-Charakters bei Familien ohne eigenes Produkt (z.B. Frieda bei der Kuh).

Jetzt bekommt immer der erste/Haupt-Charakter einer Familie eine Story-Box,
zusaetzliche Charaktere weiterhin nur mit echtem Produkt.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

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

@@ -35,11 +35,12 @@ const characterEntries = characters.map((char) => ({
   product: alleProdukte.find((p) => p.charakter === char.slug),
 }));
 const characterEntriesMitProdukt = characterEntries.filter((e) => e.product);
+const characterEntriesFuerStory = characterEntries.filter((e, i) => i === 0 || e.product);
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
 const zugeordneteSlugs = new Set(characterEntriesMitProdukt.map((e) => e.product!.slug));
 const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
-const hatCharaktere = characterEntries.length > 0;
+const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
@@ -57,11 +58,11 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
     </section>
   </div>
 
-  {hatProduktKarten && (
+  {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
         <div class="character-stories">
-          {characterEntriesMitProdukt.map(({ char }) => (
+          {characterEntriesFuerStory.map(({ char }) => (
             <div class="card character-story">
               {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
               <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>

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

@@ -35,11 +35,12 @@ const characterEntries = characters.map((char) => ({
   product: alleProdukte.find((p) => p.charakter === char.slug),
 }));
 const characterEntriesMitProdukt = characterEntries.filter((e) => e.product);
+const characterEntriesFuerStory = characterEntries.filter((e, i) => i === 0 || e.product);
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
 const zugeordneteSlugs = new Set(characterEntriesMitProdukt.map((e) => e.product!.slug));
 const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
-const hatCharaktere = characterEntries.length > 0;
+const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
@@ -57,11 +58,11 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
     </section>
   </div>
 
-  {hatProduktKarten && (
+  {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
         <div class="character-stories">
-          {characterEntriesMitProdukt.map(({ char }) => (
+          {characterEntriesFuerStory.map(({ char }) => (
             <div class="card character-story">
               {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
               <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>

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

@@ -35,11 +35,12 @@ const characterEntries = characters.map((char) => ({
   product: alleProdukte.find((p) => p.charakter === char.slug),
 }));
 const characterEntriesMitProdukt = characterEntries.filter((e) => e.product);
+const characterEntriesFuerStory = characterEntries.filter((e, i) => i === 0 || e.product);
 
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
 const zugeordneteSlugs = new Set(characterEntriesMitProdukt.map((e) => e.product!.slug));
 const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
-const hatCharaktere = characterEntries.length > 0;
+const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
@@ -57,11 +58,11 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
     </section>
   </div>
 
-  {hatProduktKarten && (
+  {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
         <div class="character-stories">
-          {characterEntriesMitProdukt.map(({ char }) => (
+          {characterEntriesFuerStory.map(({ char }) => (
             <div class="card character-story">
               {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
               <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>

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

@@ -36,10 +36,17 @@ const characterEntries = characters.map((char) => ({
 }));
 const characterEntriesMitProdukt = characterEntries.filter((e) => e.product);
 
+// Story-Boxen: der Haupt-Charakter der Familie (der erste im Admin, meist der mit dem
+// Banner-Namen) bekommt immer eine Vorstellungsbox, auch bevor ein Produkt für ihn existiert —
+// sonst wirkt eine ganz neue Tier-Familie leer. Weitere/zusätzliche Charaktere derselben Familie
+// (z.B. Geschwister) bekommen dagegen NUR dann eine eigene Box, wenn ihnen im Admin auch
+// wirklich ein eigenes Produkt zugeordnet ist.
+const characterEntriesFuerStory = characterEntries.filter((e, i) => i === 0 || e.product);
+
 // Produkte ohne (bekannte) Charakter-Zuordnung landen als "weitere Modelle" darunter.
 const zugeordneteSlugs = new Set(characterEntriesMitProdukt.map((e) => e.product!.slug));
 const weitere = alleProdukte.filter((p) => !zugeordneteSlugs.has(p.slug));
-const hatCharaktere = characterEntries.length > 0;
+const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 // Damit "schon vorbereitet aussieht", auch wenn VanVan hier noch gar keine Produkte/Charaktere
@@ -60,15 +67,15 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
     </section>
   </div>
 
-  {hatProduktKarten && (
+  {hatStoryBoxen && (
     <section class="section-tight">
       <div class="container">
         {/* Die persönlichen Charaktergeschichten stehen als eigene, volle Breite Boxen ÜBER der
             Kartenreihe — getrennt von den "Shop"-Karten darunter, die nur Foto/Preis/Infos zeigen.
-            Nur Charaktere mit echtem Produkt bekommen hier überhaupt eine Box (kein Charakter ohne
-            Ware im Shop), damit es keine Vorstellungen "ins Leere" gibt. */}
+            Der Haupt-Charakter der Familie bekommt immer eine Box, weitere Charaktere nur mit
+            echtem Produkt (siehe characterEntriesFuerStory oben). */}
         <div class="character-stories">
-          {characterEntriesMitProdukt.map(({ char }) => (
+          {characterEntriesFuerStory.map(({ char }) => (
             <div class="card character-story">
               {char.vorstellung && <span class="eyebrow">{char.vorstellung[lang].split("\n")[0]}</span>}
               <p>{char.vorstellung ? char.vorstellung[lang].split("\n")[1] : ""}</p>