Fix: zu großer Abstand zwischen Story-Box und Platzhalterkarten bei Tier-Familien ohne Produkt

Familien ohne eigenes Produkt (z.B. Frieda bei der Kuh) zeigten die Story-Box
und die Platzhalterkarten darunter in zwei getrennten <section>-Bloecken -
dadurch addierten sich zwei section-Innenabstaende zu einem viel zu grossen
Zwischenraum (im Vergleich zur Hase-Seite, wo Story-Box und echte Produktkarte
in derselben Sektion stehen). Platzhalterkarten stehen jetzt in derselben
Sektion wie die Story-Box, Abstand ist ueberall einheitlich eng.

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

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

@@ -44,6 +44,8 @@ const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
+const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
 ---
 <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">
@@ -81,11 +83,24 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
             {characterEntriesMitProdukt.map(({ product }) => <ProductCard product={product!} lang={lang} />)}
           </div>
         )}
+        {platzhalterInStorySektion && (
+          <div class="grid grid-3">
+            {[0, 1, 2].map(() => (
+              <div class="card character-card">
+                <div class="product-media">
+                  <div class="img-placeholder" role="img" aria-label={sub.name[lang]}></div>
+                </div>
+                <h3>{sub.name[lang]}</h3>
+                <p class="character-card-desc">{t.shop.subcategoryEmpty}</p>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </section>
   )}
 
-  {komplettLeer && (
+  {eigeneLeerSektion && (
     <section class="section-tight">
       <div class="container">
         <div class="grid grid-3">

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

@@ -44,6 +44,8 @@ const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
+const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
 ---
 <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">
@@ -81,11 +83,24 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
             {characterEntriesMitProdukt.map(({ product }) => <ProductCard product={product!} lang={lang} />)}
           </div>
         )}
+        {platzhalterInStorySektion && (
+          <div class="grid grid-3">
+            {[0, 1, 2].map(() => (
+              <div class="card character-card">
+                <div class="product-media">
+                  <div class="img-placeholder" role="img" aria-label={sub.name[lang]}></div>
+                </div>
+                <h3>{sub.name[lang]}</h3>
+                <p class="character-card-desc">{t.shop.subcategoryEmpty}</p>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </section>
   )}
 
-  {komplettLeer && (
+  {eigeneLeerSektion && (
     <section class="section-tight">
       <div class="container">
         <div class="grid grid-3">

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

@@ -44,6 +44,8 @@ const hatStoryBoxen = characterEntriesFuerStory.length > 0;
 const hatProduktKarten = characterEntriesMitProdukt.length > 0;
 const hatWeitere = weitere.length > 0;
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
+const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
 ---
 <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">
@@ -81,11 +83,24 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
             {characterEntriesMitProdukt.map(({ product }) => <ProductCard product={product!} lang={lang} />)}
           </div>
         )}
+        {platzhalterInStorySektion && (
+          <div class="grid grid-3">
+            {[0, 1, 2].map(() => (
+              <div class="card character-card">
+                <div class="product-media">
+                  <div class="img-placeholder" role="img" aria-label={sub.name[lang]}></div>
+                </div>
+                <h3>{sub.name[lang]}</h3>
+                <p class="character-card-desc">{t.shop.subcategoryEmpty}</p>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </section>
   )}
 
-  {komplettLeer && (
+  {eigeneLeerSektion && (
     <section class="section-tight">
       <div class="container">
         <div class="grid grid-3">

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

@@ -53,6 +53,12 @@ const hatWeitere = weitere.length > 0;
 // eingetragen hat: statt einer nackten Text-Zeile zeigen wir schon die spätere Karten-Optik,
 // nur eben mit Platzhaltern. Sobald echte Produkte dazukommen, verschwinden diese automatisch.
 const komplettLeer = !hatProduktKarten && !hatWeitere;
+// Die Platzhalterkarten müssen direkt in derselben Sektion wie die Story-Boxen stehen (nicht in
+// einer eigenen, zweiten <section>), sonst addieren sich zwei section-Innenabstände zu einem viel
+// zu großen Zwischenraum. Nur wenn es gar keine Story-Boxen gibt (z.B. Unterkategorien ohne
+// Charaktere), bekommen die Platzhalter ihre eigene Sektion wie bisher.
+const platzhalterInStorySektion = hatStoryBoxen && komplettLeer;
+const eigeneLeerSektion = !hatStoryBoxen && komplettLeer;
 ---
 <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">
@@ -96,11 +102,26 @@ const komplettLeer = !hatProduktKarten && !hatWeitere;
             {characterEntriesMitProdukt.map(({ product }) => <ProductCard product={product!} lang={lang} />)}
           </div>
         )}
+        {/* Noch kein echtes Produkt für diese Familie: Platzhalterkarten direkt hier in derselben
+            Sektion, damit der Abstand zur Story-Box genauso eng bleibt wie bei echten Produkten. */}
+        {platzhalterInStorySektion && (
+          <div class="grid grid-3">
+            {[0, 1, 2].map(() => (
+              <div class="card character-card">
+                <div class="product-media">
+                  <div class="img-placeholder" role="img" aria-label={sub.name[lang]}></div>
+                </div>
+                <h3>{sub.name[lang]}</h3>
+                <p class="character-card-desc">{t.shop.subcategoryEmpty}</p>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </section>
   )}
 
-  {komplettLeer && (
+  {eigeneLeerSektion && (
     <section class="section-tight">
       <div class="container">
         <div class="grid grid-3">