Team-rooster met beschikbaarheid Nieuw

<!-- Team-rooster met beschikbaarheid · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tbs">
  <div class="tbs__in">
    <div class="tbs__head">
      <div><span class="tbs__eye">Fysiotherapie Kralingen · Rotterdam</span>
      <h2 class="tbs__h">Wie heeft deze week nog plek?</h2></div>
      <ul class="tbs__legend"><li><i class="tbs__dot tbs__dot--vrij"></i>Plek vrij</li><li><i class="tbs__dot tbs__dot--weinig"></i>Nog 1 plek</li><li><i class="tbs__dot tbs__dot--vol"></i>Vol</li><li><i class="tbs__dot tbs__dot--af"></i>Niet aanwezig</li></ul>
    </div>
    <div class="tbs__table" role="table" aria-label="Beschikbaarheid deze week">
      <div class="tbs__row tbs__row--head" role="row"><span role="columnheader">Therapeut</span><span role="columnheader" data-day="1">Ma</span><span role="columnheader" data-day="2">Di</span><span role="columnheader" data-day="3">Wo</span><span role="columnheader" data-day="4">Do</span><span role="columnheader" data-day="5">Vr</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#0e6e6e">SV</i><span><b>Sanne Verbeek</b>Sportblessures, knie</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--vrij">3 plekken</span><span role="cell" data-day="2" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="3" class="tbs__c tbs__c--weinig">1 plek</span><span role="cell" data-day="4" class="tbs__c tbs__c--af">Afwezig</span><span role="cell" data-day="5" class="tbs__c tbs__c--vrij">4 plekken</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#3f8f7a">RO</i><span><b>Rachid Ouali</b>Rug en nek, manueel</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="2" class="tbs__c tbs__c--vrij">2 plekken</span><span role="cell" data-day="3" class="tbs__c tbs__c--vrij">5 plekken</span><span role="cell" data-day="4" class="tbs__c tbs__c--weinig">1 plek</span><span role="cell" data-day="5" class="tbs__c tbs__c--af">Afwezig</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#c0794a">ED</i><span><b>Eva de Groot</b>Bekken, zwangerschap</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--af">Afwezig</span><span role="cell" data-day="2" class="tbs__c tbs__c--weinig">1 plek</span><span role="cell" data-day="3" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="4" class="tbs__c tbs__c--vrij">3 plekken</span><span role="cell" data-day="5" class="tbs__c tbs__c--vrij">2 plekken</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#2c4a63">MJ</i><span><b>Mark Jansen</b>Ouderen, valpreventie</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--vrij">2 plekken</span><span role="cell" data-day="2" class="tbs__c tbs__c--vrij">4 plekken</span><span role="cell" data-day="3" class="tbs__c tbs__c--af">Afwezig</span><span role="cell" data-day="4" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="5" class="tbs__c tbs__c--weinig">1 plek</span></div>
    </div>
    <div class="tbs__foot"><span>Bijgewerkt vandaag om 08:15. Geen verwijzing nodig.</span><a href="tel:+31101234890" class="tbs__btn">Bel de balie · 010 123 4890</a></div>
  </div>
</div>
</div>

/* Team-rooster met beschikbaarheid · NedDev · eigen werk. */
.tbs{background:#eef6f3;color:#12302e;font-family:'Switzer',sans-serif;box-sizing:border-box}
.tbs *{box-sizing:border-box}
.tbs__in{max-width:1180px;margin:0 auto;padding:40px 32px 40px}
.tbs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.tbs__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#0e6e6e}
.tbs__h{font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.02em;margin:8px 0 0;line-height:1.1}
.tbs__legend{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#3d5654}
.tbs__legend li{display:flex;align-items:center;gap:6px}
.tbs__dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.tbs__dot--vrij,.tbs__c--vrij::before{background:#1aa37a}.tbs__dot--weinig,.tbs__c--weinig::before{background:#e0a526}.tbs__dot--vol,.tbs__c--vol::before{background:#c8553d}.tbs__dot--af,.tbs__c--af::before{background:#b9c7c4}
.tbs__table{background:#fff;border-radius:6px;border:1px solid #d3e4df;overflow:hidden}
.tbs__row{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(5,1fr);align-items:stretch;border-top:1px solid #e3eeea}
.tbs__row--head{border-top:0;background:#12302e;color:#eef6f3;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.tbs__row--head span{padding:11px 14px}
.tbs__who{display:flex;align-items:center;gap:12px;padding:12px 14px}
.tbs__who i{width:38px;height:38px;border-radius:50%;flex:none;color:#fff;font:600 12px 'JetBrains Mono',monospace;font-style:normal;display:flex;align-items:center;justify-content:center}
.tbs__who span{display:flex;flex-direction:column;font-size:12.5px;color:#5a7270}
.tbs__who b{font-size:15px;color:#12302e;font-weight:600}
.tbs__c{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:13.5px;border-left:1px solid #e3eeea}
.tbs__c::before{content:'';width:9px;height:9px;border-radius:50%;flex:none}
.tbs__c--vol,.tbs__c--af{color:#8aa09d}
.tbs__row--head .is-today{background:#0e6e6e;color:#fff}
.tbs__row--head .is-today::after{content:' · vandaag';text-transform:none;letter-spacing:0}
.tbs__c.is-today{background:#e2f4ee;font-weight:600}
.tbs__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:#3d5654}
.tbs__btn{background:#0e6e6e;color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:11px 18px;border-radius:999px;transition:background .2s}
.tbs__btn:hover{background:#12302e}
.tbs__btn:focus-visible{outline:2px solid #0e6e6e;outline-offset:2px}
@media(max-width:760px){.tbs__in{padding:28px 16px}.tbs__row--head{display:none}
.tbs__row{grid-template-columns:repeat(5,1fr);padding:0 0 10px}
.tbs__who{grid-column:1/-1;padding:12px 12px 8px}
.tbs__c{flex-direction:column;align-items:flex-start;gap:4px;border-left:0;padding:6px 4px 6px 12px;font-size:11px;line-height:1.2}
.tbs__c::before{order:-1}
.tbs__c[data-day]::after{content:attr(data-label);order:-2;font:600 10px 'JetBrains Mono',monospace;color:#12302e;text-transform:uppercase}
.tbs__c.is-today{border-radius:3px}
.tbs__btn{width:100%;text-align:center}}

// Team-rooster met beschikbaarheid · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.tbs');if(!w)return;
var names={1:'Ma',2:'Di',3:'Wo',4:'Do',5:'Vr'};
w.querySelectorAll('.tbs__c').forEach(function(c){c.setAttribute('data-label',names[c.getAttribute('data-day')]);});
var d=new Date().getDay();if(d===0||d===6)d=1;
w.querySelectorAll('[data-day="'+d+'"]').forEach(function(c){c.classList.add('is-today');});
var t=w.querySelector('.tbs__foot span');var n=new Date();if(t&&n.getDay()!==0&&n.getDay()!==6){}else if(t){t.textContent='Rooster voor de komende week. Geen verwijzing nodig.';}
}
init(document.querySelector('.jouw-container'));