Checkout-Fenster deutlich breiter; PayPal auf einen sauberen Button reduziert; Klarna verbindet automatisch bei Auswahl

- Das Zahlungsart/Kontakt-Fenster war unabsichtlich auf 560px begrenzt
  (geerbtes Formular-Limit von Kontakt-/Konto-Seite) — jetzt nutzt es die
  volle verfügbare Spaltenbreite (~820px statt 560px).
- PayPal-Button zeigt jetzt nur noch den einen echten PayPal-Button statt
  zusätzlich einem redundanten "Debit- oder Kreditkarte"-Button (dafür
  gibt's ja schon die eigene Kreditkarte-Zahlungsart) — ein Klick auf die
  PayPal-Karte, ein Klick auf den einen PayPal-Button, direkt der echte
  Login-Popup. Mehr geht aus Sicherheitsgründen bei keinem Shop weltweit:
  PayPal öffnet den Login-Popup nur bei einem echten Klick auf ihr
  eigenes Button-Element, nie automatisiert per Skript (Schutz vor
  Missbrauch/Clickjacking).
- Klarna verbindet jetzt automatisch, sobald die Karte ausgewählt wird —
  kein zusätzlicher Klick auf einen Verbinden-Button mehr nötig
  (Kreditkarte und Banküberweisung waren bereits ohne Extra-Klick).

Verifiziert per Puppeteer: Formularbreite jetzt 820px (vorher 560px),
Klarna verbindet automatisch beim Auswählen, keine Konsolenfehler.

src/pages/ch/checkout/index.astro

@@ -208,7 +208,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
     if (paypalLoaded || !document.getElementById("paypal-button-container")) return;
     paypalLoaded = true;
     const script = document.createElement("script");
-    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture";
+    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture&disable-funding=card,credit";
     script.onload = () => {
       if (!window.paypal) return;
       window.paypal.Buttons({
@@ -228,16 +228,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht.
   const klarnaBtn = document.getElementById("klarna-connect");
   const klarnaStatus = document.getElementById("klarna-status");
+  function connectKlarna() {
+    if (!klarnaBtn || klarnaBtn.disabled) return;
+    klarnaBtn.disabled = true;
+    klarnaBtn.textContent = klarnaConnectingLabel;
+    setTimeout(() => {
+      klarnaBtn.textContent = klarnaConnectLabel;
+      klarnaBtn.disabled = false;
+      klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
+    }, 1100);
+  }
   if (klarnaBtn) {
-    klarnaBtn.addEventListener("click", () => {
-      klarnaBtn.disabled = true;
-      klarnaBtn.textContent = klarnaConnectingLabel;
-      setTimeout(() => {
-        klarnaBtn.textContent = klarnaConnectLabel;
-        klarnaBtn.disabled = false;
-        klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
-      }, 1100);
-    });
+    klarnaBtn.addEventListener("click", connectKlarna);
+    const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]');
+    // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick
+    // auf den Button nötig (der bleibt als "erneut verbinden" erhalten).
+    klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); });
   }
 
   // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte,

src/pages/checkout/index.astro

@@ -211,7 +211,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../data/bankverbi
     if (paypalLoaded || !document.getElementById("paypal-button-container")) return;
     paypalLoaded = true;
     const script = document.createElement("script");
-    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture";
+    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture&disable-funding=card,credit";
     script.onload = () => {
       if (!window.paypal) return;
       window.paypal.Buttons({
@@ -231,16 +231,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../data/bankverbi
   // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht.
   const klarnaBtn = document.getElementById("klarna-connect");
   const klarnaStatus = document.getElementById("klarna-status");
+  function connectKlarna() {
+    if (!klarnaBtn || klarnaBtn.disabled) return;
+    klarnaBtn.disabled = true;
+    klarnaBtn.textContent = klarnaConnectingLabel;
+    setTimeout(() => {
+      klarnaBtn.textContent = klarnaConnectLabel;
+      klarnaBtn.disabled = false;
+      klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
+    }, 1100);
+  }
   if (klarnaBtn) {
-    klarnaBtn.addEventListener("click", () => {
-      klarnaBtn.disabled = true;
-      klarnaBtn.textContent = klarnaConnectingLabel;
-      setTimeout(() => {
-        klarnaBtn.textContent = klarnaConnectLabel;
-        klarnaBtn.disabled = false;
-        klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
-      }, 1100);
-    });
+    klarnaBtn.addEventListener("click", connectKlarna);
+    const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]');
+    // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick
+    // auf den Button nötig (der bleibt als "erneut verbinden" erhalten).
+    klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); });
   }
 
   // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte,

src/pages/en/checkout/index.astro

@@ -208,7 +208,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
     if (paypalLoaded || !document.getElementById("paypal-button-container")) return;
     paypalLoaded = true;
     const script = document.createElement("script");
-    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture";
+    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture&disable-funding=card,credit";
     script.onload = () => {
       if (!window.paypal) return;
       window.paypal.Buttons({
@@ -228,16 +228,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht.
   const klarnaBtn = document.getElementById("klarna-connect");
   const klarnaStatus = document.getElementById("klarna-status");
+  function connectKlarna() {
+    if (!klarnaBtn || klarnaBtn.disabled) return;
+    klarnaBtn.disabled = true;
+    klarnaBtn.textContent = klarnaConnectingLabel;
+    setTimeout(() => {
+      klarnaBtn.textContent = klarnaConnectLabel;
+      klarnaBtn.disabled = false;
+      klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
+    }, 1100);
+  }
   if (klarnaBtn) {
-    klarnaBtn.addEventListener("click", () => {
-      klarnaBtn.disabled = true;
-      klarnaBtn.textContent = klarnaConnectingLabel;
-      setTimeout(() => {
-        klarnaBtn.textContent = klarnaConnectLabel;
-        klarnaBtn.disabled = false;
-        klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
-      }, 1100);
-    });
+    klarnaBtn.addEventListener("click", connectKlarna);
+    const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]');
+    // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick
+    // auf den Button nötig (der bleibt als "erneut verbinden" erhalten).
+    klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); });
   }
 
   // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte,

src/pages/fr/checkout/index.astro

@@ -208,7 +208,7 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
     if (paypalLoaded || !document.getElementById("paypal-button-container")) return;
     paypalLoaded = true;
     const script = document.createElement("script");
-    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture";
+    script.src = "https://www.paypal.com/sdk/js?client-id=sb&currency=EUR&intent=capture&disable-funding=card,credit";
     script.onload = () => {
       if (!window.paypal) return;
       window.paypal.Buttons({
@@ -228,16 +228,22 @@ import { bankverbindung, bankverbindungVollstaendig } from "../../../data/bankve
   // die Oberfläche schon fertig aussieht und 1:1 austauschbar ist, sobald die Anbindung steht.
   const klarnaBtn = document.getElementById("klarna-connect");
   const klarnaStatus = document.getElementById("klarna-status");
+  function connectKlarna() {
+    if (!klarnaBtn || klarnaBtn.disabled) return;
+    klarnaBtn.disabled = true;
+    klarnaBtn.textContent = klarnaConnectingLabel;
+    setTimeout(() => {
+      klarnaBtn.textContent = klarnaConnectLabel;
+      klarnaBtn.disabled = false;
+      klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
+    }, 1100);
+  }
   if (klarnaBtn) {
-    klarnaBtn.addEventListener("click", () => {
-      klarnaBtn.disabled = true;
-      klarnaBtn.textContent = klarnaConnectingLabel;
-      setTimeout(() => {
-        klarnaBtn.textContent = klarnaConnectLabel;
-        klarnaBtn.disabled = false;
-        klarnaStatus.textContent = "✅ " + klarnaConnectedLabel;
-      }, 1100);
-    });
+    klarnaBtn.addEventListener("click", connectKlarna);
+    const klarnaRadio = document.querySelector('input[name="pay"][value="klarna"]');
+    // Verbindet automatisch, sobald die Klarna-Karte ausgewählt wird — kein separater Klick
+    // auf den Button nötig (der bleibt als "erneut verbinden" erhalten).
+    klarnaRadio?.addEventListener("change", () => { if (!klarnaStatus.textContent) connectKlarna(); });
   }
 
   // Banküberweisung (Vorkasse): braucht KEINE externe Anbindung — zeigt einfach VanVans echte,

src/styles/global.css

@@ -970,7 +970,10 @@ a:focus-visible, button:focus-visible {
 @media (max-width: 800px) { .cart-layout { grid-template-columns: 1fr; } }
 
 /* Checkout */
-.checkout-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; }
+.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
+/* Das Checkout-Formular soll die volle Spaltenbreite ausnutzen — .frm hat sonst sitesweit ein
+   schmales max-width (passend für Kontakt/Konto), das hier ausdrücklich aufgehoben wird. */
+#checkout-form { max-width: none; }
 
 /* "1. Zahlungsart" und "2. Kontakt & Lieferadresse" nebeneinander statt gestapelt, getrennt
    durch eine dezente Verlaufslinie mit kleinem Garnrollen-Symbol in der Mitte — spielt auf