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/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">