/* Themapagina's, nieuwe opbouw (lp-page.js). Klassen beginnen met px-; sectiestijlen gelden alleen onder html.px. */
/* Schakelbalk "Huidig / Nieuw": alleen op pagina's die nog niet zijn afgetikt. */
.px-bar{position:sticky;top:0;z-index:300;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 16px;background:#fff4c2;border-bottom:1px solid #e6cf6a;font:500 13.5px Roboto,Arial,sans-serif;color:#4a3d00}
.px-bar b{margin-right:10px;font-weight:700}.px-bar a{padding:5px 11px;border:1px solid #d9c25a;border-radius:99px;background:#fffbe6;color:#4a3d00;text-decoration:none;white-space:nowrap}.px-bar a.on{background:#153259;border-color:#153259;color:#fff}
@media(max-width:760px){.px-bar{font-size:12.5px;padding:6px 10px}}

/* Vragensectie: zelfde maat en ritme als de rest van de site, op grijs tussen de witte reviews en de donkerblauwe afsluiting. */
.px .px-s{padding:84px 0}.px .px-s .wr{max-width:1240px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.px .px-s h2{margin:0 0 8px;font-size:32px;font-weight:500;line-height:1.2;color:#153259;text-align:center;text-wrap:balance}
.px-ld{margin:0 0 40px;font-size:18px;line-height:1.45;color:#3a4552;text-align:center;text-wrap:balance}
.px-z{background:#f5f6f7}
.px-fq{max-width:820px;margin:0 auto}
.px-fq details{border-bottom:1px solid #dfe3e8}.px-fq details:first-of-type{border-top:1px solid #dfe3e8}
.px-fq summary{position:relative;list-style:none;padding:18px 40px 18px 0;font-size:18px;font-weight:500;line-height:1.35;color:#153259;cursor:pointer}
.px-fq summary::-webkit-details-marker{display:none}
.px-fq summary:after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid #0086c8;border-bottom:2px solid #0086c8;transform:rotate(45deg);transition:transform var(--dur,.18s) ease}
.px-fq details[open] summary:after{transform:rotate(-135deg);margin-top:-2px}
.px-fq .px-a{padding:0 40px 20px 0;font-size:16.5px;line-height:1.55;color:#3a4552}
/* De review onder de vragen: gecentreerd, zonder kaart. */
.px-zq{max-width:760px;margin:24px auto 0}
.px-q{margin:0;padding:8px 0 0;text-align:center}
.px-q>span{display:block;margin:0 0 8px;color:#fdb813;letter-spacing:2px;font-size:16px}
.px-q blockquote{margin:0 0 10px;font-size:17.5px;line-height:1.5;color:#153259}
.px-q figcaption{font-size:14px;color:#5b6673}.px-q figcaption a{color:inherit}
/* Vanafprijzen onder de inleiding van de systeemkeuze. */
.px-pr{display:block;margin-top:6px;font-size:16px;color:#5b6673}

@container (max-width:860px){
.px-pr{font-size:14.5px}
.px .px-s{padding:52px 0}.px .px-s .wr{padding:0 16px}.px .px-s h2{font-size:24px}.px-ld{font-size:16px;margin-bottom:24px}
.px-fq summary{font-size:17px;padding:16px 34px 16px 0}.px-fq .px-a{font-size:15.5px;padding-right:0}
.px-q blockquote{font-size:16px}
}

/* Feiten onder de animatie en de check (draadloos-familie): losse vinkjes zonder kader, in de vorm van de zekerhedenstrook
   onder de systeemkeuze (keuze Bob, 2026-11-11): lijn erboven, blauw vinkje, titel en een regel eronder.
   Desktop vier naast elkaar, telefoon onder elkaar. */
.px .lpw-f:not(.n6){gap:20px;margin-top:12px;padding-top:24px;border-top:1px solid #dfe3e8}
.px .lpw-f:not(.n6) li{display:block;position:relative;padding:0 0 0 30px;background:none;border-radius:0}
.px .lpw-f:not(.n6) li:before{content:"✓";position:absolute;left:0;top:-3px;color:#0086c8;font-weight:700;font-size:22px}
.px .lpw-f:not(.n6) .lpw-i{display:none}
.px .lpw-f:not(.n6) b{display:block;font-size:17px;font-weight:500;line-height:1.25;color:#153259}
.px .lpw-f:not(.n6) span{display:block;margin-top:0;font-size:14.5px;line-height:1.4;color:#5b6673}
/* De regel onder elke titel blijft op een regel: tussen 861 en 1180 px daarom twee kolommen in plaats van vier. */
@container (max-width:1180px){.px .lpw-f:not(.n6){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@container (max-width:860px){
.px .lpw-f:not(.n6){grid-template-columns:minmax(0,1fr);gap:12px;margin-top:6px;padding-top:18px}
.px .lpw-f:not(.n6) li{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:6px;padding:0}
.px .lpw-f:not(.n6) li:before{position:static;grid-row:1/3;font-size:18px;line-height:24px}
.px .lpw-f:not(.n6) b{grid-column:2;font-size:15.5px;line-height:24px}
.px .lpw-f:not(.n6) span{grid-column:2;font-size:14px;line-height:20px}
}

/* Check "Werkt het bij u?" (herziene versie in category.js): een regel uitleg onder elke vraag, een vinkje bij een positieve
   uitkomst en de adviesknop als geen van beide aansluitingen past. */
.lpw-c .fh9{margin:-4px 0 10px;font-size:14.5px;line-height:1.4;color:#a9c3da}
.lpw-c .res{font-size:15.5px;line-height:1.45}
.lpw-c .res.ok b{position:relative;padding-left:26px}
.lpw-c .res.ok b:before{content:"";position:absolute;left:3px;top:6px;width:13px;height:6px;border-left:2.4px solid #1a8a3f;border-bottom:2.4px solid #1a8a3f;transform:rotate(-45deg)}
.lpw-c .res a.btn.fx9{color:#fff;text-align:center;text-decoration:none;box-sizing:border-box}

/* Review in de eerste sectie (lp-page.js, quoteCard): een smalle regel met sterren, citaat en bron. De regel is zo breed als
   de tekst vraagt, tot 940 px: een kort citaat op een regel, een langer citaat over twee gelijke regels. */
.pxr{box-sizing:border-box;display:flex;align-items:center;gap:24px;width:fit-content;max-width:min(100%,940px);margin:36px auto 0;padding:16px 24px;background:#f3f7fa;border-radius:10px;text-align:left}
.pxr blockquote{flex:1;min-width:0;margin:0;font-size:16.5px;font-weight:400;line-height:1.45;color:#22303f;text-wrap:balance}
.pxr-s{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none;color:#5b6673}
.pxr-lg{display:flex;align-items:center;gap:7px}
.pxr-lg img{display:block;height:20px;width:auto}
.pxr-lg svg{width:20px;height:20px}
.pxr-lg b{font-size:16px;font-weight:500;color:#5f6368}
.pxr-sm{display:flex;align-items:baseline;gap:10px;flex:none;white-space:nowrap}
.pxr-st{font-size:17px;letter-spacing:2px;line-height:1;margin-right:-2px;background:linear-gradient(90deg,#fdb813 var(--p,100%),#cfd6de var(--p,100%));-webkit-background-clip:text;background-clip:text;color:transparent}
.pxr-sc{font-size:15px;font-weight:600;color:#153259}
.pxr-sd{font-size:14.5px;line-height:1.3;white-space:nowrap}
@media (hover:hover){.pxr-s:hover .pxr-sd{color:#153259;text-decoration:underline;text-underline-offset:3px}}
@container (max-width:860px){
.pxr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sm s" "q q";gap:10px 12px;width:auto;margin-top:22px;padding:16px 16px 18px}
.pxr .pxr-sm{grid-area:sm;align-self:center}
.pxr blockquote{grid-area:q;font-size:16px;text-wrap:pretty}
.pxr .pxr-s{grid-area:s}
.pxr .pxr-sd{display:none}
}

/* 4G-pagina, eerste sectie: de vier onderdelen van het systeem als tegels, twee bij twee, met een nummer voor de volgorde. */
.px .lt-4g .lpw-v{display:block}
.px .lt-4g .g4{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;height:100%;margin:0;padding:22px;box-sizing:border-box}
.px .lt-4g .g4 li{position:relative;display:flex;flex-direction:column;padding:16px 18px 18px;background:#fff;border-radius:10px;counter-increment:none;font-size:14.5px;line-height:1.4;color:#5b6673}
.px .lt-4g .g4 li:before{content:none}
.px .lt-4g .g4 i{position:absolute;left:14px;top:14px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#153259;color:#fff;font:600 13.5px/1 Roboto,Arial,sans-serif;font-style:normal}
.px .lt-4g .g4-im{flex:1;display:flex;align-items:center;justify-content:center;min-height:128px;margin:6px 0 12px}
.px .lt-4g .g4-im img{display:block;max-width:78%;max-height:128px;width:auto;height:auto;object-fit:contain}
.px .lt-4g .g4 b{display:block;font-size:17px;font-weight:500;line-height:1.25;color:#153259}
.px .lt-4g .g4 span{display:block;margin-top:2px}
@container (max-width:860px){
.px .lt-4g .g4{gap:8px;padding:10px}
.px .lt-4g .g4 li{padding:12px 12px 14px;font-size:13.5px}
.px .lt-4g .g4 i{left:10px;top:10px;width:22px;height:22px;font-size:12.5px}
.px .lt-4g .g4-im{min-height:84px;margin:4px 0 8px}
.px .lt-4g .g4-im img{max-height:84px}
.px .lt-4g .g4 b{font-size:15.5px}
}

/* Hoofdpagina, "Zo werkt een camerasysteem van Bascom": drie stappen met een foto links en tekst rechts, naast de check. */
.px .px-how .lpw-v{display:block}
.px .px-how .hw3{list-style:none;display:grid;gap:14px;height:100%;margin:0;padding:22px;box-sizing:border-box;align-content:space-between}
.px .px-how .hw3 li{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:center;padding:0;counter-increment:none;font-size:15.5px;line-height:1.45;color:#3a4552}
.px .px-how .hw3 li:before{content:none}
.px .px-how .hw3 img{display:block;width:168px;height:120px;border-radius:8px;object-fit:cover}
.px .px-how .hw3 li{position:relative}
.px .px-how .hw3 i{position:absolute;left:8px;top:8px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#153259;color:#fff;font:600 13px/1 Roboto,Arial,sans-serif;font-style:normal;box-shadow:0 0 0 2px #fff}
.px .px-how .hw3 b{font-size:18px;font-weight:500;line-height:1.3;color:#153259}
.px .px-how .hw3 span{display:block;margin-top:6px}
@container (max-width:860px){
.px .px-how .hw3{gap:12px;padding:14px}
.px .px-how .hw3 li{grid-template-columns:96px minmax(0,1fr);gap:14px;font-size:14.5px;align-items:start}
.px .px-how .hw3 img{width:96px;height:84px}
.px .px-how .hw3 i{left:6px;top:6px;width:22px;height:22px;font-size:12.5px}
.px .px-how .hw3 b{font-size:16px}
.px .px-how .hw3 span{margin-top:4px}
}

/* Hoofdpagina: afwisseling van de secties na de systeemkeuze (wit, grijs, wit, donkerblauw). */
.px-alt .rv.rx9{background:#f5f6f7}
.px-alt .px-z{background:#fff}
.px-alt .rv2s .qc{background:#fff}

/* Thuis: na de grijze plekkiezer en systeemkeuze staat "Dit ziet u straks op uw scherm" op wit, daarna reviews grijs en vragen wit. */
.px-alt .lpb .lpx-see{background:#fff}