/* Comfort Home – thuisbatterijcheck v29 */
.es{--d:#062e24;--d2:#0b3d2f;--g:#0fa855;--g2:#12804f;--ink:#0c1a16;--mu:#5f6e68;--ln:#e1eae5;--sf:#f3f8f5;--gold:#c9a55a;background:#f4f7f5;font-family:var(--x-font,"Plus Jakarta Sans",system-ui,sans-serif);color:var(--ink);padding-bottom:70px}
.es *,.es *::before,.es *::after{box-sizing:border-box}
.es-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.es [hidden]{display:none!important}
.es svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hero */
.es-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 460px at 88% -10%,rgba(63,209,127,.22),transparent 60%),radial-gradient(700px 400px at -10% 120%,rgba(17,163,86,.18),transparent 60%),linear-gradient(135deg,#062e24,#083a2c 55%,#0a4232);padding:64px 0 120px}
.es-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);pointer-events:none}
.es-hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.es-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d9f5e5}
.es-pill i{width:8px;height:8px;border-radius:50%;background:#3fd17f;box-shadow:0 0 0 4px rgba(63,209,127,.22)}
.es-hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.035em;margin:18px 0 16px;color:#fff;font-weight:800}
.es-lead{font-size:18px;line-height:1.6;color:#cfe4d9;max-width:560px;margin:0 0 24px}
.es-ticks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.es-ticks li{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:#eaf6ef}
.es-ticks li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:#0fa855 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat}
.es-hero-vis{position:relative;min-height:380px}
.es-photo{position:absolute;right:0;top:0;width:78%;height:360px;border-radius:26px;background-size:cover;background-position:center;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.es-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(200deg,transparent 40%,rgba(6,46,36,.45))}
.es-doc{position:absolute;left:0;bottom:-30px;width:300px;background:#fff;color:var(--ink);border-radius:20px;padding:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);animation:esFloat 6s ease-in-out infinite}
.es-doc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--ln)}
.es-doc-top b{font-size:14px}.es-doc-top span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.es-doc small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.es-doc strong{display:block;font-size:16px;line-height:1.3;margin:5px 0 10px}
.es-doc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0}
.es-doc-tiles span{background:var(--sf);border-radius:10px;padding:8px;font-size:10px;color:var(--mu);line-height:1.3}
.es-doc-tiles em{display:block;font-style:normal;font-weight:800;font-size:15px;color:var(--ink)}
.es-doc-lines i{display:block;height:7px;border-radius:4px;background:#e8efeb;margin-top:7px}
@keyframes esFloat{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.es-doc{animation:none}}

.es-meter{display:flex;gap:5px;margin:2px 0 4px}
.es-meter i{flex:0 0 52px;height:8px;border-radius:4px;background:#dfe7e3;transition:background .4s}
.es-meter.is-1 i:nth-child(-n+1){background:#9fb2a9}
.es-meter.is-2 i:nth-child(-n+2){background:var(--gold)}
.es-meter.is-3 i{background:var(--g)}

/* body / steps */
.es-body{position:relative;margin-top:-72px;max-width:920px}
.es-steps{list-style:none;margin:0 0 16px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#fff;border-radius:18px;box-shadow:0 18px 50px -24px rgba(6,46,36,.35);position:sticky;top:78px;z-index:5}
.es-steps li{display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 8px;border-radius:12px;font-weight:700;font-size:14px;color:var(--mu);transition:.25s}
.es-steps li span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eef3f0;font-size:13px;font-weight:800;color:var(--mu);flex:none;transition:.25s}
.es-steps li.is-on{background:var(--sf);color:var(--ink)}
.es-steps li.is-on span{background:var(--d);color:#fff}
.es-steps li.is-done span{background:var(--g);color:transparent;position:relative}
.es-steps li.is-done span::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/13px no-repeat}

.es-card{background:#fff;border:1px solid var(--ln);border-radius:24px;padding:clamp(22px,4vw,40px);margin-bottom:16px;box-shadow:0 14px 40px -26px rgba(6,46,36,.3)}
#es-step2,#scan-lead{opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s}
#es-step2.is-in,#scan-lead.is-in{opacity:1;transform:none}
.es-card-h{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.es-num{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--d);color:#fff;font-weight:800;font-size:17px}
.es-card-h h2{margin:2px 0 6px;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.es-card-h p{margin:0;color:var(--mu);font-size:15px;line-height:1.55}
.es-card-h>div{flex:1}
.es-edit{flex:none;background:none;border:1px solid var(--ln);border-radius:10px;padding:9px 14px;font:inherit;font-weight:700;font-size:13px;color:var(--ink);cursor:pointer}
.es-edit:hover{border-color:var(--g);color:var(--g2)}

/* vragen */
.es-q{border:0;margin:0 0 24px;padding:0;min-width:0}
.es-q legend,.es-f>span{display:block;font-weight:750;font-size:15px;margin:0 0 10px;padding:0;color:var(--ink)}
.es-f>span em{color:#c0392b;font-style:normal}.es-f>span small{font-weight:500;color:var(--mu)}
.es-chips{display:flex;flex-wrap:wrap;gap:8px}
.es-chip,.es-radio label span{appearance:none;border:1.5px solid #d3dfd8;background:#fff;border-radius:12px;padding:12px 18px;font:inherit;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;display:inline-flex;align-items:center;gap:8px;min-height:48px}
.es-chip:hover,.es-radio label:hover span{border-color:#9fc3b0}
.es-chip.is-on,.es-radio input:checked+span{border-color:var(--g);background:#ecf8f1;box-shadow:0 0 0 3px rgba(15,168,85,.14)}
.es-chip.is-on::before,.es-radio input:checked+span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/10px no-repeat}
.es-radio label{position:relative;cursor:pointer}
.es-radio input{position:absolute;opacity:0;width:1px;height:1px}
.es-radio input:focus-visible+span,.es-chip:focus-visible,.es-opt:focus-visible{outline:3px solid rgba(15,168,85,.45);outline-offset:2px}
.es-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.es-opt{appearance:none;text-align:left;border:1.5px solid #d3dfd8;background:#fff;border-radius:16px;padding:16px;font:inherit;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:.15s;position:relative}
.es-opt svg{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--sf);color:var(--g2);margin-bottom:8px;transition:.15s}
.es-opt b{font-size:14.5px;line-height:1.3}.es-opt small{font-size:12.5px;color:var(--mu);line-height:1.4}
.es-opt:hover{border-color:#9fc3b0;transform:translateY(-1px)}
.es-opt.is-on{border-color:var(--g);background:#f3fbf6;box-shadow:0 0 0 3px rgba(15,168,85,.14)}
.es-opt.is-on svg{background:var(--g);color:#fff}

.es-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:10px}
.es-f{display:block;margin:0;min-width:0}
.es-f input,.es-f select,.es-f textarea{width:100%;height:52px;padding:0 14px;border:1.5px solid #d3dfd8;border-radius:12px;font:inherit;font-size:16px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;margin:0}
.es-f textarea{height:auto;min-height:92px;padding:13px 14px;resize:vertical}
.es-f input:focus,.es-f select:focus,.es-f textarea:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 4px rgba(15,168,85,.14)}
.es-unit{position:relative}
.es-unit input{padding-right:52px;-moz-appearance:textfield}
.es-unit input::-webkit-outer-spin-button,.es-unit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.es-unit i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;font-size:13px;color:var(--mu);pointer-events:none}
.es-f.is-off{opacity:.45}
.es-f.is-bad input,.es-f.is-bad textarea{border-color:#d0574a;box-shadow:0 0 0 4px rgba(208,87,74,.12)}
.es-help{margin:0 0 24px;font-size:14px}
.es-help summary{cursor:pointer;font-weight:700;color:var(--g2);list-style:none;display:inline-flex;align-items:center;gap:6px}
.es-help summary::-webkit-details-marker{display:none}
.es-help summary::before{content:"?";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e4f3ea;font-size:12px;font-weight:800}
.es-help p{margin:10px 0 0;padding:14px 16px;background:var(--sf);border-radius:12px;line-height:1.6;color:var(--mu)}
.es-help b{color:var(--ink)}
.es-two{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.es-two .es-q{margin-bottom:10px}

.es-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.es-act small{color:var(--mu);font-size:13px}
.es-btn{appearance:none;border:0;border-radius:14px;background:var(--d);color:#fff;font:inherit;font-weight:800;font-size:16px;padding:17px 26px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 14px 30px -14px rgba(6,46,36,.7);transition:background .2s,transform .2s}
.es-btn span{transition:transform .2s}
.es-btn:hover{background:#0b4a39;transform:translateY(-1px)}.es-btn:hover span{transform:translateX(3px)}
.es-btn:disabled{opacity:.75;cursor:progress;transform:none}
.es-btn.is-busy::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:esSpin .8s linear infinite}
@keyframes esSpin{to{transform:rotate(360deg)}}
.es-btn-big{background:var(--g);font-size:17px;padding:19px 30px;box-shadow:0 16px 34px -14px rgba(15,168,85,.75)}
.es-btn-big:hover{background:#0c9149}

/* resultaat */
.es-verdict{background:linear-gradient(135deg,#062e24,#0b4433);color:#fff;border-radius:20px;padding:24px 26px;margin-bottom:14px}
.es-verdict small{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a9d8bf}
.es-verdict strong{display:block;font-size:clamp(21px,2.6vw,27px);line-height:1.2;letter-spacing:-.02em;margin:8px 0 12px}
.es-verdict p{margin:12px 0 0;color:#d3e7dc;line-height:1.6;font-size:15px}
.es-verdict .es-meter i{background:rgba(255,255,255,.16)}
.es-verdict .es-meter.is-1 i:nth-child(-n+1){background:#c9d6cf}
.es-verdict .es-meter.is-2 i:nth-child(-n+2){background:#e2c27a}
.es-verdict .es-meter.is-3 i{background:#3fd17f}
.es-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.es-tiles>div{background:var(--sf);border-radius:16px;padding:16px}
.es-tiles small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.es-tiles b{display:block;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;margin:6px 0 2px}
.es-tiles span{font-size:12.5px;color:var(--mu)}
.es-bar{border:1px solid var(--ln);border-radius:16px;padding:16px 18px;margin-bottom:8px}
.es-bar-l{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;margin-bottom:10px}.es-bar-l span+span{color:var(--mu);font-weight:600}
.es-bar-t{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#eef3f0}
.es-bar-t i{display:block;height:100%;transition:width .8s cubic-bezier(.2,.8,.2,1)}
#es-bar-self{background:var(--g)}#es-bar-ret{background:var(--gold)}
.es-bar-k{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12.5px;color:var(--mu)}
.es-bar-k i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}.es-bar-k .k1{background:var(--g)}.es-bar-k .k2{background:var(--gold)}
.es-sub{font-size:18px;margin:24px 0 12px;color:var(--ink)}
.es-tips{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:10px}
.es-tips li{counter-increment:t;display:grid;grid-template-columns:32px 1fr;gap:2px 12px;padding:14px 16px;border:1px solid var(--ln);border-radius:14px}
.es-tips li::before{content:counter(t);grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e4f3ea;color:var(--g2);font-weight:800;font-size:14px}
.es-tips b{font-size:15px}.es-tips span{font-size:14px;color:var(--mu);line-height:1.55}

/* stap 3 */
.es-lead-grid{display:grid;grid-template-columns:1fr 270px;gap:24px;align-items:start}
.es-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.es-fields .es-wide{grid-column:1/-1;margin:0}
.es-pair{display:grid;grid-template-columns:1fr 110px;gap:10px}
.es-preview{background:var(--sf);border-radius:18px;padding:20px;position:relative;overflow:hidden}
.es-preview::before{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(15,168,85,.1)}
.es-preview b{display:block;font-size:16px;margin-bottom:12px;position:relative}
.es-preview ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.es-preview li{display:flex;gap:9px;font-size:14px;font-weight:600;line-height:1.4}
.es-preview li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center/11px no-repeat}
.es-preview p{margin:0;font-size:13px;line-height:1.55;color:var(--mu)}
.es-checks{display:grid;gap:10px;margin:24px 0 6px}
.es-check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--ln);border-radius:14px;cursor:pointer;font-size:14.5px;font-weight:600;line-height:1.45;transition:.15s}
.es-check:hover{border-color:#bcd3c6}
.es-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--g);cursor:pointer}
.es-check small{display:block;font-weight:500;color:var(--mu);font-size:12.5px}
.es-check:has(input:checked){border-color:var(--g);background:#f3fbf6}
.es-check.is-bad{border-color:#d0574a;background:#fff6f5}
.es-submit{flex-direction:column;align-items:stretch;gap:10px}
.es-submit .es-btn{justify-content:center}
.es-err{background:#fff2f0;color:#9a2b20;border-radius:12px;padding:12px 14px;font-weight:700;font-size:14px}
.es .submit-error{margin-top:12px;padding:12px 14px;border-radius:12px;background:#fff2f0!important;color:#9a2b20!important;font-weight:700}
.es-small{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--mu);text-align:center}

.es-info{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.es-info>div{padding:20px;border-radius:18px;background:#fff;border:1px solid var(--ln)}
.es-info b{display:block;font-size:15px;margin-bottom:6px}
.es-info p{margin:0;font-size:14px;line-height:1.55;color:var(--mu)}
.es-info a{color:var(--g2);font-weight:700}

@media (max-width:980px){
 .es-hero{padding:44px 0 110px}
 .es-hero-in{grid-template-columns:1fr;gap:34px}
 .es-hero-vis{min-height:300px;max-width:520px}
 .es-photo{height:280px}
 .es-opts{grid-template-columns:1fr 1fr}
 .es-lead-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
 .es-wrap{padding:0 16px}
 .es-hero{padding:34px 0 96px}
 .es-hero h1{font-size:34px}
 .es-lead{font-size:16px}
 .es-hero-vis{min-height:250px}
 .es-photo{width:84%;height:220px;border-radius:20px}
 .es-doc{width:240px;padding:15px;bottom:-10px}
 .es-doc strong{font-size:14px}.es-doc-tiles em{font-size:13px}.es-doc-lines{display:none}
 .es-body{margin-top:-60px}
 .es-steps{top:64px;padding:6px}
 .es-steps li{flex-direction:column;gap:5px;font-size:11.5px;padding:8px 4px;text-align:center}
 .es-card{border-radius:20px}
 .es-card-h{gap:12px;margin-bottom:20px;flex-wrap:wrap}
 .es-num{width:36px;height:36px;font-size:15px;border-radius:11px}
 .es-card-h p{font-size:14px}
 .es-chip,.es-radio label span{padding:11px 14px;font-size:14.5px}
 .es-opts{gap:8px}.es-opt{padding:13px}.es-opt small{display:none}
 .es-nums,.es-two,.es-fields{grid-template-columns:1fr}
 .es-tiles{gap:6px}.es-tiles>div{padding:12px 10px}.es-tiles small{font-size:10px;letter-spacing:.04em}.es-tiles span{font-size:11px}
 .es-verdict{padding:20px}
 .es-act .es-btn{width:100%;justify-content:center}
 .es-info{grid-template-columns:1fr}
}
@media (max-width:680px){.es-btn-big{font-size:16px;padding:18px 20px;white-space:nowrap}.es-hero-vis{max-width:none}}