Checkout: Kreis-Icon bei Kreditkarte durch schlichtes Kartensymbol ersetzt

Die zwei ueberlappenden Kreise (Visa/Mastercard-Anmutung) beim
Kreditkarte-Zahlungsoption wirkten wie ein fremdes Marken-Logo statt einem
neutralen eigenen Icon. Ersetzt durch ein schlichtes SVG-Kartensymbol, im
gleichen Stil wie die anderen Zahlungsarten-Icons (PayPal/Klarna).

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

src/pages/ch/checkout/index.astro

@@ -48,7 +48,7 @@ const t = useTranslations(lang);
           <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>
+                <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>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />

src/pages/checkout/index.astro

@@ -48,7 +48,7 @@ const t = useTranslations(lang);
           <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>
+                <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>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />

src/pages/en/checkout/index.astro

@@ -48,7 +48,7 @@ const t = useTranslations(lang);
           <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>
+                <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>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />

src/pages/fr/checkout/index.astro

@@ -48,7 +48,7 @@ const t = useTranslations(lang);
           <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>
+                <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>
               <span>{t.checkout.creditCard}<span class="pay-sub">{t.checkout.creditCardSub}</span></span>
               <input type="radio" name="pay" value="kreditkarte" />

src/styles/global.css

@@ -1506,11 +1506,10 @@ a:focus-visible, button:focus-visible {
 }
 .pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
 
-/* Kreditkarte: zwei überlappende Kreise (Visa/Mastercard-Anmutung) statt einem Buchstaben. */
+/* Kreditkarte: schlichtes Kartensymbol (SVG) statt einem Buchstaben wie bei PayPal/Klarna —
-.pay-icon-cc { position: relative; }
+   vorher zwei überlappende Kreise in Visa/Mastercard-Anmutung, die auf Wunsch entfernt wurden
-.pay-icon-cc .cc-dot { position: absolute; width: 24px; height: 24px; border-radius: 50%; top: 50%; transform: translateY(-50%); }
+   (wirkten wie ein fremdes Marken-Logo statt einem neutralen eigenen Icon). */
-.pay-icon-cc .cc-dot-a { left: 8px; background: #eb5b3c; }
+.pay-icon-cc svg { display: block; }
-.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; }
 
 /* Der "Verbinden"-Bereich sitzt DIREKT in der Karte selbst und klappt beim Anklicken sofort auf —