.c-express-checkout { margin-top: 1rem; }
.c-express-checkout[hidden] { display: none !important; }
/* One row of buttons (buttonHeight 48) is kept free while Stripe.js loads, so the page below does not jump. */
[data-express-buttons] { min-height: 48px; }
.c-express-checkout--checkout { margin: 0 0 1.5rem; }
/* /checkout/register: the theme lays .checkout-main out as a grid of two columns from 768px (its row of express buttons); the
   box takes the whole row like the contact card below it, not one column (F2 Design-Tor L-2383 F3). No effect elsewhere. */
.checkout-main > .c-express-checkout { grid-column: 1 / -1; }
/* B-817 display C: the box before the main button. Display B: the main button's grid with the wallet as a second column of
   the same width (the script moves the buttons there; hint and terms stay in the box). */
.c-express-checkout--first:not(.c-express-checkout--checkout) { margin: 0 0 1rem; }
/* V1: right below the main button, with the gap Stripe keeps between the buttons. */
.c-express-checkout--stacked:not(.c-express-checkout--checkout) { margin-top: .5rem; }
.c-express-checkout--beside .c-express-checkout__hint { margin-top: 0; }
.c-express-checkout-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: start; }
.c-express-checkout__title { font-weight: 600; margin-bottom: .75rem; }
.c-express-checkout__divider { display: flex; align-items: center; gap: .75rem; color: #4a5168; font-size: .875rem; margin-bottom: .75rem; }
.c-express-checkout__divider::before, .c-express-checkout__divider::after { content: ""; flex: 1; border-top: 1px solid #e4e8f1; }
.c-express-checkout__divider--after { margin: .5rem 0 0; }
.c-express-checkout__hint { font-size: .875rem; color: #b00d27; margin: .5rem 0 0; }
.c-express-checkout__hint:empty { display: none; }
.c-express-last-step { border: 1px solid #e4e8f1; border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.c-express-last-step__title { font-size: 1.25rem; font-weight: 600; margin-bottom: .25rem; }
.c-express-last-step__text { margin-bottom: 0; }
/* „Letzter Schritt“: the wallet reserved exactly this amount, so shipping, payment and voucher are not offered here. */
.is-express-last-step .confirm-payment-shipping,
.is-express-last-step .c-checkout-voucher { display: none !important; }
/* Flow „direct“: the checkout's terms under the buttons, small like the checkout's own (legal.html.twig). */
.c-express-checkout__legal { font-size: .8125rem; color: #4a5168; margin: .75rem 0 0; }
.c-express-checkout__legal p { margin: 0 0 .25rem; }
.c-express-checkout__legal-title { font-weight: 600; color: #141824; }
.c-express-checkout__legal .btn-link-inline { font-size: inherit; vertical-align: baseline; }
/* Flow „direct“: the page covered from the sheet's confirmation to the thank-you page (user 30.10.2026). A veil of m-ink, a
   white card with the radius of cards and the shadow of floating elements (tokens.json), a ring turning in m-brand; it fades in
   within 200 ms, and with reduced motion nothing moves (the ring stands still). */
.c-express-checkout-wait { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(10, 26, 78, .55); animation: c-express-checkout-wait-in .2s ease-out; }
.c-express-checkout-wait__panel { width: 100%; max-width: 22rem; padding: 1.5rem 1.75rem; text-align: center; background: #fff; border-radius: 14px; box-shadow: 0 1px 1px rgba(10, 26, 78, .04), 0 12px 32px -10px rgba(10, 26, 78, .18), 0 30px 60px -30px rgba(10, 26, 78, .22); }
.c-express-checkout-wait__spinner { display: inline-block; width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; border: 3px solid #e4e8f1; border-top-color: #1e2d7d; border-radius: 50%; animation: c-express-checkout-wait-turn .8s linear infinite; }
.c-express-checkout-wait__title { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 600; color: #0a1a4e; }
.c-express-checkout-wait__note { margin: 0; font-size: .875rem; color: #4a5168; }
.is-express-waiting, .is-express-waiting body { overflow: hidden; }
@keyframes c-express-checkout-wait-turn { to { transform: rotate(360deg); } }
@keyframes c-express-checkout-wait-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .c-express-checkout-wait, .c-express-checkout-wait__spinner { animation: none; }
}