@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Barlow-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/BarlowCondensed-500.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/BarlowCondensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-700.woff2) format('woff2')}

/* ═══════════ tokens ═══════════ */
:root{
  --asfalt:#101614;
  --asfalt-2:#19211E;
  --asfalt-3:#232D29;
  --inkt:#0E1512;
  --inkt-2:#2C3733;
  --grijs:#5F6B66;
  --lijn:#E1E6E1;
  --lijn-2:#EEF1ED;
  --zand:#F5F7F3;
  --wit:#fff;

  --groen:#3DBC67;
  --groen-diep:#1F9A4F;
  --groen-zacht:#E7F6ED;
  --teal:#8FBFBC;
  --teal-licht:#A6D2C9;
  --gras:#88BF8E;

  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Barlow Condensed','Barlow',system-ui,sans-serif;

  --max:1220px;
  --pad:clamp(20px,5vw,48px);
  --r:14px;
  --r-l:22px;
  --schaduw:0 1px 2px rgba(14,21,18,.05),0 8px 24px -12px rgba(14,21,18,.14);
  --schaduw-l:0 2px 4px rgba(14,21,18,.04),0 26px 60px -28px rgba(14,21,18,.3);
  --veer:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.62;
  color:var(--inkt-2);background:var(--zand);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{color:var(--inkt);font-weight:700;line-height:1.06;letter-spacing:-.022em;margin:0}
h2{font-size:clamp(30px,4.4vw,50px)}
h3{font-size:20px;letter-spacing:-.012em;line-height:1.22}
h4{font-size:14px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
button{font:inherit;color:inherit}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:12px;top:-60px;z-index:200;background:var(--inkt);color:#fff;
  padding:11px 18px;border-radius:8px;text-decoration:none;font-weight:600;transition:top .18s;
}
.skip:focus{top:12px}
:focus-visible{outline:2.5px solid var(--groen-diep);outline-offset:3px;border-radius:4px}

.binnen{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sectie{padding-block:clamp(64px,9vw,120px)}
.sectie--donker{background:var(--asfalt);color:#C4D0CB}
.sectie--donker h2,.sectie--donker h3{color:#fff}

/* ═══════════ scrollvoortgang als wegmarkering ═══════════ */
.scrollweg{
  position:fixed;inset:0 0 auto 0;height:4px;z-index:120;
  background:rgba(14,21,18,.07);pointer-events:none;
}
.scrollweg__baan{
  display:block;height:100%;width:100%;
  background:repeating-linear-gradient(90deg,var(--groen) 0 22px,rgba(61,188,103,.32) 22px 36px);
  /* clip-path in plaats van width, zodat de streepjes niet meerekken en de bar niet herlayout */
  clip-path:inset(0 calc(100% - var(--voortgang,0%)) 0 0);
}

/* ═══════════ eyebrow ═══════════ */
.eyebrow{
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--groen-diep);margin:0 0 14px;
}
.eyebrow--licht{color:var(--groen)}

/* ═══════════ knoppen ═══════════ */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:100px;border:1.5px solid transparent;
  font-weight:600;font-size:16.5px;text-decoration:none;cursor:pointer;
  transition:transform .22s var(--veer),background .2s,border-color .2s,color .2s,box-shadow .22s;
}
.knop:hover{transform:translateY(-2px)}
.knop:active{transform:translateY(0)}
.knop--groen{background:var(--groen-diep);color:#fff;box-shadow:0 10px 22px -12px rgba(31,154,79,.9)}
.knop--groen:hover{background:#178A44;box-shadow:0 16px 30px -14px rgba(31,154,79,.95)}
.knop--donker{background:var(--inkt);color:#fff}
.knop--donker:hover{background:#000}
.knop--lijn{border-color:rgba(14,21,18,.2);color:var(--inkt)}
.knop--lijn:hover{border-color:var(--inkt);background:rgba(14,21,18,.04)}
.knop--licht{border-color:rgba(255,255,255,.3);color:#fff}
.knop--licht:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.knop--breed{width:100%}
.knop__telling{
  font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.05em;
  background:rgba(255,255,255,.2);padding:3px 10px;border-radius:100px;
}

/* ═══════════ header ═══════════ */
.kop{
  position:fixed;top:4px;left:0;right:0;z-index:110;
  transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.kop.is-vast{
  background:rgba(250,251,249,.9);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 rgba(14,21,18,.07),0 12px 30px -22px rgba(14,21,18,.5);
}
.kop__binnen{
  max-width:var(--max);margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.kop__logo{flex:none;line-height:0}
.kop__logo img{
  width:clamp(140px,15vw,176px);height:auto;
  transform-origin:left center;transition:transform .3s var(--veer);
}
.kop.is-vast .kop__logo img{transform:scale(.86)}
.kop__nav{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto}
.kop__nav a{
  text-decoration:none;font-weight:600;font-size:16px;color:var(--inkt);
  padding:6px 0;position:relative;
}
.kop__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--groen);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--veer);
}
.kop__nav a:hover::after{transform:scaleX(1)}
.kop__actie{display:flex;align-items:center;gap:10px;margin-left:auto}
.kop__nav+.kop__actie{margin-left:0}
.bel{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--inkt);color:#fff;padding:11px 20px;border-radius:100px;
  font-weight:600;font-size:16px;transition:background .2s,transform .22s var(--veer);
}
.bel:hover{background:var(--groen-diep);transform:translateY(-2px)}
.bel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bel__nr{font-variant-numeric:tabular-nums}

.hamburger{
  display:none;width:46px;height:46px;border:1.5px solid rgba(14,21,18,.16);
  background:rgba(255,255,255,.7);border-radius:12px;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.hamburger span{display:block;width:19px;height:2px;background:var(--inkt);border-radius:2px;transition:transform .3s var(--veer),opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobielmenu{
  position:fixed;inset:0;z-index:105;background:var(--zand);
  padding:104px var(--pad) 40px;display:flex;flex-direction:column;gap:26px;
  animation:menuIn .3s var(--veer);
}
.mobielmenu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mobielmenu nav{display:flex;flex-direction:column}
.mobielmenu nav a{
  text-decoration:none;font-size:26px;font-weight:600;color:var(--inkt);
  padding:16px 0;border-bottom:1px solid var(--lijn);letter-spacing:-.02em;
}

/* ═══════════ hero ═══════════ */
.hero{position:relative;isolation:isolate;padding-block:clamp(140px,17vw,190px) clamp(110px,13vw,150px);overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 60%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(247,249,245,.98) 0%,rgba(247,249,245,.95) 26%,rgba(247,249,245,.72) 42%,rgba(247,249,245,.14) 60%,rgba(247,249,245,0) 74%);
}
.hero__binnen{
  position:relative;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
}
.hero__titel{
  font-size:clamp(40px,6.6vw,80px);line-height:.99;letter-spacing:-.035em;
  margin:0 0 22px;max-width:14ch;
}
.hero__lead{font-size:clamp(17px,1.6vw,20px);max-width:47ch;color:var(--inkt-2);margin-bottom:32px}
.hero__knoppen{display:flex;flex-wrap:wrap;gap:12px}


/* ═══════════ feitenbalk ═══════════ */
.feiten{background:var(--wit);border-block:1px solid var(--lijn)}
.feiten__binnen{
  max-width:var(--max);margin-inline:auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.feit{
  display:flex;align-items:center;gap:14px;padding:24px 26px 24px 0;
  border-right:1px solid var(--lijn);
}
.feit:last-child{border-right:0}
.feit+.feit{padding-left:26px}
.feit b{display:block;font-size:16px;color:var(--inkt);font-weight:600;line-height:1.3}
.feit small{display:block;font-size:14.5px;color:var(--grijs);line-height:1.4}
.feit__ico{width:26px;height:26px;flex:none;fill:none;stroke:var(--groen-diep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stip{
  width:11px;height:11px;border-radius:50%;background:var(--groen);flex:none;
  box-shadow:0 0 0 4px rgba(61,188,103,.2);animation:pols 2.4s ease-in-out infinite;
}
.stip.is-dicht{background:#C8543F;box-shadow:0 0 0 4px rgba(200,84,63,.18);animation:none}
@keyframes pols{0%,100%{box-shadow:0 0 0 4px rgba(61,188,103,.2)}50%{box-shadow:0 0 0 8px rgba(61,188,103,.06)}}

/* ═══════════ bandenspoor ═══════════ */
.spoor{background:var(--asfalt);padding:0;overflow:hidden;position:relative}
.spoor__profiel{
  height:9px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.13) 0 5px,transparent 5px 13px);
}
.spoor__band{display:flex;width:max-content;animation:spoorloop 44s linear infinite;padding-block:17px}
.spoor__rij{display:flex;align-items:center;gap:22px;padding-right:22px;flex:none}
.spoor__rij span{
  font-family:var(--cond);font-weight:600;font-size:19px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;
}
.spoor__rij i{width:7px;height:7px;border-radius:50%;background:var(--groen);flex:none}
@keyframes spoorloop{to{transform:translateX(-50%)}}

/* ═══════════ sectiekop ═══════════ */
.sectiekop{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,64px);
  align-items:end;margin-bottom:clamp(32px,4vw,52px);
}
.sectiekop--midden{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:640px;margin-inline:auto}
.sectiekop__uitleg{font-size:17.5px;color:var(--grijs);max-width:46ch}
.sectie--donker .sectiekop__uitleg{color:#93A39C}
.sectiekop__uitleg--midden{margin-top:18px}

/* ═══════════ occasions ═══════════ */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:26px}
.chip{
  border:1.5px solid var(--lijn);background:var(--wit);color:var(--inkt-2);
  padding:9px 18px;border-radius:100px;font-weight:600;font-size:15.5px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .18s var(--veer);
}
.chip:hover{border-color:var(--inkt);transform:translateY(-1px)}
.chip.is-actief{background:var(--inkt);border-color:var(--inkt);color:#fff}
.filters__telling{
  margin-left:auto;font-family:var(--cond);font-size:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grijs);
}
.filters__telling b{color:var(--inkt);font-weight:700}

.autos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,24px)}
.auto{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--schaduw);
  transition:transform .34s var(--veer),box-shadow .34s var(--veer),border-color .3s,opacity .3s;
}
.auto:hover{transform:translateY(-5px);box-shadow:var(--schaduw-l);border-color:#D4DBD5}
.auto.is-weg{display:none}
.auto__beeld{position:relative;aspect-ratio:10/7;overflow:hidden;background:var(--lijn-2)}
.auto__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--veer)}
.auto:hover .auto__beeld img{transform:scale(1.055)}
.vlag{
  position:absolute;top:13px;left:13px;background:var(--groen-diep);color:#fff;
  font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 12px;border-radius:100px;
}
.vlag--stil{background:rgba(14,21,18,.82)}
.auto__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.auto__body h3{margin-bottom:12px;min-height:2.44em}
.specs{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;padding:0;margin:0 0 18px;
  font-size:15px;color:var(--grijs);
}
.specs li{position:relative;padding-right:11px;margin-right:11px}
.specs li::after{
  content:"";position:absolute;right:0;top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--teal);transform:translateY(-50%);
}
.specs li:last-child{padding-right:0;margin-right:0}
.specs li:last-child::after{display:none}
.auto__voet{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--lijn-2);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.prijs b{display:block;font-size:25px;color:var(--inkt);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.prijs small{display:block;font-size:14px;color:var(--grijs)}
.auto__pijl{
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--groen-diep);white-space:nowrap;
  padding-bottom:4px;border-bottom:2px solid transparent;transition:border-color .25s;
}
.auto:hover .auto__pijl{border-color:var(--groen)}

.leegmelding{
  text-align:center;color:var(--grijs);background:var(--wit);border:1px dashed var(--lijn);
  border-radius:var(--r);padding:34px 24px;margin-top:8px;
}
.aanbod__voet{
  margin-top:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;
  gap:20px 32px;padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--lijn);
}
.aanbod__voet p{color:var(--grijs);max-width:48ch;font-size:16px}

/* ═══════════ de weg ═══════════ */
.route{position:relative;overflow:hidden}
.route::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 46% at 50% 0%,rgba(61,188,103,.11),transparent 72%);
}
.weg{position:relative;margin-top:clamp(34px,5vw,60px);--baan:150px}
.weg__asfalt{
  position:absolute;left:50%;top:-40px;bottom:-40px;width:var(--baan);transform:translateX(-50%);
  background:
    repeating-linear-gradient(101deg,rgba(255,255,255,.017) 0 3px,transparent 3px 7px),
    linear-gradient(90deg,#1A2320,#262F2B 46%,#1A2320);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
}
/* de doorgetrokken kantstrepen */
.weg__asfalt::before,.weg__asfalt::after{
  content:"";position:absolute;top:0;bottom:0;width:3px;background:rgba(255,255,255,.34);
}
.weg__asfalt::before{left:15px}
.weg__asfalt::after{right:15px}
.weg__midden{
  position:absolute;left:50%;top:0;bottom:0;width:6px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.6) 0 36px,transparent 36px 74px);
}
/* het afgelegde stuk kleurt de middenstreep groen, in plaats van hem af te dekken */
.weg__afgelegd{
  position:absolute;left:50%;top:0;width:6px;transform:translateX(-50%);
  height:calc(var(--rit,0) * 100%);overflow:hidden;
  background:repeating-linear-gradient(180deg,var(--groen) 0 36px,transparent 36px 74px);
  filter:drop-shadow(0 0 9px rgba(61,188,103,.85));
}
/* 180 graden gedraaid: de auto zakt bij het scrollen naar beneden, dus de neus
   moet naar beneden wijzen. Anders rijdt hij achteruit. */
.weg__auto{
  position:absolute;left:50%;top:calc(var(--rit,0) * 100%);width:72px;height:131px;
  transform:translate(-50%,-50%) rotate(180deg);
  filter:drop-shadow(0 -14px 22px rgba(0,0,0,.75));
}
.wa-body{fill:#DFE6E1;stroke:#0B110E;stroke-width:1.5}
.wa-ruit{fill:#222E29}
.wa-dak{fill:#F1F5F1;stroke:#BFCAC3;stroke-width:.9}
.wa-spiegel{fill:#DFE6E1;stroke:#0B110E;stroke-width:1.1}
.wa-licht{fill:#FFF4CE}

.stappen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(22px,4vw,54px)}
.stap{
  display:grid;grid-template-columns:1fr var(--baan) 1fr;align-items:center;gap:0;
  opacity:.36;transition:opacity .5s var(--veer);
}
.stap.is-aan{opacity:1}
/* het bord staat in de berm aan de kant van zijn eigen kaart, niet op de weg */
.stap__bord{
  grid-column:2;width:56px;height:56px;border-radius:16px;
  background:var(--asfalt-3);border:2px solid rgba(255,255,255,.24);
  display:grid;place-items:center;position:relative;z-index:2;
  transition:background .45s var(--veer),border-color .45s,transform .45s var(--veer);
}
.stap__bord svg{
  width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s;
}
.stap.is-aan .stap__bord{background:var(--groen);border-color:rgba(255,255,255,.85);transform:scale(1.06)}
.stap.is-aan .stap__bord svg{stroke:#08170D}
.stap__kaart{
  background:var(--asfalt-2);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-l);padding:26px 28px;position:relative;
  transition:border-color .45s,transform .5s var(--veer);
}
.stap.is-aan .stap__kaart{border-color:rgba(61,188,103,.36)}
.stap__kaart h3{margin-bottom:9px}
.stap__kaart p{color:#93A39C;font-size:16.5px;margin:0}
.stap:nth-child(odd) .stap__bord{justify-self:start;margin-left:-28px}
.stap:nth-child(even) .stap__bord{justify-self:end;margin-right:-28px}
.stap:nth-child(odd) .stap__kaart{grid-column:1;margin-right:44px;transform:translateX(-14px)}
.stap:nth-child(even) .stap__kaart{grid-column:3;margin-left:44px;transform:translateX(14px)}
.stap.is-aan .stap__kaart{transform:translateX(0)}
.stap__kaart::after{
  content:"";position:absolute;top:50%;width:16px;height:2px;
  background:rgba(255,255,255,.16);transform:translateY(-50%);transition:background .45s;
}
.stap:nth-child(odd) .stap__kaart::after{right:-16px}
.stap:nth-child(even) .stap__kaart::after{left:-16px}
.stap.is-aan .stap__kaart::after{background:var(--groen)}

/* ═══════════ inruil / taxatie ═══════════ */
.inruil__grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(30px,5vw,72px);align-items:start}
.inruil__tekst h2{margin-bottom:18px;max-width:15ch}
.inruil__tekst>p{color:var(--grijs);max-width:50ch}
.vinkjes{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:11px}
.vinkjes li{position:relative;padding-left:32px;font-weight:500;color:var(--inkt-2)}
.vinkjes li::before{
  content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--groen-zacht);
}
.vinkjes li::after{
  content:"";position:absolute;left:6px;top:11px;width:8px;height:4.5px;
  border-left:2px solid var(--groen-diep);border-bottom:2px solid var(--groen-diep);
  transform:rotate(-45deg);
}
.inruil__foto{margin:34px 0 0;border-radius:var(--r-l);overflow:hidden}
.inruil__foto img{width:100%;aspect-ratio:16/8;object-fit:cover}

.taxatie{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:clamp(24px,3vw,34px);box-shadow:var(--schaduw-l);position:sticky;top:104px;
}
.taxatie__kop{margin-bottom:22px}
.taxatie__kop[hidden]{display:none}
.taxatie__kop p{color:var(--grijs);font-size:15.5px;margin:5px 0 0}
.veldlabel{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grijs);margin-bottom:9px;
}
.veldlabel b{
  font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none;
  color:var(--inkt);font-variant-numeric:tabular-nums;
}

/* Nederlandse kentekenplaat. Een echte plaat is 52 bij 11 cm, dus de breedte
   is aan de hoogte gekoppeld in plaats van dat hij de kaart uitvult. */
.plaat{
  display:flex;align-items:stretch;background:#F2CE00;border:2px solid #0E1512;
  border-radius:9px;overflow:hidden;height:62px;width:100%;max-width:293px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
  transition:box-shadow .2s,border-color .2s;
}
.plaat:focus-within{box-shadow:0 0 0 4px rgba(61,188,103,.28),inset 0 -3px 0 rgba(0,0,0,.12)}
.plaat__nl{
  width:38px;flex:none;background:#0B3EA8;display:grid;place-items:center;color:#F2CE00;
}
.plaat__nl svg{width:24px;height:30px}
.pl-ring{fill:none;stroke:#F2CE00;stroke-width:1.4;stroke-dasharray:1.6 3.15}
.plaat__nl text{fill:#fff;font-family:var(--cond);font-weight:700;font-size:9px;letter-spacing:.05em}
.plaat input{
  flex:1;min-width:0;border:0;background:transparent;padding:0 10px;
  font-family:var(--cond);font-weight:700;font-size:44px;letter-spacing:.04em;
  text-transform:uppercase;color:#111;text-align:center;
}
.plaat input::placeholder{color:rgba(0,0,0,.28)}
.plaat input:focus{outline:none}
.hint{font-size:14px;color:var(--grijs);margin:8px 0 22px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;
  background:linear-gradient(90deg,var(--groen) var(--vul,32%),var(--lijn) var(--vul,32%));
  cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--wit);
  border:3px solid var(--groen-diep);box-shadow:0 3px 10px rgba(14,21,18,.22);cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--wit);
  border:3px solid var(--groen-diep);box-shadow:0 3px 10px rgba(14,21,18,.22);cursor:grab;
}
.schaal{
  display:flex;justify-content:space-between;font-size:13px;color:var(--grijs);
  margin:9px 0 24px;font-variant-numeric:tabular-nums;
}
.staat{border:0;padding:0;margin:0 0 26px;min-width:0}
.staat legend{padding:0}
.staat__opties{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.staat__opties label{cursor:pointer}
.staat__opties input{position:absolute;opacity:0;pointer-events:none}
.staat__opties span{
  display:block;text-align:center;padding:12px 6px;border-radius:11px;
  border:1.5px solid var(--lijn);font-weight:600;font-size:16px;
  transition:border-color .2s,background .2s,color .2s;
}
.staat__opties label:hover span{border-color:var(--teal)}
.staat__opties input:checked+span{border-color:var(--groen-diep);background:var(--groen-zacht);color:var(--groen-diep)}
.staat__opties input:focus-visible+span{outline:2.5px solid var(--groen-diep);outline-offset:2px}

/* ── stappen in de kentekencheck ── */
.taxatie__stap[hidden],.zoekt[hidden],.gevonden[hidden],.verstuurd[hidden]{display:none}
.taxatie__stap,.zoekt,.gevonden,.verstuurd{animation:stapIn .4s var(--veer)}
@keyframes stapIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.proef{
  border:1px solid var(--lijn);background:var(--zand);border-radius:6px;
  padding:1px 7px;font-family:var(--cond);font-weight:600;font-size:14px;
  letter-spacing:.05em;color:var(--inkt);cursor:pointer;transition:border-color .2s,background .2s;
}
.proef:hover{border-color:var(--groen-diep);background:var(--groen-zacht)}
.fout{
  font-size:14.5px;color:#A9412E;background:#FBEDEA;border-radius:9px;
  padding:10px 14px;margin:0 0 16px;
}
.fout[hidden]{display:none}
.hint--onder{margin:12px 0 0;text-align:center}

.zoekt{display:flex;align-items:center;gap:13px;padding:30px 4px}
.zoekt p{margin:0;color:var(--grijs);font-size:16px}
.zoekt__ring{
  width:22px;height:22px;flex:none;border-radius:50%;
  border:2.5px solid var(--lijn);border-top-color:var(--groen-diep);
  animation:draai .8s linear infinite;
}
@keyframes draai{to{transform:rotate(360deg)}}

.gevonden__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.plaat--klein{
  display:inline-flex;align-items:center;height:34px;background:#F2CE00;
  border:1.5px solid #0E1512;border-radius:5px;overflow:hidden;flex:none;
  width:auto;max-width:none;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}
.plaat--klein .plaat__nl{width:21px}
.plaat--klein .plaat__nl svg{width:14px;height:18px}
.plaat--klein b{
  padding:0 9px;font-family:var(--cond);font-weight:700;font-size:19px;
  letter-spacing:.05em;color:#111;
}
.tekstknop{
  border:0;background:none;padding:0;cursor:pointer;font-size:15.5px;font-weight:600;
  color:var(--groen-diep);text-decoration:underline;text-underline-offset:3px;
}
.tekstknop:hover{color:#178A44}
.gevonden h4{font-size:21px;margin-bottom:14px}

.rdw{margin:0 0 18px;padding:0;border-top:1px solid var(--lijn-2)}
.rdw div{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--lijn-2);
}
.rdw dt{
  font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grijs);margin:0;
}
.rdw dd{margin:0;font-weight:600;color:var(--inkt);font-size:16px;text-align:right}
.rdw--kaal{border-top:0;margin-bottom:20px;text-align:left}

.apkwaarschuwing{
  background:#FFF6E3;border:1px solid #F0DCAF;border-radius:11px;
  padding:12px 16px;font-size:15.5px;color:#7A5A15;margin:0 0 20px;
}
.apkwaarschuwing[hidden]{display:none}
.apkwaarschuwing a{color:#6B4E10;font-weight:600}

.verstuurd{text-align:center;padding-top:8px}
.verstuurd__vink{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;
  border-radius:50%;background:var(--groen-zacht);
}
.verstuurd__vink svg{
  width:26px;height:26px;fill:none;stroke:var(--groen-diep);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.verstuurd h4{font-size:21px;margin-bottom:10px}
.verstuurd>p{color:var(--grijs);font-size:16px;margin-bottom:20px}

/* ═══════════ werkplaats ═══════════ */
.werk__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:center}
.werk__lead{color:#93A39C;font-size:17.5px;margin:18px 0 28px;max-width:44ch}
.werk__acties{display:flex;flex-wrap:wrap;gap:12px}
.werk__beeld{margin:0;position:relative;border-radius:var(--r-l);overflow:hidden}
.werk__beeld img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.werk__beeld figcaption{
  position:absolute;left:16px;right:16px;bottom:16px;
  background:rgba(16,22,20,.78);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 18px;
}
.werk__beeld b{display:block;color:#fff;font-size:21px;letter-spacing:-.02em}
.werk__beeld span{display:block;color:#93A39C;font-size:15px}

.diensten{
  list-style:none;padding:0;margin:clamp(34px,5vw,60px) 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-l);overflow:hidden;
}
.diensten li{
  background:var(--asfalt);padding:26px 24px 28px;transition:background .3s;
}
.diensten li:hover{background:var(--asfalt-2)}
.diensten svg{
  width:28px;height:28px;fill:none;stroke:var(--groen);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:15px;
}
.diensten b{display:block;color:#fff;font-size:17.5px;font-weight:600;margin-bottom:5px}
.diensten span{display:block;color:#8B9A93;font-size:15.5px;line-height:1.5}

/* ═══════════ kilometerteller ═══════════ */
.teller{padding-block:clamp(52px,7vw,88px)}
.teller__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px)}
.kmteller{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:24px;box-shadow:var(--schaduw);
}
.rollen{display:flex;gap:3px;margin-bottom:16px}
.rol{
  width:30px;height:46px;border-radius:5px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#0A0F0D,#1D2622 42%,#141B18);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75),inset 0 -3px 7px rgba(0,0,0,.75);
}
.rol--komma{
  width:12px;background:none;box-shadow:none;color:var(--inkt);
  display:flex;align-items:flex-end;justify-content:center;font-size:30px;font-weight:700;
}
.rol__strip{
  position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;
  transition:transform 1.5s var(--veer);
}
.rol__strip span{
  height:46px;display:grid;place-items:center;color:#F2F6F3;
  font-family:var(--cond);font-weight:600;font-size:31px;line-height:1;
  font-variant-numeric:tabular-nums;
}
.rol::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(255,255,255,.13);
}
.kmteller p{margin:0;font-size:15.5px;color:var(--grijs);line-height:1.5}
.kmteller b{display:block;color:var(--inkt);font-size:17px;font-weight:600;margin-bottom:2px}

/* ═══════════ over ons ═══════════ */
.overons__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
.overons h2{margin-bottom:20px;max-width:17ch}
.overons p{color:var(--grijs);max-width:52ch}
.overons .groot{font-size:20px;color:var(--inkt-2);font-weight:500;line-height:1.5}
.pand{
  margin:32px 0 0;background:var(--wit);border:1px solid var(--lijn);
  /* 381px = 357px eigen breedte plus de 12px lijst, zodat de foto niet
     boven zijn resolutie wordt uitgerekt */
  border-radius:var(--r);padding:12px 12px 0;max-width:381px;box-shadow:var(--schaduw);
  transform:rotate(-1.1deg);
}
.pand img{width:100%;border-radius:7px;image-rendering:auto}
.pand figcaption{font-size:14px;color:var(--grijs);padding:11px 4px 13px;text-align:center}

.reviews{
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-l);
  padding:clamp(24px,3vw,34px);box-shadow:var(--schaduw);
}
.reviews__kop{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--lijn-2);
}
.sterren{color:#E8A33D;font-size:22px;letter-spacing:.1em;line-height:1}
.reviews__kop p{margin:0;font-size:15.5px;color:var(--grijs)}
.reviews__kop b{color:var(--inkt)}
.review{margin:0;padding:22px 0;border-bottom:1px solid var(--lijn-2);position:relative}
/* Plaatshouder tot de echte beoordelingen zijn gekozen. Bewust zichtbaar
   gemarkeerd, zodat niemand deze tekst aanziet voor een klant die dit zei. */
.review--plek p,.review--plek cite,.review--plek cite span{color:var(--grijs)}
.review--plek cite{font-weight:500}
.plekvlag{
  display:inline-block;margin-bottom:9px;padding:3px 10px;border-radius:100px;
  background:var(--lijn-2);border:1px dashed #C9D2CB;
  font-family:var(--cond);font-weight:600;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grijs);
}
.review:last-child{border-bottom:0;padding-bottom:0}
.review p{margin:0 0 12px;color:var(--inkt-2);font-size:16.5px;line-height:1.6}
.review cite{
  font-style:normal;font-weight:600;color:var(--inkt);font-size:15.5px;
  display:flex;align-items:baseline;gap:8px;
}
.review cite span{font-weight:400;color:var(--grijs);font-size:14.5px}

/* ═══════════ contact ═══════════ */
.contact{background:var(--wit);border-top:1px solid var(--lijn)}
.contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,68px);align-items:start}
.contact h2{margin-bottom:16px}
.contact__lead{color:var(--grijs);max-width:44ch;margin-bottom:28px}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.veld{margin-bottom:14px}
.veld label{
  display:block;font-family:var(--cond);font-weight:600;font-size:16px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grijs);margin-bottom:7px;
}
.veld input,.veld select,.veld textarea{
  width:100%;border:1.5px solid var(--lijn);border-radius:11px;background:var(--zand);
  padding:13px 15px;font:inherit;font-size:16.5px;color:var(--inkt);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.veld textarea{resize:vertical;min-height:110px}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--groen-diep);background:var(--wit);
  box-shadow:0 0 0 4px rgba(61,188,103,.16);
}
.veld input:user-invalid{border-color:#C8543F}
.formmelding{
  margin-top:14px;background:var(--groen-zacht);border:1px solid rgba(61,188,103,.4);
  border-radius:11px;padding:14px 18px;color:var(--groen-diep);font-weight:600;
}
.formmelding[hidden]{display:none}

.contact__gegevens{display:flex;flex-direction:column;gap:16px}
.kaartje{background:var(--zand);border:1px solid var(--lijn);border-radius:var(--r-l);padding:26px 28px}
.kaartje h3{margin-bottom:12px}
.adres{color:var(--grijs);margin-bottom:18px}
.lijnlijst{list-style:none;padding:0;margin:0 0 20px}
.lijnlijst li{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--lijn);font-size:16px;
}
.lijnlijst li:last-child{border-bottom:0}
.lijnlijst span{
  font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grijs);font-size:15px;
}
.lijnlijst a{color:var(--inkt);font-weight:600;text-decoration:none;text-align:right;word-break:break-word}
.lijnlijst a:hover{color:var(--groen-diep)}

.uren__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.uren__kop h3{margin:0}
.badge{
  display:inline-flex;align-items:center;gap:7px;background:var(--groen-zacht);
  color:var(--groen-diep);border-radius:100px;padding:5px 13px;font-size:14.5px;font-weight:600;
}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--groen);flex:none}
.badge.is-dicht{background:#FBEDEA;color:#A9412E}
.badge.is-dicht i{background:#C8543F}
.uren{width:100%;border-collapse:collapse;font-size:16px}
.uren th{
  text-align:left;font-weight:500;color:var(--grijs);padding:8px 0;
  border-bottom:1px solid var(--lijn);
}
.uren td{
  text-align:right;padding:8px 0;border-bottom:1px solid var(--lijn);
  font-variant-numeric:tabular-nums;color:var(--inkt-2);
}
.uren tr:last-child th,.uren tr:last-child td{border-bottom:0}
.uren .dicht{color:var(--grijs)}
.uren tr.is-vandaag th,.uren tr.is-vandaag td{color:var(--inkt);font-weight:600}
.uren tr.is-vandaag th{position:relative;padding-left:15px}
.uren tr.is-vandaag th::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--groen);
}
.uren__voet{font-size:14.5px;color:var(--grijs);margin:16px 0 0}

/* ═══════════ footer ═══════════ */
.voet{background:var(--asfalt);color:#8B9A93;padding-block:clamp(48px,6vw,72px) 26px}
.voet__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px)}
.voet__logo{width:210px;margin-bottom:18px}
.voet__grid p{font-size:16px;max-width:36ch}
.voet h4{
  color:#fff;font-family:var(--cond);font-weight:600;font-size:16px;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px;
}
.voet ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.voet ul a{text-decoration:none;font-size:16px;transition:color .2s}
.voet ul a:hover{color:var(--groen)}
.voet__onder{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:clamp(34px,4vw,52px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);font-size:14.5px;
}
.voet__onder p{margin:0}
.voet__demo{color:#5F6E67}

/* ═══════════ responsive ═══════════ */
@media (max-width:1080px){
  .autos{grid-template-columns:repeat(2,1fr)}
  .diensten{grid-template-columns:repeat(2,1fr)}
  .teller__grid{grid-template-columns:repeat(2,1fr)}
  .voet__grid{grid-template-columns:1fr 1fr}
  .feiten__binnen{grid-template-columns:repeat(2,1fr)}
  .feit:nth-child(2){border-right:0}
  .feit:nth-child(odd){padding-left:0}
  .feit:nth-child(3),.feit:nth-child(4){border-top:1px solid var(--lijn)}
}
@media (max-width:920px){
  .kop__nav{display:none}
  .hamburger{display:flex}
  .sectiekop{grid-template-columns:1fr;gap:18px;align-items:start}
  .inruil__grid,.werk__top,.overons__grid,.contact__grid{grid-template-columns:1fr}
  .taxatie{position:static}
  .werk__beeld{order:-1}
  .hero__media img{object-position:64% 62%}
  .hero__media::after{
    background:linear-gradient(178deg,rgba(247,249,245,.97) 0%,rgba(247,249,245,.93) 40%,rgba(247,249,245,.6) 66%,rgba(247,249,245,.1) 88%);
  }
  .hero__titel{max-width:none}

  /* de weg schuift naar links, de kaarten komen er rechts naast */
  .weg{--baan:76px;--as:22px}
  .weg__asfalt{left:var(--as);transform:none;width:var(--baan)}
  .weg__asfalt::before{left:9px}
  .weg__asfalt::after{right:9px}
  .weg__auto{left:calc(var(--as) + var(--baan) / 2);width:42px;height:77px}
  .weg__afgelegd,.weg__midden{left:calc(var(--as) + var(--baan) / 2)}
  .stap{grid-template-columns:calc(var(--as) * 2 + var(--baan)) 1fr}
  .stap__bord,
  .stap:nth-child(odd) .stap__bord,
  .stap:nth-child(even) .stap__bord{
    grid-column:1;width:50px;height:50px;justify-self:start;
    margin:0 0 0 calc(var(--as) + var(--baan) - 25px);
  }
  .stap:nth-child(odd) .stap__kaart,.stap:nth-child(even) .stap__kaart{
    grid-column:2;margin:0;transform:translateX(12px);
  }
  .stap.is-aan .stap__kaart{transform:translateX(0)}
  .stap__kaart::after{display:none}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .autos{grid-template-columns:1fr}
  .diensten,.teller__grid,.voet__grid,.feiten__binnen,.veldrij{grid-template-columns:1fr}
  .feit{border-right:0;border-top:1px solid var(--lijn);padding:18px 0}
  .feit:first-child{border-top:0}
  .feit:nth-child(2){padding-left:0}
  .diensten li{padding:22px 20px}
  .auto__body h3{min-height:0}
  .filters__telling{margin-left:0;width:100%}
  .bel__nr{display:none}
  .bel{padding:12px 13px}
  .aanbod__voet{flex-direction:column;align-items:flex-start}
  .hero__knoppen .knop{width:100%}
  .voet__onder{flex-direction:column}
  .rol{width:26px;height:40px}
  .rol__strip span{height:40px;font-size:27px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .stap{opacity:1}
}