/* Shared responsive layout, Sachs Motorsport v30 */
[hidden]{display:none!important}
html{overflow-x:clip!important;scroll-padding-top:88px}
body{overflow-x:clip!important;overflow-y:visible;line-height:1.55}
body.mobile-menu-open{overflow:hidden!important}
header{position:sticky!important;top:0;z-index:1800!important;background:rgba(10,10,10,.97)!important}
header nav{height:72px;min-height:72px;flex-wrap:nowrap!important;gap:20px}
header .brand{min-width:0;flex:0 1 270px}
header .brand-link{width:100%;min-width:0}
header .brand-logo{width:100%;max-width:270px;height:auto;max-height:48px;object-fit:contain}
header .links{gap:16px;flex-wrap:nowrap!important;white-space:nowrap;font-size:14px}
#mobileMenu[hidden]{display:none!important}
.mobile-contact-bar{display:none}
.fab-contact,.fab-whatsapp{display:none!important}
button,a,input,select,textarea{touch-action:manipulation}
button{font:inherit;cursor:pointer}
.btn{white-space:normal;text-align:center;min-height:46px;border:1px solid transparent;line-height:1.4}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #e79bae!important;outline-offset:4px}
.config-check input:focus-visible+label{outline:3px solid #e79bae;outline-offset:3px}
input:not([type=checkbox]):not([type=hidden]),select,textarea{font-size:16px!important}
[id]{scroll-margin-top:88px}
.muted{color:#b4bac2}
.hero{min-height:650px;min-height:min(780px,calc(100svh - 72px))}
.hero::before{background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.40)),url('/images/hero-v31.webp') center/cover no-repeat}
.hero>.wrap{width:100%;padding:64px 20px}
.hero h1{max-width:900px;line-height:1.12;text-wrap:balance}
.hero p.muted{color:#e1e3e7;max-width:680px!important}
.hero .pill{margin-right:0}
.gallery-more{margin-top:22px}
.gallery-more>summary{display:list-item;list-style-position:inside;width:fit-content;padding:12px 20px;border:1px solid #ffffff35;border-radius:24px;cursor:pointer;font-weight:700}
.gallery-more[open]>summary{margin-bottom:20px}
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#leistungen .grid-3{grid-template-columns:repeat(4,minmax(0,1fr))}
.local-area .card>div{min-width:0!important}
#kontakt>.wrap>.contact>.grid-2{grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr)}
#kontakt .contact-config{width:100%;margin:0}
.manual-vehicle{margin:12px 0}
.manual-vehicle summary{cursor:pointer;font-weight:700;padding:10px 0;color:#e6b1bf}
.manual-vehicle input{margin-top:8px}
.config-shell{max-width:1200px}
.config-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.config-grid{grid-column:1;grid-row:1}
.config-field,.config-summary,.config-panel>*{min-width:0}
.config-extras{grid-column:1;grid-row:3}
.config-status{grid-column:1;grid-row:2;margin:0}
.config-summary{grid-column:2;grid-row:1/5;margin:0;position:sticky;top:92px}
.config-summary h2{margin-top:0!important}
.config-result{gap:8px}
.metric{padding:14px 10px}
.metric strong{font-size:clamp(19px,2vw,25px)}
.config-note{grid-column:1;grid-row:4}
.config-contact-step{padding:14px}
.config-contact-grid{grid-template-columns:1fr}
.config-result,.config-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.config-options{grid-template-columns:1fr}
@media(max-width:1100px){
 header .links{display:none!important;visibility:hidden!important}
 header nav #menuToggle{display:flex!important;flex:0 0 46px;width:46px;height:46px;padding:10px!important;align-items:center;justify-content:center}
 header #mobileMenu.mobile-menu{position:fixed!important;top:72px!important;left:12px!important;right:12px!important;display:flex!important;flex-direction:column;gap:6px!important;padding:12px!important;background:#101013!important;border:1px solid #ffffff25;border-radius:16px;max-height:calc(100dvh - 92px);overflow-y:auto;z-index:1801!important}
 header #mobileMenu[hidden]{display:none!important}
 header #mobileMenu a{padding:12px!important;margin:0!important;min-height:46px}
 #leistungen .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1101px){header nav #menuToggle,header #mobileMenu{display:none!important}header .links{display:flex!important;visibility:visible!important;opacity:1!important;height:auto!important}}
@media(max-width:800px){
 section{padding:44px 0}
 .wrap{padding-left:20px;padding-right:20px}
 h2{font-size:clamp(27px,5vw,34px);line-height:1.2}
 .hero{min-height:0}
 .hero>.wrap{padding:44px 20px 50px}
 .hero::before{background:linear-gradient(180deg,rgba(0,0,0,.63),rgba(0,0,0,.9)),url('/images/hero-v31.webp') 62% center/cover no-repeat}
 .hero .inline:last-child{display:grid;grid-template-columns:1fr;max-width:400px}
 .card{padding:20px}
 .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #kontakt>.wrap>.contact>.grid-2{grid-template-columns:1fr;gap:28px}
 #kontakt .contact{padding:18px}
 #kontakt .contact-config{padding:14px}
 #kontakt .contact-config-grid{grid-template-columns:1fr}
 #kontakt .contact-wide{grid-column:auto}
 .config-panel{display:flex;flex-direction:column;padding:16px;gap:18px}
 .config-panel>*{width:100%}
 .config-grid{order:0;grid-template-columns:1fr}
 .config-status{order:1}
 .config-summary{order:2;position:static}
 .config-extras{order:3}
 .config-note{order:4}
 .config-result{grid-template-columns:repeat(3,minmax(0,1fr))}
 .config-shell{padding:0 16px 28px}
 .config-actions{display:grid;grid-template-columns:1fr}
 .config-actions .btn{width:100%}
 body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .mobile-contact-bar{display:flex;position:fixed;bottom:0;left:0;right:0;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#101013;border-top:1px solid #ffffff25;z-index:1700}
 .mobile-contact-bar a{flex:1}
 body.mobile-menu-open .mobile-contact-bar{visibility:hidden}
}
@media(max-width:400px){header nav{gap:12px}header .brand{flex-basis:230px}#leistungen .grid-3{grid-template-columns:1fr}.metric{padding:12px 7px}.metric strong{font-size:19px}.config-price-breakdown div{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{transition:none!important;animation:none!important}}

/* V31: clearer separation of the enquiry form. */
#kontakt{background:linear-gradient(135deg,#201218,#101114 70%)!important}
#kontakt .contact{background:transparent;border:0;box-shadow:none;padding:0}
#kontakt .contact-config,.config-contact-step{background:#202126;border:1px solid #55515a;border-top:3px solid #b94866;border-radius:20px;box-shadow:0 18px 50px #0003;padding:28px}
#kontakt .contact-config-head h3{font-size:28px;line-height:1.2}
#kontakt .contact-config-head p{color:#ced0d8;line-height:1.6;max-width:44ch}
#kontakt .contact-mini-title{border-top:1px solid #ffffff20;padding-top:18px;margin:6px 0 0;font-size:16px;color:#f6dce3}
#kontakt .contact-field>span,.config-contact-field label{font-size:14px;color:#f3f4f7}
#kontakt .contact-field input,#kontakt .contact-field select,#kontakt .contact-field textarea,.config-contact-field input{background:#303137;border-color:#686a74;color:#fff;min-height:50px}
#kontakt input::placeholder,#kontakt textarea::placeholder,.config-contact-field input::placeholder{color:#bfc1cb;opacity:1}
#kontakt .contact-field input:focus,#kontakt .contact-field select:focus,#kontakt .contact-field textarea:focus{border-color:#e79bae;box-shadow:0 0 0 3px #e79bae25}
#kontakt .contact-wish{background:#292a30;border-color:#55565f;min-height:50px}
#kontakt .contact-wish:has(input:checked){background:#492734;border-color:#e79bae}
#kontakt .contact-wish small,#kontakt .contact-field small{color:#c3c5ce}
#kontakt .contact-wish input{accent-color:#be5271}
#kontakt .contact-config-actions{border-top:1px solid #ffffff20;padding-top:20px;gap:12px}
#kontakt .contact-config-actions .btn{width:100%;background:#96304c;min-height:50px}
#kontakt .contact-config-actions span{color:#c9cbd2;font-size:13px;line-height:1.5}
.form-reassurance{font-size:13px;color:#c9cbd2;margin:0}
.form-reassurance a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){#kontakt .contact-config,.config-contact-step{padding:20px 16px}#kontakt .contact-config-head h3{font-size:25px}#kontakt>.wrap>.contact>.grid-2{gap:24px}}

/* V32: original business-card logo, kept at its native aspect ratio. */
.opening-hours{margin:24px 0;max-width:460px}
.opening-hours h4{margin:0 0 10px;font-size:18px}
.opening-hours dl{margin:0}
.opening-hours dl>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:7px 0;border-bottom:1px solid #ffffff18}
.opening-hours dt{color:#c9cbd2}
.opening-hours dd{margin:0;color:#fff}
.appointment-note{padding:14px 16px;border-left:3px solid #c76783;background:#2d1a22;border-radius:0 10px 10px 0;color:#efdee3;font-size:14px;line-height:1.6}
header .brand{flex:0 1 185px}
header .brand-link{width:auto}
header .brand-logo{width:auto;height:60px;max-height:60px;max-width:185px;object-fit:contain}
@media(max-width:600px){header .brand{flex:0 1 170px}header .brand-logo{height:56px;max-height:56px;max-width:170px}}


/* v57: Mobile-Menü bleibt immer direkt unter dem sichtbaren Sticky-Header. */
@media(max-width:1100px){
 body>#mobileMenu.mobile-menu{
  position:fixed!important;
  top:var(--mobile-menu-top,72px)!important;
  left:12px!important;right:12px!important;
  display:flex!important;flex-direction:column!important;gap:6px!important;
  padding:12px!important;background:#101013!important;
  border:1px solid #ffffff25!important;border-radius:16px!important;
  max-height:calc(100dvh - var(--mobile-menu-top,72px) - 12px)!important;
  overflow-y:auto!important;z-index:5000!important;
  box-shadow:0 18px 55px rgba(0,0,0,.55)!important;
 }
 body>#mobileMenu[hidden]{display:none!important}
 body>#mobileMenu a{padding:12px!important;margin:0!important;min-height:46px}
}
@media(min-width:1101px){body>#mobileMenu{display:none!important}}