diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index 3a10fa8..b794b01 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/src/pages/ch/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -191,17 +196,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro b/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
index 47709d4..1fb97c7 100644
--- a/src/pages/ch/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/ch/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={`/ch/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={`/ch/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>Wosch meh über {sub.name[lang]} wüsse?</p>
+              <p>Wenn du meh über mich wüsse witt, de klick</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</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>Wosch meh über {sub.name[lang]} wüsse?</p>
+                <p>Wenn du meh über mich wüsse witt, de klick</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
               </div>
             )}
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index d665592..4f9c7ac 100644
--- a/src/pages/checkout/index.astro
+++ b/src/pages/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -194,17 +199,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../data/bankverbi
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index bdb1b7e..dedbcdf 100644
--- a/src/pages/en/checkout/index.astro
+++ b/src/pages/en/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -191,17 +196,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/en/shop/[kategorie]/[unterkategorie].astro b/src/pages/en/shop/[kategorie]/[unterkategorie].astro
index 7609965..86f1d5f 100644
--- a/src/pages/en/shop/[kategorie]/[unterkategorie].astro
+++ b/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>
             )}
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index 63a062a..ec3a102 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/src/pages/fr/checkout/index.astro
@@ -22,56 +22,61 @@ const t = useTranslations(lang);
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
-          <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
-            <span>PayPal</span>
-            <input type="radio" name="pay" value="paypal" checked />
-          </label>
-          <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
-            <span>Klarna</span>
-            <input type="radio" name="pay" value="klarna" />
-          </label>
-          <label class="pay-option" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
-            <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-              <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
-            </span>
-            <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
-            <input type="radio" name="pay" value="kreditkarte" />
-          </label>
-          <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
-            <span>{t.checkout.bankTransfer}</span>
-            <input type="radio" name="pay" value="ueberweisung" />
-          </label>
-        </div>
-
-        <div class="pay-connect">
-          <div class="pay-panel" data-panel="paypal">
-            <p>{t.checkout.payPalHint}</p>
-            <div id="paypal-button-container"></div>
+          <div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
+              <span>PayPal</span>
+              <input type="radio" name="pay" value="paypal" checked />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.payPalHint}</p>
+              <div id="paypal-button-container"></div>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="klarna" hidden>
-            <p>{t.checkout.klarnaHint}</p>
-            <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
-            <p class="pay-connect-status" id="klarna-status"></p>
+          <div class="pay-card" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
+            <label class="pay-option">
+              <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
+              <span>Klarna</span>
+              <input type="radio" name="pay" value="klarna" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.klarnaHint}</p>
+              <button type="button" class="btn btn-outline pay-connect-btn" id="klarna-connect">{t.checkout.klarnaConnect}</button>
+              <p class="pay-connect-status" id="klarna-status"></p>
+            </div>
           </div>
-          <div class="pay-panel" data-panel="kreditkarte" hidden>
-            <p>{t.checkout.cardHint}</p>
-            <div class="card-fields">
-              <div>
-                <label for="cc-number">{t.checkout.cardNumber}</label>
-                <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
-              </div>
-              <div class="grid grid-2">
-                <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
-                <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
+                <span class="cc-dot cc-dot-a"></span><span class="cc-dot cc-dot-b"></span>
+              </span>
+              <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
+              <input type="radio" name="pay" value="kreditkarte" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.cardHint}</p>
+              <div class="card-fields">
+                <div>
+                  <label for="cc-number">{t.checkout.cardNumber}</label>
+                  <input type="text" id="cc-number" inputmode="numeric" placeholder="1234 5678 9012 3456" maxlength="19" />
+                </div>
+                <div class="grid grid-2">
+                  <div><label for="cc-expiry">{t.checkout.cardExpiry}</label><input type="text" id="cc-expiry" placeholder="MM/YY" maxlength="5" /></div>
+                  <div><label for="cc-cvc">{t.checkout.cardCvc}</label><input type="text" id="cc-cvc" inputmode="numeric" placeholder="123" maxlength="4" /></div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="pay-panel" data-panel="ueberweisung" hidden>
-            <p>{t.checkout.bankHintReal}</p>
-            <div class="bank-details" id="bank-details"></div>
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
+            <label class="pay-option">
+              <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
+              <span>{t.checkout.bankTransfer}</span>
+              <input type="radio" name="pay" value="ueberweisung" />
+            </label>
+            <div class="pay-panel-inline">
+              <p>{t.checkout.bankHintReal}</p>
+              <div class="bank-details" id="bank-details"></div>
+            </div>
           </div>
         </div>
 
@@ -191,17 +196,8 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   renderSummary();
   landSelect.addEventListener("change", renderSummary);
 
-  // Zahlungsart-Auswahl: pro Methode ein Panel, nur die gewählte ist sichtbar. Macht die
-  // Auswahl sofort "aktionabel" statt ein reines Formularfeld zu sein.
-  const payPanels = document.querySelectorAll(".pay-panel");
-  function showPayPanel(method) {
-    payPanels.forEach((p) => { p.hidden = p.dataset.panel !== method; });
-  }
-  document.querySelectorAll('input[name="pay"]').forEach((radio) => {
-    radio.addEventListener("change", () => showPayPanel(radio.value));
-  });
-  const initialPay = document.querySelector('input[name="pay"]:checked');
-  if (initialPay) showPayPanel(initialPay.value);
+  // Zahlungsart-Auswahl: der "Verbinden"-Bereich jeder Karte klappt rein über CSS
+  // (:has(input:checked)) sofort auf, sobald man die Karte anklickt — kein JS, keine Verzögerung.
 
   // PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-Client-ID "sb" —
   // kostenlos, ohne eigenes Konto testbar). Klick öffnet den echten PayPal-Login-Popup. Für den
diff --git a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro b/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
index 57c353f..77d8f5e 100644
--- a/src/pages/fr/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/fr/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={`/fr/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={`/fr/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>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
+              <p>Si tu veux en savoir plus sur moi, clique</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</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>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
+                <p>Si tu veux en savoir plus sur moi, clique</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
               </div>
             )}
diff --git a/src/pages/shop/[kategorie]/[unterkategorie].astro b/src/pages/shop/[kategorie]/[unterkategorie].astro
index e0b754d..ae219e8 100644
--- a/src/pages/shop/[kategorie]/[unterkategorie].astro
+++ b/src/pages/shop/[kategorie]/[unterkategorie].astro
@@ -41,20 +41,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={`/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={`/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>Du willst mehr über {sub.name[lang]} erfahren?</p>
+              <p>Wenn du mehr über mich erfahren möchtest, dann klicke</p>
               <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
             </div>
           )}
@@ -69,7 +69,7 @@ const weitere = echtProdukte.slice(1);
             {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
             {sub.mehrLink && (
               <div class="character-more">
-                <p>Du willst mehr über {sub.name[lang]} erfahren?</p>
+                <p>Wenn du mehr über mich erfahren möchtest, dann klicke</p>
                 <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
               </div>
             )}
diff --git a/src/styles/global.css b/src/styles/global.css
index d25e0af..221bee0 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -604,7 +604,11 @@ a:focus-visible, button:focus-visible {
 .creator-photo { max-width: 420px; margin-inline: auto; }
 
 /* "Über die Kreative" */
-.intro { align-items: center; }
+.intro { align-items: center; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; }
+.intro h2 a { color: inherit; transition: color 0.2s var(--ease); }
+.intro h2 a:hover { color: var(--c-accent); }
+.intro .portrait-frame.portrait { display: block; }
+@media (max-width: 800px) { .intro { grid-template-columns: 1fr; gap: 1.5rem; } }
 /* Breiter als vorher (war 440px) + Seitenverhältnis nah am Originalfoto (900x1353 ≈ 2/3)
    statt 3/4 — vorher wurde oben/unten so stark beschnitten, dass das Plushie neben VanVan
    (Oktopus) nur noch als Ecke sichtbar war. So ist das ganze Foto inkl. beider Plushies zu sehen. */
@@ -1022,26 +1026,38 @@ a:focus-visible, button:focus-visible {
 }
 
 /* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum
-   restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). */
+   restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). Jede Karte klappt SOFORT
+   beim Anklicken den passenden "Verbinden"-Bereich direkt in sich selbst auf (reines CSS über
+   :has(), kein Zwischenschritt, kein separates Panel weiter unten). */
 .payment-options { display: grid; gap: 0.85rem; }
+.pay-card {
+  border: 1.5px solid rgba(244, 241, 247, 0.12);
+  border-radius: var(--radius-l);
+  background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
+  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
+  overflow: hidden;
+}
+.pay-card:hover {
+  border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
+}
+.pay-card:has(input:checked) {
+  border-color: var(--brand-color, var(--c-accent));
+  background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
+}
+.pay-card:has(input:checked) .pay-option span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
+
 .pay-option {
   position: relative;
   display: flex;
   align-items: center;
   gap: 1.1em;
   padding: 1.15em 1.3em;
-  border: 1.5px solid rgba(244, 241, 247, 0.12);
-  border-radius: var(--radius-l);
   font-size: 1.02rem;
   font-weight: 700;
   cursor: pointer;
-  background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
-  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
-}
-.pay-option:hover {
-  border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
-  transform: translateY(-2px);
-  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
 }
 
 /* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Wortmarke) statt schlichtem Emoji —
@@ -1072,18 +1088,16 @@ a:focus-visible, button:focus-visible {
 .pay-icon-cc .cc-dot-b { left: 20px; background: #f7b73c; mix-blend-mode: screen; }
 .pay-option .pay-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.1em; }
 
-/* Ausklappbarer "Verbinden"-Bereich unter der Zahlungsart-Auswahl: pro Methode ein Panel, nur
-   das zur ausgewählten Zahlungsart passende ist sichtbar. Macht die Auswahl sofort "aktionabel"
-   statt nur ein reines Auswahlfeld zu sein. */
-.pay-connect {
-  margin-top: 1.1rem;
-  padding: 1.1rem 1.2rem;
-  border-radius: var(--radius-m);
-  background: color-mix(in srgb, var(--c-accent) 6%, var(--c-anthracite));
-  border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
+/* Der "Verbinden"-Bereich sitzt DIREKT in der Karte selbst und klappt beim Anklicken sofort auf —
+   kein separates Panel, kein zweiter Klick nötig. */
+.pay-panel-inline {
+  display: none;
+  padding: 0.2rem 1.3em 1.3em;
+  border-top: 1px dashed rgba(244, 241, 247, 0.16);
+  margin: 0 1.3em;
 }
-.pay-panel[hidden] { display: none; }
-.pay-panel p { margin: 0 0 0.8em; color: var(--c-text-muted); font-size: 0.88rem; }
+.pay-card:has(input:checked) .pay-panel-inline { display: block; padding-top: 1rem; }
+.pay-panel-inline p { margin: 0 0 0.8em; color: var(--c-text-muted); font-size: 0.88rem; }
 .pay-connect-btn { width: 100%; }
 .pay-connect-btn[disabled] { opacity: 0.75; cursor: default; }
 .pay-connect-status { margin: 0.7em 0 0; font-size: 0.88rem; color: var(--c-accent); font-weight: 600; }
@@ -1127,12 +1141,6 @@ a:focus-visible, button:focus-visible {
 }
 .pay-option input[type="radio"]:checked::before { transform: scale(1); }
 .pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
-.pay-option:has(input:checked) {
-  border-color: var(--brand-color, var(--c-accent));
-  background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
-}
-.pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
 
 .checkout-summary .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.35rem 0; color: var(--c-text-muted); }