PayPal-Zahlungskarte im Checkout: eigens gestaltete, mittig geteilte Kachel
Auf ausdrücklichen Wunsch: die PayPal-Zahlungsoption ist jetzt eine "besondere" Kachel statt
der schlichten Icon-Zeile — exakt in der Mitte horizontal geteilt, obere Hälfte PayPal-
Markenverlauf mit Logo + zweifarbiger Wortmarke, untere Hälfte die Visa-/Mastercard-Hinweise.
Animierter Verlaufsrand, leuchtender Mittelsteg, Glanzeffekt und Glitzer-Akzente — dieselbe
Formsprache wie die anderen "besonderen" Karten der Seite (z.B. .account-head). Alle 4 Sprachen.
Feste Höhe (statt min-height) auf der Kachel, damit die Trennlinie IMMER exakt mittig sitzt,
unabhängig vom Inhalt jeder Hälfte — mit auto-Höhe hätte der Flex-Container sich sonst am
längeren Inhalt orientiert und die Linie wäre verrutscht (nachgemessen: vorher 106,6px oben vs.
141px unten, jetzt 109px/109px exakt).
Dabei zwei echte Bugs gefunden und behoben:
1. Eine generische Farb-Regel (".pay-card:has(input:checked) .pay-option span:not(.pay-icon)")
hätte die neue zweifarbige Wortmarke und den Kartenhinweis auf die einfarbige Markenfarbe
umgefärbt und auf dem blauen Verlaufshintergrund fast unlesbar gemacht — mit gezielt
spezifischeren Regeln überschrieben.
2. Die Radio-Markierung überlappte bei bestimmten Fensterbreiten (ca. 800–1000px) die
Mastercard-Karte, weil zwei VERSCHACHTELTE Zweispalten-Layouts (.checkout-layout und
.checkout-split) bei ZU ÄHNLICHEN Umbruchpunkten (800px bzw. 760px) gleichzeitig aktiv
blieben und die Zahlungsspalte auf ca. 90px zusammenquetschten — ein vorbestehender
Layout-Fehler, der die ganze Zahlungsspalte betraf, nicht nur die neue Kachel. Behoben,
indem die innere Spalte jetzt deutlich früher umbricht (1024px statt 760px), lange bevor
die äußere Spalte eng wird.
Getestet (Browser, alle 4 Sprachen): Kontrastprüfung im markierten Zustand, Geometrie der
Trennlinie, Breiten-Sweep von 390px bis 1600px ohne Überlappung mehr, Mobil-Ansicht.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
0ba9af13b0
commit
c9d80c9ac0
@@ -25,11 +25,30 @@ const t = useTranslations(lang);
|
|||||||
PayPals eigenen, PCI-zertifizierten Gast-Checkout. */}
|
PayPals eigenen, PCI-zertifizierten Gast-Checkout. */}
|
||||||
<div class="payment-options">
|
<div class="payment-options">
|
||||||
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
||||||
<label class="pay-option">
|
<label class="pay-option pay-option-paypal-split">
|
||||||
<span class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
|
{/* Speziell gestaltete Karte auf ausdrücklichen Wunsch: exakt in der Mitte geteilt —
|
||||||
<svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
obere Hälfte PayPal-Markenfarben/Wortmarke, untere Hälfte Visa/Mastercard. Eigener
|
||||||
|
Premium-Stil (Verlaufsrand, Glanz, Sternchen) statt der schlichten Icon-Zeile der
|
||||||
|
anderen Zahlungsart, siehe .pp-tile im CSS. */}
|
||||||
|
<span class="pp-tile">
|
||||||
|
<span class="pp-tile-shine" aria-hidden="true"></span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-1" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-2" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-half pp-half-top">
|
||||||
|
<span class="pp-badge" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" width="26" height="26" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="pp-wordmark"><span class="pp-word-pay">Pay</span><span class="pp-word-pal">Pal</span></span>
|
||||||
|
</span>
|
||||||
|
<span class="pp-divider" aria-hidden="true"></span>
|
||||||
|
<span class="pp-half pp-half-bottom">
|
||||||
|
<span class="pp-cards-caption">{t.checkout.payPalSub}</span>
|
||||||
|
<span class="pp-cards-row" aria-hidden="true">
|
||||||
|
<span class="mini-card mini-card-visa mini-card-lg"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span>
|
||||||
|
<span class="mini-card mini-card-mastercard mini-card-lg"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>PayPal<span class="pay-sub">{t.checkout.payPalSub}<span class="pay-sub-cards" aria-hidden="true"><span class="mini-card mini-card-visa"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span><span class="mini-card mini-card-mastercard"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span></span></span></span>
|
|
||||||
<input type="radio" name="pay" value="paypal" checked />
|
<input type="radio" name="pay" value="paypal" checked />
|
||||||
</label>
|
</label>
|
||||||
<div class="pay-panel-inline">
|
<div class="pay-panel-inline">
|
||||||
|
|||||||
@@ -29,11 +29,30 @@ const t = useTranslations(lang);
|
|||||||
zertifizierter Seite — die Kartendaten berühren unsere Seite nie. */}
|
zertifizierter Seite — die Kartendaten berühren unsere Seite nie. */}
|
||||||
<div class="payment-options">
|
<div class="payment-options">
|
||||||
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
||||||
<label class="pay-option">
|
<label class="pay-option pay-option-paypal-split">
|
||||||
<span class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
|
{/* Speziell gestaltete Karte auf ausdrücklichen Wunsch: exakt in der Mitte geteilt —
|
||||||
<svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
obere Hälfte PayPal-Markenfarben/Wortmarke, untere Hälfte Visa/Mastercard. Eigener
|
||||||
|
Premium-Stil (Verlaufsrand, Glanz, Sternchen) statt der schlichten Icon-Zeile der
|
||||||
|
anderen Zahlungsart, siehe .pp-tile im CSS. */}
|
||||||
|
<span class="pp-tile">
|
||||||
|
<span class="pp-tile-shine" aria-hidden="true"></span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-1" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-2" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-half pp-half-top">
|
||||||
|
<span class="pp-badge" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" width="26" height="26" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="pp-wordmark"><span class="pp-word-pay">Pay</span><span class="pp-word-pal">Pal</span></span>
|
||||||
|
</span>
|
||||||
|
<span class="pp-divider" aria-hidden="true"></span>
|
||||||
|
<span class="pp-half pp-half-bottom">
|
||||||
|
<span class="pp-cards-caption">{t.checkout.payPalSub}</span>
|
||||||
|
<span class="pp-cards-row" aria-hidden="true">
|
||||||
|
<span class="mini-card mini-card-visa mini-card-lg"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span>
|
||||||
|
<span class="mini-card mini-card-mastercard mini-card-lg"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>PayPal<span class="pay-sub">{t.checkout.payPalSub}<span class="pay-sub-cards" aria-hidden="true"><span class="mini-card mini-card-visa"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span><span class="mini-card mini-card-mastercard"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span></span></span></span>
|
|
||||||
<input type="radio" name="pay" value="paypal" checked />
|
<input type="radio" name="pay" value="paypal" checked />
|
||||||
</label>
|
</label>
|
||||||
<div class="pay-panel-inline">
|
<div class="pay-panel-inline">
|
||||||
|
|||||||
@@ -25,11 +25,30 @@ const t = useTranslations(lang);
|
|||||||
PayPals eigenen, PCI-zertifizierten Gast-Checkout. */}
|
PayPals eigenen, PCI-zertifizierten Gast-Checkout. */}
|
||||||
<div class="payment-options">
|
<div class="payment-options">
|
||||||
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
||||||
<label class="pay-option">
|
<label class="pay-option pay-option-paypal-split">
|
||||||
<span class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
|
{/* Speziell gestaltete Karte auf ausdrücklichen Wunsch: exakt in der Mitte geteilt —
|
||||||
<svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
obere Hälfte PayPal-Markenfarben/Wortmarke, untere Hälfte Visa/Mastercard. Eigener
|
||||||
|
Premium-Stil (Verlaufsrand, Glanz, Sternchen) statt der schlichten Icon-Zeile der
|
||||||
|
anderen Zahlungsart, siehe .pp-tile im CSS. */}
|
||||||
|
<span class="pp-tile">
|
||||||
|
<span class="pp-tile-shine" aria-hidden="true"></span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-1" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-2" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-half pp-half-top">
|
||||||
|
<span class="pp-badge" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" width="26" height="26" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="pp-wordmark"><span class="pp-word-pay">Pay</span><span class="pp-word-pal">Pal</span></span>
|
||||||
|
</span>
|
||||||
|
<span class="pp-divider" aria-hidden="true"></span>
|
||||||
|
<span class="pp-half pp-half-bottom">
|
||||||
|
<span class="pp-cards-caption">{t.checkout.payPalSub}</span>
|
||||||
|
<span class="pp-cards-row" aria-hidden="true">
|
||||||
|
<span class="mini-card mini-card-visa mini-card-lg"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span>
|
||||||
|
<span class="mini-card mini-card-mastercard mini-card-lg"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>PayPal<span class="pay-sub">{t.checkout.payPalSub}<span class="pay-sub-cards" aria-hidden="true"><span class="mini-card mini-card-visa"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span><span class="mini-card mini-card-mastercard"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span></span></span></span>
|
|
||||||
<input type="radio" name="pay" value="paypal" checked />
|
<input type="radio" name="pay" value="paypal" checked />
|
||||||
</label>
|
</label>
|
||||||
<div class="pay-panel-inline">
|
<div class="pay-panel-inline">
|
||||||
|
|||||||
@@ -25,11 +25,30 @@ const t = useTranslations(lang);
|
|||||||
PayPals eigenen, PCI-zertifizierten Gast-Checkout. */}
|
PayPals eigenen, PCI-zertifizierten Gast-Checkout. */}
|
||||||
<div class="payment-options">
|
<div class="payment-options">
|
||||||
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
<div class="pay-card" style="--brand-color:#009cde; --brand-bg:#003087;">
|
||||||
<label class="pay-option">
|
<label class="pay-option pay-option-paypal-split">
|
||||||
<span class="pay-icon pay-icon-brand" style="background:linear-gradient(160deg, #0091e6, #003087);">
|
{/* Speziell gestaltete Karte auf ausdrücklichen Wunsch: exakt in der Mitte geteilt —
|
||||||
<svg viewBox="0 0 24 24" width="30" height="30" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
obere Hälfte PayPal-Markenfarben/Wortmarke, untere Hälfte Visa/Mastercard. Eigener
|
||||||
|
Premium-Stil (Verlaufsrand, Glanz, Sternchen) statt der schlichten Icon-Zeile der
|
||||||
|
anderen Zahlungsart, siehe .pp-tile im CSS. */}
|
||||||
|
<span class="pp-tile">
|
||||||
|
<span class="pp-tile-shine" aria-hidden="true"></span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-1" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-sparkle pp-sparkle-2" aria-hidden="true">✨</span>
|
||||||
|
<span class="pp-half pp-half-top">
|
||||||
|
<span class="pp-badge" aria-hidden="true">
|
||||||
|
<svg viewBox="0 0 24 24" width="26" height="26" fill="#fff" aria-hidden="true"><path d="M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z"></path></svg>
|
||||||
|
</span>
|
||||||
|
<span class="pp-wordmark"><span class="pp-word-pay">Pay</span><span class="pp-word-pal">Pal</span></span>
|
||||||
|
</span>
|
||||||
|
<span class="pp-divider" aria-hidden="true"></span>
|
||||||
|
<span class="pp-half pp-half-bottom">
|
||||||
|
<span class="pp-cards-caption">{t.checkout.payPalSub}</span>
|
||||||
|
<span class="pp-cards-row" aria-hidden="true">
|
||||||
|
<span class="mini-card mini-card-visa mini-card-lg"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span>
|
||||||
|
<span class="mini-card mini-card-mastercard mini-card-lg"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<span>PayPal<span class="pay-sub">{t.checkout.payPalSub}<span class="pay-sub-cards" aria-hidden="true"><span class="mini-card mini-card-visa"><svg viewBox="0 0 24 24" fill="#1434CB" aria-hidden="true"><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"></path></svg></span><span class="mini-card mini-card-mastercard"><svg viewBox="0 0 32 20" aria-hidden="true"><circle cx="13" cy="10" r="7.2" fill="#EB001B"></circle><circle cx="19" cy="10" r="7.2" fill="#F79E1B"></circle><path d="M16 4.4a7.18 7.18 0 010 11.2 7.18 7.18 0 010-11.2z" fill="#FF5F00"></path></svg></span></span></span></span>
|
|
||||||
<input type="radio" name="pay" value="paypal" checked />
|
<input type="radio" name="pay" value="paypal" checked />
|
||||||
</label>
|
</label>
|
||||||
<div class="pay-panel-inline">
|
<div class="pay-panel-inline">
|
||||||
|
|||||||
+129
-1
@@ -2283,7 +2283,17 @@ a:focus-visible, button:focus-visible {
|
|||||||
box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c-accent) 45%, transparent);
|
box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c-accent) 45%, transparent);
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
}
|
}
|
||||||
@media (max-width: 760px) {
|
/* WICHTIG: deutlich HÖHERER Umbruchpunkt als .checkout-layout (800px, siehe unten) — nicht
|
||||||
|
derselbe. Grund: .checkout-layout ist bereits eine Zweispalte (Formular | Zusammenfassung),
|
||||||
|
.checkout-split spaltet das FORMULAR selbst nochmal in zwei Spalten (Zahlung | Versand).
|
||||||
|
Zwei verschachtelte Zweispalten-Layouts brauchen zusammen deutlich mehr Platz als eine
|
||||||
|
einzelne — bei gleichem oder zu niedrigem Umbruchpunkt bleibt eine breite Zone (ca. 800–
|
||||||
|
1000px), in der die äußere Spalte noch nicht umbricht, aber schon nicht mehr genug Platz für
|
||||||
|
die innere Zweispalte übrig ist: die Zahlungskarte wurde dort auf ca. 90px zusammengequetscht.
|
||||||
|
Gefunden beim Testen der neuen PayPal-Kachel, betraf aber die ganze Zahlungsspalte. Deshalb
|
||||||
|
bricht die innere Spalte JETZT schon deutlich früher (bei 1024px) um, lange bevor die äußere
|
||||||
|
Spalte überhaupt eng wird. */
|
||||||
|
@media (max-width: 1024px) {
|
||||||
.checkout-split { grid-template-columns: 1fr; gap: 0; }
|
.checkout-split { grid-template-columns: 1fr; gap: 0; }
|
||||||
.checkout-split-divider { width: auto; min-height: 0; height: 44px; margin: 0.2rem 0; }
|
.checkout-split-divider { width: auto; min-height: 0; height: 44px; margin: 0.2rem 0; }
|
||||||
.checkout-split-divider::before { top: 50%; bottom: auto; left: 0.2rem; right: 0.2rem; width: auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent); }
|
.checkout-split-divider::before { top: 50%; bottom: auto; left: 0.2rem; right: 0.2rem; width: auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent); }
|
||||||
@@ -2452,6 +2462,124 @@ a:focus-visible, button:focus-visible {
|
|||||||
.pay-sub-cards .mini-card { width: 26px; height: 18px; border-radius: 4px; }
|
.pay-sub-cards .mini-card { width: 26px; height: 18px; border-radius: 4px; }
|
||||||
.pay-sub-cards .mini-card svg { width: 16px; height: auto; }
|
.pay-sub-cards .mini-card svg { width: 16px; height: auto; }
|
||||||
|
|
||||||
|
/* ============================================================================
|
||||||
|
PayPal-Kachel: eigens "besonders" gestaltet (ausdrücklicher Wunsch) — exakt
|
||||||
|
in der Mitte geteilt, obere Hälfte PayPal-Markenfarben + Wortmarke, untere
|
||||||
|
Hälfte die Visa-/Mastercard-Hinweis-Badges. Animierter Verlaufsrand, sanftes
|
||||||
|
Glitzern und ein leuchtender Mittelsteg statt der schlichten Icon-Zeile, wie
|
||||||
|
sie die Überweisung-Karte daneben weiterhin hat — damit PayPal als Haupt-
|
||||||
|
zahlungsart bewusst heraussticht. ============================================================================ */
|
||||||
|
.pay-option-paypal-split { display: block; padding: 1.05em; }
|
||||||
|
.pay-option-paypal-split .pp-tile {
|
||||||
|
position: relative;
|
||||||
|
isolation: isolate;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
/* Feste Höhe statt min-height: nur mit einer DEFINIERTEN Gesamthöhe teilen die beiden
|
||||||
|
flex:1-Hälften unten den Platz auch wirklich exakt 50/50 auf. Mit auto-Höhe (nur
|
||||||
|
min-height) richtet sich ein Flex-Container stattdessen nach dem tatsächlichen Inhalt
|
||||||
|
jeder Hälfte — bei unterschiedlich viel Inhalt (hier: Badge+Wortmarke oben vs. schmalerer
|
||||||
|
Kartenhinweis unten) verschiebt sich die Trennlinie dann sichtbar aus der Mitte. */
|
||||||
|
height: 220px;
|
||||||
|
border: 1.5px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(var(--c-anthracite), var(--c-anthracite)) padding-box,
|
||||||
|
linear-gradient(115deg, #1fb2ff, #9b7fd6, #1fb2ff, #003087, #1fb2ff) border-box;
|
||||||
|
background-size: 100% 100%, 260% 100%;
|
||||||
|
animation: pp-tile-border-shift 9s ease-in-out infinite;
|
||||||
|
box-shadow: 0 14px 30px -16px rgba(0, 48, 135, 0.75);
|
||||||
|
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
||||||
|
}
|
||||||
|
.pay-option-paypal-split:hover .pp-tile { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(0, 112, 186, 0.85); }
|
||||||
|
@keyframes pp-tile-border-shift {
|
||||||
|
0%, 100% { background-position: 0 0, 0% 50%; }
|
||||||
|
50% { background-position: 0 0, 100% 50%; }
|
||||||
|
}
|
||||||
|
.pp-tile-shine {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -60%;
|
||||||
|
width: 35%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
|
||||||
|
transform: skewX(-18deg);
|
||||||
|
animation: account-head-shine 6s ease-in-out infinite 1s;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.pp-sparkle { position: absolute; font-size: 0.8rem; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); }
|
||||||
|
.pp-sparkle-1 { top: 0.6rem; right: 0.9rem; animation: account-nav-sparkle-twinkle 2.6s ease-in-out infinite; }
|
||||||
|
.pp-sparkle-2 { bottom: 0.7rem; left: 0.9rem; font-size: 0.65rem; animation: account-nav-sparkle-twinkle 3.3s ease-in-out infinite 0.7s; }
|
||||||
|
|
||||||
|
/* Exakt hälftig per flex:1 auf beiden Zonen — bei ungleichem Inhalt bleibt die Trennlinie
|
||||||
|
trotzdem immer genau mittig, weil beide Hälften gleich viel Raum beanspruchen. */
|
||||||
|
.pp-half { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; padding: 0.8rem 1.1rem; position: relative; z-index: 2; }
|
||||||
|
.pp-half-top {
|
||||||
|
background:
|
||||||
|
radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, 0.24), transparent 55%),
|
||||||
|
linear-gradient(135deg, #1ea7ff 0%, #0b4fb0 55%, #002569 100%);
|
||||||
|
}
|
||||||
|
.pp-half-bottom {
|
||||||
|
/* Linksbündig statt zentriert: rechts bleibt bewusst Platz frei für die Radio-Markierung
|
||||||
|
(siehe .pay-option-paypal-split input), damit sie nicht auf der Mastercard-Karte landet —
|
||||||
|
genau die Anordnung aus dem Referenz-Screenshot (Text/Karten links, Auswahlpunkt rechts). */
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-right: 2.6rem;
|
||||||
|
background:
|
||||||
|
radial-gradient(120% 160% at 88% 100%, color-mix(in srgb, #1ea7ff 16%, transparent), transparent 60%),
|
||||||
|
linear-gradient(155deg, color-mix(in srgb, #003087 22%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 88%, black));
|
||||||
|
}
|
||||||
|
.pp-badge {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 13px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%), rgba(0, 20, 60, 0.35);
|
||||||
|
box-shadow: 0 6px 16px -4px rgba(0, 10, 40, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||||||
|
}
|
||||||
|
.pp-wordmark { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
|
||||||
|
.pp-word-pay { color: #fff; }
|
||||||
|
.pp-word-pal { color: #bfe4ff; }
|
||||||
|
|
||||||
|
/* Leuchtender Mittelsteg statt einer schlichten Linie — genau die Stelle, an der die Kachel
|
||||||
|
"in der Mitte, in der Breite getrennt" ist. */
|
||||||
|
.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; }
|
||||||
|
.mini-card-lg { width: 40px; height: 27px; border-radius: 6px; flex-shrink: 0; }
|
||||||
|
.mini-card-lg svg { width: 22px; 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. */
|
||||||
|
.pay-option-paypal-split input[type="radio"] {
|
||||||
|
position: absolute;
|
||||||
|
right: 0.9rem;
|
||||||
|
bottom: 0.85rem;
|
||||||
|
z-index: 4;
|
||||||
|
margin-left: 0;
|
||||||
|
background: rgba(9, 12, 24, 0.35);
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
}
|
||||||
|
.pay-option-paypal-split input[type="radio"]:checked { border-color: #fff; }
|
||||||
|
.pay-option-paypal-split input[type="radio"]:checked::before { background: #fff; }
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.pay-option-paypal-split .pp-tile { animation: none; }
|
||||||
|
.pp-tile-shine, .pp-sparkle-1, .pp-sparkle-2 { animation: none; }
|
||||||
|
}
|
||||||
|
/* Überschreibt gezielt die generische Regel ".pay-card:has(input:checked) .pay-option
|
||||||
|
span:not(.pay-icon)" (weiter oben) mit höherer Selektor-Spezifität — sonst würde die
|
||||||
|
PayPal-Wortmarke und der Kartenhinweis im ausgewählten Zustand auf die einfarbige
|
||||||
|
Markenfarbe umspringen und auf dem blauen Verlaufshintergrund kaum noch lesbar sein. */
|
||||||
|
.pay-card:has(input:checked) .pay-option-paypal-split .pp-wordmark .pp-word-pay { color: #fff; }
|
||||||
|
.pay-card:has(input:checked) .pay-option-paypal-split .pp-wordmark .pp-word-pal { color: #bfe4ff; }
|
||||||
|
.pay-card:has(input:checked) .pay-option-paypal-split .pp-tile .pp-half-bottom .pp-cards-caption { color: rgba(244, 241, 247, 0.75); }
|
||||||
|
|
||||||
/* Der große "Jetzt zahlungspflichtig bestellen"-Knopf gehört NUR zur Überweisung (Vorkasse) —
|
/* Der große "Jetzt zahlungspflichtig bestellen"-Knopf gehört NUR zur Überweisung (Vorkasse) —
|
||||||
bei PayPal läuft die Zahlung ausschließlich über die echten PayPal-Smart-Buttons oben (siehe
|
bei PayPal läuft die Zahlung ausschließlich über die echten PayPal-Smart-Buttons oben (siehe
|
||||||
#paypal-button-container), die selbst die Bestellung auslösen, sobald die Zahlung bei PayPal
|
#paypal-button-container), die selbst die Bestellung auslösen, sobald die Zahlung bei PayPal
|
||||||
|
|||||||
Reference in New Issue
Block a user