HasiDog: kleiner Inline-Link statt großem Button auf der Unterkategorie-Seite, verlinkt jetzt zur Dogfather-Universum-Seite von HasiDog

src/content/categories/diy-plushies.json

@@ -44,7 +44,7 @@
         "ch": "Hoi, ig bi dr HasiDog.\nIg bi chli, härzig, wuschelig und verspielt, aber o en grosse, freche Abentürer.",
         "fr": "Bonjour, je suis HasiDog.\nJe suis petit, tout doux, ébouriffé et joueur — mais aussi un grand aventurier un brin coquin."
       },
-      "mehrLink": "/hasidog/"
+      "mehrLink": "https://dogfather-universe.dogfather1608.workers.dev/hasidog.html"
     },
     {
       "slug": "wal-sam",

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

@@ -34,11 +34,16 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
       {sub.vorstellung && (
         <div class="character-intro">
           {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
+          {sub.mehrLink && (
+            <p class="character-more">
+              Wosch meh über {sub.name[lang]} wüsse? Klick da:{" "}
+              <a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
+            </p>
+          )}
         </div>
       )}
       <p class="small">{t.shop.subcategoryEmpty}</p>
       <div class="btn-row">
-        {sub.mehrLink && <a class="btn btn-primary" href={`/ch${sub.mehrLink}`}>{t.shop.moreAbout} {sub.name[lang]} →</a>}
         <a class="btn btn-outline" href={`/ch/shop/${category.slug}/`}>← {category.name[lang]}</a>
         <a class="btn btn-outline" href="/ch/shop/">{t.common.toShop}</a>
       </div>

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

@@ -34,11 +34,16 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
       {sub.vorstellung && (
         <div class="character-intro">
           {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
+          {sub.mehrLink && (
+            <p class="character-more">
+              Want to learn more about {sub.name[lang]}? Click here:{" "}
+              <a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
+            </p>
+          )}
         </div>
       )}
       <p class="small">{t.shop.subcategoryEmpty}</p>
       <div class="btn-row">
-        {sub.mehrLink && <a class="btn btn-primary" href={`/en${sub.mehrLink}`}>{t.shop.moreAbout} {sub.name[lang]} →</a>}
         <a class="btn btn-outline" href={`/en/shop/${category.slug}/`}>← {category.name[lang]}</a>
         <a class="btn btn-outline" href="/en/shop/">{t.common.toShop}</a>
       </div>

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

@@ -34,11 +34,16 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
       {sub.vorstellung && (
         <div class="character-intro">
           {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
+          {sub.mehrLink && (
+            <p class="character-more">
+              Tu veux en savoir plus sur {sub.name[lang]} ? Clique ici :{" "}
+              <a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
+            </p>
+          )}
         </div>
       )}
       <p class="small">{t.shop.subcategoryEmpty}</p>
       <div class="btn-row">
-        {sub.mehrLink && <a class="btn btn-primary" href={`/fr${sub.mehrLink}`}>{t.shop.moreAbout} {sub.name[lang]} →</a>}
         <a class="btn btn-outline" href={`/fr/shop/${category.slug}/`}>← {category.name[lang]}</a>
         <a class="btn btn-outline" href="/fr/shop/">{t.common.toShop}</a>
       </div>

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

@@ -34,11 +34,16 @@ const sub = getSubcategory(kategorie!, unterkategorie!)!;
       {sub.vorstellung && (
         <div class="character-intro">
           {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
+          {sub.mehrLink && (
+            <p class="character-more">
+              Du willst mehr über {sub.name[lang]} erfahren, dann klicke hier:{" "}
+              <a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
+            </p>
+          )}
         </div>
       )}
       <p class="small">{t.shop.subcategoryEmpty}</p>
       <div class="btn-row">
-        {sub.mehrLink && <a class="btn btn-primary" href={sub.mehrLink}>{t.shop.moreAbout} {sub.name[lang]} →</a>}
         <a class="btn btn-outline" href={`/shop/${category.slug}/`}>← {category.name[lang]}</a>
         <a class="btn btn-outline" href="/shop/">{t.common.toShop}</a>
       </div>

src/styles/global.css

@@ -674,6 +674,15 @@ a:focus-visible, button:focus-visible {
 }
 .character-intro p { margin: 0; white-space: pre-line; }
 .character-intro p:first-child { font-family: var(--font-head); font-weight: 600; color: var(--c-text); margin-bottom: 0.5em; }
+.character-intro p.character-more { margin-top: 0.9em; color: var(--c-text-muted); }
+.character-intro .character-more-link {
+  color: var(--c-accent);
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.2s var(--ease);
+}
+.character-intro .character-more-link:hover { text-decoration-color: currentColor; }
 
 /* Seiten-Banner (Shop, Sale, ...): echtes Foto/Grafik als Kopfbild mit Verlauf-Überblendung
    unten, damit Titel/Text darauf lesbar bleiben — ersetzt die reine Text-Kopfzeile durch ein