Leesvoortgang met getal en sectienaam New

<!-- Leesvoortgang met getal en sectienaam · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="svp"><div class="svp__sc" tabindex="0" aria-label="Artikel: wat kost een dakkapel in 2026"><article class="svp__art">
<p class="svp__k">Kennisbank · Dakwerken Visser, Zwolle</p><h4 class="svp__h">Wat kost een dakkapel in 2026?</h4>
<p>Een eerlijk overzicht van prijs, regels en planning, op basis van 120 dakkapellen die we in 2025 plaatsten.</p>
<h5 data-sec="Prijs">Prijs per meter</h5><p>Een prefab dakkapel van 3 meter breed kost bij ons inclusief plaatsing tussen € 9.500 en € 12.800. Kunststof kozijnen zijn het voordeligst, hout kost circa € 900 meer.</p><p>Rolluiken, extra isolatie en een tweede raam rekenen we los, zodat je precies ziet waar je voor betaalt.</p>
<h5 data-sec="Vergunning">Vergunning</h5><p>Aan de achterkant is vaak geen vergunning nodig, aan de voorkant meestal wel. We checken het voor je in het Omgevingsloket voordat je tekent.</p><p>Woon je in een beschermd stadsgezicht, reken dan op acht weken extra.</p>
<h5 data-sec="Planning">Planning</h5><p>De dakkapel wordt in onze werkplaats in vier tot zes weken gebouwd. Plaatsen duurt één dag; de kraan staat er een ochtend.</p><p>Binnen afwerken doen we in de dagen erna, of je doet het zelf.</p>
<h5 data-sec="Subsidie">Subsidie</h5><p>Voor dakisolatie kan in sommige gevallen ISDE-subsidie gelden. Kijk voor de actuele voorwaarden op rvo.nl; wij leveren de isolatiewaarden aan.</p>
<p class="svp__eind">[ Einde artikel · 3 min lezen ]</p></article></div>
<div class="svp__lijn" role="progressbar" aria-label="Leesvoortgang" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div>
<button class="svp__hoek" type="button" aria-expanded="false"><span class="svp__pct">0%</span><span class="svp__sec">Intro</span></button>
<div class="svp__toc" hidden><p class="svp__tt">Inhoud</p></div></div>
</div>

/* Leesvoortgang met getal en sectienaam · NedDev · eigen werk. */
.svp{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;timeline-scope:--svp-tl;container-type:size}
.svp__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;scroll-timeline:--svp-tl y}
.svp__sc::-webkit-scrollbar{display:none}
.svp__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.svp__art{padding:16px 18px 64px 28px;max-width:62ch;font-size:13px;line-height:1.6;color:#2a2a2a}
.svp__art p{margin:0 0 10px}
.svp__k{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#666}
.svp__h{margin:0 0 8px;font:700 clamp(17px,6cqi,32px)/1.08 'Switzer',sans-serif;letter-spacing:-.02em;color:#0a0a0a}
.svp__art h5{margin:18px 0 6px;font:700 15px 'Switzer',sans-serif;color:#0a0a0a;scroll-margin-top:12px}
.svp__eind{font:500 10px 'JetBrains Mono',monospace;color:#888}
.svp__lijn{position:absolute;left:12px;top:14px;bottom:14px;width:2px;background:#eceae6;border-radius:2px;overflow:hidden}
.svp__lijn i{display:block;width:100%;height:100%;background:#F5480F;transform-origin:0 0;transform:scaleY(0)}
@supports (animation-timeline: scroll()){.svp__lijn i{animation:svp-vul linear both;animation-timeline:--svp-tl}}
@keyframes svp-vul{to{transform:scaleY(1)}}
.svp__hoek{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:4px;border:0;background:#0a0a0a;color:#fff;font:600 11px/1 'JetBrains Mono',monospace;cursor:pointer;transition:background .18s}
.svp__hoek:hover{background:#333}
.svp__hoek:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.svp__pct{color:#F5480F;min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.svp__sec{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svp__toc{position:absolute;right:10px;bottom:46px;min-width:160px;background:#fff;border:1px solid rgba(10,10,10,.15);border-radius:4px;padding:6px;box-shadow:0 12px 28px -14px rgba(0,0,0,.35)}
.svp__tt{margin:2px 6px 4px;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#777}
.svp__toc button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;font:500 12px 'Switzer',sans-serif;padding:6px;border:0;border-radius:3px;background:transparent;color:#0a0a0a;cursor:pointer}
.svp__toc button:hover{background:#f4f3f1}
.svp__toc button:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.svp__toc button[aria-current]{font-weight:700}
.svp__toc button[aria-current]::after{content:'';width:6px;height:6px;border-radius:50%;background:#F5480F;align-self:center}

// Leesvoortgang met getal en sectienaam · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.svp')||root;function lab_drift(sc,host,speed){if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;var on=true,t0=0;function stop(){on=false;}
['wheel','touchstart','pointerdown','keydown','focusin'].forEach(function(ev){host.addEventListener(ev,stop,{passive:true});});
function f(now){if(!on)return;if(!t0)t0=now;var max=sc.scrollHeight-sc.clientHeight,ph=(now-t0)/1000*speed;sc.scrollTop=max*(.5-.5*Math.cos(ph));requestAnimationFrame(f);}
setTimeout(function(){if(on)requestAnimationFrame(f);},900);}
var sc=root.querySelector('.svp__sc'),fill=root.querySelector('.svp__lijn i'),lijn=root.querySelector('.svp__lijn'),pct=root.querySelector('.svp__pct'),sec=root.querySelector('.svp__sec'),hoek=root.querySelector('.svp__hoek'),toc=root.querySelector('.svp__toc');
var hs=[].slice.call(root.querySelectorAll('[data-sec]')),css=window.CSS&&CSS.supports&&CSS.supports('animation-timeline: scroll()'),rm=matchMedia('(prefers-reduced-motion: reduce)').matches,tk=false,cur='';
toc.id='svp-toc-'+Math.random().toString(36).slice(2,7);hoek.setAttribute('aria-controls',toc.id);
var knoppen=hs.map(function(h){var b=document.createElement('button');b.type='button';b.textContent=h.textContent;b.addEventListener('click',function(){sc.scrollTo({top:h.offsetTop-12,behavior:rm?'auto':'smooth'});dicht();sc.focus({preventScroll:true});});toc.appendChild(b);return b;});
function upd(){tk=false;var max=sc.scrollHeight-sc.clientHeight,p=max>0?sc.scrollTop/max:0,v=Math.round(p*100);pct.textContent=v+'%';lijn.setAttribute('aria-valuenow',v);if(!css)fill.style.transform='scaleY('+p.toFixed(4)+')';
  var naam='Intro',idx=-1;hs.forEach(function(h,k){if(h.offsetTop-sc.scrollTop<sc.clientHeight*.4){naam=h.getAttribute('data-sec');idx=k;}});if(p>.985){naam='Einde';}
  if(naam!==cur){cur=naam;sec.textContent=naam;knoppen.forEach(function(b,k){if(k===idx)b.setAttribute('aria-current','true');else b.removeAttribute('aria-current');});}}
sc.addEventListener('scroll',function(){if(!tk){tk=true;requestAnimationFrame(upd);}},{passive:true});
function dicht(){toc.hidden=true;hoek.setAttribute('aria-expanded','false');}
hoek.addEventListener('click',function(){var o=toc.hidden;toc.hidden=!o;hoek.setAttribute('aria-expanded',o?'true':'false');if(o&&knoppen[0])knoppen[0].focus();});
root.addEventListener('keydown',function(e){if(e.key==='Escape'&&!toc.hidden){dicht();hoek.focus();}});
sc.addEventListener('pointerdown',dicht);
upd();lab_drift(sc,root,.22);
}
init(document.querySelector('.jouw-container'));