Dienstpagina dakkapel · Bouwbedrijf Ruijter, Amersfoort New

<!-- Dienstpagina dakkapel · Bouwbedrijf Ruijter, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="rdk">
<div class="rdk__top"><div class="rdk__in rdk__top-in">
  <p class="rdk__top-txt">Plaatsen in week 47 en 48 kan nog</p>
  <p class="rdk__top-txt"><a href="tel:0331234567">033 123 4567</a> <span class="rdk__top-weg">· ma tot vr 7:30 tot 17:00</span></p>
</div></div>

<div class="rdk__head" role="banner"><div class="rdk__in rdk__head-in">
  <a href="#" class="rdk__logo" aria-label="Bouwbedrijf Ruijter, naar home">Ruijter<span>bouwbedrijf</span></a>
  <nav class="rdk__nav" aria-label="Hoofdmenu">
    <a href="#" aria-current="page">Dakkapel</a><a href="#">Aanbouw</a><a href="#">Verbouwing</a><a href="#rdk-projecten">Projecten</a><a href="#">Over ons</a><a href="#rdk-aanvraag">Contact</a>
  </nav>
  <a href="#rdk-prijs" class="rdk__btn rdk__btn--head">Bereken je prijs</a>
  <button class="rdk__menu-knop" type="button" aria-expanded="false" aria-controls="rdk-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="rdk__menu" id="rdk-menu" hidden><div class="rdk__in">
  <a href="#">Dakkapel</a><a href="#">Aanbouw</a><a href="#">Verbouwing</a><a href="#rdk-projecten">Projecten</a><a href="#">Over ons</a><a href="#rdk-aanvraag">Contact</a><a href="#rdk-prijs" class="rdk__btn">Bereken je prijs</a>
</div></div>
</div>

<div class="rdk__hero"><div class="rdk__in rdk__hero-in">
  <div class="rdk__hero-txt">
    <h1 class="rdk__h1">Een dakkapel in één dag</h1>
    <p class="rdk__lead">We meten bij je thuis in, bouwen de dakkapel in onze hal aan de Isselt en zetten hem met de kraan op je dak. Dezelfde avond is je zolder droog, dicht en binnen afgewerkt.</p>
    <p class="rdk__vanaf">Een kunststof dakkapel van 250 cm breed kost bij ons € 6.450, inclusief plaatsen, afvoer van de pannen en binnenafwerking.</p>
    <div class="rdk__acties"><a href="#rdk-prijs" class="rdk__btn">Bereken je prijs</a><a href="tel:0331234567" class="rdk__link">Of bel Gerrit: 033 123 4567</a></div>
  </div>
  <div class="rdk__kaart">
    <div class="rdk__kaart-vlak">
      <svg class="rdk__kaart-svg" viewBox="0 0 600 500" aria-hidden="true" focusable="false">
        <path class="rdk__water" d="M150 0 L560 0 L520 40 Q430 70 360 52 Q300 40 240 62 Q190 78 150 50 Z"/>
        <path class="rdk__eem" d="M300 262 C292 230 270 200 262 170 C254 138 240 110 232 70"/>
        <path class="rdk__weg" d="M0 330 C120 318 220 300 300 302 C390 304 480 296 600 280"/>
        <path class="rdk__weg" d="M90 470 C170 400 240 330 300 290 C360 250 430 190 600 92"/>
        <circle class="rdk__gebied" cx="300" cy="262" r="205"/>
      </svg>
      <button type="button" class="rdk__plaats is-aan" style="left:50%;top:52.4%" data-p="amersfoort"><i style="--g:22px"></i><span>Amersfoort</span></button>
      <button type="button" class="rdk__plaats" style="left:55%;top:40%" data-p="hoogland"><i style="--g:14px"></i><span>Hoogland</span></button>
      <button type="button" class="rdk__plaats" style="left:51.6%;top:67%" data-p="leusden"><i style="--g:17px"></i><span>Leusden</span></button>
      <button type="button" class="rdk__plaats" style="left:33%;top:51%" data-p="soest"><i style="--g:15px"></i><span>Soest</span></button>
      <button type="button" class="rdk__plaats" style="left:31.5%;top:34%" data-p="baarn"><i style="--g:11px"></i><span>Baarn</span></button>
      <button type="button" class="rdk__plaats" style="left:41.6%;top:22%" data-p="bunschoten"><i style="--g:12px"></i><span>Bunschoten</span></button>
      <button type="button" class="rdk__plaats" style="left:66%;top:27%" data-p="nijkerk"><i style="--g:13px"></i><span>Nijkerk</span></button>
      <button type="button" class="rdk__plaats" style="left:68%;top:74%" data-p="woudenberg"><i style="--g:10px"></i><span>Woudenberg</span></button>
      <button type="button" class="rdk__plaats" style="left:83%;top:52%" data-p="barneveld"><i style="--g:10px"></i><span>Barneveld</span></button>
      <button type="button" class="rdk__plaats" style="left:26%;top:78%" data-p="zeist"><i style="--g:9px"></i><span>Zeist</span></button>
    </div>
    <p class="rdk__kaart-onder" aria-live="polite"><strong class="rdk__kaart-naam">Amersfoort</strong> <span class="rdk__kaart-txt">94 dakkapellen sinds 2022. De laatste op 14 oktober aan de Leusderweg: trespa antraciet, 380 cm.</span></p>
    <p class="rdk__kaart-klein">We werken binnen 25 km van onze hal. Daarbuiten komen we alleen bij drie of meer dakkapellen in één straat.</p>
  </div>
</div></div>

<figure class="rdk__groot">
  <img src="https://neddev.com/lab-media/page-dienst-dakkapel-1.webp" alt="Een kraan hijst een witte dakkapel op het achterdak van een rijtjeshuis in Amersfoort-Schothorst" width="1408" height="768">
  <figcaption class="rdk__in">Schothorst, 9:40 uur. De dakkapel komt in één stuk uit onze hal en hangt nog geen tien minuten aan de kraan.</figcaption>
</figure>

<div class="rdk__krijg"><div class="rdk__in rdk__krijg-in">
  <div class="rdk__krijg-foto"><img src="https://neddev.com/lab-media/page-dienst-dakkapel-3.webp" alt="Lichte zolderkamer met een brede dakkapel, een bureau voor het raam" width="900" height="491" loading="lazy"></div>
  <div class="rdk__krijg-txt">
    <h2 class="rdk__h2">Wat je krijgt</h2>
    <p>Een dakkapel geeft een zolder van 2,10 meter stahoogte ongeveer twee vierkante meter vloer erbij waar je rechtop kunt lopen. Meestal is dat het verschil tussen een bergzolder en een slaapkamer.</p>
    <p>Wij bouwen alleen prefab. In de hal is het droog, de maten kloppen tot op de millimeter en op jouw dak staan we maar één dag.</p>
    <div class="rdk__lijsten">
      <div>
        <h3 class="rdk__h3">Altijd inbegrepen</h3>
        <ul>
          <li>Inmeten en tekening, ook voor de vergunning</li>
          <li>Kozijnen in HR++ glas, draaikiep</li>
          <li>EPDM-dakbedekking met 20 jaar garantie</li>
          <li>Binnenafwerking met gipsplaat, klaar voor de schilder</li>
          <li>Kraan, afzetting en afvoer van pannen en puin</li>
        </ul>
      </div>
      <div>
        <h3 class="rdk__h3">Niet inbegrepen</h3>
        <ul>
          <li>Schilderwerk binnen</li>
          <li>Leges van de gemeente, meestal € 300 tot € 600</li>
          <li>Verplaatsen van een cv-ketel of afvoer op zolder</li>
        </ul>
      </div>
    </div>
  </div>
</div></div>

<div class="rdk__prijs" id="rdk-prijs"><div class="rdk__in rdk__prijs-in">
  <div class="rdk__prijs-kop">
    <h2 class="rdk__h2">Bereken je prijs</h2>
    <p>Dit zijn onze echte prijzen van 2026, inclusief 21% btw. Na het inmeten krijg je een vaste prijs die hier hooguit 5% van afwijkt.</p>
  </div>
  <form class="rdk__reken" novalidate>
    <div class="rdk__invoer">
      <label class="rdk__schuif"><span>Breedte <output class="rdk__breedte-uit">250 cm</output></span>
        <input type="range" name="breedte" min="150" max="600" step="10" value="250" aria-describedby="rdk-breedte-hulp">
      </label>
      <p class="rdk__hulp" id="rdk-breedte-hulp">Meet de breedte van je dakvlak min 50 cm aan elke kant. Bij een rijtjeshuis uit de jaren 70 kom je meestal op 300 tot 400 cm.</p>
      <fieldset class="rdk__keus"><legend>Afwerking van de zijkanten</legend>
        <label><input type="radio" name="afw" value="kunststof" checked><span>Kunststof, wit of antraciet</span></label>
        <label><input type="radio" name="afw" value="trespa"><span>Trespa, zeven kleuren</span></label>
        <label><input type="radio" name="afw" value="ceder"><span>Western red cedar</span></label>
      </fieldset>
      <label class="rdk__veld-kort"><span>Aantal ramen</span>
        <select name="ramen"><option value="2" selected>2 ramen</option><option value="3">3 ramen</option><option value="4">4 ramen</option><option value="5">5 ramen</option></select>
      </label>
      <fieldset class="rdk__keus"><legend>Opties</legend>
        <label><input type="checkbox" name="rolluik"><span>Elektrische rolluiken, € 395 per raam</span></label>
        <label><input type="checkbox" name="hor"><span>Plisséhorren, € 95 per raam</span></label>
      </fieldset>
      <fieldset class="rdk__keus"><legend>Op welk dakvlak?</legend>
        <label><input type="radio" name="kant" value="achter" checked><span>Achterkant</span></label>
        <label><input type="radio" name="kant" value="voor"><span>Voorkant of zijkant aan de straat</span></label>
      </fieldset>
    </div>
    <div class="rdk__uitkomst">
      <p class="rdk__totaal" aria-live="polite"><span class="rdk__bedrag">€ 6.450</span></p>
      <table class="rdk__opbouw">
        <caption>Zo is de prijs opgebouwd</caption>
        <tbody>
          <tr><th scope="row" class="rdk__r-basis">Dakkapel 250 cm, kunststof</th><td class="rdk__v-basis">€ 6.450</td></tr>
          <tr class="rdk__r-extra" hidden><th scope="row" class="rdk__r-ramen">Extra ramen</th><td class="rdk__v-ramen">€ 0</td></tr>
          <tr class="rdk__r-opt" hidden><th scope="row" class="rdk__r-optnaam">Opties</th><td class="rdk__v-opt">€ 0</td></tr>
          <tr class="rdk__r-verg" hidden><th scope="row">Vergunningaanvraag door ons</th><td>€ 450</td></tr>
        </tbody>
      </table>
      <p class="rdk__vergunning">Aan de achterkant is een dakkapel tot 175 cm hoog meestal vergunningvrij. Wij checken het altijd bij het inmeten.</p>
      <a href="#rdk-aanvraag" class="rdk__btn rdk__neem">Vraag deze dakkapel aan</a>
    </div>
  </form>
</div></div>

<div class="rdk__dag">
  <div class="rdk__in"><h2 class="rdk__h2">De plaatsingsdag</h2>
  <p class="rdk__dag-intro">Je hoeft niet thuis te blijven, wel moet de zolder leeg zijn. Om 17:00 uur lopen we met je de zolder rond.</p></div>
  <div class="rdk__strook" tabindex="0" aria-label="Foto's van de plaatsingsdag, schuif zijwaarts">
    <figure class="rdk__s rdk__s--breed"><img src="https://neddev.com/lab-media/page-dienst-dakkapel-10.webp" alt="Een timmerman zet het houten frame van een dakkapel in elkaar in de werkplaats" width="900" height="491" loading="lazy"><figcaption><strong>De dag ervoor</strong> staat jouw dakkapel klaar in de hal, met kozijnen en glas er al in.</figcaption></figure>
    <figure class="rdk__s"><img src="https://neddev.com/lab-media/page-dienst-dakkapel-5.webp" alt="Twee dakdekkers halen dakpannen van een schuin dak" width="900" height="491" loading="lazy"><figcaption><strong>Om 7:30 uur</strong> gaan de pannen eraf en zagen we het gat in het dakbeschot.</figcaption></figure>
    <figure class="rdk__s rdk__s--breed"><img src="https://neddev.com/lab-media/page-dienst-dakkapel-4.webp" alt="Een dakdekker rolt EPDM-dakbedekking aan op het dak van de dakkapel" width="900" height="491" loading="lazy"><figcaption><strong>Rond het middaguur</strong> is hij waterdicht. De EPDM loopt in één stuk over de rand.</figcaption></figure>
    <figure class="rdk__s"><img src="https://neddev.com/lab-media/page-dienst-dakkapel-6.webp" alt="Een timmerman werkt de binnenkant van een nieuwe dakkapel af met gipsplaat" width="900" height="491" loading="lazy"><figcaption><strong>In de middag</strong> werken we binnen af en zuigen we de zolder schoon.</figcaption></figure>
  </div>
</div>

<div class="rdk__proj" id="rdk-projecten"><div class="rdk__in">
  <h2 class="rdk__h2">Recent geplaatst</h2>
  <div class="rdk__proj-raster">
    <figure class="rdk__proj-groot">
      <img src="https://neddev.com/lab-media/page-dienst-dakkapel-7.webp" alt="Brede antraciet dakkapel op de rode pannen van een jaren-dertig twee-onder-een-kapwoning" width="900" height="491" loading="lazy">
      <figcaption><strong>Bergkwartier, Amersfoort.</strong> Trespa antraciet, 420 cm, vier ramen met rolluiken. € 12.896. "Onze dochter heeft nu een kamer waar ze kan staan. Ze waren om kwart over vier weg." Ilse van Dam</figcaption>
    </figure>
    <ul class="rdk__proj-lijst">
      <li><img src="https://neddev.com/lab-media/page-dienst-dakkapel-8.webp" alt="Dakkapel bekleed met rood cederhout op een donker pannendak" width="900" height="491" loading="lazy"><p><strong>Leusden-Zuid</strong> Western red cedar, 300 cm, drie ramen. € 9.268</p></li>
      <li><img src="https://neddev.com/lab-media/page-dienst-dakkapel-9.webp" alt="Een rij rijtjeshuizen met dezelfde witte dakkapellen aan de straatkant" width="900" height="491" loading="lazy"><p><strong>Soest, Kerkebuurt</strong> Vijf keer kunststof wit, 200 cm, in één week voor vijf buren. € 5.430 per huis</p></li>
      <li><img src="https://neddev.com/lab-media/page-dienst-dakkapel-2.webp" alt="Antraciet dakkapel met drie witte ramen op het achterdak van een rijtjeshuis" width="900" height="491" loading="lazy"><p><strong>Hoogland</strong> Kunststof antraciet, 340 cm, drie ramen met horren. € 8.584</p></li>
    </ul>
  </div>
</div></div>

<div class="rdk__aanvraag" id="rdk-aanvraag"><div class="rdk__in rdk__aanvraag-in">
  <div class="rdk__wie">
    <img src="https://neddev.com/lab-media/page-dienst-dakkapel-11.webp" alt="Gerrit Ruijter meet met een duimstok de dakhelling op een zolder" width="900" height="491" loading="lazy">
    <p>Gerrit Ruijter komt zelf inmeten. Dat duurt drie kwartier en kost niets. Binnen twee werkdagen heb je de tekening en een vaste prijs.</p>
    <p><a href="tel:0331234567">033 123 4567</a><br><a href="mailto:gerrit@voorbeeld.nl">gerrit@voorbeeld.nl</a></p>
  </div>
  <form class="rdk__form" novalidate>
    <h2 class="rdk__h2">Inmeten aanvragen</h2>
    <p class="rdk__keuze-mee">Je keuze: <strong class="rdk__keuze-txt">250 cm, kunststof, 2 ramen, € 6.450</strong>. <a href="#rdk-prijs">Aanpassen</a></p>
    <div class="rdk__velden">
      <label class="rdk__veld"><span>Naam</span><input name="naam" autocomplete="name" required><em class="rdk__fout" hidden>Vul je naam in.</em></label>
      <label class="rdk__veld"><span>Telefoon</span><input name="tel" type="tel" autocomplete="tel" required><em class="rdk__fout" hidden>Vul een telefoonnummer van 10 cijfers in.</em></label>
      <label class="rdk__veld"><span>Postcode en huisnummer</span><input name="adres" autocomplete="postal-code" placeholder="3811 AB 12" required><em class="rdk__fout" hidden>Vul je postcode en huisnummer in, bv. 3811 AB 12.</em></label>
      <label class="rdk__veld"><span>Wanneer ben je thuis?</span><select name="moment"><option>Doordeweeks overdag</option><option>Doordeweeks na 17:00 uur</option><option>Zaterdagochtend</option></select></label>
      <label class="rdk__veld rdk__veld--breed"><span>Iets dat we moeten weten? (mag leeg)</span><textarea name="opm" rows="3"></textarea></label>
    </div>
    <button type="submit" class="rdk__btn">Verstuur aanvraag</button>
    <div class="rdk__klaar" hidden tabindex="-1"><p><strong>Bedankt, je aanvraag is binnen.</strong> Gerrit belt je uiterlijk <span class="rdk__klaar-dag">morgen</span> om een tijd af te spreken.</p></div>
  </form>
</div></div>

<div class="rdk__voet" role="contentinfo"><div class="rdk__in rdk__voet-in">
  <p class="rdk__voet-groot">Ruijter bouwt dakkapellen, aanbouwen en zolders in Amersfoort, Leusden, Soest, Baarn, Bunschoten, Hoogland, Nijkerk, Woudenberg, Barneveld en Zeist.</p>
  <p class="rdk__voet-regel">Bouwbedrijf Ruijter · Nijverheidsweg-Noord 41, 3812 PK Amersfoort · <a href="tel:0331234567">033 123 4567</a> · <a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></p>
  <p class="rdk__voet-regel">Aangesloten bij Bouwgarant · VCA* · KvK 31234567 · BTW NL001234567B01 · <a href="#">Privacy</a> · <a href="#">Algemene voorwaarden</a></p>
</div></div>
</div>
</div>

/* Dienstpagina dakkapel · Bouwbedrijf Ruijter, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): array@600 + supreme@400,500 */
.rdk{--bg:#CDEBDF;--opp:#E4F5EE;--tekst:#0F2019;--gedempt:#3C5A4D;--lijn:#B0D9C8;--accent:#A51D2D;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:44px;--fs6:72px;--sectie:clamp(56px,7vw,96px);--gat:clamp(20px,2.5vw,36px);--kader:1660px;--lees:720px;--zij:20px;--kop:'Array',ui-monospace,monospace;
  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.6}
.rdk *{box-sizing:border-box}
.rdk [hidden]{display:none!important}
.rdk a{color:inherit}
.rdk img{display:block;max-width:100%;height:auto}
.rdk figure{margin:0}
.rdk p{margin:0 0 14px}
.rdk__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.rdk__top{background:var(--tekst);color:var(--opp)}
.rdk__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px}
.rdk__top-txt{margin:0!important;font-size:var(--fs1)}
.rdk__top-txt a{white-space:nowrap;text-decoration:none;display:inline-block;padding:4px 0;font-weight:500}
.rdk__head{position:sticky;top:0;z-index:20}
.rdk__head-in{display:flex;align-items:center;gap:32px;height:76px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.rdk__logo{font-family:var(--kop);font-weight:600;font-size:var(--fs4);text-decoration:none;display:flex;align-items:baseline;gap:8px;letter-spacing:-.02em}
.rdk__logo span{font-family:'Supreme',sans-serif;font-size:var(--fs1);color:var(--gedempt);letter-spacing:0}
.rdk__nav{display:flex;gap:26px;margin-left:auto}
.rdk__nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .18s,color .18s}
.rdk__nav a:hover{color:var(--accent)}
.rdk__nav a[aria-current]{border-bottom-color:var(--accent)}
.rdk__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font:500 var(--fs2)/1.2 'Supreme',sans-serif;padding:14px 22px;border-radius:var(--r);border:0;cursor:pointer;transition:background-color .18s}
.rdk__btn:hover{background:#87141F}
.rdk__btn:focus-visible,.rdk a:focus-visible,.rdk button:focus-visible,.rdk input:focus-visible,.rdk select:focus-visible,.rdk textarea:focus-visible,.rdk__strook:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rdk__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}
.rdk__menu-knop span{position:absolute;left:11px;right:11px;height:2px;background:var(--tekst);transition:transform .18s}
.rdk__menu-knop span:first-child{top:16px}.rdk__menu-knop span:last-child{top:25px}
.rdk__menu-knop[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.rdk__menu-knop[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.rdk__menu{background:var(--opp);border-bottom:1px solid var(--lijn)}
.rdk__menu .rdk__in{display:flex;flex-direction:column;padding-top:8px;padding-bottom:20px}
.rdk__menu a{text-decoration:none;padding:12px 0;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}
.rdk__menu .rdk__btn{margin-top:16px;text-align:center;border:0}
.rdk__h1{font-family:var(--kop);font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.03em;margin:0 0 28px;max-width:10ch}
.rdk__h2{font-family:var(--kop);font-weight:600;font-size:var(--fs5);line-height:1.05;letter-spacing:-.02em;margin:0 0 24px}
.rdk__h3{font-family:var(--kop);font-weight:600;font-size:var(--fs3);line-height:1.2;margin:0 0 10px}
.rdk__hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.rdk__lead{font-size:var(--fs3);line-height:1.5;max-width:34ch}
.rdk__vanaf{color:var(--gedempt);max-width:44ch}
.rdk__acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:28px}
.rdk__link{font-weight:500;text-decoration-thickness:1px;text-underline-offset:4px;padding:6px 0}
.rdk__link:hover{color:var(--accent)}
.rdk__kaart-vlak{position:relative;background:var(--opp);border-radius:var(--r);aspect-ratio:6/5;max-height:500px;width:100%;overflow:hidden}
.rdk__kaart-svg{position:absolute;inset:0;width:100%;height:100%}
.rdk__water{fill:var(--lijn)}
.rdk__eem{fill:none;stroke:var(--lijn);stroke-width:7;stroke-linecap:round}
.rdk__weg{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-linecap:round}
.rdk__gebied{fill:none;stroke:var(--tekst);stroke-width:1.5;stroke-dasharray:6 7;opacity:.55}
.rdk__plaats{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;background:none;border:0;padding:4px;cursor:pointer;font:500 var(--fs1)/1 'Supreme',sans-serif;color:var(--tekst);min-height:28px;min-width:28px;justify-content:center}
.rdk__plaats i{display:block;width:var(--g);height:var(--g);border-radius:50%;background:var(--accent);opacity:.82;flex:none;transition:transform .18s,opacity .18s}
.rdk__plaats span{transform:translateX(0);white-space:nowrap}
.rdk__plaats:hover i,.rdk__plaats.is-aan i{opacity:1;transform:scale(1.18)}
.rdk__plaats.is-aan span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.rdk__kaart-onder{margin:16px 0 6px!important;font-size:var(--fs2)}
.rdk__kaart-naam{font-family:var(--kop);font-weight:600;margin-right:6px}
.rdk__kaart-klein{font-size:var(--fs1);color:var(--gedempt)}
.rdk.is-start .rdk__plaats i{transform:scale(0)}
.rdk__groot img{width:100%;max-height:440px;object-fit:cover;object-position:50% 35%}
.rdk__groot figcaption{font-size:var(--fs1);color:var(--gedempt);padding-top:12px;padding-bottom:12px}
.rdk__krijg-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);padding-top:var(--sectie);padding-bottom:var(--sectie);align-items:start}
.rdk__krijg-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.rdk__krijg-txt{max-width:820px}
.rdk__lijsten{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px;margin-top:32px;padding-top:28px;border-top:1px solid var(--tekst)}
.rdk__lijsten ul{margin:0;padding:0 0 0 18px}
.rdk__lijsten li{margin-bottom:6px}
.rdk__prijs{background:var(--opp)}
.rdk__prijs-in{padding-top:var(--sectie);padding-bottom:var(--sectie)}
.rdk__prijs-kop{max-width:var(--lees);margin-bottom:28px}
.rdk__prijs-kop p{color:var(--gedempt)}
.rdk__reken{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:start}
.rdk__schuif{display:block}
.rdk__schuif>span{display:flex;justify-content:space-between;font-weight:500;margin-bottom:10px}
.rdk__schuif output{font-family:var(--kop);font-weight:600;font-size:var(--fs4);line-height:1}
.rdk__schuif input{width:100%;accent-color:var(--accent);height:28px}
.rdk__hulp{font-size:var(--fs1);color:var(--gedempt);margin-top:6px!important}
.rdk__keus{border:0;padding:0;margin:24px 0 0}
.rdk__keus legend{font-weight:500;margin-bottom:8px;padding:0}
.rdk__keus{display:flex;flex-wrap:wrap;gap:4px 28px}
.rdk__keus legend{width:100%}
.rdk__keus label{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.rdk__keus input{accent-color:var(--accent);width:18px;height:18px;margin:0;flex:none}
.rdk__veld-kort{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;font-weight:500}
.rdk select,.rdk input:not([type=range]):not([type=radio]):not([type=checkbox]),.rdk textarea{font:400 var(--fs2)/1.4 'Supreme',sans-serif;color:var(--tekst);background:#FFFFFF;border:1px solid var(--gedempt);border-radius:var(--r);padding:11px 12px;width:100%}
.rdk__veld-kort select{width:auto;min-width:150px}
.rdk__uitkomst{position:sticky;top:96px;border-top:3px solid var(--accent);padding-top:20px}
.rdk__totaal{margin:0 0 20px!important}
.rdk__bedrag{display:block;font-family:var(--kop);font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.03em}
.rdk__opbouw{width:100%;border-collapse:collapse;margin-bottom:18px}
.rdk__opbouw caption{text-align:left;font-weight:500;padding-bottom:8px}
.rdk__opbouw th,.rdk__opbouw td{text-align:left;font-weight:400;padding:9px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.rdk__opbouw td{text-align:right;white-space:nowrap;padding-left:12px}
.rdk__vergunning{font-size:var(--fs1);color:var(--gedempt)}
.rdk__vergunning.is-let{color:var(--tekst)}
.rdk__neem{margin-top:8px}
.rdk__dag{padding-top:var(--sectie);padding-bottom:var(--sectie)}
.rdk__dag-intro{max-width:52ch;color:var(--gedempt)}
.rdk__strook{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:24px clamp(var(--zij),4vw,56px) 12px;scroll-padding-inline:clamp(var(--zij),4vw,56px);scrollbar-width:thin}
.rdk__s{flex:0 0 clamp(240px,26vw,380px);scroll-snap-align:start}
.rdk__s--breed{flex-basis:clamp(280px,38vw,560px)}
.rdk__s img{width:100%;height:clamp(200px,22vw,300px);object-fit:cover;border-radius:var(--r)}
.rdk__s figcaption{font-size:var(--fs1);padding-top:10px;max-width:42ch}
.rdk__proj{padding-bottom:var(--sectie)}
.rdk__proj-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.rdk__proj-groot img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.rdk__proj-groot figcaption{padding-top:14px;max-width:60ch}
.rdk__proj-lijst{list-style:none;margin:0;padding:0}
.rdk__proj-lijst li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:18px;align-items:center;padding:14px 0;border-top:1px solid var(--tekst)}
.rdk__proj-lijst li:last-child{border-bottom:1px solid var(--tekst)}
.rdk__proj-lijst img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.rdk__proj-lijst p{margin:0!important;font-size:var(--fs1)}
.rdk__proj-lijst strong,.rdk__proj-groot strong{font-weight:500}
.rdk__proj-lijst strong{display:block;font-size:var(--fs2)}
.rdk__aanvraag{background:var(--opp)}
.rdk__aanvraag-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,96px);padding-top:var(--sectie);padding-bottom:var(--sectie);align-items:start}
.rdk__wie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);margin-bottom:18px}
.rdk__wie a{font-weight:500;text-decoration:none;display:inline-block;padding:4px 0}
.rdk__wie a:hover{color:var(--accent)}
.rdk__form{max-width:820px}
.rdk__keuze-mee{padding:12px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.rdk__keuze-mee a{display:inline-block;padding:2px 0}
.rdk__velden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 24px;margin:24px 0}
.rdk__veld{display:flex;flex-direction:column;gap:6px}
.rdk__veld>span{font-weight:500}
.rdk__veld--breed{grid-column:1/-1}
.rdk__veld.is-fout input{border-color:var(--accent);border-width:2px}
.rdk__fout{font-style:normal;font-size:var(--fs1);color:var(--accent)}
.rdk__klaar{margin-top:20px;padding:18px 20px;background:var(--bg);border-left:3px solid var(--accent);border-radius:var(--r)}
.rdk__klaar p{margin:0!important}
.rdk__voet{background:var(--tekst);color:var(--opp)}
.rdk__voet-in{padding-top:clamp(48px,6vw,88px);padding-bottom:28px}
.rdk__voet-groot{font-weight:500;font-size:var(--fs4);line-height:1.3;max-width:46ch;margin-bottom:40px!important}
.rdk__voet-regel{font-size:var(--fs1);color:var(--lijn);margin:0 0 6px!important}
.rdk__voet-regel a{display:inline-block;padding:3px 0}
@container (max-width:1080px){
  .rdk__nav{display:none}
  .rdk__menu-knop{display:block}
  .rdk__btn--head{margin-left:auto}
  .rdk__btn--head+.rdk__menu-knop{margin-left:0}
  .rdk__hero-in{grid-template-columns:minmax(0,1fr)}
  .rdk__reken,.rdk__krijg-in,.rdk__aanvraag-in{grid-template-columns:minmax(0,1fr)}
  .rdk__uitkomst{position:static}
  .rdk__krijg-foto img{aspect-ratio:16/10}
  .rdk__wie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;align-items:start}
}
@container (max-width:820px){
  .rdk__proj-raster{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:640px){
  .rdk__top-weg{display:none}
  .rdk__btn--head{display:none}
  .rdk__menu-knop{margin-left:auto!important}
  .rdk__h1{font-size:var(--fs5)}
  .rdk__h2{font-size:var(--fs4)}
  .rdk__lead{font-size:var(--fs2)}
  .rdk__bedrag{font-size:var(--fs5)}
  .rdk__voet-groot{font-size:var(--fs3)}
  .rdk__plaats span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rdk__lijsten,.rdk__velden{grid-template-columns:minmax(0,1fr)}
  .rdk__wie{grid-template-columns:minmax(0,1fr)}
  .rdk__groot img{min-height:260px}
}
@media (prefers-reduced-motion:reduce){.rdk *{transition:none!important;scroll-behavior:auto!important}.rdk.is-start .rdk__plaats i{transform:none}}

// Dienstpagina dakkapel · Bouwbedrijf Ruijter, 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('.rdk');if(!s)return;
var rustig=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var knop=s.querySelector('.rdk__menu-knop'),menu=s.querySelector('.rdk__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 plaatsen={amersfoort:['Amersfoort','94 dakkapellen sinds 2022. De laatste op 14 oktober aan de Leusderweg: trespa antraciet, 380 cm.'],
hoogland:['Hoogland','31 dakkapellen. Veel jaren-70-rijtjes aan de Zevenhuizerstraat, bijna allemaal 340 cm aan de achterkant.'],
leusden:['Leusden','47 dakkapellen. De laatste op 2 oktober in Leusden-Zuid: western red cedar, 300 cm.'],
soest:['Soest','38 dakkapellen, waarvan vijf in één week in de Kerkebuurt voor vijf buren tegelijk.'],
baarn:['Baarn','17 dakkapellen. In het beschermd dorpsgezicht vragen we de vergunning altijd zelf aan.'],
bunschoten:['Bunschoten','22 dakkapellen. Laatste plaatsing op 25 september aan de Oude Schans.'],
nijkerk:['Nijkerk','26 dakkapellen, de meeste in Corlaer: kunststof wit, 250 tot 300 cm.'],
woudenberg:['Woudenberg','12 dakkapellen. Zes kilometer buiten de rand, we komen er zonder meerprijs.'],
barneveld:['Barneveld','11 dakkapellen. Aan de rand van ons gebied: we plannen hier op dinsdag en donderdag.'],
zeist:['Zeist','8 dakkapellen. Alleen in Zeist-Noord en Den Dolder, daarbuiten verwijzen we door.']};
var pk=[].slice.call(s.querySelectorAll('.rdk__plaats')),naam=s.querySelector('.rdk__kaart-naam'),txt=s.querySelector('.rdk__kaart-txt');
pk.forEach(function(b){var p=b.getAttribute('data-p');b.setAttribute('aria-pressed',b.classList.contains('is-aan')?'true':'false');
  b.addEventListener('click',function(){pk.forEach(function(x){x.classList.remove('is-aan');x.setAttribute('aria-pressed','false');});b.classList.add('is-aan');b.setAttribute('aria-pressed','true');naam.textContent=plaatsen[p][0];txt.textContent=plaatsen[p][1];});});
if(!rustig&&'IntersectionObserver' in window){s.classList.add('is-start');pk.forEach(function(b,i){b.querySelector('i').style.transitionDelay=(i*70)+'ms';});
  var io=new IntersectionObserver(function(en){if(en[0].isIntersecting){s.classList.remove('is-start');io.disconnect();setTimeout(function(){pk.forEach(function(b){b.querySelector('i').style.transitionDelay='';});},1200);}},{threshold:.3});io.observe(s.querySelector('.rdk__kaart-vlak'));}
var f=s.querySelector('.rdk__reken'),tarief={kunststof:[1800,18.6,'kunststof'],trespa:[1800,21.4,'trespa'],ceder:[1800,23.8,'western red cedar']};
function eur(n){return '€ '+Math.round(n).toLocaleString('nl-NL');}
var keuze='';
function reken(){var b=+f.breedte.value,a=f.afw.value,t=tarief[a],r=+f.ramen.value;
  var basis=Math.round((t[0]+t[1]*b)/10)*10,extra=(r-2)*340,opt=(f.rolluik.checked?395*r:0)+(f.hor.checked?95*r:0),voor=f.kant.value==='voor',verg=voor?450:0;
  var tot=basis+extra+opt+verg;
  s.querySelector('.rdk__breedte-uit').textContent=b+' cm';
  s.querySelector('.rdk__bedrag').textContent=eur(tot);
  s.querySelector('.rdk__r-basis').textContent='Dakkapel '+b+' cm, '+t[2];s.querySelector('.rdk__v-basis').textContent=eur(basis);
  s.querySelector('.rdk__r-extra').hidden=!extra;s.querySelector('.rdk__r-ramen').textContent=(r-2)+' extra '+(r-2===1?'raam':'ramen');s.querySelector('.rdk__v-ramen').textContent=eur(extra);
  var on=[];if(f.rolluik.checked)on.push('rolluiken');if(f.hor.checked)on.push('horren');
  s.querySelector('.rdk__r-opt').hidden=!opt;s.querySelector('.rdk__r-optnaam').textContent=on.join(' en ').replace(/^./,function(c){return c.toUpperCase();})+' voor '+r+' ramen';s.querySelector('.rdk__v-opt').textContent=eur(opt);
  s.querySelector('.rdk__r-verg').hidden=!voor;
  var v=s.querySelector('.rdk__vergunning');v.classList.toggle('is-let',voor);
  v.textContent=voor?'Aan de straatkant heb je bijna altijd een omgevingsvergunning nodig. Wij vragen hem aan; reken op acht weken voordat we kunnen plaatsen.':'Aan de achterkant is een dakkapel tot 175 cm hoog meestal vergunningvrij. Wij checken het altijd bij het inmeten.';
  keuze=b+' cm, '+t[2]+', '+r+' ramen'+(on.length?', '+on.join(' en '):'')+(voor?', straatkant':'')+', '+eur(tot);
  s.querySelector('.rdk__keuze-txt').textContent=keuze;}
f.addEventListener('input',reken);f.addEventListener('change',reken);f.addEventListener('submit',function(e){e.preventDefault();});reken();
var form=s.querySelector('.rdk__form'),klaar=s.querySelector('.rdk__klaar');
function zet(veld,fout){var l=veld.closest('.rdk__veld');l.classList.toggle('is-fout',fout);l.querySelector('.rdk__fout').hidden=!fout;veld.setAttribute('aria-invalid',fout?'true':'false');}
var regels={naam:function(v){return v.trim().length>1;},tel:function(v){return v.replace(/[^0-9]/g,'').length>=10;},adres:function(v){return /^\s*\d{4}\s?[a-zA-Z]{2}\s*\d+/.test(v);}};
Object.keys(regels).forEach(function(n){form[n].addEventListener('blur',function(){if(form[n].value)zet(form[n],!regels[n](form[n].value));});});
form.addEventListener('submit',function(e){e.preventDefault();var eerste=null;
  Object.keys(regels).forEach(function(n){var fout=!regels[n](form[n].value);zet(form[n],fout);if(fout&&!eerste)eerste=form[n];});
  if(eerste){eerste.focus();return;}
  var d=new Date().getDay();s.querySelector('.rdk__klaar-dag').textContent=(d===5||d===6)?'maandag':'morgen';
  klaar.hidden=false;form.querySelector('button[type=submit]').hidden=true;klaar.focus();});
}
init(document.querySelector('.jouw-container'));