.sd-widget .card{
background:#fff;
border-radius:24px;
padding:42px 36px 42px;
width:100%;max-width:820px;
box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.sd-widget .card-inner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.sd-widget .card{container-type:inline-size;container-name:sdcard;}
@container sdcard (max-width:560px){
.sd-widget .card-inner{grid-template-columns:1fr;}
.sd-widget .card-title{font-size:22px;}
}
@media(max-width:700px){
.sd-widget .card-inner{grid-template-columns:1fr;}
.sd-widget .card-title{font-size:22px;}
.sd-widget .card{padding:24px 20px;}
}

/* HEADLINE */
.sd-widget .card-title{
font-family:’Nunito’,sans-serif;
font-weight:800;font-size:38px;
color:#1a1a1a;line-height:1.2;
margin-bottom:32px;
}
.sd-widget .card-title em{font-style:normal;color:#4bc5f2}

/* SLIDERS */
.sd-widget .sd-field{margin-bottom:16px}
.sd-widget .sd-field-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.sd-widget .sd-field-lbl{font-size:13px;color:#666;font-weight:400}
.sd-widget .sd-field-hint{font-size:10px;color:#bbb;display:block;margin-top:1px}
.sd-widget .sd-field-val{font-family:’Nunito’,sans-serif;font-weight:700;font-size:14px;color:#1a1a1a;white-space:nowrap;margin-left:8px}

.sd-widget input[type=range]{
-webkit-appearance:none;appearance:none;
width:100%;height:6px;border-radius:3px;
background:#e8e8e8;outline:none;cursor:pointer;
touch-action:pan-y;margin:6px 0;
}
.sd-widget input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
background:#4bc5f2;border:3px solid #fff;
box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;
}
.sd-widget input[type=range]::-moz-range-thumb{
width:28px;height:28px;border-radius:50%;
background:#4bc5f2;border:3px solid #fff;cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sd-widget .sd-lims{display:flex;justify-content:space-between;font-size:10px;color:#ccc;margin-top:4px}

.sd-widget .divider{height:1px;background:#f0f0f0;margin:20px 0}

/* BESPARING GROOT */
.sd-widget .besparing-lbl{
font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.1em;color:#1fa85e;margin-bottom:6px;
}
.sd-widget .besparing-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;flex-wrap:nowrap;}
.sd-widget .besparing-min{
font-family:’Nunito’,sans-serif;font-weight:700;
font-size:28px;color:#1fa85e;opacity:.5;white-space:nowrap;
}
.sd-widget .besparing-sep{font-size:18px;color:#1fa85e;opacity:.3}
.sd-widget .besparing-max{
font-family:’Nunito’,sans-serif;font-weight:900;
font-size:42px;color:#1fa85e;line-height:1;white-space:nowrap;
}
.sd-widget .besparing-unit{font-size:13px;color:#1fa85e;opacity:.7;margin-bottom:2px}
.sd-widget .besparing-sub{font-size:12px;color:#aaa;line-height:1.5;margin-bottom:0}

(function(){
function fmt(n){return’\u20AC\u00a0’+Math.round(n).toLocaleString(‘nl-NL’)}
function fkwh(v){return v.toLocaleString(‘nl-NL’)+’\u00a0kWh’}
var bMin=3375,bMax=5625;

function upd(){
var v=+document.getElementById(‘sl-v’).value;
var d=+document.getElementById(‘sl-d’).value;
var t=+document.getElementById(‘sl-t’).value;
document.getElementById(‘v-out’).textContent=fkwh(v);
document.getElementById(‘d-out’).textContent=d+’%’;
document.getElementById(’t-out’).textContent=t.toLocaleString(‘nl-NL’,{minimumFractionDigits:1,maximumFractionDigits:1})+’\u00a0ct/kWh’;
var tar=t/100,dag=v*(d/100),nacht=v-dag,huidig=v*tar;
bMin=huidig-(dag*tar*0.85+nacht*tar);
bMax=huidig-(dag*tar*0.75+nacht*tar);
document.getElementById(‘r-min’).textContent=fmt(bMin);
document.getElementById(‘r-max’).textContent=fmt(bMax);
document.getElementById(‘r-sub’).textContent=’\u2248\u00a0’+fmt(bMin/12)+’\u00a0\u2013\u00a0’+fmt(bMax/12)+’\u00a0per maand’;
}[‘sl-v’,’sl-d’,’sl-t’].forEach(function(id){document.getElementById(id).addEventListener(‘input’,upd)});

// GA4 slider tracking (debounced)
var swTimers={};
var swLabels={‘sl-v’:’jaarverbruik’,’sl-d’:’dagverbruik’,’sl-t’:’markttarief’};
Object.keys(swLabels).forEach(function(id){
document.getElementById(id).addEventListener(‘input’,function(){
clearTimeout(swTimers[id]);
swTimers[id]=setTimeout(function(){
if(typeof gtag!==’undefined’){
gtag(‘event’,’slider_adjust’,{
event_category:’SlimDal Calculator’,
event_label:swLabels[id],
value:+document.getElementById(id).value,
page_location:window.location.href
});
}
},1000);
});
});

// Mobile touch fallback voor sliders
(function(){
var sliders = [‘sl-v’, ‘sl-d’, ‘sl-t’];
sliders.forEach(function(id){
var el = document.getElementById(id);
if(!el) return;
el.addEventListener(’touchstart’, function(e){ e.stopPropagation(); }, {passive:false});
el.addEventListener(’touchmove’, function(e){
e.stopPropagation();
e.preventDefault();
var touch = e.touches[0];
var rect = el.getBoundingClientRect();
var min = parseFloat(el.min);
var max = parseFloat(el.max);
var step = parseFloat(el.step)||1;
var pct = Math.max(0, Math.min(1, (touch.clientX – rect.left) / rect.width));
var raw = min + pct * (max – min);
var stepped = Math.round(raw / step) * step;
el.value = Math.max(min, Math.min(max, stepped));
el.dispatchEvent(new Event(‘input’, {bubbles:true}));
}, {passive:false});
});
})();
})();