Checkout & Login: echte Markenlogos statt Platzhaltern, Vorschau-Link fürs Kundenkonto

Nach Recherche zu den Markenrichtlinien von PayPal, Klarna, Visa und
Mastercard: Zahlungsoptionen im Checkout zeigen jetzt echte Markenlogos in
den offiziellen Farben (PayPal- und Klarna-Icon, Visa-Wortmarke auf Weiß,
Mastercard-Kreise in Rot/Orange unverändert nebeneinander) statt grober
Buchstaben-/Emoji-Platzhalter — genau die Verwendung, die die jeweiligen
Markenrichtlinien für die Kennzeichnung akzeptierter Zahlungsarten
vorsehen. Dieselbe PayPal-Grafik jetzt auch beim Social-Login auf der
Anmeldeseite statt eines schlichten "P".

Zusätzlich: Ein Vorschau-Link auf der Anmeldeseite meldet mit einem Demo-
Konto an und führt direkt zum Kundenbereich-Dashboard — bleibt dauerhaft
erreichbar, damit VanVan und wir jederzeit sehen können, wie der Bereich
für angemeldete Kund:innen aussieht, ohne das Formular jedes Mal
auszufüllen.

Der Phase-1-Demo-Hinweis auf Checkout- und Anmeldeseite steht jetzt am
Ende der Seite statt direkt unter der Überschrift, damit zuerst der
fertige, professionelle Eindruck zählt.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

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("[email protected]");
+    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;