/* Scooter Info – Mobile & Clean-Fixes (2026-10-25) */
html:not(#sx):not(#sx) body{overflow-x:hidden}
html:not(#sx):not(#sx) img,html:not(#sx):not(#sx) svg{max-width:100%}

/* Header */
html:not(#sx):not(#sx) .site-header{height:auto!important}
@media (max-width:1023px){
  html:not(#sx):not(#sx) .site-header .icon-button{display:inline-grid!important;place-items:center}
  html:not(#sx):not(#sx) .site-header > div:not(:first-child){background:#0a0a0b!important;border-top:1px solid rgba(255,255,255,.08)!important;padding:8px 20px 16px!important;box-shadow:0 24px 40px rgba(0,0,0,.5)}
  html:not(#sx):not(#sx) .site-header > div:not(:first-child) *{background-color:transparent!important;box-shadow:none!important}
  html:not(#sx):not(#sx) .mobile-nav-link{display:flex!important;align-items:center;width:100%;min-height:52px;padding:0 4px!important;color:#f5f5f7!important;-webkit-text-fill-color:#f5f5f7!important;font-size:17px!important;font-weight:500!important;border-radius:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;text-align:left;justify-content:space-between}
  html:not(#sx):not(#sx) .mobile-nav-link:last-child{border-bottom:0!important}
  html:not(#sx):not(#sx) .site-header{max-height:none!important;overflow:visible!important}
  html:not(#sx):not(#sx) .site-header > div:not(:first-child){height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;display:block}
  html:not(#sx):not(#sx) .mobile-nav-link svg{color:#6e6e73;flex:none}
}

/* Hero */
@media (max-width:760px){
  html:not(#sx):not(#sx) .hero-section{min-height:auto!important;padding-top:28px!important;padding-bottom:36px!important;gap:24px!important}
  html:not(#sx):not(#sx) .hero-visual{max-height:300px!important;max-width:100%!important;margin:0 auto!important}
  html:not(#sx):not(#sx) .hero-visual img{max-height:280px!important;width:auto!important;margin:0 auto;object-fit:contain}
  html:not(#sx):not(#sx) .hero-copy h1{font-size:clamp(34px,10vw,46px)!important;line-height:1.04!important;letter-spacing:-.035em!important}
  html:not(#sx):not(#sx) .hero-copy p{font-size:16px!important}
  html:not(#sx):not(#sx) .hero-copy button,html:not(#sx):not(#sx) .hero-copy a[class*="rounded"]{min-height:48px}
  html:not(#sx):not(#sx) #root main section{padding-left:20px!important;padding-right:20px!important}
  html:not(#sx):not(#sx) .statement-strip p{font-size:22px!important;line-height:1.25!important}
  html:not(#sx):not(#sx) .three-grid,html:not(#sx):not(#sx) .feature-grid{grid-template-columns:1fr!important;gap:12px!important}
  html:not(#sx):not(#sx) .section-heading-row{flex-direction:column!important;align-items:flex-start!important;gap:12px!important}
  html:not(#sx):not(#sx) h2{font-size:clamp(26px,7.5vw,34px)!important;line-height:1.1!important}
}

/* Footer */
html:not(#sx):not(#sx) footer{border-top:1px solid rgba(255,255,255,.08)!important;background:#000!important}
@media (max-width:760px){
  html:not(#sx):not(#sx) footer,html:not(#sx):not(#sx) footer > div{text-align:center!important;justify-content:center!important;align-items:center!important;flex-direction:column!important;gap:14px!important}
}
html:not(#sx):not(#sx) .sx-flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:14px auto 0;padding:0;font-size:13px}
html:not(#sx):not(#sx) .sx-flinks a{color:#a1a1a6!important;-webkit-text-fill-color:#a1a1a6!important;text-decoration:none!important}
html:not(#sx):not(#sx) .sx-flinks a:hover{color:#f5f5f7!important;-webkit-text-fill-color:#f5f5f7!important}
html.sx-has-flinks .legal-links{display:none!important}

/* Zubehör-Karten mobil: horizontal, eine Spalte */
@media (max-width:640px){
  html:not(#sx):not(#sx) .acc2-grid{grid-template-columns:1fr!important;gap:10px!important}
  html:not(#sx):not(#sx) .acc2-prod{display:grid!important;grid-template-columns:104px 1fr;grid-auto-rows:auto;column-gap:12px;row-gap:6px;padding:10px!important;align-items:start}
  html:not(#sx):not(#sx) .acc2-prod > .acc2-media{grid-column:1;grid-row:1 / span 4;aspect-ratio:1/1;width:104px;border-radius:12px}
  html:not(#sx):not(#sx) .acc2-prod > :not(.acc2-media){grid-column:2;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important}
  html:not(#sx):not(#sx) .acc2-prod > .acc2-infobox,html:not(#sx):not(#sx) .acc2-prod > .acc2-links,html:not(#sx):not(#sx) .acc2-prod > .acc2-buy{grid-column:1 / -1}
  html:not(#sx):not(#sx) .acc2-prod h3{font-size:14px!important;min-height:0!important}
  html:not(#sx):not(#sx) .acc2-prod .acc2-price{font-size:20px!important;white-space:nowrap}
  html:not(#sx):not(#sx) .acc2-prod .acc2-pricenote{margin-top:-4px}
  html:not(#sx):not(#sx) .acc2-prod .acc2-links,html:not(#sx):not(#sx) .acc2-prod .acc2-buy{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  html:not(#sx):not(#sx) .acc2-prod .acc2-amz,html:not(#sx):not(#sx) .acc2-prod .acc2-alt,html:not(#sx):not(#sx) .acc2-prod .acc2-ali{margin:0!important;height:42px!important;min-height:42px;font-size:13px!important;padding:0 8px!important;justify-content:center;white-space:nowrap}
  html:not(#sx):not(#sx) .acc2-panel{border-radius:22px 22px 0 0!important}
  html:not(#sx):not(#sx) .acc2-models{grid-template-columns:1fr 1fr!important;gap:8px!important}
}

/* Allgemein sauberer */
html:not(#sx):not(#sx) ::selection{background:rgba(41,151,255,.35);color:#fff}
html:not(#sx):not(#sx) :focus-visible{outline:2px solid #2997ff!important;outline-offset:2px}
@media (max-width:760px){html:not(#sx):not(#sx) body{padding-bottom:84px}}

/* Finder clean */
html:not(#sx):not(#sx) .acc2-prod .acc2-media{aspect-ratio:4/3!important;border-radius:14px!important}
html:not(#sx):not(#sx) .acc2-prod .acc2-media img{padding:16px!important}
html:not(#sx):not(#sx) .acc2-prod h3{font-weight:600!important;letter-spacing:-.01em}
html:not(#sx):not(#sx) .acc2-pricenote{opacity:.7}
html:not(#sx):not(#sx) .acc2-cat{font-weight:500!important}
html:not(#sx):not(#sx) .acc2-grid{gap:14px!important}
@media (min-width:641px){html:not(#sx):not(#sx) .acc2-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}}
html:not(#sx):not(#sx) #sx-modules .m-sp i{font-style:normal;color:#6e6e73}

/* ---- Fix 2026-10-26: Hero-Scooter, Footer, Bedienhilfe-Button ---- */
@media (max-width:1023px){
  html:not(#sx):not(#sx) .hero-visual{display:grid!important;place-items:center!important;width:100%!important;min-height:0!important;max-height:none!important;margin:28px auto 0!important}
  html:not(#sx):not(#sx) .hero-blob{width:min(100%,420px)!important;max-width:420px!important;height:auto!important;aspect-ratio:1.08/1!important;margin:0 auto!important}
  html:not(#sx):not(#sx) .hero-section{padding-bottom:40px!important}
  html:not(#sx):not(#sx) footer{padding-bottom:calc(130px + env(safe-area-inset-bottom))!important}
}
html:not(#sx):not(#sx) .sx-flinks{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px!important;margin-top:16px}
html:not(#sx):not(#sx) .sx-flinks a{display:inline-flex!important;align-items:center;height:34px;padding:0 14px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;color:#a1a1a6!important;font-size:13px!important;line-height:1!important;text-decoration:none!important;outline:0;box-shadow:none!important}
html:not(#sx):not(#sx) .sx-flinks a:hover{color:#f5f5f7!important;background:rgba(255,255,255,.08)!important}
.admin-banner{display:none!important}
@media (max-width:640px){
  html.sx-home .sxa11y-btn{top:calc(18px + env(safe-area-inset-top))!important;bottom:auto!important;left:auto!important;right:16px!important;width:40px!important;height:40px!important;box-shadow:none!important}
  html.sx-home .sxa11y-btn svg{width:21px;height:21px}
  html.sx-home .sxa11y{top:calc(68px + env(safe-area-inset-top))!important;bottom:auto!important;left:auto!important;right:12px!important;max-height:calc(100vh - 200px)!important}
}

@media (max-width:1023px){html:not(#sx):not(#sx) .hero-visual{display:block!important}html:not(#sx):not(#sx):not(#sx) .hero-blob{display:block!important;min-width:min(calc(100vw - 40px),420px)!important;margin:0 auto!important}}

/* a11y desktop rechts */
@media (min-width:641px){html .sxa11y-btn{left:auto!important;right:16px!important}html .sxa11y{left:auto!important;right:16px!important}}