Tabs met tijdbalk die vanzelf doorschakelen New

<!-- Tabs met tijdbalk die vanzelf doorschakelen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="gtb">
  <div class="gtb__in">
    <div class="gtb__head">
      <div><p class="gtb__kick">Autobedrijf Kuipers · Enschede · Bovag</p><h2 class="gtb__h">Een werkplaats voor alle merken, met vaste prijzen</h2></div>
      <button class="gtb__pause" type="button" data-paused="false"><svg class="gtb__ic-pause" viewBox="0 0 20 20" aria-hidden="true"><path d="M7 4.5v11M13 4.5v11"/></svg><svg class="gtb__ic-play" viewBox="0 0 20 20" aria-hidden="true"><path d="M6.5 4.5l9 5.5-9 5.5z"/></svg><span>Pauzeer</span></button>
    </div>
    <div class="gtb__box">
      <div class="gtb__tabs" role="tablist" aria-label="Diensten werkplaats">
        <button role="tab" id="gtb-t1" aria-controls="gtb-p1" aria-selected="true"><b>APK</b><span>vanaf € 39</span><i class="gtb__prog" aria-hidden="true"></i></button>
        <button role="tab" id="gtb-t2" aria-controls="gtb-p2" aria-selected="false" tabindex="-1"><b>Onderhoud</b><span>volgens fabrieksvoorschrift</span><i class="gtb__prog" aria-hidden="true"></i></button>
        <button role="tab" id="gtb-t3" aria-controls="gtb-p3" aria-selected="false" tabindex="-1"><b>Banden</b><span>wissel en opslag</span><i class="gtb__prog" aria-hidden="true"></i></button>
        <button role="tab" id="gtb-t4" aria-controls="gtb-p4" aria-selected="false" tabindex="-1"><b>Airco</b><span>check en vullen</span><i class="gtb__prog" aria-hidden="true"></i></button>
      </div>
      <div class="gtb__panels">
        <div class="gtb__p" id="gtb-p1" role="tabpanel" aria-labelledby="gtb-t1" tabindex="0">
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-4.webp" alt="Auto op de remmentestbank tijdens een APK-keuring" loading="lazy">
          <div class="gtb__c"><h3>APK-keuring, ook als je erop wacht</h3><p>Afgekeurd op iets kleins? Dan repareren we het meteen, met je akkoord vooraf. Je krijgt een herinnering 6 weken voor je APK verloopt.</p>
            <dl class="gtb__spec"><div><dt>Duur</dt><dd>40 min</dd></div><div><dt>Prijs</dt><dd>€ 39</dd></div><div><dt>Herkeuring</dt><dd>gratis</dd></div></dl>
            <form class="gtb__kf" novalidate><label class="gtb__kl" for="gtb-k">Je kenteken</label><div class="gtb__kr"><span class="gtb__plate"><span class="gtb__nl" aria-hidden="true">NL</span><input id="gtb-k" maxlength="8" placeholder="AB-123-C" autocomplete="off" spellcheck="false" aria-describedby="gtb-km"></span><button type="submit">Plan APK</button></div><p class="gtb__km" id="gtb-km" aria-live="polite"></p></form></div>
        </div>
        <div class="gtb__p" id="gtb-p2" role="tabpanel" aria-labelledby="gtb-t2" tabindex="0" hidden>
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-1.webp" alt="Auto op de brug in de werkplaats" loading="lazy">
          <div class="gtb__c"><h3>Onderhoud zonder dat je fabrieksgarantie vervalt</h3><p>We werken met originele of gelijkwaardige onderdelen en stempelen je digitale onderhoudsboekje. Leenauto of e-bike staat klaar.</p>
            <dl class="gtb__spec"><div><dt>Kleine beurt</dt><dd>vanaf € 189</dd></div><div><dt>Grote beurt</dt><dd>vanaf € 349</dd></div><div><dt>Leenauto</dt><dd>gratis</dd></div></dl><a class="gtb__cta" href="#">Bereken prijs op kenteken</a></div>
        </div>
        <div class="gtb__p" id="gtb-p3" role="tabpanel" aria-labelledby="gtb-t3" tabindex="0" hidden>
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-2.webp" alt="Monteur meet de profieldiepte van een band" loading="lazy">
          <div class="gtb__c"><h3>Winterbanden erop voor 1 november?</h3><p>We meten je profiel en bewaren je zomerset gewassen en op spanning. Onder 3 mm profiel adviseren we vervangen, met een prijs vooraf.</p>
            <dl class="gtb__spec"><div><dt>Wisselen</dt><dd>€ 49</dd></div><div><dt>Opslag</dt><dd>€ 39 p/j</dd></div><div><dt>Klaar in</dt><dd>30 min</dd></div></dl><a class="gtb__cta" href="#">Plan bandenwissel</a></div>
        </div>
        <div class="gtb__p" id="gtb-p4" role="tabpanel" aria-labelledby="gtb-t4" tabindex="0" hidden>
          <img src="https://neddev.com/lab-media/tabs-tijdbalk-3.webp" alt="Airco-servicemachine aangesloten onder de motorkap" loading="lazy">
          <div class="gtb__c"><h3>Airco koelt niet meer of ruikt muf</h3><p>We controleren op lekkage, vullen bij en desinfecteren het systeem. Advies: elke twee jaar, het koelmiddel loopt langzaam weg.</p>
            <dl class="gtb__spec"><div><dt>Check en vullen</dt><dd>€ 99</dd></div><div><dt>Desinfectie</dt><dd>€ 29</dd></div><div><dt>Duur</dt><dd>1 uur</dd></div></dl><a class="gtb__cta" href="#">Plan aircoservice</a></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

/* Tabs met tijdbalk die vanzelf doorschakelen · NedDev · eigen werk. */
/* fonts (Fontshare): cabinet-grotesk@500,700,800 + switzer@400,500,600 */
.gtb{--gtb-ink:#16191c;--gtb-bg:#f2f2ef;--gtb-red:#c8202b;--gtb-red2:#a91a24;--gtb-y:#f7c600;--gtb-nl:#0b3c9c;--gtb-line:#dcdcd6;--gtb-mut:#5b6066;--gtb-dur:7s;background:var(--gtb-bg);color:var(--gtb-ink);font-family:'Switzer',sans-serif;box-sizing:border-box}
.gtb *,.gtb *::before,.gtb *::after{box-sizing:border-box}
.gtb button:focus-visible,.gtb a:focus-visible,.gtb__p:focus-visible{outline:2px solid var(--gtb-red);outline-offset:2px}
.gtb__in{max-width:1200px;margin:0 auto;padding:40px 32px}
.gtb__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:22px}
.gtb__kick{margin:0 0 10px;font-size:13px;font-weight:500;color:var(--gtb-mut)}
.gtb__h{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,42px);line-height:1.02;letter-spacing:-.02em;margin:0;max-width:20ch}
.gtb__pause{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1.5px solid var(--gtb-line);border-radius:999px;background:#fff;font:600 13.5px 'Switzer',sans-serif;color:var(--gtb-ink);cursor:pointer;transition:border-color .16s}
.gtb__pause:hover{border-color:var(--gtb-ink)}
.gtb__pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gtb__ic-play{display:none}
.gtb__pause[data-paused=true] .gtb__ic-play{display:block}
.gtb__pause[data-paused=true] .gtb__ic-pause{display:none}
.gtb__box{background:#fff;border:1px solid var(--gtb-line);border-radius:6px;overflow:hidden}
.gtb__tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--gtb-line)}
.gtb__tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 18px 18px;border:0;border-right:1px solid var(--gtb-line);background:none;text-align:left;cursor:pointer;color:var(--gtb-ink);opacity:.55;transition:opacity .2s,background-color .2s}
.gtb__tabs button:last-child{border-right:0}
.gtb__tabs button:hover{opacity:.85;background:#fafaf8}
.gtb__tabs button[aria-selected=true]{opacity:1}
.gtb__tabs b{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:19px}
.gtb__tabs span{font-size:13px;color:var(--gtb-mut)}
.gtb__prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gtb-red);transform:scaleX(0);transform-origin:left}
.gtb__tabs button[aria-selected=true] .gtb__prog{transform:scaleX(1)}
.gtb.is-auto .gtb__tabs button[aria-selected=true] .gtb__prog{transform:scaleX(0);animation:gtb-fill var(--gtb-dur) linear forwards}
.gtb.is-auto.is-hold .gtb__prog{animation-play-state:paused!important}
@keyframes gtb-fill{to{transform:scaleX(1)}}
.gtb__p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:340px}
.gtb__p[hidden]{display:none}
.gtb__p>img{width:100%;height:100%;object-fit:cover;display:block;min-height:260px}
.gtb__c{padding:26px 28px}
.gtb__c h3{font-family:'Cabinet Grotesk',sans-serif;font-weight:700;font-size:25px;line-height:1.1;margin:0 0 10px}
.gtb__c p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--gtb-mut)}
.gtb__spec{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 18px;border:1px solid var(--gtb-line);border-radius:4px}
.gtb__spec div{padding:10px 12px}
.gtb__spec div+div{border-left:1px solid var(--gtb-line)}
.gtb__spec dt{font-size:12px;color:var(--gtb-mut)}
.gtb__spec dd{margin:2px 0 0;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.gtb__cta,.gtb__kr button{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border:0;border-radius:4px;background:var(--gtb-red);color:#fff;font:600 15px 'Switzer',sans-serif;text-decoration:none;cursor:pointer;transition:background-color .16s}
.gtb__cta:hover,.gtb__kr button:hover{background:var(--gtb-red2)}
.gtb__cta:active,.gtb__kr button:active{transform:translateY(1px)}
.gtb__kl{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.gtb__kr{display:flex;gap:8px;flex-wrap:wrap}
.gtb__plate{display:flex;align-items:stretch;height:48px;border:2px solid var(--gtb-ink);border-radius:5px;overflow:hidden;background:var(--gtb-y);flex:0 1 220px;min-width:0}
.gtb__nl{display:grid;place-items:end center;width:26px;padding-bottom:5px;background:var(--gtb-nl);color:#fff;font-size:10px;font-weight:700}
.gtb__plate input{flex:1;min-width:0;border:0;background:none;font:800 22px 'Cabinet Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--gtb-ink);outline:none;padding:0 6px}
.gtb__plate input::placeholder{color:rgba(22,25,28,.35)}
.gtb__plate:focus-within{box-shadow:0 0 0 3px rgba(200,32,43,.25)}
.gtb__plate.is-err{border-color:var(--gtb-red)}
.gtb__km{margin:8px 0 0;font-size:13.5px;line-height:1.45;min-height:20px;color:var(--gtb-mut)}
.gtb__km.is-err{color:var(--gtb-red2);font-weight:600}
.gtb__km.is-ok{color:#1d6b3a;font-weight:600}
@media (max-width:860px){.gtb__in{padding:28px 16px}.gtb__head{flex-direction:column;align-items:flex-start;gap:14px}.gtb__tabs{grid-template-columns:repeat(2,1fr)}.gtb__tabs button:nth-child(2){border-right:0}.gtb__tabs button:nth-child(-n+2){border-bottom:1px solid var(--gtb-line)}.gtb__p{grid-template-columns:minmax(0,1fr)}.gtb__p>img{height:200px;min-height:0}.gtb__c{padding:20px 16px}}
@media (max-width:420px){.gtb__tabs span{display:none}.gtb__spec dd{font-size:14px}.gtb__plate{flex:1 1 100%}.gtb__kr button{flex:1}}
@media (prefers-reduced-motion:reduce){.gtb *{transition:none!important}}

// Tabs met tijdbalk die vanzelf doorschakelen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.gtb');if(!w)return;
var tabs=[].slice.call(w.querySelectorAll('[role=tab]')),panels=[].slice.call(w.querySelectorAll('[role=tabpanel]')),box=w.querySelector('.gtb__box'),pb=w.querySelector('.gtb__pause'),pbt=pb.querySelector('span');
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,user=reduce,hover=false,visible=true;
function sel(i,focus){tabs.forEach(function(t,j){var on=j===i;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;panels[j].hidden=!on;});
  var bar=tabs[i].querySelector('.gtb__prog');bar.style.animation='none';void bar.offsetWidth;bar.style.animation='';if(focus)tabs[i].focus();}
function cur(){return tabs.findIndex(function(t){return t.getAttribute('aria-selected')==='true';});}
function state(){w.classList.toggle('is-auto',!user);w.classList.toggle('is-hold',hover||!visible);pb.setAttribute('data-paused',user?'true':'false');pbt.textContent=user?'Start automatisch wisselen':'Pauzeer automatisch wisselen';}
tabs.forEach(function(t,i){t.querySelector('.gtb__prog').addEventListener('animationend',function(){if(!user&&!hover)sel((i+1)%tabs.length);});
  t.addEventListener('click',function(){sel(i);});
  t.addEventListener('keydown',function(e){var j=null;if(e.key==='ArrowRight')j=(i+1)%tabs.length;if(e.key==='ArrowLeft')j=(i+tabs.length-1)%tabs.length;if(e.key==='Home')j=0;if(e.key==='End')j=tabs.length-1;if(j!==null){e.preventDefault();sel(j,true);}});});
box.addEventListener('mouseenter',function(){hover=true;state();});
box.addEventListener('mouseleave',function(){hover=box.contains(document.activeElement);state();});
box.addEventListener('focusin',function(){hover=true;state();});
box.addEventListener('focusout',function(e){if(!box.contains(e.relatedTarget)){hover=box.matches(':hover');state();}});
pb.addEventListener('click',function(){user=!user;if(!user)sel(cur());state();});
if('IntersectionObserver' in window)new IntersectionObserver(function(en){visible=en[0].isIntersecting;state();},{threshold:.3}).observe(w);
var kf=w.querySelector('.gtb__kf'),ki=w.querySelector('#gtb-k'),km=w.querySelector('.gtb__km'),plate=w.querySelector('.gtb__plate');
function fmt(v){var s=v.toUpperCase().replace(/[^A-Z0-9]/g,'').slice(0,6),g=s.match(/[A-Z]+|[0-9]+/g)||[];
  if(g.length===2){var k=g[0].length===4?0:g[1].length===4?1:-1;if(k>-1)g.splice(k,1,g[k].slice(0,2),g[k].slice(2));}return {raw:s,txt:g.join('-'),n:g.length};}
ki.addEventListener('input',function(){var f=fmt(ki.value);ki.value=f.txt;plate.classList.remove('is-err');km.className='gtb__km';km.textContent='';});
kf.addEventListener('submit',function(e){e.preventDefault();var f=fmt(ki.value);km.className='gtb__km';plate.classList.remove('is-err');
  if(f.raw.length!==6||f.n!==3){plate.classList.add('is-err');ki.setAttribute('aria-invalid','true');km.classList.add('is-err');km.textContent=f.raw.length?'Dit lijkt geen Nederlands kenteken. Een kenteken heeft 6 tekens, bijvoorbeeld AB-123-C.':'Vul eerst je kenteken in.';ki.focus();return;}
  ki.removeAttribute('aria-invalid');km.classList.add('is-ok');km.textContent=f.txt+': APK verloopt op 14 januari 2027 (voorbeelddata). Je kunt al plannen vanaf 15 november.';});
sel(0);state();
}
init(document.querySelector('.jouw-container'));