From b6f8b4339f9e8b98b8cb22bef4bc58f3df2455b7 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 02:15:01 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20zu=20gro=C3=9Fer=20Abstand=20zwischen=20?=
 =?UTF-8?q?Story-Box=20und=20Platzhalterkarten=20bei=20Tier-Familien=20ohn?=
 =?UTF-8?q?e=20Produkt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 <noreply@anthropic.com>
---
 .../shop/[kategorie]/[unterkategorie].astro   | 17 +++++++++++++-
 .../shop/[kategorie]/[unterkategorie].astro   | 17 +++++++++++++-
 .../shop/[kategorie]/[unterkategorie].astro   | 17 +++++++++++++-
 .../shop/[kategorie]/[unterkategorie].astro   | 23 ++++++++++++++++++-
 4 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
index 7a4a9cc..7fefc8d 100644
--- a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
+++ b/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">
diff --git a/src/pages/en/shop/[kategorie]/[unterkategorie].astro b/src/pages/en/shop/[kategorie]/[unterkategorie].astro
index 77c9cae..f58f412 100644
--- a/src/pages/en/shop/[kategorie]/[unterkategorie].astro
+++ b/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">
diff --git a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
index 21345bf..000ab17 100644
--- a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
+++ b/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">
diff --git a/src/pages/shop/[kategorie]/[unterkategorie].astro b/src/pages/shop/[kategorie]/[unterkategorie].astro
index 92abf58..476e2f1 100644
--- a/src/pages/shop/[kategorie]/[unterkategorie].astro
+++ b/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">