Achtergrond kleurt mee per smaak Nieuw

<!-- Achtergrond kleurt mee per smaak · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="ks">
  <div class="ks__vak" tabindex="0" role="region" aria-label="Smaken van deze week. Scroll in dit vak, de achtergrond kleurt mee.">
    <div class="ks__bg" aria-hidden="true"></div>
    <div class="ks__s"><div class="ks__ijs" style="--b:#93b25c" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Pistache</h3><p class="ks__p">Sicilaanse pistache, licht gezouten, met stukjes noot.</p><p class="ks__prijs">€ 2,20 per bol</p></div></div>
    <div class="ks__s"><div class="ks__ijs" style="--b:#e0535d" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Aardbei</h3><p class="ks__p">Van een kwekerij in Made, alleen in juni en juli.</p><p class="ks__prijs">€ 2,20 per bol</p></div></div>
    <div class="ks__s"><div class="ks__ijs" style="--b:#f5a20f" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Mango</h3><p class="ks__p">Alphonso-mango, zonder zuivel en dus vegan.</p><p class="ks__prijs">€ 2,40 per bol</p></div></div>
    <div class="ks__s"><div class="ks__ijs ks__ijs--strac" style="--b:#fffdf8" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Stracciatella</h3><p class="ks__p">Room uit Twente met flinters pure chocolade.</p><p class="ks__prijs">€ 2,20 per bol</p></div></div>
    <div class="ks__s ks__s--donker"><div class="ks__ijs" style="--b:#24130c" aria-hidden="true"></div><div class="ks__t"><h3 class="ks__naam">Chocolade</h3><p class="ks__p">70 procent cacao uit Ghana, gedraaid in Zwolle.</p><p class="ks__prijs">€ 2,40 per bol</p></div></div>
  </div>
  <div class="ks__nav" role="group" aria-label="Spring naar een smaak">
    <button type="button" class="ks__knop" style="--c:#93b25c" aria-label="Naar Pistache" aria-current="true"></button>
    <button type="button" class="ks__knop" style="--c:#e0535d" aria-label="Naar Aardbei"></button>
    <button type="button" class="ks__knop" style="--c:#f5a20f" aria-label="Naar Mango"></button>
    <button type="button" class="ks__knop" style="--c:#fffdf8" aria-label="Naar Stracciatella"></button>
    <button type="button" class="ks__knop" style="--c:#24130c" aria-label="Naar Chocolade"></button>
  </div>
  <p class="ks__hint" aria-hidden="true">Scroll door de smaken</p>
</div>
</div>

/* Achtergrond kleurt mee per smaak · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.ks{position:absolute;inset:0;container-type:size;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#d4e3b8}
.ks__vak{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;scroll-snap-type:y proximity;scroll-timeline:--ks y}
.ks__vak::-webkit-scrollbar{display:none}
.ks__vak:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.ks__bg{position:sticky;top:0;height:100cqh;margin-bottom:-100cqh;background:#d4e3b8}
@supports (animation-timeline: scroll()){.ks__bg{animation:ks-kleur linear both;animation-timeline:--ks}}
@keyframes ks-kleur{0%,8%{background:#d4e3b8}17%,33%{background:#f7c9c6}42%,58%{background:#ffd77a}67%,83%{background:#f4f3f1}92%,100%{background:#3b241a}}
.ks__s{position:relative;height:100cqh;display:flex;align-items:center;gap:6cqw;padding:0 60px 0 8cqw;box-sizing:border-box;scroll-snap-align:start}
.ks__s--donker{color:#fff}
.ks__ijs{position:relative;flex:none;width:30cqh;height:58cqh}
.ks__ijs::before{content:'';position:absolute;left:0;top:0;width:30cqh;height:28cqh;border-radius:50% 50% 44% 44%;background:var(--b);box-shadow:inset -6px -8px 0 rgba(0,0,0,.1)}
.ks__ijs::after{content:'';position:absolute;left:3cqh;top:24cqh;width:24cqh;height:34cqh;background:repeating-linear-gradient(45deg,#d9a46a 0 5px,#c98f55 5px 7px);clip-path:polygon(0 0,100% 0,50% 100%)}
.ks__ijs--strac::before{background:radial-gradient(circle,#2b170f 1.4px,transparent 1.6px) 0 0/9px 8px,var(--b)}
.ks__s--donker .ks__ijs::before{box-shadow:inset -6px -8px 0 rgba(255,255,255,.08),0 0 0 2px rgba(255,255,255,.25)}
.ks__t{min-width:0}
.ks__naam{font-size:clamp(22px,8cqw,34px);font-weight:700;line-height:1.05;margin:0 0 6px}
.ks__p{font-size:clamp(12px,3.4cqw,14px);line-height:1.4;margin:0 0 8px;max-width:28ch}
.ks__prijs{font-size:clamp(13px,3.6cqw,15px);font-weight:600;margin:0}
.ks__nav{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.ks__knop{width:24px;height:24px;padding:0;border:2px solid #0a0a0a;border-radius:4px;background:var(--c);cursor:pointer}
.ks__knop[aria-current="true"]{outline:2px solid #F5480F;outline-offset:2px}
.ks__knop:focus-visible{outline:3px solid #0a0a0a;outline-offset:2px}
.ks__hint{position:absolute;left:10px;bottom:8px;margin:0;font-size:12px;background:#fff;padding:3px 8px;border-radius:4px;pointer-events:none;transition:opacity .3s}
.ks.is-weg .ks__hint{opacity:0}

// Achtergrond kleurt mee per smaak · © 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('.ks'); if (!w) return;
    const vak = w.querySelector('.ks__vak'), bg = w.querySelector('.ks__bg'), knoppen = [...w.querySelectorAll('.ks__knop')];
    const rm = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const css = window.CSS && CSS.supports && CSS.supports('animation-timeline: scroll()');
    const kl = ['#d4e3b8', '#f7c9c6', '#ffd77a', '#f4f3f1', '#3b241a'];
    const hex = h => [1, 3, 5].map(i => parseInt(h.slice(i, i + 2), 16));
    const mix = (a, b, t) => { const x = hex(a), y = hex(b); return 'rgb(' + x.map((v, i) => Math.round(v + (y[i] - v) * t)).join(',') + ')'; };
    let raf = 0, actief = 0;
    function teken() {
      raf = 0; const h = vak.clientHeight || 1, z = vak.scrollTop / h;
      const i = Math.max(0, Math.min(4, Math.round(z)));
      if (i !== actief) { knoppen[actief].removeAttribute('aria-current'); knoppen[i].setAttribute('aria-current', 'true'); actief = i; }
      if (!css) {
        const k = Math.min(3, Math.floor(z)), f = Math.max(0, Math.min(1, (z - k - .32) / .36));
        bg.style.background = mix(kl[k], kl[k + 1], f);
      }
      w.classList.toggle('is-weg', vak.scrollTop > 8);
    }
    knoppen.forEach((b, i) => b.addEventListener('click', () => vak.scrollTo({ top: i * vak.clientHeight, behavior: rm ? 'auto' : 'smooth' })));
    vak.addEventListener('scroll', () => { if (!raf) raf = requestAnimationFrame(teken); }, { passive: true });
    teken();
}
init(document.querySelector('.jouw-container'));