/* VBB Website – huisstijl: navy #1F3855, geel #FFD100, donker #212934, lichtgrijs #E2E2E2, grijs #7A7B7A */
:root{--vbb-navy:#1F3855;--vbb-geel:#FFD100;--vbb-donker:#212934;--vbb-licht:#F2F2F2;--vbb-lijn:#E2E2E2;--vbb-grijs:#5F605F}

/* ---- Globaal (hele site, voorzichtig) ---- */
body{font-family:Epilogue,"Segoe UI",sans-serif}
.fusion-body .fusion-button.button-default,.fusion-body .fusion-button-default{border-radius:6px}
.fusion-body :focus-visible{outline:3px solid var(--vbb-navy);outline-offset:2px}

/* ---- Volle breedte op pagina's met onze blokken ---- */
.vbb-volbreed #main{padding-top:0!important;padding-bottom:0!important}
.vbb-volbreed #main>.fusion-row{max-width:none!important;padding:0!important}
.vbb-volbreed .fusion-page-title-bar{display:none}
.vbb-volbreed .post-content>.fusion-fullwidth,.vbb-volbreed .post-content>p{margin:0}

/* ---- Basis blokken ---- */
.vbb{font-family:Epilogue,"Segoe UI",sans-serif;color:var(--vbb-donker);line-height:1.5}
.vbb *,.vbb *::before,.vbb *::after{box-sizing:border-box}
.vbb h1,.vbb h2,.vbb h3{font-family:Epilogue,"Segoe UI",sans-serif;color:inherit;margin:0;letter-spacing:-.02em}
.vbb a{text-decoration:none}
.vbb-knop{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:6px;font-weight:800;font-size:17px;border:0;cursor:pointer;font-family:inherit}
.vbb-knop--geel{background:var(--vbb-geel);color:var(--vbb-donker)!important}
.vbb-knop--navy{background:var(--vbb-navy);color:#fff!important}
.vbb-knop--rand{border:2px solid #fff;color:#fff!important}
.vbb-knop:hover{filter:brightness(.95)}
.vbb-accent{font-weight:700;font-size:16px;color:var(--vbb-geel)}
.vbb-meta{font-size:14px;font-weight:700;color:var(--vbb-grijs)}
.vbb-klein{font-size:14px;color:var(--vbb-grijs)}
.vbb-link{font-weight:700;color:var(--vbb-navy)!important;font-size:17px}
.vbb-sectie{max-width:1280px;margin:0 auto;padding:88px 32px 40px}
.vbb-sectie--los{padding-top:40px}
.vbb-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px;flex-wrap:wrap}
.vbb-kop h2,.vbb-h1{font-weight:900;font-size:clamp(34px,4vw,54px);line-height:1}
.vbb-kop p,.vbb-lead{margin:10px 0 0;font-size:17px;color:var(--vbb-grijs);max-width:560px}
.vbb-h3{font-weight:900;font-size:clamp(26px,3vw,38px);margin-bottom:24px!important}

/* ---- Hero ---- */
.vbb-hero{position:relative;overflow:hidden;background:var(--vbb-navy);color:#fff;padding:88px max(32px,calc((100vw - 1280px)/2 + 32px)) 96px;min-height:640px;display:flex;align-items:center}
.vbb-band{position:absolute;width:min(820px,70vw);height:auto;right:-170px;top:-50px}
.vbb-hero-tekst{position:relative;max-width:640px;display:flex;flex-direction:column;gap:18px}
.vbb-hero h1{font-weight:900;font-size:clamp(40px,5.4vw,76px);line-height:.98;color:#fff}
.vbb-hero p{margin:0;font-size:20px;color:#D5DBE3;max-width:560px}
.vbb-zoekkaart{margin-top:10px;background:#fff;color:var(--vbb-donker);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px rgba(0,0,0,.3);max-width:600px}
.vbb-zoek-maat label{display:block;font-weight:700;margin-bottom:8px}
.vbb-zoek-maat small{font-weight:500;color:var(--vbb-grijs);margin-left:6px}
.vbb-maat-rij{display:flex;align-items:center;gap:8px}
.vbb-maat-rij span{font-weight:800;color:var(--vbb-grijs)}
.vbb-maat-rij select{flex:1;height:56px;border:2px solid var(--vbb-donker);border-radius:8px;font:800 22px Epilogue,sans-serif;padding:0 10px;background:#fff;color:var(--vbb-donker)}
.vbb-seizoen{border:0;margin:0;padding:5px;display:flex;gap:6px;background:var(--vbb-licht);border-radius:8px}
.vbb-seizoen legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vbb-seizoen label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:6px;font-weight:600;cursor:pointer}
.vbb-seizoen label:has(input:checked){background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);font-weight:800}
.vbb-seizoen input{accent-color:var(--vbb-navy)}

/* ---- USP ---- */
.vbb-usp{background:var(--vbb-geel);padding:26px max(32px,calc((100vw - 1280px)/2 + 32px));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.vbb-usp>div{display:flex;gap:14px;align-items:center}
.vbb-usp svg{flex-shrink:0;width:34px;height:34px}
.vbb-usp strong{display:block;font-size:17px}
.vbb-usp span{font-size:15px}

/* ---- Seizoenen ---- */
.vbb-seizoenen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vbb-seizoen-kaart{position:relative;overflow:hidden;min-height:300px;border-radius:12px;padding:32px;display:flex;flex-direction:column;justify-content:space-between}
.vbb-seizoen-kaart svg{position:absolute;right:-30px;top:-30px;width:220px;height:220px}
.vbb-seizoen-kaart strong{display:block;font-size:32px;font-weight:900}
.vbb-seizoen-kaart div span{font-size:17px}
.vbb-navy{background:var(--vbb-navy);color:#fff!important}.vbb-navy div span{color:#D5DBE3}
.vbb-licht{background:var(--vbb-licht);color:var(--vbb-donker)!important}.vbb-licht div span{color:var(--vbb-grijs)}
.vbb-donker{background:var(--vbb-donker);color:#fff!important}.vbb-donker div span{color:#D5DBE3}.vbb-donker .vbb-meta{color:#B9BDC3}

/* ---- Voertuigen ---- */
.vbb-voertuigen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.vbb-voertuig{border:1px solid var(--vbb-lijn);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:6px;color:var(--vbb-donker)!important}
.vbb-voertuig:hover{border-color:var(--vbb-navy)}
.vbb-voertuig-beeld{height:130px;border-radius:8px;background:var(--vbb-licht);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.vbb-voertuig-beeld svg{width:200px;height:100px}
.vbb-voertuig strong{font-size:20px}.vbb-voertuig span{color:var(--vbb-grijs);font-size:15px}

/* ---- Werkplaats ---- */
.vbb-werkplaats{margin-top:56px;background:var(--vbb-licht);padding:88px max(32px,calc((100vw - 1280px)/2 + 32px));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.vbb-werkplaats h2{font-weight:900;font-size:clamp(32px,4vw,52px);line-height:1;margin-bottom:20px!important}
.vbb-werkplaats p{font-size:18px;color:#4A4B4A;margin:0 0 24px}
.vbb-diensten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vbb-diensten a{background:#fff;border-radius:10px;padding:20px;display:flex;gap:16px;align-items:flex-start;color:var(--vbb-donker)!important}
.vbb-diensten a:hover{box-shadow:inset 0 0 0 2px var(--vbb-navy)}
.vbb-diensten svg{color:var(--vbb-navy);flex-shrink:0}
.vbb-diensten strong{display:block;font-size:18px}
.vbb-diensten span{color:var(--vbb-grijs)}

/* ---- Nieuws ---- */
.vbb-nieuws-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 26px}
.vbb-nieuws-kaart{display:flex;flex-direction:column;gap:12px;color:var(--vbb-donker)!important}
.vbb-nieuws-beeld{aspect-ratio:5/3;border-radius:12px;overflow:hidden;background:var(--vbb-licht)}
.vbb-nieuws-beeld img,.vbb-nieuws-beeld svg{width:100%;height:100%;object-fit:cover;display:block}
.vbb-nieuws-kaart strong{font-size:21px;line-height:1.25}
.vbb-nieuws-kaart:hover strong{text-decoration:underline}
.vbb-uittreksel{font-size:16px;color:#4A4B4A}
.vbb-nieuws-pagina{padding-top:72px}

/* ---- Merken ---- */
.vbb-merken{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.vbb-merken a{min-height:68px;border:1px solid var(--vbb-lijn);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;color:var(--vbb-donker)!important;text-align:center;padding:0 8px}
.vbb-merken a:hover{border-color:var(--vbb-navy)}
.vbb-merken a.vbb-uitgelicht{background:var(--vbb-navy);color:#fff!important;border-color:var(--vbb-navy)}

/* ---- CTA ---- */
.vbb-cta{max-width:1216px;margin:48px auto 88px;border-radius:16px;background:var(--vbb-navy);color:#fff;padding:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.vbb-cta h2{font-weight:900;font-size:clamp(30px,3.6vw,48px);line-height:1;color:#fff}
.vbb-cta p{font-size:19px;color:#D5DBE3;margin:14px 0 22px}
.vbb-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.vbb-cta-kaart{background:#fff;color:var(--vbb-donker);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:10px;font-size:17px}
.vbb-cta-kaart strong{font-size:22px}
.vbb-cta-kaart a{font-weight:700;color:var(--vbb-navy)!important;text-decoration:underline!important}
.vbb-leeg{font-size:17px;color:var(--vbb-grijs)}

/* ---- Bandenzoeker-pagina ---- */
.vbb-volbreed .vbbz{padding:48px 32px 88px}

/* ---- Leesbaarheid & breedte (1.1.0) ---- */
.vbb-volbreed #main{padding-left:0!important;padding-right:0!important}
.vbb-volbreed #main>.fusion-row,.vbb-volbreed .post-content,.vbb-volbreed #content{width:100%!important;max-width:none!important;float:none!important}
.vbb h1,.vbb h2,.vbb h3,.vbb strong{color:inherit!important}
.vbb-hero h1,.vbb-cta h2,.vbb-pagina-hero h1{color:#fff!important}
.vbb-hero-tekst{min-width:0;width:100%}
.vbb-zoekkaart{width:100%}
.vbb-maat-rij select{min-width:0;width:100%}

/* ---- Afspraak ---- */
.vbb-pagina-hero{background:var(--vbb-navy);color:#fff;padding:64px max(32px,calc((100vw - 1280px)/2 + 32px)) 56px}
.vbb-pagina-hero h1{font-weight:900;font-size:clamp(36px,5vw,64px);line-height:1;margin:8px 0 12px!important}
.vbb-pagina-hero p{margin:0;font-size:19px;color:#D5DBE3;max-width:600px}
.vbb-afspraak-raster{max-width:1280px;margin:0 auto;padding:40px 32px 88px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.vbb-keuze{border:2px solid var(--vbb-navy);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:16px}
.vbb-keuze strong{font-size:21px}
.vbb-keuze a{font-weight:700;color:var(--vbb-navy)!important;text-decoration:underline!important;font-size:15px}
.vbb-stap{font-weight:700;font-size:17px;margin:0 0 16px}
.vbb-melding{background:#FFF3B0;border-radius:10px;padding:16px 18px;margin-bottom:16px}
.vbb-planner-kader{background:#fff;border:1px solid var(--vbb-lijn);border-radius:12px;padding:20px;min-height:400px}
.vbb-afspraak-info{display:flex;flex-direction:column;gap:14px;position:sticky;top:120px}
.vbb-info-kaart{background:var(--vbb-licht);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px;font-size:16px}
.vbb-info-kaart strong{font-size:19px}
.vbb-info-kaart--geel{background:var(--vbb-geel)}
.vbb-info-kaart .vbb-knop{margin-top:6px}

.vbb-uitlijnen{background:#FFF3B0;border-radius:10px;padding:14px 16px;margin:0 0 16px;font-size:16px}

/* ---- Mobiel ---- */
@media (max-width:1000px){
  .vbb-usp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbb-seizoenen,.vbb-nieuws-raster{grid-template-columns:1fr}
  .vbb-voertuigen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbb-werkplaats,.vbb-cta{grid-template-columns:1fr}
  .vbb-merken{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vbb-band{opacity:.25;right:-200px}
  .vbb-cta{margin:32px 16px 56px;padding:32px}
}
@media (max-width:600px){
  .vbb-sectie{padding:56px 16px 24px}
  .vbb-hero{padding:48px 16px 56px;min-height:0}
  .vbb-zoekkaart{padding:16px}
  .vbb-maat-rij select{font-size:18px;height:52px;padding:0 4px}
  .vbb-seizoen{flex-direction:column}
  .vbb-voertuigen,.vbb-diensten{grid-template-columns:1fr}
  .vbb-merken{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vbb-werkplaats{padding:56px 16px}
  .vbb-hero h1{font-size:36px}
  .vbb-hero p{font-size:17px}
  .vbb-kop h2,.vbb-h1{font-size:32px}
  .vbb-kop{gap:12px;margin-bottom:20px}
  .vbb-seizoen-kaart{min-height:200px;padding:22px}
  .vbb-seizoen-kaart svg{width:140px;height:140px}
  .vbb-seizoen-kaart strong{font-size:26px}
  .vbb-usp{grid-template-columns:1fr;gap:14px;padding:22px 16px}
  .vbb-cta{padding:24px;gap:24px}
  .vbb-knoppen .vbb-knop{width:100%}
  .vbb-nieuws-kaart strong{font-size:19px}
  .vbb-pagina-hero{padding:40px 16px 36px}
  .vbb-afspraak-raster{padding:24px 12px 56px}
  .vbb-planner-kader{padding:10px}
  .vbb-volbreed .vbbz{padding:24px 12px 56px}
}
@media (max-width:1000px){
  .vbb-afspraak-raster{grid-template-columns:1fr}
  .vbb-afspraak-info{position:static}
}
@media (prefers-reduced-motion:reduce){.vbb *{transition:none!important}}
/* ---- 1.1.1: koppen tegen Avada in, planner binnen scherm ---- */
.vbb .vbb-hero h1{font-size:clamp(34px,5.4vw,76px)!important;line-height:1!important;overflow-wrap:break-word}
.vbb .vbb-kop h2,.vbb .vbb-h1{font-size:clamp(30px,4vw,54px)!important;line-height:1.05!important}
.vbb .vbb-pagina-hero h1{font-size:clamp(34px,5vw,64px)!important;line-height:1!important}
.vbb .vbb-werkplaats h2,.vbb .vbb-cta h2{font-size:clamp(28px,4vw,52px)!important;line-height:1.05!important}
.vbb .vbb-h3{font-size:clamp(24px,3vw,38px)!important}
.vbb-planner-kader{overflow-x:auto;max-width:100%}
@media (max-width:1000px){.vbb-afspraak-raster{grid-template-columns:minmax(0,1fr)}}

.vbb-seizoen .vbb-szi{display:inline-flex;gap:1px;margin-right:-2px}.vbb-seizoen .vbb-szi svg{display:block}