/* assets/dp-spec-uitleg.css — uitleg bij specificaties: klikbare regels, pop-up en visuals (assets/dp-spec-uitleg.js), 4 nov 2026.
   Ingeladen vanuit pages/product.rain. Plan: plannen/specificaties-herstructurering-plan.md. Huisstijl: #29384B, #70C067, #0099E5, Asap. */

/* klikbare regel: blauw bolletje + gestippelde naam */
.dp-su-rij{cursor:pointer;align-items:center}
.dp-su-knop{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;margin-right:6px;border-radius:50%;background:#E5F5FC;color:#0099E5!important;font-size:12px;line-height:1;text-decoration:none!important;transition:background .15s,color .15s}
.dp-su-knop i{font-size:12px;line-height:1;color:inherit}
.dp-su-naam{text-decoration:underline dotted #0099E5;text-decoration-thickness:1px;text-underline-offset:3px}
.dp-su-rij:hover .dp-su-naam{color:#0099E5}
.dp-su-rij:hover .dp-su-knop,.dp-su-knop:focus-visible{background:#0099E5;color:#fff!important}
.dp-su-knop:focus-visible{outline:2px solid #29384B;outline-offset:2px}

/* pop-up */
html.dp-su-pop-open,html.dp-su-pop-open body{overflow:hidden}
.dp-su-pop{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
.dp-su-pop[hidden]{display:none}
.dp-su-pop__achter{position:absolute;inset:0;background:rgba(41,56,75,.55)}
.dp-su-pop__venster{position:relative;width:100%;max-width:600px;max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border-radius:12px;padding:24px;box-shadow:0 12px 40px rgba(41,56,75,.25);color:#666;font-family:Asap,sans-serif;font-size:14px;line-height:1.6;text-align:left;outline:0}
.dp-su-pop__kop{margin:0 40px 4px 0;font-weight:800;font-size:20px;line-height:1.25;color:#29384B}
.dp-su-pop__waarde{margin:0 0 12px;font-size:14px;color:#898D93}
.dp-su-pop__waarde b{color:#29384B}
.dp-su-pop__waarde:empty{margin:0 0 8px}
.dp-su-pop__dicht{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#FAFAFA;color:#29384B;font-size:24px;line-height:36px;cursor:pointer}
.dp-su-pop__dicht:hover{background:#ECECEC}
.dp-su-pop__tekst p{margin:0 0 12px}
.dp-su-pop__tekst b,.dp-su-pop__tekst strong{color:#29384B}
.dp-su-pop__tekst img{display:block;max-width:100%;height:auto;border-radius:8px;margin:8px 0 12px}
.dp-su-pop__tekst a{color:#0099E5}
@media (max-width:767px){.dp-su-pop{padding:8px;align-items:flex-end}.dp-su-pop__venster{max-height:calc(100vh - 16px);padding:20px 16px 16px}.dp-su-pop__kop{font-size:18px}}

/* visuals: gedeeld */
.dp-w{margin:16px 0 0;padding:16px;border-radius:10px;background:#FAFAFA}
.dp-w__kop{margin:0 0 10px;font-weight:800;font-size:15px;color:#29384B}
.dp-w__noot{margin:10px 0 0!important;font-size:12.5px;line-height:1.5;color:#898D93}
.dp-w__tips{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px;line-height:1.45}
.dp-w__tips li{padding-left:14px;position:relative}
.dp-w__tips li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#70C067}

/* droogschema */
.dp-w-droog__as{position:relative;height:58px;margin:4px 28px 6px}
.dp-w-droog__lijn{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:2px;background:linear-gradient(90deg,#CFE9CB,#70C067)}
.dp-w-droog__punt{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.dp-w-droog__punt i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #70C067;color:#29384B;font-style:normal;font-size:12px;font-weight:700}
.dp-w-droog__punt em{font-style:normal;font-size:12px;font-weight:700;color:#29384B;white-space:nowrap}
.dp-w-droog__punt.is-dit i{background:#70C067;color:#fff;box-shadow:0 0 0 4px rgba(112,192,103,.25)}
.dp-w-droog__punt.is-dit em{color:#3E8A36}
.dp-w-droog__lijst{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.dp-w-droog__lijst li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;font-size:13.5px}
.dp-w-droog__lijst li i{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid #70C067;font-style:normal;font-size:11px;font-weight:700;color:#29384B}
.dp-w-droog__lijst li span{flex:1;color:#29384B}
.dp-w-droog__lijst li b{color:#29384B;white-space:nowrap}
.dp-w-droog__lijst li.is-dit{background:#EEF7ED}
.dp-w-droog__lijst li.is-dit i{background:#70C067;color:#fff}

/* temperatuur */
.dp-w-temp__zin{margin:0 0 14px!important}
.dp-w-temp__schaal{position:relative;height:14px;margin:30px 0 0;border-radius:7px;background:linear-gradient(90deg,#7CC4EC 0%,#CDE9F7 22%,#F3F1E7 45%,#F7C98B 75%,#E8735F 100%)}
.dp-w-temp__band{position:absolute;top:-6px;bottom:-6px;border:2px solid #70C067;border-radius:9px;background:rgba(112,192,103,.28)}
.dp-w-temp__grens{position:absolute;top:-28px;font-style:normal;font-size:12px;font-weight:700;color:#29384B;white-space:nowrap;padding:1px 6px;border-radius:4px;background:#fff;border:1px solid #ECECEC}
.dp-w-temp__grens--min{left:0;transform:translateX(-50%)}
.dp-w-temp__grens--max{right:0;transform:translateX(50%)}
.dp-w-temp__grens.is-dit{background:#70C067;border-color:#70C067;color:#fff}
.dp-w-temp__tikken{position:relative;height:18px;margin-top:6px}
.dp-w-temp__tik{position:absolute;transform:translateX(-50%);font-size:11px;color:#898D93}

/* rendement */
.dp-w-rend__groot{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.dp-w-rend__bus,.dp-w-rend__vlak{display:inline-flex;align-items:center;padding:8px 12px;border-radius:8px;background:#fff;border:1px solid #ECECEC;font-weight:800;font-size:16px;color:#29384B}
.dp-w-rend__vlak{background:#EEF7ED;border-color:#CFE9CB}
.dp-w-rend__pijl{font-size:20px;color:#70C067;font-weight:700}
.dp-w-rend__reken{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dp-w-rend__reken label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12.5px;font-weight:600;color:#29384B}
.dp-w-rend__reken label span{display:flex;align-items:center;gap:6px;font-weight:400;color:#666}
.dp-w-rend__reken input,.dp-w-rend__reken select{width:100%;height:40px;padding:0 10px;border:1px solid #8D8D8D;border-radius:6px;background:#fff;color:#29384B;font:inherit;font-size:15px}
.dp-w-rend__uit{margin:12px 0 0!important;font-size:15px;color:#29384B}
.dp-w-rend__knop{display:block;width:100%;margin-top:12px;padding:10px 14px;border:1px solid #8D8D8D;border-radius:999px;background:#fff;color:#29384B;font:inherit;font-weight:700;cursor:pointer}
.dp-w-rend__knop:hover{background:#29384B;border-color:#29384B;color:#fff}

/* glans */
.dp-glans{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0}
.dp-glans__stap{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.35;color:#666}
.dp-glans__stap b{font-size:13px;color:#29384B}
.dp-glans__vlak{position:relative;display:block;aspect-ratio:3/4;margin-bottom:6px;border-radius:6px;overflow:hidden;background:#2E3E52}
.dp-glans__vlak::before,.dp-glans__vlak::after{content:"";position:absolute;pointer-events:none}
.dp-glans__vlak::before{inset:0;background:linear-gradient(180deg,rgba(255,255,255,var(--l,0)),rgba(0,0,0,var(--d,0)))}
.dp-glans__vlak::after{left:-30%;right:-30%;top:-20%;bottom:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,var(--a,0)) 50%,transparent 60%);filter:blur(var(--b,0))}
.dp-glans__vlak.g2{--l:.03;--d:.05;--a:.08;--b:9px}
.dp-glans__vlak.g3{--l:.05;--d:.1;--a:.16;--b:7px}
.dp-glans__vlak.g4{--l:.07;--d:.15;--a:.3;--b:4px}
.dp-glans__vlak.g5{--l:.09;--d:.2;--a:.5;--b:2px}
.dp-glans__vlak.g6{--l:.12;--d:.28;--a:.85;--b:0px}
.dp-glans__stap.is-dit .dp-glans__vlak{box-shadow:0 0 0 3px #fff,0 0 0 5px #70C067}
.dp-glans__stap.is-dit b::after{content:"Dit product";display:block;margin-top:2px;font-size:11px;font-weight:700;color:#70C067}
@media (max-width:575px){.dp-glans{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}.dp-glans__vlak{aspect-ratio:1/1}.dp-w-rend__reken{grid-template-columns:1fr}}