Cijfers met bronvermelding Nieuw

<!-- Cijfers met bronvermelding · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="smb">
  <div class="smb__in">
    <div class="smb__head">
      <p class="smb__eyebrow">Kuipers Isolatie · Zwolle · spouwmuur, vloer en dak</p>
      <h2 class="smb__h">Wat spouwmuurisolatie in de praktijk oplevert</h2>
      <p class="smb__lead">Geen schattingen uit een folder: dit zijn onze eigen cijfers. Bij elk getal staat waar het vandaan komt.</p>
    </div>
    <dl class="smb__grid">
      <div class="smb__stat"><dt class="smb__lbl">Woningen geïsoleerd</dt><dd class="smb__num">1.284<sup><a class="smb__fn" id="smb-r1" href="#smb-n1" data-note="Eigen projectadministratie, 2019 t/m sep 2026" aria-describedby="smb-ftitle">1</a></sup></dd><dd class="smb__src">sinds januari 2019, alleen spouwmuur</dd></div>
      <div class="smb__stat"><dt class="smb__lbl">Lagere gasrekening</dt><dd class="smb__num">€ 410<sup><a class="smb__fn" id="smb-r2" href="#smb-n2" data-note="Mediaan van 214 klanten, gecorrigeerd voor graaddagen" aria-describedby="smb-ftitle">2</a></sup></dd><dd class="smb__src">per jaar, mediaan van 214 klanten</dd></div>
      <div class="smb__stat"><dt class="smb__lbl">Werktijd per woning</dt><dd class="smb__num">4 uur<sup><a class="smb__fn" id="smb-r3" href="#smb-n3" data-note="Gemeten van aankomst tot oplevering, 2025" aria-describedby="smb-ftitle">3</a></sup></dd><dd class="smb__src">rijtjeswoning, van aankomst tot oplevering</dd></div>
      <div class="smb__stat"><dt class="smb__lbl">Klantwaardering</dt><dd class="smb__num">8,7<sup><a class="smb__fn" id="smb-r4" href="#smb-n4" data-note="612 reacties via Kiyoh, jan 2024 t/m sep 2026" aria-describedby="smb-ftitle">4</a></sup></dd><dd class="smb__src">gemiddeld uit 612 reacties</dd></div>
    </dl>
    <div class="smb__notes">
      <h3 class="smb__ftitle" id="smb-ftitle">Bronnen en rekenwijze</h3>
      <ol class="smb__ol">
        <li id="smb-n1" tabindex="-1">Eigen projectadministratie Kuipers Isolatie: opgeleverde opdrachten van 1 januari 2019 tot en met 30 september 2026, alleen spouwmuurisolatie. <a class="smb__back" href="#smb-r1" aria-label="Terug naar cijfer 1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4L2 8l4 4M2 8h8a4 4 0 0 0 4-4V2"/></svg></a></li>
        <li id="smb-n2" tabindex="-1">Mediaan over 214 klanten die vóór en na isolatie hun jaarafrekening deelden (stookseizoen 2023/24 tegenover 2024/25), gecorrigeerd voor graaddagen, gerekend met € 1,35 per m³ gas. <a class="smb__back" href="#smb-r2" aria-label="Terug naar cijfer 2"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4L2 8l4 4M2 8h8a4 4 0 0 0 4-4V2"/></svg></a></li>
        <li id="smb-n3" tabindex="-1">Gemiddelde over 311 rijtjeswoningen en twee-onder-een-kapwoningen in 2025, van aankomst ploeg tot oplevering met warmtebeeldcontrole. <a class="smb__back" href="#smb-r3" aria-label="Terug naar cijfer 3"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4L2 8l4 4M2 8h8a4 4 0 0 0 4-4V2"/></svg></a></li>
        <li id="smb-n4" tabindex="-1">Onafhankelijk klantonderzoek via Kiyoh na oplevering, 612 reacties tussen januari 2024 en september 2026. Peildatum 30 september 2026. <a class="smb__back" href="#smb-r4" aria-label="Terug naar cijfer 4"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4L2 8l4 4M2 8h8a4 4 0 0 0 4-4V2"/></svg></a></li>
      </ol>
    </div>
  </div>
</div>
</div>

/* Cijfers met bronvermelding · NedDev · eigen werk. */
/* fonts (Fontshare): zodiak@400,700 */
.smb{--ink:#1d2327;--mut:#5b6469;--bg:#f7f5ef;--line:#d9d5ca;--acc:#0f5e63;--mark:#f3dc8a;background:var(--bg);color:var(--ink);font-family:'Switzer',sans-serif;box-sizing:border-box}
.smb *,.smb *::before,.smb *::after{box-sizing:border-box}
.smb__in{max-width:1140px;margin:0 auto;padding:54px 32px 40px}
.smb__head{max-width:640px;margin-bottom:34px}
.smb__eyebrow{margin:0 0 12px;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.smb__h{margin:0 0 10px;font-family:'Zodiak',Georgia,serif;font-weight:700;font-size:clamp(26px,3.3vw,40px);line-height:1.08;letter-spacing:-.01em}
.smb__lead{margin:0;font-size:15.5px;line-height:1.55;color:var(--mut)}
.smb__grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:2px solid var(--ink)}
.smb__stat{padding:20px 22px 22px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.smb__stat+.smb__stat{padding-left:22px}
.smb__stat:last-child{border-right:0}
.smb__lbl{order:0;font:500 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.smb__num{margin:0;font-family:'Zodiak',Georgia,serif;font-weight:700;font-size:clamp(38px,4.4vw,56px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.smb__num sup{font-size:.3em;vertical-align:top;position:relative;top:.2em;margin-left:3px}
.smb__fn{position:relative;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:11px;font:500 12px/1 'JetBrains Mono',monospace;color:var(--acc);background:#fff;border:1px solid var(--line);text-decoration:none;transition:background-color .15s ease,color .15s ease}
.smb__fn:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.smb__fn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.smb__fn::after{content:attr(data-note);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);width:220px;padding:9px 11px;border-radius:4px;background:var(--ink);color:#fff;font:400 12px/1.4 'Switzer',sans-serif;letter-spacing:0;white-space:normal;text-align:left;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:2}
.smb__stat:last-child .smb__fn::after{left:auto;right:-6px;transform:translate(0,4px)}
.smb__fn:hover::after,.smb__fn:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.smb__stat:last-child .smb__fn:hover::after,.smb__stat:last-child .smb__fn:focus-visible::after{transform:translate(0,0)}
.smb__src{margin:0;font-size:13px;line-height:1.4;color:var(--mut)}
.smb__notes{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:20px}
.smb__ftitle{margin:0;font:500 11px/1.6 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.smb__ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13px;line-height:1.55;color:var(--mut);max-width:78ch}
.smb__ol li{padding:4px 8px;margin-left:-8px;border-radius:3px;transition:background-color .6s ease;outline:none}
.smb__ol li::marker{font:500 12px 'JetBrains Mono',monospace;color:var(--acc)}
.smb__ol li:target,.smb__ol li.is-hit{background:var(--mark);color:var(--ink)}
.smb__ol li:focus-visible{outline:2px solid var(--acc)}
.smb__back{display:inline-grid;place-items:center;width:22px;height:22px;vertical-align:middle;color:var(--acc);border-radius:3px}
.smb__back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}
.smb__back:hover{background:#fff}
.smb__back:focus-visible{outline:2px solid var(--acc)}
@media (max-width:760px){
  .smb__in{padding:36px 16px 28px}
  .smb__grid{grid-template-columns:1fr 1fr}
  .smb__stat,.smb__stat+.smb__stat{padding:16px 12px 16px 0;border-right:0;border-bottom:1px solid var(--line)}
  .smb__stat:nth-child(even){padding-left:12px;border-left:1px solid var(--line)}
  .smb__num{font-size:34px}
  .smb__fn::after{width:170px}
  .smb__stat:nth-child(odd) .smb__fn::after{left:auto;right:-30px;transform:translate(0,4px)}
  .smb__stat:nth-child(odd) .smb__fn:hover::after,.smb__stat:nth-child(odd) .smb__fn:focus-visible::after{transform:none}
  .smb__notes{grid-template-columns:1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){.smb *,.smb *::after{transition:none!important}}

// Cijfers met bronvermelding · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.smb'); if(!w) return;
const rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
const go=(id,from)=>{const t=w.querySelector('#'+id); if(!t) return;
  t.scrollIntoView({block:'nearest',behavior:rm?'auto':'smooth'});
  t.focus({preventScroll:true});
  if(t.tagName==='LI'){w.querySelectorAll('.smb__ol li').forEach(l=>l.classList.remove('is-hit')); t.classList.add('is-hit'); clearTimeout(t._h); t._h=setTimeout(()=>t.classList.remove('is-hit'),2400);}
};
w.querySelectorAll('.smb__fn,.smb__back').forEach(a=>a.addEventListener('click',e=>{e.preventDefault(); go(a.getAttribute('href').slice(1));}));
}
init(document.querySelector('.jouw-container'));