/* Eigene Designänderungen hier ergänzen. styles.css enthält das Originaldesign. */
.site-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-nav.is-scrolled {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, .07);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal-hidden { opacity: 1; transform: none; }
}

.nfc-product-photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.product-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.price-option { display: block; transition: border-color .2s, transform .2s; }
a.price-option:hover { border-color: #4285f4; transform: translateY(-3px); }
a.price-option:focus-visible { outline: 3px solid #4285f4; outline-offset: 4px; }
.order-link { display: block; margin-top: 26px; color: #80adfa; font-weight: 600; }
.order-header { max-width: 1180px; margin: auto; padding: 28px 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.order-header > a:last-child { color: #ffffff90; font-size: 14px; }
.order-main { max-width: 1180px; margin: 40px auto 90px; padding: 0 24px; }
.order-main h1 { margin: 16px 0; }
.order-layout { display: grid; grid-template-columns: 1.45fr 1fr; align-items: start; gap: 28px; margin-top: 36px; }
.form-panel { padding: 30px; background: #ffffff08; border: 1px solid #ffffff1a; border-radius: 28px; margin-bottom: 24px; }
.form-panel h2 { font: 700 23px 'Lexend Deca',sans-serif; margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-panel label { display: block; font-size: 14px; color: #ffffffb0; }
.form-panel input,.form-panel select { width: 100%; margin-top: 8px; padding: 13px 14px; background: #15171c; border: 1px solid #ffffff30; border-radius: 12px; color: white; font: inherit; }
.form-panel input:focus,.form-panel select:focus { outline: 2px solid #4285f4; outline-offset: 2px; }
.order-summary > label { margin-bottom: 20px; }
.order-summary img { width: 100%; height: 190px; object-fit: contain; margin-bottom: 28px; }
.summary-row,.summary-total { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; }
.summary-row { font-size: 14px; color: #ffffff90; }
.summary-total { border-top: 1px solid #ffffff20; padding-top: 24px; margin-top: 24px; font-size: 21px; font-weight: 700; }
.payment-note { font-size: 13px; line-height: 1.6; color: #ffffff80; margin-top: 20px; }
.pay-button { width: 100%; padding: 16px; border-radius: 14px; background: #4285f4; color: white; font-weight: 700; margin-top: 24px; cursor: pointer; }
.pay-button:disabled { opacity: .5; cursor: not-allowed; }
@media(max-width:760px) { .order-layout { grid-template-columns: 1fr; } .form-panel { padding: 24px; } }
@media(max-width:420px) { .form-grid { grid-template-columns: 1fr; } .order-header { align-items: flex-start; } }
.product-option { position: relative; display: flex; flex-direction: column; align-items: center; padding: 32px; border: 2px solid #ffffff18; border-radius: 32px; background: #ffffff08; color: white; cursor: pointer; text-align: center; transition: border-color .2s, background .2s; }
.product-option:hover { border-color: #4285f480; }
.product-option.is-selected { border-color: #4285f4; background: linear-gradient(145deg,#4285f422,#ffffff05); }
.product-option:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.product-option img { width: 100%; height: 240px; object-fit: contain; margin: 12px 0 28px; }
.product-name { font-family: 'Lexend Deca',sans-serif; font-size: 28px; font-weight: 700; }
.product-description { color: #ffffff80; font-size: 15px; margin-top: 12px; }
.product-check { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; height: 28px; width: 28px; border-radius: 50%; border: 1px solid #ffffff30; color: transparent; }
.is-selected .product-check { background: #4285f4; border-color: #4285f4; color: white; }
.product-prices { margin-top: 64px; }
.price-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 32px; }
.price-option { padding: 32px; border: 1px solid #ffffff1a; border-radius: 28px; background: #ffffff08; }
.price-option h4 { font-size: 18px; color: #ffffffa6; }
.package-price { margin: 20px 0 16px; font: 800 48px/1.15 'Lexend Deca',sans-serif; letter-spacing: -2px; }
.package-price span { font-size: 24px; letter-spacing: 0; }
.unit-price { color: #ffffff70; font-size: 14px; }
.prices-pending { text-align: center; padding: 36px; margin-top: 32px; border: 1px solid #ffffff1a; border-radius: 28px; color: #ffffff80; }
@media(max-width:640px) { .product-options { gap: 14px; } .product-option { padding: 22px 12px; border-radius: 24px; } .product-option img { height: 130px; margin: 20px 0; } .product-name { font-size: 23px; } .product-description { font-size: 13px; } .product-check { top: 12px; right: 12px; width: 22px; height: 22px; } .price-options { grid-template-columns: 1fr; gap: 14px; } .price-option { padding: 24px; } }
/* Mobile navigation and responsive page layout */
section[id] { scroll-margin-top: 88px; }
.menu-toggle { display: none; }
.mobile-menu[hidden] { display: none; }
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; padding: 12px 20px 22px; background: rgba(8,10,14,.97); border-bottom: 1px solid #ffffff18; box-shadow: 0 20px 35px #0005; }
.mobile-menu a { display: block; padding: 15px 14px; border-radius: 12px; font-size: 16px; color: #eee; }
.mobile-menu a:hover,.mobile-menu a:focus-visible { background: #ffffff10; }
.mobile-menu .mobile-menu-cta { background: #4285f4; margin-top: 10px; text-align: center; font-weight: 700; }
.site-nav.menu-open { background: rgba(8,10,14,.97); backdrop-filter: blur(12px); }
@media(max-width:1023px) and (min-width:768px) {
  main h1 { font-size: 76px !important; }
  main > .grid { gap: 48px; }
}
@media(max-width:767px) {
  .site-nav { padding: 12px 20px; gap: 12px; min-height: 70px; }
  .site-nav > a { margin-left: auto; padding: 10px 16px; font-size: 12px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #ffffff25; border-radius: 12px; color: white; cursor: pointer; }
  .menu-toggle span { display: block; width: 19px; height: 2px; background: currentColor; transition: transform .2s,opacity .2s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  main { padding: 116px 20px 36px !important; }
  main h1 { font-size: clamp(32px,8.5vw,62px) !important; line-height: 1.07 !important; letter-spacing: -.055em !important; margin-bottom: 24px !important; }
  main h1 .text-gradient-brand { display: inline-block; white-space: nowrap; }
  main > .grid { gap: 42px; }
  main .z-10 > p { font-size: 17px; line-height: 1.65; margin-bottom: 28px; }
  main .z-10 > .flex { display: flex; flex-direction: column; gap: 12px; }
  main .z-10 > .flex > a { justify-content: center; height: 54px; width: 100%; }
  main .z-10 > .flex > div { padding: 12px; justify-content: center; height: auto; min-height: 54px; gap: 12px; }
  main .z-10 > .flex > div > span { font-size: 12px; }
  main .animate-float { width: min(100%,280px); height: 400px; padding: 26px; border-radius: 32px; }
  main > .mt-24 { margin-top: 44px; padding-top: 18px; padding-bottom: 18px; }
  section.max-w-7xl { padding: 48px 20px; }
  section h2 { font-size: clamp(30px,8vw,42px); line-height: 1.08 !important; }
  section > .mb-16 { margin-bottom: 28px; }
  #funktion .grid,#vorteile .grid { gap: 16px; }
  #funktion .grid > div,#vorteile .grid > div { padding: 26px; border-radius: 24px; }
  #funktion h3,#vorteile h3 { font-size: 23px; }
  #funktion p,#vorteile p { font-size: 15px; line-height: 1.65; }
  #vorteile .text-6xl { margin-top: 28px; font-size: 44px; }
  #kennzahlen { padding-top: 24px; padding-bottom: 24px; }
  #kennzahlen > div { padding: 26px 16px; gap: 30px 14px; border-radius: 24px; }
  #kennzahlen [data-count] { font-size: clamp(28px,8vw,38px); white-space: nowrap; }
  #kennzahlen .tracking-widest { font-size: 10px; letter-spacing: .06em; line-height: 1.5; }
  .product-options { gap: 12px; }
  .product-option { padding: 20px 10px; min-width: 0; }
  .product-option img { height: clamp(100px,29vw,180px); }
  .product-name { font-size: 22px; }
  .product-description { font-size: 12px; line-height: 1.5; }
  .product-prices { margin-top: 36px; }
  .price-options { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .price-option { padding: 22px; }
  .package-price { font-size: 38px; margin: 14px 0 10px; }
  .order-link { margin-top: 18px; }
  footer { padding: 32px 20px !important; }
  footer > div { gap: 22px !important; text-align: center; }
  .order-header { padding: 18px 20px; gap: 14px; align-items: center; }
  .order-header > a:last-child { font-size: 12px; padding: 10px 0; }
  .order-main { margin: 20px auto 48px; padding: 0 20px !important; }
  .order-main h1 { font-size: 34px !important; }
  .order-layout { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 26px; }
  .form-panel { padding: 22px; border-radius: 22px; }
  .form-panel input,.form-panel select { font-size: 16px; min-height: 48px; min-width: 0; }
  .form-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .order-summary img { height: 150px; }
  .summary-total { font-size: 19px; }
}
@media(min-width:768px) { .mobile-menu { display: none; } }
/* Sanftes Navigieren zu den Seitenabschnitten. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Wechselnde Zahlungslogos bleiben in einer eigenen Fläche im Bestellkasten. */
.payment-logo-stage { position: relative; height: 102px; margin-top: 10px; overflow: hidden; pointer-events: none; isolation: isolate; }
.payment-logo { position: absolute; display: grid; place-items: center; width: 76px; height: 44px; padding: 8px 11px; border-radius: 11px; background: #fff; box-shadow: 0 6px 20px #0003; opacity: 0; transform: translateY(8px) scale(.92); animation: payment-logo-pop 15s infinite both; animation-delay: calc(var(--logo-index) * 3s); }
.payment-logo svg { width: 100%; height: 100%; fill: currentColor; }
.payment-logo-visa { left: 8%; top: 14px; color: #1434cb; }
.payment-logo-mastercard { left: 62%; top: 40px; color: #eb001b; }
.payment-logo-americanexpress { left: 32%; top: 8px; color: #006fcf; }
.payment-logo-applepay { left: 4%; top: 45px; color: #000; }
.payment-logo-googlepay { left: 60%; top: 12px; color: #3c4043; }
.payment-logo-stage + .pay-button { margin-top: 4px; }
@keyframes payment-logo-pop { 0% {opacity:0;transform:translateY(8px) scale(.92)} 3%,15% {opacity:1;transform:translateY(0) scale(1)} 20%,100% {opacity:0;transform:translateY(-6px) scale(.96)} }
.payment-logo-stage.is-paused .payment-logo { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) {
  .payment-logo-stage { height:auto; min-height:54px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:8px 0; }
  .payment-logo { position:static; width:55px; height:34px; padding:6px; opacity:1; transform:none; animation:none !important; }
}
.payment-logo svg { width: 54px; height: 54px; max-width: none; }
.payment-logo-americanexpress svg { width: 32px; height: 32px; }
.payment-logo svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Zahlungsarten unter dem Button mit überlappendem Wechsel. */
.payment-methods { margin-top: 22px; }
.payment-methods-label { margin: 0; text-align: left; color: #9ca3af; font-size: 12px; }
.payment-methods .payment-logo-stage { margin-top: 4px; }
@keyframes payment-logo-pop {
  0% { opacity: 0; transform: translateY(8px) scale(.92); }
  4%,18% { opacity: 1; transform: translateY(0) scale(1); }
  25%,100% { opacity: 0; transform: translateY(-6px) scale(.96); }
}
@media(prefers-reduced-motion:reduce) {
  .payment-logo { position: relative; left: auto; top: auto; }
}

/* Schneller Logo-Wechsel und bündige Formularspalten. */
.payment-logo { animation-duration: 6s; animation-delay: calc(var(--logo-index) * 1.2s); }
#order-message:empty { display: none; }
@media(min-width:768px) {
  .order-layout { align-items: stretch; }
  .order-details { display: flex; flex-direction: column; }
  .order-details > .form-panel:last-child { flex: 1; }
}
.payment-logo { animation-duration: 10s; animation-delay: calc(var(--logo-index) * 2s); }
.business-link-heading { display:flex; align-items:center; gap:8px; }
.business-link-info { display:inline-grid; place-items:center; width:22px; height:22px; border:1px solid #ffffff65; border-radius:50%; color:#b8c9e4; background:transparent; font:bold 13px Georgia,serif; cursor:pointer; position:relative; }
.business-link-info::before { content:""; position:absolute; inset:-10px; }
.business-link-info:hover,.business-link-info[aria-expanded="true"] { color:#fff; border-color:#4285f4; background:#4285f430; }
.business-link-info:focus-visible { outline:2px solid #4285f4; outline-offset:4px; }
.business-link-help { margin-top:12px; padding:16px; border:1px solid #4285f455; border-radius:12px; background:#4285f410; color:#c6cbd4; font-size:13px; line-height:1.65; }
.business-link-help[hidden] { display:none; }
.business-link-help strong { color:#fff; }
.business-link-help ol { list-style:decimal; padding-left:20px; margin:10px 0; }
.business-link-help li + li { margin-top:6px; }
.business-link-help p { margin:10px 0 0; }
.business-link-input { position:relative; margin-top:8px; }
.form-panel .business-link-input input { margin-top:0; padding-left:100px; }
#paste-business-link { position:absolute; left:7px; top:50%; transform:translateY(-50%); padding:8px 10px; border-radius:7px; background:#4285f42b; color:#a9caff; font-size:12px; font-weight:600; cursor:pointer; }
#paste-business-link:hover { background:#4285f449; color:#fff; }
#paste-business-link:focus-visible { outline:2px solid #4285f4; outline-offset:2px; }
.paste-link-message { font-size:12px; line-height:1.5; color:#b7c9e5; margin-top:8px; }
.cart-product { display:flex; align-items:center; gap:18px; padding:20px 0; border-bottom:1px solid #ffffff18; }
.order-summary .cart-product img { width:84px; height:90px; object-fit:contain; margin:0; flex-shrink:0; }
.cart-product-info { flex:1; min-width:0; }
.cart-product-info > label { color:#fff; font-weight:600; }
.cart-unit,.cart-hint { font-size:12px; color:#ffffff80; line-height:1.5; margin:6px 0 12px; }
.cart-hint { margin:16px 0 22px; }
.quantity-control { display:flex; align-items:center; border:1px solid #ffffff30; border-radius:10px; overflow:hidden; background:#15171c; }
.quantity-control button { width:44px; height:44px; flex-shrink:0; color:#fff; font-size:23px; cursor:pointer; }
.quantity-control button:hover { background:#4285f430; }
.quantity-control button:disabled { opacity:.3; cursor:default; }
.quantity-control button:focus-visible { outline:2px solid #4285f4; outline-offset:-3px; }
.form-panel .quantity-control input { width:100%; min-width:0; margin:0; padding:8px 0; border:0; border-radius:0; text-align:center; appearance:textfield; -moz-appearance:textfield; }
.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
@media(max-width:380px) { .cart-product { gap:10px; } .order-summary .cart-product img { width:64px; } }
/* Alle Zahlungsarten dauerhaft sichtbar. */
.payment-methods .payment-logo-stage { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; height:auto; min-height:0; padding:12px 0 0; overflow:visible; }
.payment-logo-stage .payment-logo { position:relative; left:auto; top:auto; flex:0 0 62px; width:62px; height:40px; padding:0; opacity:1; transform:none; animation:none !important; }
.payment-logo-stage .payment-logo svg { width:48px; height:48px; }
.payment-logo-stage .payment-logo-americanexpress svg { width:30px; height:30px; }
/* Hauptmenü mittig, einzelne Links beim Hover deutlich heller. */
@media(min-width:768px) {
  .site-nav .desktop-nav { position:absolute; left:50%; transform:translateX(-50%); opacity:1; }
}
.desktop-nav a { color:rgba(255,255,255,.6); transition:color .18s ease; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { color:#fff; opacity:1; }
.mobile-menu a:hover,.mobile-menu a:focus-visible { color:#fff; background:rgba(255,255,255,.08); }
.site-nav .nav-cart { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; margin-left:auto; border-radius:12px; color:rgba(255,255,255,.7); transition:color .18s ease,background .18s ease; }
.site-nav .nav-cart:hover,.site-nav .nav-cart:focus-visible { color:#fff; background:rgba(255,255,255,.08); }
.site-nav .nav-cart:focus-visible { outline:2px solid #4285f4; outline-offset:2px; }
.nav-cart { position:relative; }
.cart-badge { position:absolute; right:-3px; top:-2px; min-width:18px; padding:2px 4px; border-radius:20px; background:#4285f4; color:white; text-align:center; font-size:10px; }
.cart-badge[hidden] { display:none; }
.flying-product { position:fixed; z-index:9999; pointer-events:none; object-fit:contain; }
#cart-dialog { width:min(420px,calc(100% - 32px)); margin:auto; padding:30px; border:1px solid #ffffff30; border-radius:22px; background:#11151c; color:white; box-shadow:0 20px 80px #0008; }
#cart-dialog::backdrop { background:#000a; backdrop-filter:blur(4px); }
#cart-dialog h2 { font-size:24px; font-weight:700; margin-bottom:12px; }
#cart-dialog p { color:#b7bfcd; line-height:1.6; }
.cart-dialog-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.cart-dialog-actions > * { flex:1; text-align:center; white-space:nowrap; padding:13px; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; background:#ffffff12; }
.cart-dialog-actions a { background:#4285f4; }
.cart-dialog-actions > *:hover { filter:brightness(1.2); }
#cart-drawer { position:fixed; inset:0 0 0 auto; margin:0; width:min(480px,100%); height:100dvh; max-height:100dvh; max-width:100%; padding:0; border:0; border-left:1px solid #ffffff20; background:#101216; color:white; }
#cart-drawer[open] { display:flex; flex-direction:column; }
#cart-drawer::backdrop { background:#0009; backdrop-filter:blur(3px); }
.drawer-header { display:flex; align-items:center; gap:18px; padding:22px; border-bottom:1px solid #ffffff15; }
.drawer-header h2 { font-size:23px; font-weight:700; }
#close-cart { width:44px; height:44px; font-size:32px; border-radius:50%; background:#ffffff0c; cursor:pointer; }
#drawer-items { flex:1; overflow:auto; padding:24px; }
.drawer-product { display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:20px 0; border-bottom:1px solid #ffffff18; }
.drawer-product img { width:64px; height:80px; object-fit:contain; }
.drawer-product h3 { font-size:15px; font-weight:600; }
.drawer-product p { color:#a1a9b6; font-size:12px; margin:6px 0 12px; }
.drawer-product > strong { font-size:13px; }
.drawer-quantity { display:flex; align-items:center; justify-content:space-between; width:126px; border:1px solid #ffffff25; border-radius:9px; }
.drawer-quantity button { width:40px; height:40px; font-size:20px; cursor:pointer; }
.drawer-quantity button:disabled { opacity:.3; }
.drawer-remove { color:#a1a9b6; text-decoration:underline; font-size:12px; margin-top:12px; cursor:pointer; }
#cart-drawer .drawer-footer { padding:24px!important; border-top:1px solid #ffffff15; background:#15181e; }
#drawer-pay,.drawer-shop { width:100%; margin-top:20px; background:#4285f4; color:white; font-weight:600; padding:16px; border-radius:12px; cursor:pointer; }
#drawer-pay:disabled { opacity:.4; cursor:default; }
.drawer-empty { color:#adb6c5; text-align:center; margin:40px 0 20px; }
#cart-drawer button:focus-visible { outline:2px solid #4285f4; outline-offset:2px; }
#cart-drawer button:hover:not(:disabled) { filter:brightness(1.2); }
.order-summary .payment-methods-overview { margin-top:12px; border-radius:12px; overflow:hidden; background:#f5f5f5; }
.order-summary .payment-methods-overview img { display:block; width:100%; height:auto; margin:0; object-fit:contain; }
.product-detail { max-width:980px; margin:55px auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.product-detail > img { width:100%; max-height:380px; object-fit:contain; }
.product-detail h1 { font-size:36px; font-weight:700; margin:12px 0; }
#detail-description { color:#aab2c0; margin-bottom:28px; }
#add-product label { display:block; margin-bottom:12px; }
#add-product .quantity-control { width:180px; margin-bottom:18px; }
#detail-quantity { width:90px; text-align:center; background:transparent; border:0; color:white; }
#detail-unit { font-size:20px; font-weight:600; }
#detail-discount { color:#90b7ff; font-size:13px; margin-top:8px; }
#detail-error { color:#ffb9b9; margin-top:12px; }
@media(max-width:767px) { .product-detail { grid-template-columns:1fr; gap:24px; margin:24px auto; } .product-detail > img { height:210px; } .product-detail h1 { font-size:28px; } }
/* Warenkorb gleitet vom rechten Bildschirmrand herein. */
#cart-drawer[open] { animation:cart-slide-in .38s cubic-bezier(.22,1,.36,1) both; }
#cart-drawer[open]::backdrop { animation:cart-backdrop-in .3s ease both; }
#cart-drawer[open].is-closing { animation:cart-slide-out .25s ease-in both; }
#cart-drawer[open].is-closing::backdrop { animation:cart-backdrop-out .25s ease both; }
@keyframes cart-slide-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes cart-slide-out { from { transform:translateX(0); } to { transform:translateX(100%); } }
@keyframes cart-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes cart-backdrop-out { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  #cart-drawer[open],#cart-drawer[open]::backdrop { animation:none; }
}
.cart-product[hidden] { display:none; } .cart-hint a { color:#90b7ff; } .cart-hint a:hover { color:#fff; }
body:has(.product-detail) .order-header { position:sticky; top:0; z-index:60; width:100%; max-width:none; margin:0; padding:24px; min-height:92px; background:rgba(8,11,17,.93); backdrop-filter:blur(12px); }
body:has(.product-detail) .order-header > a:first-child { flex-shrink:0; letter-spacing:-.05em; }
.order-header .nav-cart { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; margin-left:12px; padding:10px; color:white; }
body:has(.product-detail) .order-header > a:nth-child(2) { margin-left:auto; }
body:has(.product-detail) .order-header { display:flex; align-items:center; gap:16px; }
body:has(.product-detail) .order-header > a:nth-child(2) { margin-left:auto; white-space:nowrap; font-size:13px; }
body:has(.product-detail) .order-header > .nav-cart { display:flex; flex:0 0 44px; margin-left:0; }
body:has(.product-detail) .order-header > a:nth-child(2) { color:rgba(255,255,255,.65); transition:color .18s ease; }
body:has(.product-detail) .order-header > a:nth-child(2):hover,
body:has(.product-detail) .order-header > a:nth-child(2):focus-visible { color:#fff; }
@media(max-width:767px) { body:has(.product-detail) .order-header { padding:12px 20px; min-height:70px; gap:12px; } body:has(.product-detail) .order-header > a:nth-child(2) { font-size:12px; } }
@media(max-width:380px) { body:has(.product-detail) .order-header { gap:8px; padding-inline:12px; } body:has(.product-detail) .order-header > a:nth-child(2) { font-size:11px; } }
/* Einheitlicher Hover-Effekt für den Warenkorb auf allen Seiten. */
.nav-cart { border-radius:12px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.04); transition:color .18s ease,background-color .18s ease; }
.site-nav .nav-cart:hover,.order-header .nav-cart:hover,
.site-nav .nav-cart:focus-visible,.order-header .nav-cart:focus-visible { color:#fff; background:rgba(255,255,255,.14); }
.nav-cart:focus-visible { outline:2px solid #4285f4; outline-offset:3px; }
.stripe-methods { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } .stripe-methods span { padding:9px 14px; background:#fff; color:#161616; border-radius:9px; font-size:13px; font-weight:700; }
.order-summary .payment-methods-overview { background:transparent; border-radius:0; }
/* Dezenter diagonaler Schimmer für blaue Aktionsbuttons. */
:is(a.bg-brand-blue,button.bg-brand-blue,.pay-button,#drawer-pay,.drawer-shop,.mobile-menu-cta,.cart-dialog-actions a) {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
:is(a.bg-brand-blue,button.bg-brand-blue,.pay-button,#drawer-pay,.drawer-shop,.mobile-menu-cta,.cart-dialog-actions a)::after {
  content:"";
  position:absolute;
  inset:-100%;
  pointer-events:none;
  background:linear-gradient(45deg,transparent 36%,rgba(35,40,50,.20) 43%,rgba(35,40,50,.44) 50%,rgba(35,40,50,.20) 57%,transparent 64%);
  transform:translate(-65%,65%);
  opacity:0;
}
@media(hover:hover) {
  :is(a.bg-brand-blue,button.bg-brand-blue,.pay-button,#drawer-pay,.drawer-shop,.mobile-menu-cta,.cart-dialog-actions a):hover:not(:disabled)::after {
    animation:blue-button-sweep .7s ease-out both;
  }
}
@keyframes blue-button-sweep {
  0% { transform:translate(-65%,65%); opacity:0; }
  15%,80% { opacity:1; }
  100% { transform:translate(65%,-65%); opacity:0; }
}
@media(prefers-reduced-motion:reduce) {
  :is(a.bg-brand-blue,button.bg-brand-blue,.pay-button,#drawer-pay,.drawer-shop,.mobile-menu-cta,.cart-dialog-actions a):hover:not(:disabled)::after {
    animation:none; transform:none; opacity:1; background:rgba(35,40,50,.20);
  }
}
/* Schliessen-Symbol optisch und geometrisch mittig. */
#close-cart { display:grid; place-items:center; padding:0; line-height:1; flex-shrink:0; font-size:0; }
#close-cart::before,#close-cart::after { content:""; grid-area:1 / 1; width:18px; height:2px; border-radius:2px; background:currentColor; transform:rotate(45deg); }
#close-cart::after { transform:rotate(-45deg); }
/* Kreis mit unabhängig von der Schrift zentriertem X. */
#close-cart { position:relative; display:block; width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%; padding:0; border:1px solid rgba(255,255,255,.08); background:#24262c; color:#fff; font-size:0; line-height:0; }
#close-cart::before,#close-cart::after { position:absolute; left:50%; top:50%; width:18px; height:2px; margin:0; grid-area:auto; transform:translate(-50%,-50%) rotate(45deg); }
#close-cart::after { transform:translate(-50%,-50%) rotate(-45deg); }
#close-cart:hover { background:#34373f; }

/* Zahlungsbestätigung: erst nach serverseitig bestätigtem Zahlungseingang. */
.payment-confirmation{max-width:660px;margin:clamp(35px,8vh,95px) auto 70px;padding:0 24px;text-align:center}
.payment-confirmation [hidden]{display:none!important}
.payment-confirmation .confirmation-icon{width:112px;height:112px;margin:0 auto 28px;display:grid;place-items:center;border-radius:50%}
.confirmation-icon svg{width:100%;height:100%;overflow:visible}
.payment-confirmation .confirmation-brand{font-size:11px;letter-spacing:3px;font-weight:700;color:#7e98bc;margin:0 0 18px}
.payment-confirmation h1{font-size:clamp(32px,5vw,48px)!important;line-height:1.12;letter-spacing:-1.6px;font-weight:800;margin:0 0 22px}
.payment-confirmation #payment-status{max-width:480px;margin:0 auto;color:#a8b5c9;font-size:16px;line-height:1.75}
.payment-confirmation .pay-button{max-width:330px;margin:30px auto 0}
.payment-confirmation .confirmation-shop{display:inline-flex;align-items:center;justify-content:center;margin-top:32px;padding:14px 24px;border:1px solid #ffffff20;border-radius:14px;color:#c5d6ef;transition:background .2s,color .2s}
.payment-confirmation .confirmation-shop:hover{background:#ffffff0c;color:white}
.payment-confirmation .confirmation-shop:focus-visible{outline:2px solid #4285f4;outline-offset:4px}
.payment-spinner{width:48px;height:48px;border:3px solid #ffffff12;border-top-color:#4285f4;border-radius:50%;animation:payment-spin .8s linear infinite}
.success-ring{fill:#20a968;stroke:#20a968}.success-tick{stroke:#fff;stroke-dasharray:1;stroke-dashoffset:0}
.is-paid .success-ring{animation:success-circle .45s ease-out both;transform-origin:center}
.is-paid .success-tick{animation:success-draw .5s .2s ease-out both}
.is-paid .confirmation-icon{animation:success-glow .6s .7s ease forwards}
@keyframes success-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes success-circle{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes success-green{to{stroke:#36ce86}}
@keyframes success-glow{to{background:#36ce8610;box-shadow:0 0 55px #36ce8610}}
@keyframes payment-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.payment-spinner{animation:none}.is-paid .success-ring,.is-paid .success-tick{animation:none;stroke-dashoffset:0}.is-paid .confirmation-icon{animation:none;background:#36ce8610}}