<!-- Autobedrijf Brinkman · occasions en werkplaats, Deventer · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="abr">
<div class="abr__top"><div class="abr__in abr__top-in">
  <p class="abr__top-txt"><span class="abr__vandaag">Vandaag open van 8:00 tot 18:00</span></p>
  <p class="abr__top-txt abr__top-r"><span class="abr__top-g">4,6 op Google uit 412 reviews</span><a href="#">0570 123 456</a></p>
</div></div>

<div class="abr__head" role="banner"><div class="abr__in abr__head-in">
  <a href="#" class="abr__logo" aria-label="Autobedrijf Brinkman, naar home">Brinkman</a>
  <nav class="abr__nav" aria-label="Hoofdmenu">
    <a href="#abr-voorraad">Occasions</a><a href="#abr-werkplaats">Werkplaats</a><a href="#abr-werkplaats">APK</a><a href="#abr-inruil">Inruilen</a><a href="#abr-over">Over ons</a><a href="#abr-contact">Contact</a>
  </nav>
  <a href="#abr-proefrit" class="abr__btn abr__btn--head">Plan een proefrit</a>
  <button class="abr__menu-knop" type="button" aria-expanded="false" aria-controls="abr-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="abr__menu" id="abr-menu" hidden>
  <a href="#abr-voorraad">Occasions</a><a href="#abr-werkplaats">Werkplaats</a><a href="#abr-werkplaats">APK</a><a href="#abr-inruil">Inruilen</a><a href="#abr-over">Over ons</a><a href="#abr-contact">Contact</a><a href="#abr-proefrit" class="abr__btn">Plan een proefrit</a>
</div>
</div>

<div class="abr__voorraad" id="abr-voorraad"><div class="abr__in">
  <div class="abr__kop">
    <h1 class="abr__h1">Occasions in Deventer</h1>
    <div class="abr__kop-r">
      <p class="abr__lead">Achtendertig auto's op ons terrein aan de Zutphenseweg. Elke auto krijgt een grote beurt en een nieuwe APK voordat hij hier staat, met twaalf maanden BOVAG-garantie.</p>
      <form class="abr__filter" aria-label="Voorraad filteren">
        <fieldset class="abr__brandstof"><legend>Brandstof</legend>
          <label><input type="radio" name="bs" value="alle" checked><span>Alle</span></label>
          <label><input type="radio" name="bs" value="benzine"><span>Benzine</span></label>
          <label><input type="radio" name="bs" value="hybride"><span>Hybride</span></label>
          <label><input type="radio" name="bs" value="elektrisch"><span>Elektrisch</span></label>
        </fieldset>
        <label class="abr__veld abr__veld--prijs">Maximaal<select name="max"><option value="999999">geen grens</option><option value="5000">€ 5.000</option><option value="15000">€ 15.000</option><option value="25000">€ 25.000</option></select></label>
      </form>
    </div>
  </div>
  <div class="abr__raster" aria-live="polite">
    <article class="abr__auto abr__auto--groot" data-bs="hybride" data-prijs="36500"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Honda Civic e:HEV Advance"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-14.webp" alt="Donkergrijze Honda Civic sedan voor een glazen gevel" width="900" height="491"></div><h3 class="abr__auto-n">Honda Civic e:HEV Advance</h3><p class="abr__auto-d">2023 · 19.800 km · hybride · automaat</p><p class="abr__auto-p">€ 36.500</p></a></article>
    <article class="abr__auto" data-bs="benzine" data-prijs="29950"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Volkswagen Tiguan 1.5 TSI Life"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-4c.webp" alt="Donkerblauwe Volkswagen Tiguan op het voorterrein" width="900" height="400"></div><h3 class="abr__auto-n">Volkswagen Tiguan 1.5 TSI Life</h3><p class="abr__auto-d">2021 · 52.400 km · benzine · automaat</p><p class="abr__auto-p">€ 29.950</p></a></article>
    <article class="abr__auto" data-bs="elektrisch" data-prijs="19450"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Opel Corsa Electric"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-5.webp" alt="Zwarte Opel Corsa Electric aan de laadpaal" width="900" height="491"></div><h3 class="abr__auto-n">Opel Corsa Electric</h3><p class="abr__auto-d">2022 · 28.700 km · elektrisch · 330 km bereik</p><p class="abr__auto-p">€ 19.450</p></a></article>
    <article class="abr__auto" data-bs="benzine" data-prijs="18750"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Audi A3 Sportback 30 TFSI"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-2c.webp" alt="Zilveren Audi A3 Sportback voor de showroom" width="900" height="330" loading="lazy"></div><h3 class="abr__auto-n">Audi A3 Sportback 30 TFSI</h3><p class="abr__auto-d">2018 · 88.900 km · benzine · automaat</p><p class="abr__auto-p">€ 18.750</p></a></article>
    <article class="abr__auto" data-bs="benzine" data-prijs="25900"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Volkswagen Touran 1.5 TSI 7-zits"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-7.webp" alt="Zilvergrijze Volkswagen Touran in de showroom" width="900" height="491" loading="lazy"></div><h3 class="abr__auto-n">Volkswagen Touran 1.5 TSI, 7 zitplaatsen</h3><p class="abr__auto-d">2020 · 71.800 km · benzine · automaat</p><p class="abr__auto-p">€ 25.900</p></a></article>
    <article class="abr__auto" data-bs="benzine" data-prijs="10450"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Volkswagen up! 1.0 move up!"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-3.webp" alt="Witte Volkswagen up! op de keien" width="900" height="491" loading="lazy"></div><h3 class="abr__auto-n">Volkswagen up! 1.0 move up!</h3><p class="abr__auto-d">2020 · 41.300 km · benzine · handgeschakeld</p><p class="abr__auto-p">€ 10.450</p></a></article>
    <article class="abr__auto" data-bs="benzine" data-prijs="4250"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Volvo V70 2.4 Momentum"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-6.webp" alt="Rode Volvo V70 stationwagen op een grindterrein" width="900" height="491" loading="lazy"></div><h3 class="abr__auto-n">Volvo V70 2.4 Momentum</h3><p class="abr__auto-d">2006 · 214.000 km · benzine · trekhaak</p><p class="abr__auto-p">€ 4.250</p></a></article>
    <article class="abr__auto" data-bs="benzine" data-prijs="2450"><a href="#abr-proefrit" class="abr__auto-a" data-auto="Fiat Panda 1.1 Young"><div class="abr__auto-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-8.webp" alt="Groene Fiat Panda langs de gracht" width="900" height="491" loading="lazy"></div><h3 class="abr__auto-n">Fiat Panda 1.1 Young</h3><p class="abr__auto-d">2003 · 132.500 km · benzine · eerste eigenaar</p><p class="abr__auto-p">€ 2.450</p></a></article>
  </div>
  <div class="abr__raster-voet">
    <p class="abr__teller">8 van de 38 auto's getoond.</p>
    <p class="abr__geen" hidden>Geen auto in deze selectie op het terrein. Laat je zoekwens achter, dan bellen we zodra er een binnenkomt.</p>
    <a href="#" class="abr__btn abr__btn--rand">Bekijk de hele voorraad</a>
  </div>
</div></div>

<div class="abr__werk" id="abr-werkplaats">
  <div class="abr__werk-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-15.webp" alt="De werkplaats van Brinkman met een auto op de brug" width="1408" height="768" loading="lazy"></div>
  <div class="abr__in abr__werk-in">
    <div>
      <h2 class="abr__h2">Werkplaats voor elk merk</h2>
      <p class="abr__p">Vier bruggen, twee monteurs met dertig jaar ervaring en een leerling van het Deltion. We werken met de onderhoudsschema's van de fabrikant, dus je fabrieksgarantie blijft gewoon geldig. Je krijgt vooraf een prijs en we bellen voordat we iets extra's doen.</p>
      <p class="abr__p">Wacht je liever? Koffie staat klaar in de showroom en de wifi werkt. Anders krijg je een leenauto mee voor 7,50 euro per dag.</p>
      <a href="#abr-contact" class="abr__btn">Maak een werkplaatsafspraak</a>
    </div>
    <ul class="abr__prijzen" aria-label="Werkplaatsprijzen">
      <li><span>APK benzine of hybride</span><span>€ 39</span></li>
      <li><span>APK diesel</span><span>€ 55</span></li>
      <li><span>Kleine beurt</span><span>vanaf € 169</span></li>
      <li><span>Grote beurt</span><span>vanaf € 289</span></li>
      <li><span>Airco vullen en controleren</span><span>€ 89</span></li>
      <li><span>Winterbanden wisselen</span><span>€ 35</span></li>
      <li><span>Accucheck elektrische auto</span><span>€ 49</span></li>
    </ul>
  </div>
  <div class="abr__in abr__werk-duo">
    <figure class="abr__werk-a"><img src="https://neddev.com/lab-media/site-autobedrijf-11.webp" alt="Monteur controleert een remschijf" width="900" height="491" loading="lazy"><figcaption>Remmen meten we bij elke beurt. Je krijgt de waarden op de factuur, niet alleen een vinkje.</figcaption></figure>
    <figure class="abr__werk-b"><img src="https://neddev.com/lab-media/site-autobedrijf-12c.webp" alt="Monteur Henk Voortman bij een oude Volvo" width="470" height="491" loading="lazy"><figcaption>Henk Voortman sleutelt hier sinds 1994. Oude Volvo's zijn zijn zwakke plek.</figcaption></figure>
  </div>
</div>

<div class="abr__proef" id="abr-proefrit"><div class="abr__in abr__proef-in">
  <div class="abr__proef-txt">
    <h2 class="abr__h2">Plan een proefrit</h2>
    <p class="abr__p">Kies een auto en een dag. We zetten hem schoon en getankt voor de deur en rijden een half uur met je mee, of je gaat alleen, wat je wilt.</p>
    <form class="abr__form" novalidate>
      <label class="abr__veld">Auto<select name="auto" class="abr__keuze"></select></label>
      <div class="abr__rij">
        <label class="abr__veld">Dag<select name="dag" class="abr__dag"></select></label>
        <label class="abr__veld">Dagdeel<select name="deel"><option>ochtend</option><option>middag</option><option>na 17:00</option></select></label>
      </div>
      <div class="abr__rij">
        <label class="abr__veld">Naam<input type="text" name="naam" autocomplete="name" required></label>
        <label class="abr__veld">Telefoon<input type="tel" name="tel" autocomplete="tel" required></label>
      </div>
      <button type="submit" class="abr__btn abr__btn--licht">Proefrit aanvragen</button>
      <p class="abr__fout" role="alert" hidden>Vul je naam en telefoonnummer in, dan bellen we om de tijd vast te zetten.</p>
    </form>
    <p class="abr__klaar" role="status" hidden></p>
  </div>
  <div class="abr__proef-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-13.webp" alt="Sanne Brinkman geeft de sleutels van een auto aan een stel" width="900" height="491" loading="lazy"></div>
</div></div>

<div class="abr__inruil" id="abr-inruil"><div class="abr__in abr__inruil-in">
  <h2 class="abr__h2">Wat is je auto waard?</h2>
  <div>
    <p class="abr__p">Vul je kenteken en kilometerstand in. Binnen twee uur op werkdagen bellen we met een bod dat we zeker betalen, ook als je bij ons niets koopt.</p>
    <form class="abr__inruil-form" novalidate>
      <label class="abr__veld">Kenteken<input type="text" name="kenteken" placeholder="bijvoorbeeld 12-ABC-3" maxlength="9" required></label>
      <label class="abr__veld">Kilometerstand<input type="text" name="km" inputmode="numeric" placeholder="85.000" required></label>
      <button type="submit" class="abr__btn">Vraag een bod</button>
    </form>
    <p class="abr__inruil-klaar" role="status" hidden></p>
  </div>
</div></div>

<div class="abr__over" id="abr-over"><div class="abr__in abr__over-in">
  <div class="abr__over-foto"><img src="https://neddev.com/lab-media/site-autobedrijf-1.webp" alt="De showroom van Brinkman aan de Zutphenseweg" width="1408" height="768" loading="lazy"></div>
  <div class="abr__over-txt">
    <h2 class="abr__h2">Gert en Sanne</h2>
    <p class="abr__p">Gert Brinkman begon in 1987 met twee bruggen achter zijn huis in Colmschate. Dochter Sanne doet nu de verkoop en Gert staat nog drie dagen in de werkplaats. We kopen alleen auto's waarvan we de historie kunnen nalezen, en we verkopen er niet meer dan we zelf kunnen onderhouden.</p>
    <blockquote class="abr__quote">„Een auto van vierduizend euro krijgt bij ons dezelfde beurt als een van veertig. Anders zie je hem binnen een maand terug.”<cite>Gert Brinkman</cite></blockquote>
  </div>
</div></div>

<div class="abr__stem"><div class="abr__in abr__stem-in">
  <blockquote class="abr__stem-groot">„Na de koop van onze Touran bleek een raammotor stuk. Sanne belde zelf de volgende ochtend, binnen een uur was het gemaakt, zonder discussie.”<cite>Ilse en Mark Hofstede, Bathmen</cite></blockquote>
  <div class="abr__stem-rest">
    <blockquote>„APK gedaan terwijl ik koffie dronk. Prijs vooraf gezegd, prijs op de bon.”<cite>Ahmet Kaya, Deventer</cite></blockquote>
    <blockquote>„Mijn oude Polo ingeruild voor een Corsa Electric. Het bod lag tweehonderd euro boven dat van de grote dealer.”<cite>Femke de Wit, Olst</cite></blockquote>
  </div>
</div></div>

<div class="abr__contact" id="abr-contact"><div class="abr__in abr__contact-in">
  <div>
    <h2 class="abr__h2">Langskomen</h2>
    <p class="abr__p">Zutphenseweg 118, 7418 AJ Deventer. Vijf minuten van afrit Deventer-Oost op de A1. Parkeren op eigen terrein, bus 5 stopt voor de deur.</p>
    <ul class="abr__uren" aria-label="Openingstijden">
      <li data-dag="1"><span>Maandag</span><span>8:00 tot 18:00</span></li>
      <li data-dag="2"><span>Dinsdag</span><span>8:00 tot 18:00</span></li>
      <li data-dag="3"><span>Woensdag</span><span>8:00 tot 18:00</span></li>
      <li data-dag="4"><span>Donderdag</span><span>8:00 tot 20:00</span></li>
      <li data-dag="5"><span>Vrijdag</span><span>8:00 tot 18:00</span></li>
      <li data-dag="6"><span>Zaterdag</span><span>9:00 tot 16:00</span></li>
      <li data-dag="0"><span>Zondag</span><span>gesloten</span></li>
    </ul>
  </div>
  <div class="abr__faq">
    <details><summary>Wat valt onder de BOVAG-garantie?</summary><p>Twaalf maanden op motor, versnellingsbak, elektronica en aandrijving, in heel Nederland. Bij auto's onder 5.000 euro geven we drie maanden eigen garantie.</p></details>
    <details><summary>Kan ik een auto financieren?</summary><p>Ja, via een erkende partner vanaf 2.500 euro, looptijd 12 tot 72 maanden. We rekenen het in de showroom met je door.</p></details>
    <details><summary>Leveren jullie buiten Deventer af?</summary><p>Binnen 40 kilometer brengen we je auto gratis thuis, met volle tank en een uitleg van alle knoppen.</p></details>
    <details><summary>Doen jullie ook elektrische auto's?</summary><p>Onderhoud, APK en accucheck. Henk en Lars zijn gecertificeerd voor hoogvoltsystemen.</p></details>
  </div>
</div></div>

<div class="abr__voet" role="contentinfo"><div class="abr__in">
  <div class="abr__voet-kol">
    <div><p class="abr__voet-logo">Brinkman</p><p>Zutphenseweg 118<br>7418 AJ Deventer<br><a href="#">0570 123 456</a><br><a href="mailto:verkoop@voorbeeld.nl">verkoop@voorbeeld.nl</a></p></div>
    <div><p class="abr__voet-kop">Kopen</p><a href="#abr-voorraad">Occasions</a><a href="#">Elektrisch</a><a href="#">Onder 5.000 euro</a><a href="#">Financieren</a></div>
    <div><p class="abr__voet-kop">Werkplaats</p><a href="#abr-werkplaats">APK</a><a href="#abr-werkplaats">Onderhoud</a><a href="#">Banden</a><a href="#">Leenauto</a></div>
    <div><p class="abr__voet-kop">Brinkman</p><a href="#abr-over">Over ons</a><a href="#abr-inruil">Inruilen</a><a href="#">Werken bij</a><a href="#abr-contact">Contact</a></div>
  </div>
  <p class="abr__voet-regel">Autobedrijf Brinkman B.V. · KvK 08123456 · btw NL811234567B01 · BOVAG-lid · RDW-erkend APK-keuringsstation · NAP-tellerrapport bij elke occasion · <a href="#">Privacy</a> · <a href="#">Voorwaarden</a></p>
</div></div>
</div>
</div>

/* Autobedrijf Brinkman · occasions en werkplaats, Deventer · NedDev · eigen werk. */
/* fonts (Fontshare): red-hat-display@400,700 */
.abr{--bg:#E8492E;--opp:#EC5D44;--tekst:#120A08;--gedempt:#240D08;--lijn:#C93A22;--accent:#120A08;--op-accent:#FFFFFF;--r:8px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(56px,6vw,96px);--gat:clamp(24px,3vw,48px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Red Hat Display',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.abr *{box-sizing:border-box}
.abr [hidden]{display:none!important}
.abr a{color:inherit}
.abr img{display:block;max-width:100%;height:auto}
.abr figure{margin:0}
.abr__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.abr__top{background:var(--tekst);color:#fff}
.abr__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.abr__top-txt{margin:0;font-size:var(--fs1)}
.abr__top-r{display:flex;gap:20px}
.abr__top-r a{white-space:nowrap;font-weight:700;text-decoration:none}
.abr__head{position:sticky;top:0;z-index:20}
.abr__head-in{display:flex;align-items:center;gap:32px;height:76px;background:var(--bg);border-bottom:2px solid var(--tekst)}
.abr__logo{font-weight:700;font-size:var(--fs4);letter-spacing:-.03em;text-decoration:none}
.abr__nav{display:flex;gap:26px;margin-left:auto}
.abr__nav a{text-decoration:none;font-weight:700;font-size:var(--fs2);text-underline-offset:6px;text-decoration-thickness:2px}
.abr__nav a:hover{text-decoration:underline}
.abr__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-weight:700;font-size:var(--fs2);padding:14px 22px;border-radius:var(--r);border:2px solid var(--accent);cursor:pointer;font-family:inherit;transition:background-color .18s,color .18s}
.abr__btn:hover{background:transparent;color:var(--tekst)!important}
.abr__btn--head{padding:10px 18px}
.abr__btn--rand{background:transparent;color:var(--tekst)!important}
.abr__btn--rand:hover{background:var(--tekst);color:#fff!important}
.abr__btn--licht{background:var(--bg);border-color:var(--bg);color:var(--tekst)!important}
.abr__btn--licht:hover{background:transparent;color:#fff!important}
.abr__menu-knop{display:none;width:44px;height:44px;background:none;border:2px solid var(--tekst);border-radius:var(--r);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:auto}
.abr__menu-knop span{display:block;width:18px;height:2px;background:var(--tekst)}
.abr__menu{background:var(--bg);border-bottom:2px solid var(--tekst);padding:8px var(--zij) 20px}
.abr__menu a{display:block;padding:12px 0;font-size:var(--fs3);font-weight:700;text-decoration:none;border-bottom:1px solid var(--lijn)}
.abr__menu .abr__btn{display:block;text-align:center;margin-top:16px}
.abr__voorraad{padding:clamp(32px,4vw,56px) 0 var(--sectie)}
.abr__kop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gat);align-items:end;margin-bottom:clamp(28px,3vw,44px)}
.abr__h1{font-size:var(--fs6);font-weight:700;line-height:.95;letter-spacing:-.045em;margin:0;max-width:7em}
.abr__lead{font-size:var(--fs3);margin:0 0 20px;max-width:34em;line-height:1.45}
.abr__filter{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end}
.abr__brandstof{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.abr__brandstof legend{font-size:var(--fs1);margin-bottom:6px;padding:0;font-weight:700}
.abr__brandstof label{position:relative}
.abr__brandstof input{position:absolute;opacity:0;width:1px;height:1px}
.abr__brandstof span{display:block;padding:10px 16px;border:2px solid var(--tekst);border-radius:var(--r);cursor:pointer;font-weight:700;transition:background-color .18s,color .18s}
.abr__brandstof input:checked+span{background:var(--tekst);color:#fff}
.abr__brandstof input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}
.abr__veld{display:grid;gap:6px;font-size:var(--fs1);font-weight:700}
.abr__veld input,.abr__veld select{font:inherit;font-weight:400;font-size:var(--fs2);color:var(--tekst);background:var(--opp);border:2px solid var(--tekst);border-radius:var(--r);padding:10px 14px;min-height:48px;width:100%}
.abr__veld input::placeholder{color:#5a2a1f;opacity:1}
.abr__veld input:focus,.abr__veld select:focus{outline:3px solid #fff;outline-offset:1px}
.abr__veld--prijs{min-width:180px}
.abr__raster{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2vw,32px) var(--gat);grid-auto-flow:dense}
.abr__auto--groot{grid-row:span 2}
.abr__auto-a{display:block;text-decoration:none}
.abr__auto-foto{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--tekst)}
.abr__auto--groot .abr__auto-foto{aspect-ratio:4/3.3}
.abr .abr__auto-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .2s,transform .2s}
.abr__auto-a:hover .abr__auto-foto img,.abr__auto-a:focus-visible .abr__auto-foto img{filter:none;transform:scale(1.02)}
.abr__auto-a:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:var(--r)}
.abr__auto-n{font-size:var(--fs3);font-weight:700;line-height:1.25;margin:12px 0 2px;letter-spacing:-.01em}
.abr__auto--groot .abr__auto-n{font-size:var(--fs4)}
.abr__auto-d{margin:0;font-size:var(--fs1)}
.abr__auto-p{margin:4px 0 0;font-size:var(--fs3);font-weight:700}
.abr__raster-voet{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-top:clamp(28px,3vw,44px);border-top:2px solid var(--tekst);padding-top:20px}
.abr__teller,.abr__geen{margin:0;font-weight:700}
.abr__h2{font-size:var(--fs5);font-weight:700;line-height:1;letter-spacing:-.035em;margin:0 0 20px}
.abr__p{margin:0 0 18px;max-width:var(--lees)}
.abr__werk{background:var(--tekst);color:#fff;padding-bottom:var(--sectie)}
.abr__werk-foto{position:relative;aspect-ratio:21/6.5}
.abr .abr__werk-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.abr__werk-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);padding-top:clamp(40px,5vw,72px)}
.abr__werk .abr__btn{background:var(--bg);border-color:var(--bg);color:var(--tekst)!important;margin-top:8px}
.abr__werk .abr__btn:hover{background:transparent;color:#fff!important}
.abr__prijzen{list-style:none;margin:0;padding:0;align-self:start}
.abr__prijzen li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #3a2a26;font-size:var(--fs3)}
.abr__prijzen li span:last-child{font-weight:700;white-space:nowrap;color:var(--bg)}
.abr__werk-duo{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:var(--gat);margin-top:clamp(40px,5vw,72px);align-items:end}
.abr__werk-duo img{border-radius:var(--r);width:100%;object-fit:cover;filter:grayscale(1)}
.abr__werk-a img{aspect-ratio:21/9}
.abr__werk-b img{aspect-ratio:1/1}
.abr figcaption{font-size:var(--fs2);margin-top:12px;max-width:34em}
.abr__werk figcaption{color:#d8cdca}
.abr__proef{padding:var(--sectie) 0;background:var(--tekst);color:#fff;border-top:1px solid #3a2a26}
.abr__proef-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);align-items:stretch}
.abr__proef .abr__veld input,.abr__proef .abr__veld select{background:#241815;color:#fff;border-color:#4a3632}
.abr__proef .abr__veld{color:#fff}
.abr__proef-foto{position:relative;border-radius:var(--r);overflow:hidden;min-height:360px}
.abr .abr__proef-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.abr__form{display:grid;gap:16px;max-width:620px}
.abr__rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.abr__form .abr__btn{justify-self:start;margin-top:6px}
.abr__fout{color:var(--bg);margin:0;font-weight:700}
.abr__klaar,.abr__inruil-klaar{font-size:var(--fs4);font-weight:700;line-height:1.25;margin:20px 0 0;max-width:20em}
.abr__inruil{padding:var(--sectie) 0 0}
.abr__inruil-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px);border-bottom:2px solid var(--tekst);padding-bottom:var(--sectie)}
.abr__inruil-form{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.abr__inruil-form .abr__veld{flex:1 1 180px}
.abr__over{padding:var(--sectie) 0}
.abr__over-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center}
.abr__over-foto img{border-radius:var(--r);width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1)}
.abr blockquote{margin:0}
.abr cite{display:block;font-style:normal;font-size:var(--fs1);margin-top:12px;font-weight:400}
.abr__quote{font-size:var(--fs3);font-weight:700;line-height:1.35;margin-top:24px!important;border-top:2px solid var(--tekst);padding-top:20px}
.abr__stem{background:var(--opp);padding:var(--sectie) 0}
.abr__stem-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px)}
.abr__stem-groot{font-size:var(--fs4);font-weight:700;line-height:1.25;letter-spacing:-.015em}
.abr__stem-rest{display:grid;gap:28px;align-content:end}
.abr__stem-rest blockquote{font-size:var(--fs3);border-top:2px solid var(--tekst);padding-top:16px}
.abr__contact{padding:var(--sectie) 0}
.abr__contact-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,96px)}
.abr__uren{list-style:none;margin:0;padding:0;max-width:440px}
.abr__uren li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--lijn)}
.abr__uren li.is-vandaag{font-weight:700;border-bottom:2px solid var(--tekst)}
.abr__uren li.is-vandaag span:first-child::after{content:", vandaag"}
.abr__faq details{border-bottom:1px solid var(--lijn)}
.abr__faq details:first-child{border-top:2px solid var(--tekst)}
.abr__faq summary{cursor:pointer;padding:16px 36px 16px 0;font-weight:700;font-size:var(--fs3);list-style:none;position:relative}
.abr__faq summary::-webkit-details-marker{display:none}
.abr__faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:var(--fs4)}
.abr__faq details[open] summary::after{content:"\2212"}
.abr__faq p{margin:0 0 18px;max-width:var(--lees)}
.abr__voet{background:var(--tekst);color:#d8cdca;padding:56px 0 32px;font-size:var(--fs2)}
.abr__voet-kol{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.abr__voet-kol a{display:block;text-decoration:none;padding:3px 0}
.abr__voet-kol a:hover{color:#fff}
.abr__voet-kol p{margin:0}
.abr__voet-logo{font-weight:700;font-size:var(--fs4);color:var(--bg);margin-bottom:12px!important}
.abr__voet-kop{color:#fff;font-weight:700;margin-bottom:8px!important}
.abr__voet-regel{font-size:var(--fs1);border-top:1px solid #3a2a26;padding-top:20px;margin:0}
@container (max-width:980px){
  .abr__nav,.abr__btn--head{display:none}
  .abr__menu-knop{display:flex}
  .abr__top-g{display:none}
  .abr__kop,.abr__werk-in,.abr__werk-duo,.abr__proef-in,.abr__inruil-in,.abr__over-in,.abr__stem-in,.abr__contact-in{grid-template-columns:minmax(0,1fr)}
  .abr__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .abr__auto--groot{grid-column:1/-1;grid-row:auto}
  .abr__auto--groot .abr__auto-foto{aspect-ratio:16/9}
  .abr__h1{font-size:56px}
  .abr__h2{font-size:var(--fs4)}
  .abr__werk-foto{aspect-ratio:4/3}
  .abr__proef-foto{min-height:0;aspect-ratio:4/3;order:-1}
  .abr__stem-groot{font-size:var(--fs3)}
  .abr__voet-kol{grid-template-columns:1fr 1fr}
}
@container (max-width:560px){
  .abr__raster{grid-template-columns:minmax(0,1fr)}
  .abr__h1{font-size:44px}
  .abr__rij{grid-template-columns:1fr}
    .abr__top-in{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.abr *{transition:none!important}}

// Autobedrijf Brinkman · occasions en werkplaats, Deventer · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.abr');if(!s)return;
var knop=s.querySelector('.abr__menu-knop'),menu=s.querySelector('.abr__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');}});
var dag=new Date().getDay();var li=s.querySelector('.abr__uren li[data-dag="'+dag+'"]');if(li)li.classList.add('is-vandaag');
var tt={0:'Vandaag gesloten, morgen open vanaf 8:00',1:'Vandaag open van 8:00 tot 18:00',2:'Vandaag open van 8:00 tot 18:00',3:'Vandaag open van 8:00 tot 18:00',4:'Vandaag open tot 20:00, koopavond',5:'Vandaag open van 8:00 tot 18:00',6:'Vandaag open van 9:00 tot 16:00'};s.querySelector('.abr__vandaag').textContent=tt[dag];
var autos=[].slice.call(s.querySelectorAll('.abr__auto')),filter=s.querySelector('.abr__filter'),teller=s.querySelector('.abr__teller'),geen=s.querySelector('.abr__geen');
function filteren(){var bs=filter.querySelector('input[name=bs]:checked').value,max=+filter.max.value,n=0;
  autos.forEach(function(a){var ok=(bs==='alle'||a.getAttribute('data-bs')===bs)&&+a.getAttribute('data-prijs')<=max;a.hidden=!ok;if(ok)n++;});
  teller.textContent=n+' van de 38 auto\'s getoond.';geen.hidden=n>0;teller.hidden=n===0;}
filter.addEventListener('change',filteren);
var keuze=s.querySelector('.abr__keuze');autos.forEach(function(a){var o=document.createElement('option');o.textContent=a.querySelector('.abr__auto-a').getAttribute('data-auto');keuze.appendChild(o);});
s.querySelectorAll('.abr__auto-a').forEach(function(a){a.addEventListener('click',function(){keuze.value=a.getAttribute('data-auto');});});
var dsel=s.querySelector('.abr__dag'),nl=['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],mnd=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
for(var i=1,d=new Date();dsel.options.length<8&&i<14;i++){var x=new Date(d.getFullYear(),d.getMonth(),d.getDate()+i);if(x.getDay()===0)continue;var o=document.createElement('option');o.textContent=nl[x.getDay()]+' '+x.getDate()+' '+mnd[x.getMonth()];dsel.appendChild(o);}
var form=s.querySelector('.abr__form'),fout=s.querySelector('.abr__fout'),klaar=s.querySelector('.abr__klaar');
form.addEventListener('submit',function(e){e.preventDefault();var naam=form.naam.value.trim(),tel=form.tel.value.trim();if(!naam||tel.replace(/\D/g,'').length<10){fout.hidden=false;return;}fout.hidden=true;form.hidden=true;klaar.hidden=false;
  klaar.textContent='Dank je, '+naam.split(' ')[0]+'. De '+keuze.value+' staat '+dsel.value+' ('+form.deel.value+') voor je klaar. Sanne belt vandaag om de tijd vast te zetten.';});
var ir=s.querySelector('.abr__inruil-form'),irk=s.querySelector('.abr__inruil-klaar');
ir.addEventListener('submit',function(e){e.preventDefault();var k=ir.kenteken.value.trim().toUpperCase(),km=ir.km.value.trim();if(k.replace(/[^A-Z0-9]/g,'').length!==6||!km){ir.kenteken.focus();ir.kenteken.setCustomValidity('Vul een geldig kenteken in');ir.kenteken.reportValidity();return;}ir.kenteken.setCustomValidity('');ir.hidden=true;irk.hidden=false;irk.textContent='Kenteken '+k+' ontvangen. Je hoort binnen twee uur een bod, op werkdagen tussen 8:00 en 18:00.';});
ir.kenteken.addEventListener('input',function(){ir.kenteken.setCustomValidity('');});
}
init(document.querySelector('.jouw-container'));