<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anek+Latin:wdth,wght@75..100,400..800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
SLIMME HYPOTHEEK — LANDINGSPAGINA
Huisstijl 1-op-1 van final.slimmehypotheek.nl:
koppen Anek Latin wdth 75 / wght 800, tekst Hanken Grotesk 17px,
lila #F4F1FF, dieppaars #251D42, paars #9273FF, geel #F6FF7F,
mint #C5F2F7, roze #E7B0EC, knopradius 12px.
============================================================ */
:root{
--paars:#9273FF;
--paars-donker:#745CCC;
--paars-licht:#B29DFF;
--paars-tint:#E9E3FF;
--diep:#251D42;
--lila:#F4F1FF;
--mint:#C5F2F7;
--mint-licht:#D6F5F9;
--geel:#F6FF7F;
--roze:#E7B0EC;
--wit:#FFFFFF;
--tekst:#363636;
--zacht:#5C5670;
--rand:#D6D1E3;
--rand-zacht:rgba(37,29,66,.10);
--kop:"Anek Latin","Anek latin variable",-apple-system,sans-serif;
--body:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;
--max:1280px;
--gutter:clamp(20px,4vw,40px);
--sectie:clamp(64px,8vw,120px);
--r-s:12px;
--r-m:16px;
--r-l:24px;
--schaduw:0 18px 44px -34px rgba(37,29,66,.42);
--schaduw-kaart:0 2px 3px rgba(37,29,66,.04),0 14px 30px -22px rgba(37,29,66,.34);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;overflow-x:hidden;background:var(--wit);color:var(--tekst);
font-family:var(--body);font-size:17px;line-height:1.45;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.kop{
font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;
color:var(--diep);margin:0;line-height:.92;letter-spacing:-.004em;
}
h1{font-size:clamp(42px,6.1vw,76px)}
h2{font-size:clamp(33px,4.5vw,60px)}
h3{font-size:clamp(21px,1.7vw,26px);line-height:1}
h4{font-size:19px;line-height:1.06}
p{margin:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sectie{padding-block:var(--sectie)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--diep);color:#fff;
padding:12px 18px;border-radius:0 0 var(--r-s) 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{font-family:var(--body);font-size:15px;font-weight:600;color:var(--diep);
margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--paars);border-radius:2px;flex:none}
.eyebrow--licht{color:#fff}
.eyebrow--licht::before{background:var(--geel)}
.lead{font-size:clamp(17px,1.3vw,19.5px);line-height:1.55;color:var(--zacht);max-width:56ch}
.mark{position:relative;white-space:nowrap}
.mark svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.2em;overflow:visible}
.mark svg path{fill:none;stroke:var(--paars);stroke-width:7;stroke-linecap:round;
stroke-dasharray:230;stroke-dashoffset:230;animation:teken .9s .3s cubic-bezier(.5,0,.2,1) forwards}
@keyframes teken{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.mark svg path{animation:none;stroke-dashoffset:0}}
/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:11px;
font-family:var(--body);font-size:17px;font-weight:600;line-height:1.2;
padding:15px 26px;border-radius:var(--r-s);border:1.5px solid transparent;
text-decoration:none;cursor:pointer;white-space:nowrap;
transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.knop svg{flex:none}
.knop--primair{background:var(--paars);color:#fff;box-shadow:0 14px 28px -18px rgba(146,115,255,1)}
.knop--primair:hover{background:var(--paars-donker);transform:translateY(-1px)}
.knop--secundair{background:transparent;color:var(--diep);border-color:var(--rand)}
.knop--secundair:hover{background:var(--wit);border-color:var(--diep);transform:translateY(-1px)}
.knop--diep{background:var(--diep);color:#fff}
.knop--diep:hover{background:#17102f;transform:translateY(-1px)}
.knop--randlicht{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.knop--randlicht:hover{background:rgba(255,255,255,.14);border-color:#fff}
.knop--blok{width:100%}
:focus-visible{outline:3px solid var(--paars);outline-offset:3px;border-radius:4px}
.tag{font-size:13px;font-weight:600;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.24)}
.knop--secundair .tag{background:var(--paars-tint);color:var(--diep)}
/* CMS-veld dat Slimme Hypotheek nog aanlevert */
.cms{border-bottom:1.5px dotted var(--paars-licht);cursor:help}
/* ============================================================
HEADER
============================================================ */
.hdr{position:sticky;top:0;z-index:60;background:var(--lila);transition:box-shadow .25s ease}
.hdr.vast{box-shadow:0 1px 0 var(--rand-zacht),0 12px 30px -26px rgba(37,29,66,.6)}
.hdr__in{display:flex;align-items:center;gap:24px;padding-block:13px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo__tekst{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:21px;line-height:.86;color:var(--paars)}
/* Geen menu op deze pagina: alleen het logo en het telefoonnummer. Elk
menu-item is een uitgang op een pagina waar betaald verkeer landt. Er staan
twee belknoppen in de markup omdat de tekst verschilt - het volledige nummer
op een breed scherm, "Bel ons" op een telefoon - en niet omdat er twee
acties zijn. */
.hdr__acties{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr .knop{padding:11px 18px;font-size:15.5px;white-space:nowrap}
/* Bellen is de secundaire actie op elke pagina; het formulier is de primaire.
Transparant op een lila header leest slecht, dus wel een witte bodem. */
.hdr .knop--secundair{background:var(--wit);border-color:var(--rand)}
.hdr .knop--secundair:hover{border-color:var(--diep)}
.hdr__bel{display:none}
@media (max-width:1120px){
.hdr__nr{display:none}
.hdr__bel{display:inline-flex;padding:10px 15px;font-size:14.5px;gap:8px}
}
/* ============================================================
01 HERO + 02 BEWIJSBALK
============================================================ */
.hero{background:var(--lila);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(780px 440px at 90% -10%,rgba(146,115,255,.17),transparent 62%),
radial-gradient(560px 380px at 0% 112%,rgba(197,242,247,.6),transparent 66%)}
.hero__in{position:relative;z-index:1;padding-top:clamp(30px,3.2vw,44px);padding-bottom:clamp(30px,3.2vw,46px)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4.2vw,62px);align-items:start}
.hero__grid>*{min-width:0}
.duo>*,.bewijs__grid>*,.deuren__grid>*,.stappen>*,.verhalen__grid>*,.cijfers__grid>*,.kennis__grid>*,.ftr__grid>*,.verg__rij>*{min-width:0}
.hero h1{margin-bottom:20px;max-width:13ch}
/* De koppen van de campagnevarianten zijn langer dan de generieke kop. Op 13ch
wordt de langste zes regels hoog en duwt hij het formulier uit beeld. */
.hero h1.kop--lang{max-width:20ch;font-size:clamp(34px,3.6vw,52px)}
.hero .lead{max-width:50ch}
.hero__acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.keur{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.bol{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
background:var(--geel);border:2px solid var(--diep);font-family:var(--kop);font-weight:800;
font-stretch:75%;font-variation-settings:"wdth" 75,"wght" 800;font-size:21px;color:var(--diep);line-height:1}
.keur p{font-size:15px;line-height:1.35;color:var(--zacht)}
.keur strong{color:var(--diep);font-weight:600}
.bewijs{position:relative;z-index:1;padding-bottom:clamp(42px,5vw,72px)}
.bewijs__venster{display:contents}
.usp__stippen{display:none;justify-content:center;gap:7px;margin-top:16px}
.bewijs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);overflow:hidden;
box-shadow:0 14px 34px -30px rgba(37,29,66,.4)}
.bkaart{background:transparent;border:0;border-left:1px solid var(--rand-zacht);border-radius:0;
padding:26px 24px 24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:7px;
transition:background-color .2s ease}
.bkaart:first-child{border-left:0}
a.bkaart:hover{background:var(--lila)}
.bkaart__cijfer{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(26px,2.4vw,35px);line-height:.9;color:var(--diep)}
.bkaart__tekst{font-size:15px;line-height:1.42;color:var(--zacht)}
.bkaart .cms{border-bottom-color:var(--paars)}
.bkaart__link{font-size:13.5px;font-weight:600;color:var(--paars-donker);margin-top:auto;padding-top:12px;
display:flex;flex-direction:column;align-items:flex-start;gap:5px;overflow-wrap:break-word;hyphens:auto}
.bkaart__link .punt{display:none}
.bkaart__link a{color:var(--paars-donker);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1.5px;text-decoration-color:rgba(146,115,255,.6)}
.bkaart__link a:hover{color:var(--diep);text-decoration-color:var(--diep)}
@media (max-width:1000px){
/* het formulier moet zo hoog mogelijk: kop, tekst, de vier deuren, dan meteen het formulier */
.hero__grid{grid-template-columns:1fr;gap:18px}
.hero__tekst{display:contents}
.hero h1{order:1;margin-bottom:0}
.hero .lead{order:2;margin-bottom:2px}
.hero__acties{display:none}
.form{order:3}
.keur{order:4;margin-top:2px;flex-wrap:nowrap;gap:12px}
.keur .bol{width:46px;height:46px;font-size:18px}
.keur p{flex:1;min-width:0;font-size:14px}
.hero h1{max-width:none}
.hero__acties .knop{flex:1 1 100%}
.bewijs__grid{grid-template-columns:1fr 1fr}
.bkaart:nth-child(odd){border-left:0}
.bkaart:nth-child(n+3){border-top:1px solid var(--rand-zacht)}
}
/* telefoon: twee kolommen van twee, niet vier onder elkaar */
/* ---------- telefoon: zelfbewegende slider ----------
De actieve USP staat gecentreerd, links en rechts is de buur even ver
afgekapt. De rij loopt oneindig door in dezelfde volgorde. */
@media (max-width:760px){
.bewijs__venster{display:block;overflow:hidden;
margin-inline:calc(var(--gutter) * -1);padding-block:2px}
.bewijs__grid{display:flex;gap:12px;background:none;border:0;border-radius:0;
box-shadow:none;overflow:visible;will-change:transform}
.bewijs__grid.schuift{transition:transform .55s cubic-bezier(.4,0,.2,1)}
.bkaart{flex:0 0 auto;width:var(--usp-breedte,74%);
background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);
border-left:1px solid var(--rand-zacht);border-top:1px solid var(--rand-zacht);
display:flex;flex-direction:column;align-items:center;text-align:center;
justify-content:center;gap:7px;padding:24px 20px;min-height:150px;
opacity:.42;transform:scale(.94);
transition:opacity .45s ease,transform .45s ease}
.bkaart.actief{opacity:1;transform:none;box-shadow:var(--schaduw-kaart)}
.bkaart__cijfer{font-size:24px}
.bkaart__tekst{font-size:14.5px}
.bkaart__link{margin-top:0;padding-top:6px;font-size:12.5px;align-items:center;gap:4px}
.usp__stippen{display:flex}
.usp__stippen button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
background:var(--rand);cursor:pointer;transition:background-color .3s ease,width .3s ease}
.usp__stippen button[aria-current="true"]{background:var(--paars);width:20px;border-radius:99px}
}
@media (max-width:400px){.lang{display:none}}
/* ============================================================
FORMULIER - een vraag per stap, zoals de bestaande formulieren
op final.slimmehypotheek.nl (Stap x van y, voortgangsbalk,
grote keuzekaarten, Vorige / Volgende stap)
============================================================ */
.form{background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);
box-shadow:var(--schaduw);overflow:hidden;position:relative}
.form__top{padding:20px 26px 0}
.balk{height:6px;background:var(--paars-tint);border-radius:99px;overflow:hidden}
.balk i{display:block;height:100%;width:0;background:var(--paars);border-radius:99px;
transition:width .45s cubic-bezier(.4,0,.2,1)}
.form__meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;
font-size:13.5px;font-weight:600;color:var(--zacht)}
.form__meta b{color:var(--diep);font-weight:600}
/* de behaalde indicatie blijft in beeld tijdens de laatste stappen */
.uitkomst{display:none;align-items:center;justify-content:space-between;gap:14px;
margin:16px 26px 0;padding:12px 16px;border-radius:var(--r-s);
background:var(--mint-licht);border:1.5px solid #A9E3EB}
.uitkomst.zichtbaar{display:flex}
.uitkomst span{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--diep);opacity:.72}
.uitkomst b{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:26px;line-height:1;color:var(--diep)}
.form__body{padding:20px 26px 4px;min-height:210px}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}
.stapv{display:none}
.stapv.actief{display:block;animation:stapin .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes stapin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stapv.actief{animation:none}}
.vraag{font-size:clamp(23px,2vw,29px);line-height:1.02;margin-bottom:6px}
.vraag--klein{font-size:clamp(21px,1.7vw,25px)}
.uitleg{font-size:15px;line-height:1.45;color:var(--zacht);margin-bottom:18px}
.veld{margin-bottom:4px}
.veld__label{display:block;font-size:14.5px;font-weight:600;color:var(--diep);margin-bottom:8px}
.invoer{width:100%;font-family:var(--body);font-size:19px;color:var(--diep);background:var(--wit);
border:1.5px solid var(--rand);border-radius:var(--r-s);padding:15px 16px;
transition:border-color .16s ease,box-shadow .16s ease}
.invoer::placeholder{color:#A7A2B5}
.invoer:focus{border-color:var(--paars);box-shadow:0 0 0 4px rgba(146,115,255,.16);outline:none}
.invoer.fout{border-color:#C6285A;box-shadow:0 0 0 4px rgba(198,40,90,.12)}
.euro{position:relative}
.euro span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--zacht);
font-size:19px;pointer-events:none}
.euro .invoer{padding-left:36px}
.tip{font-size:13.5px;line-height:1.45;color:var(--zacht);margin-top:9px}
.fout-tekst{display:none;font-size:13.5px;color:#C6285A;margin-top:9px;font-weight:500}
.veld.heeft-fout .fout-tekst,fieldset.heeft-fout .fout-tekst{display:block}
/* grote keuzekaarten, een per regel */
.keuzes{display:grid;grid-template-columns:1fr;gap:10px}
.kz{position:relative}
.kz input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kz>span{display:flex;align-items:center;gap:13px;min-height:58px;padding:13px 16px;
border:1.5px solid var(--rand);border-radius:var(--r-s);font-size:16.5px;font-weight:500;
line-height:1.25;color:var(--diep);background:var(--wit);cursor:pointer;
transition:border-color .16s ease,background-color .16s ease,transform .16s ease}
/* icoon bij de vier deuren: zegt iets over de vraag zelf */
.kz__ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--lila);
border:1px solid var(--paars-tint);display:grid;place-items:center;color:var(--diep);
transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.kz input:checked+span .kz__ic{background:var(--paars);border-color:var(--paars);color:#fff}
/* gewone keuzerondjes waar een icoon niets toevoegt */
.kz__radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--rand);
transition:border-color .16s ease,box-shadow .16s ease}
.kz input:checked+span .kz__radio{border-color:var(--paars);box-shadow:inset 0 0 0 5px var(--paars)}
.kz input:hover+span{border-color:var(--paars-licht);transform:translateX(2px)}
.kz input:checked+span{border-color:var(--paars);background:var(--lila)}
.kz input:focus-visible+span{outline:3px solid var(--paars);outline-offset:2px}
/* het resultaatscherm na vraag 3 */
.indicatie__label{font-size:13.5px;font-weight:600;color:var(--diep);opacity:.72;
text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.indicatie__bedrag{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(42px,4.6vw,58px);
line-height:.9;color:var(--diep);margin-bottom:12px}
.indicatie__uitleg{font-size:15.5px;line-height:1.5;color:var(--diep);opacity:.86}
.indicatie__rij{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:13px;font-weight:600;background:var(--paars-tint);color:var(--diep);
padding:6px 11px;border-radius:99px}
.indicatie__voet{margin-top:16px;padding:12px 14px;border-radius:var(--r-s);
background:#F6F5F8;font-size:13px;line-height:1.45;color:var(--zacht)}
.form__nav{display:flex;align-items:center;gap:12px;padding:16px 26px 24px}
.form__nav .knop{padding:14px 22px}
#vorige{visibility:hidden}
#vorige.zichtbaar{visibility:visible}
#volgende{margin-left:auto}
.form__voet{font-size:13px;color:var(--zacht);text-align:center;padding:0 26px 6px}
/* Een telefoonnummer in lopende tekst is op een telefoon maar 23 px hoog en
dus lastig te raken. Verticale padding vergroot alleen het raakvlak; de
regelhoogte verandert niet, dus de tekst schuift niet op. */
@media (max-width:760px){
a[href^="tel:"]:not(.knop){display:inline-block;padding-block:11px}
}
.privacy{font-size:12.5px;color:var(--zacht);line-height:1.45;padding:0 26px 22px;text-align:center}
.privacy a{color:var(--paars-donker)}
.bedankt{display:none;padding:44px 26px 40px;text-align:center}
.bedankt.zichtbaar{display:block}
.bedankt__vink{width:64px;height:64px;border-radius:50%;background:var(--geel);
border:2px solid var(--diep);display:grid;place-items:center;margin:0 auto 20px}
.bedankt h2{margin-bottom:12px}
.bedankt p{color:var(--zacht);max-width:38ch;margin:0 auto 18px}
@media (max-width:560px){
.form__top{padding:18px 20px 0}
.form__body{padding:20px 20px 4px;min-height:0}
.form__nav{padding:14px 20px 20px}
.uitkomst{margin-inline:20px;flex-wrap:wrap;gap:4px}
.privacy,.form__voet{padding-inline:20px}
/* knoppen onder elkaar, de primaire bovenaan */
.form__nav{flex-direction:column-reverse;align-items:stretch;gap:10px}
.form__nav .knop{padding:15px 16px;white-space:nowrap;margin:0;width:100%}
#vorige{display:none}
#vorige.zichtbaar{display:inline-flex;visibility:visible}
}
/* ============================================================
03 STATEMENTBAND
============================================================ */
.band{background:var(--wit);overflow:hidden}
.band__rij{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,22px);flex-wrap:nowrap}
.band__rij+.band__rij{margin-top:clamp(6px,1vw,14px)}
.band__woord{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(40px,8.2vw,112px);
line-height:.94;color:var(--diep);white-space:nowrap}
.blok{border-radius:var(--r-s);flex:none;height:clamp(46px,7.8vw,120px)}
.blok--geel{background:var(--geel);width:clamp(28px,4.4vw,62px)}
.blok--mint{background:var(--mint);width:clamp(56px,14vw,196px)}
.blok--paars{background:var(--paars);width:clamp(60px,15vw,206px)}
.blok--diep{background:var(--diep);width:clamp(70px,17vw,236px)}
.blok--roze{background:var(--roze);width:clamp(50px,12vw,168px)}
.blok--klein{width:clamp(24px,3.4vw,48px)}
@media (max-width:760px){.blok--verberg{display:none}}
@media (max-width:620px){
/* losse blokjes tussen de woorden worden op deze breedte rommel;
de kleuren komen terug als een balk onder de uitspraak */
.band__rij{display:block;text-align:left}
.band__rij+.band__rij{margin-top:0}
.blok{display:none}
.band__woord{display:inline;font-size:clamp(40px,11.6vw,58px);line-height:1.02}
.band .wrap{position:relative}
.band .wrap::after{content:"";display:block;height:12px;border-radius:99px;margin-top:22px;
background:linear-gradient(90deg,
var(--geel) 0 20%,var(--mint) 20% 40%,var(--paars) 40% 60%,
var(--roze) 60% 80%,var(--diep) 80% 100%)}
}
/* ============================================================
04 KIES JE SITUATIE
============================================================ */
.deuren{background:var(--lila)}
.deuren__kop{max-width:60ch;margin-bottom:clamp(30px,3.4vw,46px)}
.deuren__kop h2{margin-bottom:14px}
.deuren__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.deur{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;
border-radius:var(--r-l);text-decoration:none;color:var(--diep);min-height:270px;overflow:hidden;
transition:transform .22s cubic-bezier(.3,.8,.4,1),box-shadow .22s ease}
.deur:hover{transform:translateY(-6px);box-shadow:0 26px 46px -28px rgba(37,29,66,.6)}
.deur--geel{background:var(--geel)}
.deur--mint{background:var(--mint)}
.deur--roze{background:var(--roze)}
.deur--diep{background:var(--diep);color:#fff}
.deur--diep h3{color:#fff}
.deur__nr{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:15px;letter-spacing:.1em;opacity:.5;color:inherit}
.deur h3{font-size:clamp(22px,1.9vw,27px);max-width:14ch}
.deur p{font-size:15px;line-height:1.45;opacity:.82}
.deur__pijl{margin-top:auto;display:inline-flex;align-items:center;gap:9px;
font-size:15px;font-weight:600;padding-top:14px}
.deur__pijl svg{transition:transform .22s ease}
.deur:hover .deur__pijl svg{transform:translateX(5px)}
@media (max-width:1000px){.deuren__grid{grid-template-columns:1fr 1fr}.deur{min-height:0}}
@media (max-width:560px){.deuren__grid{grid-template-columns:1fr}}
/* ============================================================
05 WAAROM HIER WEL
============================================================ */
.verg{background:var(--wit)}
.verg__kop{max-width:62ch;margin-bottom:clamp(28px,3.2vw,44px)}
.verg__kop h2{margin-bottom:14px;max-width:20ch}
.verg__tabel{display:grid;grid-template-columns:minmax(132px,.62fr) 1fr 1fr;gap:0 16px;align-items:stretch}
.verg__rij{display:contents}
.vc{padding:19px 22px;font-size:15.5px;line-height:1.5;display:flex;align-items:flex-start;gap:11px}
.vc p{margin:0}
/* de twee gekleurde kopbalken boven de kolommen */
.vc--hoofd{padding:13px 22px;font-size:13px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;align-items:center;border-radius:var(--r-m) var(--r-m) 0 0}
.vc--hoofd.vc--bank{background:#E4E1EA;color:#4A4458}
.vc--hoofd.vc--ons{background:var(--paars-donker);color:#fff}
.vc--hoofd.vc--leeg{background:none;padding-inline:0}
/* rijlabel links, met een accentstreepje ervoor */
.vc--label{font-weight:600;color:var(--diep);font-size:16px;padding:19px 16px 19px 26px;
border-top:1px solid var(--rand-zacht);align-items:flex-start;position:relative}
.vc--label::before{content:"";position:absolute;left:0;top:26px;width:14px;height:2px;
background:var(--paars);border-radius:2px}
/* kolom bank: doorlopende grijze balk */
.vc--bank{background:#F5F4F7;color:var(--zacht);border-top:1px solid rgba(37,29,66,.07)}
/* kolom Slimme Hypotheek: doorlopende lila balk */
.vc--ons{background:var(--lila);color:var(--diep);border-top:1px solid rgba(146,115,255,.24)}
.verg__rij:last-of-type .vc--bank,
.verg__rij:last-of-type .vc--ons{border-radius:0 0 var(--r-m) var(--r-m);padding-bottom:22px}
.verg__rij:last-of-type .vc--label{box-shadow:inset 0 -1px 0 var(--rand-zacht)}
/* vinkjes en kruisjes */
.ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.ic--nee{background:#DCD8E3;color:#635D71}
.ic--ja{background:var(--paars);color:#fff}
.cel__label{display:none;font-size:12.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;margin-bottom:8px}
@media (max-width:900px){
/* per onderwerp een blokje: het onderwerp als kop, de bank als kale regel,
en alleen ons antwoord in een gekleurd vlak. Een vlak in plaats van twee,
dus half zo zwaar en het verschil is meteen te zien. */
.verg__tabel{display:block;border-top:1px solid var(--rand-zacht)}
.verg__rij{display:block;padding:20px 0 22px;border-bottom:1px solid var(--rand-zacht)}
.verg__rij:first-of-type{display:none}
.vc{padding:0;display:block}
.vc--label{border:0;box-shadow:none;background:none;font-size:17px;
padding:0 0 0 24px;margin-bottom:12px}
.vc--label::before{left:0;top:11px;width:14px}
.vc--bank{background:none;border:0;border-radius:0;color:var(--zacht);
font-size:15px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;
align-items:start;margin-bottom:10px}
.vc--ons{background:var(--lila);border:1px solid var(--paars-tint);border-radius:var(--r-s);
padding:14px 16px;font-size:15.5px;display:grid;grid-template-columns:auto 1fr;
column-gap:10px;align-items:start}
.verg__rij:last-of-type .vc--bank{border-radius:0;padding-bottom:0}
.verg__rij:last-of-type .vc--ons{border-radius:var(--r-s);padding-bottom:14px}
.verg__rij:last-of-type .vc--label{box-shadow:none}
.cel__label{display:block;grid-column:2;grid-row:1;margin-bottom:5px}
.vc--bank .cel__label{color:#78738A}
.vc--ons .cel__label{color:var(--paars-donker)}
.vc--bank .ic,.vc--ons .ic{display:grid;grid-column:1;grid-row:1 / 3;align-self:start;margin-top:0}
.vc--bank p:not(.cel__label),.vc--ons p:not(.cel__label){grid-column:2;grid-row:2}
}
.verg__voet{margin-top:20px;font-size:13.5px;line-height:1.5;color:var(--zacht);max-width:70ch}
/* ============================================================
06 PROCES
============================================================ */
.proces{background:var(--paars);color:var(--diep)}
.proces__kop{margin-bottom:clamp(34px,4vw,56px)}
.proces__kop h2{color:var(--diep)}
.proces .eyebrow{color:var(--diep)}
.proces .eyebrow::before{background:var(--diep)}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.stap{border-top:2px solid rgba(37,29,66,.28);padding-top:22px;position:relative}
.stap .stap__nr{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(64px,7.4vw,104px);
line-height:.82;color:#fff;margin-bottom:14px}
.stap .stap__tijd{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;background:var(--diep);color:var(--geel);
padding:6px 12px;border-radius:99px;margin-bottom:14px}
.stap h3{margin-bottom:10px;max-width:16ch}
.stap p{font-size:16px;line-height:1.5;color:rgba(37,29,66,.86)}
.stap a{color:var(--diep);font-weight:600}
@media (max-width:880px){.stappen{grid-template-columns:1fr}.stap__nr{font-size:58px}}
/* ============================================================
07 WAT HET KOST
============================================================ */
.kosten{background:var(--wit)}
.kosten__blok{background:var(--diep);color:#fff;border-radius:var(--r-l);
padding:clamp(34px,4.4vw,64px);display:grid;grid-template-columns:1fr auto;
gap:clamp(26px,3.4vw,54px);align-items:center;position:relative;overflow:hidden}
.kosten__blok>*{min-width:0}
.kosten__blok::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
border-radius:50%;background:radial-gradient(circle,rgba(146,115,255,.42),transparent 66%);pointer-events:none}
.kosten__blok h2{color:#fff;margin-bottom:16px}
.kosten__blok p{font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;color:rgba(255,255,255,.84);max-width:54ch}
.kosten__prijs{position:relative;z-index:1;text-align:center;flex:none}
.kosten__prijs b{display:block;font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(46px,5.2vw,72px);line-height:.9;color:var(--geel)}
.kosten__prijs em{display:block;font-style:normal;font-size:14px;color:rgba(255,255,255,.7);margin-top:8px}
.kosten__blok .knop{margin-top:24px}
.kosten__links{position:relative;z-index:1}
@media (max-width:880px){.kosten__blok{grid-template-columns:1fr}.kosten__prijs{text-align:left}}
/* ============================================================
08 KLANTVERHALEN
============================================================ */
.verhalen{background:var(--lila)}
.verhalen__kop{margin-bottom:clamp(30px,3.4vw,46px)}
.verhalen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.verhaal{background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);
padding:30px 28px 26px;display:flex;flex-direction:column;gap:18px}
.verhaal__quote{font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(22px,1.8vw,27px);
line-height:1.06;color:var(--diep)}
.verhaal__wie{font-size:15px;color:var(--zacht)}
.verhaal__wie b{color:var(--diep);font-weight:600}
.feiten{margin-top:auto;border-top:1px solid var(--rand-zacht);padding-top:16px;
display:flex;flex-direction:column;gap:8px}
.feit{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.4;color:var(--diep)}
.feit svg{flex:none;margin-top:3px;color:var(--paars)}
@media (max-width:960px){.verhalen__grid{grid-template-columns:1fr}}
/* ============================================================
09 CIJFERS
============================================================ */
.cijfers{background:var(--mint)}
.cijfers__kop{margin-bottom:clamp(30px,3.4vw,48px)}
.cijfers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.cijfer{border-top:2px solid rgba(37,29,66,.22);padding-top:20px}
.cijfer b{display:block;font-family:var(--kop);font-weight:800;font-stretch:75%;
font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(46px,5.4vw,76px);
line-height:.86;color:var(--diep);margin-bottom:12px}
.cijfer p{font-size:15.5px;line-height:1.4;color:rgba(37,29,66,.8)}
.cijfer em{display:block;font-style:normal;font-size:12.5px;color:rgba(37,29,66,.74);margin-top:8px}
@media (max-width:820px){.cijfers__grid{grid-template-columns:1fr 1fr}}
/* ============================================================
10 KENNISBANK
============================================================ */
.kennis{background:var(--wit)}
.kennis__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
margin-bottom:clamp(28px,3.2vw,44px);flex-wrap:wrap}
.kennis__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:var(--r-m);
border:1px solid var(--rand-zacht);text-decoration:none;color:inherit;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.art:hover{transform:translateY(-4px);box-shadow:var(--schaduw-kaart);border-color:var(--paars-licht)}
.art__meta{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--paars-donker)}
.art h3{font-size:21px;line-height:1.08}
.art__lees{margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:600;color:var(--diep);
display:inline-flex;align-items:center;gap:8px}
.art__lees svg{transition:transform .2s ease}
.art:hover .art__lees svg{transform:translateX(4px)}
@media (max-width:960px){.kennis__grid{grid-template-columns:1fr}}
/* ============================================================
11 AFSLUITER
============================================================ */
.slot{background:var(--geel);position:relative;overflow:hidden}
.slot__in{position:relative;z-index:1;text-align:center;max-width:56ch;margin-inline:auto}
.slot h2{margin-bottom:16px}
.slot p{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:rgba(37,29,66,.82)}
.slot__acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.slot__blokken{position:absolute;inset:0;pointer-events:none;opacity:.9}
.slot__blokken i{position:absolute;border-radius:var(--r-s);display:block}
.slot__blokken i:nth-child(1){background:var(--paars);width:150px;height:60px;left:-40px;top:16%}
.slot__blokken i:nth-child(2){background:var(--mint);width:110px;height:110px;right:-32px;top:12%}
.slot__blokken i:nth-child(3){background:var(--roze);width:88px;height:54px;left:6%;bottom:12%}
.slot__blokken i:nth-child(4){background:var(--diep);width:130px;height:46px;right:7%;bottom:16%}
@media (max-width:900px){.slot__blokken{display:none}.slot__acties .knop{flex:1 1 100%}}
/* ============================================================
12 FOOTER
============================================================ */
.ftr{background:var(--diep);color:rgba(255,255,255,.78);padding-block:clamp(48px,5.4vw,76px) 0}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.ftr h4{color:#fff;font-size:17px;margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr a{color:rgba(255,255,255,.78);text-decoration:none;font-size:15.5px;transition:color .16s ease}
.ftr a:hover{color:var(--geel)}
.ftr__contact{font-size:15.5px;line-height:1.65;font-style:normal}
.ftr__contact a{display:inline-block}
.nieuwsbrief{margin-top:22px;max-width:340px}
.nieuwsbrief p{font-size:14px;color:rgba(255,255,255,.62);margin-bottom:10px}
.nieuwsbrief__rij{display:flex;gap:8px}
.nieuwsbrief input{flex:1;min-width:0;font-family:var(--body);font-size:15px;color:#fff;
background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.2);
border-radius:var(--r-s);padding:12px 14px}
.nieuwsbrief input::placeholder{color:rgba(255,255,255,.45)}
.nieuwsbrief button{font-family:var(--body);font-size:15px;font-weight:600;cursor:pointer;
background:var(--geel);color:var(--diep);border:0;border-radius:var(--r-s);padding:12px 18px}
.juridisch{margin-top:clamp(38px,4vw,56px);padding:20px 0;border-top:1px solid rgba(255,255,255,.14);
font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.62)}
.juridisch a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.juridisch .cms{border-bottom-color:rgba(255,255,255,.45)}
.copy{padding:16px 0 22px;border-top:1px solid rgba(255,255,255,.1);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.62)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
/* mobiel: knoppen onder elkaar op volle breedte, zoals de briefing vraagt */
@media (max-width:600px){
.knop{white-space:normal;text-align:center;padding-inline:18px}
.hero__acties .knop,.slot__acties .knop,.kosten__links .knop,.kennis__kop .knop,.bedankt .knop{width:100%}
.mbalk .knop{white-space:nowrap;width:100%}
}
@media (max-width:560px){
.kosten__blok{padding:28px 20px}
}
/* ============================================================
BEELD - foto's en het beeldmerk, overgenomen van
final.slimmehypotheek.nl. Losse bestanden in final-lp-assets/.
Geen enkele sectie verandert van indeling; het beeld komt
binnen de bestaande blokken en kaders.
============================================================ */
.logo__merk{width:38px;height:38px;flex:none;display:block}
/* statementband - portretten in de gekleurde blokken, net als op de homepage */
.blok--foto{overflow:hidden;position:relative;padding:0}
.blok--foto img{display:block;width:100%;height:100%;object-fit:cover}
.blok--mint.blok--foto img{object-position:50% 8%}
.blok--paars.blok--foto img{object-position:50% 3%}
.blok--diep.blok--foto img{object-position:50% 14%}
.band__mobiel{display:none}
/* Hier stond een kantoorfoto achter de tabel met een schuin wit verloop
eroverheen. Hij bleef met de vergelijking concurreren; op 04-09 weg, op beide
landingspagina's. De sectie staat nu op wit. */
/* afsluiter - de grijsharige man met het beeldmerk over zijn hoofd,
dezelfde opbouw als de homepage-CTA "Heb je een vraag?" */
.slot__beeld{position:absolute;right:max(8px,calc((100% - 1310px) / 2));bottom:0;z-index:1;
width:clamp(230px,30vw,420px);pointer-events:none}
.slot__beeld img{display:block;width:100%;height:auto}
.slot__merk{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
width:82%;aspect-ratio:278/243;background:var(--paars);
-webkit-mask-image:url(final-lp-assets/hex-lijn.png);mask-image:url(final-lp-assets/hex-lijn.png);
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center}
.slot .wrap{position:relative;z-index:2}
@media (min-width:901px){
.slot__in{margin-inline:auto clamp(236px,30vw,420px)}
.slot__blokken i:nth-child(4){display:none}
}
@media (max-width:900px){
.slot{padding-bottom:0}
.slot__beeld{position:relative;right:auto;width:min(260px,64%);margin:30px auto -1px;display:block}
.slot__in{margin-inline:auto}
}
/* proces - een brede fotostrook onder de drie stappen */
.procesfoto{margin:clamp(30px,3.6vw,52px) 0 0;border-radius:var(--r-l);overflow:hidden;
box-shadow:0 26px 50px -34px rgba(37,29,66,.8)}
.procesfoto img{display:block;width:100%;height:clamp(230px,34vw,470px);
object-fit:cover;object-position:50% 42%}
/* ---------- telefoon ---------- */
@media (max-width:620px){
/* de kleurbalk onder de uitspraak wordt een rij portretten */
.band .wrap::after{display:none}
.band__mobiel{display:flex;gap:9px;margin-top:24px}
.mfoto{flex:1;min-width:0;height:clamp(88px,27vw,118px);border-radius:var(--r-s);
overflow:hidden;display:block}
.mfoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.mfoto--mint{background:var(--mint)}
.mfoto--paars{background:var(--paars)}
.mfoto--geel{background:var(--geel)}
}
/* ============================================================
MOBIELE VASTE BALK
============================================================ */
.mbalk{display:none}
@media (max-width:820px){
.mbalk{display:grid;grid-template-columns:1fr 1.25fr;gap:9px;position:fixed;
left:0;right:0;bottom:0;z-index:70;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
border-top:1px solid var(--rand);box-shadow:0 -10px 30px -22px rgba(37,29,66,.6)}
.mbalk .knop{padding:13px 14px;font-size:15.5px;width:100%}
body{padding-bottom:78px}
}
/* ---------- uitklapbalk voor de eerste vraag ----------
De bron gebruikt hier een uitklapbalk in plaats van kaarten; dat is met tien
opties ook de enige vorm die past. Vormtaal wel de onze: dezelfde radius,
dezelfde randkleur en hetzelfde paars als de rest van het formulier. */
.uitklap{position:relative}
.uitklap__balk{display:flex;align-items:center;gap:10px;width:100%;
padding:15px 16px;border:1.5px solid rgba(37,29,66,.16);border-radius:12px;
background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--diep)}
.uitklap__balk:hover{border-color:var(--paars)}
.uitklap__balk[aria-expanded="true"]{border-color:var(--paars);
box-shadow:0 0 0 3px rgba(146,115,255,.16)}
.uitklap__label{flex:1;font-weight:600}
.uitklap__label.leeg{color:#6b6580;font-weight:500}
.uitklap__pijl{transition:transform .18s ease;color:var(--paars)}
.uitklap__balk[aria-expanded="true"] .uitklap__pijl{transform:rotate(180deg)}
.uitklap__lijst{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 6px);
max-height:288px;overflow:auto;padding:6px;border:1.5px solid rgba(37,29,66,.16);
border-radius:12px;background:#fff;box-shadow:0 18px 44px -20px rgba(37,29,66,.5)}
.uitklap__lijst[hidden]{display:none}
.uitklap__optie{display:flex;align-items:center;gap:10px;width:100%;
padding:11px 12px;border:0;border-radius:9px;background:none;cursor:pointer;
text-align:left;font:inherit;color:var(--diep)}
.uitklap__optie:hover,.uitklap__optie:focus-visible{background:var(--lila);outline:none}
.uitklap__optie[aria-selected="true"]{background:var(--lila);font-weight:600}
.uitklap__ic{width:24px;text-align:center;font-size:17px;line-height:1}
.veld--half{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.veld--half{grid-template-columns:1fr}}
.vervolg[hidden]{display:none}
</style>
<a class="skip" href="#berekening">Naar de berekening</a>
<!-- ============================================================
00 NAVIGATIE
============================================================ -->
<header class="hdr" id="hdr"><span id="top"></span>
<div class="wrap hdr__in">
<a class="logo" href="/" aria-label="Slimme Hypotheek, naar de homepage">
<img class="logo__merk" src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/beeldmerk.png" alt="" width="38" height="38" decoding="async">
<span class="logo__tekst">Slimme<br>Hypotheek</span>
</a>
<div class="hdr__acties">
<a class="knop knop--secundair hdr__bel" href="tel:+31534362525" data-tel="header-mobiel">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg>
Bel ons
</a>
<a class="knop knop--secundair hdr__nr" href="tel:+31534362525" data-tel="header">
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/>
</svg>
Bel 053 436 25 25
</a>
</div>
</div>
</header>
<main>
<!-- ============================================================
01 HERO
============================================================ -->
<section class="hero">
<div class="wrap hero__in">
<div class="hero__grid">
<div class="hero__tekst">
<h1 id="heroKop" class="kop--lang"><span id="kopVoor">Geld uit je huis, zonder je lage rente kwijt te </span><span class="mark" id="kopMark">raken<svg viewBox="0 0 200 10" preserveAspectRatio="none" aria-hidden="true"><path d="M2 7C40 2 96 1 132 4c22 2 46 2 66 1"/></svg></span></h1>
<p class="lead" id="heroSub">Een tweede hypotheek naast je huidige. Je oude rente houd je gewoon. <span class="lang">Binnen 24 uur weet je wat er kan en wat het kost.</span></p>
<div class="hero__acties">
<a class="knop knop--primair" href="#berekening" id="heroCta">
Bekijk wat mogelijk is
<span class="tag">2 min</span>
</a>
<a class="knop knop--secundair" href="tel:+31534362525" data-tel="hero">Of bel 053 436 25 25</a>
</div>
<div class="keur">
<span class="bol">9,9</span>
<p><strong>9,9 uit 10</strong> – gemiddeld cijfer uit 242 beoordelingen<br>op <span class="cms" title="CMS-veld: naam beoordelingsplatform">[platform]</span></p>
</div>
</div>
<!-- ============================================================
HET FORMULIER - een vraag per stap. Zes velden in de volgorde uit
de briefing, met de indicatie na veld 3 en zonder contactgegevens.
============================================================ -->
<div class="form" id="berekening">
<form id="berekenForm" novalidate>
<div class="form__top">
<div class="balk" aria-hidden="true"><i id="voortgang"></i></div>
<p class="form__meta"><b id="stapLabel">Stap 1 van 9</b><span id="pctLabel">0% voltooid</span></p>
</div>
<p class="uitkomst" id="uitkomst"><span id="uitLabel">Je geschatte overwaarde</span><b id="uitBedrag">€ 0</b></p>
<div class="form__body" id="formBody" role="group" aria-live="polite">
<!-- 1 -->
<div class="stapv actief" data-stap="doel">
<h2 class="vraag">Waarvoor wil je de overwaarde gebruiken?</h2>
<p class="uitleg">Kies wat het dichtst bij jouw plan ligt.</p>
<div class="veld" id="v-doel">
<label class="veld__label" id="doelLabel">Kies je doel</label>
<div class="uitklap">
<button class="uitklap__balk" type="button" id="doelBalk"
aria-expanded="false" aria-haspopup="listbox" aria-labelledby="doelLabel doelTekst">
<span class="uitklap__ic" id="doelIcoon" aria-hidden="true"></span>
<span class="uitklap__label leeg" id="doelTekst">Selecteer een optie</span>
<span class="uitklap__pijl" aria-hidden="true">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</span>
</button>
<div class="uitklap__lijst" id="doelLijst" role="listbox" aria-labelledby="doelLabel" hidden>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Verbouwing / renovatie" data-ic="🏠"><span class="uitklap__ic" aria-hidden="true">🏠</span><span>Verbouwing / renovatie</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Duurzaamheidsmaatregelen" data-ic="🌱"><span class="uitklap__ic" aria-hidden="true">🌱</span><span>Duurzaamheidsmaatregelen</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Aflossen van bestaande leningen" data-ic="💳"><span class="uitklap__ic" aria-hidden="true">💳</span><span>Aflossen van bestaande leningen</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Aankoop (vakantie)woning of beleggingspand" data-ic="🏖"><span class="uitklap__ic" aria-hidden="true">🏖</span><span>Aankoop (vakantie)woning of beleggingspand</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Financiele buffer of pensioen aanvulling" data-ic="💰"><span class="uitklap__ic" aria-hidden="true">💰</span><span>Financiele buffer of pensioen aanvulling</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Schenking of financiele ondersteuning" data-ic="🎁"><span class="uitklap__ic" aria-hidden="true">🎁</span><span>Schenking of financiele ondersteuning</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Overbrugging" data-ic="🛣"><span class="uitklap__ic" aria-hidden="true">🛣</span><span>Overbrugging</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Vrije besteding" data-ic="✨"><span class="uitklap__ic" aria-hidden="true">✨</span><span>Vrije besteding</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Alleen orienteren / informatie" data-ic="💡"><span class="uitklap__ic" aria-hidden="true">💡</span><span>Alleen orienteren / informatie</span></button>
<button class="uitklap__optie" type="button" role="option" aria-selected="false" data-waarde="Overig" data-ic="⋯"><span class="uitklap__ic" aria-hidden="true">⋯</span><span>Overig</span></button>
</div>
</div>
<input type="hidden" id="doel" name="doel">
<p class="fout-tekst">Kies eerst waarvoor je de overwaarde wilt gebruiken.</p>
</div>
</div>
<!-- 2 -->
<div class="stapv" data-stap="bedragen">
<h2 class="vraag">Wat weten we over jouw woning?</h2>
<p class="uitleg">Hierna zie je meteen je eerste bedrag. Contactgegevens hoeven nog niet.</p>
<div class="veld" id="v-ow-woningwaarde">
<label class="veld__label" for="ow-woningwaarde">Waarde van je woning</label>
<div class="euro"><span>€</span>
<input class="invoer" id="ow-woningwaarde" name="ow-woningwaarde" type="text" inputmode="numeric" autocomplete="off" placeholder="450.000">
</div>
<p class="tip">Een schatting is genoeg. Kijk op je WOZ-beschikking of vergelijk op Funda.</p>
<p class="fout-tekst">Vul een bedrag in.</p>
</div>
<div class="veld" id="v-ow-hypotheek">
<label class="veld__label" for="ow-hypotheek">Openstaande hypotheek</label>
<div class="euro"><span>€</span>
<input class="invoer" id="ow-hypotheek" name="ow-hypotheek" type="text" inputmode="numeric" autocomplete="off" placeholder="230.000">
</div>
<p class="tip">Staat op het laatste jaaroverzicht van je geldverstrekker. Al afgelost? Vul 0 in.</p>
<p class="fout-tekst">Vul een bedrag in.</p>
</div>
</div>
<!-- de indicatie, voor de contactgegevens -->
<div class="stapv" data-stap="indicatie" role="status">
<p class="indicatie__label" id="indLabel">Je geschatte overwaarde</p>
<p class="indicatie__bedrag" id="indBedrag">€ 0</p>
<p class="indicatie__uitleg" id="indUitleg"></p>
<div class="indicatie__rij" id="indChips"></div>
<p class="indicatie__voet">Dit is de waarde van je woning min je openstaande hypotheek. Wat je er daadwerkelijk van kunt opnemen hangt af van je inkomen en de taxatiewaarde. Daar belt een adviseur je over.</p>
</div>
<!-- 3 -->
<fieldset class="stapv" data-stap="inkomen">
<legend class="vraag kop">Wat is je primaire inkomstenbron?</legend>
<p class="uitleg">Dit bepaalt bij welke geldverstrekkers we voor je kijken.</p>
<div class="keuzes">
<label class="kz"><input type="radio" name="inkomen" value="Loondienst"><span><i class="kz__radio" aria-hidden="true"></i>Loondienst</span></label>
<label class="kz"><input type="radio" name="inkomen" value="Zelfstandige"><span><i class="kz__radio" aria-hidden="true"></i>Zelfstandige</span></label>
<label class="kz"><input type="radio" name="inkomen" value="Uitkering"><span><i class="kz__radio" aria-hidden="true"></i>Uitkering</span></label>
<label class="kz"><input type="radio" name="inkomen" value="Pensioen"><span><i class="kz__radio" aria-hidden="true"></i>Pensioen</span></label>
</div>
<p class="fout-tekst">Kies je inkomstenbron.</p>
</fieldset>
<!-- 4 -->
<div class="stapv" data-stap="salaris">
<h2 class="vraag">Wat is je bruto maandsalaris?</h2>
<p class="uitleg">Bij een uitkering of pensioen: het bedrag dat je per maand ontvangt.</p>
<div class="veld" id="v-ow-salaris">
<label class="veld__label" for="ow-salaris">Bruto maandsalaris</label>
<div class="euro"><span>€</span>
<input class="invoer" id="ow-salaris" name="ow-salaris" type="text" inputmode="numeric" autocomplete="off" placeholder="3.200">
</div>
<p class="tip">Het bedrag voor belasting, per maand.</p>
<p class="fout-tekst">Vul een bedrag in.</p>
</div>
</div>
<!-- 5 -->
<fieldset class="stapv" data-stap="partner">
<legend class="vraag kop">Heb je een partner?</legend>
<p class="uitleg">Een tweede inkomen telt mee in wat er mogelijk is.</p>
<div class="keuzes">
<label class="kz"><input type="radio" name="partner" value="Ja"><span><i class="kz__radio" aria-hidden="true"></i>Ja</span></label>
<label class="kz"><input type="radio" name="partner" value="Nee"><span><i class="kz__radio" aria-hidden="true"></i>Nee</span></label>
</div>
<p class="fout-tekst">Geef aan of je een partner hebt.</p>
<div class="vervolg" id="partnerVervolg" hidden>
<p class="veld__label" style="margin-top:18px">Inkomstenbron partner</p>
<div class="keuzes">
<label class="kz"><input type="radio" name="partnerInkomen" value="Loondienst"><span><i class="kz__radio" aria-hidden="true"></i>Loondienst</span></label>
<label class="kz"><input type="radio" name="partnerInkomen" value="Zelfstandige"><span><i class="kz__radio" aria-hidden="true"></i>Zelfstandige</span></label>
<label class="kz"><input type="radio" name="partnerInkomen" value="Uitkering"><span><i class="kz__radio" aria-hidden="true"></i>Uitkering</span></label>
<label class="kz"><input type="radio" name="partnerInkomen" value="Pensioen"><span><i class="kz__radio" aria-hidden="true"></i>Pensioen</span></label>
</div>
<div class="veld" id="v-ow-partnerSalaris">
<label class="veld__label" for="ow-partnerSalaris">Bruto maandsalaris partner</label>
<div class="euro"><span>€</span>
<input class="invoer" id="ow-partnerSalaris" name="ow-partnerSalaris" type="text" inputmode="numeric" autocomplete="off" placeholder="2.600">
</div>
<p class="tip">Het bedrag voor belasting, per maand.</p>
<p class="fout-tekst">Vul een bedrag in.</p>
</div>
</div>
</fieldset>
<!-- 6 -->
<fieldset class="stapv" data-stap="leningen">
<legend class="vraag kop">Heb je lopende leningen?</legend>
<p class="uitleg">Persoonlijke lening, autolening of creditcard.</p>
<div class="keuzes">
<label class="kz"><input type="radio" name="leningen" value="Ja"><span><i class="kz__radio" aria-hidden="true"></i>Ja</span></label>
<label class="kz"><input type="radio" name="leningen" value="Nee"><span><i class="kz__radio" aria-hidden="true"></i>Nee</span></label>
</div>
<p class="fout-tekst">Geef aan of je lopende leningen hebt.</p>
<div class="vervolg" id="leningVervolg" hidden>
<div class="veld" id="v-ow-leningBedrag">
<label class="veld__label" for="ow-leningBedrag">Totaal openstaand bedrag</label>
<div class="euro"><span>€</span>
<input class="invoer" id="ow-leningBedrag" name="ow-leningBedrag" type="text" inputmode="numeric" autocomplete="off" placeholder="12.000">
</div>
<p class="tip">Bij elkaar opgeteld, alle leningen samen.</p>
<p class="fout-tekst">Vul een bedrag in.</p>
</div>
</div>
</fieldset>
<!-- 7 -->
<div class="stapv" data-stap="naam">
<h2 class="vraag">Vertel ons wie je bent</h2>
<p class="uitleg">Zodat de adviseur weet wie hij belt.</p>
<div class="veld veld--half" id="v-naam">
<div>
<label class="veld__label" for="ow-voornaam">Voornaam</label>
<input class="invoer" id="ow-voornaam" name="voornaam" type="text" autocomplete="given-name" placeholder="Voornaam">
</div>
<div>
<label class="veld__label" for="ow-achternaam">Achternaam</label>
<input class="invoer" id="ow-achternaam" name="achternaam" type="text" autocomplete="family-name" placeholder="Achternaam">
</div>
</div>
<div class="veld" id="v-geboortedatum">
<label class="veld__label" for="ow-geboortedatum">Geboortedatum</label>
<input class="invoer" id="ow-geboortedatum" name="geboortedatum" type="date" autocomplete="bday">
<p class="fout-tekst">Vul je naam en geboortedatum in.</p>
</div>
</div>
<!-- 8 -->
<div class="stapv" data-stap="adres">
<h2 class="vraag">Waar woon je?</h2>
<p class="uitleg">Postcode en huisnummer zijn genoeg, de rest zoeken we op.</p>
<div class="veld veld--half" id="v-adres">
<div>
<label class="veld__label" for="ow-postcode">Postcode</label>
<input class="invoer" id="ow-postcode" name="postcode" type="text" autocomplete="postal-code" placeholder="7521 BE">
</div>
<div>
<label class="veld__label" for="ow-huisnummer">Huisnummer</label>
<input class="invoer" id="ow-huisnummer" name="huisnummer" type="text" autocomplete="address-line2" placeholder="10">
</div>
</div>
<p class="tip" id="adresTip">We zoeken je straat en plaats erbij op.</p>
<p class="fout-tekst" id="adresFout">Vul een geldige postcode en huisnummer in.</p>
</div>
<!-- 9 -->
<div class="stapv" data-stap="contact">
<h2 class="vraag">Waar kunnen we je bereiken?</h2>
<p class="uitleg" id="belUitleg"></p>
<div class="veld" id="v-telefoon">
<label class="veld__label" for="ow-telefoon">Telefoonnummer</label>
<input class="invoer" id="ow-telefoon" name="telefoon" type="tel" inputmode="tel" autocomplete="tel" placeholder="06 12 34 56 78">
<p class="fout-tekst">Vul een Nederlands nummer van tien cijfers in.</p>
</div>
<div class="veld" id="v-email">
<label class="veld__label" for="ow-email">E-mailadres</label>
<input class="invoer" id="ow-email" name="email" type="email" inputmode="email" autocomplete="email" placeholder="naam@voorbeeld.nl">
<p class="fout-tekst">Vul een geldig e-mailadres in.</p>
</div>
</div>
</div>
<div class="form__nav">
<button class="knop knop--secundair" type="button" id="vorige">Vorige</button>
<button class="knop knop--primair" type="button" id="volgende">
<span id="volgendeTekst">Volgende stap</span>
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
</div>
<p class="privacy" id="privacyRegel">Je ziet je bedrag direct op het scherm. Geen gegevens nodig.</p>
</form>
<!-- bedankscherm -->
<div class="bedankt" id="bedankt" role="status" aria-live="polite">
<div class="bedankt__vink">
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#251D42" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
</div>
<h2>Bedankt, <span id="bedanktNaam">we bellen je</span>.</h2>
<p id="bedanktTekst"></p>
<a class="knop knop--secundair" href="tel:+31534362525" data-tel="bedankt">Liever nu meteen? 053 436 25 25</a>
</div>
</div>
</div>
</div>
<!-- ============================================================
02 BEWIJSBALK
============================================================ -->
<div class="wrap bewijs">
<div class="bewijs__venster" id="uspVenster">
<div class="bewijs__grid" id="uspRij">
<div class="bkaart" id="bewijsEerste">
<p class="bkaart__cijfer"><span class="cms" title="CMS-veld: aantal per pagina">[X]</span> van 10</p>
<p class="bkaart__tekst">klanten die elders werden afgewezen, kregen bij ons wél een oplossing</p>
</div>
<div class="bkaart">
<p class="bkaart__cijfer">Binnen 24 uur</p>
<p class="bkaart__tekst">een adviseur aan de lijn met een eerste berekening</p>
</div>
<a class="bkaart" href="/beoordelingen/" rel="noopener">
<p class="bkaart__cijfer">9,9 uit 10</p>
<p class="bkaart__tekst">gemiddeld cijfer uit 242 beoordelingen op <span class="cms" title="CMS-veld: beoordelingsplatform">[platform]</span></p>
<span class="bkaart__link">Lees de beoordelingen</span>
</a>
<div class="bkaart">
<p class="bkaart__cijfer">AFM <span class="cms" title="CMS-veld: AFM-vergunningnummer">[nummer]</span></p>
<p class="bkaart__tekst">aangesloten bij KiFiD · <span class="cms" title="CMS-veld: keurmerk">[Erkend Financieel Adviseur]</span></p>
<span class="bkaart__link"><a href="https://www.afm.nl/nl-nl/sector/registers/vergunningenregisters" rel="noopener">AFM-register</a><span class="punt"> · </span><a href="/dienstverleningsdocument.pdf" rel="noopener">Dienstverleningsdocument</a></span>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
03 STATEMENTBAND
============================================================ -->
<section class="band sectie" aria-label="Bij je bank niet. Hier vaak wél.">
<div class="wrap">
<div class="band__rij">
<i class="blok blok--geel blok--klein" aria-hidden="true"></i>
<span class="blok blok--mint blok--verberg blok--foto" aria-hidden="true"><img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/portret-man-baard.webp" alt="" loading="lazy" decoding="async"></span>
<span class="band__woord">Bij je bank</span>
<span class="blok blok--paars blok--foto" aria-hidden="true"><img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/portret-vrouw.webp" alt="" loading="lazy" decoding="async"></span>
<span class="band__woord">niet.</span>
</div>
<div class="band__rij">
<span class="band__woord">Hier</span>
<span class="blok blok--diep blok--foto" aria-hidden="true"><img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/portret-man-bril.webp" alt="" loading="lazy" decoding="async"></span>
<span class="band__woord">vaak wél.</span>
<i class="blok blok--geel blok--klein blok--verberg" aria-hidden="true"></i>
<i class="blok blok--roze" aria-hidden="true"></i>
</div>
<!-- telefoon: de losse blokjes vallen daar weg, hier komen de portretten terug -->
<div class="band__mobiel" aria-hidden="true">
<span class="mfoto mfoto--mint"><img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/portret-man-baard.webp" alt="" loading="lazy" decoding="async"></span>
<span class="mfoto mfoto--paars"><img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/portret-vrouw.webp" alt="" loading="lazy" decoding="async"></span>
<span class="mfoto mfoto--geel"><img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/portret-man-bril.webp" alt="" loading="lazy" decoding="async"></span>
</div>
</div>
</section>
<!-- ============================================================
04 KIES JE SITUATIE
============================================================ -->
<section class="deuren sectie" id="situaties">
<div class="wrap">
<div class="deuren__kop">
<p class="eyebrow">Vier deuren</p>
<h2>Kies je situatie</h2>
<p class="lead">Vier vragen die we het vaakst krijgen. Klik degene die op jou lijkt.</p>
</div>
<div class="deuren__grid">
<a class="deur deur--geel" href="/overwaarde-opnemen/" data-deur="overwaarde-opnemen">
<span class="deur__nr">01</span>
<h3>Ik wil geld uit mijn huis halen</h3>
<p>Voor een verbouwing, verduurzaming of iets anders. Ook als je eigen bank niet verder wil, en zonder je hele hypotheek over te sluiten.</p>
<span class="deur__pijl">Bekijk wat kan
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</a>
<a class="deur deur--mint" href="/eerste-huis-kopen/" data-deur="eerste-huis-kopen">
<span class="deur__nr">02</span>
<h3>Ik wil mijn eerste huis kopen</h3>
<p>Ook zonder eigen geld. Wij kijken wat er met jóuw inkomen kan – en wat je nodig hebt om er te komen.</p>
<span class="deur__pijl">Bekijk wat kan
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</a>
<a class="deur deur--roze" href="/leningen-inlossen/" data-deur="leningen-inlossen">
<span class="deur__nr">03</span>
<h3>Ik wil van mijn leningen af</h3>
<p>Persoonlijke lening, autolening of creditcard meenemen in je hypotheek. Eén maandlast in plaats van vier, vaak een stuk lager.</p>
<span class="deur__pijl">Bekijk wat kan
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</a>
<a class="deur deur--diep" href="/tijdelijk-contract-of-uitkering/" data-deur="tijdelijk-contract-of-uitkering">
<span class="deur__nr">04</span>
<h3>Mijn inkomen is niet standaard</h3>
<p>Een tijdelijk contract, vaak ook zonder intentieverklaring. Of inkomen uit een WGA- of IVA-uitkering. Precies het werk waar wij goed in zijn.</p>
<span class="deur__pijl">Bekijk wat kan
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</a>
</div>
</div>
</section>
<!-- ============================================================
05 WAAROM HIER WEL
============================================================ -->
<section class="verg sectie">
<div class="wrap">
<div class="verg__kop">
<p class="eyebrow">Waarom hier wél</p>
<h2>Wat bij je bank vastloopt, lossen wij vaak op</h2>
<p class="lead">Je bank toetst je aan één set regels: die van de bank zelf. Wij leggen jouw situatie naast <span class="cms" title="CMS-veld: aantal geldverstrekkers">[25]</span> geldverstrekkers en zoeken degene die bij jou past.</p>
</div>
<div class="verg__tabel">
<div class="verg__rij">
<div class="vc vc--hoofd vc--leeg"></div>
<div class="vc vc--hoofd vc--bank">Bij de bank</div>
<div class="vc vc--hoofd vc--ons">Bij Slimme Hypotheek</div>
</div>
<div class="verg__rij">
<div class="vc vc--label">Overwaarde opnemen</div>
<div class="vc vc--bank"><p class="cel__label">Bij de bank</p><span class="ic ic--nee" aria-hidden="true"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><p>Je overwaarde opnemen betekent je hele hypotheek oversluiten, tegen de rente van vandaag.</p></div>
<div class="vc vc--ons"><p class="cel__label">Bij Slimme Hypotheek</p><span class="ic ic--ja" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><p>Een tweede hypotheek naast je huidige. Je oude, lage rente houd je gewoon.</p></div>
</div>
<div class="verg__rij">
<div class="vc vc--label">Tijdelijk contract</div>
<div class="vc vc--bank"><p class="cel__label">Bij de bank</p><span class="ic ic--nee" aria-hidden="true"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><p>Tijdelijk contract? Dan wil men vaak eerst een vast contract of een intentieverklaring van je werkgever.</p></div>
<div class="vc vc--ons"><p class="cel__label">Bij Slimme Hypotheek</p><span class="ic ic--ja" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><p>Vaak ook zonder intentieverklaring. We weten bij welke geldverstrekkers dat kan en wat je ervoor moet aanleveren.</p></div>
</div>
<div class="verg__rij">
<div class="vc vc--label">Inkomen uit WGA of IVA</div>
<div class="vc vc--bank"><p class="cel__label">Bij de bank</p><span class="ic ic--nee" aria-hidden="true"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><p>Inkomen uit een WGA- of IVA-uitkering telt bij veel banken niet of maar deels mee.</p></div>
<div class="vc vc--ons"><p class="cel__label">Bij Slimme Hypotheek</p><span class="ic ic--ja" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><p>Er zijn geldverstrekkers die dit inkomen wél meerekenen. Daar kennen wij de weg.</p></div>
</div>
<div class="verg__rij">
<div class="vc vc--label">Lopende leningen</div>
<div class="vc vc--bank"><p class="cel__label">Bij de bank</p><span class="ic ic--nee" aria-hidden="true"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><p>Je leningen drukken je maximale hypotheek naar beneden. Punt.</p></div>
<div class="vc vc--ons"><p class="cel__label">Bij Slimme Hypotheek</p><span class="ic ic--ja" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><p>We lossen ze af mét de hypotheek. Eén lagere maandlast, en je leenruimte komt vrij.</p></div>
</div>
<div class="verg__rij">
<div class="vc vc--label">Hoe snel je iemand spreekt</div>
<div class="vc vc--bank"><p class="cel__label">Bij de bank</p><span class="ic ic--nee" aria-hidden="true"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><p>Een afspraak over drie weken, daarna wachten op iemand die je niet kent.</p></div>
<div class="vc vc--ons"><p class="cel__label">Bij Slimme Hypotheek</p><span class="ic ic--ja" aria-hidden="true"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><p>Binnen 24 uur een adviseur aan de lijn. Dezelfde adviseur, van begin tot eind.</p></div>
</div>
</div>
<p class="verg__voet">Vergelijking op hoe geldverstrekkers deze situaties doorgaans beoordelen, niet op merkniveau. Wat er in jouw geval kan hangt af van je inkomen en je situatie.</p>
</div>
</section>
<!-- ============================================================
06 PROCES
============================================================ -->
<section class="proces sectie">
<div class="wrap">
<div class="proces__kop">
<p class="eyebrow">Proces</p>
<h2>Van eerste vraag tot aanvraag</h2>
</div>
<div class="stappen">
<div class="stap">
<p class="stap__nr">01</p>
<p class="stap__tijd">Vandaag</p>
<h3>Je vertelt kort je situatie</h3>
<p>Zes vragen, twee minuten. Of je belt ons gewoon op <a href="tel:+31534362525" data-tel="proces">053 436 25 25</a>.</p>
</div>
<div class="stap">
<p class="stap__nr">02</p>
<p class="stap__tijd">Binnen 24 uur</p>
<h3>Een adviseur belt je terug</h3>
<p>Met een eerste berekening: wat er kan, wat het per maand kost en wat je nog nodig hebt. In gewone taal.</p>
</div>
<div class="stap">
<p class="stap__nr">03</p>
<p class="stap__tijd">Daarna</p>
<h3>Wij regelen de rest</h3>
<p>De aanvraag, de stukken en al het contact met de geldverstrekker. Jij hoort van ons – je hangt niet in een wachtrij.</p>
</div>
</div>
<figure class="procesfoto">
<img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/proces-band.webp" alt="Adviseurs van Slimme Hypotheek in gesprek met klanten" width="1500" height="920" loading="lazy" decoding="async">
</figure>
</div>
</section>
<!-- ============================================================
07 WAT HET KOST
============================================================ -->
<section class="kosten sectie">
<div class="wrap">
<div class="kosten__blok">
<div class="kosten__links">
<p class="eyebrow eyebrow--licht">Geen verrassingen</p>
<h2>Wat het kost</h2>
<p>Het eerste gesprek en de berekening zijn gratis. Ga je verder, dan kost ons advies en de bemiddeling <span class="cms" title="CMS-veld: advies- en bemiddelingskosten">€ 2.495</span>. Dat bedrag staat vast, ook als je dossier meer werk blijkt. Je weet het dus voordat je iets afspreekt.</p>
<a class="knop knop--randlicht" href="/dienstverleningsdocument.pdf" rel="noopener">
Ons dienstverleningsdocument
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3h7v7M21 3 10 14M19 14v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6"/></svg>
</a>
</div>
<div class="kosten__prijs">
<b class="cms" title="CMS-veld: advies- en bemiddelingskosten">€ 2.495</b>
<em>vast bedrag, ongeacht het werk</em>
</div>
</div>
</div>
</section>
<!-- ============================================================
08 KLANTVERHALEN
============================================================ -->
<section class="verhalen sectie">
<div class="wrap">
<div class="verhalen__kop">
<p class="eyebrow">Klantverhalen</p>
<h2>Mensen bij wie het wél lukte</h2>
</div>
<div class="verhalen__grid">
<article class="verhaal">
<p class="verhaal__quote">“Twee banken wilden een vast contract. Hier was het binnen een week geregeld.”</p>
<p class="verhaal__wie"><b><span class="cms" title="CMS-veld">[Voornaam]</span>, <span class="cms" title="CMS-veld">[plaats]</span></b><br>eerste woning gekocht</p>
<div class="feiten">
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Gevraagd <span class="cms" title="CMS-veld">[€ 285.000]</span></p>
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Tijdelijk contract, geen intentieverklaring</p>
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Geregeld in <span class="cms" title="CMS-veld">[9 dagen]</span></p>
</div>
</article>
<article class="verhaal">
<p class="verhaal__quote">“Ik wilde verbouwen maar mijn rente niet kwijt. Dat kon dus gewoon.”</p>
<p class="verhaal__wie"><b><span class="cms" title="CMS-veld">[Voornaam]</span>, <span class="cms" title="CMS-veld">[plaats]</span></b><br>overwaarde opgenomen</p>
<div class="feiten">
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Opgenomen <span class="cms" title="CMS-veld">[€ 70.000]</span></p>
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Tweede hypotheek naast bestaande</p>
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Rente van <span class="cms" title="CMS-veld">[2019]</span> behouden</p>
</div>
</article>
<article class="verhaal">
<p class="verhaal__quote">“Vier aflossingen werden één maandlast. Ik hou nu geld over.”</p>
<p class="verhaal__wie"><b><span class="cms" title="CMS-veld">[Voornaam]</span>, <span class="cms" title="CMS-veld">[plaats]</span></b><br>leningen ingelost</p>
<div class="feiten">
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Ingelost <span class="cms" title="CMS-veld">[€ 41.000]</span> aan leningen</p>
<p class="feit"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Maandlast <span class="cms" title="CMS-veld">[€ 310]</span> lager</p>
</div>
</article>
</div>
</div>
</section>
<!-- ============================================================
09 CIJFERS
============================================================ -->
<section class="cijfers sectie">
<div class="wrap">
<div class="cijfers__kop">
<p class="eyebrow">Cijfers</p>
<h2>Wat we tot nu toe hebben gedaan</h2>
</div>
<div class="cijfers__grid">
<div class="cijfer">
<b>2.500+</b>
<p>huishoudens verder geholpen</p>
<em>Bron <span class="cms" title="CMS-veld: bron">[bron]</span> · peildatum <span class="cms" title="CMS-veld: peildatum">[datum]</span></em>
</div>
<div class="cijfer">
<b><span class="cms" title="CMS-veld">[X]</span>/10</b>
<p>na een eerdere afwijzing alsnog een oplossing</p>
<em>Bron <span class="cms" title="CMS-veld: bron">[bron]</span> · peildatum <span class="cms" title="CMS-veld: peildatum">[datum]</span></em>
</div>
<div class="cijfer">
<b>9,9</b>
<p>gemiddeld cijfer uit 242 beoordelingen</p>
<em>Bron <span class="cms" title="CMS-veld: beoordelingsplatform">[platform]</span> · peildatum <span class="cms" title="CMS-veld: peildatum">[datum]</span></em>
</div>
<div class="cijfer">
<b><span class="cms" title="CMS-veld">[11]</span> dgn</b>
<p>gemiddeld van eerste gesprek tot aanvraag</p>
<em>Bron <span class="cms" title="CMS-veld: bron">[bron]</span> · peildatum <span class="cms" title="CMS-veld: peildatum">[datum]</span></em>
</div>
</div>
</div>
</section>
<!-- ============================================================
10 KENNISBANK
============================================================ -->
<section class="kennis sectie">
<div class="wrap">
<div class="kennis__kop">
<div>
<p class="eyebrow">Kennisbank</p>
<h2>Uitleg zonder jargon</h2>
</div>
<a class="knop knop--secundair" href="/kennisbank/">Alle artikelen</a>
</div>
<div class="kennis__grid">
<a class="art" href="/kennisbank/overwaarde-opnemen-vier-manieren/">
<span class="art__meta">Overwaarde · 6 min lezen</span>
<h3>Overwaarde opnemen: vier manieren en wat ze kosten</h3>
<span class="art__lees">Lees het artikel
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</a>
<a class="art" href="/kennisbank/kopen-zonder-eigen-geld/">
<span class="art__meta">Eerste huis · 5 min lezen</span>
<h3>Kopen zonder eigen geld: wat kan er in 2026 wél?</h3>
<span class="art__lees">Lees het artikel
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</a>
<a class="art" href="/kennisbank/leningen-meenemen-in-je-hypotheek/">
<span class="art__meta">Leningen · 7 min lezen</span>
<h3>Je leningen meenemen in je hypotheek: wanneer is dat slim?</h3>
<span class="art__lees">Lees het artikel
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</span>
</a>
</div>
</div>
</section>
<!-- ============================================================
11 AFSLUITER
============================================================ -->
<section class="slot sectie">
<div class="slot__blokken" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
<div class="wrap">
<div class="slot__in">
<h2>Weten wat er in jouw situatie kan?</h2>
<p id="slotBelofte">Zes vragen, twee minuten. Vul je vandaag voor 15:00 in, dan bellen we je vandaag nog.</p>
<div class="slot__acties">
<a class="knop knop--diep" href="#berekening">
Start je berekening
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
<a class="knop knop--secundair" href="tel:+31534362525" data-tel="afsluiter">Liever bellen? 053 436 25 25</a>
</div>
</div>
</div>
<div class="slot__beeld" aria-hidden="true">
<img src="https://slimmehypotheek.nl/final-landingspage-3/final-lp-assets/adviseur-grijs.webp" alt="" loading="lazy" decoding="async">
<span class="slot__merk"></span>
</div>
</section>
</main>
<!-- ============================================================
12 FOOTER
============================================================ -->
<footer class="ftr">
<div class="wrap">
<div class="ftr__grid">
<div>
<h4>Slimme Hypotheek</h4>
<address class="ftr__contact">
Rigtersbleek-Zandvoort 10-103<br>
7521 BE Enschede<br>
<a href="tel:+31534362525" data-tel="footer">053 436 25 25</a><br>
<a href="mailto:info@slimmehypotheek.nl">info@slimmehypotheek.nl</a>
</address>
<div class="nieuwsbrief">
<p>Blijf op de hoogte van wat er verandert in hypotheekland.</p>
<form class="nieuwsbrief__rij" id="nbForm">
<label class="sr" for="nbMail">E-mailadres</label>
<input id="nbMail" type="email" placeholder="jouw@email.nl" autocomplete="email" required>
<button type="submit">Houd me op de hoogte</button>
</form>
</div>
</div>
<div>
<h4>Situaties</h4>
<ul>
<li><a href="/overwaarde-opnemen/">Overwaarde opnemen</a></li>
<li><a href="/eerste-huis-kopen/">Eerste huis kopen</a></li>
<li><a href="/leningen-inlossen/">Leningen inlossen</a></li>
<li><a href="/hypotheek-met-schuld/">Hypotheek met schuld</a></li>
<li><a href="/tijdelijk-contract-of-uitkering/">Zonder vast contract</a></li>
</ul>
</div>
<div>
<h4>Berekenen</h4>
<ul>
<li><a href="/hypotheek-berekenen/">Hypotheek berekenen</a></li>
<li><a href="/overwaarde-berekenen/">Overwaarde berekenen</a></li>
<li><a href="/maandlasten-berekenen/">Maandlasten berekenen</a></li>
</ul>
</div>
<div>
<h4>Over ons</h4>
<ul>
<li><a href="/over-ons/">Wie we zijn</a></li>
<li><a href="/beoordelingen/">Beoordelingen (242)</a></li>
<li><a href="/kennisbank/">Kennisbank</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
</div>
<p class="juridisch">
Slimme Hypotheek is een handelsnaam van Attentas Financieel Adviseurs.
AFM-registratie <span class="cms" title="CMS-veld: AFM-nummer">[nummer]</span> ·
KiFiD <span class="cms" title="CMS-veld: KiFiD-nummer">[nummer]</span> ·
KvK 08102678 ·
<a href="/dienstverleningsdocument.pdf">Dienstverleningsdocument</a> ·
<a href="https://slimmehypotheek.nl/wp-content/uploads/2026/03/Vergelijkingskaart-Hypotheek-2026.pdf" rel="noopener">Vergelijkingskaart</a> ·
<a href="https://slimmehypotheek.nl/wp-content/uploads/2024/08/Beloningsbeleid-Attentas-Financieel-Adviseurs.pdf" rel="noopener">Beloningsbeleid</a> ·
<a href="/klachtenregeling/">Klachtenregeling</a> ·
<a href="/privacybeleid/">Privacybeleid</a>
</p>
<div class="copy">
<span>© <span id="jaar">2026</span> Slimme Hypotheek. Alle rechten voorbehouden.</span>
<a href="#top">Naar boven</a>
</div>
</div>
</footer>
<!-- mobiele vaste balk, staat op elke pagina -->
<div class="mbalk">
<a class="knop knop--secundair" href="tel:+31534362525" data-tel="mobiele-balk">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/>
</svg>
Bel ons
</a>
<a class="knop knop--primair" href="#berekening">Start je berekening</a>
</div>
<script>
(function(){
"use strict";
/* ---------- instelbare waarden (horen in het CMS, niet in de code) ---------- */
var BELTIJD_UUR = 15; // "vul je vandaag voor 15:00 in"
var BELTIJD_TEKST = "15:00";
/* Maximale verhouding lening/woningwaarde bij een tweede hypotheek.
0,90 is een gangbare vuistregel, GEEN vaststaand feit. Laat Slimme Hypotheek
dit bevestigen voor de pagina live gaat: het bedrag op het scherm hangt er
rechtstreeks van af en de pagina staat onder AFM-toezicht. */
var MAX_LTV = 0.90;
/* Pad van de bedankpagina. Zolang dit leeg is toont het formulier een
bedankscherm in de pagina zelf. Dat is prettig om te laten zien, maar de
bestaande GTM-conversietriggers vuren op het PAD (Page URL bevat "bedankt-").
Bij livegang moet dit dus gevuld zijn, anders wordt de conversie niet gemeten. */
var BEDANKT_URL = "";
var dl = function(naam, extra){
window.dataLayer = window.dataLayer || [];
/* variant en utm_source gaan mee op ELKE push, zodat formulier_start,
indicatie_gezien en formulier_afgerond per campagnevariant te splitsen
zijn. Zonder dit zie je in GA4 wel de aantallen maar niet van welke
variant ze komen. */
var q = new URLSearchParams(location.search);
var o = {
event: naam,
pagina: location.pathname,
variant: DOEL || 'generiek',
utm_source: q.get('utm_source') || '',
utm_campaign: q.get('utm_campaign') || ''
};
if(extra){ for(var k in extra){ o[k] = extra[k]; } }
window.dataLayer.push(o);
};
var DOEL = 'overwaarde';
/* ---------- header ---------- */
var hdr = document.getElementById('hdr');
var opScroll = function(){ hdr.classList.toggle('vast', window.scrollY > 8); };
opScroll();
window.addEventListener('scroll', opScroll, {passive:true});
document.getElementById('jaar').textContent = new Date().getFullYear();
/* ---------- meetpunten: telefoon_klik en deur_klik ---------- */
document.querySelectorAll('[data-tel]').forEach(function(a){
a.addEventListener('click', function(){ dl('telefoon_klik', {plek:a.getAttribute('data-tel')}); });
});
document.querySelectorAll('[data-deur]').forEach(function(a){
a.addEventListener('click', function(){ dl('deur_klik', {deur:a.getAttribute('data-deur')}); });
});
/* ---------- belbelofte, afhankelijk van dag en tijd ---------- */
function belofteTekst(){
var nu = new Date(), dag = nu.getDay(), voorGrens = nu.getHours() < BELTIJD_UUR;
if(dag === 0 || dag === 6) return "Vul in en je hoort maandag van ons.";
if(voorGrens) return "Vul je vandaag voor " + BELTIJD_TEKST + " in, dan bellen we je vandaag nog.";
if(dag === 5) return "Vul in en je hoort maandag van ons.";
return "Vul in en je hoort morgen van ons.";
}
document.getElementById('slotBelofte').textContent = "Zes vragen, twee minuten. " + belofteTekst();
/* ---------- het vragenblok van /overwaarde-lp/, nagebouwd ----------
Zelfde vragen, zelfde volgorde, zelfde opties en zelfde veldnamen als de
bron, maar in onze eigen vormtaal. Twee dingen met opzet anders:
het samenvattingspaneel is er niet, en het bedrag verschijnt na de twee
bedragvragen in plaats van pas na de contactgegevens.
*/
var STAPPEN = ['doel','bedragen','indicatie','inkomen','salaris','partner','leningen','naam','adres','contact'];
var VRAGEN = ['doel','bedragen','inkomen','salaris','partner','leningen','naam','adres','contact'];
var nu = 0, gestart = false, indicatieGetoond = false;
var form = document.getElementById('berekenForm');
var voortgang = document.getElementById('voortgang');
var stapLabel = document.getElementById('stapLabel');
var pctLabel = document.getElementById('pctLabel');
var uitkomst = document.getElementById('uitkomst');
var knopVolgende = document.getElementById('volgende');
var knopVorige = document.getElementById('vorige');
var volgendeTekst = document.getElementById('volgendeTekst');
var schermen = {};
[].forEach.call(form.querySelectorAll('.stapv'), function(el){ schermen[el.dataset.stap] = el; });
var el = function(id){ return document.getElementById(id); };
var elWon = el('ow-woningwaarde'), elHyp = el('ow-hypotheek');
function cijfers(node){ return ((node && node.value) || '').replace(/\D/g, ''); }
function getal(node){ var c = cijfers(node); return c ? parseInt(c, 10) : 0; }
function rond(n){ return Math.round(n / 1000) * 1000; }
function euro(n){ return '€ ' + (n || 0).toLocaleString('nl-NL'); }
function gekozen(naam){
var g = form.querySelector('input[name="' + naam + '"]:checked');
return g ? g.value : '';
}
function start(){ if(!gestart){ gestart = true; dl('formulier_start'); } }
/* --- bedragvelden met duizendtallen --- */
[].forEach.call(form.querySelectorAll('input[inputmode="numeric"]'), function(inv){
inv.addEventListener('input', function(){
var c = cijfers(inv);
/* een getypte 0 moet blijven staan: de tip zegt zelf "Al afgelost? Vul 0 in." */
inv.value = c === '' ? '' : parseInt(c, 10).toLocaleString('nl-NL');
start(); tekenVoortgang();
});
});
/* --- de uitklapbalk van vraag 1 --- */
(function(){
var balk = el('doelBalk'), lijst = el('doelLijst'),
tekst = el('doelTekst'), icoon = el('doelIcoon'), veld = el('doel');
function open(aan){
lijst.hidden = !aan;
balk.setAttribute('aria-expanded', aan ? 'true' : 'false');
}
balk.addEventListener('click', function(){ open(lijst.hidden); });
document.addEventListener('click', function(e){
if(!lijst.hidden && !balk.contains(e.target) && !lijst.contains(e.target)) open(false);
});
balk.addEventListener('keydown', function(e){
if(e.key === 'Escape') open(false);
});
[].forEach.call(lijst.querySelectorAll('.uitklap__optie'), function(knop){
knop.addEventListener('click', function(){
veld.value = knop.dataset.waarde;
tekst.textContent = knop.dataset.waarde;
tekst.classList.remove('leeg');
icoon.innerHTML = knop.dataset.ic;
[].forEach.call(lijst.querySelectorAll('.uitklap__optie'), function(k){
k.setAttribute('aria-selected', k === knop ? 'true' : 'false');
});
open(false);
start(); fout(el('v-doel'), true); tekenVoortgang();
setTimeout(function(){ if(STAPPEN[nu] === 'doel') toon(nu + 1); }, 200);
});
});
})();
/* --- keuzevragen schuiven vanzelf door, vervolgvragen niet --- */
function keuzeLuisteraar(naam, vervolgId, doorschuiven){
[].forEach.call(form.querySelectorAll('input[name="' + naam + '"]'), function(r){
r.addEventListener('change', function(){
start();
if(vervolgId){
var v = el(vervolgId);
if(v) v.hidden = (r.value !== 'Ja');
}
var scherm = schermen[STAPPEN[nu]];
if(scherm) fout(scherm, true);
tekenVoortgang();
if(doorschuiven && r.value !== 'Ja'){
setTimeout(function(){ if(stapGeldig(STAPPEN[nu], false)) toon(nu + 1); }, 220);
}
});
});
}
keuzeLuisteraar('inkomen', null, true);
keuzeLuisteraar('partner', 'partnerVervolg', true);
keuzeLuisteraar('leningen', 'leningVervolg', true);
keuzeLuisteraar('partnerInkomen', null, false);
form.addEventListener('input', start);
/* --- fouten tonen --- */
function fout(node, goed){
if(!node) return goed;
node.classList.toggle('heeft-fout', !goed);
[].forEach.call(node.querySelectorAll('.invoer'), function(i){ i.classList.toggle('fout', !goed); });
return goed;
}
function meldFout(node, tekst){
var p = node && node.querySelector('.fout-tekst');
if(p && tekst) p.textContent = tekst;
}
/* --- validatie per stap --- */
function stapGeldig(naam, toonFout){
var node, goed = true, melding = '';
if(naam === 'doel'){
node = el('v-doel'); goed = !!el('doel').value;
} else if(naam === 'bedragen'){
node = schermen.bedragen;
var w = getal(elWon), h = cijfers(elHyp);
var wGoed = w >= 10000;
var hGoed = h !== '' && (parseInt(h, 10) === 0 || parseInt(h, 10) >= 1000);
fout(el('v-ow-woningwaarde'), wGoed);
fout(el('v-ow-hypotheek'), hGoed);
if(toonFout){
meldFout(el('v-ow-woningwaarde'), w > 0
? 'Dat lijkt te laag voor een woning. Vul de waarde in hele euro’s in, bijvoorbeeld 450.000.'
: 'Vul de waarde van je woning in.');
meldFout(el('v-ow-hypotheek'), h === ''
? 'Vul een bedrag in. Al afgelost? Vul 0 in.'
: 'Vul het bedrag in hele euro’s in, of 0 als je niets meer openstaan hebt.');
}
return wGoed && hGoed;
} else if(naam === 'inkomen'){
node = schermen.inkomen; goed = !!gekozen('inkomen');
} else if(naam === 'salaris'){
node = el('v-ow-salaris');
goed = getal(el('ow-salaris')) >= 100;
melding = 'Vul je bruto maandsalaris in, bijvoorbeeld 3.200.';
} else if(naam === 'partner'){
node = schermen.partner;
goed = !!gekozen('partner');
if(goed && gekozen('partner') === 'Ja'){
goed = !!gekozen('partnerInkomen') && getal(el('ow-partnerSalaris')) >= 100;
melding = 'Vul ook de inkomstenbron en het maandsalaris van je partner in.';
}
} else if(naam === 'leningen'){
node = schermen.leningen;
goed = !!gekozen('leningen');
if(goed && gekozen('leningen') === 'Ja'){
goed = getal(el('ow-leningBedrag')) >= 100;
melding = 'Vul het totale openstaande bedrag in.';
}
} else if(naam === 'naam'){
node = el('v-geboortedatum');
var naamOk = /^[A-Za-zÀ-ɏ][A-Za-zÀ-ɏ'’\- ]{1,}$/;
var vn = (el('ow-voornaam').value || '').trim();
var an = (el('ow-achternaam').value || '').trim();
var gb = el('ow-geboortedatum').value;
var jaar = gb ? new Date(gb).getFullYear() : 0;
goed = naamOk.test(vn) && naamOk.test(an) && !!gb &&
jaar > 1920 && (new Date() - new Date(gb)) > 18 * 365.25 * 864e5;
fout(el('v-naam'), naamOk.test(vn) && naamOk.test(an));
melding = !gb ? 'Vul je geboortedatum in.'
: (jaar <= 1920 || (new Date() - new Date(gb)) <= 18 * 365.25 * 864e5)
? 'Je moet 18 jaar of ouder zijn voor een hypotheekaanvraag.'
: 'Vul je voornaam en achternaam in met minstens twee letters.';
} else if(naam === 'adres'){
node = schermen.adres;
var pc = (el('ow-postcode').value || '').replace(/\s/g, '').toUpperCase();
var hn = (el('ow-huisnummer').value || '').trim();
goed = /^[1-9][0-9]{3}[A-Z]{2}$/.test(pc) && /^[0-9]{1,5}[A-Za-z\-]{0,4}$/.test(hn);
melding = 'Vul een geldige postcode en huisnummer in, bijvoorbeeld 7521 BE 10.';
} else if(naam === 'contact'){
var t = (el('ow-telefoon').value || '').replace(/[\s\-()]/g, '');
var tGoed = /^0\d{9}$/.test(t) || /^(\+31|0031)\d{9}$/.test(t);
var eGoed = /^[^\s@]+@[^\s@]+\.[A-Za-z]{2,}$/.test((el('ow-email').value || '').trim());
fout(el('v-telefoon'), tGoed);
fout(el('v-email'), eGoed);
return tGoed && eGoed;
} else return true;
if(toonFout && !goed) meldFout(node, melding);
return toonFout ? fout(node, goed) : goed;
}
/* --- adres opzoeken bij PDOK, net als op de bron --- */
(function(){
var wacht = null, tip = el('adresTip');
function zoek(){
var pc = (el('ow-postcode').value || '').replace(/\s/g, '').toUpperCase();
var hn = (el('ow-huisnummer').value || '').trim();
if(!/^[1-9][0-9]{3}[A-Z]{2}$/.test(pc) || !hn) return;
fetch('https://api.pdok.nl/bzk/locatieserver/search/v3_1/free?q=' +
encodeURIComponent(pc + ' ' + hn) + '&fq=type:adres&rows=1')
.then(function(r){ return r.json(); })
.then(function(j){
var d = j && j.response && j.response.docs && j.response.docs[0];
if(d && d.weergavenaam) tip.textContent = d.weergavenaam;
})
.catch(function(){ /* stil: het adres is geen blokkerend veld */ });
}
['ow-postcode','ow-huisnummer'].forEach(function(id){
el(id).addEventListener('input', function(){
clearTimeout(wacht); wacht = setTimeout(zoek, 400);
});
});
})();
/* --- voortgang --- */
function beantwoord(){
var n = 0;
VRAGEN.forEach(function(v){ if(stapGeldig(v, false)) n++; });
return n;
}
function tekenVoortgang(){
var naam = STAPPEN[nu], n = beantwoord();
var pct = Math.round(n / VRAGEN.length * 100);
voortgang.style.width = pct + '%';
pctLabel.textContent = pct + '% voltooid';
stapLabel.textContent = naam === 'indicatie'
? 'Je geschatte overwaarde'
: 'Stap ' + (VRAGEN.indexOf(naam) + 1) + ' van ' + VRAGEN.length;
}
/* --- het bedrag: woningwaarde min hypotheek, de som van de bron zelf --- */
function berekenOverwaarde(){
var w = getal(elWon), h = getal(elHyp), over = rond(w - h);
if(over <= 0){
return {bedrag: euro(0), uitleg: 'Je hypotheek is op dit moment hoger dan de waarde van je woning. Weet je de waarde niet zeker? Een adviseur kijkt met een actuele taxatiewaarde mee.',
chips: ['Woningwaarde ' + euro(rond(w)), 'Hypotheek ' + euro(rond(h))]};
}
return {bedrag: euro(over),
uitleg: 'Dat is de waarde van je woning min je openstaande hypotheek. Hoeveel je daarvan kunt opnemen hangt af van je inkomen; dat rekent een adviseur voor je uit.',
chips: ['Woningwaarde ' + euro(rond(w)), 'Hypotheek ' + euro(rond(h)), 'Overwaarde ' + euro(over)]};
}
function vulIndicatie(){
var r = berekenOverwaarde();
el('indBedrag').textContent = r.bedrag;
el('indUitleg').textContent = r.uitleg;
el('uitBedrag').textContent = r.bedrag;
var chips = el('indChips');
chips.textContent = '';
r.chips.forEach(function(t){
var s = document.createElement('span');
s.className = 'chip'; s.textContent = t; chips.appendChild(s);
});
if(!indicatieGetoond){
indicatieGetoond = true;
dl('indicatie_gezien', {bedrag: r.bedrag, doel: el('doel').value});
}
}
/* --- naar een stap --- */
function toon(i, terug){
nu = Math.max(0, Math.min(STAPPEN.length - 1, i));
var naam = STAPPEN[nu];
[].forEach.call(form.querySelectorAll('.stapv'), function(s){
s.classList.toggle('actief', s.dataset.stap === naam);
});
if(naam === 'indicatie') vulIndicatie();
uitkomst.classList.toggle('zichtbaar', indicatieGetoond && naam !== 'indicatie');
knopVorige.style.visibility = nu === 0 ? 'hidden' : 'visible';
volgendeTekst.textContent = naam === 'indicatie' ? 'Weten wat er echt kan'
: (naam === 'contact' ? 'Vraag je berekening aan' : 'Volgende stap');
if(naam === 'contact') el('belUitleg').textContent = belofteTekst();
tekenVoortgang();
if(!terug){
var eerste = schermen[naam] && schermen[naam].querySelector('.invoer');
if(eerste && window.innerWidth > 1000) eerste.focus({preventScroll:true});
}
}
function volgende(){
var naam = STAPPEN[nu];
if(naam !== 'indicatie' && !stapGeldig(naam, true)) return;
if(nu === STAPPEN.length - 1) return verstuur();
toon(nu + 1);
}
knopVolgende.addEventListener('click', volgende);
knopVorige.addEventListener('click', function(){ toon(nu - 1, true); });
form.addEventListener('submit', function(e){ e.preventDefault(); volgende(); });
/* --- verzenden ---
Reviewkopie: er gaat niets uit. Het live formulier post naar WordPress, een
Make-webhook en de FasterForward-handler; dat wordt hier pas aangesloten als
de pagina echt verkeer krijgt. */
function verstuur(){
dl('formulier_afgerond', {
doel: el('doel').value,
inkomen: gekozen('inkomen'),
tijdstempel: new Date().toISOString()
});
el('bedanktNaam').textContent = (el('ow-voornaam').value || '').trim() || 'we bellen je';
el('bedanktTekst').textContent = belofteTekst() + ' Je krijgt nu een bevestigingsmail met de naam van de adviseur die belt.';
form.style.display = 'none';
document.getElementById('bedankt').classList.add('zichtbaar');
document.getElementById('bedankt').scrollIntoView({block:'center', behavior:'smooth'});
}
document.getElementById('heroCta').addEventListener('click', function(){
setTimeout(function(){
if(window.innerWidth > 1000) el('doelBalk').focus({preventScroll:true});
}, 500);
});
toon(0, true);
tekenVoortgang();
document.getElementById('nbForm').addEventListener('submit', function(e){ e.preventDefault(); });
/* ---------- bewijsbalk als slider op telefoonformaat ---------- */
(function(){
var venster = document.getElementById('uspVenster');
var rij = document.getElementById('uspRij');
if(!venster || !rij) return;
var origineel = [].slice.call(rij.children);
var aantal = origineel.length;
var actief = false, index = aantal, timer = null, stippen = null;
var rustig = window.matchMedia('(prefers-reduced-motion: reduce)');
function moetAan(){ return window.matchMedia('(max-width:760px)').matches; }
function bouw(){
/* drie sets achter elkaar: zo kun je in beide richtingen door blijven lopen
zonder dat de rij ooit leeg raakt. Alleen de middelste set is echt. */
[-1, 1].forEach(function(kant){
origineel.forEach(function(k){
var kloon = k.cloneNode(true);
kloon.setAttribute('data-kloon', '');
kloon.setAttribute('aria-hidden', 'true');
kloon.querySelectorAll('a').forEach(function(a){ a.tabIndex = -1; });
if(kant < 0) rij.insertBefore(kloon, rij.firstChild);
else rij.appendChild(kloon);
});
});
/* set van eerste klonen staat vooraan, dus de echte set begint op index aantal */
var wrap = document.createElement('div');
wrap.className = 'usp__stippen';
wrap.setAttribute('role', 'tablist');
wrap.setAttribute('aria-label', 'Onze cijfers');
origineel.forEach(function(k, i){
var b = document.createElement('button');
b.type = 'button';
b.setAttribute('aria-label', 'Toon punt ' + (i + 1) + ' van ' + aantal);
b.addEventListener('click', function(){ stop(); naar(aantal + i); later(); });
wrap.appendChild(b);
});
venster.parentNode.insertBefore(wrap, venster.nextSibling);
stippen = wrap;
}
function kaarten(){ return [].slice.call(rij.children); }
function plaats(metAnimatie){
var lijst = kaarten();
var kaart = lijst[index];
if(!kaart) return;
rij.classList.toggle('schuift', !!metAnimatie);
/* midden van het venster minus midden van de kaart */
var x = kaart.offsetLeft - (venster.clientWidth - kaart.offsetWidth) / 2;
rij.style.transform = 'translateX(' + (-x) + 'px)';
lijst.forEach(function(k, i){ k.classList.toggle('actief', i === index); });
if(stippen){
var pos = ((index - aantal) % aantal + aantal) % aantal;
[].forEach.call(stippen.children, function(b, i){
b.setAttribute('aria-current', i === pos ? 'true' : 'false');
});
}
}
function naar(nieuw){
index = nieuw;
plaats(true);
/* zodra we buiten de echte set komen, ongemerkt terugzetten */
window.setTimeout(function(){
if(index >= aantal * 2){ index -= aantal; plaats(false); }
else if(index < aantal){ index += aantal; plaats(false); }
}, 580);
}
function tik(){ naar(index + 1); }
function later(){
stop();
if(!rustig.matches) timer = window.setInterval(tik, 4200);
}
function stop(){ if(timer){ window.clearInterval(timer); timer = null; } }
function aan(){
if(actief) return;
actief = true;
if(!rij.querySelector('[data-kloon]')) bouw();
index = aantal;
plaats(false);
later();
}
function uit(){
if(!actief) return;
actief = false;
stop();
rij.classList.remove('schuift');
rij.style.transform = '';
kaarten().forEach(function(k){ k.classList.remove('actief'); });
}
function peil(){ moetAan() ? aan() : uit(); }
/* vegen met de duim */
var startX = null;
rij.addEventListener('touchstart', function(e){
startX = e.touches[0].clientX; stop();
}, {passive:true});
rij.addEventListener('touchend', function(e){
if(startX === null) return;
var d = e.changedTouches[0].clientX - startX;
startX = null;
if(Math.abs(d) > 40) naar(index + (d < 0 ? 1 : -1));
later();
}, {passive:true});
var wacht;
window.addEventListener('resize', function(){
window.clearTimeout(wacht);
wacht = window.setTimeout(function(){ peil(); if(actief) plaats(false); }, 180);
});
document.addEventListener('visibilitychange', function(){
document.hidden ? stop() : (actief && later());
});
peil();
})();
})();
</script>
Hypotheken
Vind de beste keuze voor jouw situatie.
Meer
Hypotheken
Oversluiten
Bespaar op je maandlasten met slim advies.
Tweede hypotheek
Extra lenen met je huis als basis.
Familiehypotheek
Familie helpt mee, helder geregeld.
Hypotheek zonder vast contract
Ook zonder vast contract zijn er opties.
Hypotheek met schuld
Krijg inzicht als schuld meespeelt.
Overwaarde opnemen
Gebruik je overwaarde voor je plannen.
Wensen
Berekenen
Snel inzicht in je mogelijkheden.
Meer
Latest blog
Duidelijke uitleg, zonder jargon.
Lees dit artikel