Leeshulp: contrast, tekst groter, voorlezen Nieuw

<!-- Leeshulp: contrast, tekst groter, voorlezen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tgb">
  <div class="tgb__bar" role="toolbar" aria-label="Leeshulp">
    <span class="tgb__brand"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M14 24s-9-5.5-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.5-9 12-9 12z"/></svg>Zorggroep Lekstroom</span>
    <div class="tgb__tools">
      <div class="tgb__grp" role="group" aria-label="Tekstgrootte">
        <button type="button" class="tgb__btn tgb__size" data-s="1" aria-pressed="true">A<span class="tgb__vh"> normale tekst</span></button>
        <button type="button" class="tgb__btn tgb__size tgb__size--2" data-s="1.18" aria-pressed="false">A<span class="tgb__vh"> grotere tekst</span></button>
        <button type="button" class="tgb__btn tgb__size tgb__size--3" data-s="1.36" aria-pressed="false">A<span class="tgb__vh"> grootste tekst</span></button>
      </div>
      <button type="button" class="tgb__btn tgb__hc" aria-pressed="false"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><path d="M10 2.5v15a7.5 7.5 0 0 0 0-15z" fill="currentColor"/></svg>Hoog contrast</button>
      <button type="button" class="tgb__btn tgb__read" aria-pressed="false"><svg class="tgb__ic-play" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 7v6h3l5 4V3L6 7zM14 7a4 4 0 0 1 0 6M16 4.5a7.5 7.5 0 0 1 0 11"/></svg><span class="tgb__read-lbl">Lees voor</span></button>
      <button type="button" class="tgb__btn tgb__stop" hidden>Stop</button>
      <button type="button" class="tgb__btn tgb__btn--plain tgb__rst">Herstel</button>
    </div>
  </div>
  <p class="tgb__status" aria-live="polite"></p>
  <div class="tgb__page">
    <div class="tgb__main">
      <p class="tgb__crumb">Zorg thuis · Wijkverpleging</p>
      <h2 class="tgb__h tgb__r">Wijkverpleging aanvragen</h2>
      <p class="tgb__r">Heeft u hulp nodig bij wassen, aankleden, medicijnen of wondzorg? Dan kan een wijkverpleegkundige bij u thuis komen. U heeft hiervoor geen verwijzing van de huisarts nodig.</p>
      <p class="tgb__r">Wij komen eerst bij u langs voor een kennismaking. Samen bespreken we welke zorg u nodig heeft en wanneer. Wijkverpleging valt onder de basisverzekering. U betaalt geen eigen risico.</p>
      <p class="tgb__r">Wij werken in Nieuwegein, IJsselstein, Vianen en Lopik. Vaak kunnen wij binnen twee werkdagen starten.</p>
    </div>
    <div class="tgb__card">
      <p class="tgb__ct">Liever even bellen?</p>
      <a class="tgb__tel" href="tel:0301234567">030 123 45 67</a>
      <p class="tgb__cs">Elke dag bereikbaar, ook ’s nachts voor spoed.</p>
      <a class="tgb__go" href="#">Zorg aanvragen</a>
    </div>
  </div>
</div>
</div>

/* Leeshulp: contrast, tekst groter, voorlezen · NedDev · eigen werk. */
/* fonts (Fontshare): plus-jakarta-sans@400,600,700 */
.tgb{--s:1;--ink:#1f2a2a;--mut:#4c5a59;--bg:#fbfaf7;--teal:#0b5f5a;--soft:#e4efec;--line:#cfdcd9;--card:#fff;--foc:#f2b705;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans','Switzer',sans-serif;box-sizing:border-box}
.tgb *,.tgb *::before{box-sizing:border-box}
.tgb [hidden]{display:none!important}
.tgb.is-hc{--ink:#000;--mut:#000;--bg:#fff;--teal:#000;--soft:#ffff00;--line:#000;--card:#fff;--foc:#0047ff}
.tgb__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 32px;background:var(--soft);border-bottom:1px solid var(--line)}
.tgb__brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--teal)}
.tgb__brand svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.tgb__tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tgb__grp{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--card)}
.tgb__btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;font:600 14px 'Plus Jakarta Sans',sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:4px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.tgb__grp .tgb__btn{border:0;border-radius:0;border-right:1px solid var(--line);min-width:38px;justify-content:center}
.tgb__grp .tgb__btn:last-child{border-right:0}
.tgb__size{font-size:13px}.tgb__size--2{font-size:16px}.tgb__size--3{font-size:19px}
.tgb__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tgb__btn:hover:not(:disabled){background:#d5e6e2}
.tgb__btn[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.tgb__btn:focus-visible{outline:3px solid var(--foc);outline-offset:2px;position:relative;z-index:1}
.tgb__btn:disabled{opacity:.55;cursor:not-allowed}
.tgb__btn--plain{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.tgb.is-hc .tgb__btn:hover:not(:disabled){background:#ffff00;color:#000}
.tgb__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tgb__status{margin:0;padding:0 32px;min-height:0;font-size:13px;color:var(--mut)}
.tgb__status:not(:empty){padding:8px 32px;border-bottom:1px solid var(--line)}
.tgb__page{max-width:1100px;margin:0 auto;padding:30px 32px 38px;display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.tgb__crumb{margin:0 0 8px;font-size:calc(13px * var(--s));color:var(--mut)}
.tgb__h{margin:0 0 14px;font-weight:700;font-size:calc(32px * var(--s));line-height:1.15;color:var(--teal)}
.tgb__main p.tgb__r{margin:0 0 12px;font-size:calc(16.5px * var(--s));line-height:1.65;max-width:62ch;padding:2px 6px;margin-left:-6px;border-radius:3px;transition:background-color .2s ease}
.tgb__r.is-reading{background:#fff1b8;color:#000;box-shadow:inset 3px 0 0 var(--teal)}
.tgb.is-hc .tgb__r.is-reading{background:#ffff00}
.tgb__card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px}
.tgb__ct{margin:0 0 4px;font-weight:700;font-size:calc(16px * var(--s))}
.tgb__tel{display:block;font-weight:700;font-size:calc(26px * var(--s));color:var(--teal);text-decoration:none;font-variant-numeric:tabular-nums}
.tgb__tel:hover{text-decoration:underline}
.tgb__cs{margin:4px 0 14px;font-size:calc(14px * var(--s));color:var(--mut);line-height:1.5}
.tgb__go{display:inline-flex;padding:12px 18px;border-radius:4px;background:var(--teal);color:#fff;font-weight:700;font-size:calc(15px * var(--s));text-decoration:none;transition:background-color .15s ease}
.tgb__go:hover{background:#084744}
.tgb.is-hc .tgb__go{background:#000;outline:2px solid #000}
.tgb__tel:focus-visible,.tgb__go:focus-visible{outline:3px solid var(--foc);outline-offset:2px}
@media (max-width:760px){
  .tgb__bar{padding:10px 14px}
  .tgb__status,.tgb__status:not(:empty){padding-left:14px;padding-right:14px}
  .tgb__page{grid-template-columns:1fr;padding:22px 14px 28px;gap:20px}
  .tgb__btn{padding:0 9px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.tgb *{transition:none!important}}

// Leeshulp: contrast, tekst groter, voorlezen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.tgb'); if(!w) return;
const K='nd-lab-tgb-instellingen';
const st=w.querySelector('.tgb__status'), sizes=[...w.querySelectorAll('.tgb__size')], hc=w.querySelector('.tgb__hc'), rd=w.querySelector('.tgb__read'), rdl=w.querySelector('.tgb__read-lbl'), stop=w.querySelector('.tgb__stop'), rst=w.querySelector('.tgb__rst');
let cfg={s:'1',hc:false};
const say=t=>{st.textContent=t;};
const save=()=>{try{localStorage.setItem(K,JSON.stringify(cfg)); say('Instelling onthouden op dit apparaat.');}catch(e){say('Instelling geldt alleen voor dit bezoek: onthouden lukt niet in deze browser.');}};
const apply=()=>{w.style.setProperty('--s',cfg.s); sizes.forEach(b=>b.setAttribute('aria-pressed',b.dataset.s===cfg.s?'true':'false')); w.classList.toggle('is-hc',!!cfg.hc); hc.setAttribute('aria-pressed',cfg.hc?'true':'false');};
try{const v=JSON.parse(localStorage.getItem(K)||'null'); if(v&&typeof v==='object'){cfg.s=String(v.s||'1'); cfg.hc=!!v.hc;}}catch(e){}
apply();
sizes.forEach(b=>b.addEventListener('click',()=>{cfg.s=b.dataset.s; apply(); save();}));
hc.addEventListener('click',()=>{cfg.hc=!cfg.hc; apply(); save();});
const syn=('speechSynthesis' in window)&&('SpeechSynthesisUtterance' in window)?window.speechSynthesis:null;
const paras=[...w.querySelectorAll('.tgb__r')];
let idx=-1, state='idle';
const mark=i=>paras.forEach((p,k)=>p.classList.toggle('is-reading',k===i));
const ui=()=>{rd.setAttribute('aria-pressed',state==='playing'?'true':'false'); rdl.textContent=state==='playing'?'Pauzeer':(state==='paused'?'Ga verder':'Lees voor'); stop.hidden=state==='idle';};
const end=()=>{state='idle'; idx=-1; mark(-1); ui();};
const next=()=>{idx++; if(idx>=paras.length){end(); say('Voorlezen klaar.'); return;}
  mark(idx); const u=new SpeechSynthesisUtterance(paras[idx].textContent.trim()); u.lang='nl-NL'; u.rate=.95;
  const v=syn.getVoices().find(x=>/^nl/i.test(x.lang)); if(v) u.voice=v;
  u.onend=()=>{if(state==='playing') next();}; u.onerror=()=>{if(state!=='idle'){end(); say('Voorlezen is gestopt.');}};
  syn.speak(u);};
if(!syn){rd.disabled=true; rd.title='Voorlezen werkt niet in deze browser'; rdl.textContent='Voorlezen niet beschikbaar';}
else{
  rd.addEventListener('click',()=>{
    if(state==='idle'){syn.cancel(); state='playing'; ui(); say('Bezig met voorlezen.'); next();}
    else if(state==='playing'){syn.pause(); state='paused'; ui(); say('Voorlezen gepauzeerd.');}
    else {syn.resume(); state='playing'; ui(); say('Bezig met voorlezen.');}
  });
  stop.addEventListener('click',()=>{state='idle'; syn.cancel(); end(); say('Voorlezen gestopt.'); rd.focus();});
}
w.addEventListener('keydown',e=>{if(e.key==='Escape'&&state!=='idle'&&syn){state='idle'; syn.cancel(); end(); say('Voorlezen gestopt.');}});
rst.addEventListener('click',()=>{cfg={s:'1',hc:false}; apply(); try{localStorage.removeItem(K);}catch(e){} say('Standaardinstellingen hersteld.'); if(syn&&state!=='idle'){state='idle'; syn.cancel(); end();}});
w.querySelectorAll('a[href="#"]').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
}
init(document.querySelector('.jouw-container'));