/* Handelsonderneming BBS — v20
   Layout en maten 1-op-1 overgenomen uit de gerenderde computed styles van
   abc-autolease.nl (Divi), gemeten op 1440 / 1100 / 980 / 768 / 390 px. */
:root{
  --zwart:#1c1c1c;
  --kaart:#333333;
  --lime:#B6D129;        /* rgb(182,209,41) */
  --lime-donker:#98b51c;
  --lime-lijn:#99af00;   /* rgb(153,175,0) – onderstreping "specialist"-kop */
  --lime-footer:#bdcb03; /* rgb(189,203,3) – footerkoppen */
  --lime-cta:#B5CE0A;    /* rgb(181,206,10) – kleur van home-shout-reviews.png (lime CTA-blok) */
  --link-donker:#555f00; /* rgb(85,95,0)   – links in lopende tekst */
  --wit:#ffffff;
  --grijs:#5a5a5a;
  --tekst:#666666;
  --kop:#333333;
  --mw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:hidden}
body{margin:0;padding-top:80px;font-family:"Baloo 2",system-ui,sans-serif;font-size:18px;line-height:1.7;font-weight:500;color:var(--tekst);background:var(--wit);-webkit-font-smoothing:antialiased}

/* Divi-koppen: line-height 1em, padding-bottom 10px, geen margin */
h1,h2,h3,h4{font-family:"Baloo 2",sans-serif;font-weight:700;line-height:1;margin:0;padding:0 0 10px;color:var(--kop);overflow-wrap:anywhere}
h1,h2,h3{text-transform:uppercase}
p{margin:0;padding:0 0 18px}
p:last-child{padding-bottom:0}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* Divi-rij: 80% breed, max 1140, padding 2% boven/onder */
.wrap{width:80%;max-width:var(--mw);margin:0 auto}
.breed{width:95%;max-width:2560px;margin:0 auto}   /* rijen met "brede" instelling (cards, blurbs) */
.ruim{width:90%;max-width:2560px;margin:0 auto}    /* rijen met 5% marge (specialist, voordelen) */
.rij{padding:2% 0}

/* lijn onder kop (Divi divider-module) */
.lijn{display:block;height:3px;background:var(--lime);width:50%;margin:0 0 30px}

/* knoppen (Divi et_pb_button) */
.knop{display:inline-block;text-decoration:none;font-family:"Baloo 2",sans-serif;font-size:18px;font-weight:500;line-height:1.7;padding:10px 18px;border:0;border-radius:3px;cursor:pointer;background:#000;color:var(--lime);text-align:center}
.knop:hover{color:#fff}
.knop.zwart{width:100%}
.knop.wit{background:#000;color:#fff;font-weight:700;padding:10px 30px}
.knop.wit:hover{color:var(--lime)}
.knop.lime{background:var(--lime);color:#000;font-weight:700;padding:10px 30px}
.knop.lime:hover{background:var(--lime-donker);color:#000}

/* ===== header (Divi: fixed, 80px, zwart) ===== */
.top{position:fixed;top:0;left:0;right:0;height:80px;background:#000;color:var(--wit);z-index:99999;box-shadow:0 1px 0 rgba(0,0,0,.1)}
.top .wrap{width:100%;max-width:none;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 82px 0 30px}
.logo{display:flex;align-items:center;text-decoration:none;font-family:"Baloo Chettan 2","Baloo 2",sans-serif;font-weight:700;font-size:21.6px;text-transform:uppercase;white-space:nowrap;line-height:1}
.logo b{color:var(--lime);font-weight:800}
.nav{display:flex;font-family:"Baloo Chettan 2","Baloo 2",sans-serif;font-size:16px;font-weight:600;line-height:14px}
.nav a{text-decoration:none;color:var(--wit);padding:0 22px 0 0}
.nav a:last-child{padding-right:0}
.nav a:hover{color:var(--lime)}
.nav a.actief{color:#c6c6c6}
.nav .ico{display:none;width:26px;height:26px;fill:var(--lime)}

/* ===== hero (et_pb_section_0) ===== */
.hero{position:relative;color:var(--wit);padding:100px 0 131px;overflow:hidden;
  background:linear-gradient(118deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.32) 100%),url("hero.jpg") 50% 58%/cover no-repeat #000}
.hero .wrap{position:relative;z-index:2}
.hero .kop{padding-top:9px}
.hero h1{font-size:3vw;line-height:1.2;color:#fff;margin:0 0 10px}
.hero-lijn{height:4px;background:var(--lime);margin:38px 0 28px}
.hero .check{list-style:none;padding:0 0 18px 33px;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:5.5%;font-size:18px;line-height:26px;color:#fff}
.hero .check li{position:relative;margin:0 0 7px}
.hero .check li::before{content:"\2714";position:absolute;left:-30px;top:3px;font-size:16px;line-height:1;color:#fff}
.hero .check li.vet{font-weight:700}
.hero .acties{display:grid;grid-template-columns:1fr 1fr;gap:3%;margin:28px 0}
.hero .actie{display:block;text-decoration:none;background:var(--wit);color:#000;border-radius:10px;padding:30px 30px 20px}
.hero .actie.lime{background:var(--lime)}
.hero .actie h3{font-size:25px;line-height:25px;color:#000;padding:0 0 10px}
.hero .actie .streep{display:block;height:3px;width:56%;background:#000;margin:0 0 4px}
.hero .actie:hover h3{color:#333}
/* onderrand: Divi bottom-divider "slant" (SVG met 50% en 100% dekking), 100px hoog */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100px;background:var(--lime);clip-path:polygon(0 100%,100% 30%,100% 100%);z-index:1}
.hero .band-licht{position:absolute;left:0;right:0;bottom:0;height:100px;background:var(--lime);opacity:.5;clip-path:polygon(0 100%,100% 0,100% 100%);z-index:1;pointer-events:none}

/* ===== tekst + foto (et_pb_section_1) ===== */
.split{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;background:#fff}
.split .tekst{padding:30px 0;margin:0 5%;max-width:90%;line-height:1.6}
.split h2{font-size:40px;line-height:40px;color:var(--kop);padding:0 0 10px}
.split .sub{font-size:26px;line-height:26px;font-weight:700;text-transform:uppercase;color:var(--lime);padding:0 0 10px}
.split p{font-size:18px;line-height:28.8px}
.split strong{color:var(--link-donker);font-weight:500}
.split .beeld{background:#2a2a2a url("split.jpg") 50% 50%/cover no-repeat;min-height:1px}

/* ===== donkere kaarten (et_pb_section_2) ===== */
.donker{background:#000;color:var(--wit);padding:4% 0;text-align:center}
.donker h2{font-size:44px;line-height:44px;color:#fff;padding:0 0 10px}
.donker .sub{font-size:40px;line-height:40px;font-weight:700;text-transform:uppercase;color:var(--lime);padding:0 0 10px}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:3%;text-align:left}
.kaart{background:var(--kaart);padding:30px 30px 20px;border-radius:10px;display:flex;flex-direction:column}
.kaart h3{font-size:25px;line-height:25px;color:#fff;padding:0 0 10px}
.kaart h3 a{text-decoration:none}
.kaart p{color:#fff;flex:1;padding-bottom:18px}

/* ===== lime CTA (et_pb_section_3 – vorm uit home-shout-reviews.png) ===== */
.lime-sectie{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.lime-sectie::before{content:"";position:absolute;inset:0;background:var(--lime-cta);clip-path:polygon(0 0,47.2% 0,50% 50%,47.2% 100%,0 100%)}
.lime-sectie>div{position:relative;padding:50px 10%}
.lime-sectie .links h2{font-size:52px;line-height:52px;color:var(--kop);padding:0 0 10px}
.lime-sectie .links h2 span{color:#fff}
.lime-sectie .rechts h3{font-size:26px;line-height:26px;font-weight:500;text-transform:none;color:var(--kop);padding:0 0 10px}
.bel-groot{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:52px;line-height:1;color:var(--link-donker);text-decoration:none;display:block;padding:0 0 10px}
.bel-groot:hover{color:var(--lime-donker)}
.contactregels{list-style:none;padding:0;margin:0;font-size:18px;line-height:30.6px}
.contactregels b{display:inline-block;min-width:7rem;font-weight:700;color:var(--kop)}
.contactregels a{color:var(--link-donker);text-decoration:none}
.contactregels a:hover{text-decoration:underline}

/* ===== zo geregeld / blurbs (et_pb_section_4) ===== */
.features{background:#f5f5f5;padding:4% 0}
.features .intro{margin:0 6.14%;text-align:center}
.features h2{font-size:32px;line-height:32px;padding:0 0 10px}
.features .intro p{font-size:18px;line-height:28.8px}
.grid6{display:grid;grid-template-columns:1fr 1fr;column-gap:3%;row-gap:56px}
.feat{display:grid;grid-template-columns:80px 1fr;align-items:start}
.feat svg{width:60px;height:60px;color:var(--lime);stroke-width:1.4;display:block}
.feat > div{padding-left:15px}
.feat h3{font-size:20px;line-height:20px;text-transform:none;color:var(--kop);padding:0 0 10px}
.feat p{font-size:18px;line-height:30.6px}

/* ===== inkoop / specialist (et_pb_section_5) ===== */
.inkoop{background:#fff;padding:4% 0 23px}
.inkoop .ruim{display:grid;grid-template-columns:64.833% 29.667%;column-gap:5.5%;padding:0 0 2%}
.inkoop h2{font-size:26px;line-height:26px;padding:0 0 10px;margin:0 0 12px}
.inkoop h2+.lijn{background:var(--lime-lijn)}
.inkoop .sub{font-size:26px;line-height:26px;font-weight:700;text-transform:uppercase;color:var(--lime);padding:0 0 10px}
.inkoop p{font-size:18px;line-height:28.8px}
.inkoop strong{font-weight:700}
.inkoop ol{padding-left:1.2rem;margin:0 0 24px;font-size:18px;line-height:28.8px}
.inkoop ol li{margin-bottom:10px}
.inkoop h3{font-size:23px;line-height:23px;padding:0 0 10px;margin:0 0 14px}
.inkoop form{background:#f5f5f5;padding:1.2rem;border-top:4px solid var(--lime)}
form{display:grid;gap:.7rem}
label{display:grid;gap:.3rem;font-size:15px;font-weight:600;color:#333}
input,textarea{font:inherit;font-size:16px;padding:.7rem .8rem;border:1px solid #cfcfcf;background:#fff;width:100%}
input:focus,textarea:focus{border-color:var(--zwart)}
textarea{min-height:5.5rem;resize:vertical}
.rij2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.hp{position:absolute;left:-9999px}
input[type=file]{padding:.5rem;background:#fff;font-weight:400}
.fotostatus{font-size:.85rem;color:var(--grijs);margin:-.3rem 0 0;min-height:1.2em;padding:0}

/* ===== voordelen (et_pb_section_6) ===== */
.voordelen{position:relative;color:var(--wit);padding:130px 0 90px;
  background:linear-gradient(212deg,rgba(66,94,0,.67) 0%,rgb(56,52,0) 100%),url("voordelen-bg.jpg") 50% 50%/cover no-repeat #fff}
.voordelen .golf-top{position:absolute;left:0;top:0;width:100%;height:200px;display:block;pointer-events:none}
.voordelen .golf-top path{fill:#fff}
.voordelen .kop{padding:2% 0 6px;position:relative}
.voordelen h2{font-size:60px;line-height:84px;text-transform:none;text-align:center;color:#fff;padding:0 0 10px}
.voordelen .twee{display:grid;grid-template-columns:58.8% 38.2%;column-gap:3%;max-width:1380px;position:relative}
.logoblok{background:#000;aspect-ratio:16/9;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:2rem}
.logoblok .logo{font-size:clamp(1.1rem,2.2vw,1.8rem);white-space:normal;text-align:center;justify-content:center;line-height:1.15}
.voordelen .lijst{padding-top:50px}
.voordelen .check{list-style:none;padding:0;margin:0}
.voordelen .check li{position:relative;padding:0 0 10px 47px;margin:0 0 19.44px;font-family:"Josefin Sans",sans-serif;font-size:18px;font-weight:600;line-height:28.8px}
.voordelen .check li:last-child{margin-bottom:0}
.voordelen .check li::before{content:"";position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--lime)}
.voordelen .check li::after{content:"";position:absolute;left:8px;top:6px;width:16px;height:16px;background:#fff;clip-path:polygon(14% 44%,0 62%,40% 100%,100% 18%,84% 4%,40% 68%)}

/* ===== footer (et_pb_section_0_tb_footer) ===== */
footer{background:#171717;border-top:5px solid var(--lime);color:#dbdbdb;font-size:18px;line-height:30.6px}
footer .slogan{margin:0 8.33%;padding:28px 0;text-align:center}
footer .slogan p{font-size:2.8vw;line-height:1.07;font-weight:600;color:#fff;text-transform:uppercase;padding:0}
footer .lijn-wit{border:0;border-top:1px solid #fff;margin:0 0 22px}
.kolommen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3%;padding:28px 0}
footer h3{font-size:22px;font-weight:600;line-height:30.6px;text-transform:none;color:var(--lime-footer);padding:0;margin:0 0 17px}
footer ul{list-style:disc;padding:0 0 18px 18px;margin:0;line-height:26px}
footer ul li::marker{color:#dbdbdb}
footer a{color:#e2e2e2;text-decoration:underline;overflow-wrap:anywhere}
footer a:hover{color:var(--lime)}
footer p{padding-bottom:18px}
footer p:last-child{padding-bottom:0}
.copy{border-top:1px solid #333;padding:14px 0 18px;color:#888;font-size:13px;line-height:1.6;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}
.copy a{color:#888}

/* ===== subpagina's ===== */
.pagina{padding:4% 0}
.pagina h1{font-size:40px;line-height:40px}
.pagina h2{font-size:23px;line-height:23px;margin-top:2rem}

/* =====================================================================
   Responsive – Divi-breekpunten: 980 (tablet) en 767 (telefoon)
   ===================================================================== */
@media (max-width:980px){
  body{padding-top:68px}
  .top{height:68px}
  .top .wrap{height:68px;padding:0 16px}
  .top .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:16px}
  .nav a:not(.bel){display:none}
  .nav .bel{position:absolute;left:16px;top:50%;transform:translate(0,-50%);display:flex;align-items:center;padding:0}
  .nav .bel span{display:none}
  .nav .ico{display:block}
  .wrap,.breed,.ruim{width:95%}
  .rij{padding:30px 0}
  .hero h1{font-size:3vw;line-height:1.2}
  .hero-lijn{margin:40px 0 30px}
  .hero .check{grid-template-columns:1fr;padding-bottom:30px}
  .hero .acties{grid-template-columns:1fr;gap:30px;margin:0 0 30px}
  .hero .actie .streep{margin-bottom:30px}
  .split{grid-template-columns:1fr;column-gap:0;width:95%;margin:0 auto}
  .split .tekst{margin:0 5% 30px}
  .split .beeld{height:300px}
  .donker,.features,.inkoop{padding:50px 0}
  .inkoop{padding-bottom:23px}
  .kaarten{grid-template-columns:1fr;gap:30px}
  .lime-sectie>div{padding:50px 10%}
  .features .intro{margin:0}
  .grid6{grid-template-columns:1fr;row-gap:30px}
  .inkoop .ruim{grid-template-columns:1fr;row-gap:30px;padding-bottom:30px}
  .voordelen{padding:120px 0}
  .voordelen .golf-top{height:110px}
  .voordelen h2{font-size:50px;line-height:70px}
  .voordelen .twee{grid-template-columns:1fr;row-gap:30px}
  .kolommen{grid-template-columns:1fr 1fr;column-gap:5.5%;row-gap:30px;padding:30px 0}
  footer h3{margin-bottom:30px}
}
@media (max-width:767px){
  .hero{padding:5% 0 20px}
  .hero h1{font-size:36px;line-height:43.2px}
  .hero-lijn{margin:0 0 20px}
  .hero .check{display:none}
  .hero .acties{margin-top:35vw}
  .hero .actie{padding-bottom:0}
  .hero .actie .streep{margin-bottom:30px}
  .hero::after,.hero .band-licht{height:100px}
  .split h2{font-size:36px;line-height:36px}
  .split .sub{font-size:22px;line-height:22px}
  .lime-sectie{grid-template-columns:1fr}
  .lime-sectie::before{clip-path:polygon(0 0,100% 0,100% 44%,50% 50%,0 44%)}
  .lime-sectie .links h2{font-size:40px;line-height:40px}
  .features h2{font-size:26px;line-height:26px}
  .voordelen{padding:60px 0}
  .voordelen .golf-top{height:70px}
  .voordelen h2{font-size:34px;line-height:47.6px}
  .rij2{grid-template-columns:1fr}
  footer .slogan p{font-size:30px;line-height:1.1}
  .kolommen{grid-template-columns:1fr}
}
@media (min-width:981px) and (max-width:1100px){
  .hero .check{padding-bottom:22px}
}