/* Themablokken (lp-thema.js). De basis komt uit lp.css (.lpo, .lpw-*); hier staan alleen de aanvullingen per thema. */
/* Bekabeld: de animatie heeft rechts een muur die tot de rand loopt, net als bij draadloos. */
.lpk .lpo-q{margin-top:40px}
/* De regel onder de kop breekt in twee gelijke regels in plaats van een los woord op de tweede regel. */
.hx .sub{text-wrap:balance}
/* Lijstje onderin de donkerblauwe kaart. Het schuift naar de onderkant; de regel over bedenktijd sluit eronder aan. */
.lt-in{margin-top:auto;padding-top:22px}
.lt-in b{display:block;margin:0 0 10px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:16px;font-weight:500;color:#fff}
.lt-in ul{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 18px;margin:0;padding:0}
.lt-in li{position:relative;padding-left:24px;font-size:15px;line-height:1.35;color:#dce8f2}
.lt-in li:before{content:"";position:absolute;left:2px;top:5px;width:10px;height:5px;border-left:2px solid #7fd0f5;border-bottom:2px solid #7fd0f5;transform:rotate(-45deg)}
.lpw-c .lt-in+.lpw-n{margin-top:0;padding-top:16px}
@container (max-width:860px){.lt-in ul{grid-template-columns:minmax(0,1fr)}}
.lpo-ld,.lpo h2{text-wrap:balance}

/* Foto in de beeldkaart (in plaats van een animatie). */
.lt-ph{flex:1;min-height:0;display:flex}.lt-ph img{display:block;width:100%;height:100%;min-height:300px;aspect-ratio:1400/860;object-fit:cover;object-position:50% 46%}
/* Kaart rechts met een groot antwoord, een lijst met regels en een knop onderaan. */
.lt-c h3{margin-bottom:14px}
.lpw-c .lt-big{margin:0 0 18px}.lt-big b{display:block;font-size:44px;font-weight:500;line-height:1.05;color:#fff;letter-spacing:-.01em}.lt-big span{display:block;margin-top:6px;font-size:16px;line-height:1.4;color:#cfe0ee}
.lt-rw{margin:0;border-top:1px solid rgba(255,255,255,.18)}
.lt-rw div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:16px;line-height:1.35}
.lt-rw dt{color:#dce8f2}.lt-rw dd{margin:0;font-weight:500;color:#fff;white-space:nowrap}
.lt-ft{margin-top:auto;padding-top:20px}.lt-ft p{margin:0 0 16px;font-size:15.5px;line-height:1.45;color:#cfe0ee}.lt-ft p b{font-weight:500;color:#fff}
.lt-ft .btn{display:block;width:100%;box-sizing:border-box;text-align:center}
@container (max-width:860px){.lt-big b{font-size:36px}.lt-ph img{min-height:0;aspect-ratio:16/11}}

/* Thuispagina: dezelfde kop als de bedrijfspagina, met een foto van een woning. */
@container (min-width:861px){.lpb .hp-h.lpx-h.lpx-th{background:linear-gradient(90deg,#153259 0,#153259 34%,rgba(21,50,89,.86) 47%,rgba(21,50,89,.2) 72%,rgba(21,50,89,0) 100%),url(/assets/hero/thuis-1600.webp) 100% 30%/66% auto no-repeat,#153259}}
@container (max-width:860px){.lpb .hp-h.lpx-h.lpx-th{background:linear-gradient(90deg,rgba(21,50,89,.94) 0,rgba(21,50,89,.84) 100%),url(/assets/hero/thuis-800.webp) 70% 30%/cover}}
@container (min-width:1100px){.lpb .hp-h.lpx-h.lpx-th{background:linear-gradient(90deg,#153259 0,#153259 42%,rgba(21,50,89,.88) 56%,rgba(21,50,89,.2) 78%,rgba(21,50,89,0) 100%),url(/assets/hero/thuis-1600.webp) 100% 30%/66% auto no-repeat,#153259}}

/* Productfoto op de grijze kaart: de witte achtergrond van de foto valt weg tegen het grijs. */
.lt-pd{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 32px}.lt-pd img{display:block;width:100%;max-width:440px;height:auto;mix-blend-mode:multiply}
@container (max-width:860px){.lt-pd{padding:16px 24px}.lt-pd img{max-width:280px}}
.lt-ft a.btn{text-decoration:none}
.lpw .lpo-ld{max-width:760px;margin-left:auto;margin-right:auto}

/* Nachtzicht: de schuif dag en nacht vult de bovenkant van de beeldkaart. */
.lt-cmp{flex:1;display:flex}.lt-cmp .cmp8{flex:1;width:100%;border-radius:0;box-shadow:none;aspect-ratio:810/470}

/* Ronde 5. Foto's in het tweebeeldenblok gedragen zich als de video's van het buitenblok. */
.lpo figure img{display:block;width:100%;height:100%;object-fit:cover}
@container (max-width:860px){.lpo figure img{aspect-ratio:1;height:auto;border-radius:10px}}
/* Video in de beeldkaart (4K), en een bredere productfoto (app). */
.lt-ph video{display:block;width:100%;height:100%;min-height:300px;aspect-ratio:1400/860;object-fit:cover;object-position:50% 30%}
.lt-pd.lt-pdw img{max-width:560px}
@container (max-width:860px){.lt-ph video{min-height:0;aspect-ratio:16/11}.lt-pd.lt-pdw img{max-width:100%}}

/* Kop van de categorie- en landingspagina's: links effen donkerblauw voor de tekst, rechts de foto met de camera vrij in beeld
   (dezelfde opzet als de bedrijfspagina). De foto komt uit --hi (desktop) en --hm (telefoon), de uitsnede uit --hp; lp.js zet ze per pagina. */
.dh{position:relative;isolation:isolate;background:#153259}
.dh:before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:64%;background:linear-gradient(90deg,#153259 0,rgba(21,50,89,.9) 14%,rgba(21,50,89,.38) 46%,rgba(21,50,89,.08) 78%,rgba(21,50,89,0) 100%),var(--hi,url(/assets/hero/std-1600.webp)) var(--hp,50% 8%)/cover no-repeat}
@container (max-width:860px){.dh:before{width:100%;background:linear-gradient(90deg,rgba(21,50,89,.95) 0,rgba(21,50,89,.84) 100%),var(--hm,url(/assets/hero/std-800.webp)) var(--hp,50% 8%)/cover no-repeat}}


/* Zes feiten in plaats van vier: drie kolommen op desktop, compacte rijen op telefoon. */
.lpw-f.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
@container (max-width:860px){.lpw-f.n6{grid-template-columns:minmax(0,1fr);gap:8px}.lpw-f.n6 li{grid-template-columns:38px minmax(0,1fr);column-gap:12px;padding:12px 14px}.lpw-f.n6 .lpw-i{width:38px;height:38px}.lpw-f.n6 b{font-size:16px}.lpw-f.n6 span{font-size:14px}}
.lt-ft p a{color:#fff}

/* Basis van de sectie onder de systeemkeuze: kop, inleiding, review en knop. */
.lw9{padding:84px 0;background:#fff}.lw9 .wr{max-width:1240px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.lw9 h2{margin:0 0 8px;font-size:32px;font-weight:500;line-height:1.2;color:#153259;text-align:center;text-wrap:balance}
.lw9-ld{margin:0 0 40px;font-size:18px;line-height:1.45;color:#3a4552;text-align:center;text-wrap:balance}
.lw9-q{display:flex;flex-direction:column;justify-content:center;margin:0;padding:28px 32px;background:#153259;border-radius:10px}
.lw9-q>span{color:#fdb813;letter-spacing:2px;font-size:17px;margin-bottom:10px}
.lw9-q blockquote{margin:0 0 14px;font-size:20px;line-height:1.45;color:#fff}
.lw9-q figcaption{font-size:14px;color:#cfe0ee}.lw9-q figcaption a{color:inherit}
.lw9-c{margin-top:32px;text-align:center}.lw9-c .btn{min-width:280px}
@container (max-width:860px){.lw9{padding:56px 0}.lw9 .wr{padding:0 16px}.lw9 h2{font-size:24px}.lw9-ld{font-size:16px;margin-bottom:24px}
.lw9-q{padding:22px 18px}.lw9-q blockquote{font-size:17px}.lw9-c{margin-top:22px}.lw9-c .btn{display:block;width:100%;min-width:0;box-sizing:border-box}}

/* Twijfels-sectie (lp-thema.js, twijfels). Links de kop, de review en de knop (blijft staan bij scrollen), rechts de twijfels met het antwoord open. */
.pv2-g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:56px;align-items:start}
.pv2-l{position:sticky;top:90px}.pv2 h2,.pv2 .lw9-ld{text-align:left}.pv2 .lw9-ld{margin-bottom:28px}.pv2 .lw9-c{text-align:left;margin-top:24px}
.pv2-q{margin:0;border-top:1px solid #dfe3e8}.pv2-q div{padding:22px 0 24px;border-bottom:1px solid #dfe3e8}
.pv2-q dt{margin:0 0 8px;font-size:20px;font-weight:500;line-height:1.3;color:#153259}.pv2-q dd{margin:0;font-size:17px;line-height:1.55;color:#3a4552}
@container (max-width:860px){
.pv2-g{grid-template-columns:minmax(0,1fr);gap:22px}.pv2-l{position:static;display:contents}.pv2 h2{order:0}.pv2 .lw9-ld{order:1;margin-bottom:0}.pv2-q{order:2}.pv2 .lw9-q{order:3}.pv2 .lw9-c{order:4;margin-top:0}
.pv2-q div{padding:16px 0 18px}.pv2-q dt{font-size:17.5px;margin-bottom:6px}.pv2-q dd{font-size:15.5px;line-height:1.5}
}
@container (max-width:860px){.pv2 h2{margin:0}.pv2 .lw9-ld{margin-top:-14px}}

/* Kopfoto op ware grootte (app-pagina): de foto is 900 px breed en wordt op desktop niet opgerekt. Het vlak rechts heeft de
   verhouding van de foto en de hoogte van de kop, dus het verloop loopt altijd over de foto zelf, op elke schermbreedte.
   Het verloop gaat in kleine stappen van dekkend donkerblauw aan de linkerrand naar helemaal doorzichtig voorbij het midden,
   zodat er geen rand of band te zien is en de telefoon rechts vrij blijft. Onder 1181 px staat de tekst verder over de foto
   en loopt het verloop daarom langer door. Telefoon houdt de gewone opzet. */
@container (min-width:861px){
.hs9 .dh:before{width:auto;height:100%;aspect-ratio:900/669;max-width:64%;background:linear-gradient(90deg,#153259 0,#153259 4%,rgba(21,50,89,.96) 10%,rgba(21,50,89,.87) 16%,rgba(21,50,89,.7) 22%,rgba(21,50,89,.5) 28%,rgba(21,50,89,.31) 34%,rgba(21,50,89,.17) 40%,rgba(21,50,89,.07) 46%,rgba(21,50,89,.02) 52%,rgba(21,50,89,0) 58%),var(--hi) 100% 50%/auto 100% no-repeat,#153259}
}
@container (min-width:861px) and (max-width:1180px){
.hs9 .dh:before{background:linear-gradient(90deg,#153259 0,#153259 22%,rgba(21,50,89,.95) 30%,rgba(21,50,89,.85) 38%,rgba(21,50,89,.68) 46%,rgba(21,50,89,.48) 54%,rgba(21,50,89,.3) 62%,rgba(21,50,89,.16) 70%,rgba(21,50,89,.06) 78%,rgba(21,50,89,0) 88%),var(--hi) 100% 50%/auto 100% no-repeat,#153259}
}