PayPal-Kachel: Visa/Mastercard im selben Politur-Niveau wie das PayPal-Badge, eigene Farbe unten

Auf ausdrücklichen Wunsch: die Visa-/Mastercard-Badges in der unteren Hälfte sehen jetzt genauso
"fertig" aus wie das PayPal-Badge oben — größer (48x48 statt 40x27), mit demselben weichen
Glanz-Verlauf, kräftigem Schlagschatten in der jeweiligen Markenfarbe und Lift-Effekt beim
Hovern. Die Markenfarben selbst bleiben unverändert (Visa weiß, Mastercard schwarz).

Die untere Hälfte hat jetzt außerdem eine EIGENE Farbgebung statt eines Blau-Abklatschs der
PayPal-Hälfte darüber: dezentes Visa-Blau unten links, Mastercard-Orange/Rot oben rechts,
beide nur angedeutet (niedrige Deckkraft) auf dunklem Grund, damit Text und Karten weiterhin
klar lesbar bleiben.

Getestet: Breiten-Sweep 390–1440px ohne Überlappung mit der Radio-Markierung (die Karten sind
jetzt größer, deshalb erneut geprüft), Screenshots Desktop + Mobil, Markup in allen 4 Sprachen
bestätigt.

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

src/styles/global.css

@@ -2432,8 +2432,8 @@ a:focus-visible, button:focus-visible {
   justify-content: center;
   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-glow: rgba(20, 52, 203, 0.55); }
+.mini-card-visa { background: #fff; --mini-glow: rgba(20, 52, 203, 0.55); --mini-base: #fff; }
-.mini-card-mastercard { background: #16161f; --mini-glow: rgba(235, 0, 27, 0.45); }
+.mini-card-mastercard { background: #16161f; --mini-glow: rgba(235, 0, 27, 0.45); --mini-base: #16161f; }
 
 /* Marken-Icon-Badges (PayPal, Klarna): echtes Markenlogo (SVG) mittig auf einer Kachel in der
    jeweiligen offiziellen Markenfarbe statt einem groben Buchstaben-Platzhalter. */
@@ -2528,9 +2528,14 @@ a:focus-visible, button:focus-visible {
      genau die Anordnung aus dem Referenz-Screenshot (Text/Karten links, Auswahlpunkt rechts). */
   align-items: flex-start;
   padding-right: 2.6rem;
+  /* Eigene Farbgebung statt eines Blau-Abklatschs der PayPal-Hälfte darüber: ein sanftes
+     Visa-Blau unten links, ein Mastercard-Orange/Rot oben rechts — beide Markenfarben klingen
+     im dunklen Untergrund nur an (niedrige Deckkraft), damit Text und Karten weiterhin klar
+     lesbar bleiben, die untere Hälfte aber sichtbar "ihre eigene" ist. */
   background:
-    radial-gradient(120% 160% at 88% 100%, color-mix(in srgb, #1ea7ff 16%, transparent), transparent 60%),
+    radial-gradient(130% 170% at 4% 100%, color-mix(in srgb, #1434cb 24%, transparent), transparent 58%),
-    linear-gradient(155deg, color-mix(in srgb, #003087 22%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 88%, black));
+    radial-gradient(130% 170% at 96% 0%, color-mix(in srgb, #ff5f1f 20%, transparent), transparent 58%),
+    linear-gradient(160deg, #15151f, #0a0a10);
 }
 .pp-badge {
   width: 46px;
@@ -2551,9 +2556,22 @@ a:focus-visible, button:focus-visible {
 .pp-divider { position: relative; z-index: 3; height: 2px; background: linear-gradient(90deg, transparent, #bfe4ff 15%, #fff 50%, #bfe4ff 85%, transparent); box-shadow: 0 0 14px 1px rgba(191, 228, 255, 0.65); flex-shrink: 0; }
 
 .pp-cards-caption { color: rgba(244, 241, 247, 0.75); font-size: 0.85rem; font-weight: 400; text-align: left; }
-.pp-cards-row { display: flex; align-items: center; gap: 0.5em; }
+.pp-cards-row { display: flex; align-items: center; gap: 0.55em; }
-.mini-card-lg { width: 40px; height: 27px; border-radius: 6px; flex-shrink: 0; }
+/* Dasselbe Politur-Niveau wie das PayPal-Badge oben (.pp-badge): weicher Glanz-Verlauf oben
-.mini-card-lg svg { width: 22px; height: auto; }
+   links, kräftiger Schlagschatten in der jeweiligen Markenfarbe, dezenter innerer Lichtrand —
+   nur die Grundfarbe bleibt markengetreu (Visa weiß, Mastercard schwarz), siehe --mini-base. */
+.mini-card-lg {
+  width: 48px;
+  height: 48px;
+  border-radius: 13px;
+  flex-shrink: 0;
+  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
+  background-color: var(--mini-base, #fff);
+  box-shadow: 0 6px 16px -4px var(--mini-glow, rgba(0, 0, 0, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.35);
+  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
+}
+.pay-option-paypal-split:hover .mini-card-lg { transform: translateY(-1px); }
+.mini-card-lg svg { width: 27px; height: auto; }
 
 /* Der native Radio-Knopf ist bei dieser Kachel keine Zeile mehr, sondern eine eigene, kleine
    Markierung unten rechts auf der Kachel — genau wie im Referenz-Screenshot. */