Case-index als tabel met preview New

<!-- Case-index als tabel met preview · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cit">
  <div class="cit__in">
    <div class="cit__head">
      <h2 class="cit__h">Wegwijs Signing<br><span>Projecten 2019 tot nu</span></h2>
      <p class="cit__intro">Bewegwijzering voor gebouwen waar mensen de weg kwijt raken: ziekenhuizen, campussen, garages en musea.</p>
    </div>
    <table class="cit__table">
      <thead><tr><th scope="col">Klant</th><th scope="col">Jaar</th><th scope="col">Dienst</th><th scope="col">Resultaat</th></tr></thead>
      <tbody>
        <tr data-c="#ffd23f" data-k="#0f1b2d" data-s="H"><td>Ziekenhuis De Linge</td><td>2026</td><td>Routeplan + borden</td><td>38% minder routevragen aan de balie</td></tr>
        <tr data-c="#5ec2b7" data-k="#0f1b2d" data-s="P"><td>Parkeergarage Spoorzone</td><td>2025</td><td>Kleurzones per verdieping</td><td>Zoektijd naar auto van 7 naar 2 min</td></tr>
        <tr data-c="#f26b4f" data-k="#fff" data-s="C"><td>Campus Hoogveld</td><td>2025</td><td>Masterplan wayfinding</td><td>14 gebouwen, 1 nummersysteem</td></tr>
        <tr data-c="#e8e2d0" data-k="#0f1b2d" data-s="M"><td>Museum Het Waterhuis</td><td>2024</td><td>Zaalteksten + vloerlijnen</td><td>Gemiddelde bezoekduur +22 min</td></tr>
        <tr data-c="#3a6ea5" data-k="#fff" data-s="W"><td>Winkelcentrum De Kroon</td><td>2023</td><td>Totems + digitale plattegrond</td><td>Leegstand gedaald van 9 naar 3 units</td></tr>
        <tr data-c="#9bc53d" data-k="#0f1b2d" data-s="Z"><td>Zorgcentrum Lindehof</td><td>2022</td><td>Dementievriendelijke routes</td><td>Halvering dwaalmeldingen in jaar 1</td></tr>
      </tbody>
    </table>
  </div>
  <div class="cit__pv" aria-hidden="true"><div class="cit__pvimg"><svg viewBox="0 0 120 80"><rect x="18" y="16" width="84" height="40" rx="3" fill="currentColor" opacity=".9"/><path d="M34 36h34m-10-9 10 9-10 9" stroke="var(--k)" stroke-width="5" fill="none" stroke-linecap="square"/><rect x="57" y="56" width="6" height="18" fill="currentColor" opacity=".9"/><text x="88" y="41" font-family="JetBrains Mono,monospace" font-size="13" font-weight="700" fill="var(--k)" class="cit__pvs">H</text></svg></div><span class="cit__pvcap"></span></div>
</div>
</div>

/* Case-index als tabel met preview · NedDev · eigen werk. */
.cit{position:relative;background:#0f1b2d;color:#f2efe6;font-family:'Switzer',sans-serif;box-sizing:border-box;overflow:hidden}
.cit *{box-sizing:border-box}
.cit__in{max-width:1180px;margin:0 auto;padding:44px 32px 46px}
.cit__head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:28px}
.cit__h{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1;margin:0}
.cit__h span{color:#ffd23f;font-weight:500;font-size:.62em;letter-spacing:-.01em}
.cit__intro{margin:0;color:rgba(242,239,230,.7);font-size:15px;line-height:1.55;max-width:44ch;justify-self:end}
.cit__table{width:100%;border-collapse:collapse;font-size:15px}
.cit__table th{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,239,230,.5);text-align:left;padding:0 12px 12px 0;border-bottom:1px solid rgba(242,239,230,.25)}
.cit__table td{padding:15px 12px 15px 0;border-bottom:1px solid rgba(242,239,230,.12);transition:color .2s,padding .3s}
.cit__table td:first-child{font-weight:600;font-size:17px}
.cit__table td:nth-child(2){font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(242,239,230,.6)}
.cit__table td:last-child{color:rgba(242,239,230,.8)}
.cit__table tbody tr{cursor:pointer}
.cit__table tbody tr:hover td{color:#ffd23f}
.cit__table tbody tr:hover td:first-child{padding-left:10px}
.cit__table tbody tr:focus-visible{outline:2px solid #ffd23f;outline-offset:-2px}
.cit__pv{position:absolute;left:0;top:0;width:220px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.85);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);z-index:3}
.cit__pv.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cit__pvimg{background:var(--c,#ffd23f);color:#fff;border-radius:4px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.35);background-image:linear-gradient(135deg,rgba(255,255,255,.18) 25%,transparent 25% 50%,rgba(255,255,255,.18) 50% 75%,transparent 75%);background-size:22px 22px}
.cit__pvimg svg{width:78%;height:auto;color:var(--k-inv,#0f1b2d)}
.cit__pvcap{display:block;margin-top:8px;font:500 11px 'JetBrains Mono',monospace;color:#ffd23f;letter-spacing:.08em}
@media(max-width:760px){.cit__in{padding:30px 16px 32px}.cit__head{grid-template-columns:1fr;gap:12px}.cit__intro{justify-self:start;font-size:14px}
.cit__table thead{display:none}.cit__table,.cit__table tbody,.cit__table tr,.cit__table td{display:block}
.cit__table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:14px 0;border-bottom:1px solid rgba(242,239,230,.14)}
.cit__table td{border:0;padding:0}.cit__table td:first-child{font-size:16px}.cit__table td:nth-child(2){text-align:right}
.cit__table td:nth-child(3){grid-column:1/-1;font-size:13px;color:rgba(242,239,230,.6)}.cit__table td:last-child{grid-column:1/-1;font-size:14px;color:#ffd23f}
.cit__table tbody tr:hover td:first-child{padding-left:0}.cit__pv{display:none}}
@media(prefers-reduced-motion:reduce){.cit__pv,.cit__table td{transition:none}}

// Case-index als tabel met preview · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cit');if(!w)return;
var pv=w.querySelector('.cit__pv'),img=w.querySelector('.cit__pvimg'),cap=w.querySelector('.cit__pvcap'),s=w.querySelector('.cit__pvs');
var rows=w.querySelectorAll('tbody tr');var tx=0,ty=0,x=0,y=0,raf=0;
var red=matchMedia('(prefers-reduced-motion: reduce)').matches;
function loop(){x+=(tx-x)*(red?1:.22);y+=(ty-y)*(red?1:.22);pv.style.left=x+'px';pv.style.top=y+'px';if(Math.abs(tx-x)>.5||Math.abs(ty-y)>.5){raf=requestAnimationFrame(loop);}else{raf=0;}}
function move(e){var r=w.getBoundingClientRect();tx=Math.min(Math.max(e.clientX-r.left+130,120),r.width-120);ty=e.clientY-r.top;if(!raf)raf=requestAnimationFrame(loop);}
rows.forEach(function(tr){tr.tabIndex=0;
  tr.addEventListener('mouseenter',function(e){img.style.setProperty('--c',tr.getAttribute('data-c'));img.style.setProperty('--k',tr.getAttribute('data-k'));img.style.color=tr.getAttribute('data-k')==='#fff'?'#0f1b2d':'#fff';s.textContent=tr.getAttribute('data-s');cap.textContent=tr.cells[0].textContent+' / '+tr.cells[1].textContent;
    var r=w.getBoundingClientRect();if(!pv.classList.contains('is-on')){x=tx=Math.min(Math.max(e.clientX-r.left+130,120),r.width-120);y=ty=e.clientY-r.top;pv.style.left=x+'px';pv.style.top=y+'px';}pv.classList.add('is-on');});
  tr.addEventListener('mousemove',move);
  tr.addEventListener('mouseleave',function(){pv.classList.remove('is-on');});});
}
init(document.querySelector('.jouw-container'));