diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index 2f24fba..8301ca4 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/src/pages/ch/checkout/index.astro
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
           <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:#003087;">P</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
             <span>PayPal</span>
             <input type="radio" name="pay" value="paypal" checked />
           </label>
           <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
             <span>Klarna</span>
             <input type="radio" name="pay" value="klarna" />
           </label>
           <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon" style="background:#3b5a76;">🏦</span>
+            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
             <span>{t.checkout.bankTransfer}</span>
             <input type="radio" name="pay" value="ueberweisung" />
           </label>
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index f7a226e..b591469 100644
--- a/src/pages/checkout/index.astro
+++ b/src/pages/checkout/index.astro
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
           <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:#003087;">P</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
             <span>PayPal</span>
             <input type="radio" name="pay" value="paypal" checked />
           </label>
           <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
             <span>Klarna</span>
             <input type="radio" name="pay" value="klarna" />
           </label>
           <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon" style="background:#3b5a76;">🏦</span>
+            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
             <span>{t.checkout.bankTransfer}</span>
             <input type="radio" name="pay" value="ueberweisung" />
           </label>
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index 7a4c13e..6151ca6 100644
--- a/src/pages/en/checkout/index.astro
+++ b/src/pages/en/checkout/index.astro
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
           <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:#003087;">P</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
             <span>PayPal</span>
             <input type="radio" name="pay" value="paypal" checked />
           </label>
           <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
             <span>Klarna</span>
             <input type="radio" name="pay" value="klarna" />
           </label>
           <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon" style="background:#3b5a76;">🏦</span>
+            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
             <span>{t.checkout.bankTransfer}</span>
             <input type="radio" name="pay" value="ueberweisung" />
           </label>
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index 2e50fbf..36f1cf8 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/src/pages/fr/checkout/index.astro
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
         <h3>{t.checkout.step2}</h3>
         <div class="payment-options">
           <label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
-            <span class="pay-icon" style="background:#003087;">P</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
             <span>PayPal</span>
             <input type="radio" name="pay" value="paypal" checked />
           </label>
           <label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
-            <span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
+            <span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
             <span>Klarna</span>
             <input type="radio" name="pay" value="klarna" />
           </label>
           <label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
-            <span class="pay-icon" style="background:#3b5a76;">🏦</span>
+            <span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
             <span>{t.checkout.bankTransfer}</span>
             <input type="radio" name="pay" value="ueberweisung" />
           </label>
diff --git a/src/styles/global.css b/src/styles/global.css
index db51e88..fdc9e97 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -945,43 +945,51 @@ a:focus-visible, button:focus-visible {
 
 /* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum
    restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). */
-.payment-options { display: grid; gap: 0.7rem; }
+.payment-options { display: grid; gap: 0.85rem; }
 .pay-option {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.9em;
-  padding: 0.95em 1.1em;
-  border: 1px solid rgba(244, 241, 247, 0.12);
-  border-radius: var(--radius-m);
-  font-size: 0.95rem;
-  font-weight: 600;
+  gap: 1.1em;
+  padding: 1.15em 1.3em;
+  border: 1.5px solid rgba(244, 241, 247, 0.12);
+  border-radius: var(--radius-l);
+  font-size: 1.02rem;
+  font-weight: 700;
   cursor: pointer;
-  background: var(--c-anthracite);
+  background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
   transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
 }
-.pay-option:hover { border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 45%, transparent); transform: translateY(-1px); }
+.pay-option:hover {
+  border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
+}
 
-/* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Buchstabe/Symbol) statt schlichtem
-   Emoji — wirkt "fertig", nicht wie ein Platzhalter. */
+/* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Wortmarke) statt schlichtem Emoji —
+   groß und mit sanftem Verlauf/Glanz, wirkt "fertig", nicht wie ein Platzhalter. */
 .pay-option .pay-icon {
-  width: 34px;
-  height: 34px;
-  border-radius: 9px;
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.05rem;
+  font-size: 1.6rem;
   font-weight: 800;
-  color: #fff;
+  font-style: italic;
+  letter-spacing: -0.03em;
   line-height: 1;
   flex-shrink: 0;
-  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
+  background-blend-mode: overlay;
 }
+.pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
 .pay-option input[type="radio"] {
   appearance: none;
-  width: 19px;
-  height: 19px;
+  width: 22px;
+  height: 22px;
   border-radius: 50%;
   border: 2px solid rgba(244, 241, 247, 0.3);
   margin-left: auto;
@@ -993,8 +1001,8 @@ a:focus-visible, button:focus-visible {
 }
 .pay-option input[type="radio"]::before {
   content: "";
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   transform: scale(0);
   transition: transform 0.15s var(--ease);
@@ -1004,8 +1012,8 @@ a:focus-visible, button:focus-visible {
 .pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
 .pay-option:has(input:checked) {
   border-color: var(--brand-color, var(--c-accent));
-  background: color-mix(in srgb, var(--brand-color, var(--c-accent)) 12%, var(--c-anthracite));
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
+  background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
 }
 .pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }