:root{--bg:#080808;--g1:#0f0f0f;--g2:#151515;--line:rgba(255,255,255,.09);--t:#f5f5f5;--m:#a0a0a0;--d:#666;--steel:#b9c2cc;--e:cubic-bezier(.22,1,.36,1);--pad:clamp(20px,3vw,32px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:hidden}
body{background:var(--bg);color:var(--t);font:400 16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}ul{list-style:none}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:4px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(72px,11vw,150px) 0;position:relative}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase}
h2{font-size:clamp(30px,5.2vw,68px);max-width:16ch}
.sub{color:var(--m);max-width:52ch;margin-top:20px;font-size:clamp(15px,1.4vw,18px)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;border-radius:999px;font:600 12.5px/1 Inter,sans-serif;letter-spacing:.16em;border:1px solid var(--t);background:var(--t);color:#000;cursor:pointer;transition:transform .4s var(--e),background .4s,color .4s,border-color .4s}
.btn:hover{transform:scale(1.02);background:#fff}
.btn.ghost{background:transparent;color:var(--t);border-color:rgba(255,255,255,.28)}
.btn.ghost:hover{background:var(--t);color:#000}
/* header */
header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top);transition:background .5s,backdrop-filter .5s,border-color .5s;border-bottom:1px solid transparent}
header.s{background:rgba(8,8,8,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-weight:800;letter-spacing:.32em;font-size:19px}
.logo small{font-size:9.5px;letter-spacing:.34em;color:var(--m);margin-top:6px}
nav ul{display:flex;gap:38px}
nav a{font-size:12px;letter-spacing:.2em;font-weight:500;color:var(--m);transition:color .3s}
nav a:hover{color:#fff}
.hd .btn{min-height:42px;padding:0 22px;font-size:11.5px}
.burger{display:none;width:46px;height:46px;background:none;border:1px solid var(--line);border-radius:50%;color:#fff;cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:#fff;transition:transform .5s var(--e),top .5s var(--e),opacity .3s}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:26px}
.burger[aria-expanded=true] i:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){top:22px;transform:rotate(-45deg)}
.mm{position:fixed;inset:0;z-index:40;background:rgba(8,8,8,.86);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility .5s}
.mm.o{opacity:1;visibility:visible}
.mm a{display:block;font-size:clamp(30px,9vw,48px);font-weight:800;letter-spacing:-.01em;padding:10px 0;transform:translateY(20px);opacity:0;transition:transform .7s var(--e),opacity .7s}
.mm.o a{transform:none;opacity:1}
.mm.o a:nth-child(2){transition-delay:.05s}.mm.o a:nth-child(3){transition-delay:.1s}.mm.o a:nth-child(4){transition-delay:.15s}.mm.o a:nth-child(5){transition-delay:.2s}.mm.o a:nth-child(6){transition-delay:.25s}
/* hero */
.hero{height:300vh;position:relative}
.hi{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:110px 0 120px;overflow:hidden;background:#000}
.hero .art{position:absolute;right:-8%;top:50%;width:min(880px,95vw);aspect-ratio:1;translate:0 -50%;opacity:0;animation:fade 2.4s .1s var(--e) forwards}
.hero .art svg{width:100%;height:100%;display:block}
.hi::after{display:none}
.hero .wrap{position:relative;z-index:2;margin:-4vh 0 0;max-width:none;width:100%;text-align:left}
.hero h1{font-size:clamp(30px,8.4vw,128px);max-width:none;margin:0 0 30px}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;transform:translateY(110%);animation:up 1.1s var(--e) forwards}
.ln:nth-child(1)>span{animation-delay:.45s}.ln:nth-child(2)>span{animation-delay:.58s}.ln:nth-child(3)>span{animation-delay:.71s}
.metal{color:#fff}
.hero p.lead{max-width:56ch;color:#c4c4c4;font-size:clamp(15px,1.5vw,19px)}
.hero .logo{margin-bottom:56px}
.a{opacity:0;transform:translateY(24px);animation:up2 1.1s var(--e) forwards}
.d1{animation-delay:.2s}.d2{animation-delay:.35s}.d3{animation-delay:.9s}

.loc{font-size:11.5px;letter-spacing:.26em;color:var(--d)}
.scroll{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10px;letter-spacing:.34em;color:var(--m)}
.scroll i{width:1px;height:46px;background:var(--m);transform-origin:top;animation:ln 2.2s var(--e) infinite}
@keyframes fade{to{opacity:.95}}@keyframes up{to{transform:none}}@keyframes up2{to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes ln{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
/* trust */

/* services */
.cards{display:grid;grid-template-columns:1fr;gap:24px;margin-top:64px;align-items:stretch}
.card{background:#1c1c1e;border:0;border-radius:28px;padding:36px 32px;display:flex;flex-direction:column;position:relative;transition:background .5s var(--e),border-color .5s,transform .6s var(--e)}
.card:hover{background:#232325}

.card .n{font-size:13px;color:var(--d);letter-spacing:.2em}
.card h3{font-size:clamp(24px,2.4vw,32px);margin:22px 0 14px}
.card p{color:var(--m);font-size:15px}
.card ul{margin:26px 0 34px;border-top:1px solid var(--line)}
.card li{padding:11px 0 11px 22px;border-bottom:1px solid var(--line);font-size:14.5px;color:#d6d6d6;position:relative}
.card li::before{content:"";position:absolute;left:0;top:50%;width:9px;height:1px;background:var(--steel)}

.price{display:block;font-size:11px;letter-spacing:.22em;color:var(--m);margin-bottom:16px}
.card .btn{width:100%}
/* before/after */
.ba{position:relative;margin-top:60px;aspect-ratio:16/8.5;min-height:260px;border-radius:22px;overflow:hidden;border:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--p:50%;background:#0c0c0c}
.ba svg.sc{position:absolute;inset:0;width:100%;height:100%}
.ba .bf{clip-path:inset(0 calc(100% - var(--p)) 0 0)}

.ba .tr{right:20px}
.hdl{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;z-index:4}
.hdl button{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:#fff;border:0;box-shadow:0 6px 28px rgba(0,0,0,.55);cursor:ew-resize;display:grid;place-items:center}
.hdl svg{width:22px;height:22px;stroke:#000;stroke-width:2;fill:none}
/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:70px;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.st{padding-right:30px;position:relative}
.st::before{content:"";display:block;width:19px;height:19px;border-radius:50%;background:var(--bg);border:1px solid var(--steel);margin-bottom:34px;position:relative;z-index:1;box-shadow:inset 0 0 0 5px var(--bg),inset 0 0 0 10px var(--steel)}
.st .n{font-size:13px;color:var(--d);letter-spacing:.2em}
.st h3{font-size:clamp(17px,1.6vw,21px);margin:10px 0 12px;line-height:1.15}
.st p{color:var(--m);font-size:15px}
/* why */
.why{margin-top:56px;border-top:1px solid var(--line)}
.why div{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:36px 0;border-bottom:1px solid var(--line);align-items:baseline}
.why h3{font-size:clamp(26px,4.2vw,56px)}
.why p{color:var(--m);max-width:44ch;font-size:clamp(15px,1.4vw,18px)}
/* types */
.types{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:56px}
.types div{border:1px solid var(--line);border-radius:16px;padding:34px 18px;text-align:center;font-size:12px;letter-spacing:.2em;font-weight:600;background:var(--g1);transition:background .5s var(--e),border-color .5s}
.types div:hover{background:var(--g2);border-color:rgba(255,255,255,.22)}
.types svg{display:block;margin:0 auto 18px;width:30px;height:30px;stroke:var(--steel);fill:none;stroke-width:1.3}
/* area */
.area{background:var(--g1);border-block:1px solid var(--line);overflow:hidden}
.ag{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.map{width:100%;aspect-ratio:1;max-width:560px;justify-self:end}
.map text{font:500 11px Inter,sans-serif;letter-spacing:.22em;fill:#777}
.area .btn{margin-top:36px}
.area h3{font-size:12px;letter-spacing:.26em;color:var(--steel);margin:28px 0 12px}
/* faq */
.faq{margin-top:56px;border-top:1px solid var(--line);max-width:920px}
.faq button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:var(--t);font:500 clamp(16px,1.7vw,20px)/1.4 Inter,sans-serif;padding:26px 0;display:flex;justify-content:space-between;gap:24px;align-items:center;cursor:pointer}
.faq button i{flex:none;width:14px;height:14px;position:relative}
.faq button i::before,.faq button i::after{content:"";position:absolute;background:var(--m);transition:transform .5s var(--e)}
.faq button i::before{left:0;right:0;top:6.5px;height:1px}.faq button i::after{top:0;bottom:0;left:6.5px;width:1px}
.faq button[aria-expanded=true] i::after{transform:scaleY(0)}
.pn{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e)}
.pn.o{grid-template-rows:1fr}.pn>div{overflow:hidden}
.pn p{color:var(--m);padding:0 0 26px;max-width:62ch}
/* final */
.final{background:#020202;text-align:center;padding:clamp(110px,16vw,220px) 0}
.final h2{max-width:none;font-size:clamp(34px,7.6vw,116px);margin:0 auto}
.final p{color:var(--m);margin:26px 0 40px;font-size:clamp(16px,1.7vw,21px)}

.final small{display:block;letter-spacing:.34em;font-size:11px;color:var(--d)}.final small b{color:var(--t);font-weight:600}
/* contact */
.cg{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
form{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.f{display:flex;flex-direction:column;gap:8px}.f.w{grid-column:1/-1}
label{font-size:11px;letter-spacing:.22em;color:var(--m);font-weight:500}
input,select,textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.2);color:var(--t);font:400 16px Inter,sans-serif;padding:10px 0;border-radius:0;transition:border-color .4s;width:100%}
select option{background:#111}
input:focus,select:focus,textarea:focus{outline:0;border-color:#fff}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-bottom-color:#fff;box-shadow:0 1px 0 #fff}
textarea{resize:vertical;min-height:110px}

.ok{display:none;border:1px solid rgba(185,194,204,.4);border-radius:22px;padding:56px 36px;background:var(--g2);text-align:center;grid-column:1/-1;animation:up2 .9s var(--e) both}
.ok svg{width:48px;height:48px;stroke:var(--steel);fill:none;stroke-width:1.4;margin-bottom:18px}
.ok h3{font-size:26px;margin-bottom:12px}.ok p{color:var(--m)}
.sent form>:not(.ok){display:none}.sent .ok{display:block}
/* footer */
footer{background:#000;border-top:1px solid var(--line);padding:70px 0 calc(34px + env(safe-area-inset-bottom))}

.fb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:56px;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--d)}
.fb a{margin-left:22px}.fb a:hover{color:#fff}
/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--e),transform 1s var(--e)}
.rv.i{opacity:1;transform:none}
@media(max-width:1024px){
 nav{display:none}.burger{display:block}.hd .btn{display:none}

 .types{grid-template-columns:repeat(3,1fr)}
 .ag,.cg{grid-template-columns:1fr;gap:44px}.map{justify-self:center}
 .steps{grid-template-columns:1fr 1fr;row-gap:50px}.steps::before{display:none}
}
@media(max-width:680px){
 .cards{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr;row-gap:0;padding-left:34px}
 .steps::before{display:block;left:9px;right:auto;top:0;bottom:0;width:1px;height:auto}
 .st{padding:0 0 44px}.st::before{position:absolute;left:-34px;top:0;margin:0}
 .why div{grid-template-columns:1fr;gap:14px}
 .types{grid-template-columns:1fr 1fr}
 form{grid-template-columns:1fr}.final .btn{width:100%}
 
 .hero .art{right:-40%;opacity:.6}
 .ba{aspect-ratio:4/3.4}.hero .logo{margin-bottom:36px}.fb a{margin:0 18px 0 0}
}
@media(prefers-reduced-motion:reduce){
 *{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .rv,.a,.ln>span{opacity:1;transform:none}.hero .art{opacity:.95}
}
.fx{transition:background .5s var(--e),border-color .5s;will-change:transform,opacity}
.steps::after{content:"";position:absolute;left:0;top:9px;height:1px;width:calc(var(--f,0)*100%);background:var(--steel)}
@media(max-width:1024px){.steps::after{display:none}}
@media(max-width:680px){.steps::after{display:block;left:9px;top:0;width:1px;height:calc(var(--f,0)*100%)}}
.bk{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;margin-top:56px;align-items:start}

.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ch b{font-size:14px;letter-spacing:.16em;font-weight:600;text-transform:uppercase}
.ch button{width:40px;height:40px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--t);font-size:20px;line-height:1;cursor:pointer;transition:border-color .3s}
.ch button:hover:not(:disabled){border-color:#fff}.ch button:disabled{opacity:.3;cursor:default}
.cw,.cd{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cw span{text-align:center;font-size:11px;letter-spacing:.14em;color:var(--d);padding-bottom:8px}
.cd button,.cd i{aspect-ratio:1.2;border-radius:12px}
.cd button,.tsl button{background:transparent;border:1px solid transparent;color:var(--t);font:500 14px Inter,sans-serif;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.cd button:hover:not(:disabled),.tsl button:hover:not(:disabled){border-color:rgba(255,255,255,.4)}
.cd button:disabled,.tsl button:disabled{color:#444;cursor:not-allowed}
.cd button[aria-pressed=true],.tsl button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
.ts{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.ts>b{font-size:11px;letter-spacing:.22em;color:var(--m);font-weight:500}
.hint{color:var(--d);font-size:14px;margin-top:14px}.hint:empty{display:none}
.tsl{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:14px}
.tsl button{min-height:46px;border-radius:999px;border-color:var(--line)}
.sum{margin-top:18px;font-size:14px;color:var(--steel)}
.ff{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.fe{color:#e0a1a1;font-size:12.5px}.fe:empty{display:none}
input[aria-invalid=true]{border-bottom-color:#e0a1a1}
.sb{grid-column:1/-1;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.bk .ok{grid-column:1/-1}
@media(max-width:1024px){.bk{grid-template-columns:1fr}}
@media(max-width:680px){.ff{grid-template-columns:1fr}.sb .btn{width:100%}.cw,.cd{gap:3px}}
.cwr{display:flex;min-width:0}.cwr .card{flex:1;min-width:0}
.card h3{overflow-wrap:anywhere;hyphens:auto}
.aud{color:var(--steel);font-size:14px;margin:-4px 0 14px}

.card li{transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
.js .cwr:not(.in) .card li{opacity:0;transform:translateX(-14px)}
.card::after{display:none}
.card:hover::after{opacity:1}
.card.th{transition:background .5s var(--e),border-color .5s,transform .12s linear}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.dlg{border:0;background:transparent;color:var(--t);padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%}
.dlg[open]{display:grid;place-items:center;padding:20px}
.dlg::backdrop{background:rgba(4,4,4,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dlg[open]::backdrop{animation:bk .5s var(--e)}
.dw{position:relative;width:min(600px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#1c1c1e;border:0;border-radius:28px;padding:clamp(24px,4vw,44px);box-shadow:0 40px 120px rgba(0,0,0,.7)}
.dlg[open] .dw{animation:pop .7s var(--e)}
@keyframes bk{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(28px) scale(.97)}}
.dx{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:none;border:1px solid var(--line);color:var(--t);font-size:22px;line-height:1;cursor:pointer;transition:border-color .3s}
.dx:hover{border-color:#fff}

.dpk{font-size:clamp(19px,3.4vw,26px);margin:0 0 6px;overflow-wrap:anywhere;line-height:1.1}
.dh{margin-bottom:26px}.dw .aud{margin:0 0 24px}.dh .aud{margin-bottom:0}
.da{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:26px}
.da .sum{margin:0;flex:1 1 200px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.dlg .ok{border:0;background:none;padding:12px 0 0}.dlg .ok .btn{margin-top:26px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
@media(max-width:680px){.card{padding:28px 22px}.card h3{font-size:clamp(19px,6vw,26px)}.cd button,.cd i{aspect-ratio:1}.dlg[open]{padding:12px}
 .da .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.js .cwr:not(.in) .card li{opacity:1;transform:none}}
.card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(210px,.5fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,4vw,52px);align-items:stretch;overflow:hidden}
.card .n{font-size:clamp(56px,7vw,96px);font-weight:800;line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);display:block;margin-bottom:22px}

.card h3{margin:0 0 10px;font-size:clamp(24px,2.8vw,38px)}
.card .aud{margin:0 0 16px}
.cm{align-self:center}
.cm ul{margin:0;columns:2;column-gap:36px;border-top:1px solid var(--line)}.cm li{break-inside:avoid}

.card .price{margin-bottom:8px}
.pv{display:block;font-size:clamp(46px,5.4vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1}

.pg{display:flex;gap:8px;margin:0 56px 22px 0}
.pg i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.pg i::after{content:"";position:absolute;inset:0;background:var(--t);transform:scaleX(0);transform-origin:0 50%}
.pg i.on::after{transform:none}
.dlg[open] .pg i.on::after{animation:fl .9s .25s var(--e) both}
@keyframes fl{from{transform:scaleX(0)}}
.da2{display:flex;gap:12px;align-items:center;margin-top:26px}.da2 .btn{flex:1}
.bkb{flex:none;width:50px;height:50px;border-radius:50%;background:none;border:1px solid rgba(255,255,255,.28);color:var(--t);display:grid;place-items:center;cursor:pointer;transition:background .4s,color .4s,transform .4s var(--e)}
.bkb:hover{background:var(--t);color:#000;transform:scale(1.02)}
.bkb svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1024px){.card{grid-template-columns:1fr}.card .btn{width:auto;min-width:210px}.card .price{margin-bottom:6px}}
@media(max-width:680px){.card{padding:28px 22px}.cm ul{columns:1}.card .btn{width:100%}}
.sv{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.sp{flex:none;font-size:clamp(28px,4vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1}

.sv{display:block}.sp{display:block;margin-top:14px}
.da2{justify-content:center}.da2 .btn{flex:0 1 auto;min-width:min(240px,100%)}
.da{flex-direction:column;justify-content:center;text-align:center}.da .sum{flex:none}

@media(max-width:680px){.da2 .btn{flex:1}.da .btn{flex:0 0 auto;width:100%}}
.ig{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(40px,7vw,140px);align-items:start}
.il{position:sticky;top:110px}
.il p{color:var(--m);max-width:46ch;margin-top:22px;font-size:clamp(15px,1.25vw,22px)}.il h2+p{color:#d6d6d6}
.ib{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:clamp(28px,3vw,48px) 0;border-top:1px solid var(--line)}
.ib:last-of-type{border-bottom:1px solid var(--line)}
.ib svg{width:clamp(30px,2.4vw,42px);height:auto;aspect-ratio:1;stroke:var(--steel);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.ib h3{font-size:clamp(20px,2.2vw,42px);line-height:1.1;margin-bottom:14px}
.ib p{color:var(--m);max-width:64ch;font-size:clamp(15px,1.05vw,20px)}
@media(max-width:1024px){.ig{grid-template-columns:1fr}.il{position:static}}
@media(max-width:680px){.ib{grid-template-columns:1fr;gap:16px}}
.lg{display:block;height:clamp(11px,.95vw,18px);aspect-ratio:1180/128;background:url(../images/logo.png) no-repeat left center/contain}
@media(max-width:680px){.lg{height:12px}}
/* Foto-Hero + Glas-Box */
section.hero{padding:0!important;margin:0}
#fm{display:block}
#fm #t{background-image:url("../images/flag-de.svg");background-repeat:no-repeat;background-position:1px 50%;background-size:24px 15px;padding-left:36px}
#fm .dh.sm{margin:26px 0 0;padding:clamp(16px,3vw,22px) clamp(16px,3vw,24px);border-radius:18px;background:#2c2c2e;border:0;box-shadow:none}
.dw{width:min(540px,100%)}
@media(min-width:1600px){.dw{width:min(580px,100%)}}
#fm .sv{display:flex;justify-content:space-between;align-items:center;gap:16px}
#fm .sv>div{min-width:0}
/* Leistungen: Basis = Tags, Komplett = Basis-Kachel + Profi-Service */

.cm li:hover{transition-delay:0s!important}

/* Danke-Bildschirm */
.ok #okp{max-width:34ch;margin-left:auto;margin-right:auto;line-height:1.55}
/* Browser-Autofill soll nicht beige/gelb werden */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #141516 inset;box-shadow:0 0 0 1000px #141516 inset;transition:background-color 600000s 0s,color 600000s 0s}
#fm #t:-webkit-autofill,#fm #t:-webkit-autofill:focus{-webkit-box-shadow:none;box-shadow:none}
input:autofill{-webkit-text-fill-color:#fff;caret-color:#fff}
#d2s .ck,#sm .ck{width:1.05em;height:1.05em;vertical-align:-.17em;margin:0 .4em 0 .8em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:680px){#d2s .tm{display:block;margin-top:2px}#d2s .ck{margin-left:0}}
#fm .sp{margin-top:0}
.sa{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.4fr) minmax(0,1fr);gap:22px 16px}.sa label{white-space:nowrap;letter-spacing:.14em}
@media(max-width:520px){.ff{grid-template-columns:1fr}.sa{grid-template-columns:1fr 1fr}.sa .f-str{grid-column:1/-1}}
.pho{position:absolute;inset:0;overflow:hidden;background:#060606}
.pho img{width:100%;height:100%;object-fit:cover;object-position:78% 55%;filter:brightness(.62) saturate(.65) contrast(1.05);transform-origin:78% 58%;will-change:transform}
.hi::after{opacity:var(--ov,1)}
.hero .art{animation:none;opacity:0}

@media(prefers-reduced-motion:reduce){.hero .art{opacity:0}}
/* PC-Szene im Hero */
.hero .art{aspect-ratio:10/7;width:min(1400px,70vw);right:1vw}
.cam{position:absolute;inset:0;transform-style:preserve-3d}
.ly{position:absolute;inset:0}
svg .fb{animation:spin 9s linear infinite}
.led{opacity:.6;animation:pl 5s ease-in-out infinite}
@keyframes pl{50%{opacity:.2}}
.mote{animation:dr 9s ease-in-out infinite}
@keyframes dr{50%{transform:translate(var(--dx),var(--dy))}}
@media(max-width:680px){.hero .art{width:170vw;right:-62vw}}
@media(prefers-reduced-motion:reduce){.hero{height:auto}.hi{position:relative;min-height:100svh}.dust{display:none}.fb,.led,.mote{animation:none}}
/* Komplett-Karte = Basis-Karte */

.final{padding:clamp(90px,12vw,190px) 0}

/* Vergleich: selbst vs. Profi */

@media(max-width:680px){.card h3{overflow-wrap:anywhere}}
/* Komplett: "Alles aus Basis" als Titelzeile statt Kachel */
/* Hero: nur Slogan (Apple-Stil) */
section.hero{height:auto!important;min-height:100svh}
.hero .hi{position:relative;top:auto;height:auto;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(110px,16vh,180px) clamp(20px,5vw,80px) clamp(70px,12vh,140px);background:#000;overflow:visible}
.hero .hi::after{display:none}
.hero h1.slogan{font-size:clamp(34px,11vw,150px);line-height:1.02;letter-spacing:-.045em;font-weight:800;text-transform:none;margin:0;max-width:none;text-wrap:balance}
.slogan .ln{display:block;padding-bottom:.1em}

/* Intro unter dem Hero */
.intro{padding:clamp(80px,12vw,200px) 0}
.intro-g{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,120px);align-items:end}
.intro h2{font-size:clamp(36px,6vw,104px);line-height:.98;letter-spacing:-.045em;margin:0}
.intro p{font-size:clamp(17px,1.5vw,26px);line-height:1.55;color:#bfc4c9;margin:0 0 32px;max-width:48ch}
@media(max-width:860px){.intro-g{grid-template-columns:1fr}}
/* Auswahlhilfe */

.pk{display:flex;align-items:center;gap:20px;text-align:left;padding:clamp(22px,2.4vw,36px);border-radius:28px;border:0;background:#1c1c1e;color:#fff;cursor:pointer;font-family:inherit;transition:transform .5s var(--e),border-color .4s,background .4s}
.pk:hover{transform:translateY(-4px);background:#232325}

.aud:empty{display:none}

/* ===== Theme: Apple Store App (dunkel, flach, SF Pro) ===== */
:root{--bg:#000;--g1:#1c1c1e;--g2:#1c1c1e;--line:rgba(84,84,88,.6);--t:#fff;--m:#8e8e93;--d:#636366;--steel:#aeaeb2;--blue:#0a84ff;--fill:#2c2c2e}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Inter,"Segoe UI",Arial,sans-serif;letter-spacing:-.011em}
button,input,select,textarea,.btn,.faq button,.cd button,.tsl button{font-family:inherit}
.map text{font-family:inherit;letter-spacing:0}
h1,h2,h3{text-transform:none;font-weight:700;letter-spacing:-.03em;line-height:1.08}
h2{font-size:clamp(30px,4.6vw,60px)}
:focus-visible{outline:2px solid var(--blue)}
/* Buttons */
.btn{min-height:48px;padding:0 26px;font-size:15px;font-weight:600;letter-spacing:-.01em;border:0;background:#fff;color:#000}
.btn:hover{background:#fff;transform:scale(1.03)}
.btn.ghost{background:var(--fill);color:#fff;border:0}
.btn.ghost:hover{background:#3a3a3c;color:#fff}
.hd .btn{min-height:40px;padding:0 20px;font-size:14px}

/* Navigation */
header.s{background:rgba(0,0,0,.72);border-color:transparent}
nav a{font-size:14px;letter-spacing:-.01em;font-weight:500}
.burger{background:var(--fill);border:0}
.mm{background:rgba(0,0,0,.92)}
/* Kleine Beschriftungen: normaler Satz, keine Sperrung */
label,.price,.ts>b,.cw span,.st .n,.types div,.ch b{letter-spacing:0;text-transform:none}
label{font-size:13px;font-weight:500}
.price,.ts>b{font-size:13px}

.cw span{font-size:12px;font-weight:500}

.ch b{font-size:17px;font-weight:600}

.types div{font-size:14px;font-weight:600}

/* Flächen */

.types div{background:#1c1c1e;border:0;border-radius:20px}
.types div:hover{background:#232325}
.ba{border:0;border-radius:28px}

/* Formular & Dialoge */
.dlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dx{background:#3a3a3c;border:0;color:#aeaeb2;width:34px;height:34px;font-size:20px}
.dx:hover{background:#48484a;color:#fff}
.pg i{background:#3a3a3c}
.pg i::after{background:var(--blue)}
input,select,textarea{background:var(--fill);border:0;border-radius:12px;padding:14px 16px;font-size:17px;letter-spacing:-.011em}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;box-shadow:0 0 0 2px var(--blue)}
input[aria-invalid=true]{box-shadow:0 0 0 1.5px #ff453a}
.fe{color:#ff453a}
#fm #t{background-position:14px 50%;padding-left:50px}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #2c2c2e inset;box-shadow:0 0 0 1000px #2c2c2e inset}
.ch button{background:var(--fill);border:0}
.ch button:hover:not(:disabled){background:#3a3a3c}
.cd button,.tsl button{font-weight:500;font-size:15px}
.cd button:hover:not(:disabled),.tsl button:hover:not(:disabled){border-color:transparent;background:var(--fill)}
.cd button:disabled,.tsl button:disabled{color:#48484a}
.cd button[aria-pressed=true],.tsl button[aria-pressed=true]{background:var(--blue);color:#fff;border-color:transparent}
.tsl button{background:var(--fill);border:0}
.bkb{background:var(--fill);border:0}
.bkb:hover{background:#3a3a3c;color:#fff;transform:none}
#fm .dh.sm{background:var(--fill)}
.ok{border:0}
/* Hero + Intro im Apple-Stil */
.hero h1.slogan{font-weight:700;letter-spacing:-.05em}
.intro h2{font-weight:700}
.sa label{letter-spacing:0}
.slogan .ln{white-space:nowrap}

/* Slogan: erst "Dein PC.", danach langsam der Rest */
.slogan .ln{overflow:visible}
.slogan .ln>span{display:inline-block;transform:none;opacity:0;animation:slin .78s var(--e) forwards}
.slogan .ln>.w1{animation-delay:.2s}

@keyframes slin{from{opacity:0;transform:translateY(.28em);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.slogan .ln>span{animation:none;opacity:1;filter:none}}
/* Slogan: normale Schreibweise */
.hero h1.slogan{text-transform:none;font-size:clamp(34px,11vw,150px);letter-spacing:-.05em}
/* 'bis ins Detail.' kommt von oben nach unten */

/* Header wie bei Linear: schmal zentriert, Logo links, Menue + Button rechts */
header .wrap.hd{max-width:1360px;justify-content:flex-start;gap:0}
header .logo{margin-right:auto}
header nav{position:relative;margin-right:0}
header nav ul{gap:28px}
header nav a{font-size:13.5px}
@media(max-width:1024px){header .wrap.hd{justify-content:space-between}.burger{margin-left:auto}}
/* Hero-Hintergrundvideo */
.hero .hi{overflow:hidden}
.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero .hi::after{display:block;content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1;pointer-events:none}
.hero h1.slogan{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.hv{display:none}.hero .hi::after{display:none}}

/* Ladebildschirm */

/* Slogan startet erst, wenn der Ladebildschirm weg ist */

/* ===== Blauer Akzent (#0a84ff) ===== */
::selection{background:rgba(10,132,255,.45);color:#fff}
.btn:not(.ghost){background:var(--blue);color:#fff}
.btn:not(.ghost):hover{background:#2f95ff}
.ib svg,.types svg{stroke:var(--blue)}

.steps::after{background:var(--blue)}
.st::before{border-color:var(--blue);box-shadow:inset 0 0 0 5px var(--bg),inset 0 0 0 10px var(--blue)}
.fb a:hover,nav a:hover{color:var(--blue)}
.faq button[aria-expanded=true] i::before,.faq button[aria-expanded=true] i::after{background:var(--blue)}
/* Basis-Karte: blauer Button wie bei Komplett */
.card .btn.ghost{background:var(--blue);color:#fff}
.card .btn.ghost:hover{background:#2f95ff;color:#fff}
/* Kein blauer Fokusring um den Schliessen-Button (wird beim Oeffnen automatisch fokussiert) */
.dx:focus,.dx:focus-visible{outline:none;box-shadow:none}
.dlg:focus,.dlg:focus-visible,.dw:focus,.dw:focus-visible{outline:none}
/* Titel nicht unter dem Schliessen-Button */
.dw .pg{margin-bottom:30px}
#d1 .dpk{margin-right:52px}
/* Niedrigere Kopfzeile */
html{scroll-padding-top:68px}
.hd{height:56px}
.hd .btn{min-height:34px;padding:0 16px;font-size:13px}
.burger{width:40px;height:40px}
.burger i{left:12px;right:12px}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:22px}
.burger[aria-expanded=true] i:nth-child(1){top:19px}.burger[aria-expanded=true] i:nth-child(2){top:19px}
/* Ruhigere Leistungsliste: eine Textfarbe fuer Beschreibungen, eine fuer Punkte */

.card p{color:var(--m)}

/* Slider ohne Ueberschrift darueber */
.ba{margin-top:0}
/* Karten ohne Ueberschrift darueber */
.cards{margin-top:0}

/* Pfeile als Chevrons */

/* Mobil: Preis links, Button rechts in einer Zeile */

/* Dialog-Ueberschriften + kein "Preis"-Label mobil */
.dtitle{margin:0 52px 22px 0}

/* Desktop: Leistungsliste auf Hoehe der Kartenueberschrift */
@media(min-width:1025px){.card .cm{align-self:start}}
/* Keine Trennlinien zwischen den Leistungen */
.cm ul{border-top:0}
.cm li{border-bottom:0}

/* Gleiche Abstaende oben/unten bei beiden Dialog-Titeln */
#d1 .dpk{margin:0 52px 22px 0}
/* Hero-Hintergrundvideo: blendet bei jedem Laden/Aktualisieren aus Schwarz ein */
.hv{animation:heroFade 1.8s ease-out .6s both}

@keyframes heroFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hv{animation:none}}
/* Hero-Text wie bei Apple: unten links */
.hero .hi{align-items:flex-end;justify-content:flex-start;text-align:left;padding:0}
.hero-in{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pad) clamp(48px,10vh,110px)}
.hero h1.slogan{text-align:left;font-size:clamp(38px,6.4vw,110px);line-height:1.04}
/* Wie bei Apple: grosse Ueberschriften in SF Pro Display, Fliesstext in SF Pro Text (lokal installiert bzw. System-SF auf Apple-Geraeten) */
h1,h2,h3,.pv,.slogan,.mm a{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,"Segoe UI",Arial,sans-serif}
/* Typografie wie bei apple.com (SF Pro-Werte; Inter mit optischer Groesse als Ersatz) */
html{-webkit-text-size-adjust:100%;font-optical-sizing:auto}
body{font-size:17px;line-height:1.47;letter-spacing:-.022em;font-feature-settings:"kern","liga","calt"}
h1,h2,h3,.pv,.slogan{font-weight:600;font-optical-sizing:auto}
.hero h1.slogan{font-weight:600;letter-spacing:-.045em}
.btn{font-weight:600}
/* Hero-Ueberschrift: exakt die Groessen von apple.com (gemessen auf der Apple-Watch-Seite) */
.hero h1.slogan{font-size:40px;line-height:44px;letter-spacing:normal;font-weight:600}
.hero-in{padding-bottom:72px}
@media(min-width:735px){.hero h1.slogan{font-size:64px;line-height:68px;letter-spacing:-.009em}.hero-in{padding-bottom:120px}}
@media(min-width:1069px){.hero h1.slogan{font-size:80px;line-height:84px;letter-spacing:-.015em}.hero-in{padding-bottom:88px}}
/* Seitenbreite wie apple.com: Rand = 6,2 % der Breite, Inhalt waechst bis ca. 1690 px */
:root{--pad:max(6.2vw,calc((100vw - 1694px)/2))}
.wrap,header .wrap.hd,.hero-in{max-width:none}
/* ===== Typografie-Skala wie apple.com (Breakpoints 735 / 1069 px) ===== */
h2{font-size:32px;line-height:36px;letter-spacing:.128px}
.intro h2{font-size:32px;line-height:36px;letter-spacing:.128px}
.card h3,.why h3,.ib h3{font-size:21px;line-height:25px;letter-spacing:.231px}
.st h3{font-size:21px;line-height:25px;letter-spacing:.231px}
.card p,.ib p,.why p,.st p,.pn p{font-size:17px;line-height:25px;letter-spacing:-.374px}
/* Einleitungstext: weiss + grau wie bei Apple */
.lead{font-size:19px;line-height:27px;letter-spacing:.228px;font-weight:600;color:#86868b;max-width:none}
.lead span,.lead.wh{color:#f5f5f7}
.intro p.lead{margin:0 0 32px}
.il p.lead{margin-top:22px;max-width:none}
@media(min-width:735px){
 h2{font-size:40px;line-height:44px;letter-spacing:normal}
 .intro h2{font-size:48px;line-height:52px;letter-spacing:-.144px}
 .card h3,.why h3,.ib h3{font-size:24px;line-height:28px;letter-spacing:.216px}
 .lead{font-size:21px;line-height:29px;letter-spacing:.231px}
}
@media(min-width:1069px){
 h2{font-size:48px;line-height:52px;letter-spacing:-.144px}
 .intro h2{font-size:64px;line-height:68px;letter-spacing:-.576px}
 .card h3,.why h3,.ib h3{font-size:28px;line-height:32px;letter-spacing:.196px}
}
/* Korrektur: staerkere Selektoren, damit aeltere Regeln nicht gewinnen */
.intro h2{font-weight:600}
p.lead{font-size:19px;line-height:27px;letter-spacing:.228px;font-weight:600;color:#86868b;max-width:none}
p.lead.wh,p.lead span{color:#f5f5f7}
@media(min-width:735px){p.lead{font-size:21px;line-height:29px;letter-spacing:.231px}}
/* Hero-Button wie bei Apple: dunkle Kapsel unten rechts */
.hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero-cta{display:flex;align-items:center;padding:6px;border-radius:999px;background:rgba(29,29,31,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.hero-cta .btn{min-height:36px;padding:0 20px;font-size:14px}
.intro p.lead{margin:0}
@media(min-width:735px){.hero-in{flex-direction:row;align-items:flex-end;justify-content:space-between}.hero-cta{flex:none;margin-bottom:6px}}
/* Vorgabe: Slogan 80 px, "High-End PC-Reinigung" 48 px (ab Tablet-Breite) */
@media(min-width:735px){
 .hero h1.slogan{font-size:80px;line-height:84px;letter-spacing:-.015em}
 .intro h2{font-size:48px;line-height:52px;letter-spacing:-.144px}
}
/* Einleitungstext unter dem Hero komplett weiss */
.intro p.lead{color:#f5f5f7}
.intro p.lead,.intro p.lead span{color:#fff}
/* Einleitungstext unter dem Hero komplett grau */
.intro p.lead,.intro p.lead span{color:#86868b}
/* Mobil: Eckdaten (Vor Ort / Professionell / Gruendlich / Flexibel) in 2 Reihen */

/* ===== Stapel-Effekt: jeder naechste Block schiebt sich ueber den vorherigen ===== */
.stack .stk>section.hero{position:sticky;background:#000}
:where(.stk)>:where(section){background:#000}
.stack .stk>section:not(.hero){position:relative;z-index:2}
.stack .stk>section.intro{border-radius:28px 28px 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.09),0 -40px 80px rgba(0,0,0,.65)}
/* Block "Morgen schon bei dir" */

/* Mobil: Tabellenkoepfe duerfen umbrechen und ueberlappen nicht */

/* ===== Die Highlights (Karten-Galerie wie bei Apple) ===== */
.hl-track{margin-top:clamp(28px,3vw,48px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 var(--pad);scroll-padding:0 var(--pad);overscroll-behavior-x:contain}
.hl-track::-webkit-scrollbar{display:none}
.hl-track:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:28px}
.hl-set{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.hl-card{position:relative;flex:0 0 min(84vw,1245px);height:540px;scroll-snap-align:start;background:#1c1c1e;border-radius:28px;overflow:hidden;opacity:0;transform:translateY(46px) scale(.97);transition:opacity .9s var(--e),transform 1.1s var(--e)}
.hl-track.vis .hl-card{opacity:1;transform:none}
.hl-track.vis .hl-card:nth-child(2){transition-delay:.08s}.hl-track.vis .hl-card:nth-child(3){transition-delay:.16s}.hl-track.vis .hl-card:nth-child(n+4){transition-delay:.24s}
.hl-media{position:absolute;left:0;right:0;top:0;height:58%;display:grid;place-items:center;padding:28px}
.hl-media svg{height:100%;width:auto;max-width:100%;overflow:visible}
.hl-cap{position:absolute;left:clamp(22px,3vw,52px);right:clamp(22px,3vw,52px);bottom:clamp(24px,3vw,48px)}
.hl-h{margin:0;font-size:21px;line-height:25px;letter-spacing:.231px;font-weight:600;color:#fff}

@media(min-width:735px){.hl-card{height:560px}.hl-h{font-size:24px;line-height:28px;letter-spacing:.216px}}
@media(min-width:1069px){
 .hl-card{height:612px}
 .hl-media{left:auto;top:0;bottom:0;right:0;width:58%;height:auto;padding:36px 48px}
 .hl-cap{right:auto;bottom:clamp(40px,4vw,64px);max-width:min(460px,40%)}
 .hl-h{font-size:28px;line-height:32px;letter-spacing:.196px}
}
.hl-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px}
.hl-dots{display:flex;gap:10px;align-items:center}
.hl-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#48484a;cursor:pointer;transition:background .3s,transform .3s}
.hl-dot[aria-current=true]{background:#f5f5f7;transform:scale(1.2)}
/* Illustrationen: Animationen laufen nur, wenn die Karte im Bild ist */
.hl-card svg *{animation-play-state:paused}
.hl-card.on svg *{animation-play-state:running}

.hl-card .dust circle{animation:hlDust 4s ease-in infinite}
@keyframes hlDust{0%{opacity:.9;transform:translate(0,0)}60%,100%{opacity:0;transform:translate(var(--dx),var(--dy))}}

.hl-card .ck{stroke-dasharray:30;stroke-dashoffset:30;animation:hlCk 3.2s ease-out infinite}
.hl-card .ck.c3{animation-delay:1s}
@keyframes hlCk{0%,15%{stroke-dashoffset:30}45%,100%{stroke-dashoffset:0}}

.hl-card .l1{animation:hlT1 4.2s infinite}.hl-card .l2{opacity:0;animation:hlT2 4.2s infinite}
@keyframes hlT1{0%,40%{opacity:1}55%,100%{opacity:0}}
@keyframes hlT2{0%,45%{opacity:0}60%,100%{opacity:1}}

.hl-card .cables path{stroke-dasharray:1;stroke-dashoffset:1;animation:hlDraw 3.6s ease-in-out infinite}
.hl-card .cables path:nth-child(2){animation-delay:.2s}.hl-card .cables path:nth-child(3){animation-delay:.4s}
@keyframes hlDraw{0%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){.hl-card{opacity:1;transform:none;transition:none}.hl-card svg *{animation:none!important}.hl-card .ck,.hl-card .cables path{stroke-dashoffset:0}.hl-card .l2{opacity:0}}

/* Intro: gleiche, kleinere Abstaende oben und unten */
section.intro{padding:clamp(56px,6vw,100px) 0 0}
section.intro+#leistungen{padding-top:clamp(56px,6vw,100px)}

section.intro{padding:clamp(40px,4vw,64px) 0 0}
section.intro+#leistungen{padding-top:clamp(40px,4vw,64px)}
.intro p.lead,.intro p.lead span{color:#fff}

@media(min-width:1025px){section.intro{padding-top:88px}section.intro+#leistungen{padding-top:88px}}

@media(min-width:1025px){section.intro{padding-top:112px}section.intro+#leistungen{padding-top:112px}}

@media(min-width:1025px){section.intro{padding-top:130px}section.intro+#leistungen{padding-top:130px}}

.intro p.lead,.intro p.lead span{color:#86868b}
@media(min-width:1025px){section.intro{padding-top:160px}section.intro+#leistungen{padding-top:160px}}

@media(max-width:860px){.pk{min-width:0;width:100%;box-sizing:border-box}}
@media(max-width:860px){.pk{gap:14px;padding:20px 16px}}

.ba{aspect-ratio:16/9}
.ba img.sc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
@media(max-width:735px){.ba{aspect-ratio:4/3.4}}
.ba .bf img.sc{filter:saturate(.3) sepia(.35) brightness(.85) contrast(.92)}
.ba .bf svg.sc rect:first-child{opacity:.4}

.ba img.sc,.ba .bf svg.sc{transform:scale(var(--z,1));transform-origin:50% 50%;will-change:transform}

.fer{color:#ff453a;font-size:14px;line-height:20px;margin:8px 0 0}.fer:empty{display:none}

.ba .bf img.sc{filter:none}

.intro-g{align-items:center}

.ba .bf{position:absolute;inset:0;z-index:1}

/* Vorher/Nachher bleibt beim Scrollen im Bild stehen: der Regler laeuft ueber eine lange Scroll-Strecke */
section.ba-sec{height:200vh;padding:0}
section.ba-sec>.wrap{position:sticky;top:12vh}
@media(prefers-reduced-motion:reduce){section.ba-sec{height:auto;padding:clamp(72px,11vw,150px) 0}section.ba-sec>.wrap{position:static}}
section.ba-sec{height:240vh}

@media(min-width:736px){.ba{aspect-ratio:1946/1200}}

.ba picture{display:contents}

@media(max-width:735px){section.ba-sec{height:165vh;height:165svh}section.ba-sec>.wrap{top:max(8vh,calc(50vh - (100vw - 46px)*.425));top:max(8svh,calc(50svh - (100vw - 46px)*.425))}}
@media(max-width:735px){.ba{aspect-ratio:1/1}section.ba-sec>.wrap{top:max(8vh,calc(50vh - (100vw - 46px)*.5));top:max(8svh,calc(50svh - (100vw - 46px)*.5))}}

.ba img.sc,.ba .bf svg.sc{transform:none!important;will-change:auto}

/* Eyebrow ueber dem Slogan (wie bei Apple: Produktname klein, darunter die grosse Zeile) */
.hero-txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.hero .hero-sub{margin:0;font-size:clamp(20px,2.4vw,28px);line-height:1.15;font-weight:600;letter-spacing:-.01em;color:#f5f5f7;opacity:0;animation:slin .78s var(--e) .1s forwards;position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.hero .hero-sub{animation:none;opacity:1}}
/* Slogan in einer Zeile */
.hero h1.slogan{white-space:nowrap;font-size:min(80px,calc((100vw - 2*var(--pad,24px))/13.8));line-height:1.1;letter-spacing:-.015em}
.hero .hero-sub{font-size:clamp(14px,calc((100vw - 2*var(--pad,24px))/30),28px)}
.hero-in{flex-wrap:wrap}
.slogan .ln{display:inline;white-space:nowrap}
/* Apple-Stil: Zeile darueber in Grossbuchstaben (erstes Wort fett), Headline fett und eng */
.hero .hero-sub{text-transform:uppercase;font-weight:400;letter-spacing:.02em;font-size:clamp(13px,calc((100vw - 2*var(--pad,24px))/24),24px)}
.hero .hero-sub b{font-weight:700}
.hero h1.slogan{font-weight:600;letter-spacing:-.028em;line-height:1.05;font-size:min(80px,calc((100vw - 2*var(--pad,24px))/13.5))}
/* Hero-Button: nur Pfeil */

/* Slogan in zwei Zeilen: 'Dein PC. Sauber bis' / 'ins Detail.' */
.slogan .ln{display:block}
.hero h1.slogan{font-size:min(80px,calc((100vw - 2*var(--pad,24px))/8.8));line-height:1.06}
/* Hero-Text ohne Animation */
.slogan .ln>span,.hero .hero-sub{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
.hero h1.slogan{font-size:min(80px,calc((100vw - 2*var(--pad,24px))/9.1))}
@media(max-width:734px){.hero .hero-sub{font-size:clamp(17px,calc((100vw - 2*var(--pad,24px))/17),24px)}}
/* Hero: Text links neben dem Button (wie bei Apple neben 'Buy') */
.hero-cta .cta-t{margin:0;padding:0 18px 0 16px;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.3;color:#a1a1a6;text-align:left;white-space:nowrap}
.hero-cta .cta-t b{font-weight:600;color:#f5f5f7}
.hero-cta .btn{white-space:nowrap}
/* PC: Plakette mittig zur Headline-Zeile */
@media(min-width:735px){.hero-in{--hf:min(80px,calc((100vw - 2*var(--pad,24px))/9.1))}.hero h1.slogan{font-size:var(--hf)}.hero-cta{margin-bottom:calc(var(--hf)*.53 - 18px)}}
/* Tablet: Highlights-Grafik darf die Beschriftung nicht ueberlappen */
.hl-media{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
.hl-media svg{min-height:0;max-height:100%;justify-self:center}
/* Tablet: Vorher/Nachher im Bildschirm mittig statt oben mit leerem Rest */
@media(min-width:736px) and (max-width:1024px){section.ba-sec>.wrap{top:max(8vh,calc(50vh - 27vw));top:max(8svh,calc(50svh - 27vw))}}
/* Komplett-Karte: 'Alles aus der Basisreinigung' als eigenes Element */

/* Mobil: Leistungsliste in 2 Spalten (Icon oben, Text darunter) */

/* PC: Preis mittig ueber dem Button */

/* Variante: Bauteile als eine Zeile, Leistungen als Liste */

/* Zusatzfragen vor dem Kalender */
#d0 .dpk{margin:0 52px 12px 0}
#d0 .aud{margin:0 0 6px;font-size:15px;line-height:1.45}
.qo{display:grid;gap:12px;margin-top:22px}

#d2s .xt{display:block;margin-top:2px;color:var(--blue)}
/* Einzelpaket: Karte mit Bauteil-Kacheln */
.pc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(28px,4.5vw,72px);padding:clamp(28px,4.4vw,60px);border-radius:32px;background:#1c1c1e}
.pc-l{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-width:0}
.pc-top h3{margin:0 0 14px;font-size:clamp(30px,3.6vw,48px);line-height:1.04;font-weight:700;letter-spacing:-.03em;color:#fff}
.pc-top p{margin:0;max-width:30ch;font-size:clamp(16px,1.5vw,19px);line-height:1.45;color:#a1a1a6}
.pc-buy{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px}
.pc-buy .pv{font-size:clamp(46px,5vw,68px);font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.pc-r{min-width:0;display:flex;flex-direction:column;gap:16px}

.pc-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pc-g li{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px;min-height:128px;padding:18px 16px;border-radius:22px;background:#262628;transition:background .35s var(--e),transform .45s var(--e)}
.pc-g li:hover{background:#2f2f32;transform:translateY(-3px)}
.pc-i{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(10,132,255,.16)}
.pc-i svg{width:24px;height:24px;fill:none;stroke:#4da3ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pc-g b{font-size:15px;line-height:1.25;font-weight:600;color:#f5f5f7;overflow-wrap:break-word;hyphens:manual}
@media(max-width:1024px){.pc{grid-template-columns:1fr}.pc-top p{max-width:none}}
@media(max-width:680px){.pc{padding:26px 20px;border-radius:26px;gap:26px}.pc-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pc-g li{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:12px}.pc-i{width:34px;height:34px;border-radius:11px;flex:none}.pc-i svg{width:19px;height:19px}.pc-g b{font-size:13px;min-width:0}.pc-g li{gap:10px;padding:10px}.pc-buy{justify-content:space-between;flex-wrap:nowrap}.pc-buy .btn{width:auto;min-width:0;padding:0 22px}}
/* Preis in den Zusatzfragen gut sichtbar */

/* Handy: Preis und Button unter die Bauteil-Liste */
@media(max-width:680px){
.pc-l{display:contents}
.pc-top{order:1}
.pc-r{order:2}
.pc-buy{order:3}
}
/* Preis auf der Paket-Karte etwas kleiner (Handy 34px, PC bis 48px) */
.pc-buy .pv{font-size:clamp(34px,3.6vw,48px)}
/* Preis mit Steuerhinweis; am Handy Preis dicht am Button */
.pc-price{display:flex;flex-direction:column;align-items:flex-start;gap:6px}

@media(max-width:680px){
.pc-buy{justify-content:flex-start;gap:18px}
.pc-buy .btn{flex:1 1 auto;width:auto;min-width:0}
}
/* Highlights: Foto statt Grafik (eingerahmt, abgerundet) */
.hl-media.ph{padding:14px}
.hl-media.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%;border-radius:20px}
@media(min-width:1069px){.hl-media.ph{padding:20px}}
/* Highlights: Foto auf der ganzen Karte (ab Tablet), Text liegt unten links darüber */
@media(min-width:735px){
.hl-media.ph{left:0;right:0;top:0;bottom:0;width:auto;height:auto;padding:0}
.hl-media.ph img{border-radius:0;object-position:50% 52%}
.hl-media.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,0) 64%)}
.hl-card:has(.hl-media.ph) .hl-cap{z-index:2}

}
/* PC: weniger Abstand zwischen der Highlights-Galerie und der Leistungs-Karte */
@media(min-width:1025px){#highlights{padding-bottom:36px}#highlights+#leistungen{padding-top:44px}}
/* "Teil für Teil.": fixierter Bildschirm mit scrollgesteuerter Animation */
.teil{position:relative;height:320vh;padding:0}
.teil-in{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,4.5vh,52px);overflow:hidden;padding:0 var(--pad,24px)}
.ts-h{margin:0;font-size:clamp(44px,13.5vw,190px);line-height:1;font-weight:700;letter-spacing:-.04em;color:#fff;text-align:center;white-space:nowrap;perspective:600px}
.ts-h .c{display:inline-block;will-change:transform,opacity}
.ts-h .c.c-sp{width:.26em}
.ts-h .c.c-dot{color:#0a84ff}
.ts-cap{margin:0;font-size:clamp(17px,2vw,24px);line-height:1.3;color:#86868b;text-align:center}
@media(max-width:820px){.teil{height:300vh}}
@media(prefers-reduced-motion:reduce){.teil{height:auto;padding:clamp(72px,11vw,150px) 0}.teil-in{position:static;height:auto}}
/* Karte 1 (Staub -> sauber): eigenes Hochformat-Foto, auf dem Handy ebenfalls über die ganze Karte */
.hl-media.ph picture{display:contents}
@media(max-width:734px){
.hl-card:has(.hl-media.ph) .hl-media.ph{left:0;right:0;top:0;bottom:0;width:auto;height:auto;padding:0}
.hl-card:has(.hl-media.ph) .hl-media.ph img{border-radius:0}
.hl-card:has(.hl-media.ph) .hl-media.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,0) 58%)}
.hl-card:has(.hl-media.ph) .hl-cap{z-index:2}

}
/* Highlights: Foto immer absolut über die ganze Karte (kein Streifen oben mehr, unabhängig vom Grid) */
.hl-media.ph img{position:absolute;inset:0;width:100%;height:100%}
/* FAQ: zweispaltig (links Titel + Text, rechts die Fragen mit Pfeil) */
.faq-g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:clamp(36px,6vw,120px);align-items:start}
.faq-l{position:sticky;top:110px}

.faq-l h2{margin:0 0 24px;font-size:clamp(40px,5vw,68px);line-height:1.04;letter-spacing:-.03em;font-weight:700}
.faq-s{margin:0 0 30px;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:#86868b;max-width:32ch}
.faq-c{margin:0;font-size:17px;line-height:1.4;color:#86868b}
.faq-c a{color:#f5f5f7;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:1px}
.faq{margin-top:0;max-width:none;border-top:0}
.faq button{border-bottom:0;padding:28px 0;font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-.01em}
.faq button:hover span,.faq button:focus-visible span{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.faq button i{width:20px;height:20px}
.faq button i::before{left:4px;top:4px;right:auto;bottom:auto;width:9px;height:9px;background:none!important;border-right:2px solid #f5f5f7;border-bottom:2px solid #f5f5f7;transform:rotate(45deg);transition:transform .45s var(--e),top .45s var(--e)}
.faq button i::after{display:none}
.faq button[aria-expanded=true] i::before{top:8px;transform:rotate(-135deg)}
.pn{border-bottom:1px solid var(--line)}
@media(max-width:900px){.faq-g{grid-template-columns:1fr;gap:34px}.faq-l{position:static}}
/* Kontakt-Fenster */
.k-choose[hidden],.k-form[hidden],.k-opt[hidden],.k-form .bkb[hidden]{display:none!important}
#d3 .dpk{margin:0 52px 8px 0}
.k-opts{display:grid;gap:10px;margin-top:6px}
.k-opt{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border:0;border-radius:18px;background:#2c2c2e;color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .25s}
.k-opt:hover{background:#3a3a3c}
.k-i{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(10,132,255,.16)}
.k-i svg{width:24px;height:24px;fill:none;stroke:#4da3ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.k-t{flex:1;min-width:0}
.k-t b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.k-t small{display:block;margin-top:2px;font-size:14px;line-height:1.35;color:#a1a1a6;overflow-wrap:anywhere}
.k-opt .k-c{flex:none;width:18px;height:18px;fill:none;stroke:#86868b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-form .ff{grid-template-columns:1fr;gap:18px}
.k-form textarea{min-height:120px}
.k-hp{position:absolute!important;left:-9999px;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
/* Vorher/Nachher: ganz normal scrollbar (nicht fixiert, keine Scroll-Animation); Regler startet in der Mitte */
section.ba-sec{height:auto!important;padding:clamp(72px,11vw,150px) 0!important}
section.ba-sec>.wrap{position:static!important;top:auto!important}
.ba{--p:50%}
/* Einsatzgebiet: schwarzer Hintergrund, große ruhige Typografie */
.area{background:#000;border-block:0}
.area h2{font-size:clamp(40px,6vw,84px);line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:0}
.area h3{margin:28px 0 16px;font-size:clamp(26px,3.2vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:700;color:#f5f5f7;text-transform:none}
.area h3 b{color:#0a84ff;font-weight:inherit}
.area .sub{margin-top:0!important;max-width:26ch;font-size:clamp(19px,1.8vw,24px);line-height:1.4;letter-spacing:-.01em;color:#86868b}
.area .btn{margin-top:34px}
/* Galerie-Steuerung wie bei Apple: Punkt-Kapsel mit Fortschritt + runde Pause-Taste */
.hl-nav{gap:14px;margin-top:30px}
.hl-dots{display:flex;align-items:center;gap:16px;height:56px;padding:0 30px;border-radius:999px;background:#232325}
.hl-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:#6e6e73;overflow:hidden;cursor:pointer;transform:none;transition:width .6s var(--e)}
.hl-dot[aria-current=true]{width:44px;background:#6e6e73;transform:none}
.hl-dot i{position:absolute;inset:0;border-radius:inherit;background:#f5f5f7;transform:scaleX(0);transform-origin:0 50%}
.hl-dot.run i{animation:hlFill 5s linear forwards}
.hl-nav.paused .hl-dot i{animation-play-state:paused}
.hl-nav.still .hl-dot[aria-current=true] i{animation:none;transform:scaleX(1)}
@keyframes hlFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hl-pp{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:#232325;color:#f5f5f7;cursor:pointer;transition:background .3s}
.hl-pp:hover{background:#303033}
.hl-pp svg{width:22px;height:22px;fill:currentColor;stroke:none}
.hl-pp .i-play{display:none}
.hl-pp[aria-pressed=true] .i-play{display:block}
.hl-pp[aria-pressed=true] .i-pause{display:none}
@media(max-width:680px){.hl-dots{height:48px;padding:0 24px;gap:14px}.hl-pp{width:48px;height:48px}}
/* Galerie: Text erscheint wie bei Apple, wenn die Karte aktiv wird (Überschrift zuerst, dann Beschreibung); beim Weiterblättern blendet er weich aus */
.js .hl-cap .hl-h{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity .4s ease,transform .4s ease,filter .4s ease}
.js .hl-card.on .hl-cap .hl-h{opacity:1;transform:none;filter:none;transition:opacity 1s var(--e),transform 1.2s var(--e),filter 1s var(--e)}
.js .hl-card.on .hl-cap .hl-h{transition-delay:.15s}

@media(prefers-reduced-motion:reduce){.js .hl-cap .hl-h{opacity:1;transform:none;filter:none;transition:none}}
/* Fußzeile ohne Logo und Links: nur noch die Zeile mit © und Impressum/Datenschutz */
footer{padding:36px 0 calc(30px + env(safe-area-inset-bottom))}
footer .fb{margin-top:0;padding-top:0;border-top:0}
/* Kontakt-Fenster, Formular: eine Spalte, klare Reihenfolge (überschreibt die allgemeine 2-Spalten-Regel für form) */
#d3 .k-form{display:flex;flex-direction:column;grid-template-columns:none;gap:0}
#d3 .k-form .ff{display:flex;flex-direction:column;gap:18px;margin-top:2px}
#d3 .k-form .f{gap:8px}
#d3 .k-form .f label{font-size:14px;font-weight:500;color:#a1a1a6}
#d3 .k-form input:not(.k-hp),#d3 .k-form textarea{width:100%;box-sizing:border-box}
#d3 .k-form textarea{min-height:130px;resize:vertical;line-height:1.45}
#d3 .k-form .fer{margin:14px 0 0}
#d3 .k-form .da2{margin-top:24px;gap:12px}
#d3 .k-form .da2 .btn{flex:1 1 auto;min-width:0;width:auto}
#d3 .k-form .dpk{margin:0 52px 8px 0}
#d3 .k-form .aud{margin:0 0 22px}

/* Paket-Karte: Preis und Button rechts neben dem Titel (ab Tablet), Bauteile darunter */
@media(min-width:681px){
.pc{grid-template-columns:minmax(0,1fr) auto;align-items:center;row-gap:clamp(28px,3.4vw,44px)}
.pc-l{display:contents}
.pc-top{grid-column:1;grid-row:1}
.pc-r{grid-column:1/-1;grid-row:2}
.pc-buy{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-end;justify-content:center;flex-wrap:nowrap;gap:18px}
.pc-price{align-items:flex-end}
.pc-buy .btn{flex:none;width:auto;padding:0 28px}
}
@media(min-width:1025px){
.pc-buy{flex-direction:row;align-items:center;gap:28px}
.pc-price{align-items:flex-start}
}
/* Paket-Karte: Bauteile blenden nacheinander ein, sobald die Karte sichtbar wird */
.js .pc:not(.in) .pc-g li{opacity:0}
.js .pc.in .pc-g li{animation:pcIn .9s var(--e) backwards;animation-delay:calc(var(--i,0)*80ms + 250ms)}
@keyframes pcIn{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){.js .pc:not(.in) .pc-g li{opacity:1}.js .pc.in .pc-g li{animation:none}}
/* Helles Design ab „Teil für Teil“ (wie bei Apple): --lt (0 → 1) wird per Scroll gesetzt, --lh steuert die Kopfzeile */
:root{--lt:0;--lh:0}
@supports (color:color-mix(in srgb,#000 50%,#fff)){
:root{
--lt-fg:color-mix(in srgb,#1d1d1f calc(var(--lt)*100%),#fff);
--lt-fg2:color-mix(in srgb,#1d1d1f calc(var(--lt)*100%),#f5f5f7);
--lt-fg3:color-mix(in srgb,#1d1d1f calc(var(--lt)*100%),#d6d6d6);
--lt-m:color-mix(in srgb,#6e6e73 calc(var(--lt)*100%),#8e8e93);
--lt-m2:color-mix(in srgb,#6e6e73 calc(var(--lt)*100%),#86868b);
--lt-d:color-mix(in srgb,#86868b calc(var(--lt)*100%),#636366);
--lt-steel:color-mix(in srgb,#6e6e73 calc(var(--lt)*100%),#aeaeb2);
--lt-line:color-mix(in srgb,rgba(0,0,0,.12) calc(var(--lt)*100%),rgba(84,84,88,.6));
--lt-gray:color-mix(in srgb,#f5f5f7 calc(var(--lt)*100%),transparent);
--lt-white:color-mix(in srgb,#fff calc(var(--lt)*100%),transparent);
--lt-gray0:color-mix(in srgb,#f5f5f7 calc(var(--lt)*100%),#000);
--lt-white0:color-mix(in srgb,#fff calc(var(--lt)*100%),#000);
--lt-card:color-mix(in srgb,#f5f5f7 calc(var(--lt)*100%),#1c1c1e);
--lh-fg:color-mix(in srgb,#1d1d1f calc(var(--lh)*100%),#fff);
--lh-m:color-mix(in srgb,#6e6e73 calc(var(--lh)*100%),#8e8e93);
--lh-line:color-mix(in srgb,rgba(0,0,0,.12) calc(var(--lh)*100%),rgba(84,84,88,.6));
--lh-bg:color-mix(in srgb,rgba(245,245,247,.82) calc(var(--lh)*100%),rgba(0,0,0,.72));
--lh-fill:color-mix(in srgb,rgba(0,0,0,.07) calc(var(--lh)*100%),#2c2c2e);
}
.lt,footer{color:var(--lt-fg);--t:var(--lt-fg);--m:var(--lt-m);--d:var(--lt-d);--line:var(--lt-line);--steel:var(--lt-steel);--fill:var(--lt-card)}
.lt .ba-sec,.lt #ablauf,.lt #faq{background:var(--lt-gray0)}
.lt #pflege,.lt .area{background:var(--lt-white0)}
.lt .ba-sec{border:0}
footer{background:var(--lt-white0);border-top-color:transparent}
.lt #ablauf{--bg:var(--lt-gray0)}
.lt .btn{background:var(--blue);border-color:var(--blue);color:#fff}
.lt .btn:hover{background:#2f95ff}
.lt .lead{color:var(--lt-m2)}
.lt .lead span,.lt .lead.wh,.lt p.lead.wh,.lt p.lead span{color:var(--lt-fg2)}
.lt .il h2+p{color:var(--lt-fg3)}
.lt .area{border-block:0}
.lt .area h3{color:var(--lt-fg2)}
.lt .area .sub{color:var(--lt-m2)}
.lt .faq-s,.lt .faq-c{color:var(--lt-m2)}
.lt .faq-c a{color:var(--lt-fg2)}
.lt .faq button i::before{border-right-color:var(--lt-fg2);border-bottom-color:var(--lt-fg2)}
.lt .map [stroke="#fff"]{stroke:color-mix(in srgb,#000 calc(var(--lt)*100%),#fff)}
.lt .map circle[fill="#fff"]{fill:color-mix(in srgb,#1d1d1f calc(var(--lt)*100%),#fff)}
.lt .map text[fill="#fff"]{fill:var(--lt-fg)!important}
.lt .map text{fill:var(--lt-m)}
.lt .map text[fill="#fff"]{fill:var(--lt-fg)!important}
header{color:var(--lh-fg);--t:var(--lh-fg);--m:var(--lh-m);--line:var(--lh-line)}
header.s{background:var(--lh-bg)}
header .logo .lg{filter:invert(var(--lh))}
header .burger{color:var(--lh-fg);background:var(--lh-fill)}
header .burger i{background:var(--lh-fg)}
header nav a:hover{color:var(--lh-fg)}
}
/* Obwohl die Blöcke jetzt in .lt liegen: wie die anderen Sektionen über dem festgesetzten Hero */
.stack .stk>.lt{position:relative;z-index:2;background:#000}
.stack .stk>.lt{border-radius:32px 32px 0 0;overflow:clip}
@media(max-width:680px){.stack .stk>.lt{border-radius:24px 24px 0 0}}
/* Mobiles Menü (dunkles Overlay): Kopfzeile bleibt dann hell auf dunkel */
@supports selector(:has(*)){
header:has(.burger[aria-expanded=true]){background:transparent!important;border-color:transparent!important}
header:has(.burger[aria-expanded=true]) .logo .lg{filter:none}
header .burger[aria-expanded=true]{color:#fff;background:rgba(255,255,255,.12)}
header .burger[aria-expanded=true] i{background:#fff}
}
/* Statistik unter dem Vorher/Nachher-Vergleich */
.stats-h{margin:clamp(56px,7vw,100px) 0 0;max-width:none;font-size:clamp(30px,4vw,56px);line-height:1.05;font-weight:700;letter-spacing:-.03em}
.stats{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.stat{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(24px,2.4vw,34px);border-radius:28px;background:var(--lt-white0)}
.stat-k{font-size:13px;line-height:1;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.stat-n{font-size:clamp(40px,4.4vw,64px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--t);white-space:nowrap}
.stat-n small{font-size:.38em;font-weight:600;letter-spacing:0;color:var(--m)}
.stat-c{font-size:clamp(15px,1.2vw,17px);line-height:1.45;color:var(--m)}
.stats-note{margin:20px 0 0;max-width:none;font-size:13px;line-height:1.5;color:var(--d)}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.stats{grid-template-columns:1fr}.stat{padding:22px}}
/* Block „Bleib zu Hause“: Kachel mit Anfahrt */
/* Heller Bereich schiebt sich über „Teil für Teil“ (wie die Seite über den Hero): der schwarze Block bleibt stehen */
.stack .stk>.lt{margin-top:-100vh;margin-top:-100svh;box-shadow:0 -1px 0 rgba(255,255,255,.09),0 -40px 80px rgba(0,0,0,.65)}
@media(prefers-reduced-motion:reduce){.stack .stk>.lt{margin-top:0;box-shadow:none}}
/* „Teil für Teil“ startet komplett schwarz: Text und Symbole blenden erst beim Scrollen ein */
.js .teil .ts-cap{opacity:0}
@media(prefers-reduced-motion:reduce){.js .teil .ts-cap{opacity:1}}
/* „Bleib zu Hause“: kleinere Abstände oben und unten */
section#schnell{padding:clamp(20px,2.6vw,40px) 0}
#leistungen{padding-bottom:clamp(20px,2.6vw,40px)}
/* Statistik: kleine Grafik je Karte (Linie zeichnet sich beim Einblenden) */
.stat-g{display:block;margin-top:auto;padding:12px 14px 10px;border-radius:18px;background:var(--lt-gray0)}
.stat-g svg{display:block;width:100%;height:64px;overflow:visible}
.stat-g .bl{fill:none;stroke:var(--d);stroke-width:1.5;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.stat-g .ln{fill:none;stroke:var(--blue);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.stat-g circle{fill:var(--blue);opacity:0;transition:opacity .4s var(--e) 2.4s}
.stat.i .stat-g circle{opacity:1}
.stat-ax{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;line-height:1;letter-spacing:.04em;color:var(--d)}
.stat-ax em{font-style:normal}
.stat-bar{display:block;height:10px;margin:22px 0 4px;border-radius:99px;background:var(--lt-white0);overflow:hidden}
.stat-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--blue);transition:width 2.3s var(--e) .2s}
.stat.i .stat-bar i{width:83.3%}
@media(prefers-reduced-motion:reduce){.stat-g svg{clip-path:none;transition:none}.stat-g circle{opacity:1;transition:none}.stat-bar i{width:83.3%;transition:none}}
/* Grafik: von rot (vorher) nach blau (nachher) */
.stat-g.rb .ln{stroke:url(#gRB)}
.stat-g.rb .bl{stroke:#ff3b30;opacity:.55}
.stat-g.rb .c0{fill:#ff3b30;opacity:0;transition:opacity .5s var(--e) .1s}
.stat.i .stat-g.rb .c0{opacity:1}
.stat-g.rb .stat-ax em:first-child{color:#ff3b30}
.stat-g.rb .stat-ax em:last-child{color:var(--blue)}
@media(prefers-reduced-motion:reduce){.stat-g.rb .c0{opacity:1;transition:none}}
/* Block „Bleib zu Hause“ im Stil der Apple-Produktseiten: zentrierte Überschrift mit Symbol, zwei Spalten mit großen Zahlen */
section#schnell{padding:clamp(40px,5.5vw,88px) 0}
.aw{text-align:center}
.aw-h{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.aw-ci svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.aw-h h2{margin:0;max-width:none;font-size:clamp(38px,6.2vw,92px);line-height:1.04;font-weight:700;letter-spacing:-.04em;text-transform:none;color:var(--blue)}
.aw-p{max-width:46ch;margin:clamp(22px,2.6vw,34px) auto 0;font-size:clamp(18px,1.75vw,24px);line-height:1.5;font-weight:600;letter-spacing:-.01em;color:#86868b}
.aw-p b{font-weight:600;color:#f5f5f7}
.aw-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(44px,6vw,88px)}
.aw-c{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 clamp(16px,3vw,48px)}
.aw-c+.aw-c{border-left:1px solid var(--line)}
.aw-ci{width:44px;height:44px;color:var(--blue)}
.aw-c h3{margin:clamp(16px,1.6vw,22px) 0 0;font-size:clamp(24px,2.6vw,40px);line-height:1.1;font-weight:600;letter-spacing:-.025em;text-transform:none;color:var(--blue)}
.aw-k{margin-top:clamp(32px,4.4vw,64px);font-size:clamp(15px,1.3vw,18px);line-height:1.2;font-weight:500;color:#86868b}
.aw-n{display:block;margin-top:8px;font-size:clamp(46px,6vw,92px);line-height:1;font-weight:700;letter-spacing:-.04em;color:#fff}
.aw-s{margin-top:14px;max-width:30ch;font-size:clamp(15px,1.3vw,18px);line-height:1.4;color:#86868b}
.aw-k s{position:relative;text-decoration:none}
.aw-k s::after{content:"";position:absolute;left:-2px;right:-2px;top:54%;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e) .9s}
.aw-c.i .aw-k s::after,.aw-c:not(.rv) .aw-k s::after{transform:scaleX(1)}
.cd4{list-style:none;margin:8px 0 0;padding:0;display:flex;justify-content:center;gap:clamp(14px,2.2vw,32px)}
.cd4 li{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.cd-n{font-size:clamp(40px,5vw,76px);line-height:1;font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.cd-u{font-style:normal;font-size:clamp(12px,1vw,14px);line-height:1;color:#86868b}
.aw .cd-bar{width:min(100%,340px);height:4px;margin:clamp(18px,2vw,26px) auto 0;border-radius:99px;background:#2c2c2e;overflow:hidden}
.cd-bar i{display:block;height:100%;width:var(--w,100%);border-radius:inherit;background:var(--blue);transition:width 1s linear}
.aw.exp .aw-g{grid-template-columns:minmax(0,560px);justify-content:center}
.cd4[hidden],.cd-bar[hidden],.aw-c[hidden],.aw-k[hidden],.aw-c h3[hidden]{display:none!important}
@media(max-width:820px){.aw-g{grid-template-columns:1fr}.aw-c+.aw-c{border-left:0;border-top:1px solid var(--line);margin-top:clamp(40px,10vw,64px);padding-top:clamp(40px,10vw,64px)}}
@media(prefers-reduced-motion:reduce){.cd-bar i{transition:none}.aw-k s::after{transition:none;transform:scaleX(1)}}
/* Zeilen beider Spalten teilen sich ein Raster: Symbole, Überschriften, Beschriftungen und große Zahlen stehen auf einer Linie */
@supports (grid-template-rows:subgrid){
@media(min-width:821px){
.aw-g{grid-template-rows:repeat(6,auto)}
.aw-c{display:grid;grid-row:1/-1;grid-template-rows:subgrid;justify-items:center;align-items:start}
.aw-c .aw-n,.aw-c .cd4{align-self:center}
}
}
/* Große Zahl links und Countdown rechts auf einer Grundlinie; Fußzeilen (links/rechts) auf einer Linie */
@supports (grid-template-rows:subgrid){
@media(min-width:821px){
.aw-c .aw-n,.aw-c .cd4{align-self:baseline}
.aw-c .aw-s{align-self:start}
}
}
.aw-s{margin-top:clamp(18px,1.8vw,26px)}
/* „Kostenlos“ und Countdown-Ziffern gleich groß (ein gemeinsamer Wert) */
.aw{--aw-big:clamp(46px,6vw,92px)}
.aw-n,.cd-n{font-size:var(--aw-big)}
/* Countdown: Ziffern rollen sanft nach oben (alte Ziffer geht, neue kommt von unten) */
.cd-n{position:relative;display:block;overflow:hidden;padding:0 .04em;margin:0 -.04em}
.cd-v{display:block}
.cd-v.cd-in{position:absolute;left:0;right:0;top:0;text-align:center}
/* Linie „zeichnet“ sich per Wischer von links nach rechts (läuft in Safari/iOS zuverlässig; Strichmuster mit pathLength + non-scaling-stroke tat es nicht) */
.stat-g svg{clip-path:inset(-14px 100% -14px -14px);transition:clip-path 2.3s var(--e) .2s}
.stat.i .stat-g svg{clip-path:inset(-14px -14px -14px -14px)}
/* Mobil (Burger-Menü): Kopfzeile ist nicht durchsichtig, sondern eine geschlossene dunkle Leiste wie bei Apple (in der hellen Zone hell) */
@media(max-width:1024px){
header,header.s{background:#161617;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:rgba(255,255,255,.1)}
}
@supports (color:color-mix(in srgb,#000 50%,#fff)){
@media(max-width:1024px){
header,header.s{background:color-mix(in srgb,#f5f5f7 calc(var(--lh)*100%),#161617);border-bottom-color:color-mix(in srgb,rgba(0,0,0,.12) calc(var(--lh)*100%),rgba(255,255,255,.1))}
}
}
/* Burger-Menü (Handy/Tablet): nur die Linien, ohne runde Fläche/Umrandung */
header .burger,header .burger[aria-expanded=true]{background:transparent!important;border:0;box-shadow:none}
/* Fußzeile der rechten Spalte (Datum + Balken) in einer Zeile; Beschriftungen ohne „Witwen“ */
.aw-f{display:flex;flex-direction:column;align-items:center;align-self:start;width:100%}
.aw-s{text-wrap:balance}
.aw-c .aw-f .aw-s{align-self:center}
/* Galerie: Karten malen unabhängig voneinander (weniger Neuzeichnen beim Scrollen) */
.hl-card{contain:layout paint}
/* Block „Bleib zu Hause“: heller Hintergrund wie bei Apple (nur dieser Block; die Farben der Zeilen hängen an --t/--m/--line) */
section#schnell{background:#f5f5f7;color:#1d1d1f;border-radius:clamp(24px,3vw,40px);--t:#1d1d1f;--m:#6e6e73;--d:#86868b;--line:rgba(0,0,0,.14)}
#schnell .aw-p{color:#6e6e73}
#schnell .aw-p b{color:#1d1d1f}
#schnell .aw-k,#schnell .aw-s,#schnell .cd-u{color:#6e6e73}
#schnell .aw-n,#schnell .cd-n{color:#1d1d1f}
#schnell .cd-bar{background:rgba(0,0,0,.1)}
/* Paket-Karte im Apple-Stil: mittig, ohne Kästchen – Titel, Preis + Button in einer Zeile, darunter Linie und Bauteile als Symbol-Raster */
.pc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(26px,3.4vw,44px);padding:clamp(40px,6vw,88px) clamp(20px,4vw,64px)}
.pc-l{display:contents}
.pc-top{order:1}
.pc-buy{order:2}
.pc-r{order:3;width:100%}
.pc-top h3{margin:0 0 14px;font-size:clamp(34px,4.8vw,68px);letter-spacing:-.035em}
.pc-top p{max-width:none;margin:0 auto;font-size:clamp(17px,1.7vw,23px);color:#a1a1a6}
.pc-buy{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px clamp(20px,3vw,40px)}
.pc-price{align-items:center}
.pc-buy .pv{font-size:clamp(48px,6vw,84px)}
.pc-buy .btn{flex:none;width:auto;min-height:54px;padding:0 clamp(28px,3vw,44px);font-size:17px}
.pc-g{margin-top:0;padding-top:clamp(28px,3.4vw,44px);border-top:1px solid rgba(255,255,255,.12);gap:clamp(24px,3vw,44px) clamp(12px,2vw,28px)}
.pc-g li{align-items:center;justify-content:flex-start;gap:14px;min-height:0;padding:0;border-radius:0;background:none;text-align:center}
.pc-g li:hover{background:none;transform:none}
.pc-i{width:auto;height:auto;background:none;border-radius:0}
.pc-i svg{width:clamp(32px,3.2vw,44px);height:clamp(32px,3.2vw,44px);stroke-width:1.5}
.pc-g b{font-size:clamp(15px,1.4vw,18px);font-weight:600}
@media(max-width:680px){
.pc{border-radius:26px}
.pc-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-g li{flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:0}
.pc-i{width:auto;height:auto}
.pc-i svg{width:34px;height:34px}
.pc-g b{font-size:15px}
.pc-buy{flex-direction:column;gap:20px}
.pc-buy .btn{width:100%;max-width:340px}
}
/* Paket-Karte: schwarze Karte auf hellgrauem Hintergrund (Apple-Stil); darunter „Bleib zu Hause“ auf Weiß */
section#leistungen{background:#f5f5f7;border-radius:clamp(24px,3vw,40px) clamp(24px,3vw,40px) 0 0;padding-bottom:clamp(40px,5vw,72px)}
section#leistungen .pc{background:#000}
section#schnell{background:#fff;border-radius:0 0 clamp(24px,3vw,40px) clamp(24px,3vw,40px)}
/* Wie bei Apple: dunkelgrauer Abschnitt (#111) mit schwarzer Karte; „Bleib zu Hause“ wieder hellgrau (#f5f5f7) */
section#leistungen{background:#111;border-radius:0}
section#schnell{background:#f5f5f7;border-radius:0 0 clamp(24px,3vw,40px) clamp(24px,3vw,40px)}
/* Zonen-Block: Überschrift „Hannover · 50 km“ (50 km blau), Beschriftung direkt darunter */
.area h2 b{color:#0a84ff;font-weight:inherit}
.area h2+.sub{margin-top:clamp(16px,2vw,24px)!important}
.area h2 b{display:inline-block;white-space:nowrap}
/* Karte: viele Orte – kleinere Schrift, Ring-Beschriftungen */
.area .map text{font-size:13px;font-weight:500;letter-spacing:0}
.area .map text.rl{font-size:10px;opacity:.55}
/* Handy: „Hannover 50 km“ in einer Zeile (Desktop: zwei Zeilen) */
@media(max-width:820px){.area h2 .ar-br{display:none}.area h2{white-space:nowrap}}
@media(max-width:820px){.area h2{font-size:min(40px,calc((100vw - 48px)/9.2))}}
/* Kontrast (WCAG AA): weißer Text auf Blau → dunkleres Blau; kleine graue/farbige Schrift auf hellem Grund → dunkler */
.btn:not(.ghost),.card .btn.ghost,.lt .btn,.cd button[aria-pressed=true],.tsl button[aria-pressed=true]{background:#0071e3}
.lt .btn{border-color:#0071e3}
.lt .btn:hover{background:#0077ed}

@supports (color:color-mix(in srgb,#000 50%,#fff)){
:root{
--lt-d:color-mix(in srgb,#6e6e73 calc(var(--lt)*100%),#636366);
--lt-blue:color-mix(in srgb,#0066cc calc(var(--lt)*100%),#0a84ff);
--lt-red:color-mix(in srgb,#d70015 calc(var(--lt)*100%),#ff3b30);
}
.stat-k{color:var(--lt-blue,#0a84ff)}
.stat-g.rb .stat-ax em:first-child{color:var(--lt-red,#ff3b30)}
.stat-g.rb .stat-ax em:last-child{color:var(--lt-blue,#0a84ff)}
}
/* Sehr schmale Handys (320 px): Hero-Kapsel „Express-Reinigung / Termin anfragen“ passt in die Breite */
@media(max-width:359px){
.hero-cta .cta-t{padding:0 10px 0 12px;font-size:12px}
.hero-cta .btn{padding:0 14px;font-size:13px}
}
/* Inter selbst gehostet (statt Google Fonts): kein Datenabfluss an Google, schneller Start */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Countdown besser lesbar: alle Zahlen zweistellig (Tage 04), gleiche Abstände, Doppelpunkte als Trenner zwischen den Spalten.
   Die Ziffern sind kleiner als „Kostenlos“ (eigene Größe --cd-big), stehen aber auf derselben Grundlinie */
.cd4{--cd-big:var(--aw-big);--cd-gap:clamp(18px,2.6vw,40px);gap:var(--cd-gap)}
.cd-n{font-size:var(--cd-big)}
.cd4 li{position:relative;flex:none}
.cd4 li+li::before{content:":";position:absolute;top:0;left:calc(var(--cd-gap)/-2);width:0;height:var(--cd-big);display:flex;align-items:center;justify-content:center;font-size:var(--cd-big);line-height:1;font-weight:600;color:#8e8e93;pointer-events:none}
/* sehr schmale Handys (320 px): etwas kleinere Zahlen und Abstände, damit alle vier Spalten passen */
@media(max-width:359px){.aw{--aw-big:40px}.cd4{--cd-gap:14px}}
/* Feste Größe der Zahlen-Spalten: ein unsichtbares „00“ bestimmt Breite und Höhe, die sichtbaren Ziffern (alt/neu) liegen darüber – so verrutschen Spalten und Doppelpunkte auch dann nicht, wenn eine Animation unterbrochen wird */
.cd-n::before{content:"00";display:block;visibility:hidden}
.cd-v,.cd-v.cd-in{position:absolute;left:0;right:0;top:0;text-align:center}
/* Countdown auf einer Linie mit „Kostenlos“: die Ziffern sind kleiner, daher werden sie um die Differenz der Mitten nach oben geschoben (Mitte Ziffern = Mitte „Kostenlos“); Doppelpunkte stehen genau auf Ziffernmitte. Nur im Zwei-Spalten-Layout (ab 821 px). */
@media(min-width:821px){.aw{--aw-big:clamp(40px,4.6vw,66px)}}
.cd4 li+li::before{top:calc(var(--cd-big)*-.1)}
/* Fragen-Fenster als Konfigurator: zwei Plättchen (Ja / Nein) und unten eine Preisleiste mit „Weiter“ */
#d0 .qo{grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.qt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 16px 14px;border:2px solid #3a3a3c;border-radius:18px;background:transparent;color:#f5f5f7;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,background .25s}
.qt:hover{border-color:#636366}
.qt:focus-visible{outline:2px solid #fff;outline-offset:2px}
.qt.on{border-color:#0a84ff;background:rgba(10,132,255,.14)}
.qt .ql{font-size:16px;font-weight:600;line-height:1.25}
.qt small{font-size:14px;font-weight:600;line-height:1.2;color:#8e8e93;transition:color .25s}
.qt.on small{color:#7ab8ff}
.qbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid #3a3a3c}
.qsum small{display:block;font-size:12px;line-height:1;color:#a1a1a6}
.qsum b{display:block;margin-top:6px;font-size:26px;line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qsum b.tick{animation:qtick .35s var(--e)}
@keyframes qtick{from{transform:translateY(5px);opacity:.4}to{transform:none;opacity:1}}
.qnav{display:flex;align-items:center;gap:10px}
.qnav .btn{min-height:50px;padding:0 28px}
@media(prefers-reduced-motion:reduce){.qsum b.tick{animation:none}.qt,.qt small{transition:none}}
/* Kundenstimmen (Abschnitt bleibt verborgen, solange in config.js keine echten Bewertungen stehen) */
.lt #bewertungen{background:var(--lt-white0)}

.rev-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.rev-c{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:clamp(24px,2.4vw,32px);border-radius:24px;background:var(--fill)}
.rev-t{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-s{display:flex;gap:3px}
.rev-s svg{width:20px;height:20px;fill:#ff9f0a}
.rev-s svg.off{fill:#d2d2d7}
.rev-d{font-size:13px;line-height:1;color:var(--m)}
.rev-q{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--t)}
.rev-a{display:flex;align-items:center;gap:12px}
.rev-i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#e8e8ed;color:#1d1d1f;font-size:14px;font-weight:600}
.rev-n b{display:block;font-size:16px;line-height:1.2;font-weight:600;color:var(--t)}
.rev-n small{display:block;margin-top:2px;font-size:13px;line-height:1.2;color:var(--m)}
@media(max-width:820px){
.rev-l{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);gap:14px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 8px;scrollbar-width:none}
.rev-l::-webkit-scrollbar{display:none}
.rev-c{flex:0 0 min(84%,340px);scroll-snap-align:start}
}

/* Fragen-Fenster: ruhigere Typografie – ausgewogene Zeilenumbrüche, kürzere Zeilen, mehr Luft */
#d0 .dw{width:min(580px,100%)}
#d0 .dpk{font-size:clamp(24px,3.2vw,29px);line-height:1.12;letter-spacing:-.025em;font-weight:700;text-wrap:balance;margin:0 52px 14px 0}
#d0 .aud{max-width:30em;font-size:16px;line-height:1.5;color:#a1a1a6;text-wrap:pretty;margin:0}
#d0 .qo{margin-top:28px}
#d0 .qt{padding:20px 20px 18px;gap:6px}
#d0 .qt .ql{text-wrap:balance}
#d0 .qbar{margin-top:28px;padding-top:22px}
#d0 .pg{margin-bottom:34px}
@media(max-width:520px){#d0 .dpk{font-size:24px}#d0 .aud{font-size:15px}#d0 .qt{padding:16px 16px 14px}}
/* Karte „Komplettreinigung“ (15.10.2026): Kopfzeile (Name links, Preis + Button rechts), darunter hohe Kachel „Neue Wärmeleitpaste“ links und die acht Symbole rechts */
.pc-p{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;padding:22px 16px;border-radius:22px;background:rgba(10,132,255,.14);text-align:center}
.pc-pi svg{width:clamp(34px,3vw,44px);height:clamp(34px,3vw,44px);fill:none;stroke:#4da3ff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pc-p b{font-size:clamp(15px,1.4vw,18px);font-weight:600;line-height:1.25;color:#f5f5f7}
.pc-p small{font-size:13px;font-weight:600;color:#7ab8ff}
.js .pc:not(.in) .pc-p{opacity:0}
.js .pc.in .pc-p{animation:pcIn .9s var(--e) backwards;animation-delay:250ms}
@media(prefers-reduced-motion:reduce){.js .pc:not(.in) .pc-p{opacity:1}.js .pc.in .pc-p{animation:none}}
@media(max-width:820px){
.pc{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top price" "btn btn" "body body";align-items:start;text-align:left;gap:16px 12px;padding:26px 20px 24px}
.pc-buy{display:contents}
.pc-top{grid-area:top;min-width:0}
.pc-top h3{margin:0 0 6px;font-size:clamp(18px,5.2vw,28px);letter-spacing:-.03em}
.pc-top p{margin:0;font-size:14px;line-height:1.35}
.pc-price{grid-area:price;align-items:flex-end;justify-content:center;align-self:stretch;padding-left:14px;border-left:1px solid rgba(255,255,255,.16)}

.pc-buy .pv{font-size:clamp(26px,7.4vw,34px)}
.pc-buy .btn{grid-area:btn;width:100%;max-width:none;min-height:50px}
.pc-r{grid-area:body;width:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:10px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.pc-p{padding:16px 8px;border-radius:20px;gap:10px}
.pc-p b{font-size:14px;line-height:1.25}
.pc-p small{padding:0;border:0;font-size:13px}
.pc-pi svg{width:30px;height:30px}
.pc-g{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center;gap:16px 10px;padding-top:0;border-top:0}
.pc-g li{gap:7px}
.pc-i svg{width:26px;height:26px}
.pc-g b{font-size:14px;line-height:1.2}
}
@media(min-width:821px){
.pc{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top buy" "body body";align-items:center;text-align:left;row-gap:clamp(24px,3vw,40px)}
.pc-top{grid-area:top}
.pc-buy{grid-area:buy;flex-wrap:nowrap;gap:24px}
.pc-r{grid-area:body;width:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);gap:clamp(16px,2vw,28px);align-items:stretch;padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(255,255,255,.12)}
.pc-g{padding-top:0;border-top:0}
.pc-top h3{margin:0 0 10px;font-size:clamp(30px,3.6vw,48px)}
.pc-top p{margin:0;max-width:none;font-size:clamp(15px,1.4vw,18px)}
.pc-buy .pv{font-size:clamp(40px,4vw,56px)}
.pc-price{align-items:flex-end}
.pc-buy .btn{min-height:50px;padding:0 28px;font-size:16px}
}
@media(max-width:359px){.pc{column-gap:10px}.pc-price{padding-left:10px}.pc-top p{font-size:13px}.pc-g b,.pc-p b{font-size:13px}}
/* Handy: Karte größer (Rückmeldung vom echten iPhone: alles zu klein) – breitere Karte, größere Schrift */
@media(max-width:820px){
section#leistungen>.wrap{padding-left:0;padding-right:0}
.pc{padding:30px 20px 28px;border-radius:0}
.pc-top h3{font-size:clamp(18px,5.6vw,30px)}
.pc-top p{font-size:15px}
.pc-buy .pv{font-size:clamp(26px,8.6vw,40px)}

.pc-buy .btn{min-height:56px;font-size:18px}
.pc-p b{font-size:15px}
.pc-p small{font-size:14px}
.pc-pi svg{width:34px;height:34px}
.pc-i svg{width:30px;height:30px}
.pc-g b{font-size:15.5px}
.pc-g{gap:20px 8px}
}
@media(max-width:359px){.pc{padding:26px 16px 24px}.pc-top p{font-size:13.5px}.pc-g b,.pc-p b{font-size:13.5px}.pc-i svg{width:26px;height:26px}}
/* Handy: Name der Karte oben über die ganze Breite, darunter Untertitel links und Preis rechts mit Trennstrich (Schriftgrößen kommen aus dem Typografie-System am Dateiende) */
@media(max-width:820px){
.pc{grid-template-areas:"title title" "sub price" "btn btn" "body body";row-gap:0}
.pc-top{display:contents}
.pc-top h3{grid-area:title;margin:0 0 10px}
.pc-top p{grid-area:sub;align-self:center;margin:0 0 18px}
.pc-price{margin-bottom:18px}
.pc-buy .btn{margin-bottom:18px}
.pc-r{margin-top:0}
}
/* ===== Typografie-System (ein Maßstab für die ganze Seite, wie bei Apple) =====
   Display   Hero, „Bleib zu Hause“, „Hannover — 50 km“  700, −0,03 em, Zeilenhöhe 1,05
   Headline  alle Abschnittsüberschriften, Kartenname, Preis  56 → 32 px, 700, −0,03 em, 1,07
   Subhead   Zwischenüberschriften  28 → 21 px, 600, 1,15
   Lead      Einleitungstexte  24 → 19 px (Aussagen 600, Untertitel 400)
   Title     Schritt-/FAQ-Titel  21 → 19 px, 600
   Body      Fließtext  17 px, 400
   Label     Symbol-Beschriftungen, Kartenuntertitel  18 → 15,5 px
   Caption   Fußnoten, Kleintext  13 px
   Alle Größen laufen stufenlos mit der Bildschirmbreite (Handy = gleiche Proportionen wie PC). */
:root{
--ty-d:max(34px,min(80px,calc((100vw - 2*var(--pad,24px))/9.1)));
--ty-h:clamp(40px,3.4vw,48px);
--ty-s:clamp(21px,2vw,28px);
--ty-l:clamp(19px,1.7vw,24px);
--ty-t:clamp(19px,1.5vw,21px);
--ty-b:17px;
--ty-x:clamp(15.5px,1.25vw,18px);
--ty-c:13px;
}
.hero h1.slogan,#sn-t,#ar-t,#ar-t b{font-weight:700;letter-spacing:-.03em;line-height:1.05}
#sn-t,#ar-t,#ar-t b{font-size:var(--ty-d)}
#intro-h,#hl-t,#pf-t,#ablauf>.wrap>h2,.stats-h,#faq .faq-l h2,#leistungen .pc-top h3,#leistungen .pc-buy .pv,.mm a{font-size:var(--ty-h);font-weight:700;letter-spacing:-.03em;line-height:1.07}
.hl-h,.aw-c h3,.ib h3{font-size:var(--ty-s);font-weight:600;letter-spacing:-.015em;line-height:1.15}
.lead,.lead span,.aw-p,.area .sub,.ts-cap,.faq-s{font-size:var(--ty-l);letter-spacing:-.01em;line-height:1.3}
.st h3,.faq button{font-size:var(--ty-t);font-weight:600;letter-spacing:-.01em;line-height:1.25}
#leistungen .pc-top p,#leistungen .pc-g b,#leistungen .pc-p b,.stat-c,.aw-k,.aw-s{font-size:var(--ty-x)}
#leistungen .btn,.area .btn{font-size:var(--ty-b);font-weight:600}
#leistungen .pc-p small,.stat-k,.stats-note,.st .n{font-size:var(--ty-c)}
p.lead,p.lead span{font-size:var(--ty-l);letter-spacing:-.01em;line-height:1.3}
.aw-k,.faq-c a{font-weight:600}
.cd-u{font-size:var(--ty-c)}
/* Buchungsfenster auf dieselbe Skala */
dialog .dpk,dialog h3,#d0 .dpk{font-size:var(--ty-s);font-weight:600;letter-spacing:-.015em;line-height:1.15}
dialog .aud,#d0 .aud{font-size:var(--ty-b);line-height:1.47}
dialog .btn{font-size:var(--ty-b);font-weight:600}
.qt .ql{font-size:var(--ty-b)}
dialog small,.hint,.qt small,.cw span,#d3 .k-form .f label,.ff label{font-size:var(--ty-c)}
#d1 .cd button,#d1 .tsl button{font-size:var(--ty-b)}
/* PC: Fortschrittsbalken auf Höhe der zweiten Zeile von „Im ganzen Umkreis von 50 km.“ (Mitte des Balkens = Mitte der Zeile 2) */
@media(min-width:821px){#schnell .aw .cd-bar{margin-top:calc(.7*clamp(15px,1.3vw,18px) - 2px)}}
/* „Pflege statt Durchpusten“: keine Linie über dem ersten und unter dem letzten Punkt (nur zwischen den Punkten) */
.ib:first-of-type{border-top:0}
.ib:last-of-type{border-bottom:0}
/* ===== Handy: Apple-Stil (Rückmeldung des Nutzers: PC gefällt, Handy nicht – Vorbild apple.com/de/apple-watch-series-12) =====
   Überschriften Semibold 600 (wie bei Apple, nicht 700), Headline 34, Display = Größe der Hero-Überschrift (Hero bleibt die größte Zeile), linksbündig (Zentrieren wurde auf Wunsch des Nutzers zurückgenommen),
   dazu eine feste Buchungsleiste unten („Komplettreinigung · 80 € · Jetzt buchen“, wie „Ab 449 € · Kaufen“ bei Apple) */
@media(max-width:734px){
:root{--ty-h:min(34px,9vw);--ty-xl:min(80px,calc((100vw - 2*var(--pad,24px))/9.1))}
.hero h1.slogan,#sn-t,#ar-t,#ar-t b,#intro-h,#hl-t,#pf-t,#ablauf>.wrap>h2,.stats-h,#faq .faq-l h2,#leistungen .pc-top h3,#leistungen .pc-buy .pv,.mm a{font-weight:600;letter-spacing:-.025em}
#sn-t,#ar-t,#ar-t b,#intro-h{font-size:var(--ty-xl);line-height:1.08}
.mm a{font-size:calc(var(--ty-h)*.8)}
#intro-h,.stats-h,#pf-t,#ablauf>.wrap>h2,#faq .faq-l h2,#ar-t{text-wrap:balance}
.area h2 .ar-br{display:inline}
.area h2{white-space:normal}
}
.bb{display:none}
@media(max-width:820px){
.bb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;align-items:center;justify-content:space-between;gap:14px;padding:12px max(20px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#161617;border-top:1px solid rgba(255,255,255,.08);transform:translateY(100%);visibility:hidden;transition:transform .45s var(--e),visibility 0s .45s}
.bb.on{transform:none;visibility:visible;transition:transform .45s var(--e),visibility 0s}
.bb-t{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.2}
.bb-t b{font-size:var(--ty-x);font-weight:600;color:#f5f5f7}
.bb-t span{font-size:var(--ty-c);color:#a1a1a6}
.bb .btn{flex:none;min-height:44px;padding:0 24px;font-size:var(--ty-x)}
footer{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.bb,.bb.on{transition:none}}
@media(max-width:734px){#leistungen .pc-top p{text-wrap:balance}}
/* ===== Apple-Feinschliff (16.10.2026): Gewicht, Zeichenabstand und Zeilenhöhe wie auf apple.com (gemessen auf apple.com/de/apple-watch-series-12) =====
   Apple: alle Überschriften 600; 80 px −0,015 em · 48 px −0,003 em · 40 px 0 · 28 px +0,007 em · 21 px +0,011 em · 19 px +0,012 em · 17 px −0,022 em;
   Zeilenhöhe 80→84, 48→52, 28→32, 21→25 (Überschrift) / 29 (Absatz), 19→27, 17→25; Einleitungsabsatz 21 px (PC) / 19 px (Handy), 600 */
:root{--ty-l:clamp(19px,1.5vw,21px);--tr-d:-.015em;--tr-h:-.003em;--tr-s:.007em;--tr-l:.011em}
@media(max-width:1024px){:root{--tr-s:.011em}}
@media(max-width:734px){:root{--tr-d:-.025em;--tr-h:0em}}
.hero h1.slogan,#sn-t,#ar-t,#ar-t b{font-weight:600;letter-spacing:var(--tr-d);line-height:1.05}
@media(max-width:734px){.hero h1.slogan,#sn-t,#ar-t,#ar-t b,#intro-h{line-height:1.1}}
#intro-h,#hl-t,#pf-t,#ablauf>.wrap>h2,.stats-h,#faq .faq-l h2,#leistungen .pc-top h3,.mm a{font-weight:600;letter-spacing:var(--tr-h);line-height:1.083}
#leistungen .pc-buy .pv{font-weight:600;letter-spacing:var(--tr-h)}
.hl-h,.aw-c h3,.ib h3{font-weight:600;letter-spacing:var(--tr-s)}
.lead,.lead span,p.lead,p.lead span,.aw-p,.area .sub,.ts-cap,.faq-s{letter-spacing:var(--tr-l);line-height:1.38}
.st h3,.faq button{letter-spacing:var(--tr-l);line-height:1.19}
.aw-n,.cd-n,.cd-v,.stat-n,.stat-n b{font-weight:600}
.hero .hero-sub b{font-weight:600}
.btn{letter-spacing:-.02em}
header nav a{font-weight:400}
.ts-h,.ts-h .c{font-weight:600;letter-spacing:var(--tr-d)}
.aw-n,.cd-n,.cd-v,.stat-n,.stat-n b{letter-spacing:-.01em}
.bb-t b{font-weight:600}
.cw span,#d3 .k-form .f label,.ff label,dialog label{font-weight:400}
#d1 .cd button,#d1 .tsl button{font-weight:400}
dialog small,#k-addr,#d0 .qbar small{font-size:var(--ty-c)}
/* ===== Apple 1:1 (16.10.2026): Größe, Gewicht, Zeichenabstand, Zeilenhöhe exakt wie auf apple.com/de/apple-watch-series-12 (gemessen bei 1440 / 900 / 390 px; Umbrüche wie bei Apple: 1069 px und 734 px) =====
   A = „Herzbegreifend.“ (Hero)            → „Bis ins Detail.“ (Hero)
   B = „Die Highlights.“ (Abschnitt)         → „Wieder wie neu.“, „Das Ergebnis.“, „Pflege statt Durchpusten.“, „So funktioniert’s.“, FAQ, Kartenname
   C = Karten-Überschrift der Highlights     → „Wärmeleitpaste erneuert, Wärme im Griff.“ (.hl-h)
   D = „Das Herzstück deiner Gesundheit.“    → „Bleib zu Hause.“, „Hannover — 50 km“
   E = „Das ultimative Tool für …“ (Lead)    → „Wir kommen zu dir und reinigen …“ und die übrigen Einleitungstexte
   F = „Notruf SOS. Superschnell. Du brauchst …“ → Texte unter den Überschriften in „Pflege statt Durchpusten“ und „So funktioniert’s“ */
:root{
--a-fs:80px;--a-ls:-1.2px;--a-lh:84px;
--b-fs:48px;--b-ls:-.144px;--b-lh:52px;
--c-fs:28px;--c-ls:.196px;--c-lh:32px;
--d-fs:80px;--d-ls:-1.2px;--d-lh:84px;
--e-fs:21px;--e-ls:.231px;--e-lh:29px;
--f-fs:17px;--f-ls:-.374px;--f-lh:21px;--f-gap:13.6px;
}
@media(max-width:1068px){:root{--a-fs:64px;--a-ls:-.576px;--a-lh:68px;--b-fs:40px;--b-ls:0px;--b-lh:44px;--c-fs:24px;--c-ls:.216px;--c-lh:28px;--d-fs:64px;--d-ls:-.576px;--d-lh:68px}}
@media(max-width:734px){:root{--a-fs:40px;--a-ls:0px;--a-lh:44px;--b-fs:32px;--b-ls:.128px;--b-lh:36px;--c-fs:17px;--c-ls:-.374px;--c-lh:21px;--d-fs:48px;--d-ls:-.144px;--d-lh:52px;--e-fs:19px;--e-ls:.228px;--e-lh:27px;--f-fs:14px;--f-ls:-.224px;--f-lh:18px;--f-gap:11.2px}}
.hero h1.slogan{font-size:var(--a-fs);font-weight:600;letter-spacing:var(--a-ls);line-height:var(--a-lh);white-space:normal}
.hero h1.slogan .ln,.hero h1.slogan .ln>span{white-space:normal}
@media(min-width:735px){.hero-in{--hf:var(--a-fs)}}
#intro-h,#hl-t,#pf-t,#ablauf>.wrap>h2,.stats-h,#faq .faq-l h2,#leistungen .pc-top h3{font-size:var(--b-fs);font-weight:600;letter-spacing:var(--b-ls);line-height:var(--b-lh)}
#leistungen .pc-buy .pv{font-size:var(--b-fs);font-weight:600;letter-spacing:var(--b-ls)}
.hl-h{font-size:var(--c-fs);font-weight:600;letter-spacing:var(--c-ls);line-height:var(--c-lh)}
#sn-t,#ar-t,#ar-t b{font-size:var(--d-fs);font-weight:600;letter-spacing:var(--d-ls);line-height:var(--d-lh)}
.lead,p.lead,.lead span,p.lead span,.aw-p,.area .sub,.ts-cap,.faq-s{font-size:var(--e-fs);letter-spacing:var(--e-ls);line-height:var(--e-lh)}
.ib p,.st p{font-size:var(--f-fs);font-weight:600;letter-spacing:var(--f-ls);line-height:var(--f-lh);margin-top:var(--f-gap)}
.ib h3,.st h3{margin-bottom:0}
/* ===== „Wieder wie neu.“ wie „Die Highlights.“ bei Apple (16.10.2026): nur die Überschrift (ohne Einleitungstext), direkt darunter die Karten; Abschnitt #111; Abstände wie Apple: oben 144/120/112 px, Überschrift→Karten 48/40/32 px (PC/Tablet/Handy, Umbrüche bei 1069 und 734 px) ===== */
.intro-g{display:block}
section.intro{padding:144px 0 0;background:#111}
section#highlights{padding-top:48px;background:#111}
.hl-track{margin-top:0}
@media(max-width:1068px){section.intro{padding-top:120px}section#highlights{padding-top:40px}}
@media(max-width:734px){section.intro{padding-top:112px}section#highlights{padding-top:32px}}
/* „Bleib zu Hause“-Block ohne abgerundete Ecken (alle Breiten) */
section#schnell{border-radius:0}
/* Hero und „Wieder wie neu.“ ohne Stapel-Effekt (alle Breiten): das Hero scrollt normal weg, der nächste Block schiebt sich nicht mehr mit Rundung und Schatten darüber */
.stack .stk>section.hero{position:relative!important;top:auto!important}
.stack .stk>section.intro{border-radius:0;box-shadow:none}
/* Handy: „Teil für Teil“ so breit wie „Bleib zu Hause.“ (fast volle Breite, ca. 69 px bei 390 px). Die JS-Anpassung `fit()` misst jetzt die Buchstaben-Breiten statt `scrollWidth` (das war durch die auseinandergezogenen Buchstaben zu groß und hat die Zeile auf 31 px verkleinert). */
@media(max-width:734px){.ts-h{font-size:calc((100vw - 2*var(--pad,24px))/4.95)}}
/* „Teil für Teil“: die Bauteil-Symbole erscheinen nicht mehr animiert (stehen sofort da, alle Geräte); nur die Buchstaben fliegen noch ein → der festgesetzte Abschnitt ist kürzer (240vh statt 320/300vh) */
.teil{height:200vh}
@media(max-width:820px){.teil{height:200vh}}
/* ===== Hannover-Block und FAQ auf die Schriftstufen der ganzen Seite (17.10.2026, Wunsch des Nutzers) =====
   „Hannover — 50 km“ = Abschnittsüberschrift B wie alle anderen (48/40/32 px, einzeilig), Text = Lead E, Button 17/600;
   Karte nur noch Gewicht 400/600; FAQ: Überschrift B, Untertext E, „Noch Fragen?“ = Fließtext 17/25, Fragen = Titel-Stufe, Antworten = Callout-Stufe F (wie die Texte unter den Überschriften in „Mehr als Durchpusten“ und „So funktioniert’s“) */
#ar-t,#ar-t b{font-size:var(--b-fs);letter-spacing:var(--b-ls);line-height:var(--b-lh)}
.area h2 .ar-br{display:none}
.area h2{white-space:normal}
.area .map text{font-weight:400}
.faq-c{font-size:17px;line-height:25px}
#fq p{font-size:var(--f-fs);font-weight:600;letter-spacing:var(--f-ls);line-height:var(--f-lh)}
/* Hannover-Block und FAQ nach Nutzerwunsch (17.10.2026): „Hannover — 50 km“ = Größe von „Bleib zu Hause.“ (Stufe D); Text unter der Überschrift und FAQ-Untertext = Stufe E wie „Wir beschränken uns nicht auf das einfache Durchpusten \u2026“ (600, hell); „Noch Fragen?“ ebenfalls Stufe E (600) */
#ar-t,#ar-t b{font-size:var(--d-fs);letter-spacing:var(--d-ls);line-height:var(--d-lh)}
.area .sub,.faq-s{font-weight:600}
.lt .faq-s{color:var(--lt-fg2)}
.faq-c{font-size:var(--e-fs);font-weight:600;letter-spacing:var(--e-ls);line-height:var(--e-lh)}
/* Handy: Hero-Leiste wie bei Apple („Ab 449 € · Kaufen“): Text links + blauer Button rechts in einer durchgehenden dunklen Leiste ganz unten im Hero (Höhe 72 px, Seitenabstand 24 px, Button 36 px hoch, 14 px) – statt der runden Kapsel unter der Überschrift */
@media(max-width:734px){
.hero-in{padding-bottom:calc(72px + 32px + env(safe-area-inset-bottom))}
.hero-cta{position:absolute;left:0;right:0;bottom:0;z-index:3;width:auto;margin:0;padding:18px var(--pad,24px) calc(18px + env(safe-area-inset-bottom));border-radius:0;background:#242426;-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:space-between;gap:10px}
.hero-cta .cta-t{padding:0;font-size:13px}
.hero-cta .cta-t b{font-size:14px}
.hero-cta .btn{flex:none;min-height:36px;padding:8px 15px;font-size:14px;font-weight:400;letter-spacing:-.016em}
}
@media(max-width:359px){.hero-cta .btn{padding:8px 12px}}
/* Touch-Geräte: Hover-Zustände bleiben nach dem Tippen hängen (Button wurde heller/größer) → dort neutralisieren */
@media(hover:none){
.btn:hover{transform:none}
.btn:not(.ghost):hover,.card .btn.ghost:hover,.lt .btn:hover{background:#0071e3}
.btn.ghost:hover{background:var(--fill);color:#fff}
.pc-g li:hover{transform:none}
.faq button:hover span{text-decoration:none}
}
/* Überschriften der Punkte in „Mehr als Durchpusten“ (Staub dämmt Wärme ein. …) = Stufe C wie „Der ganze Rechner, professionell gereinigt.“ (28/24/17 px, 600) */
.ib h3{font-size:var(--c-fs);font-weight:600;letter-spacing:var(--c-ls);line-height:var(--c-lh)}
/* ===== Feinschliff 17.10.2026: Ausreißer an ihre Gruppe angleichen (Audit aller Texte auf PC und Handy, Seite + Buchungsfenster) ===== */
.aw-c h3{font-size:var(--c-fs);font-weight:600;letter-spacing:var(--c-ls);line-height:var(--c-lh)}
.ts-cap{font-weight:600}
header nav a{font-size:var(--ty-c)}
.ok h3{font-size:var(--ty-s);font-weight:600;letter-spacing:-.015em;line-height:1.15}
.qsum b{font-weight:600}
#d3 small{font-size:var(--ty-c)}
.st .n{letter-spacing:-.029em}
.hero-cta .btn{font-weight:400}
/* Hero-Zeile „PROFESSIONELLE PC-REINIGUNG“ = Stufe E wie die Einleitungstexte (21 px PC / 19 px Handy, Zeichenabstand und Zeilenhöhe wie E); darf umbrechen, damit sie auf schmalen Handys nicht überläuft */
.hero .hero-sub{font-size:var(--e-fs);letter-spacing:var(--e-ls);line-height:var(--e-lh);white-space:normal}
.nw{white-space:nowrap}
/* Handy: Hero-Zeile „PROFESSIONELLE PC-REINIGUNG“ kleiner (Label-Stufe 15,5 px statt 19 px; auf Wunsch des Nutzers) */
@media(max-width:734px){.hero .hero-sub{font-size:var(--ty-x);line-height:1.3}}
/* Hero-Zeile wieder in Großbuchstaben (alle Geräte; am 18.10.2026 kurz ohne Großbuchstaben, auf Wunsch des Nutzers zurückgenommen) */
.hero .hero-sub{text-transform:uppercase}
/* Hero-Video stärker abgedunkelt (vorher Abdunklung 45 %, jetzt 68 %) */
.hero .hi::after{background:rgba(0,0,0,.4)}
/* Hero-Leiste/Kapsel: Text „Express. Noch heute.“ einzeilig, überall 14 px/600 */
.hero-cta .cta-t b{font-size:14px}
/* Handy: „Bis ins Detail.“ größer (ca. 50 px bei 390 px, einzeilig, folgt der Breite; Wunsch des Nutzers, erst 56 px, dann etwas kleiner; vorher 40 px nach Apple) */
@media(max-width:734px){.hero h1.slogan{font-size:calc((100vw - 2*var(--pad,24px))/6.8);line-height:1.05;letter-spacing:-.01em}}
/* Hero-Zeile mit Logo-Zeichen davor (wie das Apple-Logo vor „WATCH SERIES 12“ bei Apple); Zeichen = Favicon-Logo, folgt der Textfarbe und -größe */
.hero-sub .mk{display:inline-block;width:1.2em;height:1.2em;fill:currentColor;vertical-align:-.26em;margin-right:.4em}
/* Handy: Hero-Zeile „PROFESSIONELLE PC-REINIGUNG“ = Größe des Textes in der Leiste („Express. Noch heute.“), 14 px */
@media(max-width:734px){.hero .hero-sub{font-size:14px;line-height:1.3}}
/* Absatz unter „Das Ergebnis.“ (aus „Mehr als Durchpusten“ verschoben, 18.10.2026): Einleitungstext-Stil (Stufe E, dunkel), begrenzte Zeilenlänge */
p.stats-p{margin:clamp(16px,2vw,24px) 0 0;max-width:60ch}
/* „Professionelle Reinigung heißt nicht nur …“ (direkt nach der Überschrift in „Mehr als Durchpusten“): dasselbe Grau wie der Hannover-Text (18.10.2026, Wunsch des Nutzers); überstimmt die Regel .lt .il h2+p */
.lt .il h2+p.lead{color:var(--lt-m2)}
/* „Das Ergebnis.“ (Variante 1, 18.10.2026, Wunsch des Nutzers): Überschrift links, Absatz rechts daneben, darunter die vier Statistik-Karten in einer Reihe (bis 1100 px 2×2, ab 560 px einspaltig); am Handy Überschrift und Absatz untereinander */
.res{margin-top:clamp(56px,7vw,100px)}
.res-t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(16px,3vw,48px);align-items:start}
.res .stats-h{margin:0}
.res-t p.stats-p{margin:0;max-width:60ch}
.res .stats{margin:clamp(32px,4vw,56px) 0 0}
@media(max-width:820px){.res-t{grid-template-columns:1fr;gap:clamp(16px,2vw,24px)}}
/* Kleine Barrierefreiheits-Korrekturen (Detektor-Lauf 25.10.2026, Wunsch des Nutzers): (1) Wochentage im Kalender waren #636366 auf #1c1c1e (2,8:1), jetzt --m (#8e8e93, ca. 5:1); (2) Absätze in „Mehr als Durchpusten“/„So funktioniert’s“ und FAQ-Antworten am Handy: Zeilenhöhe 18,2 px statt 18 px (Faktor 1,3, Apple-Maß 14/18 praktisch unverändert); (3) Footer-Links (15 px hoch) bekommen eine unsichtbare Trefferfläche von etwa 45 px Höhe, das Aussehen bleibt */
.cw span{color:var(--m)}
@media(max-width:734px){.ib p,.st p,#fq p{line-height:1.3}}
.fb a{position:relative}
.fb a::after{content:"";position:absolute;inset:-15px -8px}
/* Kopfzeile (nur Desktop; bis 1024 px blendet die ältere Regel `.hd .btn{display:none}` ihn aus): Button „Termin anfragen“ erscheint nach dem Hero (Klasse .cta, siehe Buchungsleisten-Block in script.js). Bewusst ohne opacity, transform und Übergang: bei `backdrop-filter` an der Kopfzeile zeichnete Safari sonst zeitweise ein schwarzes Rechteck statt des Textes (Meldung des Nutzers 25.10.2026) */
.hd .hd-cta{margin-left:28px;min-height:30px;padding:0 14px;font-size:13px;font-weight:400;letter-spacing:-.01em;white-space:nowrap;visibility:hidden;transition:none;transform:none}
header.cta .hd .hd-cta{visibility:visible}
.hd .hd-cta:hover{transform:none}
/* Karte am Handy: bis an den Rand und größere Schrift (Städte 17, Ringe 13 Karteneinheiten ≈ 11 px bzw. 9 px bei 375 px), vorher ≈ 8,7 px und 6,7 px; geprüft, dass sich die Beschriftungen nicht überlappen */
@media(max-width:734px){
.area .map{width:calc(100% + 2*var(--pad));max-width:none}
.area .map text{font-size:17px}
.area .map text.rl{font-size:13px}
.area .map text[style]{font-size:17px!important}
}
/* Buchungsfenster: Korrekturen nach der Analyse (25.10.2026, Wunsch des Nutzers): × hat wieder einen sichtbaren Tastaturfokus und eine Trefferfläche von 44 px (Kreis bleibt 34 px), Monatspfeile ebenfalls 44 px */
.dx::after{content:"";position:absolute;inset:-5px}
.dx:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ch button{position:relative}
.ch button::after{content:"";position:absolute;inset:-2px}
/* Gewählter Tag / gewählte Uhrzeit bleibt blau: die Regel `.tsl button:hover:not(:disabled)` (Spezifität 0,3,1) schlug `[aria-pressed=true]` (0,2,1), sodass der Knopf unter der Maus bzw. auf dem Handy nach dem Tippen (:hover bleibt hängen) grau blieb (Meldung des Nutzers 25.10.2026) */
#d1 .cd button[aria-pressed=true],#d1 .tsl button[aria-pressed=true]{background:#0071e3;color:#fff;border-color:transparent}
/* Fragen-Fenster, Variante 1 „Ruhig“ (26.10.2026, Wunsch des Nutzers): Titel nutzt die volle Breite (das × sitzt neben dem Fortschritt, der Titel beginnt darunter, vorher 52 px Rand rechts), Titel und Untertext mit `text-wrap:balance` statt `pretty` (kein Rest wie „besser aus.“), kürzere Texte in `QS` (script.js), Fenster 560 px */
#d0 .dw{width:min(560px,100%)}
#d0 .dpk{margin:0 0 10px;max-width:none;text-wrap:balance}
#d0 .aud{max-width:none;text-wrap:balance}
#d0 .qo{margin-top:26px}
/* Fenster-Kopf, Variante 1 „Linie an der Oberkante“ (26.10.2026, Wunsch des Nutzers): der Fortschritt (`.pg`, 5 Segmente) ist jetzt eine durchgehende 3-px-Linie an der Oberkante der Karte (absolut, bündig; die Segmente liegen ohne Lücke nebeneinander, der blaue Teil endet rechts gerundet), der Titel steht ganz oben und das × auf seiner Höhe (Position aus Padding und Titelzeile berechnet: `--dp` = Padding des Fensters, Titel 1,15 × `--ty-s`). Gilt für alle Buchungsfenster (#d0, #d1, #d2); #d3 hat keinen Fortschritt, nur das ×. Die ID-Selektoren überstimmen die älteren Regeln `#d0 .pg{margin-bottom}` */
.dw{--dp:clamp(24px,4vw,44px)}
.dlg .pg,#d0 .pg,#d1 .pg,#d2 .pg{position:absolute;left:0;right:0;top:0;margin:0;gap:0;height:3px;background:#2c2c2e}
.dlg .pg i{height:3px;border-radius:0;background:transparent}
.dlg .pg i.on:has(+ i:not(.on)),.dlg .pg i.on:last-child{border-radius:0 3px 3px 0}
.dlg .dx{top:calc(var(--dp) + (1.15*var(--ty-s) - 34px)/2);right:var(--dp)}
#d0 .dpk{margin:0 50px 10px 0}
#d2 .dtitle{margin-right:50px}

/* Zusammenfassung im Kontaktfenster, Variante 4 „Plättchen mit Datum“ (26.10.2026) */
#fm .sv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,16px)}
#d2c{display:block;width:58px;border-radius:12px;background:#1c1c1e;overflow:hidden;text-align:center}
#d2c b{display:block;background:#0071e3;color:#fff;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1;padding:5px 0}
#d2c i{display:block;font-style:normal;font-size:var(--ty-s);font-weight:600;line-height:1;padding:8px 0 9px;color:#f5f5f7}
#d2t{font-size:var(--ty-t);letter-spacing:-.01em;line-height:1.2;margin:0 0 2px}
#fm .dh.sm .aud{line-height:1.35}
#d2s span{display:block}
#d2s .xt{color:#aeaeb2;margin-top:0}
.spw{text-align:right;min-width:0}
#fm .sp{font-size:var(--ty-s);font-weight:600;letter-spacing:-.015em;line-height:1.1}
#d2n{display:block;margin-top:2px;font-size:var(--ty-c);color:#aeaeb2}
.sr-o{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:480px){#fm .sv{grid-template-columns:auto minmax(0,1fr);row-gap:12px}.spw{grid-column:1/-1;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;border-top:1px solid #3a3a3c;padding-top:12px}#d2n{margin-top:0}}
@media(max-width:359px){#fm .dh.sm{padding:14px}#fm .sv{column-gap:10px}#d2c{width:48px}#d2c i{padding:6px 0 7px}#fm .dh.sm .aud{font-size:var(--ty-x)}.da2 .btn{min-width:0;flex:1 1 auto}}
/* Zusatzfragen im Stil des Apple-Konfigurators (26.10.2026, Variante 1): Antworten als schmale Kacheln untereinander, Name links, Preis rechts; gewählt = blaue 2-px-Linie (ohne Füllung und Haken), keine „+ 0 €“-Zeile. Gemessen auf apple.com/de/shop/buy-watch: Radius 12, Linie 1 px, gewählt 2 px, Abstand 14 */
#d0 .qo{grid-template-columns:1fr;gap:14px}
#d0 .qt{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid #6e6e73;border-radius:12px;background:transparent;transition:border-color .2s,box-shadow .2s}
#d0 .qt .ql{text-wrap:wrap}
#d0 .qt small{flex:none;padding:4px 10px;border-radius:999px;background:rgba(10,132,255,.16);font-size:var(--ty-c);font-weight:600;line-height:1.2;color:#4da3ff}
@media(hover:hover){#d0 .qt:not(.on):hover{border-color:#98989d}}
#d0 .qt.on{border-color:#0a84ff;box-shadow:0 0 0 1px #0a84ff;background:transparent}
@media(max-width:520px){#d0 .qt{padding:16px 18px}}

/* Antworten „Ja groß, Nein leise“ (26.10.2026, Variante 3): „Ja“ ist die große Kachel mit Nutzen-Zeile (.qx) und Aufpreis-Plakette, die Ablehnung (.qn) eine niedrige, graue Kachel ohne Zusatzzeile; die Frage nach dem Ort hat zwei gleichwertige Kacheln (keine Ablehnung) */
#d0 .qx{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left}
#d0 .qs{font-size:var(--ty-c);font-weight:400;line-height:1.3;color:#a1a1a6;text-wrap:balance}
#d0 .qt.qn{min-height:44px;padding-top:0;padding-bottom:0;border-color:#48484a}
#d0 .qt.qn .ql{font-size:var(--ty-c);font-weight:400;color:#a1a1a6;transition:color .2s}
#d0 .qt.qn.on{border-color:#0a84ff}
#d0 .qt.qn.on .ql{color:#f5f5f7}
@media(hover:hover){#d0 .qt.qn:not(.on):hover{border-color:#6e6e73}}

/* „Ja“-Kachel als kurze Liste (27.10.2026): Name + Aufpreis in einer Zeile (.qh), darunter je Zeile ein blauer Haken (.qs::before) – die Liste nutzt die volle Kachelbreite, auch neben dem Aufpreis */
#d0 .qx{flex:1 1 auto;gap:4px}
#d0 .qh{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:2px}
#d0 .qs{display:flex;align-items:flex-start;gap:7px}
#d0 .qs::before{content:"";flex:none;width:12px;height:12px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%234da3ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* Zusammenfassungskarte, Variante 13 „Zwei Zonen“ (27.10.2026, Wunsch des Nutzers; aus 20 Varianten gewählt): oben Datumsplättchen, Paket, Zeit und Summe, darunter hinter einer feinen Linie die Zeile „Inklusive“ mit je einem Symbol für Kabel, Zubehör, Abholung (nur wenn Extras gewählt sind). Die frühere Zeile „Kabel, Zubehör“ unter der Uhrzeit und „inkl. Extras“ unter der Summe entfallen; „Dein Preis“ (#d2n) erscheint nur am Handy links neben der Summe */
#d2x{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:clamp(14px,2.2vw,18px);padding-top:clamp(14px,2.2vw,18px);border-top:1px solid #3a3a3c}
#d2x[hidden]{display:none}
#d2x .inl{font-size:var(--ty-c);color:#aeaeb2}
#d2xl{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:0;list-style:none}
#d2xl li{display:flex;align-items:center;gap:8px;font-size:var(--ty-c);font-weight:600;color:#f5f5f7}
#d2xl .ic{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:#3a3a3c}
#d2xl .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#d2n{display:none}
@media(max-width:480px){#d2n{display:block}}

/* Zeile unter „Kostenlos“ (27.10.2026, Wunsch des Nutzers): zwei kurze Sätze wie bei Apple, „50 km um Hannover“ hervorgehoben (dunkel, 600, nicht umbrechend) */
#schnell .aw-s b{font-weight:600;color:#1d1d1f}


/* Kopfzeile am Desktop (29.10.2026, Wunsch des Nutzers): das Menü steht am rechten Rand; erscheint „Termin anfragen“, rutscht es sanft nach links und macht dem Knopf Platz. Der Knopf selbst bleibt ohne opacity/transform (Safari-Fehler mit backdrop-filter), er sitzt absolut rechts. --ctaw setzt script.js (Breite des Knopfes) */
@media(min-width:1025px){
.hd{position:relative}
.hd .hd-cta{position:absolute;right:var(--pad);top:calc(50% - 15px);margin:0}
header nav{margin-left:auto;margin-right:0;transition:margin-right .45s cubic-bezier(.25,.1,.25,1)}
header.cta nav{margin-right:calc(var(--ctaw,124px) + 28px)}
}
@media(min-width:1025px) and (prefers-reduced-motion:reduce){header nav{transition:none}}

/* Kontaktfenster am Handy wie am PC (29.10.2026, Wunsch des Nutzers): Reihenfolge Vorname | Nachname, E-Mail, Mobiltelefon, dann Postleitzahl | Straße | Hausnummer in einer Zeile (bis 380 px: PLZ | Straße, darunter Hausnummer); Preis rechts in der Karte wie am PC (ohne Zeile „Dein Preis“) */
@media(max-width:680px){
#fm .ff{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#fm .ff>.f:nth-child(3),#fm .ff>.f:nth-child(4){grid-column:1/-1}
#fm .sa{grid-column:1/-1;display:grid;grid-template-columns:92px minmax(0,1fr) 92px}
#fm .sa .f-str{grid-column:auto}
#fm .sv{grid-template-columns:auto minmax(0,1fr) auto;row-gap:0}
#fm .spw{grid-column:auto;display:block;border-top:0;padding-top:0;text-align:right}
#fm #d2n{display:none}
}
@media(max-width:480px){#fm #d2t{font-size:17px;overflow-wrap:normal}}
@media(max-width:380px){
#fm .sa{grid-template-columns:96px minmax(0,1fr)}
#fm .sa>.f:last-child{grid-column:1/-1}
#fm .sv{grid-template-columns:auto minmax(0,1fr);row-gap:12px}
#fm .spw{grid-column:1/-1;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;border-top:1px solid #3a3a3c;padding-top:12px}
#fm #d2n{display:block;margin-top:0}
}

/* Raster wie apple.com/de/apple-watch-series-12 (29.10.2026, gemessen): Inhalt 87,5 % der Breite (Rand 6,25 %), am PC höchstens 1260 px, bis 734 px höchstens 420 px; Abschnitte mit Überschrift oben/unten 144 / 120 / 112 px (PC ≥1069 / Tablet / Handy ≤734) */
:root{--pad:max(6.25vw,calc((100vw - 1260px)/2));--sec:144px}
@media(max-width:1068px){:root{--pad:6.25vw;--sec:120px}}
@media(max-width:734px){:root{--pad:max(6.25vw,calc((100vw - 420px)/2));--sec:112px}}
section.ba-sec,#pflege,#ablauf,section.area,#faq{padding-top:var(--sec)!important;padding-bottom:var(--sec)!important}

/* Hero am Handy, Variante 2 (29.10.2026, Wunsch des Nutzers; aus sechs Entwürfen): Text oben mittig unter der Kopfzeile (Zeile, Überschrift, blauer Link „Termin anfragen ›“), das Video füllt den Rest; die Leiste unten („Express. Noch heute.“ + Knopf) entfällt */
@media(max-width:734px){
.hero .hi{align-items:center!important}
.hero .hero-in{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:center!important;text-align:center!important;padding-top:calc(56px + env(safe-area-inset-top))!important;padding-bottom:0!important}
.hero .hero-txt{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero .hero-sub{justify-content:center;text-align:center}
.hero h1.slogan{text-align:center}
.hero .hero-cta{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important;min-height:0!important;background:none!important;padding:0!important;margin:14px 0 0!important;display:flex!important;justify-content:center!important;border:0!important;box-shadow:none!important}
.hero .hero-cta .cta-t{display:none!important}
.hero .hero-cta .btn{background:none!important;color:#2997ff!important;padding:0!important;min-height:0!important;height:auto!important;font-size:17px!important;font-weight:400!important;letter-spacing:-.022em}
.hero .hero-cta .btn::after{content:"\00a0›"}
}

/* Hero am Handy, Knopf-Variante 4 (29.10.2026, Wunsch des Nutzers): blaue Kapsel „Termin anfragen“ + umrandete Kapsel „Ab 80 €“, darunter klein „Express. Noch heute.“; am PC ist „Ab 80 €“ ausgeblendet (Preis steht im HTML – bei Preisänderung anpassen) */
.hero .hero-cta .hc-p{display:none}
@media(max-width:734px){
.hero .hero-cta{flex-wrap:wrap!important;gap:8px!important;margin-top:20px!important}
.hero .hero-cta .btn{display:inline-flex!important;align-items:center;background:#0071e3!important;color:#fff!important;border:1px solid #0071e3!important;border-radius:999px!important;padding:0 16px!important;height:36px!important;min-height:36px!important;font-size:14px!important;font-weight:400!important;letter-spacing:-.016em}
.hero .hero-cta .btn::after{content:none!important}
.hero .hero-cta .btn.hc-p{background:none!important;color:#2997ff!important}
.hero .hero-cta .cta-t{display:block!important;order:3;flex-basis:100%;margin:6px 0 0!important;font-size:13px!important;color:#a1a1a6!important;text-align:center}
.hero .hero-cta .cta-t b{font-weight:400!important;color:#a1a1a6!important}
}

/* Hero-Zeile ohne Logo-Zeichen (29.10.2026, Wunsch des Nutzers): „PROFESSIONELLE PC-REINIGUNG“ in einem Gewicht (600) mit etwas Laufweite */
.hero .hero-sub b,.hero .hero-sub .nw{font-weight:600}
.hero .hero-sub{letter-spacing:.06em;gap:0}

/* Hero am PC/Tablet, Variante 2 (29.10.2026, Wunsch des Nutzers; aus vier Entwürfen): wie am Handy, aber unten mittig – Zeile, Überschrift, blaue Kapsel „Termin anfragen“ + „Ab 80 €“, darunter klein „Express. Noch heute.“ (vorher Text links unten und eine Kapsel rechts) */
@media(min-width:735px){
.hero .hi{align-items:flex-end!important}
.hero .hero-in{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;text-align:center!important;padding-bottom:clamp(56px,9vh,110px)!important;width:100%}
.hero .hero-txt{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.hero .hero-sub{justify-content:center;text-align:center}
.hero h1.slogan{text-align:center}
.hero .hero-cta{position:static!important;inset:auto!important;transform:none!important;background:none!important;padding:0!important;margin:28px 0 0!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:12px!important;height:auto!important;min-height:0!important;border-radius:0!important}
.hero .hero-cta .btn,.hero .hero-cta .hc-p{display:inline-flex!important;align-items:center;justify-content:center;background:#0071e3!important;color:#fff!important;border:1px solid #0071e3!important;border-radius:999px!important;padding:0 22px!important;height:44px!important;min-height:44px!important;font-size:17px!important;font-weight:400!important;letter-spacing:-.022em;transform:none!important}
.hero .hero-cta .btn.hc-p{background:none!important;color:#2997ff!important}
.hero .hero-cta .cta-t{display:block!important;order:3;flex-basis:100%;margin:4px 0 0!important;font-size:14px!important;color:#a1a1a6!important;text-align:center}
.hero .hero-cta .cta-t b{font-weight:400!important;color:#a1a1a6!important}
}

/* Hero am PC/Tablet: Text senkrecht in der Mitte (29.10.2026, Wunsch des Nutzers „nach oben in die Mitte“) */
@media(min-width:735px){
.hero .hi{align-items:center!important}
.hero .hero-in{justify-content:center!important;padding-bottom:0!important;padding-top:56px!important}
}

/* Hero am PC/Tablet: Überschrift größer (29.10.2026, Wunsch des Nutzers, Verhältnis wie im Entwurf D – Überschrift ca. 1,6× so breit wie die Zeile darüber) */
@media(min-width:735px){.hero h1.slogan{font-size:clamp(72px,7.8vw,124px)!important;line-height:1.04!important;letter-spacing:-.02em!important;white-space:nowrap}}

/* Hero-Zeile „PROFESSIONELLE PC-REINIGUNG“ größer (29.10.2026, Typografie: ca. 1/4 der Überschrift) – PC 28 px bei 1440, Tablet mind. 22 px, Handy 15 px */
@media(min-width:735px){.hero .hero-sub{font-size:clamp(22px,1.95vw,31px)!important;line-height:1.2!important;margin-bottom:0!important}.hero h1.slogan{margin-top:-.12em!important}}
@media(max-width:734px){.hero .hero-sub{font-size:15px!important;line-height:1.3!important}}

/* Hero: Abstände nach Typografie (29.10.2026, Wunsch des Nutzers „zu viel Platz“) – Zeile → Großbuchstaben der Überschrift ≈ 0,2 × Überschrift, Grundlinie der Überschrift → Knöpfe ≈ 0,5 × Überschrift, Knöpfe → kleine Zeile ≈ 10 px */
@media(min-width:735px){.hero .hero-cta{margin-top:0!important}.hero .hero-cta .cta-t{margin-top:-2px!important}}
@media(max-width:734px){.hero h1.slogan{margin-top:-.2em!important}.hero .hero-cta{margin-top:-11px!important}.hero .hero-cta .cta-t{margin-top:2px!important}}

/* ===== Apple-Stil wie apple.com/de/macbook-pro (29.10.2026, Wunsch des Nutzers „Stil, Animationen und Übergänge wie bei Apple“) ===== */
/* 1) Sanftes Einblenden: 24 px nach oben + Deckkraft, Apple-Kurve, Elemente nacheinander (Verzögerung setzt script.js) */
.rv{transform:translateY(24px);transition:opacity .8s cubic-bezier(.33,1,.68,1),transform 1s cubic-bezier(.33,1,.68,1)}
.rv.i{transform:none}
/* 2) Hero: Titel oben mittig (normale Schreibweise wie „MacBook Pro mit …“), darunter der große Satz und klein „Express. Noch heute.“; die Knöpfe stecken in der schwebenden Kapsel */
.hero .hi{align-items:flex-start!important}
.hero .hero-in{justify-content:flex-start!important;padding-top:calc(56px + env(safe-area-inset-top) + clamp(36px,7vh,88px))!important;padding-bottom:0!important}
.hero .hero-sub{text-transform:none!important;letter-spacing:-.003em!important;font-size:clamp(21px,2.2vw,32px)!important;line-height:1.15!important;margin-bottom:.15em!important}
.hero .hero-sub b,.hero .hero-sub .nw{font-weight:600!important}
.hero h1.slogan{margin-top:0!important}
.hero .hero-cta{margin-top:2px!important;row-gap:0!important}
.hero .hero-cta .btn{display:none!important}
.hero .hero-cta .cta-t{margin-top:0!important;font-size:clamp(14px,1.1vw,17px)!important}
/* 3) Schwebende Kapsel unten mittig auf allen Geräten (wie „Vorbestellen“): links „Komplettreinigung · Ab 80 €“ (Handy nur der Preis), rechts blauer Knopf */
.bb,.bb.on{display:flex!important;position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(20px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:calc(100vw - 32px);align-items:center;gap:16px;padding:6px 6px 6px 20px!important;border:0!important;border-radius:999px!important;background:rgba(36,36,38,.78)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:45}
.bb{transform:translate(-50%,calc(100% + 40px))!important;opacity:0;visibility:hidden;transition:transform .6s cubic-bezier(.33,1,.68,1),opacity .4s ease,visibility 0s .6s!important}
.bb.on{transform:translate(-50%,0)!important;opacity:1;visibility:visible;transition:transform .6s cubic-bezier(.33,1,.68,1),opacity .4s ease,visibility 0s!important}
.bb-t{display:flex!important;flex-direction:row!important;align-items:baseline;gap:8px!important;white-space:nowrap}
.bb-t b{font-size:15px!important;font-weight:600!important}
.bb-t span{font-size:15px!important;color:#a1a1a6!important}
.bb .btn{min-height:40px!important;height:40px;padding:0 18px!important;font-size:15px!important;font-weight:400!important;white-space:nowrap}
@media(max-width:600px){.bb-t b{display:none}}
@media(prefers-reduced-motion:reduce){.bb,.bb.on{transition:none!important}}
@media(max-width:734px){.hero .hero-cta{margin-top:-10px!important}}

/* Galerie-Steuerung: Einblenden wie bei Apple (29.10.2026) – Kapsel wächst aus einem Kreis, Punkte erscheinen danach, Pause gleitet von links heran, Pfeile blenden ein */
.hl-nav.pre .hl-dots{max-width:48px;overflow:hidden;opacity:0;transition:max-width .9s cubic-bezier(.33,1,.68,1),opacity .4s ease}
.hl-nav.pre .hl-dot{opacity:0;transition:opacity .5s ease .45s}
.hl-nav.pre .hl-pp{opacity:0;transform:translateX(-24px);transition:opacity .5s ease .2s,transform .8s cubic-bezier(.33,1,.68,1) .2s,background .3s}
.hl-nav.pre.in .hl-dots{max-width:420px;opacity:1}
.hl-nav.pre.in .hl-dot{opacity:1}
.hl-nav.pre.in .hl-pp{opacity:1;transform:none}

/* Hero-Text bleibt beim Scrollen ruckelfrei stehen: position:sticky statt JS-Verschiebung (läuft im Compositor, kein Zittern am Handy); .hi mit overflow:clip statt hidden, sonst greift sticky nicht */
.hero .hi{overflow:clip!important}
.hero .hero-in{position:sticky!important;top:0;will-change:opacity}

/* Hero-Text senkrecht in der Mitte (29.10.2026, Wunsch des Nutzers) und beim Scrollen fest an seiner Stelle: .hero-in ist fixiert (bildschirmhoch, Inhalt mittig unter der Kopfzeile), die folgenden Abschnitte schieben sich darüber; script.js blendet ihn aus und setzt danach visibility:hidden */
.hero .hero-in{position:fixed!important;top:0;left:0;right:0;height:100vh;height:100svh;box-sizing:border-box;justify-content:center!important;padding-top:calc(56px + env(safe-area-inset-top))!important;padding-bottom:0!important;z-index:3;pointer-events:none}
.stk>section:not(.hero),.stk>.lt,.stk>div:not(:first-child){position:relative;z-index:4}

/* Hero, Variante 2 mit Knöpfen aus Variante 1 (29.10.2026, Wunsch des Nutzers): groß zweizeilig „Professionelle / PC-Reinigung“, darunter leise grau „Bis ins Detail“, blauer Knopf „Termin anfragen“ (öffnet die Buchung) + Link „Mehr erfahren ›“, darunter klein „Ab 80 € · Express noch heute“. Alles mittig. Die schwebende Kapsel #bb ist entfernt */
.hero .hero-sub{font-size:clamp(40px,5.6vw,80px)!important;line-height:1.05!important;letter-spacing:-.02em!important;font-weight:600!important;text-transform:none!important;margin:0!important}
.hero .hero-sub b{display:block}
.hero h1.slogan{font-size:clamp(21px,2.2vw,32px)!important;line-height:1.2!important;letter-spacing:.004em!important;font-weight:600!important;color:#a1a1a6!important;white-space:normal!important;margin-top:.45em!important}
.hero h1.slogan .w1{color:inherit!important}
.hero .hero-cta{pointer-events:auto;margin-top:clamp(22px,2.4vw,32px)!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:0 24px!important}
.hero .hero-cta .btn{display:inline-flex!important;align-items:center;justify-content:center;background:#0071e3!important;color:#fff!important;border:0!important;border-radius:999px!important;height:44px!important;min-height:44px!important;padding:0 22px!important;font-size:17px!important;font-weight:400!important;letter-spacing:-.022em;cursor:pointer}
.hero .hero-cta .hc-l{color:#2997ff;font-size:17px;letter-spacing:-.022em;text-decoration:none}
.hero .hero-cta .hc-l::after{content:"\00a0›"}
@media(hover:hover){.hero .hero-cta .hc-l:hover{text-decoration:underline}.hero .hero-cta .btn:hover{background:#0077ed!important}}
.hero .hero-cta .cta-t{display:block!important;order:3;flex-basis:100%;margin:14px 0 0!important;font-size:14px!important;color:#86868b!important;text-align:center}
.hero .hero-cta .cta-t b{font-weight:400!important;color:#86868b!important}
@media(max-width:734px){.hero .hero-cta .btn{height:40px!important;min-height:40px!important;padding:0 18px!important;font-size:15px!important}.hero .hero-cta .hc-l{font-size:15px}.hero .hero-cta .cta-t{font-size:13px!important}}
.bb,.bb.on{display:none!important}

/* Hero, Variante 4 mit Knöpfen aus Variante 1 (29.10.2026, Korrektur des Nutzers – gemeint war Variante 4): kleine graue Zeile in Versalien, „Bis ins Detail“ groß, zweizeiliger Einleitungstext, blauer Knopf + Link „Mehr erfahren ›“; die Preiszeile entfällt */
.hero .hero-sub{font-size:clamp(13px,1.2vw,17px)!important;line-height:1.3!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#a1a1a6!important;font-weight:600!important}
.hero .hero-sub b{display:inline}
.hero h1.slogan{font-size:clamp(48px,6.1vw,88px)!important;line-height:1.05!important;letter-spacing:-.02em!important;color:#f5f5f7!important;margin-top:.18em!important;white-space:nowrap!important}
.hero .hero-lead{margin:.7em 0 0;font-size:clamp(17px,1.6vw,24px);line-height:1.35;letter-spacing:.009em;font-weight:400;color:#d2d2d7;text-align:center}
.hero .hero-cta .cta-t{display:none!important}
@media(max-width:734px){.hero h1.slogan{font-size:calc((100vw - 2*var(--pad))/6.8)!important}}
/* Hero-Text scrollt normal mit der Seite (29.10.2026, Wunsch des Nutzers: kein Stehenbleiben und Ausblenden mehr), bleibt aber mittig */
.hero .hero-in{position:relative!important;top:auto!important;left:auto!important;right:auto!important;pointer-events:auto!important}

/* Hero-Video folgt dem Scrollen (31.10.2026): das Hero ist 4 Bildschirme hoch, Video und Text kleben oben, bis das Video durchgelaufen ist */
section.hero{height:550svh!important;min-height:0!important}
/* Sequenz (31.10.2026): Text auf Schwarz -> Text blendet aus, Bildfolge ein -> Bildfolge laeuft -> Bildfolge blendet in Schwarz aus; Deckkraft setzt script.js */
.hero .hi{background:#000}
.hv{animation:none!important;opacity:0}
.hero .hero-in{will-change:opacity,transform}
.hero .hi{position:sticky!important;top:0!important;height:100svh;min-height:0!important}
@media(prefers-reduced-motion:reduce){section.hero{height:auto!important;min-height:100svh!important}.hero .hi{position:relative!important;height:auto;min-height:100svh!important}}
/* Text liegt nicht mehr über den Bildern, die Abdunklung über der Bildfolge entfällt */
.hero .hi::after{display:none!important}
/* Hero (01.11.2026): Einleitungstext ausgewogen umbrechen (am Handy steht „PC.“ sonst allein) */
.hero .hero-lead{text-wrap:balance}
/* Hero-Zeile „PROFESSIONELLE PC-REINIGUNG“ (01.11.2026, Meldung des Nutzers: kleiner als der Einleitungstext): gleiche Größe wie .hero-lead, hell, damit die Hierarchie stimmt (Zeile ≥ Text) */
.hero .hero-sub{font-size:clamp(17px,1.6vw,24px)!important;line-height:1.25!important;letter-spacing:.06em!important;color:#f5f5f7!important}
.hero .hero-sub b,.hero .hero-sub span{font-weight:600!important;color:inherit!important}
@media(max-width:734px){.hero .hero-sub{font-size:17px!important;letter-spacing:.04em!important}}
/* Hero-Einleitungstext grau (01.11.2026, Variante 2 des Nutzers): nur Zeile und Überschrift weiß, der Text darunter tritt zurück */
.hero .hero-lead{color:#86868b!important}
/* Hero wie apple.com/de/macbook-pro/proled-xdr-display (01.11.2026, Wunsch des Nutzers; dort gemessen 1440/1024/375 px):
   Text oben mittig (Zeile beginnt ca. 141 px unter der Fensterkante), Zeile in normaler Schreibweise 32/36 · 21/25 · 19/23, 600, +.004em, weiß;
   Überschrift direkt darunter (8 px, Handy 6 px) 80/84 · 64/68 · 40/44, 600; Text 24 px darunter, 14/18, 400; Knöpfe 24 px darunter */
.hero .hero-in{align-items:center!important;justify-content:flex-start!important;padding-top:141px!important}
.hero .hero-sub{text-transform:none!important;font-size:32px!important;line-height:36px!important;letter-spacing:.004em!important;color:#f5f5f7!important;margin:0!important;white-space:normal!important}
.hero .hero-sub b,.hero .hero-sub span{font-weight:600!important;letter-spacing:inherit!important}
.hero h1.slogan{font-size:80px!important;line-height:84px!important;letter-spacing:-.015em!important;margin:8px 0 0!important}
.hero .hero-lead{font-size:14px!important;line-height:18px!important;font-weight:400!important;letter-spacing:-.016em!important;margin:24px 0 0!important}
.hero .hero-cta{margin-top:24px!important}
@media(max-width:1068px){.hero .hero-sub{font-size:21px!important;line-height:25px!important;letter-spacing:.011em!important}.hero h1.slogan{font-size:64px!important;line-height:68px!important;letter-spacing:-.009em!important}}
@media(max-width:734px){.hero .hero-in{padding-top:160px!important}.hero .hero-sub{font-size:19px!important;line-height:23px!important;letter-spacing:.012em!important}.hero h1.slogan{font-size:40px!important;line-height:44px!important;letter-spacing:0!important;margin-top:6px!important}}
.hero .hero-txt{gap:0!important}.hero h1.slogan .ln{padding:0!important}
/* Text liegt seit 01.11.2026 wieder über der Bildfolge: Abdunklung wieder an, damit Zeile, Überschrift und grauer Text lesbar bleiben */
.hero .hi::after{display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:rgba(0,0,0,.5)!important}
.hero .hero-in{z-index:3!important}
.hero .hero-lead{color:#c7c7cc!important}.hero .hero-txt{text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* Hero-Text unten statt oben (01.11.2026, Wunsch des Nutzers): Block unten mittig über der Bildfolge */
.hero .hero-in{justify-content:flex-end!important;padding-top:0!important;padding-bottom:calc(clamp(56px,9vh,104px) + env(safe-area-inset-bottom))!important}
@media(max-width:734px){.hero .hero-in{padding-top:0!important;padding-bottom:calc(48px + env(safe-area-inset-bottom))!important}}
/* Hero-Text senkrecht mittig (01.11.2026, Wunsch des Nutzers „по центру“): Mitte des Bereichs unter der Kopfzeile */
.hero .hero-in{justify-content:center!important;padding-top:57px!important;padding-bottom:0!important}
@media(max-width:734px){.hero .hero-in{padding-top:57px!important;padding-bottom:0!important}}
/* Zeile „PROFESSIONELLE PC-REINIGUNG“ wieder in Versalien mit Laufweite (01.11.2026, Wunsch des Nutzers, Screenshot) */
.hero .hero-sub{text-transform:uppercase!important;font-size:clamp(17px,1.6vw,24px)!important;line-height:1.25!important;letter-spacing:.06em!important;color:#f5f5f7!important}
@media(max-width:734px){.hero .hero-sub{font-size:17px!important;letter-spacing:.04em!important}}
/* „Teil für Teil“ im Apple-Stil (01.11.2026): ganze Zeile skaliert/entschärft sich, die Buchstaben selbst bewegen sich nicht mehr */
.ts-h{will-change:transform,opacity,filter;transform-origin:50% 50%}.ts-h .c{will-change:auto}
@media(max-width:734px){.hero h1.slogan,.hero h1.slogan .w1,.hero h1.slogan .ln{white-space:normal!important;text-wrap:balance}}
/* Abdunklung stärker (01.11.2026, Meldung des Nutzers: Text auf hellen Stellen schlecht lesbar) */
.hero .hi::after{background:rgba(0,0,0,.66)!important}
/* Hero-Block etwas tiefer als die Mitte (01.11.2026, Wunsch des Nutzers „Text etwas tiefer“) */
.hero .hero-in{padding-top:calc(57px + 10vh)!important}@media(max-width:734px){.hero .hero-in{padding-top:calc(57px + 8vh)!important}}
/* Ladebildschirm (01.11.2026, Wunsch des Nutzers: kurz vorladen, damit beim Scrollen nichts ruckelt): schwarz, Logo, dünner Fortschrittsbalken; script.js blendet ihn aus, wenn die Hero-Bildfolge geladen ist (spätestens nach 8 s) */
#pl{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#000;transition:opacity .7s cubic-bezier(.33,1,.68,1),visibility 0s linear .7s}
.pl-on #pl{display:flex}
html.pl-on,html.pl-on body{overflow:hidden}
#pl.out{opacity:0;visibility:hidden}
.pl-lg{display:block;width:clamp(120px,12vw,168px);aspect-ratio:1180/128;background:url(../images/logo.png) no-repeat center/contain}
.pl-b{display:block;width:clamp(120px,12vw,168px);height:2px;border-radius:2px;background:#2c2c2e;overflow:hidden}
.pl-b b{display:block;height:100%;background:#f5f5f7;transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .3s ease}
@media(prefers-reduced-motion:reduce){#pl{transition:none}}
/* Übergang Hero → „Wieder wie neu“ (01.11.2026, Wunsch des Nutzers: „aus der Dunkelheit soll der Block erscheinen“): „Wieder wie neu“ und die Galerie liegen über der letzten Bildschirmhöhe des Heros; die Bildfolge blendet in Schwarz aus, gleichzeitig blenden die beiden Abschnitte ein (Deckkraft setzt script.js) */
@media(prefers-reduced-motion:no-preference){
.stk>section.intro{margin-top:-100svh!important;position:relative;z-index:4}
.stk>section#highlights{position:relative;z-index:4}
.js .stk>section.intro,.js .stk>section#highlights{opacity:0}
}
/* Block „Leiser. Schneller. Kühler.“ (01.11.2026, Wunsch des Nutzers, Variante 3 für den PC; zuerst „Lauter. Langsamer. Heißer.“, dann auf Wunsch die Gegenteile): nach „Wieder wie neu“, eine breite Zeile, die Wörter leuchten beim Scrollen von links nach rechts auf (Farbe setzt script.js); darunter ein Satz */
section.sym{background:#111;padding:144px 0 120px;position:relative;z-index:4}
.sym-h{margin:0;font-weight:600;line-height:1.05;letter-spacing:-.02em;white-space:nowrap;font-size:min(104px,calc((100vw - 2*var(--pad))/13.2))}
.sym-h .sw{color:#3a3a3c}
.sym-p{margin:32px 0 0;font-size:21px;line-height:29px;letter-spacing:.011em;font-weight:600;color:#f5f5f7}
@media(max-width:1068px){section.sym{padding:120px 0 100px}}
@media(max-width:734px){section.sym{padding:112px 0 80px}.sym-h{white-space:normal;font-size:min(56px,calc((100vw - 2*var(--pad))/5.6))}.sym-h .sw{display:block}.sym-p{font-size:19px;line-height:27px;margin-top:24px}}
@media(prefers-reduced-motion:reduce){.sym-h .sw{color:#f5f5f7}}
/* „Leiser. Schneller. Kühler.“ mittig (01.11.2026, Wunsch des Nutzers) */
section.sym .wrap{text-align:center}
section.sym .sym-h,section.sym .sym-p{max-width:none!important;margin-left:auto!important;margin-right:auto!important}
/* Absatz unter „Leiser. Schneller. Kühler.“ grau, ausgewogen umbrochen (01.11.2026) */
section.sym .sym-p{color:#86868b;max-width:640px!important;text-wrap:balance}
/* Block „Teil für Teil“ entfernt (01.11.2026, Wunsch des Nutzers): der helle Bereich schiebt sich nicht mehr über ihn, sondern folgt normal */
.stack .stk>.lt{margin-top:0!important;box-shadow:none!important}
/* Überschieben (01.11.2026, Wunsch des Nutzers): „Bleib zu Hause“ (#schnell) rollt mit runden oberen Ecken und Schatten über die Paket-Karte (#leistungen), die stehen bleibt, sobald ihr unteres Ende den Bildschirmrand erreicht (top = --lnt aus script.js). Der helle Bereich .lt (Vorher/Nachher) folgt normal, ohne Überschieben, ohne Rundung und Schatten */
.stack .stk>.lt{margin-top:0!important;box-shadow:none!important;border-radius:0!important}
@media(prefers-reduced-motion:no-preference){
.stack .stk>section#leistungen{position:sticky!important;top:var(--lnt,0px)!important;z-index:1!important}
.stack .stk>section#schnell{position:relative!important;z-index:5!important;border-radius:clamp(24px,3vw,40px) clamp(24px,3vw,40px) 0 0!important;box-shadow:0 -40px 80px rgba(0,0,0,.45)}
}
/* Heller Bereich ohne Weiß (01.11.2026, Wunsch des Nutzers: „weißen Hintergrund durch das Grau von So funktioniert’\s ersetzen“): alle Abschnitte #f5f5f7; die weißen Karten (Statistik) bleiben weiß */
.lt #pflege,.lt .area,.lt #bewertungen,footer{background:var(--lt-gray0)!important}
/* Abstand „Leiser. Schneller. Kühler.“ → Paket-Karte kleiner (01.11.2026, Wunsch des Nutzers) */
section.sym{padding-bottom:48px!important}@media(max-width:734px){section.sym{padding-bottom:32px!important}}
section#leistungen{padding-top:32px!important}@media(max-width:734px){section#leistungen{padding-top:24px!important}}
/* Kein schwarzer Streifen über der stehenden Paket-Karte (01.11.2026, Meldung des Nutzers): #leistungen reicht mit seinem #111-Hintergrund eine Bildschirmhöhe nach oben (unter den Abschnitten darüber versteckt) und füllt die Lücke, wenn die Karte stehen bleibt */
@media(prefers-reduced-motion:no-preference){
.stack .stk>section#leistungen{margin-top:-100vh!important;padding-top:calc(100vh + 32px)!important}
}
@media(prefers-reduced-motion:no-preference) and (max-width:734px){
.stack .stk>section#leistungen{padding-top:calc(100vh + 24px)!important}
}
/* Heller Bereich einheitlich grau → zwischen den Abschnitten nur noch ein Abstand (01.11.2026, Meldung des Nutzers „großer Abstand“): unten kein Innenabstand, der Abstand kommt vom oberen Innenabstand des nächsten Abschnitts */
.lt .ba-sec,.lt #pflege,.lt #ablauf,.lt .area{padding-bottom:0!important}
/* Einheitlicher Rhythmus zwischen den Abschnitten (01.11.2026, Wunsch des Nutzers „alles in einem Stil, wie ein Profi“): Abstand Inhalt → nächste Überschrift überall = oberer Abschnittsabstand (144 / 120 / 112 px); dafür kein zusätzlicher unterer Innenabstand in Galerie und „Bleib zu Hause“, kein Zeilenabstand unter dem letzten Punkt von „Mehr als Durchpusten“ */
section#highlights{padding-bottom:0!important}
section#schnell{padding-bottom:0!important}
#pflege .ib:last-of-type{padding-bottom:0!important}
#ablauf .st:last-child{padding-bottom:0!important}
/* Vorher/Nachher mit neuen Fotos (01.11.2026): Seitenverhältnis der Fotos 2000×1116 (am Handy bleibt das quadratische Format aus den älteren Regeln) */
@media(min-width:736px){.ba{aspect-ratio:2000/1116}}
/* Vorher/Nachher als eigener dunkler Block direkt unter der Paket-Karte (01.11.2026, Wunsch des Nutzers). „Bleib zu Hause“ rollt jetzt über diesen Block (er bleibt stehen, top = --vgt aus script.js); die Paket-Karte scrollt wieder normal */
section.vgl{background:#111;padding:48px 0 120px;position:relative}
@media(max-width:1068px){section.vgl{padding:40px 0 100px}}
@media(max-width:734px){section.vgl{padding:32px 0 80px}}
@media(prefers-reduced-motion:no-preference){
.stack .stk>section#leistungen{position:relative!important;top:auto!important;z-index:4!important;margin-top:0!important;padding-top:32px!important}
.stack .stk>section.vgl{position:sticky!important;top:var(--vgt,0px)!important;z-index:1!important;margin-top:-100vh!important;padding-top:calc(100vh + 48px)!important}
}
@media(prefers-reduced-motion:no-preference) and (max-width:1068px){.stack .stk>section.vgl{padding-top:calc(100vh + 40px)!important}}
@media(prefers-reduced-motion:no-preference) and (max-width:734px){.stack .stk>section#leistungen{padding-top:24px!important}.stack .stk>section.vgl{padding-top:calc(100vh + 32px)!important}}
/* Vorher/Nachher wie bei Apple (01.11.2026, Wunsch des Nutzers, Vorbild iPhone-Kamera-Abschnitt): schwarzer Grund, das Foto ohne Rahmen/Rundung läuft unten weich ins Schwarz aus (Maske), darunter ein mittiger Satz grau mit weißer Hervorhebung */
section.vgl{background:#000!important}
.vgl .ba{border-radius:0!important;box-shadow:none!important;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%)}
.vgl-p{margin:-24px auto 0;max-width:760px;text-align:center;font-size:21px;line-height:29px;letter-spacing:.011em;font-weight:600;color:#86868b;text-wrap:balance;position:relative}
.vgl-p b{color:#f5f5f7;font-weight:600}
@media(max-width:734px){.vgl-p{margin-top:-8px;font-size:19px;line-height:27px}}
/* Vorher/Nachher erscheint beim Scrollen aus der Dunkelheit (01.11.2026, Wunsch des Nutzers): schwarze Abdeckung über dem Foto (Deckkraft --dk) und leichtes Heranzoomen (--sz), beides setzt script.js nach der Lage im Bildschirm */
.vgl .ba{border:0!important;transform:scale(var(--sz,1));transform-origin:50% 40%}
.vgl .ba::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dk,0);z-index:6;pointer-events:none}
@media(prefers-reduced-motion:reduce){.vgl .ba{transform:none}.vgl .ba::after{display:none}}
/* „Leiser. Schneller. Kühler.“ steht seit 01.11.2026 (Wunsch des Nutzers) unter der Paket-Karte und vor Vorher/Nachher: Galerie → Karte im normalen Abschnittsabstand, Karte → Text ein Abschnittsabstand (Karte unten 0), Text → Regler eng */
.stack .stk>section#leistungen{padding-top:var(--sec,144px)!important;padding-bottom:0!important}
@media(max-width:1068px){.stack .stk>section#leistungen{padding-top:120px!important}}
@media(max-width:734px){.stack .stk>section#leistungen{padding-top:112px!important}}
/* „Leiser. Schneller. Kühler.“ senkrecht mittig in seinem Abschnitt (01.11.2026, Wunsch des Nutzers): unten derselbe Abstand wie oben */
section.sym{padding-bottom:144px!important}@media(max-width:1068px){section.sym{padding-bottom:120px!important}}@media(max-width:734px){section.sym{padding-bottom:112px!important}}
/* Schatten von „Bleib zu Hause“ nur nach oben (01.11.2026, Meldung des Nutzers: grauer Schleier darunter); Fortschrittsbalken nicht direkt an der Unterkante */
@media(prefers-reduced-motion:no-preference){.stack .stk>section#schnell{clip-path:inset(-140px 0 0 0)}}
section#schnell{padding-bottom:24px!important}
/* Große Monitore (01.11.2026, Meldung des Nutzers: auf dem 27"-Monitor (2560 px) wirkt alles winzig): ab 1700 px wird der INHALT proportional vergrößert (zoom auf .wrap, Galerie, Hero-Text, Kopfzeile), als sähe man die Seite bei ca. 1440–1460 px. Bildschirmhohe Elemente (Hero, Überschieben, Ladebildschirm) werden NICHT gezoomt, sonst würden vh-Werte mitwachsen. --pad wird durch den Zoom geteilt, damit der Rand nach dem Zoomen wieder stimmt */
@media(min-width:1700px){:root{--z:1.06}}
@media(min-width:1900px){:root{--z:1.12}}
@media(min-width:2200px){:root{--z:1.22}}
@media(min-width:2500px){:root{--z:1.35}}
@media(min-width:3200px){:root{--z:1.7}}
@media(min-width:1700px){
:root{--pad:max(calc(6.25vw / var(--z)),calc((100vw / var(--z) - 1260px) / 2))}
.wrap,.hl-track,.hero .hero-txt,.hero .hero-cta{zoom:var(--z)}
}
/* Abstand „Bleib zu Hause“ → „Das Ergebnis“ kleiner (01.11.2026, Wunsch des Nutzers): beide hellgrau, der Fortschrittsbalken ist ein feines Element – Abstand 96/80/72 statt 144+24 */
section#schnell{padding-bottom:0!important}
.lt .ba-sec{padding-top:96px!important}@media(max-width:1068px){.lt .ba-sec{padding-top:80px!important}}@media(max-width:734px){.lt .ba-sec{padding-top:72px!important}}
/* FAQ-Fragen beim Darüberfahren ohne Unterstreichung (01.11.2026, Wunsch des Nutzers); der Unterstrich beim Tastaturfokus bleibt */
.faq button:hover span,#fq button:hover span,.faq button:hover,#fq button:hover{text-decoration:none!important}
/* Satz unter Vorher/Nachher erscheint wie bei Apple („Variable Blende. Ein Pro weiß, wieso.“, StaggeredFadeIn): beide Teile steigen 30 px auf und blenden ein, der zweite 0,2 s später; Klasse .in setzt script.js */
.js .vgl-p .vs{display:inline-block;opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.25,.1,.25,1),transform 1.1s cubic-bezier(.25,.1,.25,1)}
.js .vgl-p .vs+.vs{transition-delay:.2s}
.js .vgl-p.in .vs{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .vgl-p .vs{opacity:1;transform:none;transition:none}}
.js .vgl-p .vs+.vs{transition-delay:0s}
/* Satz unter dem Regler etwas tiefer (01.11.2026, Wunsch des Nutzers) */
.vgl-p{margin-top:16px!important}@media(max-width:734px){.vgl-p{margin-top:16px!important}}
/* Hero als Video statt Scroll-Bildfolge (01.11.2026, Wunsch des Nutzers): normales Hero (eine Bildschirmhöhe), Video läuft von selbst (stumm, Schleife), Text liegt darüber. Die Überlappung „Wieder wie neu aus der Dunkelheit“ entfällt, die Abschnitte sind gleich sichtbar */
section.hero{height:100svh!important;min-height:560px!important}
.hero .hi{position:relative!important;height:100%!important;min-height:0!important}
.hero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1!important;animation:none!important}
.stk>section.intro{margin-top:0!important}
.js .stk>section.intro,.js .stk>section#highlights{opacity:1!important}
/* Hero-Video: Ausblenden in Schwarz in den letzten 2 Sekunden, danach beginnt es von vorn und blendet wieder ein (02.11.2026, Wunsch des Nutzers) */
.hero video.hv{transition:opacity 1.2s ease-out}
.hero video.hv.fo{opacity:0!important;transition:opacity 2s ease-in-out}
@media(prefers-reduced-motion:reduce){.hero video.hv,.hero video.hv.fo{transition:none;opacity:1!important}}
/* Hero-Text genau in der Bildschirmmitte (02.11.2026, Wunsch des Nutzers) */
.hero .hero-in{padding-top:57px!important;padding-bottom:57px!important}
@media(max-width:734px){.hero .hero-in{padding-top:57px!important;padding-bottom:57px!important}}
/* Hero-Video weniger abgedunkelt (02.11.2026, Wunsch des Nutzers; vorher .66) */
.hero .hi::after{background:rgba(0,0,0,.35)!important}
/* Vorher/Nachher: der ganze PC passt beim Stehenbleiben auf den Bildschirm (03.11.2026, Wunsch des Nutzers): Höhe des Reglers = Bildschirmhöhe − Kopfzeile − Satz − Abstand; die Breite folgt dem Seitenverhältnis 2000/1116 */
@media(min-width:736px){
 section.vgl{padding-bottom:48px!important}
 .vgl .ba{width:min(100%,calc((100svh - 100px)*1.792));margin-left:auto;margin-right:auto}
}