Lijnen van dienst naar teamlid Nieuw

<!-- Lijnen van dienst naar teamlid · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7wh">
<p class="r7wh__h">Wie helpt u bij Administratiekantoor Bakker?</p>
<div class="r7wh__grid">
<ul class="r7wh__diensten">
<li><button class="r7wh__d" type="button" aria-pressed="true" data-p="0 1">Belastingaangifte</button></li>
<li><button class="r7wh__d" type="button" aria-pressed="false" data-p="2">Loonadministratie</button></li>
<li><button class="r7wh__d" type="button" aria-pressed="false" data-p="1 3">Jaarrekening</button></li>
<li><button class="r7wh__d" type="button" aria-pressed="false" data-p="0 2 3">Startersadvies</button></li>
</ul>
<ul class="r7wh__team">
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">SW</span><span class="r7wh__naam">Sanne de Wit<span class="r7wh__rol">fiscalist</span></span></li>
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">JB</span><span class="r7wh__naam">Joris Bakker<span class="r7wh__rol">accountant</span></span></li>
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">MK</span><span class="r7wh__naam">Mehmet Kaya<span class="r7wh__rol">salarissen</span></span></li>
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">EV</span><span class="r7wh__naam">Ellen Vos<span class="r7wh__rol">adviseur mkb</span></span></li>
</ul>
<svg class="r7wh__svg" aria-hidden="true" focusable="false"></svg>
</div>
<p class="r7wh__sr" aria-live="polite"></p>
</div>
</div>

/* Lijnen van dienst naar teamlid · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7wh{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7wh *,.r7wh *::before,.r7wh *::after{box-sizing:border-box}
.r7wh__h{margin:0;font:600 clamp(15px,4.4cqi,18px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em}
.r7wh__grid{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(36px,16cqi,90px)}
.r7wh__diensten,.r7wh__team{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:4px;position:relative;z-index:1}
.r7wh__d{min-height:30px;padding:5px 10px;border:1px solid rgba(10,10,10,.2);border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1.1 'Switzer',sans-serif;text-align:left;cursor:pointer;width:100%;transition:border-color .16s,background-color .16s,color .16s}
.r7wh__d:hover{border-color:#0a0a0a}
.r7wh__d[aria-pressed="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.r7wh__d:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.r7wh__mens{display:flex;align-items:center;gap:8px;min-height:34px;transition:opacity .25s}
.r7wh__mens.is-uit{opacity:.35}
.r7wh__av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f4f3f1;border:1.5px solid #0a0a0a;font:600 12px/1 'Switzer',sans-serif;transition:background-color .25s,border-color .25s}
.r7wh__mens.is-aan .r7wh__av{background:#F5480F;border-color:#F5480F}
.r7wh__naam{display:flex;flex-direction:column;font:600 13px/1.15 'Switzer',sans-serif;min-width:0}
.r7wh__rol{font:400 12px/1.2 'Switzer',sans-serif;color:#5a5853}
.r7wh__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.r7wh__svg path{fill:none;stroke:#F5480F;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.3,1)}
.r7wh__svg path:not(.is-aan){stroke-linecap:butt}
.r7wh__svg path.is-aan{stroke-dashoffset:0}
.r7wh__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@container (max-width:360px){.r7wh__d{padding:5px 8px;font-size:12px}.r7wh__mens{min-height:32px}.r7wh__av{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.r7wh__svg path{transition:none}}

// Lijnen van dienst naar teamlid · © 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('.r7wh');if(!w)return;
var grid=w.querySelector('.r7wh__grid'),svg=w.querySelector('.r7wh__svg'),sr=w.querySelector('.r7wh__sr');
var ds=[].slice.call(w.querySelectorAll('.r7wh__d')),mensen=[].slice.call(w.querySelectorAll('.r7wh__mens'));
var NS='http://www.w3.org/2000/svg',actief=0,lijnen=[];
function bouw(){
  var g=grid.getBoundingClientRect();svg.setAttribute('viewBox','0 0 '+g.width+' '+g.height);
  while(svg.firstChild)svg.removeChild(svg.firstChild);lijnen=[];
  ds.forEach(function(d,i){var r=d.getBoundingClientRect(),x1=r.right-g.left+2,y1=r.top-g.top+r.height/2;
    d.getAttribute('data-p').split(' ').forEach(function(pi){var av=mensen[+pi].querySelector('.r7wh__av').getBoundingClientRect();
      var x2=av.left-g.left-3,y2=av.top-g.top+av.height/2,mx=(x1+x2)/2;
      var p=document.createElementNS(NS,'path');p.setAttribute('d','M'+x1.toFixed(1)+' '+y1.toFixed(1)+'C'+mx.toFixed(1)+' '+y1.toFixed(1)+' '+mx.toFixed(1)+' '+y2.toFixed(1)+' '+x2.toFixed(1)+' '+y2.toFixed(1));
      p.setAttribute('pathLength','1');p.setAttribute('data-d',i);svg.appendChild(p);lijnen.push(p);});
  });
  zet(actief,true);
}
function zet(i,stil){
  actief=i;var p=ds[i].getAttribute('data-p').split(' ').map(Number);
  ds.forEach(function(d,j){d.setAttribute('aria-pressed',j===i?'true':'false');});
  mensen.forEach(function(m,j){var aan=p.indexOf(j)>-1;m.classList.toggle('is-aan',aan);m.classList.toggle('is-uit',!aan);});
  lijnen.forEach(function(l){if(stil)l.style.transition='none';l.classList.toggle('is-aan',+l.getAttribute('data-d')===i);if(stil){l.getBoundingClientRect();l.style.transition='';}});
  if(!stil)sr.textContent=ds[i].textContent+': '+p.map(function(j){return mensen[j].querySelector('.r7wh__naam').firstChild.textContent;}).join(' en ');
}
ds.forEach(function(d,i){d.addEventListener('pointerenter',function(){if(i!==actief)zet(i);});d.addEventListener('focus',function(){if(i!==actief)zet(i);});d.addEventListener('click',function(){if(i!==actief)zet(i);});});
if('ResizeObserver' in window){new ResizeObserver(function(){bouw();}).observe(grid);}else bouw();
bouw();
}
init(document.querySelector('.jouw-container'));