/* Release 188 · Layout-Schutz für iPhone, Android, Tablet, Desktop und installierte App.
   Wird als letztes Stylesheet geladen und korrigiert nur Überlappungen; Farben und Design bleiben unverändert. */

/* Kein seitliches Verrutschen und lange Wörter (E-Mails, Motorcodes, Links) brechen statt überzustehen. */
html,body{max-width:100%;overflow-x:clip}
:where(h1,h2,h3,h4,h5,p,li,dd,dt,td,th,label,small,figcaption,blockquote){overflow-wrap:break-word}
:where(input,select,textarea,button){max-width:100%}

/* Untere App-Navigation (Werkstatt, Tuner, Admin): deckend, damit Inhalte nicht durchscheinen. */
/* :is(…,#sc-layout-guard) hebt die Priorität über ältere Design-Ebenen, ohne weitere Elemente zu treffen. */
html body :is(nav.sc-clear-nav,#sc-layout-guard){background:#0c161e!important;isolation:isolate}
html body :is(.mnav:not(.sc-clear-nav),#sc-layout-guard){background:#06090b!important;isolation:isolate}
html body #bottomNav{isolation:isolate}

/* Fehlerseite Werkstatt/Tuner: „Erneut laden“ und „Zur Bereichsauswahl“ mit Abstand untereinander. */
html body .loginbox:has(#workshopRetry,#tunerRetry){display:flex;flex-direction:column;align-items:stretch;gap:12px}
html body .loginbox:has(#workshopRetry,#tunerRetry)>:is(button,a.btn){margin:0!important;width:100%;box-sizing:border-box;text-align:center;justify-content:center}

/* Werkstatt-Konfigurator: Getriebe-Schaltfläche berührt die nächste Karte nicht. */
html body [data-gearbox-request]{margin-bottom:14px!important}

/* Schwebende Hilfe-Schaltflächen (KI-Assistent, WhatsApp) auf öffentlichen Seiten. */
@media(max-width:1024px){
 html body .scx-fab a span,html body .scx-fab button span{display:none!important}
 html body .scx-fab a,html body .scx-fab button{width:50px;min-width:50px!important;height:50px;min-height:50px!important;padding:0!important;justify-content:center}
 html body .scx-fab .wa{width:52px;min-width:52px!important;height:52px;min-height:52px!important}
}
@media(max-width:560px){
 html body .scx-fab{gap:8px;right:max(10px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 html body .scx-fab a,html body .scx-fab button{width:46px;min-width:46px!important;height:46px;min-height:46px!important}
 html body .scx-fab .wa{width:48px;min-width:48px!important;height:48px;min-height:48px!important}
 html body .scx-fab svg{width:21px!important;height:21px!important}
}
/* Am Seitenende Platz lassen, damit die letzten Inhalte über die Schaltflächen gescrollt werden können. */
html body:has(>.scx-fab:not([hidden])){padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))!important}
@media(min-width:1025px){html body:has(>.scx-fab:not([hidden])){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}}
/* Beim Tippen auf Touch-Geräten ausblenden, damit Eingabefelder und Tastatur frei bleiben. */
@media(hover:none){
 html body:has(:is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus) .scx-fab{opacity:0;visibility:hidden;transition:opacity .15s}
}

/* Installationsseite: Kopfzeile unter der Aussparung, Hinweise mit Abstand. */
html body.sc-install-page>header{padding-top:max(12px,calc(env(safe-area-inset-top,0px) + 6px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
html body.sc-install-page>header select{max-width:min(170px,45vw)}
html body.sc-install-page .sc-install-fine+.sc-install-fine{margin-top:10px}
html body.sc-install-page>footer{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
html body.sc-install-page>footer a{color:#d9a477}

/* Header controls occupy real grid cells, including dynamically added controls. */
@media(max-width:760px){
 html:root body #publicLanding#publicLanding .sc-v126-header{
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;gap:10px!important;height:auto!important;
 }
 html:root body #publicLanding#publicLanding .sc-v126-header #adminRevealTarget.sc-v126-brand{
  grid-area:1 / 1!important;width:min(128px,100%)!important;min-width:0!important;justify-self:start!important;
 }
 html:root body #publicLanding#publicLanding .sc-v126-header .sc-v126-actions{display:contents!important}
 html:root body #publicLanding#publicLanding .sc-v126-header .sc-language-control{
  grid-area:1 / 2!important;position:static!important;justify-self:stretch!important;
  width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;
 }
 html:root body #publicLanding#publicLanding .sc-v126-header .sc-language-select{
  width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
 }
 html:root body #publicLanding#publicLanding #landingLoginBtn{grid-area:2 / 1!important}
 html:root body #publicLanding#publicLanding #landingRegisterBtn{grid-area:2 / 2!important}
 html:root body #publicLanding#publicLanding .sc-v126-actions>a{grid-area:3 / 1 / auto / -1!important}
 html:root body #appView>.topbar{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;height:auto!important}
 html:root body #appView>.topbar .top-logo{max-width:100%!important;justify-self:end}
 html:root body #appView>.topbar .top-actions{grid-column:1 / -1;display:flex!important;flex-wrap:wrap!important;gap:8px!important}
}
/* The cockpit shortcut needs its own row beside the logo; icon-sized cells clipped its label. */
@media(max-width:899px){
 html:root body #communityRoot .c59 header.c59-header:not(#scx){
  display:grid!important;grid-template-columns:44px 44px 44px minmax(0,1fr)!important;
  gap:10px!important;height:auto!important;
 }
 html:root body #communityRoot .c59 header.c59-header:not(#scx)>.c59-brand{grid-area:1 / 1 / auto / 3!important}
 html:root body #communityRoot .c59 header.c59-header:not(#scx)>.c59-member{display:none!important}
 html:root body #communityRoot .c59 header.c59-header:not(#scx)>.c59-head-actions{display:contents!important}
 html:root body #communityRoot .c59 header.c59-header:not(#scx)>.c59-head-actions>.vh-launch{
  grid-area:1 / 3 / auto / -1!important;justify-self:end!important;width:auto!important;max-width:100%!important;
  min-width:0!important;height:auto!important;min-height:44px!important;padding:8px 12px!important;
  white-space:normal!important;overflow-wrap:break-word!important;
 }
 html:root body #communityRoot .c59 header.c59-header:not(#scx)>.c59-head-actions>.sc-language-control{
  grid-area:2 / 4!important;display:flex!important;position:static!important;
  width:100%!important;min-width:0!important;max-width:100%!important;justify-content:flex-end!important;
 }
 html:root body #communityRoot .c59 header.c59-header:not(#scx)>.c59-head-actions>.sc-language-control>select{
  width:100%!important;max-width:100%!important;height:44px!important;min-height:44px!important;font-size:16px!important;
 }
 html:root body #communityRoot .c59 header.c59-header:not(#scx)>.c59-head-actions>:is(.c59-bell,.c59-avatar,.c59-logout){
  grid-row:2!important;min-width:44px!important;min-height:44px!important;justify-self:start!important;
 }
}

/* Reserve dock clearance once, on the main container, instead of stacking 120px and 100px. */
html:root body #communityRoot .c59-main>.c74-tuning{padding-bottom:16px!important}
html:root body #communityRoot .c59-main{
 padding-bottom:calc(var(--dock-h,76px) + 28px + var(--sc-safe-bottom,0px))!important;
}