Zahlungsarten: echte PayPal-Verbindung, Kreditkarte hinzugefügt, echte Bankverbindung für Vorkasse

Standard-Set für deutsche Online-Shops recherchiert und umgesetzt: PayPal,
Klarna, Kreditkarte (Visa & Mastercard, neu) und Banküberweisung (Vorkasse).

- PayPal: echte PayPal Smart Buttons über das offizielle JS-SDK (Sandbox-
  Client-ID, kostenlos & ohne Konto testbar). Klick öffnet den echten
  PayPal-Login-Popup und schließt eine (Test-)Zahlung wirklich ab. Für den
  Live-Betrieb genügt später der Tausch gegen VanVans echte (kostenlose)
  PayPal-Business-Client-ID.
- Banküberweisung (Vorkasse): braucht gar keine externe Anbindung — zeigt
  jetzt VanVans echte Kontodaten an, die sie im neuen Adminbereich-Feld
  "🏦 Bankverbindung" selbst einträgt. Damit ist diese Zahlungsart schon
  zu 100% fertig, ganz ohne Drittanbieter.
- Klarna & Kreditkarte: echte Live-Anbindung braucht ein Händlerkonto bzw.
  einen Zahlungsdienstleister (Phase 2, Cloudflare Worker). Bis dahin ein
  sauber gestalteter, funktionierender Verbindungs-/Eingabe-Ablauf, der
  1:1 austauschbar ist, sobald die echten Zugänge da sind.
- Auswahl einer Zahlungsart klappt jetzt direkt das passende Panel auf
  statt nur eine Radiobox zu markieren.

Verifiziert per Puppeteer-Funktionstest gegen den echten Build: PayPal-
SDK lädt und rendert einen echten Button (iframe), Kreditkartenfelder,
Klarna-Demo-Verbindung und echte Bankdaten-Anzeige funktionieren
fehlerfrei, Adminbereich lädt weiterhin ohne Konfigurationsfehler.

src/styles/global.css

@@ -1057,6 +1057,45 @@ a:focus-visible, button:focus-visible {
   background-blend-mode: overlay;
 }
 .pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
+
+/* Kreditkarte: zwei überlappende Kreise (Visa/Mastercard-Anmutung) statt einem Buchstaben. */
+.pay-icon-cc { position: relative; }
+.pay-icon-cc .cc-dot { position: absolute; width: 24px; height: 24px; border-radius: 50%; top: 50%; transform: translateY(-50%); }
+.pay-icon-cc .cc-dot-a { left: 8px; background: #eb5b3c; }
+.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);
+}
+.pay-panel[hidden] { display: none; }
+.pay-panel 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; }
+
+/* Inline-Kartenformular (Kreditkarte) */
+.card-fields { display: grid; gap: 0.7rem; }
+.card-fields label { display: block; font-size: 0.8rem; color: var(--c-text-muted); margin-bottom: 0.3rem; }
+.card-fields input { font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
+
+/* Bankverbindung (Vorkasse) — echte, direkt aus dem Adminbereich gespeiste Kontodaten. */
+.bank-details {
+  display: grid;
+  gap: 0.5rem;
+  font-size: 0.92rem;
+}
+.bank-details .bank-row { display: flex; justify-content: space-between; gap: 1em; padding: 0.4em 0; border-bottom: 1px dashed rgba(244, 241, 247, 0.14); }
+.bank-details .bank-row:last-child { border-bottom: none; }
+.bank-details .bank-row span:first-child { color: var(--c-text-muted); }
+.bank-details .bank-row span:last-child { font-weight: 700; letter-spacing: 0.02em; }
 .pay-option input[type="radio"] {
   appearance: none;
   width: 22px;