Hero met intentie-wizard Nieuw

<!-- Hero met intentie-wizard · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mvr">
  <div class="mvr__in">
    <div class="mvr__copy">
      <p class="mvr__brand"><span class="mvr__mark" aria-hidden="true">vR</span>Van Rijn Makelaardij · NVM · Leiden</p>
      <h2 class="mvr__h">Verkopen of kopen in Leiden begint met de goede eerste vraag</h2>
      <p class="mvr__lead">Wij verkochten sinds 2019 ruim 640 woningen in Leiden, Oegstgeest en Leiderdorp. Vertel ons wat je van plan bent, dan weet je binnen een minuut wat de volgende stap is.</p>
      <ul class="mvr__facts"><li><b>8,9</b> gemiddeld op Funda</li><li><b>23 dagen</b> gemiddelde looptijd</li><li><b>101,4%</b> van de vraagprijs</li></ul>
    </div>
    <div class="mvr__media"><img src="https://neddev.com/lab-media/hero-intentiewizard-1.webp" alt="Grachtenpanden aan het Rapenburg in Leiden in de herfst" loading="lazy"></div>
    <div class="mvr__wiz">
      <div class="mvr__wiz-top"><p class="mvr__prog" aria-live="polite"></p><button class="mvr__reset" type="button" hidden><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10a6 6 0 1 0 2-4.5M4 4v3.5h3.5"/></svg>Opnieuw beginnen</button></div>
      <div class="mvr__bar" aria-hidden="true"><i></i></div>
      <div class="mvr__body"></div>
    </div>
  </div>
</div>
</div>

/* Hero met intentie-wizard · NedDev · eigen werk. */
/* fonts (Fontshare): sentient@400,500 + satoshi@400,500,700 */
.mvr{--mvr-paper:#f6f1ea;--mvr-ink:#1b1f2a;--mvr-red:#b23a2b;--mvr-red2:#952e21;--mvr-line:#e2d8c8;--mvr-mut:#5a5e67;--mvr-err:#a3291c;background:var(--mvr-paper);color:var(--mvr-ink);font-family:'Satoshi',sans-serif;box-sizing:border-box}
.mvr *,.mvr *::before,.mvr *::after{box-sizing:border-box}
.mvr button:focus-visible,.mvr a:focus-visible,.mvr input:focus-visible{outline:2px solid var(--mvr-red);outline-offset:2px}
.mvr__in{position:relative;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:560px}
.mvr__copy{padding:48px 190px 40px 48px;display:flex;flex-direction:column}
.mvr__brand{display:flex;align-items:center;gap:10px;margin:0 0 30px;font-size:13px;font-weight:700;letter-spacing:.02em}
.mvr__mark{display:grid;place-items:center;width:34px;height:34px;background:var(--mvr-red);color:#fff;font-family:'Sentient',serif;font-size:15px;font-weight:500;border-radius:2px}
.mvr__h{font-family:'Sentient',serif;font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.015em;margin:0 0 16px;max-width:17ch}
.mvr__lead{font-size:16px;line-height:1.6;color:var(--mvr-mut);margin:0;max-width:44ch}
.mvr__facts{list-style:none;margin:auto 0 0;padding:28px 0 0;display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--mvr-mut)}
.mvr__facts b{display:block;font-family:'Sentient',serif;font-weight:500;font-size:24px;color:var(--mvr-ink);font-variant-numeric:tabular-nums}
.mvr__media{position:relative;overflow:hidden;background:#c9c0b2}
.mvr__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mvr__wiz{position:absolute;left:calc(50% - 150px);bottom:36px;width:440px;background:#fff;border-radius:4px;padding:22px 24px 24px;box-shadow:0 30px 60px -28px rgba(27,31,42,.45);z-index:2}
.mvr__wiz-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.mvr__prog{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mvr-mut);font-variant-numeric:tabular-nums}
.mvr__reset{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 6px;margin-right:-6px;font:600 13px 'Satoshi',sans-serif;color:var(--mvr-mut);cursor:pointer;border-radius:3px;transition:color .18s}
.mvr__reset:hover{color:var(--mvr-red)}
.mvr__reset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mvr__bar{height:2px;background:var(--mvr-line);margin:10px 0 16px}
.mvr__bar i{display:block;height:100%;width:0;background:var(--mvr-red);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.mvr__body{view-transition-name:mvr-body}
.mvr__q{font-family:'Sentient',serif;font-weight:500;font-size:23px;line-height:1.15;margin:0 0 14px;outline:none}
.mvr__opts{display:grid;gap:8px}
.mvr__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--mvr-line);border-radius:3px;padding:13px 14px;font:500 15px 'Satoshi',sans-serif;color:var(--mvr-ink);cursor:pointer;transition:border-color .16s,background-color .16s}
.mvr__opt svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--mvr-mut);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s,stroke .16s}
.mvr__opt:hover{border-color:var(--mvr-ink);background:#fbf8f3}
.mvr__opt:hover svg{transform:translateX(3px);stroke:var(--mvr-red)}
.mvr__opt:active{background:#f3ede4}
.mvr__opt small{display:block;font-size:12.5px;color:var(--mvr-mut);font-weight:400;margin-top:2px}
.mvr__back{background:none;border:0;padding:0;margin:14px 0 0;font:600 13px 'Satoshi',sans-serif;color:var(--mvr-mut);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mvr__back:hover{color:var(--mvr-ink)}
.mvr__row{display:grid;grid-template-columns:1fr 110px;gap:10px}
.mvr__lbl{display:block;font-size:13px;font-weight:700;margin:0 0 6px}
.mvr__inp{width:100%;height:48px;font:600 16px 'Satoshi',sans-serif;color:var(--mvr-ink);background:#fbf8f3;border:1.5px solid var(--mvr-line);border-radius:3px;padding:0 12px;outline:none;transition:border-color .16s}
.mvr__inp:hover{border-color:#cbbfab}
.mvr__inp:focus-visible{border-color:var(--mvr-ink);outline:none;box-shadow:0 0 0 3px rgba(178,58,43,.16)}
.mvr__inp[aria-invalid=true]{border-color:var(--mvr-err)}
.mvr__err{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--mvr-err);min-height:0}
.mvr__err:empty{display:none}
.mvr__go{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;margin-top:14px;border:0;border-radius:3px;background:var(--mvr-red);color:#fff;font:700 15px 'Satoshi',sans-serif;cursor:pointer;text-decoration:none;transition:background-color .16s}
.mvr__go:hover{background:var(--mvr-red2)}
.mvr__go:active{transform:translateY(1px)}
.mvr__go:disabled{background:#c9a39d;cursor:progress}
.mvr__spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:mvr-spin .7s linear infinite}
@keyframes mvr-spin{to{transform:rotate(360deg)}}
.mvr__res-k{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mvr-red)}
.mvr__big{font-family:'Sentient',serif;font-size:30px;line-height:1.1;margin:2px 0 8px;font-variant-numeric:tabular-nums}
.mvr__p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mvr-mut)}
.mvr__slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.mvr__slot{position:relative}
.mvr__slot input{position:absolute;opacity:0}
.mvr__slot span{display:block;text-align:center;padding:9px 4px;border:1.5px solid var(--mvr-line);border-radius:3px;font-size:13px;line-height:1.3;cursor:pointer;transition:border-color .16s,background-color .16s}
.mvr__slot span b{display:block;font-size:14px}
.mvr__slot span:hover{border-color:var(--mvr-ink)}
.mvr__slot input:checked+span{border-color:var(--mvr-red);background:#fbefec}
.mvr__slot input:focus-visible+span{outline:2px solid var(--mvr-red);outline-offset:2px}
.mvr__done{display:flex;gap:12px;align-items:flex-start}
.mvr__done svg{width:28px;height:28px;flex:none;fill:none;stroke:#2f6b3f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@supports (view-transition-name:none){
::view-transition-old(mvr-body){animation:mvr-out .18s ease-in both}
::view-transition-new(mvr-body){animation:mvr-in .28s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes mvr-out{to{opacity:0;transform:translateX(-14px)}}
@keyframes mvr-in{from{opacity:0;transform:translateX(18px)}}
@media (max-width:1000px){.mvr__wiz{left:auto;right:24px;width:400px}.mvr__copy{padding-right:40px}}
@media (max-width:820px){.mvr__in{grid-template-columns:1fr;min-height:0}.mvr__copy{padding:28px 16px 20px}.mvr__facts{margin-top:0;padding-top:20px;gap:18px}.mvr__media{height:200px;order:-1}.mvr__wiz{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-40px 16px 20px;padding:18px 16px 20px}.mvr__brand{margin-bottom:18px}}
@media (max-width:420px){.mvr__slots{grid-template-columns:1fr 1fr 1fr}.mvr__slot span{font-size:12px}.mvr__q{font-size:21px}}
@media (prefers-reduced-motion:reduce){.mvr *{animation:none!important;transition:none!important}}

// Hero met intentie-wizard · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.mvr');if(!w)return;
var body=w.querySelector('.mvr__body'),prog=w.querySelector('.mvr__prog'),bar=w.querySelector('.mvr__bar i'),reset=w.querySelector('.mvr__reset');
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var ARR='<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10h11M11 5l5 5-5 5"/></svg>';
var path=[],total=1;
var START={q:'Waar kunnen we je mee helpen?',o:[['verkopen','Ik wil mijn huis verkopen'],['kopen','Ik wil een huis kopen'],['waarde','Ik wil weten wat mijn huis waard is'],['huren','Ik zoek een huurwoning'],['anders','Ik heb een andere vraag']]};
var LEN={verkopen:4,kopen:3,waarde:3,huren:3,anders:2};
function swap(fn){if(document.startViewTransition&&!reduce){document.startViewTransition(fn);}else fn();}
function head(q){return '<h3 class="mvr__q" tabindex="-1">'+q+'</h3>';}
function opts(list){return '<div class="mvr__opts">'+list.map(function(o){return '<button type="button" class="mvr__opt" data-v="'+o[0]+'"><span>'+o[1]+(o[2]?'<small>'+o[2]+'</small>':'')+'</span>'+ARR+'</button>';}).join('')+'</div>';}
function back(){return path.length?'<button type="button" class="mvr__back" data-back>Vorige vraag</button>':'';}
function adres(btn){return '<form class="mvr__f" novalidate><div class="mvr__row"><div><label class="mvr__lbl" for="mvr-pc">Postcode</label><input id="mvr-pc" class="mvr__inp" maxlength="7" placeholder="2311 EZ" autocomplete="postal-code"></div><div><label class="mvr__lbl" for="mvr-nr">Huisnr.</label><input id="mvr-nr" class="mvr__inp" maxlength="6" placeholder="48" inputmode="numeric"></div></div><p class="mvr__err" id="mvr-err" aria-live="assertive"></p><button class="mvr__go" type="submit">'+btn+ARR+'</button></form>';}
function slots(){var D=['zo','ma','di','wo','do','vr','za'],M=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'],d=new Date(),out=[],h=['10:00','14:30','17:00'];
  while(out.length<3){d.setDate(d.getDate()+1);if(d.getDay()===0)continue;out.push('<label class="mvr__slot"><input type="radio" name="mvr-slot"'+(out.length?'':' checked')+'><span><b>'+D[d.getDay()]+' '+d.getDate()+' '+M[d.getMonth()]+'</b>'+h[out.length]+'</span></label>');}return '<div class="mvr__slots" role="radiogroup" aria-label="Kies een moment">'+out.join('')+'</div>';}
function view(){
  var k=path[0],s=path.length,html='';
  if(!s){html=head(START.q)+opts(START.o);}
  else if(k==='verkopen'&&s===1){html=head('Wanneer wil je ongeveer verkopen?')+opts([['3m','Binnen drie maanden'],['1j','Binnen een jaar'],['ori','Ik oriënteer me nog']])+back();}
  else if(k==='verkopen'&&s===2){html=head('Waar staat je huis?')+adres('Volgende');}
  else if(k==='verkopen'&&s===3){html='<p class="mvr__res-k">Voorstel</p>'+head('Plan een gratis verkoopgesprek bij je thuis')+'<p class="mvr__p">'+(path[1]==='ori'?'Geen haast: we vertellen je wat je huis nu doet en wat je kunt verbeteren voor de verkoop.':'Marieke van Rijn komt langs, bekijkt je woning en geeft je binnen 2 werkdagen een vraagprijsadvies.')+'</p>'+slots()+'<button type="button" class="mvr__go" data-confirm>Bevestig afspraak'+ARR+'</button>'+back();}
  else if(k==='kopen'&&s===1){html=head('Heb je al een huis op het oog?')+opts([['ja','Ja, ik wil gaan bieden','Biedingen in Leiden gaan vaak binnen een week'],['nee','Nee, ik ben nog aan het zoeken']])+back();}
  else if(k==='kopen'&&s===2){html=path[1]==='ja'?'<p class="mvr__res-k">Voorstel</p>'+head('Aankoopbegeleiding vanaf € 2.950')+'<p class="mvr__p">Wij bekijken het huis met je, adviseren over je bod en regelen de bouwkundige keuring. Bel vandaag, dan kijken we morgen al mee.</p><a class="mvr__go" href="tel:+31715140620">Bel 071 514 06 20'+ARR+'</a>'+back():'<p class="mvr__res-k">Voorstel</p>'+head('Maak een zoekprofiel aan')+'<p class="mvr__p">Je krijgt woningen die bij je passen per mail, vaak een paar dagen voordat ze op Funda staan.</p><a class="mvr__go" href="#">Zoekprofiel maken'+ARR+'</a>'+back();}
  else if(k==='waarde'&&s===1){html=head('Over welk huis gaat het?')+adres('Toon indicatie')+back();}
  else if(k==='waarde'&&s===3){var n=+(path[1]||'0'),lo=385+((n*37)%160),hi=lo+30;html='<p class="mvr__res-k">Indicatie voor '+path[2]+'</p><p class="mvr__big">€ '+lo+'.000 tot € '+hi+'.000</p><p class="mvr__p">Op basis van 7 verkopen binnen 500 meter sinds januari 2026 (voorbeelddata). Een taxatie op locatie maakt dit preciezer.</p><a class="mvr__go" href="#">Plan gratis waardebepaling'+ARR+'</a>'+back();}
  else if(k==='huren'&&s===1){html=head('Wat is je maximale huur per maand?')+opts([['a','Tot € 1.200'],['b','€ 1.200 tot € 1.800'],['c','Meer dan € 1.800']])+back();}
  else if(k==='huren'&&s===2){var c={a:3,b:6,c:4}[path[1]];html='<p class="mvr__res-k">Nu beschikbaar</p>'+head(c+' huurwoningen in jouw prijsklasse')+'<p class="mvr__p">In Leiden-Centrum, Merenwijk en Oegstgeest. Bezichtigen kan meestal binnen 3 dagen.</p><a class="mvr__go" href="#">Bekijk huuraanbod'+ARR+'</a>'+back();}
  else if(k==='anders'){html='<p class="mvr__res-k">Direct contact</p>'+head('Bel of mail Marieke van Rijn')+'<p class="mvr__p">Makelaar-eigenaar, bereikbaar op werkdagen van 8:30 tot 18:00. Mail: marieke@voorbeeld.nl</p><a class="mvr__go" href="tel:+31715140620">Bel 071 514 06 20'+ARR+'</a>'+back();}
  else if(k==='verkopen'&&s===4){html='<div class="mvr__done"><svg viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="12"/><path d="M8.5 14.5l3.5 3.5 7.5-8"/></svg><div>'+head('Afspraak staat, tot dan')+'<p class="mvr__p">Je krijgt binnen 5 minuten een bevestiging per mail met de agenda-uitnodiging. Verzetten kan via de link in die mail.</p></div></div>';}
  return html;
}
function paint(focus){
  total=path.length?LEN[path[0]]:3;var step=Math.min(path.length+1,total);
  body.innerHTML=view();
  prog.textContent=path[0]==='verkopen'&&path.length===4?'Afgerond':'Stap '+step+' van '+total;
  bar.style.width=(path[0]==='verkopen'&&path.length===4?100:Math.round(step/total*100))+'%';
  reset.hidden=!path.length;
  if(focus){var h=body.querySelector('.mvr__q');if(h)h.focus({preventScroll:true});}
}
function go(fn){swap(function(){fn();paint(true);});}
body.addEventListener('click',function(e){
  var o=e.target.closest('.mvr__opt');if(o){go(function(){path.push(o.getAttribute('data-v'));});return;}
  if(e.target.closest('[data-back]')){go(function(){path.pop();if(path[0]==='waarde'&&path.length===2)path.pop();});return;}
  if(e.target.closest('[data-confirm]')){go(function(){path.push('ok');});}
});
body.addEventListener('submit',function(e){e.preventDefault();var f=e.target,pc=f.querySelector('#mvr-pc'),nr=f.querySelector('#mvr-nr'),er=f.querySelector('.mvr__err'),b=f.querySelector('.mvr__go');
  [pc,nr].forEach(function(x){x.removeAttribute('aria-invalid');});
  var m=pc.value.replace(/\s+/g,'').toUpperCase().match(/^([1-9]\d{3})([A-Z]{2})$/);
  if(!m){pc.setAttribute('aria-invalid','true');pc.setAttribute('aria-describedby','mvr-err');er.textContent='Vul een postcode in als 2311 EZ.';pc.focus();return;}
  if(!/^\d{1,5}[a-zA-Z]?$/.test(nr.value.trim())){nr.setAttribute('aria-invalid','true');nr.setAttribute('aria-describedby','mvr-err');er.textContent='Vul je huisnummer in, bijvoorbeeld 48 of 12a.';nr.focus();return;}
  var adr=m[1]+' '+m[2]+' '+nr.value.trim();
  if(path[0]==='waarde'){b.disabled=true;b.innerHTML='<span class="mvr__spin" aria-hidden="true"></span>Verkopen in de buurt ophalen';
    setTimeout(function(){go(function(){path.push(nr.value.replace(/\D/g,''),adr);});},1100);}
  else go(function(){path.push(adr);});
});
body.addEventListener('keydown',function(e){if(e.key!=='ArrowDown'&&e.key!=='ArrowUp')return;var l=[].slice.call(body.querySelectorAll('.mvr__opt'));var i=l.indexOf(document.activeElement);if(i<0)return;e.preventDefault();l[(i+(e.key==='ArrowDown'?1:l.length-1))%l.length].focus();});
reset.addEventListener('click',function(){go(function(){path=[];});});
paint(false);
}
init(document.querySelector('.jouw-container'));