Familiebedrijf-tijdlijn horizontaal Nieuw

<!-- Familiebedrijf-tijdlijn horizontaal · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="abt">
  <div class="abt__in">
    <div class="abt__head">
      <div><span class="abt__eye">Installatiebedrijf Hoekstra · Leeuwarden</span>
      <h2 class="abt__h">Sinds 1987 in Friesland.<br>Twee generaties, één busje erbij per keer.</h2></div>
      <div class="abt__nav"><button type="button" class="abt__arr" data-d="-1" aria-label="Vorige mijlpalen"><svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2"/></svg></button><button type="button" class="abt__arr" data-d="1" aria-label="Volgende mijlpalen"><svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2"/></svg></button></div>
    </div>
    <div class="abt__track" tabindex="0" aria-label="Tijdlijn, scroll horizontaal">
      <ol class="abt__list">
        <li class="abt__m"><span class="abt__y">1987</span><i></i><b>Jan begint voor zichzelf</b><p>Met één Volkswagen-bus en een gereedschapskist vanuit de schuur aan de Wiarda.</p></li>
        <li class="abt__m"><span class="abt__y">1994</span><i></i><b>Eerste werkplaats</b><p>Een loods aan de Snekertrekweg. Mieke doet vanaf dan de administratie.</p></li>
        <li class="abt__m"><span class="abt__y">2001</span><i></i><b>Pieter komt erbij</b><p>Na zijn opleiding in Drachten. Het team groeit naar zes monteurs.</p></li>
        <li class="abt__m"><span class="abt__y">2008</span><i></i><b>Erkend leerbedrijf</b><p>Sindsdien leiden we elk jaar twee tot drie leerlingen op. Vier werken er nu nog.</p></li>
        <li class="abt__m abt__m--hi"><span class="abt__y">2013</span><i></i><b>Eerste warmtepomp</b><p>Bij een boerderij in Stiens. Toen nog een uitzondering, nu de helft van ons werk.</p></li>
        <li class="abt__m"><span class="abt__y">2019</span><i></i><b>Pieter en Marije nemen over</b><p>Jan blijft op maandag langskomen voor koffie en commentaar. 24 mensen in dienst.</p></li>
        <li class="abt__m"><span class="abt__y">2023</span><i></i><b>Nieuw pand op De Hemrik</b><p>Met eigen opleidingsruimte en een magazijn waar we de meeste onderdelen op voorraad hebben.</p></li>
        <li class="abt__m abt__m--now"><span class="abt__y">2026</span><i></i><b>1.000e warmtepomp</b><p>Geplaatst in Grou in maart. Op naar de volgende generatie.</p></li>
      </ol>
    </div>
    <div class="abt__bar"><span></span></div>
  </div>
</div>
</div>

/* Familiebedrijf-tijdlijn horizontaal · NedDev · eigen werk. */
.abt{background:#f3efe8;color:#1f2a33;font-family:'Switzer',sans-serif;box-sizing:border-box}
.abt *{box-sizing:border-box}
.abt__in{max-width:1180px;margin:0 auto;padding:44px 32px 40px}
.abt__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}
.abt__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#b0612e}
.abt__h{font-size:clamp(24px,3vw,36px);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:10px 0 0}
.abt__nav{display:flex;gap:8px;flex:none}
.abt__arr{width:44px;height:44px;border-radius:50%;border:1px solid #1f2a33;background:transparent;color:#1f2a33;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,opacity .2s}
.abt__arr svg{width:18px;height:18px}
.abt__arr:hover{background:#1f2a33;color:#f3efe8}
.abt__arr:disabled{opacity:.3;cursor:default;background:transparent;color:#1f2a33}
.abt__arr:focus-visible,.abt__track:focus-visible{outline:2px solid #b0612e;outline-offset:3px}
.abt__track{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:6px}
.abt__track::-webkit-scrollbar{display:none}
.abt__list{list-style:none;margin:0;padding:0;display:flex;position:relative;width:max-content}
.abt__list::before{content:'';position:absolute;left:0;right:0;top:62px;height:2px;background:#cdbfa9}
.abt__m{width:250px;flex:none;padding-right:28px;scroll-snap-align:start;position:relative}
.abt__y{display:block;font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#1f2a33;height:48px}
.abt__m i{display:block;width:14px;height:14px;border-radius:50%;background:#f3efe8;border:2px solid #b0612e;margin:8px 0 16px;position:relative;z-index:1}
.abt__m--hi i,.abt__m--now i{background:#b0612e}
.abt__m--now .abt__y{color:#b0612e}
.abt__m b{display:block;font-size:16px;margin-bottom:6px}
.abt__m p{margin:0;font-size:14px;line-height:1.5;color:#55606a}
.abt__bar{height:3px;background:#e2d9cb;margin-top:24px;border-radius:2px;overflow:hidden}
.abt__bar span{display:block;height:100%;width:0;background:#b0612e;transition:width .15s linear}
@media(max-width:640px){.abt__in{padding:30px 16px 30px}.abt__head{flex-direction:column;align-items:flex-start}.abt__m{width:220px;padding-right:22px}.abt__y{font-size:38px;height:40px}.abt__list::before{top:54px}}
@media(prefers-reduced-motion:reduce){.abt__track{scroll-behavior:auto}}

// Familiebedrijf-tijdlijn horizontaal · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.abt');if(!w)return;
var tr=w.querySelector('.abt__track'),bar=w.querySelector('.abt__bar span'),btns=w.querySelectorAll('.abt__arr');
function upd(){var max=tr.scrollWidth-tr.clientWidth;var p=max>0?tr.scrollLeft/max:1;bar.style.width=(Math.max(p,0.04)*100)+'%';btns[0].disabled=tr.scrollLeft<4;btns[1].disabled=tr.scrollLeft>max-4;}
btns.forEach(function(b){b.addEventListener('click',function(){var step=tr.querySelector('.abt__m').offsetWidth*2;tr.scrollBy({left:step*+b.getAttribute('data-d'),behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth'});});});
tr.addEventListener('scroll',upd,{passive:true});
tr.addEventListener('keydown',function(e){if(e.key==='ArrowRight'){tr.scrollBy({left:250});e.preventDefault();}if(e.key==='ArrowLeft'){tr.scrollBy({left:-250});e.preventDefault();}});
var down=false,sx=0,sl=0;
tr.addEventListener('pointerdown',function(e){if(e.pointerType!=='mouse')return;down=true;sx=e.clientX;sl=tr.scrollLeft;tr.style.scrollSnapType='none';tr.style.scrollBehavior='auto';tr.style.cursor='grabbing';});
window.addEventListener('pointermove',function(e){if(down)tr.scrollLeft=sl-(e.clientX-sx);});
window.addEventListener('pointerup',function(){if(!down)return;down=false;tr.style.scrollSnapType='';tr.style.scrollBehavior='';tr.style.cursor='';});
upd();
}
init(document.querySelector('.jouw-container'));