Projectpagina verbouwing · Molenaar Verbouw, Zutphen Nieuw
Projectpagina van een verbouwing: een schermbrede voor-en-na-schuif als opening, de vraag van de bewoners, de aanpak in beeld, per ruimte terugschakelen naar de oude situatie, de kosten per onderdeel, het citaat van de klant en een terugbelverzoek naast het volgende project.

Voor, oktober 2025
Sleep of gebruik de pijltjestoetsen
Na, maart 2026
Jaren-dertigwoning in Zutphen
Een dichte keuken, een smal raam en een tuin die je niet zag. We haalden de achtergevel weg, bouwden 3,60 meter uit en maakten de badkamer opnieuw. Elf weken, € 148.000 inclusief btw, en de familie Verhoef bleef de hele tijd in het huis wonen.
Bespreek je eigen verbouwingDe vraag
Sanne en Joost kochten het huis aan de Weg naar Laren in 2024, met twee kinderen en een derde op komst. De keuken was 2,40 meter breed en lag achter een muur; wie kookte zag niemand. De schuur van de vorige eigenaar nam de halve tuin in.
Ze wilden één ruimte om te koken, eten en spelen, met licht uit de tuin, en een badkamer waar je met z'n tweeën in past. Het budget: € 150.000, en niet verhuizen.
Hoe we het aanpakten

We begonnen met de badkamer boven, zodat het gezin daarna gewoon kon douchen terwijl beneden alles openlag. Intussen ging de schuur weg en kwam de fundering voor de uitbouw.
Tijdens de ruwbouw woonde de familie in de voorkamer, met een tijdelijk keukenblok dat wij aansloten. Een stofwand met rits hield de bouw achter het huis. Elke vrijdag liep uitvoerder Ruud met Joost de week door, met een lijstje voor de week erna.
De stalen deuren kwamen in week acht, de keuken in week negen. Na elf weken stond er een werkende keuken en een opgeruimde tuin.

Per ruimte terugkijken





Wat het kostte
| Sloop, schuur en fundering | € 18.400 |
|---|---|
| Ruwbouw uitbouw 3,60 x 6,20 m | € 41.200 |
| Staalconstructie | € 6.900 |
| Stalen deuren en kozijnen | € 14.600 |
| Keuken uit eigen werkplaats | € 23.500 |
| Badkamer | € 16.800 |
| Installaties en vloerverwarming | € 11.300 |
| Afwerking en schilderwerk | € 15.300 |
| Totaal | € 148.000 |
€ 2.000 onder de begroting: de vloer bleek beter dan gedacht. Meerwerk was er niet.

"We dachten dat we drie maanden in het stof zouden leven. Het was elf weken, en de vrijdagen met Ruud waren eigenlijk gezellig. Nu zitten we elke avond aan dat eiland."
Molenaar Verbouw · Industrieweg 12, 7202 CA Zutphen · 0575 123 456 · info@voorbeeld.nl
Bouwgarant · KvK 08123456 · BTW NL001234567B03 · Alle projecten · Privacy
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Projectpagina verbouwing · Molenaar Verbouw, Zutphen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="mlv">
<div class="mlv__head" role="banner"><div class="mlv__in mlv__head-in">
<a href="#" class="mlv__logo" aria-label="Molenaar Verbouw, naar home">Molenaar<span>verbouw</span></a>
<nav class="mlv__nav" aria-label="Hoofdmenu">
<a href="#">Verbouwen</a><a href="#">Uitbouw</a><a href="#">Badkamers</a><a href="#" aria-current="page">Projecten</a><a href="#">Werkwijze</a><a href="#mlv-contact">Contact</a>
</nav>
<a href="#mlv-contact" class="mlv__btn mlv__btn--head">Plan een huisbezoek</a>
<button class="mlv__menu-knop" type="button" aria-expanded="false" aria-controls="mlv-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="mlv__menu" id="mlv-menu" hidden><div class="mlv__in">
<a href="#">Verbouwen</a><a href="#">Uitbouw</a><a href="#">Badkamers</a><a href="#">Projecten</a><a href="#">Werkwijze</a><a href="#mlv-contact">Contact</a><a href="#mlv-contact" class="mlv__btn">Plan een huisbezoek</a>
</div></div>
</div>
<div class="mlv__in mlv__open">
<div class="mlv__vn" style="--p:50%">
<img class="mlv__vn-na" src="https://neddev.com/lab-media/page-project-verbouwing-2.webp" alt="Na de verbouwing: open keuken met kookeiland in de nieuwe uitbouw, stalen deuren naar de tuin" width="1408" height="768">
<div class="mlv__vn-voor"><img src="https://neddev.com/lab-media/page-project-verbouwing-1.webp" alt="Voor de verbouwing: kleine dichte keuken met bruine kastjes en een smal raam naar de tuin" width="1408" height="768"></div>
<input class="mlv__vn-schuif" type="range" min="0" max="100" value="50" aria-label="Schuif tussen de situatie voor en na de verbouwing">
<div class="mlv__vn-lijn" aria-hidden="true"><span></span></div>
</div>
<div class="mlv__vn-onder"><p>Voor, oktober 2025</p><p class="mlv__vn-uitleg">Sleep of gebruik de pijltjestoetsen</p><p>Na, maart 2026</p></div>
<div class="mlv__intro">
<h1 class="mlv__h1">Jaren-dertigwoning in Zutphen</h1>
<div class="mlv__intro-txt">
<p class="mlv__lead">Een dichte keuken, een smal raam en een tuin die je niet zag. We haalden de achtergevel weg, bouwden 3,60 meter uit en maakten de badkamer opnieuw. Elf weken, € 148.000 inclusief btw, en de familie Verhoef bleef de hele tijd in het huis wonen.</p>
<a href="#mlv-contact" class="mlv__btn">Bespreek je eigen verbouwing</a>
</div>
</div>
</div>
<div class="mlv__vraag"><div class="mlv__in mlv__vraag-in">
<div class="mlv__vraag-txt">
<h2 class="mlv__h2">De vraag</h2>
<p>Sanne en Joost kochten het huis aan de Weg naar Laren in 2024, met twee kinderen en een derde op komst. De keuken was 2,40 meter breed en lag achter een muur; wie kookte zag niemand. De schuur van de vorige eigenaar nam de halve tuin in.</p>
<p>Ze wilden één ruimte om te koken, eten en spelen, met licht uit de tuin, en een badkamer waar je met z'n tweeën in past. Het budget: € 150.000, en niet verhuizen.</p>
</div>
<figure class="mlv__vraag-foto">
<img src="https://neddev.com/lab-media/page-project-verbouwing-3.webp" alt="De achtergevel voor de verbouwing, met kleine ramen, een oude schuur en een verwilderde tuin" width="1408" height="768" loading="lazy">
<figcaption>De achterkant bij de eerste afspraak, oktober 2025.</figcaption>
</figure>
</div></div>
<div class="mlv__aanpak"><div class="mlv__in">
<h2 class="mlv__h2">Hoe we het aanpakten</h2>
<figure class="mlv__a-breed">
<img src="https://neddev.com/lab-media/page-project-verbouwing-7.webp" alt="Bouwvakkers plaatsen een stalen balk waar de achtergevel is weggehaald" width="900" height="491" loading="lazy">
<figcaption>Week drie: de achtergevel eruit, de stalen balk erin. Op één dag, zodat het huis 's avonds weer dicht was.</figcaption>
</figure>
<div class="mlv__a-raster">
<figure class="mlv__a-links"><img src="https://neddev.com/lab-media/page-project-verbouwing-8.webp" alt="Beton wordt gestort in de fundering van de uitbouw in de achtertuin" width="900" height="491" loading="lazy"><figcaption>Fundering op staal, gestort in de tweede week.</figcaption></figure>
<div class="mlv__a-txt">
<p>We begonnen met de badkamer boven, zodat het gezin daarna gewoon kon douchen terwijl beneden alles openlag. Intussen ging de schuur weg en kwam de fundering voor de uitbouw.</p>
<p>Tijdens de ruwbouw woonde de familie in de voorkamer, met een tijdelijk keukenblok dat wij aansloten. Een stofwand met rits hield de bouw achter het huis. Elke vrijdag liep uitvoerder Ruud met Joost de week door, met een lijstje voor de week erna.</p>
<p>De stalen deuren kwamen in week acht, de keuken in week negen. Na elf weken stond er een werkende keuken en een opgeruimde tuin.</p>
</div>
<figure class="mlv__a-rechts"><img src="https://neddev.com/lab-media/page-project-verbouwing-9.webp" alt="Timmerlieden hangen keukenkasten op in de nieuwe uitbouw" width="900" height="491" loading="lazy"><figcaption>Week negen: keuken op maat uit onze eigen werkplaats.</figcaption></figure>
</div>
</div></div>
<div class="mlv__ruimtes"><div class="mlv__in">
<h2 class="mlv__h2">Per ruimte terugkijken</h2>
<div class="mlv__r-raster">
<figure class="mlv__r mlv__r--groot">
<div class="mlv__r-beeld"><img class="mlv__r-na" src="https://neddev.com/lab-media/page-project-verbouwing-4.webp" alt="Achtergevel na de verbouwing met de nieuwe uitbouw en stalen deuren" width="1408" height="768" loading="lazy"><img class="mlv__r-voor" src="https://neddev.com/lab-media/page-project-verbouwing-3.webp" alt="Achtergevel voor de verbouwing" width="1408" height="768" loading="lazy" hidden></div>
<figcaption><span>Achtergevel. Uitbouw in dezelfde baksteen, plat dak met sedum.</span><button type="button" class="mlv__wissel" aria-pressed="false">Toon voor</button></figcaption>
</figure>
<figure class="mlv__r">
<div class="mlv__r-beeld"><img class="mlv__r-na" src="https://neddev.com/lab-media/page-project-verbouwing-6.webp" alt="Badkamer na de verbouwing met inloopdouche en eiken meubel" width="900" height="491" loading="lazy"><img class="mlv__r-voor" src="https://neddev.com/lab-media/page-project-verbouwing-5.webp" alt="Badkamer voor de verbouwing met roze tegels en een oud bad" width="900" height="491" loading="lazy" hidden></div>
<figcaption><span>Badkamer. Inloopdouche waar het bad stond.</span><button type="button" class="mlv__wissel" aria-pressed="false">Toon voor</button></figcaption>
</figure>
</div>
</div></div>
<div class="mlv__res"><div class="mlv__in mlv__res-in">
<figure class="mlv__res-foto"><img src="https://neddev.com/lab-media/page-project-verbouwing-13.webp" alt="De nieuwe uitbouw vanuit de tuin in de avond, met licht aan binnen" width="900" height="491" loading="lazy"></figure>
<div class="mlv__res-txt">
<h2 class="mlv__h2">Wat het kostte</h2>
<table class="mlv__kosten">
<caption>Eindafrekening, inclusief 21% btw</caption>
<tbody>
<tr><th scope="row">Sloop, schuur en fundering</th><td>€ 18.400</td></tr>
<tr><th scope="row">Ruwbouw uitbouw 3,60 x 6,20 m</th><td>€ 41.200</td></tr>
<tr><th scope="row">Staalconstructie</th><td>€ 6.900</td></tr>
<tr><th scope="row">Stalen deuren en kozijnen</th><td>€ 14.600</td></tr>
<tr><th scope="row">Keuken uit eigen werkplaats</th><td>€ 23.500</td></tr>
<tr><th scope="row">Badkamer</th><td>€ 16.800</td></tr>
<tr><th scope="row">Installaties en vloerverwarming</th><td>€ 11.300</td></tr>
<tr><th scope="row">Afwerking en schilderwerk</th><td>€ 15.300</td></tr>
</tbody>
<tfoot><tr><th scope="row">Totaal</th><td>€ 148.000</td></tr></tfoot>
</table>
<p class="mlv__klein">€ 2.000 onder de begroting: de vloer bleek beter dan gedacht. Meerwerk was er niet.</p>
</div>
<figure class="mlv__res-detail"><img src="https://neddev.com/lab-media/page-project-verbouwing-11.webp" alt="Stalen deuren met glas die openstaan naar de tuin met klinkers" width="900" height="491" loading="lazy"></figure>
</div></div>
<div class="mlv__citaat"><div class="mlv__in mlv__citaat-in">
<img src="https://neddev.com/lab-media/page-project-verbouwing-10.webp" alt="Sanne en Joost Verhoef aan het kookeiland, hun dochter tekent" width="900" height="491" loading="lazy">
<blockquote>
<p>"We dachten dat we drie maanden in het stof zouden leven. Het was elf weken, en de vrijdagen met Ruud waren eigenlijk gezellig. Nu zitten we elke avond aan dat eiland."</p>
<footer>Sanne en Joost Verhoef, Zutphen</footer>
</blockquote>
</div></div>
<div class="mlv__slot" id="mlv-contact"><div class="mlv__in mlv__slot-in">
<form class="mlv__form" novalidate>
<h2 class="mlv__h2">Ook verbouwen?</h2>
<p>Laat je nummer achter. Ruud belt je binnen twee werkdagen en komt kijken; dat eerste bezoek kost niets.</p>
<label class="mlv__veld"><span>Naam</span><input name="naam" autocomplete="name" required><em class="mlv__fout" hidden>Vul je naam in.</em></label>
<label class="mlv__veld"><span>Telefoon</span><input name="tel" type="tel" autocomplete="tel" required><em class="mlv__fout" hidden>Vul een telefoonnummer van 10 cijfers in.</em></label>
<label class="mlv__veld"><span>Wat wil je verbouwen?</span><select name="wat"><option>Uitbouw of aanbouw</option><option>Keuken en woonkamer</option><option>Badkamer</option><option>Dakopbouw</option><option>Iets anders</option></select></label>
<button type="submit" class="mlv__btn">Bel me terug</button>
<p class="mlv__klaar" hidden tabindex="-1"><strong>Dank je.</strong> Ruud belt je uiterlijk <span class="mlv__klaar-dag">overmorgen</span>.</p>
</form>
<a href="#" class="mlv__volgend">
<img src="https://neddev.com/lab-media/page-project-verbouwing-12.webp" alt="Dakopbouw in houtskeletbouw op een bakstenen huis in Brummen" width="900" height="491" loading="lazy">
<span class="mlv__volgend-kop">Volgend project: dakopbouw in Brummen</span>
<span class="mlv__volgend-sub">Een verdieping erbij op een woning uit 1956, in zes weken</span>
</a>
</div></div>
<div class="mlv__voet" role="contentinfo"><div class="mlv__in mlv__voet-in">
<p><strong>Molenaar Verbouw</strong> · Industrieweg 12, 7202 CA Zutphen · <a href="tel:0575123456">0575 123 456</a> · <a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></p>
<p>Bouwgarant · KvK 08123456 · BTW NL001234567B03 · <a href="#">Alle projecten</a> · <a href="#">Privacy</a></p>
</div></div>
</div>
</div>/* Projectpagina verbouwing · Molenaar Verbouw, Zutphen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): clash-grotesk@400,600 */
.mlv{--bg:#23238E;--opp:#2C2C9E;--tekst:#F4F4FF;--gedempt:#CFCFF2;--lijn:#4040A8;--accent:#D7F25C;--op-accent:#000000;--r:4px;--fs1:13px;--fs2:15px;--fs3:18px;--fs4:24px;--fs5:36px;--fs6:60px;--sectie:clamp(48px,6vw,88px);--kader:1660px;--lees:720px;--zij:20px;
container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Clash Grotesk',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.6}
.mlv *{box-sizing:border-box}
.mlv [hidden]{display:none!important}
.mlv a{color:inherit}
.mlv img{display:block;max-width:100%;height:auto}
.mlv figure,.mlv blockquote{margin:0}
.mlv p{margin:0 0 14px}
.mlv__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.mlv__head{position:sticky;top:0;z-index:20;background:var(--bg)}
.mlv__head-in{display:flex;align-items:center;gap:32px;height:72px;border-bottom:1px solid var(--lijn)}
.mlv__logo{font-weight:600;font-size:var(--fs4);text-decoration:none;display:flex;align-items:baseline;gap:6px;letter-spacing:-.01em}
.mlv__logo span{font-weight:400;font-size:var(--fs2);color:var(--gedempt)}
.mlv__nav{display:flex;gap:26px;margin-left:auto}
.mlv__nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.mlv__nav a:hover{color:var(--accent)}
.mlv__nav a[aria-current]{border-bottom-color:var(--accent)}
.mlv__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font:600 var(--fs2)/1.2 'Clash Grotesk',sans-serif;padding:14px 20px;border-radius:var(--r);border:0;cursor:pointer;transition:background-color .18s}
.mlv__btn:hover{background:#E6FA8A}
.mlv a:focus-visible,.mlv button:focus-visible,.mlv input:focus-visible,.mlv select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mlv__menu-knop{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--tekst);border-radius:var(--r);background:transparent;cursor:pointer;position:relative}
.mlv__menu-knop span{position:absolute;left:11px;right:11px;height:2px;background:var(--tekst);transition:transform .18s}
.mlv__menu-knop span:first-child{top:16px}.mlv__menu-knop span:last-child{top:25px}
.mlv__menu-knop[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.mlv__menu-knop[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mlv__menu{background:var(--opp);border-bottom:1px solid var(--lijn)}
.mlv__menu .mlv__in{display:flex;flex-direction:column;padding-top:8px;padding-bottom:20px}
.mlv__menu a{text-decoration:none;padding:12px 0;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}
.mlv__menu .mlv__btn{margin-top:16px;text-align:center;border:0}
.mlv__h1{font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.02em;margin:0}
.mlv__h2{font-weight:600;font-size:var(--fs5);line-height:1.08;letter-spacing:-.015em;margin:0 0 20px}
.mlv__open{padding-top:clamp(16px,2vw,28px)}
.mlv__vn{position:relative;aspect-ratio:21/10;overflow:hidden;border-radius:var(--r);background:var(--opp);touch-action:pan-y}
.mlv__vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mlv__vn-voor{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.mlv__vn-schuif{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.mlv__vn-lijn{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--accent);z-index:2;pointer-events:none}
.mlv__vn-lijn span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(35,35,142,.35)}
.mlv__vn-lijn span::before,.mlv__vn-lijn span::after{content:'';position:absolute;top:50%;width:8px;height:8px;border:solid var(--op-accent);border-width:0 0 2px 2px;margin-top:-4px}
.mlv__vn-lijn span::before{left:11px;transform:rotate(45deg)}
.mlv__vn-lijn span::after{right:11px;transform:rotate(-135deg)}
.mlv__vn-schuif:focus-visible+.mlv__vn-lijn span{outline:3px solid var(--tekst);outline-offset:3px}
.mlv__vn-onder{display:flex;justify-content:space-between;gap:16px;padding-top:10px;font-size:var(--fs1);color:var(--gedempt)}
.mlv__vn-onder p{margin:0!important}
.mlv__intro{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,4vw,56px) 0 var(--sectie);align-items:end}
.mlv__lead{font-size:var(--fs3);line-height:1.5;margin-bottom:22px!important}
.mlv__vraag{background:var(--opp)}
.mlv__vraag-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);padding-top:var(--sectie);padding-bottom:var(--sectie);align-items:center}
.mlv__vraag-txt{max-width:var(--lees)}
.mlv__vraag-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.mlv figcaption{font-size:var(--fs1);color:var(--gedempt);padding-top:8px;line-height:1.5}
.mlv__aanpak{padding-top:var(--sectie);padding-bottom:var(--sectie)}
.mlv__a-breed img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:var(--r)}
.mlv__a-raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(20px,3vw,48px);margin-top:clamp(28px,4vw,56px);align-items:start}
.mlv__a-links img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.mlv__a-txt{padding-top:clamp(0px,4vw,64px)}
.mlv__a-rechts{margin-top:clamp(0px,6vw,80px)}
.mlv__a-rechts img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.mlv__ruimtes{background:var(--opp);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.mlv__r-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,3vw,40px);align-items:end}
.mlv__r-beeld img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.mlv__r:not(.mlv__r--groot) .mlv__r-beeld img{aspect-ratio:4/5}
.mlv__r figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:12px}
.mlv__wissel{flex:none;font:600 var(--fs2)/1 'Clash Grotesk',sans-serif;color:var(--tekst);background:transparent;border:1px solid var(--tekst);border-radius:var(--r);padding:10px 14px;cursor:pointer;transition:background-color .18s,color .18s}
.mlv__wissel:hover,.mlv__wissel[aria-pressed=true]{background:var(--tekst);color:var(--bg)}
.mlv__res-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:clamp(20px,3vw,40px) clamp(24px,4vw,72px);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.mlv__res-foto{grid-row:1/3}
.mlv__res-foto img{width:100%;height:100%;min-height:420px;object-fit:cover;border-radius:var(--r)}
.mlv__kosten{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mlv__kosten caption{text-align:left;font-size:var(--fs1);color:var(--gedempt);padding-bottom:8px}
.mlv__kosten th,.mlv__kosten td{text-align:left;font-weight:400;padding:7px 0;border-bottom:1px solid var(--lijn)}
.mlv__kosten td{text-align:right;white-space:nowrap;padding-left:16px}
.mlv__kosten tfoot th,.mlv__kosten tfoot td{font-weight:600;font-size:var(--fs3);border-bottom:0;padding-top:12px;color:var(--accent)}
.mlv__klein{font-size:var(--fs1);color:var(--gedempt);margin-top:12px!important}
.mlv__res-detail img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r)}
.mlv__citaat{background:var(--accent);color:var(--op-accent)}
.mlv__citaat-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;padding-top:var(--sectie);padding-bottom:var(--sectie)}
.mlv__citaat img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.mlv__citaat blockquote p{font-weight:600;font-size:var(--fs5);line-height:1.15;letter-spacing:-.015em;margin-bottom:20px!important}
.mlv__citaat footer{font-size:var(--fs3)}
.mlv__slot-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,96px);padding-top:var(--sectie);padding-bottom:var(--sectie);align-items:start}
.mlv__form{max-width:520px}
.mlv__veld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.mlv__veld>span{font-weight:600}
.mlv__veld input,.mlv__veld select{font:400 var(--fs2)/1.4 'Clash Grotesk',sans-serif;color:var(--tekst);background:var(--opp);border:1px solid var(--gedempt);border-radius:var(--r);padding:11px 12px;width:100%}
.mlv__veld select option{color:#000;background:#fff}
.mlv__veld.is-fout input{border-color:var(--accent);border-width:2px}
.mlv__fout{font-style:normal;font-size:var(--fs1);color:var(--accent)}
.mlv__klaar{margin-top:16px!important;padding:14px 16px;background:var(--opp);border-radius:var(--r)}
.mlv__volgend{display:block;text-decoration:none}
.mlv__volgend img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);margin-bottom:14px;transition:opacity .18s}
.mlv__volgend:hover img{opacity:.9}
.mlv__volgend-kop{display:block;font-weight:600;font-size:var(--fs4);line-height:1.2;transition:color .18s}
.mlv__volgend:hover .mlv__volgend-kop{color:var(--accent)}
.mlv__volgend-sub{display:block;color:var(--gedempt);margin-top:4px}
.mlv__voet{border-top:1px solid var(--lijn)}
.mlv__voet-in{padding-top:24px;padding-bottom:24px;display:flex;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;font-size:var(--fs1);color:var(--gedempt)}
.mlv__voet-in p{margin:0!important}
.mlv__voet-in strong{color:var(--tekst);font-weight:600}
.mlv__voet-in a{display:inline-block;padding:3px 0}
@container (max-width:1080px){
.mlv__nav{display:none}
.mlv__menu-knop{display:block}
.mlv__btn--head{margin-left:auto}
.mlv__btn--head+.mlv__menu-knop{margin-left:0}
.mlv__a-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mlv__a-txt{grid-column:1/-1;grid-row:1;padding-top:0;max-width:var(--lees)}
.mlv__a-rechts{margin-top:48px}
}
@container (max-width:820px){
.mlv__intro,.mlv__vraag-in,.mlv__r-raster,.mlv__res-in,.mlv__citaat-in,.mlv__slot-in{grid-template-columns:minmax(0,1fr)}
.mlv__res-foto{grid-row:auto}
.mlv__res-foto img{min-height:0;aspect-ratio:16/10}
.mlv__r:not(.mlv__r--groot) .mlv__r-beeld img{aspect-ratio:16/10}
.mlv__vn{aspect-ratio:4/3}
.mlv__citaat blockquote p{font-size:var(--fs4)}
}
@container (max-width:560px){
.mlv__btn--head{display:none}
.mlv__menu-knop{margin-left:auto!important}
.mlv__h1{font-size:var(--fs5)}
.mlv__h2{font-size:var(--fs4)}
.mlv__lead{font-size:var(--fs2)}
.mlv__vn-uitleg{display:none}
.mlv__a-raster{grid-template-columns:minmax(0,1fr)}
.mlv__a-rechts{margin-top:0}
.mlv__a-links img,.mlv__a-rechts img{aspect-ratio:4/3}
.mlv__a-breed img{aspect-ratio:16/10}
.mlv__r figcaption{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.mlv *{transition:none!important;scroll-behavior:auto!important}}// Projectpagina verbouwing · Molenaar Verbouw, Zutphen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.mlv');if(!s)return;
var rustig=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var knop=s.querySelector('.mlv__menu-knop'),menu=s.querySelector('.mlv__menu');
knop.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;knop.setAttribute('aria-expanded',String(open));knop.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
menu.addEventListener('click',function(e){if(e.target.closest('a')){menu.hidden=true;knop.setAttribute('aria-expanded','false');knop.setAttribute('aria-label','Menu openen');}});
var vn=s.querySelector('.mlv__vn'),sch=s.querySelector('.mlv__vn-schuif'),bezig=false;
function zet(v){vn.style.setProperty('--p',v+'%');sch.setAttribute('aria-valuetext',v<15?'vooral na':v>85?'vooral voor':Math.round(v)+'% voor');}
sch.addEventListener('input',function(){bezig=true;zet(+sch.value);});zet(50);
if(!rustig&&'IntersectionObserver' in window){var io=new IntersectionObserver(function(en){if(!en[0].isIntersecting)return;io.disconnect();
var t0=null;function stap(t){if(bezig)return;if(!t0)t0=t;var f=Math.min(1,(t-t0)/2200),v=50+28*Math.sin(f*Math.PI*2)*(1-f);sch.value=Math.round(v);zet(v);if(f<1)requestAnimationFrame(stap);else{sch.value=50;zet(50);}}
setTimeout(function(){requestAnimationFrame(stap);},500);},{threshold:.5});io.observe(vn);}
s.querySelectorAll('.mlv__r').forEach(function(r){var b=r.querySelector('.mlv__wissel'),na=r.querySelector('.mlv__r-na'),voor=r.querySelector('.mlv__r-voor');
b.addEventListener('click',function(){var v=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',String(v));voor.hidden=!v;na.hidden=v;b.textContent=v?'Toon na':'Toon voor';});});
var form=s.querySelector('.mlv__form'),klaar=s.querySelector('.mlv__klaar');
function fout(veld,f){var l=veld.closest('.mlv__veld');l.classList.toggle('is-fout',f);l.querySelector('.mlv__fout').hidden=!f;veld.setAttribute('aria-invalid',f?'true':'false');}
var regels={naam:function(v){return v.trim().length>1;},tel:function(v){return v.replace(/[^0-9]/g,'').length>=10;}};
Object.keys(regels).forEach(function(n){form[n].addEventListener('blur',function(){if(form[n].value)fout(form[n],!regels[n](form[n].value));});});
form.addEventListener('submit',function(e){e.preventDefault();var eerste=null;
Object.keys(regels).forEach(function(n){var f=!regels[n](form[n].value);fout(form[n],f);if(f&&!eerste)eerste=form[n];});
if(eerste){eerste.focus();return;}
var d=new Date().getDay();s.querySelector('.mlv__klaar-dag').textContent=(d===4||d===5)?'dinsdag':(d===6?'maandag':'overmorgen');
form.querySelector('button[type=submit]').hidden=true;klaar.hidden=false;klaar.focus();});
}
init(document.querySelector('.jouw-container'));
Meer uit pagina-voorbeelden
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →