/* Shared responsive surfaces. Content, images and their source order are retained. */
:root{--layout-frame:1440px;--layout-gutter:clamp(16px,4vw,96px)}
html{scroll-padding-top:155px}
body{min-width:0}
#main{width:100%;max-width:none;margin-inline:0;min-width:0}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero){width:100%!important;max-width:none!important;margin-inline:0!important;box-sizing:border-box;padding-inline:var(--layout-gutter)!important}
#main>.page-hero>.hero-copy,.home .home-entry-background>.home-entry-content{width:100%!important;max-width:var(--layout-frame)!important;min-width:0!important;margin-inline:auto!important;box-sizing:border-box}
/* Images remain behind the copy. Contain preserves all four edges at every ratio. */
#main>.page-hero:has(>.hero-image){position:relative!important;isolation:isolate;display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;min-height:clamp(540px,46vw,820px)!important;overflow:hidden!important;background:#000!important}
#main>.page-hero:has(>.hero-image)>.hero-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;z-index:0!important;transform:none!important;filter:none!important;opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important;pointer-events:none;border:0!important}
#main>.page-hero:has(>.hero-image)>.hero-copy{position:relative!important;z-index:2!important;background:transparent!important;text-shadow:0 2px 14px #000}
#main>.page-hero:has(>.hero-image)::after{content:"";display:block!important;position:absolute;inset:0;z-index:1!important;pointer-events:none;background:linear-gradient(180deg,#0004,#0009 55%,#000a)!important}
.home .home-entry-background>.home-entry-backdrop{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;pointer-events:none}
.home .home-entry-background .home-entry-backdrop>img.home-hero-owner-image{width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;transform:none!important}
/* The CTA surface spans the viewport; its content uses the same frame as the hero. */
#main>:is(.final-invitation,.service-closing,.system-closing){width:100%!important;max-width:none!important;margin-inline:0!important;padding:clamp(44px,6vw,88px) var(--layout-gutter)!important;box-sizing:border-box;text-align:center}
#main>:is(.final-invitation,.service-closing,.system-closing)>:is(.container,.system-shell,.service-closing-inner){width:100%!important;max-width:var(--layout-frame)!important;margin-inline:auto!important;box-sizing:border-box}
#main .service-closing-inner{display:flex!important;flex-direction:column!important;align-items:center!important;gap:28px!important;text-align:center}
#main .service-closing-inner>div{width:100%!important;max-width:none!important;min-width:0}
#main .service-closing-action{display:flex!important;flex-direction:column!important;align-items:center!important;gap:18px!important;padding:0!important;border:0!important}
#main :is(.final-invitation,.service-closing,.system-closing) h2{max-width:none!important;margin-inline:auto!important}
#main :is(.final-invitation,.service-closing,.system-closing) p{max-width:85ch!important;margin-inline:auto!important}
#main :is(.actions,.home-entry-actions){flex-wrap:wrap;max-width:100%;box-sizing:border-box}
#main :is(.page-hero,.home-entry) :is(h1,h2,p){max-width:100%;overflow-wrap:break-word;white-space:normal}
#main :is(.button,.text-link),.site-footer a{max-width:100%;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
#main :is(.button,.text-link){min-width:0;text-align:center}
#main .button{height:auto;min-height:48px}
#main :is(.content-grid,.form-grid,.summary-group,.system-section-body,.system-panel,.hardware-card,.request-panel,.request-layout,.legal-layout,.article-reading-copy){min-width:0}
#main :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
#main img{max-width:100%}
#main :is(p,li,dd,h1,h2,h3){overflow-wrap:break-word}
#main .service-detail>summary{white-space:normal;overflow-wrap:break-word;min-height:48px}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:700px){
 html{scroll-padding-top:150px}
 #main>.page-hero:has(>.hero-image){padding-block:48px!important;min-height:540px!important}
 #main :is(.page-hero,.home-entry) h1{font-size:clamp(30px,8vw,48px)!important;line-height:1.15!important}
 #main :is(.page-hero,.home-entry) :is(.actions,.home-entry-actions){display:flex;flex-direction:column;align-items:center;gap:16px}
 #main :is(.page-hero,.home-entry) :is(.actions,.home-entry-actions)>.button{max-width:100%;gap:18px}
 #main :is(.final-invitation,.service-closing,.system-closing) h2{font-size:clamp(28px,7.5vw,42px)!important;line-height:1.2}
 #main :is(.content-grid,.form-grid){max-width:100%}
 .site-footer :is(p,a,dd){overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.removed-hero-identity{display:none!important}
/* Price rows must shrink below a 320px viewport without clipping amounts. */
#main .price-tiers,#main .price-tiers>article{min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:600px){#main .price-tiers>article{grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 16px}#main .tier-price{font-size:clamp(30px,9vw,45px);white-space:normal;min-width:0}#main .tier-label{overflow-wrap:anywhere}}

.timeframe-notice{border-left:3px solid var(--red,#c92120);padding:18px 20px;margin-top:22px;background:#ffffff08;overflow-wrap:break-word}.timeframe-notice p{margin:0;line-height:1.8;color:#eee}#form-next:disabled,#send-request:disabled,#request-whatsapp:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}#form-next:disabled:hover{transform:none}
#main :is(.page-hero,.home-entry) h1{hyphens:none!important;word-break:normal!important;overflow-wrap:break-word!important}
/* One type scale and full available copy width for every hero and closing. */
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero){text-align:center!important}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) :is(.hero-copy,.home-entry-content,.home-entry-heading,.home-entry-copy){width:100%!important;max-width:none!important;margin-inline:auto!important;min-width:0;box-sizing:border-box}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) h1{width:100%!important;max-width:none!important;font:800 clamp(30px,4.5vw,68px)/1.15 Manrope,Arial,sans-serif!important;letter-spacing:-.035em!important;margin:0 auto 24px!important;text-align:center!important}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) :is(.hero-subtitle,.home-entry-subtitle){width:100%!important;max-width:none!important;font:600 clamp(18px,1.7vw,23px)/1.6 Manrope,Arial,sans-serif!important;letter-spacing:0!important;text-align:center!important;margin:18px auto!important}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) p:not(.eyebrow):not(.service-title):not(.hero-subtitle):not(.home-entry-subtitle):not(.article-byline){width:100%!important;max-width:none!important;font-size:clamp(14px,1.15vw,16px)!important;line-height:1.85!important;text-align:center!important;margin:18px auto!important}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) :is(.actions,.home-entry-actions){display:flex!important;justify-content:center!important;align-items:center!important;gap:16px!important;margin:28px auto!important}
#main>:is(.final-invitation,.service-closing,.system-closing){display:block!important;text-align:center!important}
#main>:is(.final-invitation,.service-closing,.system-closing) :is(.container,.system-shell,.service-closing-inner,.system-section-heading,.system-section-body,.system-panel){width:100%!important;max-width:none!important;min-width:0;box-sizing:border-box;margin-inline:auto!important;text-align:center!important}
#main>:is(.final-invitation,.service-closing,.system-closing) .system-section-inner{display:flex!important;flex-direction:column!important;align-items:center!important;gap:24px!important}
#main>:is(.final-invitation,.service-closing,.system-closing) h2{width:100%!important;max-width:none!important;font:800 clamp(28px,3.6vw,54px)/1.2 Manrope,Arial,sans-serif!important;letter-spacing:-.035em!important;margin:0 auto 24px!important;text-align:center!important}
#main>:is(.final-invitation,.service-closing,.system-closing) p{width:100%!important;max-width:none!important;font-size:clamp(14px,1.15vw,16px)!important;line-height:1.85!important;margin:18px auto!important;text-align:center!important}
#main>:is(.final-invitation,.service-closing,.system-closing) .eyebrow{font-size:10px!important;letter-spacing:1.7px!important}
#main>:is(.final-invitation,.service-closing,.system-closing) .actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:16px!important;margin:24px auto 0!important}
/* Full-width sections do not imply stretched buttons. */
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero,.final-invitation,.service-closing,.system-closing) .button{display:inline-flex!important;flex:0 1 auto!important;align-self:center!important;align-items:center!important;justify-content:center!important;width:fit-content!important;max-width:100%!important;min-width:0!important;min-height:52px!important;height:auto!important;padding:14px 24px!important;gap:18px!important;font:600 14px/1.5 Manrope,Arial,sans-serif!important;letter-spacing:.2px!important;white-space:normal!important;text-align:center!important;margin:0!important;box-sizing:border-box}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero,.final-invitation,.service-closing,.system-closing) .button span{font-size:18px!important}
@media(max-width:700px){#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) h1{font-size:clamp(30px,8vw,48px)!important}#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) :is(.actions,.home-entry-actions){flex-direction:column!important}#main>:is(.final-invitation,.service-closing,.system-closing) .actions{flex-direction:column!important}}
/* A shared content frame aligns hero, body, closing, header and footer edges. */
:root{--layout-frame:1320px;--content-frame:min(1320px,88%)}
#main .container,#main .system-shell{width:var(--content-frame)!important;max-width:1320px!important;margin-inline:auto!important;box-sizing:border-box}
#main .container .container,#main .container .system-shell,#main .system-shell .container,#main .system-shell .system-shell{width:100%!important;max-width:none!important}
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero,.final-invitation,.service-closing,.system-closing){width:100%!important;max-width:none!important;padding-inline:0!important;margin-inline:0!important}
#main>.page-hero>.hero-copy,#main>.home-entry>.home-entry-content{width:var(--content-frame)!important;max-width:1320px!important;margin-inline:auto!important;box-sizing:border-box}
#main>.knowledge-hero>div,#main>.knowledge-hero>nav,#main>.text-hero>:is(h1,p,.actions){width:var(--content-frame)!important;max-width:1320px!important;margin-inline:auto!important;box-sizing:border-box}
#main>.service-closing>.system-shell.service-closing-inner,#main>.service-closing>.system-shell.system-section-inner,#main>.system-closing>:is(div,header),#main>.final-invitation>:is(h2,p,.actions){width:var(--content-frame)!important;max-width:1320px!important;margin-inline:auto!important;box-sizing:border-box}
#main>.service-closing .service-closing-inner>div,#main>.service-closing .system-section-inner>.system-section-heading,#main>.service-closing .system-section-inner>.system-section-body{width:100%!important;max-width:none!important}
.site-header .masthead,.site-header.scrolled .masthead{width:var(--content-frame)!important;max-width:1320px!important}
.site-footer.revised-footer{padding-inline:0!important}
.site-footer.revised-footer .footer-inner{width:var(--content-frame)!important;max-width:1320px!important;margin-inline:auto!important}
#main>.system-closing>:is(h2,p,.actions){width:var(--content-frame)!important;max-width:1320px!important;margin-inline:auto!important}
#main>.final-invitation>.button,#main>.system-closing>.button{max-width:var(--content-frame)!important}
/* Metadata uses the same text frame; line wrapping is determined by available space. */
#main>:is(.page-hero,.home-entry,.knowledge-hero,.text-hero) .article-byline{width:100%!important;max-width:none!important;margin-inline:auto!important;text-align:center!important}
#main>.text-hero.container>p:not(.eyebrow):not(.service-title):not(.hero-subtitle):not(.home-entry-subtitle):not(.article-byline){width:var(--content-frame)!important;max-width:1320px!important;margin-inline:auto!important}

/* Direct inquiry action immediately after the three chiptuning price tiers. */
.chiptuning-page #preise .chip-price-action{display:flex;justify-content:center;align-items:center;margin:32px 0 0;max-width:100%}
.chiptuning-page #preise .chip-price-action>.button{display:inline-flex;justify-content:center;align-items:center;gap:20px;width:100%;max-width:100%;min-width:0;min-height:56px;padding:16px 28px;font-size:14px;line-height:1.5;text-align:center;white-space:normal;box-sizing:border-box}
@media(max-width:600px){.chiptuning-page #preise .chip-price-action{margin-top:24px}.chiptuning-page #preise .chip-price-action>.button{padding:14px 20px;gap:16px}}
/* Closing copy follows the hero type scale and naturally wraps in the shared frame. */
#main>:is(.final-invitation,.service-closing,.system-closing) h2{font:800 clamp(30px,4.5vw,68px)/1.15 Manrope,Arial,sans-serif!important;letter-spacing:-.035em!important;hyphens:none!important;word-break:normal!important;overflow-wrap:break-word!important}
@media(max-width:700px){#main>:is(.final-invitation,.service-closing,.system-closing) h2{font-size:clamp(30px,8vw,48px)!important}}
