Checkout-Zahlungsarten: Karten klappen sofort beim Anklicken auf; HasiDog-Box zeigt Charaktertext & ist breiter

- Zahlungsart-Auswahl umgebaut: jede Karte (PayPal/Klarna/Kreditkarte/
  Banküberweisung) klappt den passenden "Verbinden"-Bereich jetzt SOFORT
  in sich selbst auf, sobald man draufklickt — kein Zwischenschritt, kein
  separates Panel weiter unten mehr. Rein CSS-gesteuert (:has()), reagiert
  augenblicklich auf den Klick.
- Unterkategorie-Vorstellungsbox (z.B. HasiDog) zeigt jetzt wieder den
  persönlichen Charaktertext ("Ich bin klein, knuffig, wuschelig...")
  statt der Produktbeschreibung, plus den Cliffhanger-Satz "Wenn du mehr
  über mich erfahren möchtest, dann klicke" vor dem Button — für alle 6
  Tier-Serien (Kuh, Hase, Wal, Oktopus, Schildkröte, Pinguin). Foto und
  Überschrift sind jetzt anklickbar und führen zur echten Produktseite,
  damit trotz des reinen Charaktertexts nichts an Kaufbarkeit verloren
  geht. Textspalte gegenüber Fotospalte verbreitert.

Verifiziert per Puppeteer gegen den echten Build: PayPal-Karte zeigt beim
Laden sofort den echten SDK-Button, Kreditkarte/Banküberweisung klappen
unmittelbar beim Klick auf (ohne Wartezeit geprüft), Bankdaten und
Charaktertext korrekt, keine Konsolenfehler.

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

@@ -38,20 +38,20 @@ const weitere = echtProdukte.slice(1);
   {featured ? (
     <section class="section-tight">
       <div class="container grid grid-2 intro">
-        <div class="portrait-frame portrait">
+        <a class="portrait-frame portrait" href={`/en/produkt/${featured.slug}/`} aria-label={featured.name[lang]}>
           {featured.bilder && featured.bilder.length > 0 ? (
             <img class="product-photo" src={featured.bilder[0]} alt={featured.name[lang]} loading="lazy" />
           ) : (
             <div class="img-placeholder" role="img" aria-label={featured.name[lang]}></div>
           )}
-        </div>
+        </a>
         <div>
           {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
-          <h2>{featured.name[lang]}</h2>
-          <p class="lead">{featured.beschreibung[lang]}</p>
+          <h2><a href={`/en/produkt/${featured.slug}/`}>{featured.name[lang]}</a></h2>
+          <p class="lead">{sub.vorstellung ? sub.vorstellung[lang].split("\n")[1] : featured.beschreibung[lang]}</p>
           {sub.mehrLink && (
             <div class="character-more">
-              <p>Want to learn more about {sub.name[lang]}?</p>
+              <p>If you'd like to learn more about me, just click</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
             </div>
           )}
@@ -66,7 +66,7 @@ const weitere = echtProdukte.slice(1);
             {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
             {sub.mehrLink && (
               <div class="character-more">
-                <p>Want to learn more about {sub.name[lang]}?</p>
+                <p>If you'd like to learn more about me, just click</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
               </div>
             )}