From 1add9a42a11f8dc672bfb1dc149d10fd87817c90 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 02:58:57 +0200
Subject: [PATCH] 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 <noreply@anthropic.com>
---
 src/pages/ch/checkout/index.astro | 2 +-
 src/pages/checkout/index.astro    | 2 +-
 src/pages/en/checkout/index.astro | 2 +-
 src/pages/fr/checkout/index.astro | 2 +-
 src/styles/global.css             | 9 ++++-----
 5 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index 5aec746..bff2dd2 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/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" />
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index c9c98a9..4b00d13 100644
--- a/src/pages/checkout/index.astro
+++ b/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" />
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index 73e0cb8..1164255 100644
--- a/src/pages/en/checkout/index.astro
+++ b/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" />
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index e296bcf..98dfbbe 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/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" />
diff --git a/src/styles/global.css b/src/styles/global.css
index b83c5c9..d55e17d 100644
--- a/src/styles/global.css
+++ b/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. */
-.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; }
+/* 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; }
 
 /* Der "Verbinden"-Bereich sitzt DIREKT in der Karte selbst und klappt beim Anklicken sofort auf —