Huis dat zich per bouwfase tekent Nieuw

<!-- Huis dat zich per bouwfase tekent · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7hb">
<p class="r7hb__h">Zo bouwen we uw huis in Drachten</p>
<div class="r7hb__grid">
<div class="r7hb__teken">
<svg class="r7hb__svg" viewBox="0 0 220 150" aria-hidden="true" focusable="false">
<path class="r7hb__vast" d="M8 136H212"/>
<g class="r7hb__f" data-f="0"><path pathLength="1" style="--i:0" d="M48 136V127H172V136"/><path pathLength="1" style="--i:1" d="M60 136L68 127M84 136L92 127M108 136L116 127M132 136L140 127M156 136L164 127"/></g>
<g class="r7hb__f" data-f="1"><path pathLength="1" style="--i:0" d="M56 127V78H164V127"/><path pathLength="1" style="--i:1" d="M56 102H164M56 90H110M110 114H164"/></g>
<g class="r7hb__f" data-f="2"><path pathLength="1" style="--i:0" d="M44 80L110 32L176 80"/><path pathLength="1" style="--i:1" d="M140 54V36H153V63"/><path pathLength="1" style="--i:2" d="M70 69L110 40L150 69"/></g>
<g class="r7hb__f" data-f="3"><path pathLength="1" style="--i:0" d="M70 92H94V114H70ZM82 92V114M70 103H94"/><path pathLength="1" style="--i:1" d="M126 92H150V114H126ZM138 92V114M126 103H150"/><path pathLength="1" style="--i:2" d="M100 127V100H120V127M115 114V115"/></g>
<g class="r7hb__f" data-f="4"><path pathLength="1" style="--i:0" d="M110 136L102 148M120 136L128 148"/><path pathLength="1" style="--i:1" d="M196 136V110M196 112C182 112 180 92 192 88C190 76 206 74 208 86C218 90 214 112 196 112"/><path pathLength="1" style="--i:2" d="M146 32C141 26 151 22 146 15C143 10 149 7 147 3"/><path pathLength="1" style="--i:3" d="M24 136V120M18 126L24 120L30 126"/></g>
</svg>
<p class="r7hb__st" aria-live="polite">Week 19: sleutel en oplevering</p>
</div>
<ol class="r7hb__fasen">
<li><button class="r7hb__b" type="button" data-f="0" aria-pressed="false">Fundering</button></li>
<li><button class="r7hb__b" type="button" data-f="1" aria-pressed="false">Ruwbouw</button></li>
<li><button class="r7hb__b" type="button" data-f="2" aria-pressed="false">Dak</button></li>
<li><button class="r7hb__b" type="button" data-f="3" aria-pressed="false">Afbouw</button></li>
<li><button class="r7hb__b" type="button" data-f="4" aria-pressed="true">Oplevering</button></li>
</ol>
</div>
</div>
</div>

/* Huis dat zich per bouwfase tekent · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7hb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7hb *,.r7hb *::before,.r7hb *::after{box-sizing:border-box}
.r7hb__h{margin:0;font:600 clamp(15px,4.6cqi,19px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em}
.r7hb__grid{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:center;min-height:0}
.r7hb__teken{min-width:0}
.r7hb__svg{display:block;width:100%;height:auto;max-height:62cqh;overflow:visible}
.r7hb__svg path{fill:none;stroke:#0a0a0a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.r7hb__vast{stroke:#b9b6b0!important}
.r7hb__f path{stroke-dasharray:1;stroke-dashoffset:1;stroke-opacity:0;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.3,1) calc(var(--i)*.16s),stroke .3s,stroke-opacity 0s linear .9s}
.r7hb__f.is-af path{stroke-dashoffset:0;stroke-opacity:1;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.3,1) calc(var(--i)*.16s),stroke .3s,stroke-opacity 0s}
.r7hb__f.is-nu path{stroke:#F5480F;stroke-width:2.1}
.r7hb__st{margin:4px 0 0;font:500 13px/1.3 'Switzer',sans-serif;color:#45433f}
.r7hb__fasen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.r7hb__b{width:100%;min-height:28px;padding:4px 10px;text-align:left;border:0;border-left:2px solid #dedbd6;border-radius:0 4px 4px 0;background:transparent;color:#5a5853;font:500 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:color .16s,border-color .16s,background-color .16s}
.r7hb__b:hover{color:#0a0a0a;background:#f4f3f1}
.r7hb__b.is-af{color:#0a0a0a;border-left-color:#0a0a0a}
.r7hb__b[aria-pressed="true"]{color:#0a0a0a;border-left-color:#F5480F;font-weight:650}
.r7hb__b:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
@container (max-height:230px){.r7hb__b{min-height:26px;padding:3px 8px}.r7hb__grid{grid-template-columns:minmax(0,1fr) 100px}}
@media (prefers-reduced-motion:reduce){.r7hb__f path{transition:none}}

// Huis dat zich per bouwfase tekent · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.r7hb');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var groepen=[].slice.call(w.querySelectorAll('.r7hb__f')),knoppen=[].slice.call(w.querySelectorAll('.r7hb__b')),st=w.querySelector('.r7hb__st');
var tekst=['Week 1 tot 3: grondwerk, heipalen en betonnen fundering','Week 4 tot 9: muren, vloeren en het casco','Week 10 en 11: kap, dakbeschot en pannen','Week 12 tot 18: kozijnen, deur en installaties','Week 19: sleutel en oplevering'];
function fase(n){
  groepen.forEach(function(g,i){g.classList.toggle('is-af',i<=n);g.classList.toggle('is-nu',i===n);});
  knoppen.forEach(function(b,i){b.setAttribute('aria-pressed',i===n?'true':'false');b.classList.toggle('is-af',i<n);});
  st.textContent=tekst[n];
}
knoppen.forEach(function(b,i){b.addEventListener('click',function(){gestopt=true;fase(i);});});
var gestopt=false;
function speel(){if(rm){fase(4);return;}fase(0);var i=0;(function volgende(){setTimeout(function(){if(gestopt)return;i++;if(i<5){fase(i);volgende();}},900);})();}
groepen.forEach(function(g){g.classList.remove('is-af');});
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(e){if(e[0].isIntersecting){io.disconnect();speel();}},{threshold:.4});io.observe(w);}else fase(4);
}
init(document.querySelector('.jouw-container'));