From 7549ec239b9cc9b0e1c026e26fc6d71add596224 Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Mon, 3 Aug 2026 12:48:20 +0200
Subject: [PATCH] =?UTF-8?q?Zahlungskarten=20im=20Checkout=20kr=C3=A4ftiger?=
 =?UTF-8?q?/edler=20gestaltet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Jede Zahlungsart-Karte hat jetzt einen deutlich sichtbaren Farbschein in
der jeweiligen Markenfarbe (auch im Ruhezustand, nicht erst bei Hover),
einen feinen Farbstreifen am oberen Rand und einen dezenten Glanz-Sweep
beim Hover — wirkt hochwertiger/"geiler", bleibt aber gedeckt genug fürs
dunkle Gesamtdesign. Kreditkarte (Visa/Mastercard) bekommt einen eigenen
Gold-Akzent statt der bisherigen, kaum sichtbaren Farbe.

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             | 66 ++++++++++++++++++++++++-------
 5 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro
index 50f3101..96f913d 100644
--- a/src/pages/ch/checkout/index.astro
+++ b/src/pages/ch/checkout/index.astro
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
             <label class="pay-option">
               <span class="pay-icon-cards" aria-hidden="true">
                 <span class="mini-card mini-card-visa">
diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro
index 7fab09e..9d363c4 100644
--- a/src/pages/checkout/index.astro
+++ b/src/pages/checkout/index.astro
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
             <label class="pay-option">
               <span class="pay-icon-cards" aria-hidden="true">
                 <span class="mini-card mini-card-visa">
diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro
index e7f57eb..c3e45e8 100644
--- a/src/pages/en/checkout/index.astro
+++ b/src/pages/en/checkout/index.astro
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
             <label class="pay-option">
               <span class="pay-icon-cards" aria-hidden="true">
                 <span class="mini-card mini-card-visa">
diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro
index 3b79e5f..3fa5cc6 100644
--- a/src/pages/fr/checkout/index.astro
+++ b/src/pages/fr/checkout/index.astro
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
               <p class="pay-connect-status" id="klarna-status"></p>
             </div>
           </div>
-          <div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
+          <div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
             <label class="pay-option">
               <span class="pay-icon-cards" aria-hidden="true">
                 <span class="mini-card mini-card-visa">
diff --git a/src/styles/global.css b/src/styles/global.css
index 543e096..4b2c758 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1749,27 +1749,63 @@ a:focus-visible, button:focus-visible {
    beim Anklicken den passenden "Verbinden"-Bereich direkt in sich selbst auf (reines CSS über
    :has(), kein Zwischenschritt, kein separates Panel weiter unten). */
 .payment-options { display: grid; gap: 0.85rem; }
+/* Kräftigere Markenfarbigkeit pro Karte, auch im Ruhezustand (nicht erst bei Hover/Auswahl):
+   ein sanfter Farbschein aus der Ecke ("Glow"), ein feiner Farbstreifen oben und ein dezenter
+   Glanz-Sweep beim Hover — bewusst schon deutlich sichtbar, aber gedeckt genug fürs dunkle
+   Gesamtbild, kein grelles Regenbogen-Grid. */
 .pay-card {
-  border: 1.5px solid rgba(244, 241, 247, 0.12);
+  position: relative;
+  isolation: isolate;
+  border: 1.5px solid color-mix(in srgb, var(--brand-color, var(--c-accent)) 38%, rgba(244, 241, 247, 0.14));
   border-radius: var(--radius-l);
-  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);
+  background:
+    radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--brand-color, var(--c-accent)) 26%, transparent), transparent 62%),
+    linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
+  box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--brand-color, var(--c-accent)) 60%, transparent);
+  transition: border-color 0.2s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
   overflow: hidden;
 }
+.pay-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, var(--brand-color, var(--c-accent)), transparent);
+  opacity: 0.65;
+  z-index: 1;
+}
+.pay-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -60%;
+  width: 40%;
+  height: 100%;
+  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
+  transform: skewX(-18deg);
+  transition: left 0.65s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+.pay-card:hover::after { left: 130%; }
 .pay-card: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);
+  border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 70%, transparent);
+  transform: translateY(-3px);
+  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--brand-color, var(--c-accent)) 70%, transparent);
 }
 .pay-card:has(input:checked) {
   border-color: var(--brand-color, var(--c-accent));
-  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);
+  background:
+    radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--brand-color, var(--c-accent)) 38%, transparent), transparent 62%),
+    linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 20%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
+  box-shadow: 0 0 0 1.5px var(--brand-color, var(--c-accent)), 0 18px 34px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 78%, transparent);
 }
+.pay-card:has(input:checked)::before { opacity: 1; }
 .pay-card:has(input:checked) .pay-option span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
 
 .pay-option {
   position: relative;
+  z-index: 2;
   display: flex;
   align-items: center;
   gap: 1.1em;
@@ -1794,8 +1830,10 @@ a:focus-visible, button:focus-visible {
   letter-spacing: -0.03em;
   line-height: 1;
   flex-shrink: 0;
-  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%);
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, rgba(0, 0, 0, 0.6)), inset 0 1px 0 rgba(255, 255, 255, 0.22);
+  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
   background-blend-mode: overlay;
 }
 .pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
@@ -1807,7 +1845,7 @@ a:focus-visible, button:focus-visible {
    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; }
+.pay-icon-cards { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; height: 52px; position: relative; z-index: 2; }
 .mini-card {
   width: 46px;
   height: 32px;
@@ -1815,10 +1853,10 @@ a:focus-visible, button:focus-visible {
   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);
+  box-shadow: 0 4px 14px -3px var(--mini-glow, 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; }
+.mini-card-visa { background: #fff; --mini-glow: rgba(20, 52, 203, 0.55); }
+.mini-card-mastercard { background: #16161f; --mini-glow: rgba(235, 0, 27, 0.45); }
 
 /* Marken-Icon-Badges (PayPal, Klarna): echtes Markenlogo (SVG) mittig auf einer Kachel in der
    jeweiligen offiziellen Markenfarbe statt einem groben Buchstaben-Platzhalter. */