Van Keulen Hypotheken · hypotheekadvies, Amersfoort Nieuw

<!-- Van Keulen Hypotheken · hypotheekadvies, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="vkh">
<div class="vkh__top"><div class="vkh__in vkh__top-in">
  <p>Rente vandaag, 10 jaar vast met NHG: vanaf 3,62 procent.</p>
  <p class="vkh__top-r">Maandag tot vrijdag tot 20:00, <a href="tel:+31331234567">033 123 4567</a></p>
</div></div>

<div class="vkh__head" role="banner"><div class="vkh__in vkh__head-in">
  <a href="#" class="vkh__logo" aria-label="Van Keulen Hypotheken, naar home">Van Keulen<span>hypotheken</span></a>
  <nav class="vkh__nav" aria-label="Hoofdmenu">
    <a href="#vkh-reken">Rekenhulp</a><a href="#vkh-wie">Eerste huis</a><a href="#vkh-wie">Oversluiten</a><a href="#vkh-tarief">Tarief</a><a href="#vkh-over">Over ons</a><a href="#vkh-afspraak">Contact</a>
  </nav>
  <a href="#vkh-afspraak" class="vkh__knop vkh__knop--kop">Plan een gesprek</a>
  <button class="vkh__menu-knop" type="button" aria-expanded="false" aria-controls="vkh-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="vkh__menu" id="vkh-menu" hidden>
  <a href="#vkh-reken">Rekenhulp</a><a href="#vkh-wie">Eerste huis</a><a href="#vkh-wie">Oversluiten</a><a href="#vkh-tarief">Tarief</a><a href="#vkh-over">Over ons</a><a href="#vkh-afspraak">Contact</a>
</div>
</div>

<div class="vkh__in vkh__hero">
  <h1 class="vkh__h1">Eerst rekenen, dan pas kijken.</h1>
  <div class="vkh__hero-onder">
    <p class="vkh__lead">Onafhankelijk hypotheekadvies in Amersfoort. We vergelijken 34 geldverstrekkers en rekenen met uw echte cijfers, voor één vaste prijs die u vooraf kent.</p>
    <a href="#vkh-afspraak" class="vkh__knop">Plan het eerste gesprek</a>
  </div>
</div>
<div class="vkh__in"><img class="vkh__breed" src="https://neddev.com/lab-media/site-hypotheekadviseur-1.webp" alt="Rij bakstenen rijtjeshuizen in Amersfoort in de herfstzon" width="1408" height="768"></div>

<div class="vkh__in vkh__reken" id="vkh-reken">
  <form class="vkh__invoer" novalidate>
    <h2 class="vkh__h2">Wat kunt u lenen?</h2>
    <label class="vkh__schuif">Uw bruto jaarinkomen <output name="o1">€ 52.000</output><input type="range" name="ink1" min="20000" max="150000" step="1000" value="52000"></label>
    <label class="vkh__schuif">Inkomen van uw partner <output name="o2">€ 38.000</output><input type="range" name="ink2" min="0" max="150000" step="1000" value="38000"></label>
    <label class="vkh__schuif">Studieschuld, samen <output name="o3">€ 12.000</output><input type="range" name="stud" min="0" max="80000" step="1000" value="12000"></label>
    <label class="vkh__schuif">Eigen geld <output name="o4">€ 25.000</output><input type="range" name="eigen" min="0" max="150000" step="1000" value="25000"></label>
    <fieldset class="vkh__rente"><legend>Rentevaste periode</legend>
      <label><input type="radio" name="rente" value="3.62" checked><span>10 jaar, 3,62%</span></label>
      <label><input type="radio" name="rente" value="3.89"><span>20 jaar, 3,89%</span></label>
      <label><input type="radio" name="rente" value="4.07"><span>30 jaar, 4,07%</span></label>
    </fieldset>
    <label class="vkh__vink"><input type="checkbox" name="starter" checked> Ik ben jonger dan 35 en koop mijn eerste huis</label>
  </form>
  <div class="vkh__uitkomst" aria-live="polite">
    <p class="vkh__uit-kop">U kunt ongeveer lenen</p>
    <p class="vkh__getal">€ 0</p>
    <div class="vkh__balk" aria-hidden="true"><span class="vkh__balk-l"></span><span class="vkh__balk-e"></span><span class="vkh__balk-k"></span></div>
    <p class="vkh__zin"></p>
    <p class="vkh__klein">Een indicatie volgens de leennormen van 2026. Een autolening, pensioengat of tijdelijk contract kan het bedrag verlagen; dat rekenen we in het gesprek precies uit.</p>
    <a href="#vkh-afspraak" class="vkh__knop">Bespreek uw cijfers</a>
  </div>
</div>

<div class="vkh__wie" id="vkh-wie">
  <div class="vkh__in vkh__wie-kop"><h2 class="vkh__h2">Waar u ook staat</h2><p>Schuif door de situaties waarin mensen bij ons komen. Bij elke situatie hoort een ander gesprek.</p></div>
  <div class="vkh__strook" tabindex="0" aria-label="Situaties, zijwaarts te schuiven">
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-3.webp" alt="Jong stel kijkt naar een bakstenen huis aan het water" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Uw eerste huis</h3><p>Geen overdrachtsbelasting tot € 525.000 en vaak een starterslening van de gemeente erbij.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-8.webp" alt="Nieuwbouwwoningen in aanbouw met steigers" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Nieuwbouw</h3><p>Bouwdepot, dubbele lasten tijdens de bouw en de rente die u vastzet bij tekenen.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-10.webp" alt="Lege woonkamer met verhuisdozen en een trap" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Verhuizen</h3><p>Uw oude rente meenemen of niet, en wat als het oude huis later verkocht wordt.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-9.webp" alt="Ouder stel op de bank met papieren" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Oversluiten na uw 55e</h3><p>Lagere lasten, aflossingsvrij verlengen of de overwaarde gebruiken voor de kinderen.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-11.webp" alt="Zonnepanelen op een pannendak" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Verduurzamen</h3><p>Tot € 10.000 extra lenen voor isolatie of een warmtepomp, met rentekorting.</p></figcaption></figure>
  </div>
</div>

<div class="vkh__in vkh__tarief" id="vkh-tarief">
  <img src="https://neddev.com/lab-media/site-hypotheekadviseur-12.webp" alt="Hand die met een vulpen een document tekent" width="900" height="491" loading="lazy">
  <div class="vkh__tarief-tx">
    <h2 class="vkh__h2">Eén prijs, vooraf bekend</h2>
    <p class="vkh__prijs">€ 2.450</p>
    <p>Voor advies en het regelen van de hypotheek, van eerste gesprek tot de notaris. Starters betalen € 2.150. Geen uurtje-factuurtje en geen provisie van de bank.</p>
    <ul class="vkh__lijst">
      <li>Vergelijking van 34 geldverstrekkers, ook kleine zoals Hollandsche Hypotheekbank</li>
      <li>Aanvraag van NHG en de starterslening</li>
      <li>Controle van het koopcontract en de taxatie</li>
    </ul>
    <p>Gaat de koop niet door? Dan betaalt u € 450 voor het werk tot dan, de rest vervalt. Taxatie en notaris betaalt u zelf. U betaalt ons pas als de hypotheek bij de notaris passeert.</p>
  </div>
</div>

<div class="vkh__over" id="vkh-over"><div class="vkh__in vkh__over-in">
  <img class="vkh__p1" src="https://neddev.com/lab-media/site-hypotheekadviseur-6.webp" alt="Marieke van Keulen bij het raam van het kantoor" width="768" height="1376" loading="lazy">
  <img class="vkh__p2" src="https://neddev.com/lab-media/site-hypotheekadviseur-7.webp" alt="Joost Hamers aan zijn bureau" width="768" height="1376" loading="lazy">
  <div class="vkh__over-tx">
    <h2 class="vkh__h2">Marieke en Joost</h2>
    <p>"Ik werkte twaalf jaar bij een bank en mocht daar maar één hypotheek verkopen. Hier mag ik zeggen welke het beste past, ook als dat de goedkoopste is."</p>
    <p class="vkh__wie-naam">Marieke van Keulen, eigenaar</p>
    <p>"Ik neem de telefoon op tot acht uur 's avonds. De meeste mensen bellen pas als de kinderen op bed liggen."</p>
    <p class="vkh__wie-naam">Joost Hamers, adviseur sinds 2019</p>
    <p class="vkh__over-slot">Samen regelden ze ruim 1.900 hypotheken, de meeste in Amersfoort, Leusden en Soest.</p>
  </div>
  <img class="vkh__k1" src="https://neddev.com/lab-media/site-hypotheekadviseur-2.webp" alt="Adviseur bespreekt papieren met een jong stel aan tafel" width="900" height="491" loading="lazy">
  <img class="vkh__k2" src="https://neddev.com/lab-media/site-hypotheekadviseur-5.webp" alt="Vergaderkamer met eiken tafel en hoge ramen" width="900" height="491" loading="lazy">
</div></div>

<div class="vkh__in vkh__ervaring">
  <div class="vkh__citaten">
    <blockquote class="vkh__citaat" id="vkh-c1"><p>Bij de bank kregen we te horen dat het niet kon. Marieke vond een geldverstrekker die het tijdelijke contract van Sanne wel meetelde. We wonen er nu een jaar.</p></blockquote>
    <blockquote class="vkh__citaat" id="vkh-c2" hidden><p>Joost rekende drie scenario's door voor het oversluiten. We betalen nu € 214 minder per maand en hebben het hele traject aan de keukentafel gedaan.</p></blockquote>
    <blockquote class="vkh__citaat" id="vkh-c3" hidden><p>Het bod ging vrijdagavond om negen uur de deur uit. Om half tien had ik een mail met de financiering rond. Dat verkocht het huis aan ons.</p></blockquote>
  </div>
  <div class="vkh__namen" role="tablist" aria-label="Kies een ervaring">
    <button role="tab" aria-selected="true" aria-controls="vkh-c1" type="button">Sanne en Tim, Hoogland</button>
    <button role="tab" aria-selected="false" aria-controls="vkh-c2" type="button" tabindex="-1">Henk en Ans, Leusden</button>
    <button role="tab" aria-selected="false" aria-controls="vkh-c3" type="button" tabindex="-1">Yusuf, Amersfoort-Vathorst</button>
  </div>
  <p class="vkh__score">Een 9,7 uit 418 beoordelingen op Advieskeuze.</p>
</div>

<div class="vkh__afspraak" id="vkh-afspraak"><div class="vkh__in vkh__afspraak-in">
  <div>
    <h2 class="vkh__h2">Bel, of laat uw nummer achter</h2>
    <p class="vkh__tel"><a href="tel:+31331234567">033 123 4567</a></p>
    <p>Utrechtseweg 52, Amersfoort. Gratis parkeren voor de deur, tien minuten lopen van station Amersfoort Centraal. Het eerste gesprek duurt een uur en kost niets; bij u thuis kan ook. Liever eerst mailen? Dan krijgt u dezelfde dag antwoord.</p>
    <form class="vkh__form" novalidate>
      <label>Naam<input name="naam" autocomplete="name"></label>
      <label>Telefoonnummer<input name="tel" type="tel" autocomplete="tel"></label>
      <fieldset class="vkh__rente"><legend>Wanneer mogen we bellen?</legend>
        <label><input type="radio" name="moment" value="ochtend" checked><span>Ochtend</span></label>
        <label><input type="radio" name="moment" value="middag"><span>Middag</span></label>
        <label><input type="radio" name="moment" value="avond"><span>Na 18:00</span></label>
      </fieldset>
      <p class="vkh__fout" role="alert" hidden>Vul uw naam en een telefoonnummer van tien cijfers in.</p>
      <button class="vkh__knop" type="submit">Bel mij terug</button>
      <p class="vkh__klaar" role="status" hidden></p>
    </form>
  </div>
  <div class="vkh__mee">
    <img src="https://neddev.com/lab-media/site-hypotheekadviseur-4.webp" alt="Huissleutels naast koffie en een map met papieren" width="900" height="491" loading="lazy">
    <h3 class="vkh__h3">Neem mee naar het eerste gesprek</h3>
    <ul class="vkh__check">
      <li><label><input type="checkbox"> Een legitimatiebewijs van u allebei</label></li>
      <li><label><input type="checkbox"> De laatste loonstrook en jaaropgave</label></li>
      <li><label><input type="checkbox"> Het overzicht van DUO als u een studieschuld hebt</label></li>
      <li><label><input type="checkbox"> Uw pensioenoverzicht van mijnpensioenoverzicht.nl</label></li>
      <li><label><input type="checkbox"> De verkoopbrochure, als u al een huis op het oog hebt</label></li>
    </ul>
    <p class="vkh__mee-uit" aria-live="polite">Nog 5 dingen te verzamelen.</p>
  </div>
</div></div>

<div class="vkh__voet" role="contentinfo"><div class="vkh__in vkh__voet-in">
  <p>Van Keulen Hypotheken B.V., Utrechtseweg 52, 3818 EM Amersfoort, <a href="mailto:advies@voorbeeld.nl">advies@voorbeeld.nl</a>. KvK 81234567, btw NL862345678B01. Ingeschreven bij de AFM onder nummer 12045678 en aangesloten bij het Kifid. Onze adviseurs staan in het register van de Stichting Erkenning Hypotheekadviseurs.</p>
  <p class="vkh__voet-links"><a href="#">Dienstverleningsdocument</a> <a href="#">Klachten</a> <a href="#">Privacy en cookies</a></p>
  <p class="vkh__voet-waarsch">Let op! Geld lenen kost geld.</p>
</div></div>
</div>
</div>

/* Van Keulen Hypotheken · hypotheekadvies, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): cabinet-grotesk@800 + switzer@400,500 */
.vkh{--bg:#FFFFFF;--opp:#F1F4F1;--tekst:#101511;--gedempt:#4B554D;--lijn:#D7DED8;--accent:#1E6B3A;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(88px,10vw,144px);--gat:clamp(24px,3vw,48px);--kader:1660px;--lees:720px;
  background:var(--bg);color:var(--tekst);font-family:'Switzer',sans-serif;font-size:var(--fs2);line-height:1.6;-webkit-font-smoothing:antialiased}
.vkh *,.vkh *::before,.vkh *::after{box-sizing:border-box}
.vkh [hidden]{display:none!important}
.vkh img{display:block;max-width:100%;height:auto}
.vkh p{margin:0}
.vkh a{color:inherit}
.vkh__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.vkh__h1,.vkh__h2,.vkh__h3,.vkh__getal,.vkh__prijs,.vkh__logo{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02;margin:0}
.vkh__h1{font-size:clamp(48px,7.4vw,var(--fs6));max-width:11ch}
.vkh__h2{font-size:var(--fs5);margin-bottom:var(--gat)}
.vkh__h3{font-size:var(--fs4);margin:16px 0 6px}
.vkh .vkh__knop{display:inline-block;background:var(--accent);color:var(--op-accent);font:500 var(--fs2)/1 'Switzer',sans-serif;padding:16px 24px;border:0;border-radius:var(--r);text-decoration:none;cursor:pointer;transition:background-color .18s}
.vkh .vkh__knop:hover{background:#155230}
.vkh a:focus-visible,.vkh button:focus-visible,.vkh input:focus-visible,.vkh__strook:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.vkh__top{background:var(--accent);color:var(--op-accent);font-size:var(--fs1)}
.vkh__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.vkh__top a{font-weight:500}
.vkh__head{position:sticky;top:0;z-index:5}
.vkh__head>.vkh__in,.vkh__menu{background:var(--bg)}
.vkh__head-in{display:flex;align-items:center;gap:32px;padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--lijn)}
.vkh__logo{font-size:var(--fs4);text-decoration:none;margin-right:auto;display:flex;align-items:baseline;gap:6px;padding:6px 0}
.vkh__logo span{font-family:'Switzer',sans-serif;font-weight:400;font-size:var(--fs2);color:var(--gedempt);letter-spacing:0}
.vkh__nav{display:flex;gap:26px}
.vkh__nav a{text-decoration:none;transition:color .18s}
.vkh__nav a:hover{color:var(--accent)}
.vkh .vkh__knop--kop{padding:12px 18px}
.vkh__menu-knop{display:none;width:44px;height:44px;background:none;border:1px solid var(--lijn);border-radius:var(--r);padding:0 11px;cursor:pointer}
.vkh__menu-knop span{display:block;height:2px;background:var(--tekst);margin:6px 0}
.vkh__menu{padding:8px 20px 20px;border-bottom:1px solid var(--lijn)}
.vkh__menu a{display:block;padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}

.vkh__hero{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.vkh__hero-onder{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gat);margin-top:var(--gat);padding-top:var(--gat);border-top:1px solid var(--lijn)}
.vkh__lead{font-size:var(--fs3);color:var(--gedempt);max-width:34em}
.vkh__breed{width:100%;aspect-ratio:21/6.5;object-fit:cover;border-radius:var(--r)}

.vkh__reken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__invoer{display:flex;flex-direction:column;gap:22px}
.vkh__invoer .vkh__h2{margin-bottom:8px}
.vkh__schuif{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-weight:500}
.vkh__schuif output{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:var(--fs3)}
.vkh__schuif input{width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.vkh__rente{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.vkh__rente legend{font-weight:500;margin-bottom:8px;padding:0}
.vkh__rente label{position:relative;cursor:pointer}
.vkh__rente input{position:absolute;opacity:0;width:1px;height:1px}
.vkh__rente span{display:block;padding:10px 14px;border:1px solid var(--lijn);border-radius:var(--r);transition:border-color .18s,background-color .18s}
.vkh__rente label:hover span{border-color:var(--gedempt)}
.vkh__rente input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.vkh__rente input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.vkh__vink{display:flex;gap:10px;align-items:center;cursor:pointer}
.vkh__vink input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--accent)}
.vkh__uitkomst{background:var(--opp);border-radius:var(--r);padding:clamp(28px,4vw,56px);align-self:start;position:sticky;top:110px}
.vkh__uit-kop{font-size:var(--fs3);color:var(--gedempt)}
.vkh__getal{font-size:clamp(56px,7vw,var(--fs6));color:var(--accent);margin:4px 0 24px;font-variant-numeric:tabular-nums}
.vkh__balk{display:flex;height:14px;border-radius:var(--r);overflow:hidden;background:var(--lijn);margin-bottom:20px}
.vkh__balk span{display:block;height:100%;transition:width .2s}
.vkh__balk-l{background:var(--accent)}
.vkh__balk-e{background:#7FB08F}
.vkh__balk-k{background:var(--tekst)}
.vkh__zin{font-size:var(--fs3);margin-bottom:18px}
.vkh__zin b{font-weight:500;color:var(--accent)}
.vkh__klein{font-size:var(--fs1);color:var(--gedempt);margin-bottom:24px}

.vkh__wie{background:var(--opp);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__wie-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gat)}
.vkh__wie-kop p{color:var(--gedempt);max-width:28em;margin-bottom:var(--gat)}
.vkh__strook{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(clamp(20px,4vw,64px),calc((100% - var(--kader))/2 + 64px)) 16px;scrollbar-width:thin}
.vkh__strook figure{flex:0 0 clamp(270px,30vw,460px);margin:0;scroll-snap-align:start}
.vkh__strook figure:nth-child(odd){flex-basis:clamp(270px,36vw,560px)}
.vkh__strook img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.vkh__strook figure:nth-child(odd) img{aspect-ratio:16/10}
.vkh__strook p{color:var(--gedempt);max-width:32em}

.vkh__tarief{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,112px);align-items:center;padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__tarief img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
.vkh__tarief-tx>p{max-width:var(--lees);margin-bottom:18px;color:var(--gedempt)}
.vkh .vkh__prijs{font-size:clamp(64px,9vw,var(--fs6));color:var(--accent);margin:-8px 0 20px}
.vkh__lijst{margin:0 0 20px;padding:0 0 0 20px}
.vkh__lijst li{padding:4px 0}

.vkh__over{border-top:1px solid var(--lijn)}
.vkh__over-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__p1{grid-column:1/5;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.vkh__p2{grid-column:5/8;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);margin-top:48px}
.vkh__over-tx{grid-column:9/13;align-self:center}
.vkh__over-tx p{font-size:var(--fs3);margin-bottom:6px}
.vkh__over-tx .vkh__over-slot{font-size:var(--fs2);color:var(--gedempt)}
.vkh__over-tx .vkh__wie-naam{font-size:var(--fs1);color:var(--gedempt);margin-bottom:28px}
.vkh__k1{grid-column:1/9;width:100%;aspect-ratio:16/6;object-fit:cover;border-radius:var(--r)}
.vkh__k2{grid-column:9/13;width:100%;height:100%;object-fit:cover;border-radius:var(--r)}

.vkh__ervaring{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);border-top:1px solid var(--lijn)}
.vkh__citaat{margin:0;max-width:1180px}
.vkh__citaat p{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,var(--fs5));line-height:1.12;letter-spacing:-.015em}
.vkh__namen{display:flex;flex-wrap:wrap;gap:8px;margin:var(--gat) 0 18px}
.vkh__namen button{font:inherit;background:none;border:1px solid var(--lijn);border-radius:var(--r);padding:10px 16px;cursor:pointer;color:var(--tekst);transition:border-color .18s,background-color .18s}
.vkh__namen button:hover{border-color:var(--gedempt)}
.vkh__namen button[aria-selected=true]{background:var(--tekst);color:var(--bg);border-color:var(--tekst)}
.vkh__score{color:var(--gedempt)}

.vkh__afspraak{background:var(--opp)}
.vkh__afspraak-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__afspraak-in>div>p{color:var(--gedempt);max-width:34em;margin-bottom:28px}
.vkh__tel{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:var(--fs5);line-height:1.1}
.vkh__tel a{text-decoration:none;color:var(--accent)}
.vkh__form{display:flex;flex-direction:column;gap:14px;max-width:460px}
.vkh__form>label{display:flex;flex-direction:column;gap:6px;font-weight:500}
.vkh__form>label input{font:inherit;padding:13px 14px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--bg);color:var(--tekst)}
.vkh__form .vkh__knop{align-self:flex-start}
.vkh__fout{color:#A1261C}
.vkh__klaar{color:var(--accent);font-weight:500}
.vkh__mee img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r)}
.vkh__check{list-style:none;margin:8px 0 12px;padding:0}
.vkh__check li{border-bottom:1px solid var(--lijn)}
.vkh__check label{display:flex;gap:12px;align-items:center;padding:12px 0;cursor:pointer}
.vkh__check input{width:24px;height:24px;margin:0;accent-color:var(--accent);flex:none}
.vkh__check input:checked+*{color:var(--gedempt)}
.vkh__mee-uit{color:var(--gedempt);font-size:var(--fs1)}

.vkh__voet{background:var(--tekst);color:#C9D1CB;font-size:var(--fs1)}
.vkh__voet-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px 64px;padding-top:36px;padding-bottom:36px}
.vkh__voet-links{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end}
.vkh__voet-waarsch{grid-column:1/-1;color:#fff;font-weight:500;border-top:1px solid #2A332C;padding-top:16px}

@media (max-width:1100px){.vkh__nav{display:none}.vkh__menu-knop{display:block}}
@media (max-width:860px){
  .vkh__reken,.vkh__tarief,.vkh__afspraak-in{grid-template-columns:minmax(0,1fr)}
  .vkh__uitkomst{position:static}
  .vkh__hero-onder,.vkh__wie-kop{flex-direction:column;align-items:flex-start}
  .vkh__over-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vkh__p1,.vkh__p2{grid-column:auto;margin-top:0}
  .vkh__over-tx,.vkh__k1{grid-column:1/-1}
  .vkh .vkh__k2{display:none}
  .vkh__tarief img{aspect-ratio:16/10}
  .vkh__voet-in{grid-template-columns:minmax(0,1fr)}
  .vkh__voet-links{justify-content:flex-start}
}
@media (max-width:560px){
  .vkh{--fs4:22px;--fs5:32px}
  .vkh__in{padding:0 20px}
  .vkh__top-r{display:none}
  .vkh .vkh__knop--kop{display:none}
  .vkh__breed{aspect-ratio:4/3}
  .vkh__strook{padding:0 20px 16px}
  .vkh__strook figure,.vkh__strook figure:nth-child(odd){flex-basis:78%}
}
@media (prefers-reduced-motion:reduce){.vkh *{transition:none!important}}

// Van Keulen Hypotheken · hypotheekadvies, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.vkh');if(!s)return;
var mk=s.querySelector('.vkh__menu-knop'),menu=s.querySelector('#vkh-menu');
mk.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;mk.setAttribute('aria-expanded',String(open));mk.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
[].slice.call(menu.querySelectorAll('a')).forEach(function(a){a.addEventListener('click',function(){menu.hidden=true;mk.setAttribute('aria-expanded','false');});});
var f=s.querySelector('.vkh__invoer'),getal=s.querySelector('.vkh__getal'),zin=s.querySelector('.vkh__zin');
var bl=s.querySelector('.vkh__balk-l'),be=s.querySelector('.vkh__balk-e'),bk=s.querySelector('.vkh__balk-k');
var fmt=function(n){return '€ '+Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g,'.');};
var ann=function(r){var i=r/1200;return i/(1-Math.pow(1+i,-360));};
var huidig=0,raf=0;
function toon(doel){cancelAnimationFrame(raf);var van=huidig,t0=performance.now(),dur=window.matchMedia('(prefers-reduced-motion: reduce)').matches?0:260;
  (function stap(t){var p=dur?Math.min(1,(t-t0)/dur):1;huidig=van+(doel-van)*p;getal.textContent=fmt(huidig);if(p<1)raf=requestAnimationFrame(stap);})(t0);}
function reken(){var i1=+f.ink1.value,i2=+f.ink2.value,st=+f.stud.value,eg=+f.eigen.value,r=+f.querySelector('input[name=rente]:checked').value,starter=f.starter.checked;
  f.o1.value=fmt(i1);f.o2.value=fmt(i2);f.o3.value=fmt(st);f.o4.value=fmt(eg);
  var tot=i1+i2,flp=tot<40000?.245:tot<60000?.265:tot<80000?.28:tot<110000?.29:.30;
  var ruimte=tot*flp/12-st*0.0045;
  var lening=Math.max(0,Math.floor(ruimte/ann(Math.max(r,5))/1000)*1000);
  var advies=starter?2150:2450,vast=advies+1100+750;
  var woning=starter?lening+eg-vast:(lening+eg-vast)/1.02;
  if(starter&&woning>525000)woning=(lening+eg-vast)/1.02;
  woning=Math.max(0,Math.floor(woning/1000)*1000);
  var bruto=lening*ann(r),netto=bruto-lening*r/1200*0.3756;
  var kosten=Math.max(0,lening+eg-woning),som=lening+eg||1;
  bl.style.width=(lening/som*100)+'%';be.style.width=(Math.max(0,eg-kosten)/som*100)+'%';bk.style.width=(Math.min(kosten,som)/som*100)+'%';
  toon(lening);
  zin.innerHTML='Met '+fmt(eg)+' eigen geld past een woning tot ongeveer <b>'+fmt(woning)+'</b>. U betaalt dan '+fmt(bruto)+' bruto per maand, na belastingaftrek ongeveer '+fmt(netto)+'. Bijkomende kosten: ongeveer '+fmt(kosten)+'.';}
f.addEventListener('input',reken);f.addEventListener('change',reken);reken();
var tabs=[].slice.call(s.querySelectorAll('.vkh__namen [role=tab]'));
function kies(tb){tabs.forEach(function(x){var aan=x===tb;x.setAttribute('aria-selected',String(aan));x.tabIndex=aan?0:-1;s.querySelector('#'+x.getAttribute('aria-controls')).hidden=!aan;});}
tabs.forEach(function(tb,n){tb.addEventListener('click',function(){kies(tb);});tb.addEventListener('keydown',function(e){var d=e.key==='ArrowRight'?1:e.key==='ArrowLeft'?-1:0;if(d){var v=tabs[(n+d+tabs.length)%tabs.length];v.focus();kies(v);}});});
var cf=s.querySelector('.vkh__form'),fout=s.querySelector('.vkh__fout'),klaar=s.querySelector('.vkh__klaar');
cf.addEventListener('submit',function(e){e.preventDefault();var tel=cf.tel.value.replace(/[^0-9]/g,''),ok=cf.naam.value.trim().length>1&&tel.length===10;fout.hidden=ok;if(!ok)return;
  var m=cf.querySelector('input[name=moment]:checked').value;
  [].slice.call(cf.children).forEach(function(x){if(x!==klaar)x.hidden=true;});klaar.hidden=false;
  klaar.textContent='Dank u, '+cf.naam.value.trim().split(' ')[0]+'. Marieke of Joost belt u de eerstvolgende werkdag in de '+(m==='avond'?'avond na 18:00':m)+' op '+cf.tel.value.trim()+'.';});
var vk=[].slice.call(s.querySelectorAll('.vkh__check input')),mu=s.querySelector('.vkh__mee-uit');
vk.forEach(function(v){v.addEventListener('change',function(){var n=vk.filter(function(x){return !x.checked;}).length;mu.textContent=n?'Nog '+n+' '+(n===1?'ding':'dingen')+' te verzamelen.':'Alles verzameld. Tot in het gesprek.';});});
}
init(document.querySelector('.jouw-container'));