:root {
--primary: #1f7f5c;
--accent: #ff7a1a;
--bg: #f8f7f4;
--text: #222c2e;
--muted: #6a7576;
--error: #c0392b;
--warning: #d35400;
--card-bg: #ffffff;
--shadow: 0 14px 40px rgba(0,0,0,0.08);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.5;
}
header {
background: #ffffff;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e7ebe7;
gap: 14px;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.logo {
height: 44px;
width: auto;
object-fit: contain;
flex: 0 0 auto;
}
.brand-text {
font-weight: 800;
letter-spacing: 0.06em;
font-size: 13px;
text-transform: uppercase;
color: var(--primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260px;
}
.tagline {
font-size: 12px;
color: var(--muted);
text-align: right;
max-width: 420px;
}
main {
padding: 18px 12px 28px;
display: flex;
justify-content: center;
}
.tool-container {
width: 100%;
max-width: 1040px;
background: var(--card-bg);
border-radius: 22px;
box-shadow: var(--shadow);
padding: 22px;
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr);
gap: 22px;
}
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(31, 127, 92, 0.08);
color: var(--primary);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
h1 {
margin: 0;
font-size: 26px;
color: var(--primary);
}
.intro {
margin: 8px 0 0;
font-size: 14px;
color: #4c5a5a;
max-width: 640px;
}
.stepper {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #7b8787;
}
.step-indicator { display: flex; gap: 4px; }
.step-dot {
width: 8px; height: 8px; border-radius: 999px;
background: #dcdedb; transition: all 0.2s ease;
}
.step-dot.active { width: 22px; background: var(--accent); }
.form-section { margin-top: 18px; }
.hidden { display: none !important; }
.field-group { margin-bottom: 14px; }
label {
display: block;
font-size: 13px;
font-weight: 400;
margin-bottom: 4px;
}
label span.optional {
font-weight: 700;
font-size: 11px;
color: #8b9494;
margin-left: 6px;
}
.help-text {
font-size: 11px;
color: #8b9494;
margin-top: 3px;
}
input[type="text"] {
width: 100%;
border-radius: 999px;
border: 1px solid #d8ddd8;
padding: 10px 14px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
background: #fbfbfa;
}
input[type="text"]:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.35);
background: #ffffff;
}
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.radio-pill {
position: relative;
cursor: pointer;
border-radius: 999px;
border: 1px solid #d8ddd8;
padding: 8px 12px;
font-size: 12px;
color: #4a5656;
user-select: none;
transition: all 0.18s ease;
background: #fbfbfa;
font-weight: 700;
}
.radio-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.radio-pill.selected {
border-color: var(--primary);
background: rgba(31, 127, 92, 0.10);
color: var(--primary);
font-weight: 900;
}
.button-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 16px;
}
.button-row-right {
margin-left: auto;
display: flex;
gap: 10px;
}
button {
border-radius: 999px;
border: none;
padding: 10px 18px;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 900;
transition: all 0.18s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: #ffffff;
}
.btn-primary:hover {
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(255, 122, 26, 0.35);
}
.btn-ghost {
background: transparent;
color: #5d6869;
border: 1px solid #d8ddd8;
font-weight: 900;
}
.btn-ghost:hover { background: #f0f1ed; }
.disclaimer {
font-size: 10px;
color: #9ca5a4;
margin-top: 10px;
max-width: 540px;
}
.results-panel {
border-radius: 20px;
border: 1px solid #e1e4df;
background: linear-gradient(145deg, #ffffff, #f4f1ec);
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.results-title {
font-size: 15px;
font-weight: 900;
color: var(--primary);
margin-bottom: 2px;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 8px;
}
.stat-card {
border-radius: 16px;
background: rgba(255,255,255,0.92);
padding: 10px 12px;
border: 1px solid #e1e4df;
}
.stat-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8a9694;
font-weight: 900;
}
.stat-value {
font-size: 18px;
font-weight: 1000;
margin-top: 2px;
color: var(--primary);
}
.stat-sub {
font-size: 11px;
color: #7f8988;
margin-top: 1px;
}
.notice {
border-radius: 12px;
padding: 8px 10px;
font-size: 12px;
display: flex;
gap: 8px;
align-items: flex-start;
font-weight: 750;
}
.notice.error {
background: rgba(192, 57, 43, 0.07);
border: 1px solid rgba(192, 57, 43, 0.4);
color: #7f2319;
}
.notice.warning {
background: rgba(211, 84, 0, 0.06);
border: 1px solid rgba(211, 84, 0, 0.35);
color: #7b3d02;
}
.notice.info {
background: rgba(31, 127, 92, 0.07);
border: 1px solid rgba(31, 127, 92, 0.4);
color: var(--primary);
}
.notice-icon {
font-size: 15px;
line-height: 1;
margin-top: 2px;
font-weight: 900;
}
.notice-text { flex: 1; }
.motivation-panel {
margin-top: 10px;
border-radius: 16px;
padding: 12px;
background: #ffffff;
border: 1px solid rgba(31, 127, 92, 0.22);
}
.motivation-title {
font-weight: 1000;
color: var(--primary);
margin: 0 0 6px 0;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.motivation-text {
margin: 0;
font-size: 13px;
color: #2d3a3a;
font-weight: 750;
}
.motivation-accent {
display:inline-block;
margin-top: 8px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 122, 26, 0.14);
color: #7a3a02;
font-size: 12px;
font-weight: 900;
}
@media (max-width: 900px) {
.tool-container {
grid-template-columns: 1fr;
padding: 16px;
border-radius: 18px;
}
header { flex-direction: column; align-items: flex-start; }
.tagline { text-align: left; max-width: none; }
}
@media (max-width: 640px) {
main { padding: 14px 10px 22px; }
h1 { font-size: 22px; }
.intro { font-size: 13px; }
.button-row { flex-direction: column; align-items: stretch; }
.button-row-right { margin-left: 0; width: 100%; }
button { width: 100%; justify-content: center; }
.radio-pill { flex: 1 1 100%; width: 100%; text-align: center; }
.stat-grid { grid-template-columns: 1fr; }
}
Check jouw overwaarde & mogelijke ruimte
Vul je gegevens in en krijg een indicatie van je overwaarde en mogelijke extra hypotheekruimte.
We doen geen hypotheektoets en geven geen financieel advies.
Stap
Vul links je gegevens in en klik op Resultaat bekijken.
- Geschatte overwaarde
- Indicatieve extra hypotheekruimte (90%-norm)
- Aandachtspunten rond BKR, schulden en leeftijd
–
Wil je weten hoe je deze overwaarde slim inzet voor jouw eerste vakantiewoning? Stuur Nikki een berichtje op WhatsApp.
Dit is geen financieel advies en geen aanbod voor een hypotheek. De uitkomsten zijn benaderingen op basis van jouw invoer en een eenvoudige 90%-norm.
De ingevulde gegevens worden niet opgeslagen, niet doorgestuurd en alleen lokaal in je browser gebruikt om deze indicatie te tonen.
(function() {
function parseMoney(input) {
if (!input) return NaN;
const cleaned = String(input).trim()
.replace(/\s+/g, "")
.replace(/\./g, "")
.replace(/,/g, "");
const n = Number(cleaned);
return Number.isFinite(n) ? n : NaN;
}
function parseIntSafe(input) {
if (!input) return NaN;
const cleaned = String(input).trim()
.replace(/\s+/g, "")
.replace(/\./g, "")
.replace(/,/g, "");
const n = Number(cleaned);
return Number.isFinite(n) ? Math.floor(n) : NaN;
}
function formatEuro(amount) {
if (isNaN(amount)) return "–";
return amount.toLocaleString("nl-NL", {
style: "currency",
currency: "EUR",
maximumFractionDigits: 0
});
}
function createNotice(type, text) {
const div = document.createElement("div");
div.className = "notice " + type;
const icon = document.createElement("div");
icon.className = "notice-icon";
icon.textContent = type === "error" ? "!" : type === "warning" ? "⚠" : "ℹ";
const body = document.createElement("div");
body.className = "notice-text";
body.textContent = text;
div.appendChild(icon);
div.appendChild(body);
return div;
}
function incomeBand(income) {
if (Number.isNaN(income) || income <= 0) return "invalid";
if (income < 1000) return "invalid";
if (income < 25000) return "lt25";
if (income < 35000) return "25to35";
if (income < 40000) return "35to40";
if (income < 55000) return "40to55";
return "gt55";
}
function updateIncomeNotice(container, band) {
container.innerHTML = "";
if (band === "invalid") {
container.appendChild(createNotice(
"warning",
"Vul je bruto jaarinkomen in als heel getal, bijvoorbeeld 35000 of 35.000. Banken kijken altijd naar inkomen om te bepalen of maandlasten draagbaar zijn."
));
return;
}
if (band === "lt25") {
container.appendChild(createNotice(
"warning",
"Op basis van het opgegeven inkomen is het in de praktijk meestal lastig om extra hypotheekruimte te krijgen. Banken hanteren minimale inkomenseisen."
));
return;
}
if (band === "25to35") {
container.appendChild(createNotice(
"info",
"Met dit inkomensniveau zijn de mogelijkheden sterk afhankelijk van je leeftijd, vaste lasten en totale financiële situatie. In sommige gevallen is er ruimte, maar dit vraagt maatwerk."
));
return;
}
if (band === "35to40") {
container.appendChild(createNotice(
"info",
"Met dit inkomensniveau zien we dat er in veel situaties mogelijkheden zijn om een deel van de overwaarde op te nemen. De exacte ruimte hangt af van leeftijd, lasten en eventuele schulden."
));
return;
}
if (band === "40to55") {
container.appendChild(createNotice(
"info",
"Met dit inkomensniveau zijn er in de praktijk vaak goede mogelijkheden om overwaarde op te nemen, mits de rest van de financiële situatie klopt."
));
return;
}
container.appendChild(createNotice(
"info",
"Met dit inkomensniveau zijn er doorgaans ruime mogelijkheden om overwaarde op te nemen. In deze inkomenscategorie zien we vaak dat mensen sneller stappen kunnen zetten, zeker wanneer er ook overwaarde beschikbaar is."
));
}
function updateAgeNotice(container, age) {
container.innerHTML = "";
if (Number.isNaN(age) || age <= 0) return;
if (age >= 67) {
container.appendChild(createNotice(
"warning",
"Vanaf deze leeftijd werken banken vaak met strengere voorwaarden of kortere looptijden. Het opnemen van overwaarde is soms mogelijk, maar meestal maatwerk."
));
} else if (age >= 60) {
container.appendChild(createNotice(
"info",
"Richting pensioen kijken banken vaak kritischer naar looptijd en maandlasten. Dit kan invloed hebben op de ruimte die je kunt opnemen."
));
}
}
function scoreLabel(band, bkrValue, schuldenValue, age, ruimteIndicatie) {
if (bkrValue === "ja") return "laag";
if (band === "lt25" || band === "invalid") return "laag";
if (ruimteIndicatie <= 0) return "laag";
if (schuldenValue === "aanzienlijk") return "middel";
if (age >= 67) return "middel";
if (band === "25to35") return "middel";
return "hoog";
}
function buildMotivation(score, ruimteIndicatie, band, bkrValue, schuldenValue) {
let text = "";
let accent = "";
if (score === "hoog") {
if (ruimteIndicatie >= 150000) {
text = "Dit is een sterke uitgangspositie. De kans is groot dat je met de juiste strategie vrij snel richting je eerste vakantiewoning kunt bewegen.";
} else if (ruimteIndicatie >= 75000) {
text = "Dit ziet er kansrijk uit. Met deze indicatieve ruimte heb je meestal meerdere routes om je eerste vakantiewoning haalbaar te maken.";
} else {
text = "Dit ziet er positief uit. Er lijkt ruimte te zijn, en dat is vaak genoeg om de eerste serieuze opties te gaan doorrekenen.";
}
accent = "Kansrijk";
} else if (score === "middel") {
if (band === "25to35") {
text = "Er kunnen mogelijkheden zijn, maar dit valt vaak in maatwerk. Met de juiste aanpak kun je alsnog verrassend ver komen.";
} else {
text = "Er lijkt iets mogelijk, maar de ruimte wordt sneller beïnvloed door schulden, leeftijd of andere lasten. Dit is precies waar een slimme strategie verschil maakt.";
}
accent = "Maatwerk";
} else {
if (bkrValue === "ja") {
text = "Door een negatieve BKR is financieren via banken meestal niet mogelijk zolang dit actief is. Dat zegt niets over jouw ambitie, maar wél over de route.";
} else if (ruimteIndicatie <= 0) {
text = "Op basis van de 90%-norm lijkt er nu weinig tot geen extra ruimte. Dat betekent vaak dat je eerst een andere route of timing nodig hebt.";
} else {
text = "De signalen zijn nu nog beperkt. Dat is niet per se een eindstation, maar wel een aanwijzing dat je route slimmer gekozen moet worden.";
}
accent = "Beperkt";
}
if (schuldenValue === "aanzienlijk" && bkrValue !== "ja") {
accent = "Maatwerk";
}
return { text, accent };
}
function setup() {
const stepDots = document.querySelectorAll("[data-step-dot]");
const step1 = document.querySelector('[data-step="1"]');
const step2 = document.querySelector('[data-step="2"]');
const btnToStep2 = document.getElementById("btnToStep2");
const btnBackToStep1 = document.getElementById("btnBackToStep1");
const btnCalc = document.getElementById("btnCalc");
const form = document.getElementById("overwaardeForm");
const resultsPanel = document.getElementById("resultsPanel");
const dynamicResults = document.getElementById("dynamicResults");
const overwaardeValue = document.getElementById("overwaardeValue");
const overwaardeSub = document.getElementById("overwaardeSub");
const ruimteValue = document.getElementById("ruimteValue");
const ruimteSub = document.getElementById("ruimteSub");
const bkrNoticeContainer = document.getElementById("bkrNoticeContainer");
const schuldenNoticeContainer = document.getElementById("schuldenNoticeContainer");
const leeftijdNoticeContainer = document.getElementById("leeftijdNoticeContainer");
const inkomenNoticeContainer = document.getElementById("inkomenNoticeContainer");
const motivationText = document.getElementById("motivationText");
const motivationAccent = document.getElementById("motivationAccent");
function setStep(step) {
if (step === 1) {
step1.classList.remove("hidden");
step2.classList.add("hidden");
} else {
step1.classList.add("hidden");
step2.classList.remove("hidden");
}
stepDots.forEach(dot => {
const n = Number(dot.getAttribute("data-step-dot"));
dot.classList.toggle("active", n === step);
});
}
function initRadioGroup(groupId) {
const group = document.getElementById(groupId);
if (!group) return;
group.addEventListener("click", (e) => {
const pill = e.target.closest(".radio-pill");
if (!pill) return;
const input = pill.querySelector("input[type=radio]");
if (!input) return;
input.checked = true;
group.querySelectorAll(".radio-pill").forEach(p => p.classList.remove("selected"));
pill.classList.add("selected");
});
}
initRadioGroup("bkrGroup");
initRadioGroup("schuldenGroup");
function nextStep() {
const woningwaarde = parseMoney(document.getElementById("woningwaarde").value);
if (!woningwaarde || woningwaarde <= 0 || Number.isNaN(woningwaarde)) {
alert("Vul eerst een realistische geschatte woningwaarde in.");
return;
}
setStep(2);
}
function prevStep() { setStep(1); }
function calc() {
const woningwaarde = parseMoney(document.getElementById("woningwaarde").value);
const hypotheek = parseMoney(document.getElementById("hypotheek").value);
const inkomen = parseMoney(document.getElementById("inkomen").value);
const leeftijd = parseIntSafe(document.getElementById("leeftijd").value);
if (!woningwaarde || woningwaarde <= 0 || Number.isNaN(woningwaarde)) {
alert("Vul een realistische geschatte woningwaarde in.");
setStep(1);
return;
}
if (!hypotheek || hypotheek <= 0 || Number.isNaN(hypotheek)) {
alert("Vul een realistisch bedrag in bij de totale openstaande hypotheek.");
return;
}
if (Number.isNaN(leeftijd) || leeftijd < 18 || leeftijd > 100) {
alert("Vul een realistische leeftijd in (18–100).");
return;
}
if (Number.isNaN(inkomen) || inkomen <= 0) {
alert("Vul je bruto jaarinkomen in (bijv. 35000 of 35.000).");
return;
}
const bkrValue = (form.querySelector("input[name='bkr']:checked") || {}).value || "onbekend";
const schuldenValue = (form.querySelector("input[name='schulden']:checked") || {}).value || "geen";
const overwaarde = woningwaarde - hypotheek;
const maxHypotheekIndicatie = woningwaarde * 0.9;
const ruimteIndicatie = maxHypotheekIndicatie - hypotheek;
bkrNoticeContainer.innerHTML = "";
schuldenNoticeContainer.innerHTML = "";
leeftijdNoticeContainer.innerHTML = "";
inkomenNoticeContainer.innerHTML = "";
dynamicResults.classList.remove("hidden");
if (overwaarde <= 0) {
overwaardeValue.textContent = formatEuro(0);
overwaardeSub.textContent = "Op basis van je invoer lijkt er nu geen overwaarde.";
} else {
overwaardeValue.textContent = formatEuro(overwaarde);
overwaardeSub.textContent = "Verschil tussen je geschatte woningwaarde en de totale openstaande hypotheek.";
}
if (ruimteIndicatie <= 0) {
ruimteValue.textContent = formatEuro(0);
ruimteSub.textContent = "Op basis van een 90%-norm lijkt er weinig tot geen extra hypotheekruimte.";
} else {
ruimteValue.textContent = formatEuro(ruimteIndicatie);
ruimteSub.textContent = "Indicatieve extra ruimte als een bank tot ca. 90% van de woningwaarde financiert.";
}
if (bkrValue === "ja") {
bkrNoticeContainer.appendChild(createNotice(
"error",
"Door een negatieve BKR-registratie is het bij banken meestal niet mogelijk om extra hypotheek af te sluiten zolang dit actief is."
));
} else if (bkrValue === "onbekend") {
bkrNoticeContainer.appendChild(createNotice(
"warning",
"Je weet niet zeker of je een negatieve BKR-registratie hebt. Dit kan grote invloed hebben op de mogelijkheden."
));
}
if (schuldenValue === "beperkt") {
schuldenNoticeContainer.appendChild(createNotice(
"warning",
"Je geeft aan beperkte consumptieve schulden te hebben. Deze verlagen bijna altijd je maximale leencapaciteit."
));
} else if (schuldenValue === "aanzienlijk") {
schuldenNoticeContainer.appendChild(createNotice(
"warning",
"Je geeft aan aanzienlijke consumptieve schulden te hebben. Banken zullen hierdoor vaak een stuk voorzichtiger worden."
));
}
updateAgeNotice(leeftijdNoticeContainer, leeftijd);
const band = incomeBand(inkomen);
updateIncomeNotice(inkomenNoticeContainer, band);
const score = scoreLabel(band, bkrValue, schuldenValue, leeftijd, ruimteIndicatie);
const motivation = buildMotivation(score, ruimteIndicatie, band, bkrValue, schuldenValue);
motivationText.textContent = motivation.text;
motivationAccent.textContent = motivation.accent;
resultsPanel.scrollIntoView({ behavior: "smooth", block: "start" });
}
window.__bnbNextStep = nextStep;
window.__bnbPrevStep = prevStep;
window.__bnbCalc = calc;
if (btnToStep2) btnToStep2.addEventListener("click", (e) => { e.preventDefault(); nextStep(); });
if (btnBackToStep1) btnBackToStep1.addEventListener("click", (e) => { e.preventDefault(); prevStep(); });
if (btnCalc) btnCalc.addEventListener("click", (e) => { e.preventDefault(); calc(); });
if (form) form.addEventListener("submit", (e) => { e.preventDefault(); calc(); });
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", setup);
} else {
setup();
}
})();