/* AV-Automotive. Kleuren komen uit hun eigen Elementor-config: #1C65B0 blauw, #212121 inkt.
   Koppen in Archivo, dat gebruiken ze al. Body in Inter, leesbaarder dan de ABeeZee die er stond. */
:root{
  --blauw:#1C65B0; --blauw-licht:#3B85D4; --diep:#0B2545; --staal:#12314F;
  --inkt:#101418; --grijs:#5A6472; --mist:#F2F5F9; --lijn:#E1E8F0; --wit:#fff;
  --kader:1180px; --radius:14px;
  --schaduw:0 1px 2px rgba(11,37,69,.06), 0 8px 24px rgba(11,37,69,.08);
  --schaduw-op:0 2px 4px rgba(11,37,69,.08), 0 16px 40px rgba(11,37,69,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wit);color:var(--inkt);
  font:400 17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:Archivo,Inter,sans-serif;font-weight:800;line-height:1.08;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.kader{max-width:var(--kader);margin-inline:auto;padding-inline:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blauw);margin-bottom:11px}

/* balk bovenaan */
.balk{background:var(--diep);color:#C9DAEC;font-size:.86rem}
.balk .kader{display:flex;gap:20px;align-items:center;justify-content:space-between;
  min-height:44px;flex-wrap:wrap}
.balk a{color:#fff;text-decoration:none;font-weight:600}
.balk a:hover{color:var(--blauw-licht)}
.balk-rechts{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* navigatie */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--lijn)}
.nav .kader{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.nav img{width:150px}
.menu{display:flex;gap:6px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{text-decoration:none;font-weight:600;font-size:.93rem;padding:9px 13px;border-radius:9px;
  color:var(--staal);display:block;transition:background .15s,color .15s}
.menu a:hover{background:var(--mist);color:var(--blauw)}
.menu a[aria-current=page]{color:var(--blauw);background:rgba(28,101,176,.09)}
.nav-knop{display:none;border:1px solid var(--lijn);background:var(--wit);border-radius:10px;
  width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer}
.nav-knop span{display:block;width:20px;height:2px;background:var(--staal);position:relative}
.nav-knop span::before,.nav-knop span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--staal)}
.nav-knop span::before{top:-6px} .nav-knop span::after{top:6px}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:11px;
  font-weight:700;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;font-family:inherit}
.knop:hover{transform:translateY(-1px)}
.knop-vol{background:var(--blauw);color:#fff;box-shadow:0 4px 14px rgba(28,101,176,.32)}
.knop-vol:hover{background:#175a9e;box-shadow:0 8px 22px rgba(28,101,176,.42)}
.knop-rand{border-color:rgba(255,255,255,.55);color:#fff}
.knop-rand:hover{background:rgba(255,255,255,.12)}
.knop-donker{border-color:var(--lijn);color:var(--staal);background:var(--wit)}
.knop-donker:hover{border-color:var(--blauw);color:var(--blauw)}

/* hero */
.hero{position:relative;background:linear-gradient(115deg,var(--diep) 0%,var(--staal) 46%,var(--blauw) 100%);
  color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url(/beelden/patroon.webp) center/cover;
  opacity:.14;mix-blend-mode:overlay}
.hero .kader{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;
  align-items:center;padding-block:clamp(56px,7vw,88px)}
.hero .eyebrow{color:#9FC5E8;margin-bottom:16px}
.hero p{color:#D5E4F2;font-size:1.08rem;max-width:46ch}
.hero-acties{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-cijfers{display:flex;gap:30px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.hero-cijfer b{display:block;font-family:Archivo,sans-serif;font-size:1.7rem;font-weight:800}
.hero-cijfer span{font-size:.8rem;color:#9FC5E8;letter-spacing:.04em}
.hero-beeld img{width:100%;max-width:560px;margin-left:auto;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.45))}

/* secties */
section{padding-block:clamp(52px,6.5vw,86px)}
.mist{background:var(--mist)}
.kop{max-width:62ch;margin-bottom:38px}
.kop p{color:var(--grijs);margin-top:14px;font-size:1.04rem}

/* wagens */
.wagens{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.wagen{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--schaduw);
  transition:transform .18s,box-shadow .18s}
.wagen:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op)}
.wagen-foto{aspect-ratio:3/2;background:var(--mist);overflow:hidden}
.wagen-foto img{width:100%;height:100%;object-fit:cover}
.wagen-tekst{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.wagen h3{margin-bottom:3px}
.wagen .uitvoering{color:var(--grijs);font-size:.9rem;margin-bottom:13px}
.wagen .kort{color:var(--grijs);font-size:.93rem;margin-bottom:16px}
.wagen dl{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0}
.wagen dl div{background:var(--mist);border-radius:7px;padding:5px 10px;font-size:.79rem;
  display:flex;gap:5px;align-items:baseline}
.wagen dt{color:var(--grijs)} .wagen dd{margin:0;font-weight:600}
.wagen-voet{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:16px;border-top:1px solid var(--lijn)}
.prijs{font-family:Archivo,sans-serif;font-weight:800;font-size:1.4rem;color:var(--diep);
  font-variant-numeric:tabular-nums}
.verkocht-lijst{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;padding:0;list-style:none}
.verkocht-lijst li{border:1px solid var(--lijn);border-radius:9px;padding:9px 15px;
  font-size:.88rem;color:var(--grijs);background:var(--wit);display:flex;gap:9px;align-items:center}
.verkocht-lijst b{color:var(--staal);font-weight:600}
.vlag{display:inline-block;background:var(--diep);color:#fff;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px}

/* kaarten */
.raster-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);padding:28px 26px}
.kaart h3{margin-bottom:10px}
.kaart p{color:var(--grijs);font-size:.96rem;margin:0}
.kaart .nr{font-family:Archivo,sans-serif;font-weight:800;font-size:.85rem;color:var(--blauw);
  letter-spacing:.1em;display:block;margin-bottom:12px}

/* duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,60px);align-items:center}
.duo img{border-radius:var(--radius);box-shadow:var(--schaduw)}
.duo p{color:var(--grijs)}
.duo.om > :first-child{order:2}
.duo dl div{background:var(--mist);border-radius:7px;padding:6px 11px;font-size:.83rem;
  display:flex;gap:6px;align-items:baseline}
.duo dt{color:var(--grijs)} .duo dd{margin:0;font-weight:600}

/* formulier */
.formulier{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(24px,3.5vw,36px);box-shadow:var(--schaduw)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld{display:flex;flex-direction:column;gap:6px}
.veld.breed{grid-column:1/-1}
.veld label{font-size:.85rem;font-weight:600;color:var(--staal)}
.veld input,.veld select,.veld textarea{font:inherit;font-size:.95rem;padding:11px 13px;
  border:1px solid var(--lijn);border-radius:9px;background:var(--wit);color:var(--inkt);width:100%}
.veld textarea{min-height:110px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--blauw);
  outline-offset:1px;border-color:var(--blauw)}
.form-uitleg{color:var(--grijs);font-size:.87rem;margin-top:14px}

/* contactblok */
.contactblok{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px}
.contactblok a{color:var(--blauw);text-decoration:none;font-weight:600}
.contactblok a:hover{text-decoration:underline}
.contactblok .label{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grijs);display:block;margin-bottom:7px}

/* afsluiter */
.cta{background:linear-gradient(115deg,var(--diep),var(--blauw));color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:url(/beelden/patroon.webp) center/cover;
  opacity:.12;mix-blend-mode:overlay}
.cta .kader{position:relative;text-align:center;max-width:720px}
.cta p{color:#D5E4F2;margin-top:14px}
.cta .hero-acties{justify-content:center}

/* voet */
footer{background:var(--inkt);color:#9AA6B5;padding-block:52px 30px;font-size:.92rem}
footer img{width:140px;margin-bottom:18px}
.voet{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer h4{font-family:Archivo,sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer a{color:#9AA6B5;text-decoration:none}
footer a:hover{color:#fff}
.voet-onder{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}

@media(max-width:900px){
  .hero .kader{grid-template-columns:1fr;gap:30px}
  .hero-beeld{order:-1}
  .hero-beeld img{max-width:420px;margin-inline:auto}
  .duo,.velden{grid-template-columns:1fr}
  .duo.om > :first-child{order:0}
  .voet{grid-template-columns:1fr 1fr}
  .nav-knop{display:flex}
  .menu{display:none;position:absolute;top:76px;left:0;right:0;background:var(--wit);
    flex-direction:column;gap:0;padding:10px 22px 18px;border-bottom:1px solid var(--lijn)}
  .menu.open{display:flex}
  .menu a{padding:13px 4px;font-size:1rem}
  .nav .kader{position:relative}
}
@media(max-width:560px){ .voet{grid-template-columns:1fr} .hero-cijfers{gap:20px} }
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}