diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 24f76e2..c4bfd47 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -215,6 +215,8 @@ export const ui = {
       showPassword: "Passwort anzeigen", hidePassword: "Passwort verbergen",
       rememberMe: "Angemeldet bleiben",
       consentPrefix: "Mit der Anmeldung akzeptierst du unsere", consentLink: "Datenschutzerklärung", consentSuffix: ".",
+      previewLink: "👁 Vorschau: So sieht der Bereich für angemeldete Kund:innen aus",
+      previewName: "Marie L.",
     },
     accountDash: {
       eyebrow: "Mein Konto", greeting: (name: string) => `Hallo ${name} 🩵`, lead: "Schön, dass du wieder da bist. Hier findest du alle deine Bestellungen, deine Wunschliste und deine Daten auf einen Blick.",
@@ -443,6 +445,8 @@ export const ui = {
       showPassword: "Show password", hidePassword: "Hide password",
       rememberMe: "Keep me signed in",
       consentPrefix: "By signing in you accept our", consentLink: "privacy policy", consentSuffix: ".",
+      previewLink: "👁 Preview: what signed-in customers see",
+      previewName: "Marie L.",
     },
     accountDash: {
       eyebrow: "My Account", greeting: (name: string) => `Hello ${name} 🩵`, lead: "Good to see you again. Here you'll find all your orders, your wishlist and your details at a glance.",
@@ -671,6 +675,8 @@ export const ui = {
       showPassword: "Passwort azeige", hidePassword: "Passwort verstecke",
       rememberMe: "Aagmäldet bliebe",
       consentPrefix: "Mit dr Aamäldig akzeptiersch üsi", consentLink: "Datenschutzerklärig", consentSuffix: ".",
+      previewLink: "👁 Vorschau: so gseht dr Bereich für aagmäldeti Kund:ine us",
+      previewName: "Marie L.",
     },
     accountDash: {
       eyebrow: "Mis Konto", greeting: (name: string) => `Hoi ${name} 🩵`, lead: "Schön, bisch wieder da. Da findsch alli dini Bstellige, dini Wunschlischte und dini Date uf ein Blick.",
@@ -899,6 +905,8 @@ export const ui = {
       showPassword: "Afficher le mot de passe", hidePassword: "Masquer le mot de passe",
       rememberMe: "Rester connecté(e)",
       consentPrefix: "En vous connectant, vous acceptez notre", consentLink: "politique de confidentialité", consentSuffix: ".",
+      previewLink: "👁 Aperçu : ce que voient les client(e)s connecté(e)s",
+      previewName: "Marie L.",
     },
     accountDash: {
       eyebrow: "Mon compte", greeting: (name: string) => `Bonjour ${name} 🩵`, lead: "Ravie de vous revoir. Retrouvez ici toutes vos commandes, votre liste de souhaits et vos données en un coup d'œil.",
diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index bff2dd2..50f3101 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/src/pages/ch/checkout/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.checkout.eyebrow}</span>
       <h1>{t.checkout.title}</h1>
-      <p class="todo-note">{t.checkout.todoNote}</p>
     </div>
   </section>
 
@@ -21,10 +20,18 @@ const t = useTranslations(lang);
         <div class="checkout-split">
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
+        {/* Echte Markenlogos statt Platzhaltern: PayPal- und Klarna-Icon in den offiziellen
+            Markenfarben, Visa/Mastercard als unveränderte "Acceptance Marks" nebeneinander —
+            genau die in den jeweiligen Markenrichtlinien vorgesehene Verwendung, um eine
+            Zahlungsmethode im Checkout auszuweisen (siehe Recherche zu PayPal-/Klarna-/Visa-/
+            Mastercard-Markenrichtlinien: Logos dürfen zur Kennzeichnung akzeptierter
+            Zahlungsarten verwendet werden, Visa/Mastercard aber nur unverändert/unverfälscht). */}
         <div class="payment-options">
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
+                <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+              </span>
               <span>PayPal</span>
               <input type="radio" name="pay" value="paypal" checked />
             </label>
@@ -35,7 +42,9 @@ const t = useTranslations(lang);
           </div>
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #ffd1de, #ffb3c7);">
+                <svg viewBox="0 0 24 24" width="26" height="26" fill="#0a0a0a" aria-hidden="true"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"></path></svg>
+              </span>
               <span>Klarna</span>
               <input type="radio" name="pay" value="klarna" />
             </label>
@@ -45,10 +54,15 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
             <label class="pay-option">
-              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
+              <span class="pay-icon-cards" aria-hidden="true">
+                <span class="mini-card mini-card-visa">
+                  <svg viewBox="0 0 24 24" width="28" height="28" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg>
+                </span>
+                <span class="mini-card mini-card-mastercard">
+                  <svg viewBox="0 0 32 20" width="32" height="20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg>
+                </span>
               </span>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />
@@ -69,7 +83,9 @@ const t = useTranslations(lang);
           </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 class="pay-icon" style="background:linear-gradient(160deg, #4d7599, #2c4258);">
+                <svg viewBox="0 0 24 24" width="27" height="27" fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9.5 12 4l10 5.5"></path><path d="M4 9.5V19M9 9.5V19M15 9.5V19M20 9.5V19"></path><path d="M2.5 19h19"></path></svg>
+              </span>
               <span>{t.checkout.bankTransfer}</span>
               <input type="radio" name="pay" value="ueberweisung" />
             </label>
@@ -149,6 +165,12 @@ const t = useTranslations(lang);
       </aside>
     </div>
   </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.checkout.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/ch/checkout/danke/", checkoutLang: lang, discountLabel: t.cart.discount, couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, klarnaConnectLabel: t.checkout.klarnaConnect, klarnaConnectingLabel: t.checkout.klarnaConnecting, klarnaConnectedLabel: t.checkout.klarnaConnected, bankHolderLabel: t.checkout.bankHolder, bankIbanLabel: t.checkout.bankIban, bankBicLabel: t.checkout.bankBic, bankBankNameLabel: t.checkout.bankBankName, bankPlaceholderLabel: t.checkout.bankPlaceholder, partnerDiscountLabel: t.cart.partnerDiscount, partnerCodeInvalid: t.cart.partnerCodeInvalid, partnerCodeAppliedTemplate: t.cart.partnerCodeApplied("__C__"), partnerCodeRemoveLabel: t.cart.partnerCodeRemove }}>
diff --git a/src/pages/ch/konto/index.astro b/src/pages/ch/konto/index.astro
index f8f2b8b..05d59b5 100644
--- a/src/pages/ch/konto/index.astro
+++ b/src/pages/ch/konto/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.account.eyebrow}</span>
       <h1>{t.account.title}</h1>
-      <p class="todo-note">{t.account.todoNote}</p>
     </div>
   </section>
 
@@ -36,7 +35,9 @@ const t = useTranslations(lang);
             {t.account.socialApple}
           </button>
           <button type="button" class="btn-social btn-social-paypal">
-            <span class="social-icon-badge" aria-hidden="true">P</span>
+            <span class="social-icon-badge" aria-hidden="true">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+            </span>
             {t.account.socialPaypal}
           </button>
           <p class="small social-note" id="social-note">{t.account.socialComingSoon}</p>
@@ -82,10 +83,26 @@ const t = useTranslations(lang);
       </div>
     </div>
   </section>
+
+  {/* Direkter Vorschau-Link auf den Kundenbereich für VanVan (und für uns zum Weiterarbeiten) —
+      loggt clientseitig mit einem Demo-Konto ein und leitet direkt zum Dashboard weiter, ganz
+      ohne das Formular jedes Mal neu auszufüllen. Rein clientseitig/localStorage, siehe
+      scripts/account.ts — es werden keine echten Kundendaten angelegt. */}
+  <section class="section-tight">
+    <div class="container">
+      <a class="small" href="#" id="preview-link" data-preview-name={t.account.previewName}>{t.account.previewLink}</a>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.account.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script>
-  import { login } from "../../../scripts/account";
+  import { login, setUsername } from "../../../scripts/account";
   const form = document.getElementById("login-form") as HTMLFormElement | null;
   const emailInput = document.getElementById("login-email") as HTMLInputElement | null;
   const error = document.getElementById("login-error");
@@ -101,6 +118,15 @@ const t = useTranslations(lang);
     window.location.href = "/ch/konto/angemeldet/";
   });
 
+  // Vorschau-Link: meldet mit einem Demo-Namen an und leitet direkt zum Kundenbereich weiter.
+  document.getElementById("preview-link")?.addEventListener("click", (e) => {
+    e.preventDefault();
+    const link = document.getElementById("preview-link") as HTMLAnchorElement | null;
+    login("vorschau@vans-diy-bastelbedarf.de");
+    if (link?.dataset.previewName) setUsername(link.dataset.previewName);
+    window.location.href = "/ch/konto/angemeldet/";
+  });
+
   // Passwort-Sichtbarkeits-Toggle — rein clientseitig, braucht kein Backend.
   const pwInput = document.getElementById("login-pw") as HTMLInputElement | null;
   const pwToggle = document.getElementById("login-pw-toggle") as HTMLButtonElement | null;
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index 4b00d13..7fab09e 100644
--- a/src/pages/checkout/index.astro
+++ b/src/pages/checkout/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.checkout.eyebrow}</span>
       <h1>{t.checkout.title}</h1>
-      <p class="todo-note">{t.checkout.todoNote}</p>
     </div>
   </section>
 
@@ -21,10 +20,18 @@ const t = useTranslations(lang);
         <div class="checkout-split">
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
+        {/* Echte Markenlogos statt Platzhaltern: PayPal- und Klarna-Icon in den offiziellen
+            Markenfarben, Visa/Mastercard als unveränderte "Acceptance Marks" nebeneinander —
+            genau die in den jeweiligen Markenrichtlinien vorgesehene Verwendung, um eine
+            Zahlungsmethode im Checkout auszuweisen (siehe Recherche zu PayPal-/Klarna-/Visa-/
+            Mastercard-Markenrichtlinien: Logos dürfen zur Kennzeichnung akzeptierter
+            Zahlungsarten verwendet werden, Visa/Mastercard aber nur unverändert/unverfälscht). */}
         <div class="payment-options">
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
+                <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+              </span>
               <span>PayPal</span>
               <input type="radio" name="pay" value="paypal" checked />
             </label>
@@ -35,7 +42,9 @@ const t = useTranslations(lang);
           </div>
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #ffd1de, #ffb3c7);">
+                <svg viewBox="0 0 24 24" width="26" height="26" fill="#0a0a0a" aria-hidden="true"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"></path></svg>
+              </span>
               <span>Klarna</span>
               <input type="radio" name="pay" value="klarna" />
             </label>
@@ -45,10 +54,15 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
             <label class="pay-option">
-              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
+              <span class="pay-icon-cards" aria-hidden="true">
+                <span class="mini-card mini-card-visa">
+                  <svg viewBox="0 0 24 24" width="28" height="28" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg>
+                </span>
+                <span class="mini-card mini-card-mastercard">
+                  <svg viewBox="0 0 32 20" width="32" height="20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg>
+                </span>
               </span>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />
@@ -69,7 +83,9 @@ const t = useTranslations(lang);
           </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 class="pay-icon" style="background:linear-gradient(160deg, #4d7599, #2c4258);">
+                <svg viewBox="0 0 24 24" width="27" height="27" fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9.5 12 4l10 5.5"></path><path d="M4 9.5V19M9 9.5V19M15 9.5V19M20 9.5V19"></path><path d="M2.5 19h19"></path></svg>
+              </span>
               <span>{t.checkout.bankTransfer}</span>
               <input type="radio" name="pay" value="ueberweisung" />
             </label>
@@ -149,6 +165,12 @@ const t = useTranslations(lang);
       </aside>
     </div>
   </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.checkout.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/checkout/danke/", checkoutLang: lang, discountLabel: t.cart.discount, couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, klarnaConnectLabel: t.checkout.klarnaConnect, klarnaConnectingLabel: t.checkout.klarnaConnecting, klarnaConnectedLabel: t.checkout.klarnaConnected, bankHolderLabel: t.checkout.bankHolder, bankIbanLabel: t.checkout.bankIban, bankBicLabel: t.checkout.bankBic, bankBankNameLabel: t.checkout.bankBankName, bankPlaceholderLabel: t.checkout.bankPlaceholder, partnerDiscountLabel: t.cart.partnerDiscount, partnerCodeInvalid: t.cart.partnerCodeInvalid, partnerCodeAppliedTemplate: t.cart.partnerCodeApplied("__C__"), partnerCodeRemoveLabel: t.cart.partnerCodeRemove }}>
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index 1164255..e7f57eb 100644
--- a/src/pages/en/checkout/index.astro
+++ b/src/pages/en/checkout/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.checkout.eyebrow}</span>
       <h1>{t.checkout.title}</h1>
-      <p class="todo-note">{t.checkout.todoNote}</p>
     </div>
   </section>
 
@@ -21,10 +20,18 @@ const t = useTranslations(lang);
         <div class="checkout-split">
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
+        {/* Echte Markenlogos statt Platzhaltern: PayPal- und Klarna-Icon in den offiziellen
+            Markenfarben, Visa/Mastercard als unveränderte "Acceptance Marks" nebeneinander —
+            genau die in den jeweiligen Markenrichtlinien vorgesehene Verwendung, um eine
+            Zahlungsmethode im Checkout auszuweisen (siehe Recherche zu PayPal-/Klarna-/Visa-/
+            Mastercard-Markenrichtlinien: Logos dürfen zur Kennzeichnung akzeptierter
+            Zahlungsarten verwendet werden, Visa/Mastercard aber nur unverändert/unverfälscht). */}
         <div class="payment-options">
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
+                <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+              </span>
               <span>PayPal</span>
               <input type="radio" name="pay" value="paypal" checked />
             </label>
@@ -35,7 +42,9 @@ const t = useTranslations(lang);
           </div>
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #ffd1de, #ffb3c7);">
+                <svg viewBox="0 0 24 24" width="26" height="26" fill="#0a0a0a" aria-hidden="true"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"></path></svg>
+              </span>
               <span>Klarna</span>
               <input type="radio" name="pay" value="klarna" />
             </label>
@@ -45,10 +54,15 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
             <label class="pay-option">
-              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
+              <span class="pay-icon-cards" aria-hidden="true">
+                <span class="mini-card mini-card-visa">
+                  <svg viewBox="0 0 24 24" width="28" height="28" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg>
+                </span>
+                <span class="mini-card mini-card-mastercard">
+                  <svg viewBox="0 0 32 20" width="32" height="20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg>
+                </span>
               </span>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />
@@ -69,7 +83,9 @@ const t = useTranslations(lang);
           </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 class="pay-icon" style="background:linear-gradient(160deg, #4d7599, #2c4258);">
+                <svg viewBox="0 0 24 24" width="27" height="27" fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9.5 12 4l10 5.5"></path><path d="M4 9.5V19M9 9.5V19M15 9.5V19M20 9.5V19"></path><path d="M2.5 19h19"></path></svg>
+              </span>
               <span>{t.checkout.bankTransfer}</span>
               <input type="radio" name="pay" value="ueberweisung" />
             </label>
@@ -149,6 +165,12 @@ const t = useTranslations(lang);
       </aside>
     </div>
   </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.checkout.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/en/checkout/danke/", checkoutLang: lang, discountLabel: t.cart.discount, couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, klarnaConnectLabel: t.checkout.klarnaConnect, klarnaConnectingLabel: t.checkout.klarnaConnecting, klarnaConnectedLabel: t.checkout.klarnaConnected, bankHolderLabel: t.checkout.bankHolder, bankIbanLabel: t.checkout.bankIban, bankBicLabel: t.checkout.bankBic, bankBankNameLabel: t.checkout.bankBankName, bankPlaceholderLabel: t.checkout.bankPlaceholder, partnerDiscountLabel: t.cart.partnerDiscount, partnerCodeInvalid: t.cart.partnerCodeInvalid, partnerCodeAppliedTemplate: t.cart.partnerCodeApplied("__C__"), partnerCodeRemoveLabel: t.cart.partnerCodeRemove }}>
diff --git a/src/pages/en/konto/index.astro b/src/pages/en/konto/index.astro
index 4040171..a3faf7d 100644
--- a/src/pages/en/konto/index.astro
+++ b/src/pages/en/konto/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.account.eyebrow}</span>
       <h1>{t.account.title}</h1>
-      <p class="todo-note">{t.account.todoNote}</p>
     </div>
   </section>
 
@@ -36,7 +35,9 @@ const t = useTranslations(lang);
             {t.account.socialApple}
           </button>
           <button type="button" class="btn-social btn-social-paypal">
-            <span class="social-icon-badge" aria-hidden="true">P</span>
+            <span class="social-icon-badge" aria-hidden="true">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+            </span>
             {t.account.socialPaypal}
           </button>
           <p class="small social-note" id="social-note">{t.account.socialComingSoon}</p>
@@ -82,10 +83,26 @@ const t = useTranslations(lang);
       </div>
     </div>
   </section>
+
+  {/* Direkter Vorschau-Link auf den Kundenbereich für VanVan (und für uns zum Weiterarbeiten) —
+      loggt clientseitig mit einem Demo-Konto ein und leitet direkt zum Dashboard weiter, ganz
+      ohne das Formular jedes Mal neu auszufüllen. Rein clientseitig/localStorage, siehe
+      scripts/account.ts — es werden keine echten Kundendaten angelegt. */}
+  <section class="section-tight">
+    <div class="container">
+      <a class="small" href="#" id="preview-link" data-preview-name={t.account.previewName}>{t.account.previewLink}</a>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.account.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script>
-  import { login } from "../../../scripts/account";
+  import { login, setUsername } from "../../../scripts/account";
   const form = document.getElementById("login-form") as HTMLFormElement | null;
   const emailInput = document.getElementById("login-email") as HTMLInputElement | null;
   const error = document.getElementById("login-error");
@@ -101,6 +118,15 @@ const t = useTranslations(lang);
     window.location.href = "/en/konto/angemeldet/";
   });
 
+  // Vorschau-Link: meldet mit einem Demo-Namen an und leitet direkt zum Kundenbereich weiter.
+  document.getElementById("preview-link")?.addEventListener("click", (e) => {
+    e.preventDefault();
+    const link = document.getElementById("preview-link") as HTMLAnchorElement | null;
+    login("vorschau@vans-diy-bastelbedarf.de");
+    if (link?.dataset.previewName) setUsername(link.dataset.previewName);
+    window.location.href = "/en/konto/angemeldet/";
+  });
+
   // Passwort-Sichtbarkeits-Toggle — rein clientseitig, braucht kein Backend.
   const pwInput = document.getElementById("login-pw") as HTMLInputElement | null;
   const pwToggle = document.getElementById("login-pw-toggle") as HTMLButtonElement | null;
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index 98dfbbe..3b79e5f 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/src/pages/fr/checkout/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.checkout.eyebrow}</span>
       <h1>{t.checkout.title}</h1>
-      <p class="todo-note">{t.checkout.todoNote}</p>
     </div>
   </section>
 
@@ -21,10 +20,18 @@ const t = useTranslations(lang);
         <div class="checkout-split">
         <div class="checkout-split-col">
         <h3>{t.checkout.step2}</h3>
+        {/* Echte Markenlogos statt Platzhaltern: PayPal- und Klarna-Icon in den offiziellen
+            Markenfarben, Visa/Mastercard als unveränderte "Acceptance Marks" nebeneinander —
+            genau die in den jeweiligen Markenrichtlinien vorgesehene Verwendung, um eine
+            Zahlungsmethode im Checkout auszuweisen (siehe Recherche zu PayPal-/Klarna-/Visa-/
+            Mastercard-Markenrichtlinien: Logos dürfen zur Kennzeichnung akzeptierter
+            Zahlungsarten verwendet werden, Visa/Mastercard aber nur unverändert/unverfälscht). */}
         <div class="payment-options">
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
+                <svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+              </span>
               <span>PayPal</span>
               <input type="radio" name="pay" value="paypal" checked />
             </label>
@@ -35,7 +42,9 @@ const t = useTranslations(lang);
           </div>
           <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 class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #ffd1de, #ffb3c7);">
+                <svg viewBox="0 0 24 24" width="26" height="26" fill="#0a0a0a" aria-hidden="true"><path d="M4.592 2v20H0V2h4.592zm11.46 0c0 4.194-1.583 8.105-4.415 11.068l-.278.283L17.702 22h-5.668l-6.893-9.4 1.779-1.332c2.858-2.14 4.535-5.378 4.637-8.924L11.562 2h4.49zM21.5 17a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"></path></svg>
+              </span>
               <span>Klarna</span>
               <input type="radio" name="pay" value="klarna" />
             </label>
@@ -45,10 +54,15 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#ff9838; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
             <label class="pay-option">
-              <span class="pay-icon pay-icon-cc" style="background:linear-gradient(160deg, #2a2a3d, #14141f);">
-                <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.2"></rect><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"></line><line x1="5.5" y1="14.5" x2="9.5" y2="14.5"></line></svg>
+              <span class="pay-icon-cards" aria-hidden="true">
+                <span class="mini-card mini-card-visa">
+                  <svg viewBox="0 0 24 24" width="28" height="28" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg>
+                </span>
+                <span class="mini-card mini-card-mastercard">
+                  <svg viewBox="0 0 32 20" width="32" height="20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg>
+                </span>
               </span>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />
@@ -69,7 +83,9 @@ const t = useTranslations(lang);
           </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 class="pay-icon" style="background:linear-gradient(160deg, #4d7599, #2c4258);">
+                <svg viewBox="0 0 24 24" width="27" height="27" fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 9.5 12 4l10 5.5"></path><path d="M4 9.5V19M9 9.5V19M15 9.5V19M20 9.5V19"></path><path d="M2.5 19h19"></path></svg>
+              </span>
               <span>{t.checkout.bankTransfer}</span>
               <input type="radio" name="pay" value="ueberweisung" />
             </label>
@@ -149,6 +165,12 @@ const t = useTranslations(lang);
       </aside>
     </div>
   </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.checkout.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script define:vars={{ freeLabel: t.checkout.free, totalLabel: t.checkout.total, shippingLabel: t.cart.shipping, emptyCartAlert: t.checkout.emptyCartAlert, thankYouPath: "/fr/checkout/danke/", checkoutLang: lang, discountLabel: t.cart.discount, couponInvalid: t.cart.couponInvalid, couponAppliedTemplate: t.cart.couponApplied("__C__"), couponRemoveLabel: t.cart.couponRemove, klarnaConnectLabel: t.checkout.klarnaConnect, klarnaConnectingLabel: t.checkout.klarnaConnecting, klarnaConnectedLabel: t.checkout.klarnaConnected, bankHolderLabel: t.checkout.bankHolder, bankIbanLabel: t.checkout.bankIban, bankBicLabel: t.checkout.bankBic, bankBankNameLabel: t.checkout.bankBankName, bankPlaceholderLabel: t.checkout.bankPlaceholder, partnerDiscountLabel: t.cart.partnerDiscount, partnerCodeInvalid: t.cart.partnerCodeInvalid, partnerCodeAppliedTemplate: t.cart.partnerCodeApplied("__C__"), partnerCodeRemoveLabel: t.cart.partnerCodeRemove }}>
diff --git a/src/pages/fr/konto/index.astro b/src/pages/fr/konto/index.astro
index 076cef0..d4f1283 100644
--- a/src/pages/fr/konto/index.astro
+++ b/src/pages/fr/konto/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.account.eyebrow}</span>
       <h1>{t.account.title}</h1>
-      <p class="todo-note">{t.account.todoNote}</p>
     </div>
   </section>
 
@@ -36,7 +35,9 @@ const t = useTranslations(lang);
             {t.account.socialApple}
           </button>
           <button type="button" class="btn-social btn-social-paypal">
-            <span class="social-icon-badge" aria-hidden="true">P</span>
+            <span class="social-icon-badge" aria-hidden="true">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+            </span>
             {t.account.socialPaypal}
           </button>
           <p class="small social-note" id="social-note">{t.account.socialComingSoon}</p>
@@ -82,10 +83,26 @@ const t = useTranslations(lang);
       </div>
     </div>
   </section>
+
+  {/* Direkter Vorschau-Link auf den Kundenbereich für VanVan (und für uns zum Weiterarbeiten) —
+      loggt clientseitig mit einem Demo-Konto ein und leitet direkt zum Dashboard weiter, ganz
+      ohne das Formular jedes Mal neu auszufüllen. Rein clientseitig/localStorage, siehe
+      scripts/account.ts — es werden keine echten Kundendaten angelegt. */}
+  <section class="section-tight">
+    <div class="container">
+      <a class="small" href="#" id="preview-link" data-preview-name={t.account.previewName}>{t.account.previewLink}</a>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.account.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script>
-  import { login } from "../../../scripts/account";
+  import { login, setUsername } from "../../../scripts/account";
   const form = document.getElementById("login-form") as HTMLFormElement | null;
   const emailInput = document.getElementById("login-email") as HTMLInputElement | null;
   const error = document.getElementById("login-error");
@@ -101,6 +118,15 @@ const t = useTranslations(lang);
     window.location.href = "/fr/konto/angemeldet/";
   });
 
+  // Vorschau-Link: meldet mit einem Demo-Namen an und leitet direkt zum Kundenbereich weiter.
+  document.getElementById("preview-link")?.addEventListener("click", (e) => {
+    e.preventDefault();
+    const link = document.getElementById("preview-link") as HTMLAnchorElement | null;
+    login("vorschau@vans-diy-bastelbedarf.de");
+    if (link?.dataset.previewName) setUsername(link.dataset.previewName);
+    window.location.href = "/fr/konto/angemeldet/";
+  });
+
   // Passwort-Sichtbarkeits-Toggle — rein clientseitig, braucht kein Backend.
   const pwInput = document.getElementById("login-pw") as HTMLInputElement | null;
   const pwToggle = document.getElementById("login-pw-toggle") as HTMLButtonElement | null;
diff --git a/src/pages/konto/index.astro b/src/pages/konto/index.astro
index a6f61ad..b5e438a 100644
--- a/src/pages/konto/index.astro
+++ b/src/pages/konto/index.astro
@@ -11,7 +11,6 @@ const t = useTranslations(lang);
     <div class="container">
       <span class="eyebrow">{t.account.eyebrow}</span>
       <h1>{t.account.title}</h1>
-      <p class="todo-note">{t.account.todoNote}</p>
     </div>
   </section>
 
@@ -36,7 +35,9 @@ const t = useTranslations(lang);
             {t.account.socialApple}
           </button>
           <button type="button" class="btn-social btn-social-paypal">
-            <span class="social-icon-badge" aria-hidden="true">P</span>
+            <span class="social-icon-badge" aria-hidden="true">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
+            </span>
             {t.account.socialPaypal}
           </button>
           <p class="small social-note" id="social-note">{t.account.socialComingSoon}</p>
@@ -82,10 +83,26 @@ const t = useTranslations(lang);
       </div>
     </div>
   </section>
+
+  {/* Direkter Vorschau-Link auf den Kundenbereich für VanVan (und für uns zum Weiterarbeiten) —
+      loggt clientseitig mit einem Demo-Konto ein und leitet direkt zum Dashboard weiter, ganz
+      ohne das Formular jedes Mal neu auszufüllen. Rein clientseitig/localStorage, siehe
+      scripts/account.ts — es werden keine echten Kundendaten angelegt. */}
+  <section class="section-tight">
+    <div class="container">
+      <a class="small" href="#" id="preview-link" data-preview-name={t.account.previewName}>{t.account.previewLink}</a>
+    </div>
+  </section>
+
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">{t.account.todoNote}</p>
+    </div>
+  </section>
 </Layout>
 
 <script>
-  import { login } from "../../scripts/account";
+  import { login, setUsername } from "../../scripts/account";
   const form = document.getElementById("login-form") as HTMLFormElement | null;
   const emailInput = document.getElementById("login-email") as HTMLInputElement | null;
   const error = document.getElementById("login-error");
@@ -101,6 +118,15 @@ const t = useTranslations(lang);
     window.location.href = "/konto/angemeldet/";
   });
 
+  // Vorschau-Link: meldet mit einem Demo-Namen an und leitet direkt zum Kundenbereich weiter.
+  document.getElementById("preview-link")?.addEventListener("click", (e) => {
+    e.preventDefault();
+    const link = document.getElementById("preview-link") as HTMLAnchorElement | null;
+    login("vorschau@vans-diy-bastelbedarf.de");
+    if (link?.dataset.previewName) setUsername(link.dataset.previewName);
+    window.location.href = "/konto/angemeldet/";
+  });
+
   // Passwort-Sichtbarkeits-Toggle — rein clientseitig, braucht kein Backend.
   const pwInput = document.getElementById("login-pw") as HTMLInputElement | null;
   const pwToggle = document.getElementById("login-pw-toggle") as HTMLButtonElement | null;
diff --git a/src/styles/global.css b/src/styles/global.css
index 574726f..543e096 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1800,12 +1800,30 @@ a:focus-visible, button:focus-visible {
 }
 .pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
 
-/* Kreditkarte: schlichtes Kartensymbol (SVG) statt einem Buchstaben wie bei PayPal/Klarna —
-   vorher zwei überlappende Kreise in Visa/Mastercard-Anmutung, die auf Wunsch entfernt wurden
-   (wirkten wie ein fremdes Marken-Logo statt einem neutralen eigenen Icon). */
 .pay-icon-cc svg { display: block; }
 .pay-option .pay-sub { display: block; font-weight: 400; font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.1em; }
 
+/* Kreditkarte: statt einem einzelnen Icon zwei echte Marken-Badges (Visa + Mastercard)
+   nebeneinander, in unveränderten Originalfarben (Visa-Blau bzw. Mastercard Rot/Orange) —
+   genau die Kombination, die auf einer Kreditkarten-Zahlungsoption üblich und von beiden
+   Marken als "Acceptance Mark" vorgesehen ist. */
+.pay-icon-cards { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; height: 52px; }
+.mini-card {
+  width: 46px;
+  height: 32px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
+}
+.mini-card-visa { background: #fff; }
+.mini-card-mastercard { background: #16161f; }
+
+/* Marken-Icon-Badges (PayPal, Klarna): echtes Markenlogo (SVG) mittig auf einer Kachel in der
+   jeweiligen offiziellen Markenfarbe statt einem groben Buchstaben-Platzhalter. */
+.pay-icon-brand svg { display: block; }
+
 /* 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 {