Subpagina-hero met kruimelpad en statistiek Nieuw

<!-- Subpagina-hero met kruimelpad en statistiek · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="scs">
  <ol class="scs__crumb" aria-label="Kruimelpad">
    <li><a href="#">Home</a></li><li><a href="#">Diensten</a></li><li aria-current="page">Jaarrekening</li>
  </ol>
  <div class="scs__grid">
    <div class="scs__text">
      <p class="scs__title">Jaarrekening en aangifte vennootschapsbelasting</p>
      <p class="scs__lead">Wij stellen uw jaarrekening op, dienen de aangifte in en deponeren bij de KvK. U levert één keer aan via het portaal, wij bellen als er iets ontbreekt.</p>
      <div class="scs__cta"><a href="#" class="scs__btn">Vraag een vaste prijs aan</a><a href="#" class="scs__link">Bekijk wat u aanlevert</a></div>
    </div>
    <div class="scs__stat">
      <span class="scs__num" data-to="1240">1.240</span>
      <span class="scs__lab">jaarrekeningen opgesteld voor mkb-ondernemers in 2025</span>
      <span class="scs__src">Administratiekantoor Mulder · Apeldoorn</span>
    </div>
  </div>
</div>
</div>

/* Subpagina-hero met kruimelpad en statistiek · NedDev · eigen werk. */
.scs{position:relative;width:100%;align-self:flex-start;flex:none;min-height:420px;background:#eef2ef;color:#0f2e3a;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;padding:28px 40px 48px}
.scs *{box-sizing:border-box}
.scs__crumb{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 48px;padding:0;font-size:13px;color:#4c6670}
.scs__crumb li+li::before{content:'/';margin-right:6px;color:#9ab0a6}
.scs__crumb a{color:#0f2e3a;text-decoration:none;border-bottom:1px solid rgba(15,46,58,.25)}
.scs__crumb a:hover{border-bottom-color:#2f8f6f;color:#2f8f6f}
.scs__crumb [aria-current]{color:#2f8f6f;font-weight:600}
.scs__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:end}
.scs__title{font-size:clamp(30px,4.2vw,52px);font-weight:800;line-height:1.02;letter-spacing:-.025em;margin:0 0 18px;max-width:18ch}
.scs__lead{font-size:17px;line-height:1.55;color:#36525d;margin:0 0 26px;max-width:52ch}
.scs__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.scs__btn{background:#0f2e3a;color:#fff;font-weight:600;font-size:15px;padding:13px 22px;border-radius:4px;text-decoration:none;transition:background .2s ease}
.scs__btn:hover{background:#2f8f6f}
.scs__link{color:#0f2e3a;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-color:#2f8f6f;text-underline-offset:5px;text-decoration-thickness:2px}
.scs__stat{border-left:3px solid #2f8f6f;padding:6px 0 6px 28px;display:flex;flex-direction:column}
.scs__num{font-size:clamp(64px,10vw,128px);font-weight:900;line-height:.85;letter-spacing:-.05em;color:#0f2e3a;font-variant-numeric:tabular-nums}
.scs__lab{font-size:17px;line-height:1.4;margin-top:16px;max-width:26ch}
.scs__src{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:#4c6670;margin-top:14px}
@media(max-width:760px){.scs{padding:20px 18px 32px}.scs__crumb{margin-bottom:28px}.scs__grid{grid-template-columns:1fr;gap:32px}.scs__stat{padding-left:18px}}

// Subpagina-hero met kruimelpad en statistiek · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.scs');if(!w)return;
var el=w.querySelector('.scs__num'),to=+el.getAttribute('data-to');
function fmt(n){return Math.round(n).toLocaleString('nl-NL');}
if(matchMedia('(prefers-reduced-motion: reduce)').matches||!('IntersectionObserver' in window)){el.textContent=fmt(to);return;}
el.textContent='0';
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(!e.isIntersecting)return;io.disconnect();
  var t0=performance.now(),dur=1400;
  (function step(t){var p=Math.min(1,(t-t0)/dur);el.textContent=fmt(to*(1-Math.pow(1-p,3)));if(p<1)requestAnimationFrame(step);})(t0);
});},{threshold:.4});io.observe(el);
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));