<!-- Oostveen Bouw · renovatie en verbouw, Delft · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="obr-site">
<div class="obr-top"><div class="obr-w obr-top__in">
  <span class="obr-top__item"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2h3l1.2 3.2-1.8 1.1a8 8 0 0 0 4.3 4.3l1.1-1.8L14 10v3a1 1 0 0 1-1 1A11 11 0 0 1 2 3a1 1 0 0 1 1-1z"/></svg><a href="#">015 760 2210</a></span>
  <span class="obr-top__item obr-hide-s">Ma t/m vr 7:30 tot 17:00 · za op afspraak</span>
  <span class="obr-top__item obr-top__score"><b>9,1</b> gemiddeld uit 214 beoordelingen</span>
</div></div>
<div class="obr-nav" role="banner"><div class="obr-w obr-nav__in">
  <a href="#" class="obr-logo" aria-label="Oostveen Bouw, home"><svg viewBox="0 0 36 36" aria-hidden="true"><rect x="1.5" y="1.5" width="33" height="33" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M7 26V14l11-6 11 6v12" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M7 30h22M7 28.5v3M29 28.5v3" stroke="#c4511f" stroke-width="1.5"/><rect x="15" y="18" width="6" height="8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg><span><b>Oostveen</b> Bouw</span></a>
  <ul class="obr-menu" data-obr-menu>
    <li><a href="#">Dakkapellen</a></li><li><a href="#">Aanbouw &amp; uitbouw</a></li><li><a href="#">Badkamers</a></li><li><a href="#">Projecten</a></li><li><a href="#">Werkwijze</a></li><li><a href="#">Over ons</a></li><li class="obr-menu__cta"><a href="#">Opname plannen</a></li>
  </ul>
  <button class="obr-burger" type="button" aria-label="Menu" aria-expanded="false" data-obr-burger><span></span><span></span></button>
</div></div>

<div class="obr-hero"><div class="obr-w obr-hero__in">
  <div class="obr-hero__txt">
    <p class="obr-label">Blad 01 · Verbouwen in Delft en Den Haag</p>
    <h1 class="obr-h1">Dakkapel, aanbouw of nieuwe badkamer. Eén vaste uitvoerder van eerste meting tot oplevering.</h1>
    <p class="obr-lead">Oostveen Bouw verbouwt sinds 1998 rijtjeshuizen, portiekwoningen en jaren-30-woningen in de regio Haaglanden. Vaste prijs per onderdeel, eigen timmerlieden en een planning die we op de dag nakomen.</p>
    <div class="obr-hero__cta"><a href="#" class="obr-btn">Gratis opname plannen</a><a href="#" class="obr-btn obr-btn--line">Bekijk 61 projecten</a></div>
  </div>
  <figure class="obr-hero__fig">
    <div class="obr-dim obr-dim--h"><span>3.600</span></div>
    <div class="obr-hero__img"><img src="https://neddev.com/lab-media/site-renovatie-1.webp" alt="Rijtjeshuis in Delft met nieuwe antraciet dakkapel" loading="lazy"><span class="obr-pin" style="left:46%;top:24%">A</span></div>
    <div class="obr-dim obr-dim--v"><span>1.450</span></div>
    <figcaption><b>A</b> Prefab dakkapel 3,60 m, Hof van Delft. Geplaatst in 1 dag, binnenzijde afgewerkt in 3 dagen.</figcaption>
  </figure>
</div>
<div class="obr-w"><dl class="obr-stamp">
  <div><dt>Opgericht</dt><dd>1998, Delft</dd></div>
  <div><dt>Projecten 2025</dt><dd>61 opgeleverd</dd></div>
  <div><dt>Garantie</dt><dd>6 jaar via BouwGarant</dd></div>
  <div><dt>Prijsvorm</dt><dd>Vaste prijs per post</dd></div>
  <div><dt>Eerstvolgende start</dt><dd>week 47</dd></div>
</dl></div></div>

<div class="obr-sec obr-sec--sheet"><div class="obr-w">
  <div class="obr-head"><p class="obr-label">Blad 02 · Stuklijst</p><h2 class="obr-h2">Wat we bouwen, met prijs en doorlooptijd</h2><p class="obr-head__p">Alle bedragen inclusief btw, materiaal, afvoer en afwerking. Na de opname krijgt u binnen 5 werkdagen een offerte per post.</p></div>
  <div class="obr-table" role="table">
    <div class="obr-row obr-row--h" role="row"><span role="columnheader">Code</span><span role="columnheader">Onderdeel</span><span role="columnheader">Wat zit erin</span><span role="columnheader">Doorlooptijd</span><span role="columnheader">Vanaf</span></div>
    <a href="#" class="obr-row" role="row"><span class="obr-code">D-01</span><span class="obr-row__t"><svg viewBox="0 0 48 32" aria-hidden="true"><path d="M2 30 24 6l22 24"/><path d="M18 13h16v9H25"/><path d="M28 13v9"/></svg>Dakkapel prefab</span><span>Breedte 2 tot 6 m, kunststof kozijnen, HR++ glas, binnenkant gestuct en afgekit</span><span class="obr-num">1 dag plaatsen</span><span class="obr-num obr-price">€ 8.950</span></a>
    <a href="#" class="obr-row" role="row"><span class="obr-code">A-02</span><span class="obr-row__t"><svg viewBox="0 0 48 32" aria-hidden="true"><path d="M2 30V10h22v20"/><path d="M24 16h20v14"/><path d="M30 22h8v8"/></svg>Aanbouw of uitbouw</span><span>Tot 4 m diep, fundering op palen of op staal, schuifpui, vloerverwarming, aansluiting keuken</span><span class="obr-num">5 tot 7 weken</span><span class="obr-num obr-price">€ 38.500</span></a>
    <a href="#" class="obr-row" role="row"><span class="obr-code">B-03</span><span class="obr-row__t"><svg viewBox="0 0 48 32" aria-hidden="true"><path d="M4 18h40v6a6 6 0 0 1-6 6H10a6 6 0 0 1-6-6z"/><path d="M10 18V5a3 3 0 0 1 6 0"/></svg>Badkamer compleet</span><span>Slopen, leidingwerk, inloopdouche, tegelwerk tot plafond, sanitair en ventilatie</span><span class="obr-num">12 werkdagen</span><span class="obr-num obr-price">€ 14.750</span></a>
    <a href="#" class="obr-row" role="row"><span class="obr-code">Z-04</span><span class="obr-row__t"><svg viewBox="0 0 48 32" aria-hidden="true"><path d="M2 30 24 4l22 26"/><path d="M12 19h24"/><path d="M20 30v-6h8v6"/></svg>Zolder als slaapkamer</span><span>Vaste trap, isolatie dakbeschot, knieschotten met kasten, elektra, Velux of dakkapel</span><span class="obr-num">3 weken</span><span class="obr-num obr-price">€ 11.200</span></a>
    <a href="#" class="obr-row" role="row"><span class="obr-code">K-05</span><span class="obr-row__t"><svg viewBox="0 0 48 32" aria-hidden="true"><rect x="8" y="3" width="32" height="27"/><path d="M24 3v27M8 16h32"/></svg>Kozijnen vervangen</span><span>Hardhouten of kunststof kozijnen, HR++ of triple glas, binnen- en buitenafwerking</span><span class="obr-num">2 tot 4 dagen</span><span class="obr-num obr-price">€ 1.180 <small>per stuk</small></span></a>
  </div>
</div></div>

<div class="obr-sec"><div class="obr-w obr-proj">
  <div class="obr-proj__ba">
    <div class="obr-ba" data-obr-ba>
      <img src="https://neddev.com/lab-media/site-renovatie-2.webp" alt="Badkamer voor de verbouwing" class="obr-ba__img" loading="lazy">
      <div class="obr-ba__after" data-obr-after><img src="https://neddev.com/lab-media/site-renovatie-3.webp" alt="Dezelfde badkamer na de verbouwing" loading="lazy"></div>
      <span class="obr-ba__tag obr-ba__tag--l">Voor · 1984</span><span class="obr-ba__tag obr-ba__tag--r">Na · juni 2026</span>
      <div class="obr-ba__handle" data-obr-handle><span></span></div>
      <input type="range" min="0" max="100" value="52" class="obr-ba__range" aria-label="Schuif tussen voor en na" data-obr-range>
    </div>
  </div>
  <div class="obr-proj__txt">
    <p class="obr-label">Blad 03 · Project 2026-031</p>
    <h2 class="obr-h2">Badkamer Voorhof, Delft</h2>
    <p>Bad eruit, inloopdouche erin. De afvoer is verlegd naar de bestaande standleiding, waardoor de vloer maar 4 cm hoger werd en de deur kon blijven zitten.</p>
    <dl class="obr-spec">
      <div><dt>Oppervlak</dt><dd>5,8 m²</dd></div><div><dt>Werkdagen</dt><dd>11</dd></div><div><dt>Aanneemsom</dt><dd>€ 16.340</dd></div><div><dt>Meerwerk</dt><dd>€ 0</dd></div>
    </dl>
    <a href="#" class="obr-link">Lees het projectverslag</a>
  </div>
</div>
<div class="obr-w obr-proj2">
  <a href="#" class="obr-pcard obr-pcard--wide"><div class="obr-pcard__img"><img src="https://neddev.com/lab-media/site-renovatie-4.webp" alt="Aanbouw met stalen schuifpui in Den Haag" loading="lazy"></div><div class="obr-pcard__meta"><span class="obr-code">2026-018</span><b>Aanbouw 3,5 m, Bomen- en Bloemenbuurt, Den Haag</b><span>Stalen schuifpui, fundering op 6 schroefpalen, 6 weken bouwtijd</span></div></a>
  <a href="#" class="obr-pcard"><div class="obr-pcard__img"><img src="https://neddev.com/lab-media/site-renovatie-5.webp" alt="Timmerman meet houten regelwerk op met duimstok" loading="lazy"></div><div class="obr-pcard__meta"><span class="obr-code">2026-024</span><b>Zolderverbouwing, Rijswijk</b><span>Twee slaapkamers, vaste trap, 3 weken</span></div></a>
  <div class="obr-pcount"><span class="obr-pcount__n">61</span><span>projecten opgeleverd in 2025, waarvan 38 in Delft en 17 in Den Haag.</span><a href="#" class="obr-link">Alle projecten</a></div>
</div></div>

<div class="obr-sec obr-sec--ink"><div class="obr-w">
  <div class="obr-head obr-head--inv"><p class="obr-label">Blad 04 · Planning</p><h2 class="obr-h2">Van eerste meting tot oplevering</h2><p class="obr-head__p">Voorbeeld voor een dakkapel van 3,60 m. Een aanbouw kent dezelfde stappen, met daartussen 4 tot 8 weken voor een eventuele vergunning.</p></div>
  <ol class="obr-steps">
    <li style="--x:0"><span class="obr-steps__wk">wk 0</span><b>Opname bij u thuis</b><p>Uitvoerder Jeroen meet in, maakt foto's en checkt via het Omgevingsloket of een vergunning nodig is.</p></li>
    <li style="--x:1"><span class="obr-steps__wk">wk 1</span><b>Offerte per post</b><p>Binnen 5 werkdagen, met tekening op schaal 1:50 en een vaste prijs.</p></li>
    <li style="--x:2"><span class="obr-steps__wk">wk 2</span><b>Akkoord en inmeting</b><p>U kiest kleur en kozijn. We leggen de startweek vast in het contract.</p></li>
    <li style="--x:3"><span class="obr-steps__wk">wk 8</span><b>Plaatsing</b><p>Kraan om 7:30, dakkapel dicht voor 15:00. Uw zolder blijft droog.</p></li>
    <li style="--x:4"><span class="obr-steps__wk">wk 9</span><b>Oplevering</b><p>Samen lopen we de punten na. Restpunten lossen we binnen 10 werkdagen op.</p></li>
  </ol>
</div></div>

<div class="obr-sec obr-sec--sheet"><div class="obr-w obr-split">
  <div class="obr-gar">
    <p class="obr-label">Blad 05 · Zekerheid</p>
    <h2 class="obr-h2">6 jaar garantie, ook als wij er niet meer zijn</h2>
    <p>We zijn aangesloten bij BouwGarant. Dat betekent: een vaste regeling voor garantie en geschillen, en uw aanbetaling is beschermd. Gaat een aangesloten bedrijf tijdens de bouw failliet, dan zorgt de regeling voor afbouw door een ander bedrijf.</p>
    <ul class="obr-checks">
      <li>Aanbetaling maximaal 10 procent, de rest in termijnen na gereed werk</li>
      <li>Constructieve berekening door een extern constructeur bij elke aanbouw</li>
      <li>Opleverrapport met foto's van leidingwerk voordat het dicht gaat</li>
      <li>Eén aanspreekpunt: uw uitvoerder heeft een eigen 06-nummer</li>
    </ul>
  </div>
  <div class="obr-marks">
    <div class="obr-mark"><span class="obr-mark__k">BouwGarant</span><span>Garantie- en waarborgregeling, lidnummer 21.4473</span></div>
    <div class="obr-mark"><span class="obr-mark__k">Bouwend Nederland</span><span>Lid sinds 2004</span></div>
    <div class="obr-mark"><span class="obr-mark__k">VCA*</span><span>Veiligheid op de bouwplaats, certificaat tot 2028</span></div>
    <div class="obr-mark"><span class="obr-mark__k">Erkend leerbedrijf</span><span>SBB, 2 leerling-timmerlieden per jaar</span></div>
  </div>
</div></div>

<div class="obr-sec"><div class="obr-w obr-area">
  <div class="obr-area__txt">
    <p class="obr-label">Blad 06 · Werkgebied</p>
    <h2 class="obr-h2">Binnen 25 minuten vanaf onze werkplaats</h2>
    <p>We werken bewust in een kleine straal. Dan kan de uitvoerder elke dag langs en staat er nooit een bus een halve dag in de file.</p>
    <form class="obr-pc" data-obr-pc onsubmit="return false"><label for="obr-pc-in">Werken we bij u?</label><div class="obr-pc__row"><input id="obr-pc-in" inputmode="numeric" maxlength="4" placeholder="Postcode, bv. 2611"><button type="submit" class="obr-btn">Check</button></div><p class="obr-pc__out" data-obr-pcout aria-live="polite">Vul de 4 cijfers van uw postcode in.</p></form>
  </div>
  <div class="obr-map">
    <svg viewBox="0 0 520 380" role="img" aria-label="Schematische kaart van het werkgebied rond Delft">
      <defs><pattern id="obr-g" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M20 0H0v20" fill="none" stroke="rgba(28,40,48,.08)"/></pattern></defs>
      <rect width="520" height="380" fill="url(#obr-g)"/>
      <path d="M140 0 C200 90 250 170 300 240 S380 340 410 380" fill="none" stroke="rgba(47,93,120,.35)" stroke-width="5"/><path d="M60 40 C120 140 150 250 170 380" fill="none" stroke="rgba(47,93,120,.35)" stroke-width="5"/><text x="402" y="356" class="obr-map__r">A13</text><text x="176" y="370" class="obr-map__r">A4</text>
      <circle cx="268" cy="214" r="150" fill="rgba(196,81,31,.06)" stroke="#c4511f" stroke-dasharray="5 6"/>
      <path d="M268 214H418" stroke="#c4511f"/><text x="330" y="207" class="obr-map__s">r = 15 km</text>
      <g class="obr-map__p"><circle cx="268" cy="214" r="7"/><text x="280" y="234">Delft · werkplaats</text></g>
      <g class="obr-map__p"><circle cx="186" cy="112" r="5"/><text x="120" y="98">Den Haag</text></g>
      <g class="obr-map__p"><circle cx="218" cy="156" r="5"/><text x="140" y="170">Rijswijk</text></g>
      <g class="obr-map__p"><circle cx="350" cy="152" r="5"/><text x="362" y="148">Pijnacker-Nootdorp</text></g>
      <g class="obr-map__p"><circle cx="392" cy="96" r="5"/><text x="404" y="92">Zoetermeer</text></g>
      <g class="obr-map__p"><circle cx="158" cy="232" r="5"/><text x="70" y="252">Wateringen</text></g>
      <g class="obr-map__p"><circle cx="246" cy="300" r="5"/><text x="258" y="318">Midden-Delfland</text></g>
      <g class="obr-map__p"><circle cx="128" cy="300" r="5"/><text x="80" y="332">Westland</text></g>
    </svg>
    <table class="obr-areat"><thead><tr><th>Plaats</th><th>Rijtijd</th><th>Projecten sinds 2019</th></tr></thead><tbody>
      <tr><td>Delft</td><td>6 min</td><td>214</td></tr><tr><td>Den Haag</td><td>18 min</td><td>96</td></tr><tr><td>Rijswijk</td><td>12 min</td><td>41</td></tr><tr><td>Pijnacker-Nootdorp</td><td>14 min</td><td>33</td></tr><tr><td>Zoetermeer</td><td>22 min</td><td>19</td></tr></tbody></table>
  </div>
</div></div>

<div class="obr-sec obr-sec--sheet"><div class="obr-w">
  <div class="obr-head"><p class="obr-label">Blad 07 · Beoordelingen</p><h2 class="obr-h2">Wat bewoners ervan zeggen</h2></div>
  <div class="obr-rev">
    <blockquote class="obr-q obr-q--big"><p>Ze zeiden dag 1 dakkapel dicht, en om kwart over twee zat hij erop. Jeroen belde ons elke vrijdag met wat er de week erna ging gebeuren. Het verschil met de vorige aannemer was enorm.</p><footer><b>Mirjam en Thijs Bakker</b><span>Delft, Wippolder · dakkapel en zolder</span><span class="obr-q__s">10</span></footer></blockquote>
    <blockquote class="obr-q"><p>Aanbouw van 3 meter. Eindafrekening was precies de offerte, op de meerkosten voor ons eigen extra stopcontact na.</p><footer><b>Karim el Idrissi</b><span>Den Haag, Bezuidenhout</span><span class="obr-q__s">9</span></footer></blockquote>
    <blockquote class="obr-q"><p>Badkamer in 11 werkdagen. Netjes afgeplakt, elke dag gestofzuigd. De tegelzetter was echt een vakman.</p><footer><b>Ans Verhoef</b><span>Rijswijk, Te Werve</span><span class="obr-q__s">9</span></footer></blockquote>
  </div>
</div></div>

<div class="obr-sec"><div class="obr-w obr-nf">
  <div class="obr-news">
    <div class="obr-head"><p class="obr-label">Blad 08 · Kennisbank</p><h2 class="obr-h2">Nieuws en uitleg</h2></div>
    <a href="#" class="obr-art"><time datetime="2026-09-12">12 sep 2026</time><b>Vergunningvrij uitbouwen aan de achterkant: wat mag er sinds de Omgevingswet?</b><span>Vergunning</span></a>
    <a href="#" class="obr-art"><time datetime="2026-08-28">28 aug 2026</time><b>Dakkapel aan de voorkant in Delft: zo kijkt de gemeente naar beschermd stadsgezicht</b><span>Dakkapellen</span></a>
    <a href="#" class="obr-art"><time datetime="2026-07-03">3 jul 2026</time><b>Wat kost een badkamer van 6 m² in 2026? Een eerlijke opbouw van onze prijs</b><span>Badkamers</span></a>
    <a href="#" class="obr-art"><time datetime="2026-05-19">19 mei 2026</time><b>Palen of fundering op staal? Waarom de grond in Den Haag het verschil maakt</b><span>Aanbouw</span></a>
  </div>
  <div class="obr-faq">
    <div class="obr-head"><p class="obr-label">Blad 09 · Vragen</p><h2 class="obr-h2">Veelgestelde vragen</h2></div>
    <details class="obr-qa" open><summary>Heb ik een vergunning nodig voor een dakkapel?</summary><p>Aan de achterkant meestal niet, mits hij aan de regels voor vergunningvrij bouwen voldoet en de woning geen monument is of in beschermd stadsgezicht staat. Aan de voorkant bijna altijd wel. Bij de opname checken we dit samen in het Omgevingsloket.</p></details>
    <details class="obr-qa"><summary>Kunnen we thuis blijven wonen tijdens de verbouwing?</summary><p>Ja, bij een dakkapel en een aanbouw vrijwel altijd. Bij een aanbouw sluiten we de oude achtergevel pas als de nieuwe ruimte wind- en waterdicht is. Bij een badkamer regelen we op verzoek een tijdelijke douche.</p></details>
    <details class="obr-qa"><summary>Wat gebeurt er bij meerwerk?</summary><p>Meerwerk doen we alleen na schriftelijk akkoord met prijs vooraf. In 2025 kwam gemiddeld 2,3 procent van de aanneemsom uit meerwerk, meestal op verzoek van de klant.</p></details>
    <details class="obr-qa"><summary>Hoe ver vooruit zitten jullie vol?</summary><p>Op dit moment starten we nieuwe dakkapellen vanaf week 47 en aanbouwen vanaf januari 2027.</p></details>
  </div>
</div></div>

<div class="obr-sec obr-sec--ink"><div class="obr-w obr-contact">
  <div>
    <p class="obr-label">Blad 10 · Contact</p>
    <h2 class="obr-h2">Plan een opname, gratis en vrijblijvend</h2>
    <p>Een opname duurt ongeveer 45 minuten. U krijgt binnen 5 werkdagen een offerte met tekening.</p>
    <dl class="obr-cdl"><div><dt>Telefoon</dt><dd>015 760 2210</dd></div><div><dt>Mail</dt><dd>werk@oostveenbouw.voorbeeld.nl</dd></div><div><dt>Werkplaats</dt><dd>Kanaalweg 14, 2628 EB Delft</dd></div><div><dt>Open</dt><dd>Ma t/m vr 7:30 tot 17:00</dd></div></dl>
  </div>
  <form class="obr-form" onsubmit="return false">
    <label>Naam<input type="text" placeholder="Voor- en achternaam"></label>
    <label>Telefoon<input type="tel" placeholder="06 ..."></label>
    <label>Postcode<input type="text" placeholder="2611 AB"></label>
    <label>Soort klus<select><option>Dakkapel</option><option>Aanbouw of uitbouw</option><option>Badkamer</option><option>Zolder</option><option>Kozijnen</option><option>Iets anders</option></select></label>
    <label class="obr-form__full">Toelichting<textarea rows="3" placeholder="Bijvoorbeeld: dakkapel aan de achterkant, breedte ongeveer 3 meter"></textarea></label>
    <button class="obr-btn obr-form__full" type="submit">Verstuur aanvraag</button>
  </form>
</div></div>

<div class="obr-foot" role="contentinfo"><div class="obr-w">
  <div class="obr-foot__cols">
    <div class="obr-foot__brand"><a href="#" class="obr-logo obr-logo--inv"><svg viewBox="0 0 36 36" aria-hidden="true"><rect x="1.5" y="1.5" width="33" height="33" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M7 26V14l11-6 11 6v12" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M7 30h22" stroke="#c4511f" stroke-width="1.5"/><rect x="15" y="18" width="6" height="8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg><span><b>Oostveen</b> Bouw</span></a><p>Renovatie en verbouw in Delft, Den Haag en omstreken. Familiebedrijf, 14 vaste mensen in dienst.</p></div>
    <div><h3>Diensten</h3><a href="#">Dakkapellen</a><a href="#">Aanbouw en uitbouw</a><a href="#">Badkamers</a><a href="#">Zolderverbouwing</a><a href="#">Kozijnen</a></div>
    <div><h3>Werkgebied</h3><a href="#">Delft</a><a href="#">Den Haag</a><a href="#">Rijswijk</a><a href="#">Pijnacker-Nootdorp</a><a href="#">Zoetermeer</a></div>
    <div><h3>Bedrijf</h3><a href="#">Over ons</a><a href="#">Werkwijze</a><a href="#">Projecten</a><a href="#">Vacatures (2)</a><a href="#">Contact</a></div>
  </div>
  <div class="obr-foot__legal"><span>Oostveen Bouw B.V. · Kanaalweg 14, 2628 EB Delft</span><span>KvK 27184402 · BTW NL8173.44.902.B01</span><span>BouwGarant · Bouwend Nederland · VCA* · Erkend leerbedrijf SBB</span><span>Algemene voorwaarden · Privacy</span></div>
</div></div>
</div>
</div>

/* Oostveen Bouw · renovatie en verbouw, Delft · NedDev · eigen werk. */
/* fonts (Fontshare): cabinet-grotesk@500,700,800 + general-sans@400,500,600 + jet-brains-mono@400,500 */
.obr-site{--paper:#f1eee6;--sheet:#faf8f3;--ink:#1c2830;--mute:#56626b;--line:rgba(28,40,48,.16);--acc:#c4511f;--blue:#2f5d78;container-type:inline-size;background:var(--paper);color:var(--ink);font:400 16px/1.6 'General Sans',sans-serif;-webkit-font-smoothing:antialiased}
.obr-site *{box-sizing:border-box}
.obr-site a{color:inherit}
.obr-w{max-width:1200px;margin:0 auto;padding:0 32px}
.obr-label{font:500 11px/1.2 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:0 0 14px}
.obr-h1,.obr-h2{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;letter-spacing:-.02em;color:inherit;margin:0}
.obr-h1{font-size:46px;line-height:1.04;max-width:16ch}
.obr-h2{font-size:34px;line-height:1.1;max-width:22ch}
.obr-num{font-variant-numeric:tabular-nums}
.obr-btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff!important;font:600 15px/1 'General Sans',sans-serif;padding:15px 22px;border:0;border-radius:2px;text-decoration:none;cursor:pointer;transition:background .2s}
.obr-btn:hover{background:#a8441a}
.obr-btn--line{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink)}
.obr-btn--line:hover{background:var(--ink);color:#fff!important}
.obr-link{font:600 14px/1 'General Sans',sans-serif;text-decoration:none;border-bottom:1.5px solid var(--acc);padding-bottom:4px;display:inline-block}
.obr-link:hover{color:var(--acc)}
.obr-code{font:500 12px/1 'JetBrains Mono',monospace;color:var(--acc);letter-spacing:.04em}
/* topbar + nav */
.obr-top{background:var(--ink);color:#d9dcd8;font-size:13px}
.obr-top__in{display:flex;gap:28px;align-items:center;min-height:38px}
.obr-top__item{display:inline-flex;align-items:center;gap:8px}
.obr-top__item svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.obr-top__item a{text-decoration:none;color:#fff;font-weight:600}
.obr-top__score{margin-left:auto}.obr-top__score b{color:#fff;font-variant-numeric:tabular-nums}
.obr-nav{position:sticky;top:0;z-index:20;background:var(--sheet);border-bottom:1px solid var(--line)}
.obr-nav__in{display:flex;align-items:center;gap:24px;min-height:72px}
.obr-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 20px/1 'Cabinet Grotesk',sans-serif;letter-spacing:-.01em}
.obr-logo b{font-weight:800}
.obr-logo svg{width:34px;height:34px}
.obr-menu{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.obr-menu a{display:block;padding:10px 12px;font-size:15px;font-weight:500;text-decoration:none;position:relative}
.obr-menu a::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.obr-menu a:hover::after{transform:scaleX(1)}
.obr-menu__cta a{background:var(--ink);color:#fff;border-radius:2px;margin-left:10px;padding:12px 18px}
.obr-menu__cta a::after{display:none}.obr-menu__cta a:hover{background:var(--acc)}
.obr-burger{display:none;margin-left:auto;width:44px;height:44px;border:1.5px solid var(--ink);background:none;border-radius:2px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;padding:0 11px}
.obr-burger span{display:block;height:1.5px;background:var(--ink);transition:transform .2s}
.obr-burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.obr-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
/* hero met bouwtekening-raster */
.obr-hero{background-color:var(--sheet);background-image:linear-gradient(rgba(47,93,120,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(47,93,120,.10) 1px,transparent 1px),linear-gradient(rgba(47,93,120,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(47,93,120,.045) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;border-bottom:1px solid var(--line);padding:56px 0 0}
.obr-hero__in{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:start}
.obr-hero__txt{padding-top:18px}
.obr-lead{font-size:18px;line-height:1.6;color:var(--mute);max-width:46ch;margin:22px 0 30px}
.obr-hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.obr-hero__fig{margin:0;display:grid;grid-template-columns:1fr 34px;grid-template-rows:34px auto auto;gap:0}
.obr-hero__img{grid-column:1;grid-row:2;position:relative;aspect-ratio:1408/900;overflow:hidden;background:#ddd}
.obr-hero__img img{width:100%;height:100%;object-fit:cover;display:block}
.obr-pin{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--acc);color:#fff;font:600 13px/30px 'JetBrains Mono',monospace;text-align:center;box-shadow:0 0 0 6px rgba(196,81,31,.25)}
.obr-hero__fig figcaption{grid-column:1/-1;grid-row:3;font-size:13px;color:var(--mute);padding:12px 0 0}
.obr-hero__fig figcaption b{font-family:'JetBrains Mono',monospace;color:var(--acc);margin-right:6px}
.obr-dim{position:relative;color:var(--blue);font:500 12px/1 'JetBrains Mono',monospace}
.obr-dim--h{grid-column:1;grid-row:1;border-bottom:1px solid currentColor;margin:0 0 12px;height:22px}
.obr-dim--h::before,.obr-dim--h::after{content:'';position:absolute;bottom:-7px;width:1px;height:13px;background:currentColor;transform:rotate(45deg)}
.obr-dim--h::before{left:0}.obr-dim--h::after{right:0}
.obr-dim--h span{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);background:var(--sheet);padding:0 8px}
.obr-dim--v{grid-column:2;grid-row:2;border-left:1px solid currentColor;margin-left:14px}
.obr-dim--v::before,.obr-dim--v::after{content:'';position:absolute;left:-7px;width:13px;height:1px;background:currentColor;transform:rotate(45deg)}
.obr-dim--v::before{top:0}.obr-dim--v::after{bottom:0}
.obr-dim--v span{position:absolute;top:50%;left:-1px;transform:translate(-50%,-50%) rotate(-90deg);background:var(--sheet);padding:0 8px;white-space:nowrap}
.obr-stamp{display:grid;grid-template-columns:repeat(5,1fr);margin:48px 0 0;border:1.5px solid var(--ink);border-bottom:0;background:var(--sheet)}
.obr-stamp div{padding:14px 18px;border-left:1px solid var(--line)}
.obr-stamp div:first-child{border-left:0}
.obr-stamp dt{font:500 10.5px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-bottom:8px}
.obr-stamp dd{margin:0;font:700 17px/1.2 'Cabinet Grotesk',sans-serif;font-variant-numeric:tabular-nums}
/* secties */
.obr-sec{padding:68px 0}
.obr-sec--sheet{background:var(--sheet);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.obr-sec--ink{background:var(--ink);color:#eef0ec}
.obr-sec--ink .obr-label{color:#e98a5c}
.obr-head{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:end;margin-bottom:44px}
.obr-head .obr-label{grid-column:1/-1}
.obr-head__p{color:var(--mute);margin:0;max-width:52ch}
.obr-head--inv .obr-head__p{color:#aeb6ba}
/* stuklijst */
.obr-table{border-top:1.5px solid var(--ink)}
.obr-row{display:grid;grid-template-columns:72px 1.1fr 2fr 130px 120px;gap:24px;align-items:center;padding:16px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .2s}
a.obr-row:hover{background:#f3efe5}
a.obr-row:hover .obr-row__t{color:var(--acc)}
.obr-row--h{font:500 10.5px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);padding:12px 8px}
.obr-row>span{font-size:15px;color:var(--mute)}
.obr-row .obr-row__t{display:flex;align-items:center;gap:14px;font:700 19px/1.2 'Cabinet Grotesk',sans-serif;color:var(--ink);transition:color .2s}
.obr-row__t svg{width:44px;height:30px;flex:none;fill:none;stroke:var(--blue);stroke-width:1.4}
.obr-row .obr-price{font:700 19px/1.1 'Cabinet Grotesk',sans-serif;color:var(--ink);text-align:right}
.obr-price small{display:block;font:400 12px/1.4 'General Sans',sans-serif;color:var(--mute)}
.obr-row--h span:last-child{text-align:right}
/* projecten */
.obr-proj{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;align-items:center}
.obr-ba{position:relative;aspect-ratio:900/560;overflow:hidden;background:#ccc;user-select:none;--p:52%}
.obr-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.obr-ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.obr-ba__handle{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.obr-ba__handle span{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.obr-ba__handle span::before,.obr-ba__handle span::after{content:'';position:absolute;top:50%;width:8px;height:8px;border:solid var(--ink);border-width:0 0 1.5px 1.5px}
.obr-ba__handle span::before{left:11px;transform:translateY(-50%) rotate(45deg)}
.obr-ba__handle span::after{right:11px;transform:translateY(-50%) rotate(-135deg)}
.obr-ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.obr-ba__tag{position:absolute;bottom:14px;background:var(--ink);color:#fff;font:500 11px/1 'JetBrains Mono',monospace;padding:7px 10px;text-transform:uppercase;letter-spacing:.06em}
.obr-ba__tag--l{left:14px}.obr-ba__tag--r{right:14px;background:var(--acc)}
.obr-proj__txt p{color:var(--mute);margin:18px 0 24px}
.obr-spec{display:grid;grid-template-columns:1fr 1fr;margin:0 0 28px;border-top:1px solid var(--line)}
.obr-spec div{padding:14px 0;border-bottom:1px solid var(--line)}
.obr-spec div:nth-child(odd){padding-right:16px}
.obr-spec dt{font:500 10.5px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.obr-spec dd{margin:6px 0 0;font:700 24px/1 'Cabinet Grotesk',sans-serif;font-variant-numeric:tabular-nums}
.obr-proj2{display:grid;grid-template-columns:1.5fr 1fr .8fr;gap:24px;margin-top:44px;align-items:start}
.obr-pcard{text-decoration:none;display:block}
.obr-pcard__img{overflow:hidden;aspect-ratio:4/3;background:#ccc}
.obr-pcard--wide .obr-pcard__img{aspect-ratio:16/9}
.obr-pcard__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.obr-pcard:hover img{transform:scale(1.03)}
.obr-pcard__meta{display:grid;gap:6px;padding:16px 0 0}
.obr-pcard__meta b{font:700 18px/1.25 'Cabinet Grotesk',sans-serif}
.obr-pcard:hover b{color:var(--acc)}
.obr-pcard__meta span:last-child{font-size:14px;color:var(--mute)}
.obr-pcount{border-top:1.5px solid var(--ink);padding-top:18px;display:grid;gap:14px;font-size:15px;color:var(--mute);align-content:start}
.obr-pcount__n{font:800 76px/.9 'Cabinet Grotesk',sans-serif;color:var(--ink);letter-spacing:-.03em}
.obr-pcount .obr-link{justify-self:start;color:var(--ink)}
/* stappen op een maatlijn */
.obr-steps{list-style:none;margin:0;padding:34px 0 0;display:grid;grid-template-columns:repeat(5,1fr);position:relative;border-top:1px solid rgba(238,240,236,.5)}
.obr-steps::before,.obr-steps::after{content:'';position:absolute;top:-7px;width:1px;height:13px;background:#eef0ec;transform:rotate(45deg)}
.obr-steps::before{left:0}.obr-steps::after{right:0}
.obr-steps li{position:relative;padding:0 22px 0 0}
.obr-steps li::before{content:'';position:absolute;top:-41px;left:0;width:1px;height:13px;background:#e98a5c;transform:rotate(45deg)}
.obr-steps__wk{position:absolute;top:-62px;left:0;font:500 12px/1 'JetBrains Mono',monospace;color:#e98a5c;font-variant-numeric:tabular-nums}
.obr-steps b{display:block;font:700 19px/1.25 'Cabinet Grotesk',sans-serif;margin-bottom:8px}
.obr-steps p{margin:0;font-size:14.5px;line-height:1.55;color:#aeb6ba}
.obr-sec--ink .obr-head{margin-bottom:76px}
/* garantie */
.obr-split{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:start}
.obr-gar>p{color:var(--mute);margin:20px 0 24px;max-width:56ch}
.obr-checks{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.obr-checks li{padding:13px 0 13px 30px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.obr-checks li::before{content:'';position:absolute;left:2px;top:19px;width:12px;height:6px;border:solid var(--acc);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.obr-marks{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink)}
.obr-mark{padding:24px 22px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:grid;gap:8px;font-size:13.5px;color:var(--mute);min-height:150px;align-content:space-between}
.obr-mark:nth-child(2n){border-right:0}.obr-mark:nth-child(n+3){border-bottom:0}
.obr-mark__k{font:800 22px/1.1 'Cabinet Grotesk',sans-serif;color:var(--ink);letter-spacing:-.01em}
.obr-mark:first-child{background:var(--ink);color:#aeb6ba}.obr-mark:first-child .obr-mark__k{color:#fff}
/* werkgebied */
.obr-area{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.obr-area__txt>p{color:var(--mute);margin:20px 0 28px}
.obr-pc label{display:block;font:500 11px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.obr-pc__row{display:flex;gap:8px}
.obr-pc input{flex:1;min-width:0;font:500 16px/1 'General Sans',sans-serif;padding:14px 14px;border:1.5px solid var(--ink);border-radius:2px;background:var(--sheet);color:var(--ink)}
.obr-pc input:focus{outline:2px solid var(--acc);outline-offset:1px}
.obr-pc__out{font-size:14px;color:var(--mute);margin:12px 0 0;min-height:22px}
.obr-pc__out.is-ok{color:#2d6a3e;font-weight:600}.obr-pc__out.is-no{color:var(--acc);font-weight:600}
.obr-map{border:1.5px solid var(--ink);background:var(--sheet)}
.obr-map svg{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.obr-map__p circle{fill:var(--ink)}.obr-map__p:first-of-type circle{fill:var(--acc)}
.obr-map text{font:500 12px 'General Sans',sans-serif;fill:var(--ink)}
.obr-map .obr-map__r{font:600 11px 'JetBrains Mono',monospace;fill:var(--blue)}
.obr-map .obr-map__s{font:500 11px 'JetBrains Mono',monospace;fill:var(--acc)}
.obr-areat{width:100%;border-collapse:collapse;font-size:14px}
.obr-areat th{font:500 10.5px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);text-align:left;padding:12px 18px;border-bottom:1px solid var(--line)}
.obr-areat td{padding:10px 18px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.obr-areat tr:last-child td{border-bottom:0}
.obr-areat td:nth-child(n+2),.obr-areat th:nth-child(n+2){text-align:right}
/* reviews */
.obr-rev{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:24px}
.obr-q{margin:0;padding:28px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.obr-q--big{grid-row:1/3;background:var(--ink);color:#eef0ec;padding:40px}
.obr-q p{margin:0;font-size:16px;line-height:1.6}
.obr-q--big p{font:500 26px/1.35 'Cabinet Grotesk',sans-serif;letter-spacing:-.01em}
.obr-q footer{display:grid;grid-template-columns:1fr auto;gap:2px 16px;font-size:13.5px;color:var(--mute)}
.obr-q--big footer{color:#aeb6ba}
.obr-q footer b{font-weight:600;color:inherit;grid-column:1}
.obr-q--big footer b{color:#fff}
.obr-q footer span{grid-column:1}
.obr-q__s{grid-column:2!important;grid-row:1/3;align-self:center;font:800 30px/1 'Cabinet Grotesk',sans-serif;color:var(--acc);font-variant-numeric:tabular-nums}
.obr-q__s::after{content:'/10';font-size:13px;font-weight:500;color:var(--mute);margin-left:2px}
/* nieuws + faq */
.obr-nf{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.obr-nf .obr-head{display:block;margin-bottom:28px}
.obr-art{display:grid;grid-template-columns:110px 1fr;gap:4px 20px;padding:18px 0;border-top:1px solid var(--line);text-decoration:none}
.obr-art:last-child{border-bottom:1px solid var(--line)}
.obr-art time{font:500 12px/1.6 'JetBrains Mono',monospace;color:var(--mute);grid-row:1/3;font-variant-numeric:tabular-nums}
.obr-art b{font:700 18px/1.3 'Cabinet Grotesk',sans-serif;transition:color .2s}
.obr-art span{font-size:13px;color:var(--acc)}
.obr-art:hover b{color:var(--acc)}
.obr-qa{border-top:1px solid var(--line)}
.obr-qa:last-child{border-bottom:1px solid var(--line)}
.obr-qa summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font:700 18px/1.3 'Cabinet Grotesk',sans-serif;position:relative}
.obr-qa summary::-webkit-details-marker{display:none}
.obr-qa summary::after{content:'';position:absolute;right:6px;top:24px;width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center/14px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 14px no-repeat;transition:transform .25s}
.obr-qa[open] summary::after{transform:rotate(45deg)}
.obr-qa summary:hover{color:var(--acc)}
.obr-qa p{margin:0 0 20px;color:var(--mute);font-size:15px;max-width:60ch}
/* contact */
.obr-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:72px}
.obr-contact>div>p{color:#aeb6ba;margin:20px 0 28px}
.obr-cdl{margin:0;display:grid;gap:0;border-top:1px solid rgba(238,240,236,.18)}
.obr-cdl div{display:grid;grid-template-columns:110px 1fr;padding:12px 0;border-bottom:1px solid rgba(238,240,236,.18);font-size:15px}
.obr-cdl dt{font:500 10.5px/1.9 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#aeb6ba}
.obr-cdl dd{margin:0;overflow-wrap:anywhere}
.obr-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--sheet);color:var(--ink);padding:32px;border-top:4px solid var(--acc)}
.obr-form label{display:grid;gap:7px;font:500 10.5px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.obr-form input,.obr-form select,.obr-form textarea{font:400 15px/1.4 'General Sans',sans-serif;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;padding:12px;width:100%;text-transform:none;letter-spacing:0}
.obr-form input:focus,.obr-form select:focus,.obr-form textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.obr-form__full{grid-column:1/-1}
.obr-form .obr-btn{justify-content:center}
/* footer */
.obr-foot{background:#141d23;color:#aeb6ba;padding:64px 0 28px;font-size:14px}
.obr-foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(238,240,236,.14)}
.obr-logo--inv{color:#fff}
.obr-foot__brand p{margin:16px 0 0;max-width:34ch}
.obr-foot h3{font:500 10.5px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:6px 0 16px}
.obr-foot__cols a:not(.obr-logo){display:block;text-decoration:none;padding:4px 0}
.obr-foot__cols a:not(.obr-logo):hover{color:#fff}
.obr-foot__legal{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:22px;font-size:12.5px}
/* responsive */
@container (max-width:1080px){.obr-menu a{padding:10px 8px;font-size:14px}.obr-h1{font-size:40px}}
@container (max-width:960px){
.obr-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sheet);flex-direction:column;align-items:stretch;padding:8px 20px 20px;border-bottom:1px solid var(--line);gap:0}
.obr-menu.is-open{display:flex}
.obr-menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.obr-menu__cta a{margin:14px 0 0;text-align:center;padding:15px}
.obr-nav__in{position:relative}
.obr-burger{display:flex}
.obr-hero__in,.obr-proj,.obr-split,.obr-area,.obr-nf,.obr-contact{grid-template-columns:1fr;gap:40px}
.obr-stamp{grid-template-columns:repeat(3,1fr)}
.obr-stamp div:nth-child(4){border-left:0}
.obr-stamp div:nth-child(n+4){border-top:1px solid var(--line)}
.obr-row{grid-template-columns:60px 1fr 120px 110px}
.obr-row>span:nth-child(3){display:none}
.obr-steps{grid-template-columns:1fr;border-top:0;border-left:1px solid rgba(238,240,236,.5);padding:0 0 0 28px;gap:28px}
.obr-steps::before,.obr-steps::after{display:none}
.obr-steps li::before{display:none}
.obr-steps__wk{position:static;display:block;margin-bottom:6px}
.obr-sec--ink .obr-head{margin-bottom:40px}
.obr-proj2{grid-template-columns:1fr 1fr}
.obr-pcard--wide{grid-column:1/-1}
}
@container (max-width:640px){
.obr-w{padding:0 16px}
.obr-hide-s{display:none!important}
.obr-top__in{gap:14px;font-size:12px}
.obr-sec{padding:64px 0}
.obr-hero{padding-top:36px}
.obr-h1{font-size:32px}
.obr-h2{font-size:27px}
.obr-lead{font-size:16.5px}
.obr-head{grid-template-columns:1fr;row-gap:14px;margin-bottom:28px}
.obr-hero__fig{grid-template-columns:1fr 26px}
.obr-dim--v{margin-left:10px}
.obr-stamp{grid-template-columns:1fr 1fr}
.obr-stamp div{border-left:0!important;border-top:1px solid var(--line)}
.obr-stamp div:nth-child(even){border-left:1px solid var(--line)!important}
.obr-stamp div:first-child,.obr-stamp div:nth-child(2){border-top:0}
.obr-stamp div:last-child{grid-column:1/-1;border-left:0!important}
.obr-row{grid-template-columns:1fr auto;gap:4px 12px;padding:16px 4px}
.obr-row--h{display:none}
.obr-row .obr-code{grid-column:1/-1}
.obr-row>span:nth-child(4){grid-column:1;grid-row:3;font-size:13px}
.obr-row .obr-price{grid-row:2/4;grid-column:2;align-self:center}
.obr-row .obr-row__t{font-size:17px}
.obr-row__t svg{width:34px}
.obr-proj2{grid-template-columns:1fr}
.obr-pcount__n{font-size:56px}
.obr-marks{grid-template-columns:1fr}
.obr-mark{border-right:0!important;border-bottom:1px solid var(--line)!important;min-height:0}
.obr-mark:last-child{border-bottom:0!important}
.obr-rev{grid-template-columns:1fr}
.obr-q--big{grid-row:auto;padding:28px}
.obr-q--big p{font-size:21px}
.obr-art{grid-template-columns:1fr}
.obr-art time{grid-row:auto}
.obr-form{grid-template-columns:1fr;padding:22px}
.obr-foot__cols{grid-template-columns:1fr 1fr}
.obr-foot__brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.obr-site *{transition:none!important}}

// Oostveen Bouw · renovatie en verbouw, Delft · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.obr-site'); if(!s) return;
var b=s.querySelector('[data-obr-burger]'), m=s.querySelector('[data-obr-menu]');
if(b&&m) b.addEventListener('click',function(){var o=m.classList.toggle('is-open'); b.setAttribute('aria-expanded',o?'true':'false');});
var ba=s.querySelector('[data-obr-ba]'), r=s.querySelector('[data-obr-range]');
if(ba&&r){var set=function(){ba.style.setProperty('--p',r.value+'%');}; r.addEventListener('input',set); set();}
var f=s.querySelector('[data-obr-pc]'), out=s.querySelector('[data-obr-pcout]');
if(f&&out){var inp=f.querySelector('input');
 var check=function(){var v=(inp.value||'').replace(/\D/g,'').slice(0,4); out.className='obr-pc__out';
  if(v.length<4){out.textContent='Vul de 4 cijfers van uw postcode in.';return;}
  var n=parseInt(v,10), ok=(n>=2280&&n<=2299)||(n>=2490&&n<=2729);
  out.textContent= ok ? 'Ja, '+v+' valt in ons werkgebied. U kunt direct een opname plannen.' : 'Postcode '+v+' ligt buiten onze vaste straal. Bel ons even, soms kan het toch.';
  out.classList.add(ok?'is-ok':'is-no');};
 f.addEventListener('submit',function(e){e.preventDefault();check();}); inp.addEventListener('input',function(){if(inp.value.replace(/\D/g,'').length===4)check();});}
}
init(document.querySelector('.jouw-container'));