Verfwerk Brouwer · schildersbedrijf, Amersfoort Nieuw

<!-- Verfwerk Brouwer · schildersbedrijf, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="vbw">
<div class="vbw__top"><div class="vbw__in vbw__top-in">
  <p>Buitenwerk voor 2027: we plannen nu april en mei in.</p>
  <p class="vbw__top-r"><a href="tel:0331234567">033 123 4567</a><span>ma tot vr 7:30 tot 16:30</span></p>
</div></div>

<div class="vbw__kop" role="banner"><div class="vbw__in vbw__kop-in">
  <a href="#" class="vbw__logo" aria-label="Verfwerk Brouwer, naar home">Verfwerk Brouwer</a>
  <nav class="vbw__nav" aria-label="Hoofdmenu">
    <a href="#vbw-werk">Buiten</a><a href="#vbw-werk">Binnen</a><a href="#vbw-kleur">Kleuren</a><a href="#vbw-proj">Projecten</a><a href="#vbw-plan">Onderhoudsplan</a><a href="#vbw-contact">Contact</a>
  </nav>
  <a href="#vbw-prijs" class="vbw__knop vbw__knop--kop">Bereken je prijs</a>
  <button class="vbw__menuknop" type="button" aria-expanded="false" aria-controls="vbw-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="vbw__menu" id="vbw-menu" hidden>
  <a href="#vbw-werk">Buiten</a><a href="#vbw-werk">Binnen</a><a href="#vbw-kleur">Kleuren</a><a href="#vbw-proj">Projecten</a><a href="#vbw-plan">Onderhoudsplan</a><a href="#vbw-contact">Contact</a>
</div>
</div>

<div class="vbw__vn" style="--x:50%">
  <img class="vbw__vn-na" src="https://neddev.com/lab-media/site-schilder-1.webp" alt="Hoekwoning aan de Leusderweg na het schilderwerk: witte kozijnen en een groene voordeur" width="1376" height="768">
  <div class="vbw__vn-voor"><img src="https://neddev.com/lab-media/site-schilder-2.webp" alt="Dezelfde hoekwoning voor het schilderwerk, met bladderende verf op kozijnen en deur" width="1376" height="768"></div>
  <span class="vbw__vn-lijn" aria-hidden="true"><span></span></span>
  <input class="vbw__vn-schuif" type="range" min="0" max="100" value="50" aria-label="Schuif tussen voor en na het schilderwerk">
</div>
<div class="vbw__in">
  <p class="vbw__vn-bij">Hoekwoning aan de Leusderweg, maart en juni 2026. Kozijnen, voordeur, boeidelen en dakgoot. Schuif over de foto.</p>
  <div class="vbw__held">
    <h1 class="vbw__h1">Schilderwerk dat zeven jaar blijft staan</h1>
    <div>
      <p class="vbw__lead">Vier schilders, één werkplaats aan de Kapelweg en vooral veel voorwerk. We schuren, vullen en kitten tot het hout weer gezond is. Pas dan gaat de verf erop.</p>
      <a href="#vbw-prijs" class="vbw__knop">Bereken je prijs</a>
    </div>
  </div>
</div>

<div class="vbw__werk" id="vbw-werk"><div class="vbw__in vbw__werk-in">
  <div class="vbw__werk-a">
    <img src="https://neddev.com/lab-media/site-schilder-9.webp" alt="Steiger tegen een rij woningen in het Soesterkwartier tijdens het buitenschilderwerk" width="900" height="491" loading="lazy">
    <h2 class="vbw__h2">Buiten</h2>
    <p>Kozijnen, deuren, boeidelen, luiken en dakgoten. We werken van april tot en met oktober, alleen boven de tien graden en nooit op nat hout. Een kozijn buiten kost vanaf 145 euro, met schuren, plamuren en twee lagen.</p>
  </div>
  <div class="vbw__werk-b">
    <img src="https://neddev.com/lab-media/site-schilder-12.webp" alt="Schilder rolt een hoge muur in een woonkamer met afgeplakte vloer" width="900" height="491" loading="lazy">
    <h2 class="vbw__h2">Binnen</h2>
    <p>Muren, plafonds, trappen en keukenkastjes, ook in de winter. Vloeren dekken we af met stucloper en we nemen elke avond het stof mee. Muren en plafonds vanaf 11 euro per vierkante meter.</p>
  </div>
</div></div>

<div class="vbw__voor"><div class="vbw__voor-in">
  <img src="https://neddev.com/lab-media/site-schilder-5.webp" alt="Handen schuren een oud kozijn waar de verf van afbladdert" width="900" height="491" loading="lazy">
  <div class="vbw__voor-txt">
    <h2 class="vbw__h2">Het meeste werk zie je niet</h2>
    <p>Een kozijn dat na drie jaar weer bladdert, is meestal te snel geverfd. Wij rekenen zeventig procent van de tijd voor de voorbereiding:</p>
    <ul class="vbw__lijst">
      <li>houtrot uitfrezen en vullen met tweecomponentenhout</li>
      <li>bladderende lagen tot op het kale hout schuren</li>
      <li>oude kit eruit, nieuwe kit erin, naden dicht</li>
      <li>gronden op elke kale plek, dan twee lagen dekverf</li>
    </ul>
    <p>Daarom geven we vijf jaar garantie op buitenwerk, en houden de meeste klussen het zeven.</p>
  </div>
</div></div>

<div class="vbw__prijs" id="vbw-prijs"><div class="vbw__in vbw__prijs-in">
  <div>
    <h2 class="vbw__h2">Wat gaat het kosten?</h2>
    <p class="vbw__zacht">Een eerste indicatie, inclusief materiaal en btw. Na een opname bij je thuis krijg je een vaste prijs.</p>
    <form class="vbw__reken" novalidate>
      <fieldset><legend>Wat moet er gebeuren?</legend>
        <label><input type="radio" name="soort" value="buiten" checked> Buiten</label>
        <label><input type="radio" name="soort" value="binnen"> Binnen</label>
        <label><input type="radio" name="soort" value="beide"> Allebei</label>
      </fieldset>
      <label class="vbw__veld vbw__v-buiten">Aantal kozijnen en deuren <output data-o="koz">8</output><input type="range" name="koz" min="1" max="30" value="8"></label>
      <label class="vbw__veld vbw__v-binnen" hidden>Muren en plafonds in m² <output data-o="m2">60</output><input type="range" name="m2" min="10" max="300" step="5" value="60"></label>
      <label class="vbw__veld vbw__v-buiten">Woning
        <select name="huis"><option value="0">Tussenwoning</option><option value="1" selected>Hoekwoning</option><option value="2">Twee-onder-een-kap</option><option value="3">Vrijstaand</option></select>
      </label>
      <label class="vbw__check vbw__v-buiten"><input type="checkbox" name="steiger" checked> Bovenverdieping, er is een steiger nodig</label>
      <label class="vbw__check"><input type="checkbox" name="oud" checked> De woning is ouder dan twee jaar</label>
    </form>
  </div>
  <div class="vbw__uit" aria-live="polite">
    <p class="vbw__bedrag">€ 2.410 tot € 2.780</p>
    <p class="vbw__uit-txt">Voor 8 kozijnen en deuren aan een hoekwoning, met steiger. Vroegst mogelijke start: april 2027.</p>
    <p class="vbw__uit-btw">Op het arbeidsloon rekenen we 9 procent btw, omdat je woning ouder is dan twee jaar. Op de verf blijft het 21 procent.</p>
    <button type="button" class="vbw__knop vbw__knop--licht vbw__open">Plan een opname</button>
    <form class="vbw__opname" hidden novalidate>
      <label>Naam<input name="naam" autocomplete="name"></label>
      <label>Telefoon<input name="tel" type="tel" autocomplete="tel"></label>
      <label>Postcode en huisnummer<input name="adres" autocomplete="postal-code"></label>
      <p class="vbw__fout" hidden>Vul je naam en telefoonnummer in, dan bellen we je voor een tijd.</p>
      <button type="submit" class="vbw__knop vbw__knop--licht">Verstuur</button>
    </form>
    <p class="vbw__klaar" hidden></p>
  </div>
</div></div>

<div class="vbw__kleur" id="vbw-kleur"><div class="vbw__in">
  <div class="vbw__kleur-kop">
    <h2 class="vbw__h2">Wat er in Amersfoort op de deur gaat</h2>
    <p>Elke strook is zo breed als het aandeel van die kleur in onze 212 voordeuren van 2025. Kies een strook.</p>
  </div>
  <div class="vbw__stroken" role="radiogroup" aria-label="Deurkleuren">
    <button type="button" role="radio" aria-checked="true" style="--k:#2F4A3A;--w:34" data-t="Dennengroen, RAL 6009. De klassieker in de binnenstad en het Bergkwartier; de welstandscommissie ziet hem graag bij monumenten.">Dennengroen</button>
    <button type="button" role="radio" aria-checked="false" style="--k:#2B2E30;--w:22" data-t="Zwartgrijs, RAL 7021. Veel gekozen bij jaren-dertigwoningen in Leusden en het Soesterkwartier, vaak met witte kozijnen.">Zwartgrijs</button>
    <button type="button" role="radio" aria-checked="false" style="--k:#5E1F22;--w:16" data-t="Wijnrood, RAL 3005. Warm naast rode baksteen. Vraagt om een goede ondergrond, anders zie je elke oneffenheid.">Wijnrood</button>
    <button type="button" role="radio" aria-checked="false" style="--k:#3C5468;--w:12" data-t="Staalblauw, RAL 5011 iets lichter gemengd. Komt terug bij boerderijen rond Hoogland.">Staalblauw</button>
    <button type="button" role="radio" aria-checked="false" style="--k:#EDE6D3;--w:10;--t:#140A04" data-t="Crèmewit, RAL 9001. Meestal voor kozijnen; als deurkleur bij nieuwbouw in Vathorst.">Crèmewit</button>
    <button type="button" role="radio" aria-checked="false" style="--k:#7B6A3E;--w:6" data-t="Olijf, eigen menging. Het kleinste aandeel, en elk jaar een paar meer.">Olijf</button>
  </div>
  <div class="vbw__kleur-onder">
    <img src="https://neddev.com/lab-media/site-schilder-6.webp" alt="Glanzend dennengroene voordeur in een bakstenen gevel" width="900" height="491" loading="lazy">
    <p class="vbw__kleur-t">Dennengroen, RAL 6009. De klassieker in de binnenstad en het Bergkwartier; de welstandscommissie ziet hem graag bij monumenten.</p>
  </div>
</div></div>

<div class="vbw__proj" id="vbw-proj"><div class="vbw__in">
  <h2 class="vbw__h2">Recent opgeleverd</h2>
  <div class="vbw__mozaiek">
    <figure class="vbw__m1"><img src="https://neddev.com/lab-media/site-schilder-13.webp" alt="Boerderij met rieten dak en vers geschilderde groene luiken" width="900" height="491" loading="lazy">
      <figcaption><strong>Boerderij in Hoogland</strong> Luiken, kozijnen en de stalpoort, elf werkdagen. <q>Ze hebben het groen van mijn opa laten namengen van een oud luik uit de schuur.</q> Gerda Pouw</figcaption></figure>
    <figure class="vbw__m2"><img src="https://neddev.com/lab-media/site-schilder-7.webp" alt="Trappenhuis met witte spijlen en blauwgrijze muren" width="900" height="491" loading="lazy">
      <figcaption><strong>Trappenhuis, Soesterkwartier</strong> Spijlen en leuning gelakt, muren in blauwgrijs. <q>Drie verdiepingen en geen druppel op de traploper.</q> Jeroen Wassink</figcaption></figure>
    <figure class="vbw__m3"><img src="https://neddev.com/lab-media/site-schilder-11.webp" alt="Keuken met saliegroene kastjes en witte muren" width="900" height="491" loading="lazy">
      <figcaption><strong>Keukenkastjes, Leusden</strong> Gespoten in salie in plaats van een nieuwe keuken. <q>Een vijfde van wat een nieuwe keuken kostte.</q> Familie Hendriks</figcaption></figure>
    <figure class="vbw__m4"><img src="https://neddev.com/lab-media/site-schilder-4.webp" alt="Lichte woonkamer met net geschilderde grijze wanden en afgedekte vloer" width="900" height="491" loading="lazy">
      <figcaption><strong>Bovenwoning, binnenstad</strong> Muren en plafonds in twee dagen, terwijl de bewoners op vakantie waren.</figcaption></figure>
    <figure class="vbw__m5"><img src="https://neddev.com/lab-media/site-schilder-10.webp" alt="Kwast zet roodbruine lak op een houten vensterbank" width="900" height="491" loading="lazy">
      <figcaption><strong>Vensterbanken, Vathorst</strong> Twaalf stuks, geschuurd en in de lak gezet.</figcaption></figure>
  </div>
</div></div>

<div class="vbw__plan" id="vbw-plan"><div class="vbw__in vbw__plan-in">
  <div class="vbw__plan-txt">
    <h2 class="vbw__h2">Onderhoud per maand</h2>
    <p>Voor 14 euro per maand komen we elk voorjaar langs. We lopen de gevel na, werken kleine beschadigingen meteen bij en zetten de volgende schilderbeurt in de planning. Die betaal je dan al voor een groot deel uit het opgebouwde bedrag.</p>
    <p>Ruim 300 huizen in Amersfoort, Leusden en Hoogland zitten erin. Opzeggen kan per maand.</p>
    <a href="#vbw-contact" class="vbw__tekstlink">Vraag het onderhoudsplan aan</a>
  </div>
  <img src="https://neddev.com/lab-media/site-schilder-8.webp" alt="Werkplaats met rekken vol verfblikken en kwasten aan de wand" width="900" height="491" loading="lazy">
</div></div>

<div class="vbw__contact" id="vbw-contact"><div class="vbw__in">
  <h2 class="vbw__h2">Bel Henk, of app een foto</h2>
  <p class="vbw__groot"><a href="tel:0331234567">033 123 4567</a></p>
  <p class="vbw__contact-txt">Stuur een foto van je kozijnen naar <a href="tel:0612345678">06 12 34 56 78</a> en je hoort binnen een werkdag wat er moet gebeuren. Liever langskomen: de werkplaats aan de Kapelweg 41 is open van 7:30 tot 16:30.</p>
</div></div>

<div class="vbw__voet" role="contentinfo"><div class="vbw__in vbw__voet-in">
  <p><strong>Verfwerk Brouwer</strong> Kapelweg 41, 3818 BN Amersfoort · <a href="mailto:werk@voorbeeld.nl">werk@voorbeeld.nl</a></p>
  <p>KvK 81234560 · btw NL862345601B01 · Lid OnderhoudNL · VCA-gecertificeerd · Erkend leerbedrijf SBB</p>
  <p><a href="#">Privacy</a> <a href="#">Algemene voorwaarden</a> <a href="#">Werken bij</a></p>
</div></div>
</div>
</div>

/* Verfwerk Brouwer · schildersbedrijf, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): array@600 + supreme@400 */
.vbw{--bg:#FF6A2B;--opp:#FF7E45;--tekst:#140A04;--gedempt:#3A1A08;--lijn:#E5581C;--accent:#140A04;--op-accent:#FFFFFF;--r:0px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:44px;--fs6:72px;--sectie:clamp(72px,9vw,128px);--gat:clamp(20px,2.5vw,36px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Supreme',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.vbw *{box-sizing:border-box}
.vbw [hidden]{display:none!important}
.vbw a{color:inherit;text-underline-offset:4px}
.vbw img{display:block;max-width:100%;height:auto}
.vbw p{margin:0 0 16px}
.vbw__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.vbw__top{background:var(--accent);color:#fff;font-size:var(--fs1)}
.vbw__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.vbw__top p{margin:0}
.vbw__top-r{display:flex;gap:20px}
.vbw__top-r a{white-space:nowrap;font-weight:400}
.vbw__kop{position:sticky;top:0;z-index:20}
.vbw__kop-in{display:flex;align-items:center;gap:32px;height:76px;background:var(--bg);border-bottom:2px solid var(--tekst)}
.vbw__logo{font-family:'Array',monospace;font-weight:600;font-size:var(--fs4);text-decoration:none;line-height:1;margin-right:auto;padding:12px 0}
.vbw__nav{display:flex;gap:26px}
.vbw__nav a{text-decoration:none;transition:opacity .18s}
.vbw__nav a:hover{opacity:.6}
.vbw__knop{display:inline-block;background:var(--accent);color:var(--op-accent)!important;font:inherit;font-weight:400;padding:15px 26px;border:0;border-radius:var(--r);text-decoration:none;cursor:pointer;transition:background-color .18s,color .18s}
.vbw__knop:hover{background:#3A1A08}
.vbw__knop--licht{background:var(--bg);color:var(--tekst)!important}
.vbw__knop--licht:hover{background:#fff}
.vbw__menuknop{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px}
.vbw__menuknop span{display:block;height:2px;background:var(--tekst)}
.vbw__menu{display:flex;flex-direction:column;background:var(--bg);border-bottom:2px solid var(--tekst);padding:8px var(--zij) 20px}
.vbw__menu a{padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}
.vbw__vn{position:relative;aspect-ratio:1376/600;overflow:hidden;background:#000;max-height:720px;width:100%}
.vbw__vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbw__vn-voor{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.vbw__vn-lijn{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1px;background:var(--bg);pointer-events:none}
.vbw__vn-lijn span{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;background:var(--bg);border:3px solid var(--tekst)}
.vbw__vn-lijn span::before,.vbw__vn-lijn span::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-7px;border:7px solid transparent}
.vbw__vn-lijn span::before{left:4px;border-right-color:var(--tekst)}
.vbw__vn-lijn span::after{right:4px;border-left-color:var(--tekst)}
.vbw__vn-schuif{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vbw__vn-schuif:focus-visible + .vbw__vn-lijn,.vbw__vn:focus-within .vbw__vn-lijn span{outline:3px solid #fff}
.vbw__vn-bij{font-size:var(--fs1);color:var(--gedempt);padding-top:12px;margin:0!important}
.vbw__held{display:grid;grid-template-columns:7fr 4fr;gap:var(--gat) 64px;align-items:end;padding:40px 0 72px}
.vbw__h1{font-family:'Array',monospace;font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.02em;margin:0;max-width:11em}
.vbw__lead{font-size:var(--fs3);line-height:1.45;margin-bottom:24px!important}
.vbw__h2{font-family:'Array',monospace;font-weight:600;font-size:var(--fs5);line-height:1.05;letter-spacing:-.015em;margin:0 0 18px}
.vbw__werk{border-top:2px solid var(--tekst);padding:72px 0}
.vbw__werk-in{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:start}
.vbw__werk-a img{aspect-ratio:16/9;object-fit:cover;width:100%;margin-bottom:24px}
.vbw__werk-b{margin-top:48px}
.vbw__werk-b img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:24px}
.vbw__werk p{max-width:34em}
.vbw__voor{background:var(--accent);color:#fff}
.vbw__voor-in{display:grid;grid-template-columns:1fr 1fr;max-width:var(--kader);margin:0 auto}
.vbw__voor-in img{width:100%;height:100%;object-fit:cover;min-height:420px}
.vbw__voor-txt{padding:56px clamp(var(--zij),4vw,64px)}
.vbw__voor-txt p{max-width:30em;color:#F4DCCD}
.vbw__lijst{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid #4A2A16}
.vbw__lijst li{padding:10px 0;border-bottom:1px solid #4A2A16;font-size:var(--fs3)}
.vbw__prijs{background:var(--accent);color:#fff;border-top:1px solid #4A2A16}
.vbw__prijs-in{display:grid;grid-template-columns:6fr 5fr;gap:72px;padding-top:80px;padding-bottom:80px}
.vbw__zacht{color:#F4DCCD;max-width:30em}
.vbw__reken{display:grid;gap:22px;margin-top:28px;max-width:560px}
.vbw__reken fieldset{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.vbw__reken legend{padding:0;margin-bottom:10px;width:100%}
.vbw__reken fieldset label{position:relative;cursor:pointer}
.vbw__reken fieldset input{position:absolute;opacity:0}
.vbw__reken fieldset label:has(input){display:inline-block;border:2px solid #fff;padding:10px 20px;transition:background-color .18s,color .18s}
.vbw__reken fieldset label:has(input:checked){background:var(--bg);border-color:var(--bg);color:var(--tekst)}
.vbw__reken fieldset label:has(input:focus-visible){outline:3px solid var(--bg);outline-offset:2px}
.vbw__veld{display:grid;grid-template-columns:1fr auto;gap:8px}
.vbw__veld output{font-family:'Array',monospace;font-size:var(--fs3)}
.vbw__veld input,.vbw__veld select{grid-column:1/-1}
.vbw__veld input[type=range]{accent-color:var(--bg);width:100%}
.vbw__veld select{font:inherit;padding:12px;border:2px solid #fff;background:var(--accent);color:#fff;border-radius:var(--r)}
.vbw__check{display:flex;gap:10px;align-items:center;cursor:pointer}
.vbw__check input{width:20px;height:20px;accent-color:var(--bg)}
.vbw__uit{border-left:2px solid var(--bg);padding-left:48px;align-self:start}
.vbw__bedrag{font-family:'Array',monospace;font-weight:600;font-size:var(--fs5);line-height:1.1;color:var(--bg)}
.vbw__uit-txt{font-size:var(--fs3)}
.vbw__uit-btw{color:#F4DCCD;font-size:var(--fs1);margin-bottom:28px!important}
.vbw__opname{display:grid;gap:14px;margin-top:8px}
.vbw__opname label{display:grid;gap:6px;font-size:var(--fs1)}
.vbw__opname input{font:inherit;font-size:var(--fs2);padding:12px;border:2px solid #fff;background:transparent;color:#fff;border-radius:var(--r)}
.vbw__opname input:focus{outline:none;border-color:var(--bg)}
.vbw__opname button{justify-self:start}
.vbw__fout{color:var(--bg)}
.vbw__klaar{font-size:var(--fs3);color:var(--bg)}
.vbw__kleur{padding:var(--sectie) 0 72px}
.vbw__kleur-kop{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:end;margin-bottom:32px}
.vbw__kleur-kop p{max-width:28em}
.vbw__stroken{display:flex;height:180px;border:2px solid var(--tekst)}
.vbw__stroken button{flex:var(--w) 1 0;min-width:0;background:var(--k);color:var(--t,#fff);border:0;border-right:2px solid var(--tekst);font:inherit;font-size:var(--fs1);text-align:left;padding:14px;display:flex;align-items:flex-end;cursor:pointer;transition:flex-grow .3s ease;overflow:hidden;white-space:nowrap}
.vbw__stroken button:last-child{border-right:0}
.vbw__stroken button[aria-checked=false]{writing-mode:vertical-rl;transform:rotate(180deg);align-items:flex-start;justify-content:flex-start}
.vbw__stroken button[aria-checked=true]{flex-grow:calc(var(--w) + 18);font-size:var(--fs3)}
.vbw__stroken button:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.vbw__kleur-onder{display:grid;grid-template-columns:3fr 7fr;gap:56px;margin-top:40px;align-items:start}
.vbw__kleur-onder img{aspect-ratio:16/10;object-fit:cover;width:100%}
.vbw__kleur-t{font-size:var(--fs4);line-height:1.3;max-width:20em}
.vbw__proj{border-top:2px solid var(--tekst);padding:96px 0 72px}
.vbw__mozaiek{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gat);margin-top:16px}
.vbw__mozaiek figure{margin:0}
.vbw__mozaiek img{width:100%;object-fit:cover;margin-bottom:12px}
.vbw__mozaiek figcaption{font-size:var(--fs1);max-width:38em}
.vbw__mozaiek strong{display:block;font-family:'Array',monospace;font-weight:600;font-size:var(--fs3);margin-bottom:4px}
.vbw__mozaiek q{display:block;margin:8px 0 2px;font-size:var(--fs2);quotes:"\201C" "\201D"}
.vbw__m1{grid-column:1/8}.vbw__m1 img{aspect-ratio:16/9}
.vbw__m2{grid-column:8/13}.vbw__m2 img{aspect-ratio:4/3}
.vbw__m3{grid-column:1/4}.vbw__m3 img{aspect-ratio:1/1}
.vbw__m4{grid-column:4/10}.vbw__m4 img{aspect-ratio:2/1}
.vbw__m5{grid-column:10/13}.vbw__m5 img{aspect-ratio:1/1}
.vbw__plan{background:var(--opp);padding:72px 0}
.vbw__plan-in{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:center}
.vbw__plan-txt p{max-width:32em}
.vbw__plan img{width:100%;aspect-ratio:16/10;object-fit:cover}
.vbw__tekstlink{font-size:var(--fs3);text-decoration-thickness:2px}
.vbw__tekstlink:hover{text-decoration-thickness:4px}
.vbw__contact{padding:80px 0 40px}
.vbw__groot{font-family:'Array',monospace;font-weight:600;font-size:var(--fs6);line-height:1;margin:8px 0 28px!important}
.vbw__groot a{text-decoration:none;white-space:nowrap}
.vbw__groot a:hover{text-decoration:underline;text-decoration-thickness:4px}
.vbw__contact-txt{font-size:var(--fs3);max-width:38em}
.vbw__voet{border-top:2px solid var(--tekst);font-size:var(--fs1)}
.vbw__voet-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding-top:24px;padding-bottom:28px}
.vbw__voet p{margin:0}
.vbw__voet strong{font-weight:400;font-family:'Array',monospace;margin-right:8px}
.vbw__voet a{margin-right:14px}
@container (max-width:1000px){
  .vbw__nav,.vbw__knop--kop{display:none}
  .vbw__menuknop{display:flex}
  .vbw__top-in>p:first-child{display:none}
  .vbw__held,.vbw__werk-in,.vbw__voor-in,.vbw__prijs-in,.vbw__kleur-kop,.vbw__kleur-onder,.vbw__plan-in{grid-template-columns:1fr}
  .vbw__werk-b{margin-top:0}
  .vbw__werk-b img{aspect-ratio:4/3}
  .vbw__voor-in img{min-height:0;aspect-ratio:4/3}
  .vbw__uit{border-left:0;border-top:2px solid var(--bg);padding:32px 0 0}
  .vbw__mozaiek>figure{grid-column:1/-1!important;margin-top:0!important}
  .vbw__mozaiek img{aspect-ratio:4/3!important}
  .vbw__h1{font-size:var(--fs5)}
}
@container (max-width:560px){
  .vbw__vn{aspect-ratio:4/3}
  .vbw__h1{font-size:40px}
  .vbw__h2{font-size:var(--fs4)}
  .vbw__groot{font-size:var(--fs5)}
  .vbw__stroken{flex-direction:column;height:auto}
  .vbw__stroken button{flex:none;height:calc(var(--w) * 2px + 34px);border-right:0;border-bottom:2px solid var(--tekst);align-items:center;transition:height .3s ease}
  .vbw__stroken button:last-child{border-bottom:0}
  .vbw__stroken button[aria-checked=false]{writing-mode:horizontal-tb;transform:none;align-items:center}
  .vbw__logo{font-size:var(--fs3);white-space:nowrap}
  .vbw__stroken button[aria-checked=true]{height:120px}
  .vbw__top-r span{display:none}
  .vbw__voet-in{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.vbw *{transition:none!important;animation:none!important}}

// Verfwerk Brouwer · schildersbedrijf, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.vbw');if(!s)return;
var knop=s.querySelector('.vbw__menuknop'),menu=s.querySelector('.vbw__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('.vbw__vn'),schuif=s.querySelector('.vbw__vn-schuif');
function zet(v){vn.style.setProperty('--x',v+'%');}
schuif.addEventListener('input',function(){zet(schuif.value);});
if(!window.matchMedia('(prefers-reduced-motion: reduce)').matches&&'IntersectionObserver' in window){
  var gedaan=false;new IntersectionObserver(function(es,o){es.forEach(function(e){if(e.isIntersecting&&!gedaan){gedaan=true;o.disconnect();var t0=null;
    function stap(t){if(!t0)t0=t;var p=Math.min(1,(t-t0)/1600),v=p<.5?50+40*Math.sin(p*Math.PI*2):50-25*Math.sin((p-.5)*Math.PI*2);zet(v);if(p<1)requestAnimationFrame(stap);else zet(50);}
    setTimeout(function(){requestAnimationFrame(stap);},400);}});},{threshold:.5}).observe(vn);}
var f=s.querySelector('.vbw__reken'),bedrag=s.querySelector('.vbw__bedrag'),txt=s.querySelector('.vbw__uit-txt'),btw=s.querySelector('.vbw__uit-btw');
var eur=function(n){return '\u20AC '+(Math.round(n/10)*10).toLocaleString('nl-NL');};
function reken(){var soort=f.soort.value,koz=+f.koz.value,m2=+f.m2.value,huis=+f.huis.value,steiger=f.steiger.checked,oud=f.oud.checked;
  s.querySelectorAll('.vbw__v-buiten').forEach(function(x){x.hidden=soort==='binnen';});
  s.querySelectorAll('.vbw__v-binnen').forEach(function(x){x.hidden=soort==='buiten';});
  s.querySelector('[data-o=koz]').textContent=koz;s.querySelector('[data-o=m2]').textContent=m2;
  var arbeid=0,mat=0,delen=[];
  if(soort!=='binnen'){arbeid+=koz*128;mat+=koz*34;if(steiger){arbeid+=[380,520,640,820][huis];}delen.push(koz+(koz===1?' kozijn of deur':' kozijnen en deuren')+' aan een '+['tussenwoning','hoekwoning','twee-onder-een-kap','vrijstaande woning'][huis]+(steiger?', met steiger':''));}
  if(soort!=='buiten'){arbeid+=m2*8.2;mat+=m2*2.6;delen.push(m2+' m\u00B2 muren en plafonds');}
  var b=oud?1.09:1.21,totaal=arbeid*b+mat*1.21;
  bedrag.textContent=eur(totaal*.95)+' tot '+eur(totaal*1.1);
  var start=soort==='binnen'?'over drie weken':'april 2027';
  txt.textContent='Voor '+delen.join(' en ')+'. Vroegst mogelijke start: '+start+'.';
  btw.textContent=oud?'Op het arbeidsloon rekenen we 9 procent btw, omdat je woning ouder is dan twee jaar. Op de verf blijft het 21 procent.':'Je woning is jonger dan twee jaar, dus over alles rekenen we 21 procent btw.';}
f.addEventListener('input',reken);f.addEventListener('change',reken);reken();
var open=s.querySelector('.vbw__open'),op=s.querySelector('.vbw__opname'),fout=s.querySelector('.vbw__fout'),klaar=s.querySelector('.vbw__klaar');
open.addEventListener('click',function(){open.hidden=true;op.hidden=false;op.naam.focus();});
op.addEventListener('submit',function(e){e.preventDefault();var n=op.naam.value.trim(),t=op.tel.value.trim();if(!n||t.replace(/\D/g,'').length<10){fout.hidden=false;return;}fout.hidden=true;op.hidden=true;klaar.hidden=false;
  klaar.textContent='Dank je, '+n.split(' ')[0]+'. Henk belt je morgen voor 12:00 om een tijd voor de opname te prikken.';});
var st=[].slice.call(s.querySelectorAll('.vbw__stroken button')),kt=s.querySelector('.vbw__kleur-t');
function kies(b){st.forEach(function(x){x.setAttribute('aria-checked',String(x===b));x.tabIndex=x===b?0:-1;});kt.textContent=b.getAttribute('data-t');}
st.forEach(function(b,i){b.tabIndex=i?-1:0;b.addEventListener('click',function(){kies(b);});b.addEventListener('keydown',function(e){var n=(e.key==='ArrowRight'||e.key==='ArrowDown')?1:(e.key==='ArrowLeft'||e.key==='ArrowUp')?-1:0;if(n){e.preventDefault();var v=st[(i+n+st.length)%st.length];v.focus();kies(v);}});});
}
init(document.querySelector('.jouw-container'));