-
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 9c00d44..f46b608 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -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);
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-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); }
@@ -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 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) —
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