Hero waarin je het licht aandoet Nieuw

<!-- Hero waarin je het licht aandoet · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hlk">
<img class="hlk__img" src="https://neddev.com/lab-media/hk-lichtknop-1.webp" alt="Woonkamer in de avond met hanglampen boven een houten tafel" width="1376" height="768">
<div class="hlk__shade" aria-hidden="true"></div>
<button class="hlk__sw" type="button" role="switch" aria-checked="false" aria-label="Licht"><span class="hlk__rk" aria-hidden="true"></span></button>
<div class="hlk__txt">
<h2 class="hlk__h">Licht dat een kamer warm maakt</h2>
<p class="hlk__p hlk__p--uit">Doe het licht maar aan.</p>
<div class="hlk__aan"><p class="hlk__p">Lampenwinkel Brandpunt in Den Bosch. Gratis lichtadvies bij je thuis.</p>
<a class="hlk__cta" href="#hk-lichtknop" tabindex="-1">Plan lichtadvies</a></div>
</div>
</div>
</div>

/* Hero waarin je het licht aandoet · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hlk{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;color:#fff;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hlk *,.hlk *::before,.hlk *::after{box-sizing:border-box}
.hlk__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.13) saturate(.3) contrast(1.1);transition:filter .9s ease}
.hlk.is-on .hlk__img{filter:none}
.hlk.is-flick .hlk__img{animation:hlk-flik .55s steps(1) both}
@keyframes hlk-flik{0%{filter:brightness(.6) saturate(.8)}18%{filter:brightness(.15) saturate(.3)}34%{filter:brightness(.85)}48%{filter:brightness(.25) saturate(.4)}64%{filter:none}100%{filter:none}}
.hlk__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.7),rgba(10,10,10,0) 70%);opacity:0;transition:opacity .9s ease}
.hlk.is-on .hlk__shade{opacity:1}
.hlk__txt{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:62%;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hlk__h{margin:0;font:700 clamp(20px,6.6cqi,42px)/1.04 'Switzer',sans-serif;letter-spacing:-.025em;color:#8a8680;transition:color .9s ease;text-wrap:balance}
.hlk.is-on .hlk__h{color:#fff}
.hlk__p{margin:0;font:400 clamp(12px,2.9cqi,15px)/1.4 'Switzer',sans-serif;color:#eceae6}
.hlk__p--uit{color:#bdb8b0}
.hlk__aan{display:flex;flex-direction:column;align-items:flex-start;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .5s ease .5s,transform .5s ease .5s;visibility:hidden}
.hlk.is-on .hlk__aan{opacity:1;transform:none;visibility:visible}
.hlk.is-on .hlk__p--uit{display:none}
.hlk__cta{padding:9px 14px;background:#F5480F;color:#0a0a0a;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.hlk__cta:hover{background:#ff6a36}
.hlk__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hlk__sw{position:absolute;right:clamp(16px,6cqi,48px);top:50%;transform:translateY(-50%);width:52px;height:70px;padding:9px 11px;border:0;border-radius:4px;background:#efece7;box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:pointer}
.hlk__sw::before{content:'';position:absolute;left:50%;top:50%;width:68px;height:68px;transform:translate(-50%,-50%);border-radius:8px;border:2px solid rgba(245,72,15,.0);animation:hlk-hint 2.4s ease-in-out infinite}
.hlk.is-on .hlk__sw::before{animation:none}
@keyframes hlk-hint{0%,100%{border-color:rgba(245,72,15,0)}50%{border-color:rgba(245,72,15,.9)}}
.hlk__rk{display:block;width:100%;height:100%;border-radius:4px;background:linear-gradient(180deg,#d6d2cb 0 50%,#fbfaf8 50% 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);transition:background .15s}
.hlk__sw[aria-checked="true"] .hlk__rk{background:linear-gradient(180deg,#fbfaf8 0 50%,#d6d2cb 50% 100%);box-shadow:inset 0 2px 0 rgba(0,0,0,.12)}
.hlk__sw:focus-visible{outline:3px solid #F5480F;outline-offset:4px}
@container (max-width:420px){.hlk__sw{width:44px;height:60px;padding:8px 9px}.hlk__sw::before{width:58px;height:58px}}
@media (prefers-reduced-motion:reduce){.hlk__img,.hlk__aan,.hlk__h,.hlk__shade{transition:none}.hlk.is-flick .hlk__img,.hlk__sw::before{animation:none}}

// Hero waarin je het licht aandoet · © 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){
const w=root.querySelector('.hlk');if(!w)return;
const sw=w.querySelector('.hlk__sw'),cta=w.querySelector('.hlk__cta'),rm=matchMedia('(prefers-reduced-motion: reduce)').matches;let tm=0;
sw.addEventListener('click',()=>{const on=sw.getAttribute('aria-checked')!=='true';sw.setAttribute('aria-checked',on);clearTimeout(tm);
cta.tabIndex=on?0:-1;w.classList.remove('is-flick');
if(on){if(!rm){void w.offsetWidth;w.classList.add('is-flick');tm=setTimeout(()=>w.classList.remove('is-flick'),600);}w.classList.add('is-on');}else w.classList.remove('is-on');});
}
init(document.querySelector('.jouw-container'));