/* ==========================================================================
   Template 16 : gemeten nabouw van budgetautoveiling.nl (Elementor, 30-09-2026)
   Alle maten zijn gemeten op 1440 / 1728 / 390 (bron/meting). Kleuren komen uit
   tokens die bouw.py uit het klantlogo afleidt; de bronwaarden staan als fallback.
   Breakpoints van de bron: >1366 basis, <=1366, <=1024, <=767.
   ========================================================================== */
:root{
  --brand:#3d8180;            /* gemeten: --e-global-color-secondary/accent */
  --brand-rgb:61,129,128;
  --brand-licht:#a8e6cf;      /* gemeten: bovenkant verloop stapnummers + radiale gloed */
  --brand-licht-rgb:168,230,207;
  --brand-zacht:#aac8c7;      /* gemeten pixel: vorm achter de over-ons-foto */
  --brand-donker:#2c5f5e;
  --zwart:#000;
  --ink:#212121;              /* gemeten: --e-global-color-673a004 */
  --tekst:#4d4d4d;            /* gemeten: --e-global-color-text */
  --grijs-bg:#f9f9f9;         /* gemeten: logobalk en footer */
  --rand:#888;                /* gemeten: formulierveld */
  --wit:#fff;
  --whatsapp:#075e54;         /* gemeten: Wp.svg in de header */
  --whatsapp-licht:#25d366;
  --kop:"Funnel Display","Make Sans",system-ui,sans-serif;   /* vervangt Make Sans 800 (99,5% breedte) */
  --tekstfont:"Urbanist","Make it sans",system-ui,sans-serif; /* vervangt Make it Sans (100,1% breedte) */
  --ui:"Poppins",system-ui,sans-serif;
  --h1:50px;--h1-lh:66px;     /* gemeten: primary */
  --h2:45px;--h2-lh:60px;     /* gemeten: secondary */
  --h3:22px;--h3-lh:33px;     /* gemeten: 142bbd2 */
  --h3g:24px;--h3g-lh:36px;   /* gemeten: 5bbc022 */
  --marge:80px;               /* 30 padding + 50 marge in de bron */
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(max-width:1366px){:root{--h1:42px;--h1-lh:55px;--h2:32px;--h2-lh:45px;--h3:20px;--h3-lh:32px;--h3g:22px;--h3g-lh:36px}}
@media(max-width:1024px){:root{--h1:36px;--h1-lh:48px;--h2:28px;--h2-lh:36px;--h3g:20px;--h3g-lh:34px;--marge:2.5%}}
@media(max-width:767px){:root{--h1:28px;--h1-lh:40px;--h2:26px;--h2-lh:36px;--h3:18px;--h3-lh:28px;--marge:5%}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--tekstfont);font-size:16px;line-height:28px;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--brand);color:#fff;padding:10px 16px}
.skip:focus{left:10px;top:10px}

.wrap{width:min(1280px,100% - 2*var(--marge));margin-inline:auto;position:relative}
@media(max-width:1024px){.wrap{width:95%}}
@media(max-width:767px){.wrap{width:90%}}

/* ---------- typografie ---------- */
h1,.h1{font-family:var(--kop);font-weight:800;font-size:var(--h1);line-height:var(--h1-lh);color:var(--zwart)}
h2,.h2{font-family:var(--kop);font-weight:800;font-size:var(--h2);line-height:var(--h2-lh);color:var(--ink)}
.acc{color:var(--brand)}
.tekst p+p{margin-top:28px}
.tekst strong,.tekst b{font-weight:700;color:var(--ink)}
.tekst a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.midden{text-align:center}

/* eyebrow-pill: gemeten Poppins 500 16/24, ls .8px, 5px 20px, radius 60, bg merkkleur, tekst wit.
   Op de gekleurde panelen: witte pill met merkkleurige tekst (zo in de bron). */
.eyebrow{display:inline-block;align-self:flex-start;background:var(--brand);color:var(--wit);font-family:var(--ui);font-weight:500;font-size:16px;line-height:24px;letter-spacing:.8px;text-transform:uppercase;padding:5px 20px;border-radius:60px}
.midden .eyebrow,.kop .eyebrow{align-self:center}
.kop.links .eyebrow{align-self:flex-start}
.op-kleur .eyebrow{background:var(--wit);color:var(--brand)}
@media(max-width:767px){.eyebrow{letter-spacing:.1px}}

/* knoppen: gemeten Poppins 600 18/27, 17px 37px, radius 60, hover zwart (bron: primary #000), transition .3s */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--brand);color:var(--wit);font-family:var(--ui);font-weight:600;font-size:18px;line-height:27px;padding:17px 37px;border-radius:60px;border:0;cursor:pointer;text-align:center;transition:background-color .3s,color .3s}
.knop:hover,.knop:focus-visible{background:var(--zwart);color:var(--wit)}
.knop.wit{background:var(--wit);color:var(--ink)}
.knop.wit:hover{background:var(--zwart);color:var(--wit)}
.knop-rij{display:flex;gap:16px;flex-wrap:wrap}
.midden .knop-rij,.knop-rij.midden{justify-content:center}
@media(max-width:767px){.knop{padding:12px 26px;width:100%}.knop-rij{width:100%}}

/* ---------- topbalk (gemeten: 70 hoog, bg merkkleur, 20px verticaal, gap 30) ---------- */
.topbalk{background:var(--brand);color:var(--wit)}
.topbalk .wrap{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px 0;min-height:70px}
.topbalk .socials{display:flex;gap:10px}
.topbalk .socials a{width:30px;height:30px;border:2px solid var(--wit);border-radius:60px;display:flex;align-items:center;justify-content:center;color:var(--wit);transition:background-color .3s,color .3s}
.topbalk .socials a:hover{background:var(--wit);color:var(--brand)}
.topbalk .socials svg{width:16px;height:16px}
.topbalk ul{display:flex;align-items:center}
.topbalk li{display:flex;align-items:center;margin:0 15px;font-family:var(--ui);font-weight:600;font-size:16px;line-height:24px}
.topbalk li+li{border-left:1px solid rgba(255,255,255,.35);padding-left:15px;margin-left:0}
.topbalk li a,.topbalk li span{display:flex;align-items:center;gap:12.5px}
.topbalk .ic30{width:30px;height:30px;border:2px solid var(--wit);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.topbalk .ic30 svg{width:15px;height:15px}
@media(max-width:767px){
  .topbalk .wrap{padding:12px 0;min-height:54px}
  .topbalk .socials,.topbalk li.adres,.topbalk li.tel{display:none}
  .topbalk li{margin:0;border:0!important;padding:0!important}
}

/* ---------- header (gemeten: 98 hoog, wit, schaduw 0 0 10 .1) ----------
   Vaste menubalk (Dikkie 30-09, vastgelegd 05-10-2026): de kop is sticky met top = -topbalkhoogte, dus de
   infobalk (70, mobiel 54) schuift weg en de witte balk met logo en "Afspraak maken" blijft bovenin staan.
   Tablet/mobiel: compacte afspraakknop links, logo midden, bellen + menu rechts; na scrollen (.vast, site.js)
   wordt de balk 120 -> 76 zonder dat de inhoud verspringt (padding-bottom vangt het verschil op). */
.kop-header{position:sticky;top:-70px;z-index:70;pointer-events:none;transition:padding-bottom .3s var(--ease)}
.kop-header>*{pointer-events:auto}
[id]{scroll-margin-top:110px}
.header{position:relative;z-index:50;background:var(--wit);box-shadow:0 0 10px rgba(0,0,0,.1)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:98px}
.logo{display:block;width:196px;padding:0 10px}
.logo img{width:100%;height:78px;object-fit:contain}
.nav-rechts{display:flex;align-items:center;gap:15px;justify-content:flex-end}
.nav>ul{display:flex;align-items:center}
.nav>ul>li{position:relative}
.nav>ul>li>a{display:flex;align-items:center;gap:6px;padding:30px 0;margin:0 6.5px;font-family:var(--ui);font-weight:600;font-size:16px;line-height:24px;color:var(--ink);position:relative}
.nav>ul>li:first-child>a{margin-left:0}
.nav>ul>li:last-child>a{margin-right:0}
/* actieve/hover-aanwijzer: gemeten SVG 56x9 (lijn 3px + driehoekje), 10px hoog op top:74 */
.nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;top:74px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='9' viewBox='0 0 56 9' fill='none'%3E%3Cpath d='M2 7.5L54 7.5' stroke='%23212121' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M28.5 0.5L23 6H33L28.5 0.5Z' fill='%23212121'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:0;transition:opacity .3s}
.nav>ul>li>a.actief::after,.nav>ul>li>a:hover::after{opacity:1}
.nav .pijl{width:16px;height:16px;margin-left:4px}
.nav .sub{position:absolute;top:100%;left:0;min-width:280px;background:var(--wit);box-shadow:0 10px 30px -10px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s;z-index:60}
.nav li:hover>.sub,.nav li:focus-within>.sub,.nav li.open>.sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{display:block;padding:13px 20px;font-family:var(--ui);font-size:18px;line-height:20px;font-weight:400;color:#33373d;transition:background-color .3s,color .3s}
.nav .sub a:hover,.nav .sub a.actief{background:var(--brand);color:var(--wit)}
.header .knop{padding:17px 40px}
.wa-rond{width:60px;height:60px;border-radius:50%;background:var(--whatsapp);color:var(--wit);display:flex;align-items:center;justify-content:center;transition:transform .3s}
.wa-rond:hover{transform:scale(1.1)}
.wa-rond svg{width:27px;height:27px}
.mob-tel,.hamburger,.mob-rechts,.header .knop.mob-cta{display:none}
@media(max-width:1200px){.nav>ul>li>a{font-size:15px;margin:0 4px}.header .knop{padding:14px 26px;font-size:16px}}
@media(max-width:1024px){
  .kop-header{top:0}   /* tablet: topbalk verborgen (bron hidden-tablet) */
  .nav,.header .knop,.wa-rond{display:none}
  .header .wrap{min-height:120px;padding:20px 0;display:grid;grid-template-columns:1fr auto 1fr;column-gap:10px;transition:min-height .3s var(--ease),padding .3s var(--ease)}
  .header .knop.mob-cta{display:inline-flex;grid-column:1;grid-row:1;justify-self:start;width:auto;padding:10px 14px;font-size:14px;line-height:18px;white-space:nowrap}
  .logo{grid-column:2;grid-row:1;justify-self:center}
  .mob-rechts{display:flex;grid-column:3;grid-row:1;justify-self:end;align-items:center;gap:8px}
  .mob-tel,.hamburger{display:flex;width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--wit);align-items:center;justify-content:center;border:0;cursor:pointer;padding:0}
  .mob-tel svg{width:18px;height:18px}.hamburger svg{width:24px;height:24px}
  .logo{width:150px;padding:0}
  .logo img{height:60px;transition:height .3s var(--ease)}
  /* na scrollen compacter: balk 76, logo 48 hoog; padding-bottom houdt de kop even hoog, dus geen sprong */
  .kop-header.vast{padding-bottom:44px}
  .kop-header.vast .header .wrap{min-height:76px;padding:10px 0}
  .kop-header.vast .logo img{height:48px}
  [id]{scroll-margin-top:90px}
}
@media(max-width:767px){
  .kop-header{top:-54px}   /* mobiel: de infobalk (54, e-mail) schuift weg */
  .logo{width:135px}       /* = de getoonde breedte van het logo op 60 hoog, ruimte voor de knop links */
}
@media(max-width:360px){
  /* 320: knop, logo en menu passen niet naast het belrondje; bellen blijft via de vaste spoedknop onderin */
  .mob-tel{display:none}
  .header .wrap{grid-template-columns:auto 1fr auto}
  .logo{width:120px}
}
/* mobiel menu: uitklappend onder de header, volle breedte, als laag over de pagina (header staat vast) */
.mobnav{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 76px);max-height:calc(100svh - 76px);overflow-y:auto;overscroll-behavior:contain;background:var(--wit);box-shadow:0 12px 20px -12px rgba(0,0,0,.2)}
.mobnav.open{display:block}
.mobnav a{display:block;padding:14px 5%;font-family:var(--ui);font-weight:500;font-size:16px;line-height:24px;color:var(--ink);border-top:1px solid #eee}
.mobnav a.actief,.mobnav a:hover{background:var(--brand);color:var(--wit)}
.mobnav .subkop{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;border-top:1px solid #eee;padding:14px 5%;font-family:var(--ui);font-weight:500;font-size:16px;color:var(--ink);cursor:pointer}
.mobnav .subkop svg{transition:transform .3s}
.mobnav .subkop[aria-expanded="true"] svg{transform:rotate(180deg)}
.mobnav .sublijst{display:none;background:var(--grijs-bg)}
.mobnav .sublijst.open{display:block}
.mobnav .sublijst a{padding-left:9%;font-weight:400}
@media(min-width:1025px){.mobnav{display:none!important}}

/* ---------- hero (gemeten: verloop transparant -> merkkleur .2; 90/180 padding; kolommen 614 space-between) ---------- */
.hero{background:linear-gradient(180deg,rgba(2,1,1,0) 0%,rgba(var(--brand-rgb),.2) 100%)}
.hero .wrap{display:flex;justify-content:space-between;align-items:flex-start;padding:90px 0 180px}
.hero-tekst{width:48%;display:flex;flex-direction:column;gap:20px}
.hero-tekst .tekst{margin:10px 0}
.hero-beeld{width:48%;position:relative}
.ic-lijst{display:flex;flex-direction:column;gap:19px}
.ic-lijst li{display:flex;align-items:center;gap:12px;font-family:var(--tekstfont);font-weight:700;font-size:18px;line-height:28px;color:var(--zwart)}
.ic-lijst li svg{width:28px;height:28px;flex:none;color:var(--zwart)}
.hero .knop-rij{margin-top:10px}
@media(max-width:1024px){.hero .wrap{padding:60px 0 140px}}
@media(max-width:767px){
  .hero .wrap{flex-direction:column;gap:30px;padding:50px 0 80px}
  .hero-tekst,.hero-beeld{width:100%}
  .ic-lijst li{align-items:flex-start}
}

/* telefoon-mockup in de hero: gemeten op Hero-Image-954x1024 van de bron. Alle maten in cqw van een ontwerpraster
   van 954 breed (1cqw = 9,54 ontwerp-px), zodat de verhoudingen op elke breedte exact gelijk blijven.
   Lagen: toestel (0..522), scherm met scène zonder auto, info, knop; daarboven de losse auto (rechts uit het toestel,
   gemeten bbox bron 115..950 x 372..715) en de Google-badge (cirkel 570..660, tekst vanaf 686). */
.mockup{position:relative;width:100%;aspect-ratio:954/1024;container-type:inline-size}
.toestel{position:absolute;left:0;top:0;width:54.717cqw;height:106.918cqw;border-radius:8.176cqw;background:#0b0b0b;
  box-shadow:inset 0 0 0 0.314cqw #a9acb0,inset 0 0 0 0.629cqw #1b1b1b,0 3.145cqw 5.241cqw -2.621cqw rgba(0,0,0,.45)}
.toestel::before{content:"";position:absolute;top:2.725cqw;left:50%;transform:translateX(-50%);width:26.205cqw;height:4.193cqw;background:#0b0b0b;border-radius:0 0 2.725cqw 2.725cqw;z-index:3}
.toestel::after{content:"";position:absolute;top:3.983cqw;left:calc(50% + 5.031cqw);width:1.258cqw;height:1.258cqw;border-radius:50%;background:#1d2a44;z-index:4}
.scherm{position:absolute;left:2.725cqw;top:2.725cqw;right:2.725cqw;bottom:2.725cqw;border-radius:5.870cqw;overflow:hidden;background:#f3f4f4}
.scherm-foto{position:absolute;left:0;top:0;right:0;height:70.126cqw}
.scherm-foto img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.scherm-balk{position:absolute;left:0;right:0.629cqw;top:5.451cqw;height:5.765cqw;display:flex;align-items:center;justify-content:space-between;padding-left:3.145cqw;background:rgba(150,178,190,.55);color:#fff;font-family:var(--tekstfont);font-size:2.201cqw;font-weight:500}
.scherm-balk span{display:flex;align-items:center;height:100%;gap:1.887cqw}
.scherm-balk span>svg{width:2.621cqw;height:2.621cqw}
.scherm-balk .ok{width:8.071cqw;height:100%;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center}
.scherm-balk .ok b{width:3.564cqw;height:3.564cqw;border-radius:50%;background:#c9e8c0;display:flex;align-items:center;justify-content:center}
.scherm-balk .ok svg{width:2.096cqw;height:2.096cqw;color:#43a047;stroke-width:3.5}
.scherm-info{line-height:1.35;position:absolute;left:0;right:0;top:70.126cqw;height:12.579cqw;display:grid;grid-template-columns:18.029cqw 14.465cqw 1fr;font-family:var(--tekstfont);font-size:1.782cqw;line-height:2.411cqw;color:#111;text-align:center;background:#f7f7f7}
.scherm-info>div{display:flex;flex-direction:column;justify-content:center;padding:0 0.629cqw}
.scherm-info>div+div{border-left:0.210cqw solid #e2e2e2;margin:1.258cqw 0}
.scherm-info b{font-weight:700}
.scherm-specs{position:absolute;left:0;right:0;top:82.914cqw;height:5.451cqw;display:flex;align-items:center;justify-content:space-between;padding:0 2.306cqw 0 2.725cqw;border-top:0.210cqw solid #e2e2e2;border-bottom:0.210cqw solid #e2e2e2;font-family:var(--tekstfont);font-size:1.782cqw;color:#111;background:#f7f7f7}
.scherm-specs{line-height:1.3}
.scherm-specs .hot{line-height:1.35;background:#fff000;padding:0.314cqw 0.943cqw;font-weight:700;font-size:1.520cqw;white-space:nowrap}
.scherm .scherm-knop{position:absolute;left:2.725cqw;width:42.558cqw;top:90.042cqw;height:5.556cqw;border-radius:2.830cqw;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--kop);font-weight:700;font-size:2.621cqw;letter-spacing:-.01em}
.scherm .thuisbalk{position:absolute;left:14.570cqw;top:99.790cqw;width:19.916cqw;height:0.524cqw;border-radius:0.314cqw;background:#1a1a1a}
.mockup-auto{position:absolute;left:15.514cqw;top:29.560cqw;width:84.277cqw;height:auto;z-index:3;filter:drop-shadow(0 1.048cqw 1.258cqw rgba(0,0,0,.28));pointer-events:none}
.google-badge{position:absolute;left:59.748cqw;top:22.851cqw;display:flex;align-items:center;gap:2.725cqw;font-family:var(--ui);color:#111;z-index:2}
/* Google-beoordeling zonder vak (vaste regel Dikkie 01-10-2026): geen cirkel, rand of achtergrond; G in eigen kleuren, tekst donker op de lichte hero */
.google-badge{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.google-badge .g{width:6cqw;height:6cqw;border-radius:0;border:0;background:none;display:flex;align-items:center;justify-content:center}
.google-badge .g svg{width:5.6cqw;height:5.6cqw}
.google-badge b{display:block;font-weight:500;font-size:2.516cqw;line-height:3.354cqw}
.google-badge .score{display:flex;align-items:center;gap:1.048cqw;font-weight:600;font-size:2.306cqw;line-height:3.564cqw}
.google-badge small{display:block;font-size:1.782cqw;line-height:2.725cqw;color:#222}
.sterren{display:inline-flex;gap:1px;color:#fbbc04}
.google-badge .sterren{color:#f7c600;gap:0.419cqw}
.google-badge .sterren svg{width:2.830cqw;height:2.830cqw}

/* ---------- zoekformulier-kaart (gemeten: wit, 50/48, radius 30, -60 over de hero, schaduw 0 1 25 -8 .3) ---------- */
.zoekblok{position:relative;z-index:2}
.zoekblok .wrap{padding:0 30px}
.zoekkaart{background:var(--wit);padding:50px 48px;margin-top:-60px;border-radius:30px;box-shadow:0 1px 25px -8px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:30px}
.zoekkaart h2{text-align:center}
.zoekform{display:grid;grid-template-columns:1fr 1fr;gap:15px 20px}
.zoekform .veld{position:relative}
.zoekform select,.zoekform input,.zoekform textarea{width:100%;min-height:59px;padding:7px 20px;border:1px solid var(--rand);border-radius:50px;background:var(--wit);font-family:var(--ui);font-size:18px;line-height:27px;color:#7a7a7a;appearance:none;-webkit-appearance:none;outline:none;transition:border-color .3s}
.zoekform select:focus,.zoekform input:focus{border-color:var(--brand)}
.zoekform input::placeholder{color:#a3a3a3}
.zoekform select{padding-right:44px;cursor:pointer}
.zoekform .veld.keuze::after{content:"";position:absolute;right:15px;top:50%;margin-top:-3px;border:5.5px solid transparent;border-top-color:#7a7a7a;pointer-events:none}
.zoekform .extra{display:none}
.zoekform.meer .extra{display:block}
.zoekform .meer-knop{background:none;border:0;padding:0;font-family:var(--ui);font-weight:500;font-size:18px;line-height:27px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;justify-self:start;align-self:start}
.zoekform button[type=submit]{min-height:59px;width:100%;padding:0 20px}
.zoekform .gotcha{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.zoekform .melding{grid-column:1/-1;font-family:var(--ui);font-size:15px;color:var(--brand);display:none}
@media(max-width:767px){
  .zoekblok .wrap{padding:0}
  .zoekkaart{padding:30px 20px;margin-top:-40px;gap:24px}
  .zoekform{grid-template-columns:1fr}
  .zoekform .meer-knop{order:9}.zoekform button[type=submit]{order:10}
}
.no-js .zoekform .extra{display:block}.no-js .zoekform .meer-knop{display:none}

/* ---------- logobalk (gemeten: #f9f9f9, 100 boven, 30/30 padding, slides 197 + 20) ---------- */
.logobalk{background:var(--grijs-bg);margin-top:100px}
.logobalk.zonder-marge{margin-top:0}
.logobalk .wrap{padding:30px 0;overflow:hidden}
.marquee{display:flex;width:max-content;animation:loop var(--duur,40s) linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee li{width:197px;height:73px;margin-right:20px;display:flex;align-items:center;justify-content:center;flex:none}
.marquee img{max-width:180px;max-height:34px;width:auto;height:auto;object-fit:contain}
.marquee .g-logo{display:flex;align-items:center;gap:10px;font-family:var(--ui);color:#111;white-space:nowrap}
.marquee .g-logo>span:last-child{display:flex;flex-direction:column}
.marquee .g-logo span span{display:flex;align-items:center;gap:4px}
.marquee .g-logo{background:none;border:0;border-radius:0;padding:0;box-shadow:none}   /* zonder vak, vaste regel Dikkie 01-10-2026; donker op de lichte logobalk */
.marquee .g-logo .g{width:32px;height:32px;border-radius:0;border:0;display:flex;align-items:center;justify-content:center;background:none}
.marquee .g-logo b{display:block;font-size:13px;font-weight:500;line-height:16px}
.marquee .g-logo span{display:block;font-size:13px;font-weight:600;line-height:16px}
.marquee .g-logo small{display:block;font-size:11px;line-height:14px}
.marquee .g-logo .sterren svg{width:12px;height:12px}
@keyframes loop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.marquee li[aria-hidden]{display:none}}

/* ---------- gesplitst blok: foto met vorm + tekst (gemeten: 100 boven, kolommen 614, tekstkolom gap 30) ---------- */
.split .wrap{display:flex;justify-content:space-between;align-items:center;padding:100px 0 0}
.split.pb .wrap{padding-bottom:100px}
.split-foto{width:48%;position:relative}
.split-tekst{width:48%;display:flex;flex-direction:column;gap:30px;justify-content:center}
.split.omgekeerd .wrap{flex-direction:row-reverse}
/* foto met vorm: gemeten op Group-1000012058 (991x1024, getoond 614x635). Maten in cqw van de blokbreedte.
   Kader: links 14,83%, boven 11,02% van de hoogte (=11,40cqw), radius 22/991. Vorm links: x 0..~30%, y 40,5..90%,
   boog linksboven (r 147x275 bronpx), hoek linksonder 35. Vorm rechtsboven: x 76,2..100%, y 3,9%, boog linksboven,
   hoek rechtsboven 30. Optioneel steekt het hoofd van de persoon 6% boven het kader uit (losse uitsnede). */
.fotovorm{position:relative;width:100%;aspect-ratio:614/635;container-type:inline-size;overflow:hidden}
.fotovorm .vorm{position:absolute;inset:0}
.fotovorm .vorm::before{content:"";position:absolute;left:0;top:41.9cqw;width:30cqw;height:51.3cqw;background:var(--brand-zacht);border-radius:49.5% 0 0 11.8% / 54% 0 0 6.9%}
.fotovorm .vorm::after{content:"";position:absolute;left:76.2cqw;top:4.04cqw;width:23.8cqw;height:16cqw;background:var(--brand-zacht);border-radius:74% 12.7% 0 0 / 46% 19% 0 0}
.fotovorm .kader{position:absolute;left:14.83cqw;top:11.40cqw;width:85.17cqw;height:92.02cqw;border-radius:2.22cqw;overflow:hidden}
.fotovorm .kader img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* variant met uitstekend hoofd: foto op volle breedte van het kader, hoogte uit de beeldverhouding, geplaatst via --top */
.fotovorm.hoofd .kader{overflow:visible;border-radius:0}
.fotovorm.hoofd .kader img.foto{position:absolute;left:0;top:var(--top);width:100%;height:auto;clip-path:inset(var(--clip-top) 0 var(--clip-onder) 0 round 2.22cqw)}
.fotovorm.hoofd .kader img.hoofd{position:absolute;left:0;top:var(--top);width:100%;height:auto;object-fit:initial;clip-path:inset(0 0 var(--clip-hoofd) 0);z-index:1}
.citaat{background:var(--grijs-bg);padding:20px 40px 20px 20px;border-radius:10px;border-left:2px solid var(--brand);font-family:var(--ui);font-style:italic;font-size:16px;line-height:27px;color:var(--tekst)}
.citaat b{font-weight:700;color:var(--ink)}
.pijl-lijst{display:flex;flex-direction:column;gap:10px}
.pijl-lijst li{display:flex;align-items:flex-start;gap:5px;font-family:var(--tekstfont);font-weight:700;font-size:18px;line-height:28px;color:var(--zwart)}
.pijl-lijst li svg{width:20px;height:20px;flex:none;margin-top:4px;stroke-width:3}
.deco-auto{position:absolute;pointer-events:none;z-index:1}
.split .deco-auto{right:calc(-1 * (100vw - 100%) / 2);bottom:-80px;width:210px}
@media(max-width:1024px){.split .deco-auto{display:none}}
@media(max-width:767px){
  .split .wrap,.split.omgekeerd .wrap{flex-direction:column-reverse;gap:30px;padding-top:60px}
  .split.foto-boven .wrap{flex-direction:column}
  .split-foto,.split-tekst{width:100%}
}

/* ---------- sectiekop (gecentreerd, gap 30, tekst 840 breed) ---------- */
.kop{display:flex;flex-direction:column;gap:30px;align-items:center;text-align:center}
.kop .tekst{max-width:840px}
.kop.breed .tekst{max-width:1000px}
.kop.links{align-items:flex-start;text-align:left}
.gloed{background:radial-gradient(rgba(var(--brand-licht-rgb),.18) 41%,rgba(249,249,249,0) 62%)}

/* ---------- diensten (gemeten: 150/120 padding, gap 60; kaarten 410x223, gap 30/24, padding 30, radius 10) ---------- */
.diensten .wrap{padding:150px 0 120px;display:flex;flex-direction:column;gap:60px}
.diensten .deco-auto{right:calc(-1 * (100vw - 100%) / 2);top:-60px;width:220px}
.dienstgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 24px}
.dienstkaart{width:calc((100% - 48px)/3);background:var(--wit);padding:30px;border-radius:10px;border:1px solid var(--wit);box-shadow:0 0 35px rgba(0,0,0,.07);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
a.dienstkaart:hover{transform:translateY(-4px);box-shadow:0 10px 35px rgba(0,0,0,.1)}
.dienstkaart h3{font-family:var(--kop);font-weight:600;font-size:var(--h3);line-height:var(--h3-lh);color:var(--ink);margin-top:8px}
.ic-rond{width:100px;height:100px;border-radius:50%;background:rgba(var(--brand-rgb),.22);display:flex;align-items:center;justify-content:center;flex:none}
.ic-rond span{width:76px;height:76px;border-radius:50%;background:var(--brand);color:var(--wit);display:flex;align-items:center;justify-content:center}
.ic-rond svg{width:40px;height:40px}
.diensten .knop-rij{justify-content:center}
@media(max-width:1024px){.dienstkaart{width:calc((100% - 24px)/2)}}
@media(max-width:767px){.diensten .wrap{padding:80px 0 60px;gap:40px}.dienstkaart{width:100%}}

/* ---------- redenen: 3 kaarten, icoon links (gemeten op landingspagina's) ---------- */
.redenen .wrap{padding:100px 0 0;display:flex;flex-direction:column;gap:30px}
.redenen .kop{margin-bottom:30px}
.redengrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.redenkaart{background:var(--wit);padding:30px 20px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.07);display:flex;flex-direction:column;gap:20px}
.redenkaart h3{font-family:var(--ui);font-weight:600;font-size:var(--h3);line-height:var(--h3-lh);color:var(--ink);margin-top:8px}
.redenkaart p{font-size:16px;line-height:28px}
.redenen .knop-rij{justify-content:center;margin-top:10px}
@media(max-width:1024px){.redengrid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.redenen .wrap{padding-top:60px}.redengrid{grid-template-columns:1fr}}

/* ---------- paneel op merkkleur met foto (gemeten: 120/60 padding, radius 10, gap 60; tekst 812 breed) ---------- */
.paneel-sectie .wrap{padding:0}
.paneel-sectie.pt .wrap{padding-top:100px}
.paneel{position:relative;border-radius:10px;padding:120px 60px;display:flex;flex-direction:column;gap:60px;align-items:center;background:var(--brand);isolation:isolate}
.paneel::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--foto) center/cover no-repeat;opacity:.13;mix-blend-mode:luminosity;z-index:-1}
.paneel .kop{max-width:812px}
.paneel h2,.paneel .tekst{color:var(--wit)}
.paneel.klein{padding:60px 60px;gap:40px}
.uspgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%}
.uspkaart{background:var(--wit);padding:30px 20px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.07);display:flex;flex-direction:column;gap:20px}
.uspkaart h3{font-family:var(--kop);font-weight:600;font-size:var(--h3);line-height:var(--h3-lh);color:var(--ink);margin-top:8px}
.uspkaart.midden{align-items:center;text-align:center}
.uspgrid.drie{grid-template-columns:repeat(3,minmax(0,310px));justify-content:center}
.uspgrid.drie .uspkaart{padding:30px 20px;gap:16px}
.uspgrid.drie .uspkaart h3{font-size:16px;line-height:24px;margin:0}
.uspgrid.drie .ic-klein{color:var(--brand)}
.paneel .deco-auto{right:-20px;bottom:-30px;width:420px}
@media(max-width:1024px){.uspgrid{grid-template-columns:1fr 1fr}.paneel .deco-auto{width:300px;right:-10px;bottom:-40px}}
@media(max-width:767px){
  .paneel{padding:60px 20px;gap:40px}
  .uspgrid,.uspgrid.drie{grid-template-columns:1fr}
  .paneel .deco-auto{width:160px;right:-10px;bottom:-30px}
}

/* ---------- kaartenraster op merkkleur (2x2, landingspagina's "Waarom kiezen klanten...") ---------- */
.merkkaarten .wrap{padding:100px 0 0;display:flex;flex-direction:column;gap:30px}
.merkkaarten .kop{margin-bottom:30px}
.mkgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mkkaart{background:var(--brand);color:var(--wit);border-radius:10px;padding:30px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.mkkaart .ic-wit{width:64px;height:64px;border-radius:50%;background:var(--wit);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.mkkaart .ic-wit svg{width:30px;height:30px}
.mkkaart h3{font-family:var(--ui);font-weight:600;font-size:24px;line-height:36px;color:var(--wit)}
.mkkaart p{color:var(--wit)}
@media(max-width:767px){.merkkaarten .wrap{padding-top:60px;gap:40px}.mkgrid{grid-template-columns:1fr}}

/* ---------- reviews (gemeten: 150 padding, kop links + pijlen rechts, kaarten 397 met 15 marge, middenkaart 50 hoger + rand merkkleur) ---------- */
.reviews .wrap{padding:150px 0;display:flex;flex-direction:column;gap:60px}
.reviews .kop{position:relative;padding-right:130px}
.rv-pijlen{position:absolute;right:0;bottom:4px;display:flex;gap:8px}
.rv-pijlen button{width:52px;height:52px;border-radius:50px;border:1px solid var(--zwart);background:var(--wit);color:var(--zwart);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:12px;transition:background-color .3s,color .3s}
.rv-pijlen button:hover{background:var(--zwart);color:var(--wit)}
.rv-pijlen svg{width:26px;height:26px;stroke-width:2.2}
.rv-venster{overflow:hidden;padding-top:50px}   /* gemeten: kop -> middenkaart 140, zijkaart 190 */
.rv-baan{display:flex;transition:transform .6s var(--ease)}
.rv-slide{flex:0 0 33.3333%;padding:20px 15px;transition:margin .6s var(--ease)}
.rv-slide.midden{margin-top:-50px}
.rv-kaart{position:relative;background:var(--wit);padding:30px 25px;border-radius:10px;border:2px solid var(--wit);box-shadow:0 0 20px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:47px;height:273px;transition:border-color .6s var(--ease)}
.rv-slide.midden .rv-kaart{border-color:var(--brand)}
.rv-kaart .quote{position:absolute;right:31px;top:-13px;width:50px;height:39px;color:var(--brand);transform:rotate(180deg)}
.rv-kaart .boven{display:flex;flex-direction:column;gap:10px}
.rv-kaart .sterren{color:#f5a623;gap:4px}
.rv-kaart .sterren svg{width:17px;height:17px}
.rv-kaart p{font-size:16px;line-height:28px;color:var(--tekst);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-kaart .onder{border-top:1px solid #d5d5d5;padding-top:20px;display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.rv-wie{display:flex;align-items:center;gap:15px}
.rv-avatar{width:50px;height:50px;border-radius:50%;background:var(--brand);color:var(--wit);display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:600;font-size:20px;flex:none}
.rv-wie h3{font-family:var(--ui);font-weight:600;font-size:18px;line-height:28px;color:var(--ink);transition:color .6s}
.rv-slide.midden .rv-wie h3{color:var(--brand)}
.rv-wie p{font-family:var(--ui);font-size:18px;line-height:28px;color:var(--tekst)}
.rv-kaart .g-kleur{width:45px;height:45px}
.rv-link{text-align:center;font-family:var(--ui);font-weight:500;font-size:16px;line-height:24px;margin-top:-50px}
.reviews .wrap:has(.rv-link){padding-bottom:116px}   /* gemeten sectie 847: link valt binnen de onderruimte */
.rv-link a{color:var(--brand);text-decoration:underline;text-underline-offset:4px}
@media(max-width:1024px){.rv-slide{flex-basis:50%}}
@media(max-width:767px){
  .reviews .wrap{padding:80px 0;gap:30px}
  .reviews .kop{padding-right:0}
  .rv-pijlen{position:static;justify-content:flex-end;margin-top:-10px}
  .rv-slide{flex-basis:100%}.rv-slide.midden{margin-top:0}
  .rv-venster{padding-top:20px;margin-top:0}
}

/* ---------- werkwijze: 6 stappen (gemeten: kolommen 410, gap 40/25; nummer 50/66 verloop; icoonvak 170) ---------- */
.stappen{overflow:hidden}
.stappen .wrap{padding:0 0 110px;display:flex;flex-direction:column;align-items:center;gap:60px}
.stappen.pt .wrap{padding-top:110px}   /* gemeten: 110 */
.stappen .deco-l{position:absolute;left:calc(-1 * (100vw - 100%) / 2);top:0;width:140px}
.stappen .deco-r{position:absolute;right:calc(-1 * (100vw - 100%) / 2);top:0;width:140px}
.stapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 25px;width:100%}
.stap{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.stapnr{font-family:var(--kop);font-weight:800;font-size:var(--h1);line-height:var(--h1-lh);margin:-10px 0 -26px;background:linear-gradient(180deg,var(--brand-licht),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.stapvak{position:relative;width:170px;height:170px;border:2px dashed #222;border-radius:10px;display:flex;align-items:center;justify-content:center}
.stapvak span{width:148px;height:138px;border-radius:8px;background:var(--brand);color:var(--wit);display:flex;align-items:center;justify-content:center}
.stapvak svg{width:78px;height:78px;stroke-width:1.4}
.stap:not(:nth-child(3n))::after{content:"";position:absolute;left:calc(50% + 77px);top:139px;width:280px;height:12px;   /* gemeten border.svg: x 282 in kolom, 280 breed */
  background:
  radial-gradient(circle,#222 3.5px,transparent 4px) left center/10px 10px no-repeat,
  radial-gradient(circle,#222 3.5px,transparent 4px) right center/10px 10px no-repeat,
  repeating-linear-gradient(90deg,#222 0 8px,transparent 8px 14px) center/calc(100% - 20px) 2px no-repeat}
.stap>div{margin-top:-20px}   /* gemeten: vak -> titel 178 (170 + 8) */
.stap h3{font-family:var(--kop);font-weight:600;font-size:var(--h3g);line-height:var(--h3g-lh);color:var(--ink);margin:8px 0 7px}
@media(max-width:1024px){.stappen .deco-l,.stappen .deco-r{width:100px}}
@media(max-width:767px){
  .stappen .wrap{gap:40px;padding-bottom:80px}
  .stapgrid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .stap::after{display:none}
  .stapvak{width:110px;height:110px}.stapvak span{width:94px;height:88px}.stapvak svg{width:50px;height:50px}
  .stapnr{font-size:40px;line-height:52px}
  .stap h3{font-size:18px;line-height:26px}
  .stappen .deco-l,.stappen .deco-r{width:70px;top:6px}
}

/* ---------- voorbeelden van aankopen (gemeten: 72/60/60 padding, gap 55, kaarten 371 met schaduw) ---------- */
.voorbeelden .wrap{padding:0}
.voorbeelden .paneel{padding:72px 60px 60px;gap:55px}
.vbgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;width:100%}
.vbkaart{background:var(--wit);box-shadow:0 0 35px rgba(0,0,0,.09);border-radius:6px;padding:10px 10px 0;font-family:var(--ui);color:#222;display:flex;flex-direction:column;overflow:hidden;height:568px}
.vbkaart h3{font-family:var(--ui);font-weight:500;font-size:19px;line-height:23px;color:#1d3f73;margin:6px 0 12px;min-height:23px}
.vbkaart .foto{aspect-ratio:350/262;overflow:hidden;background:#ddd}
.vbkaart .foto img{width:100%;height:100%;object-fit:cover}
.vbkaart .meta{padding:14px 15px 0;font-size:13px;line-height:20px}
.vbkaart .rij1{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.vbkaart .vlag{width:26px;height:17px;display:flex;flex-direction:column;border-radius:2px;overflow:hidden;flex:none}
.vbkaart .vlag i{flex:1}
.vbkaart .bron{font-weight:700;flex:1}
.vbkaart .open{background:#2aa6c9;color:#fff;font-size:11.5px;letter-spacing:.3px;padding:3px 8px;text-transform:uppercase}
.vbkaart .hot{display:flex;align-items:center;gap:6px}
.vbkaart .hot svg{width:14px;height:14px;color:#e2412b}
.vbkaart .fase{display:flex;align-items:center;gap:8px;color:#2aa6c9;font-weight:600;text-transform:uppercase;font-size:12.5px;margin:6px 0 8px;padding-bottom:8px;border-bottom:2px solid #555}
.vbkaart .fase b{color:#222}
.vbkaart .fase svg{width:24px;height:24px}
.vbkaart dl{display:grid;grid-template-columns:1fr 1fr;margin:0;font-size:12.5px;line-height:23.5px}
.vbkaart dt{font-weight:600}
.vbkaart dd{margin:0}
@media(max-width:1024px){.vbgrid{grid-template-columns:1fr 1fr}.vbgrid .vbkaart:nth-child(3){display:none}}
@media(max-width:767px){.voorbeelden .paneel{padding:50px 16px 40px;gap:40px}.vbgrid{grid-template-columns:1fr}.vbgrid .vbkaart:nth-child(3){display:flex}.vbkaart{height:auto}}

/* ---------- regio's (gemeten: 94/124 padding; lijst 18/28 700; kaart 609x520 met kader) ---------- */
.regio .wrap{padding:94px 0 124px;display:flex;justify-content:space-between;align-items:center}
.regio .split-tekst{gap:30px}
.regio-lijst{display:flex;flex-direction:column;gap:10px}
.regio-lijst li{display:flex;align-items:center;gap:11px;font-family:var(--tekstfont);font-weight:700;font-size:18px;line-height:28px;color:var(--zwart)}
.regio-lijst svg{width:25px;height:25px;flex:none}
.kaartvak{position:relative;width:48%;height:520px}
.kaartvak .kader{position:absolute;right:-8px;top:-8px;width:120px;height:112px;border:5px solid var(--brand);border-left:0;border-bottom:0;border-radius:0 28px 0 0;pointer-events:none;z-index:2}
.kaartvak .kader::after{content:"";position:absolute;right:-5px;top:107px;width:5px;height:410px;background:var(--brand);border-radius:0 0 30px 0}
/* statische kaartplaat (geen Google-verzoek voor de klik): wegen, water en blokken in CSS */
.kaart-klik{position:absolute;inset:0;width:calc(100% - 5px);border-radius:0 0 30px 0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(ellipse 30% 22% at 78% 30%,#aadaff 98%,transparent 100%),
  linear-gradient(28deg,transparent 46%,#fff 46.5%,#fff 48.5%,transparent 49%),
  linear-gradient(118deg,transparent 30%,#fde293 30.4%,#fde293 32.2%,transparent 32.6%),
  linear-gradient(90deg,transparent 60%,#fff 60.3%,#fff 61.5%,transparent 61.8%),
  linear-gradient(0deg,transparent 55%,#fff 55.4%,#fff 56.6%,transparent 57%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 38px),repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 38px),
  radial-gradient(ellipse 18% 14% at 22% 70%,#c8e6c9 98%,transparent 100%),#eef0e8}
.kaart-klik button{position:relative;z-index:1}
.kaart-klik iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kaart-klik small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--ui);font-size:13px;color:#333;z-index:1}
@media(max-width:767px){.regio .wrap{flex-direction:column;gap:40px;padding:60px 0 80px}.kaartvak{width:100%;height:360px}.kaartvak .kader::after{height:250px}}

/* ---------- blog (gemeten: gap 60, grid 3 kolommen gap 30, kaart radius 7, foto 265, inhoud 20/30) ---------- */
.blog .wrap{padding:0 0 150px;display:flex;flex-direction:column;gap:60px}
.blog.pt .wrap{padding-top:100px}
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start}
.blogkaart{background:var(--wit);border-radius:7px;box-shadow:-.9px .9px 19px -5.4px rgba(0,0,0,.27);display:flex;flex-direction:column;overflow:hidden;transition:transform .5s var(--ease)}
.blogkaart:hover{transform:translateY(-4px)}
.blogkaart .foto{height:265px;overflow:hidden;border-radius:7px 7px 0 0}
.blogkaart .foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.blogkaart:hover .foto img{transform:scale(1.04)}
.blogkaart .inhoud{padding:20px 30px;display:flex;flex-direction:column;gap:47px}
.blogkaart .boven{display:flex;flex-direction:column;gap:10px}
.blogkaart h3{font-family:var(--kop);font-weight:600;font-size:22px;line-height:33px;color:var(--ink)}
.blogkaart .onder{border-top:1px solid #d6d6d6;padding-top:18px;display:flex;justify-content:space-between;align-items:center;font-family:var(--kop);font-weight:500;font-size:16px;line-height:24px;color:var(--brand)}
.blogkaart .onder i{width:20px;height:18px;background:var(--brand);border-radius:2px;color:#fff;display:flex;align-items:center;justify-content:center}
.blogkaart .onder svg{width:13px;height:13px;stroke-width:3}
.blog .knop-rij{justify-content:center}
@media(max-width:1024px){.bloggrid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.blog .wrap{padding-bottom:80px;gap:40px}.bloggrid{grid-template-columns:1fr}}

/* ---------- droomauto: paneel + formulierkaart (gemeten: 120/40, radius 13, kaart -30 eroverheen) ---------- */
.droom .wrap{padding:0 0 150px}
.droom .paneel{padding:120px 40px;gap:30px;border-radius:13px}
.droom .zoekkaart{margin-top:-30px;position:relative;z-index:2}
@media(max-width:767px){.droom .paneel{padding:60px 20px}.droom .wrap{padding-bottom:80px}}

/* ---------- FAQ-accordion (gemeten: summary 10/20, radius 10, rand 1px, titel Poppins 600 22/33, gap 20) ---------- */
.faq .wrap{padding:80px 0 0;display:flex;flex-direction:column;gap:40px}   /* gemeten /zo-werkt-het: 80/80, gap 40 */
.faq.pb .wrap{padding-bottom:80px}
.faqlijst{display:flex;flex-direction:column;gap:20px}
.faqlijst details{border-radius:10px}
.faqlijst summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 20px;border:1px solid var(--zwart);border-radius:10px;cursor:pointer;font-family:var(--ui);font-weight:600;font-size:var(--h3);line-height:var(--h3-lh);color:var(--zwart);transition:background-color .3s,color .3s,border-color .3s}
.faqlijst summary::-webkit-details-marker{display:none}
.faqlijst summary svg{width:15px;height:15px;flex:none;stroke-width:3;transition:transform .3s}
.faqlijst details[open] summary{background:var(--brand);border-color:var(--brand);color:var(--wit);border-radius:10px 10px 0 0}
.faqlijst details[open] summary svg{transform:rotate(180deg)}
.faqlijst .antw{background:var(--brand);color:var(--wit);padding:10px 20px 20px;border-radius:0 0 10px 10px;margin-top:-1px}
.faqlijst .antw p{color:var(--wit);font-size:16px;line-height:28px}
.faqlijst .antw a{color:var(--wit);text-decoration:underline}
.faq .knop-rij{justify-content:center}
@media(max-width:767px){.faq .wrap{padding-top:60px}.faqlijst summary{padding:12px 16px}}

/* ---------- merkenraster (gemeten /vind-mijn-droomauto: sectie 80/80, gap 60; kop gap 20, titel 50/66 op 800 breed,
   tekst 570; tegels 307x230 (4 per rij, gap 20/14, links uitgelijnd), merkkleur, padding 15, radius 10; wit vlak
   radius 10 met logo; hover: vlak in merkkleur schuift omhoog (fadeInUp 1,25 s) met merknaam 45/60, modellen, knop) ---------- */
.merken .wrap{padding:80px 0;display:flex;flex-direction:column;gap:60px}
.merken .kop{gap:20px}
.merken .kop h2{font-size:var(--h1);line-height:var(--h1-lh);max-width:800px;color:var(--zwart)}
.merken .kop .tekst{max-width:570px}
.merkgrid{display:flex;flex-wrap:wrap;gap:20px 14px}
.merktegel{position:relative;width:calc((100% - 42px) / 4 - 2.5px);height:230px;background:var(--brand);border-radius:10px;padding:15px;overflow:hidden;display:block}
.merktegel .voor{display:flex;align-items:center;justify-content:center;height:200px;background:var(--wit);border-radius:10px}
.merktegel .voor img{width:78%;height:78%;object-fit:contain}
.merktegel .achter{position:absolute;inset:15px;border-radius:8px;background:var(--brand);color:var(--wit);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 8px}
.merktegel:hover .achter,.merktegel:focus-visible .achter{display:flex;animation:inOmhoog 1.25s var(--ease) both}
.merktegel .achter h3{font-family:var(--kop);font-weight:800;font-size:45px;line-height:60px;color:var(--wit)}
.merktegel .achter p{font-size:16px;line-height:28px;color:var(--wit);margin-top:-8px}
.merktegel .achter span{margin-top:14px;background:var(--wit);color:var(--brand);font-family:var(--ui);font-weight:600;font-size:18px;line-height:27px;padding:10px 37px;border-radius:60px;transition:background-color .3s,color .3s}
.merktegel .achter span:hover{background:var(--zwart);color:var(--wit)}
@keyframes inOmhoog{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@media(max-width:1024px){.merktegel{width:calc((100% - 28px) / 3)}}
@media(max-width:767px){.merken .wrap{padding:60px 0;gap:40px}.merkgrid{gap:12px 10px}.merktegel{width:calc((100% - 10px) / 2);height:160px;padding:10px}.merktegel .voor{height:140px}.merktegel .achter{inset:10px}.merktegel .achter h3{font-size:28px;line-height:36px}.merktegel .achter p{display:none}.merktegel .achter span{padding:6px 20px;font-size:15px}}

/* ---------- vinkkaarten (over ons: 4 kaarten, groen vinkje in cirkel, titel gecentreerd) ---------- */
.vinkkaarten .wrap{padding:100px 0 0;display:flex;flex-direction:column;gap:60px}
.vkgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vkkaart{background:var(--wit);box-shadow:0 0 35px rgba(0,0,0,.07);border-radius:10px;padding:30px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.vkkaart svg{width:60px;height:60px;color:var(--brand);stroke-width:2}
.vkkaart h3{font-family:var(--ui);font-weight:600;font-size:22px;line-height:33px;color:var(--ink)}
@media(max-width:1024px){.vkgrid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.vkgrid{grid-template-columns:1fr}}

/* ---------- tekst-cta (wat gebeurt er nu: gecentreerde kop + tekst + knop) ---------- */
.tekstcta .wrap{padding:100px 0 0}
.tekstcta .kop{gap:24px}
.tekstcta h2{font-size:36px;line-height:48px}
@media(max-width:767px){.tekstcta h2{font-size:26px;line-height:36px}}

/* ---------- artikelpagina (gemeten: kop 100 padding op foto, h1 40/40 700, h3 28 500, p 16/24) ---------- */
.artikel-kop{position:relative;background:var(--brand);isolation:isolate}
.artikel-kop::before{content:"";position:absolute;inset:0;background:var(--foto) center/cover no-repeat;opacity:.16;mix-blend-mode:luminosity;z-index:-1}
.artikel-kop .wrap{padding:100px 0;max-width:1200px;text-align:center;display:flex;flex-direction:column;gap:20px}
.artikel-kop h1{font-family:var(--kop);font-weight:700;font-size:40px;line-height:40px;color:var(--wit)}
.artikel-kop p{color:var(--wit);font-size:16px;line-height:24px}
.artikel .wrap{padding:40px 0 100px}
.artikel .inhoud{font-size:16px;line-height:24px;color:#333}
.artikel .inhoud h2{font-family:var(--tekstfont);font-weight:500;font-size:28px;line-height:33.6px;color:#333;margin:24px 0 16px}
.artikel .inhoud h3{font-family:var(--tekstfont);font-weight:700;font-size:16px;line-height:24px;color:#333;margin:14px 0 0}
.artikel .inhoud p{margin:0 0 14px}
.artikel .inhoud ul{list-style:disc;padding-left:40px;margin:0 0 14px}
.artikel .inhoud ol{list-style:decimal;padding-left:40px;margin:0 0 14px}
.artikel .inhoud li{margin:0 0 14px}
.artikel .inhoud a{color:var(--brand);font-weight:600}
@media(max-width:767px){.artikel-kop .wrap{padding:60px 0}.artikel-kop h1{font-size:28px;line-height:34px}}

/* ---------- juridische/tekstpagina ---------- */
.tekstpagina .wrap{padding:80px 0 100px;max-width:900px}
.tekstpagina h1{margin-bottom:24px}
.tekstpagina h2{font-size:28px;line-height:36px;margin:32px 0 12px}
.tekstpagina h3{font-family:var(--ui);font-size:20px;line-height:30px;margin:24px 0 8px;color:var(--ink)}
.tekstpagina p,.tekstpagina li{margin-bottom:12px}
.tekstpagina ul{list-style:disc;padding-left:22px}
.tekstpagina a{color:var(--brand);text-decoration:underline}
.tekstpagina table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.tekstpagina th,.tekstpagina td{border:1px solid #ddd;padding:8px 10px;text-align:left;vertical-align:top}

/* ---------- CTA boven de footer (gemeten: 500 hoog, radius 10, 0/60 padding, gap 20; auto's linksboven en rechtsonder) ---------- */
.cta-blok .wrap{padding:0}
/* gemeten CTA.webp: mint (#b2d6c9 gemiddeld) = --brand-licht over wit, foto vaag erdoor, fijn stippelraster */
.cta-kaart{position:relative;min-height:500px;border-radius:10px;padding:0 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;background:rgba(var(--brand-licht-rgb),.62);isolation:isolate}
/* gemeten CTA.webp: foto zeer licht (witte waas ~75%), links het sterkst weggewassen, rechts iets meer foto zichtbaar */
.cta-kaart::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.55) 60%,rgba(255,255,255,.42) 100%),var(--foto) center 40%/cover no-repeat;opacity:.55;z-index:-1}
.cta-kaart::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.3px) 0 0/6px 6px;z-index:-1;pointer-events:none}
.cta-kaart .tekst{max-width:605px;color:var(--tekst)}
.cta-kaart .auto-l{position:absolute;left:-20px;top:-35px;width:220px}
.cta-kaart .auto-r{position:absolute;right:-35px;bottom:-110px;width:370px}
@media(max-width:767px){.cta-kaart{min-height:0;padding:80px 20px}.cta-kaart .auto-l{width:120px;left:-10px;top:-30px}.cta-kaart .auto-r{width:180px;right:-10px;bottom:-60px}}

/* ---------- footer: zie "VASTE REGEL Dikkie 09-10-2026" onderaan (zwart, strak) ---------- */

/* ---------- vaste knoppen: "Bel bij spoed" onderaan midden (gemeten 327x63, radius 11, 18/28), WhatsApp rechts, taal links ---------- */
.spoed{position:fixed;left:50%;bottom:15px;transform:translateX(-50%);z-index:80;display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:var(--wit);font-family:var(--ui);font-weight:600;font-size:18px;line-height:27px;padding:18px 28px;border-radius:11px;white-space:nowrap;box-shadow:0 8px 24px -10px rgba(0,0,0,.35);transition:background-color .3s}
.spoed:hover{background:var(--zwart)}
.spoed svg{width:18px;height:18px;fill:currentColor;stroke:none}
@media(max-width:767px){.spoed{width:280px;white-space:normal;justify-content:center;text-align:center;padding:15px 12px;bottom:20px}}
.wa-knop{position:fixed;right:15px;bottom:15px;z-index:85;width:50px;height:50px;border-radius:10px;background:var(--whatsapp-licht);color:var(--wit);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.2);border:0;cursor:pointer;transition:transform .3s}
.wa-knop:hover{transform:scale(1.06)}
.wa-knop svg{width:32px;height:32px}
.wa-chat{position:fixed;right:15px;bottom:78px;z-index:90;width:330px;max-width:calc(100vw - 30px);background:var(--wit);border-radius:8px;box-shadow:0 10px 35px rgba(0,0,0,.2);overflow:hidden;display:none;font-family:var(--ui)}
.wa-chat.open{display:block}
.wa-chat-kop{background:var(--whatsapp);color:var(--wit);padding:16px 40px 14px 24px;position:relative}
.wa-chat-kop b{display:block;font-weight:500;font-size:16px;line-height:22px}
.wa-chat-kop small{display:block;font-size:12px;line-height:18px;opacity:.85}
.wa-chat-kop button{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--wit);cursor:pointer;padding:4px}
.wa-chat-kop button svg{width:16px;height:16px}
.wa-chat-body{background:#e6ddd4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='1.3' fill='%23d3c8bd'/%3E%3C/svg%3E");padding:24px 20px 60px}
.wa-chat-msg{background:#dcf8c6;border-radius:0 8px 8px 8px;padding:10px 12px;font-size:15px;line-height:24px;color:#303030;max-width:260px}
.wa-chat-voet{padding:12px 20px 10px;display:flex;flex-direction:column;align-items:center;gap:8px}
.wa-chat-voet a{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--whatsapp-licht);color:var(--wit);border-radius:30px;padding:8px 20px;font-size:15px;transition:background-color .3s}
.wa-chat-voet a:hover{background:#1da851}
.wa-chat-voet a svg{width:18px;height:18px}
.wa-chat-voet small{font-size:12px;color:#555;display:flex;align-items:center;gap:6px}
.wa-chat-voet small i{width:9px;height:9px;border-radius:50%;background:#2ecc40}
.taalknop{position:fixed;left:20px;bottom:15px;z-index:80;display:flex;align-items:center;gap:8px;background:var(--wit);box-shadow:0 2px 10px rgba(0,0,0,.2);padding:9px 14px;font-family:var(--ui);font-weight:600;font-size:16px;color:#111;border-radius:2px}
.taalknop .vlag{width:32px;height:21px;display:flex;flex-direction:column;border-radius:2px;overflow:hidden}
.taalknop .vlag i{flex:1}
.taalknop svg{width:12px;height:12px;stroke-width:3}
@media(max-width:767px){.taalknop{left:10px;bottom:90px;padding:6px 10px;font-size:14px}.taalknop .vlag{width:24px;height:16px}.wa-knop{bottom:90px}.wa-chat{bottom:150px}}
body.cookie-open .spoed,body.cookie-open .wa-knop,body.cookie-open .taalknop{visibility:hidden}
@media(max-width:1024px){body.menu-open .spoed,body.menu-open .wa-knop,body.menu-open .wa-chat,body.menu-open .taalknop{visibility:hidden}}   /* mobiel menu open over de vaste kop: vaste knoppen even weg */

/* ---------- reveals: DPS-tempo (850 ms, 24 px, zachte uitloop); zonder JS alles zichtbaar ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .stagger>*{transition-delay:0ms}
.js .stagger>*:nth-child(2){transition-delay:110ms}.js .stagger>*:nth-child(3){transition-delay:220ms}.js .stagger>*:nth-child(4){transition-delay:330ms}.js .stagger>*:nth-child(5){transition-delay:440ms}.js .stagger>*:nth-child(6){transition-delay:550ms}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- cookiebanner (DPS-component) ---------- */
#dpscb{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;padding:16px;pointer-events:none}
.dpscb-card{pointer-events:auto;background:var(--wit);color:var(--ink);border-top:4px solid var(--brand);border-radius:10px;max-width:470px;width:100%;padding:24px 26px;font-family:var(--ui);font-size:14.5px;line-height:1.55;box-shadow:0 12px 40px -12px rgba(0,0,0,.45)}
.dpscb-card h3{font-family:var(--kop);color:var(--ink);font-size:22px;line-height:28px;margin-bottom:8px}
.dpscb-card p{margin:0 0 14px;color:var(--tekst)}
.dpscb-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dpscb-btn{appearance:none;border:2px solid var(--brand);border-radius:60px;height:44px;padding:0 18px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1;transition:background-color .3s,color .3s,border-color .3s}
.dpscb-accept{background:var(--brand);color:var(--wit)}
.dpscb-deny{background:var(--wit);color:var(--brand)}
.dpscb-accept:hover,.dpscb-deny:hover{background:var(--zwart);color:var(--wit);border-color:var(--zwart)}
.dpscb-link{appearance:none;background:none;border:0;padding:12px 0 0;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--tekst);font-family:inherit}
.dpscb-opts{border-top:1px solid #e3e3e3;margin:6px 0 14px;padding-top:14px;display:flex;flex-direction:column;gap:10px}
.dpscb-opts[hidden]{display:none!important}
.dpscb-opt{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.dpscb-opt input{accent-color:var(--brand);margin-top:3px}
.dpscb-opt small{display:block;color:#777;font-size:12.5px}
.dpscb-card a{color:var(--brand);text-decoration:underline}

/* ---------- conceptmelding ---------- */
.dps-concept-pill{position:fixed;left:18px;top:18px;z-index:1200;display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:999px;font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--wit);background:rgba(20,20,20,.86);border:1px solid rgba(var(--brand-rgb),.6);cursor:pointer}
.dps-concept-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-licht);flex:none}

/* ---------- print ---------- */
@media print{
  .kop-header{position:static;padding:0!important}
  .topbalk,.header,.footer,.f-logos,.onderbalk,.spoed,.wa-knop,.wa-chat,.taalknop,#dpscb,.zoekblok,.cta-blok,.deco-auto{display:none!important}
  body{color:#000}.paneel,.artikel-kop{background:#fff!important;color:#000}.paneel h2,.paneel .tekst,.artikel-kop h1,.artikel-kop p{color:#000}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ======================================================================
   OFFERTECALCULATOR: letterlijk het blok van slktechnieken.nl (template 2, .calc-kaart + form.calc),
   zonder de foto links. Alleen de kleurtokens zijn die van de klant: SLK-chroom -> --accent,
   SLK-ink/petrol -> --donker. Maten, radius, schaduw, teksten en gedrag zijn 1:1.
   ====================================================================== */
.calc-kaart{background:var(--wit);border-radius:24px;box-shadow:0 18px 44px -18px rgba(16,19,21,.28);max-width:1140px;margin-inline:auto;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.calc-kaart.smal{grid-template-columns:1fr;max-width:760px}
@media(max-width:1100px){.calc-kaart{grid-template-columns:1fr;max-width:800px}}
.calc{padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;text-align:left;font-family:var(--tekstfont);color:var(--donker)}
@media(max-width:640px){.calc{text-align:center}.calc .veld{text-align:center}.calc .veld label{text-align:center}}
.calc .gotcha{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.calc-titel{font-size:24px;font-weight:800;line-height:1.2;color:#000;margin:0 0 16px;text-align:center}  /* vaste kop "Offerte calculator" boven de stappen (Dikkie 30-09-2026) */
.calc-voortgang{display:flex;align-items:center;margin-bottom:24px}
.calc-voortgang span{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center;font-size:13.5px;font-weight:700;line-height:1.5;background:#eef2f0;color:#8a949a;transition:background .3s cubic-bezier(.22,.61,.36,1),color .3s cubic-bezier(.22,.61,.36,1)}
.calc-voortgang span.actief{background:var(--donker);color:var(--wit)}
.calc-voortgang span.klaar{background:var(--accent);color:var(--wit)}
.calc-voortgang i{flex:1;height:2px;background:#e3e9e6;margin:0 6px}
.calc-stapnr{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:#8a949a;text-transform:uppercase;margin-bottom:6px;line-height:1.5}
.calc h3{font-family:var(--kop);font-size:22px;line-height:1.3;font-weight:600;color:var(--donker);margin:0 0 6px}
.calc .calc-sub{color:#69727d;font-size:14.5px;line-height:1.5;margin:0 0 18px}
.calc-stap{display:none}
.calc-stap.actief{display:block}
.calc-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.calc-tegels{grid-template-columns:repeat(2,1fr)}}
.artikel-zij .calc-tegels{grid-template-columns:repeat(2,1fr)}
.calc-tegel{border:2px solid #e3e9e6;border-radius:14px;background:var(--wit);padding:16px 10px;text-align:center;cursor:pointer;font-family:inherit;transition:border-color .25s cubic-bezier(.22,.61,.36,1),background .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1)}
.calc-tegel svg{width:22px;height:22px;stroke:var(--donker);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 8px}
.calc-tegel b{display:block;font-size:13.5px;color:var(--donker);font-weight:600;line-height:1.3}
.calc-tegel:hover{border-color:var(--accent)}
.calc-tegel.gekozen{border-color:var(--accent);background:rgba(var(--accent-rgb),.14);transform:translateY(-1px)}
.calc-tegel.gekozen svg{stroke:var(--donker)}
.calc .form-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.calc .form-rij{grid-template-columns:1fr}}
.calc .veld{margin-bottom:18px;text-align:left}
.calc .veld label{display:block;font-size:15px;font-weight:600;line-height:1.5;margin-bottom:7px;color:var(--donker)}
.calc .veld input{width:100%;padding:13px 16px;font-size:16px;font-family:inherit;color:var(--donker);border:2px solid #e3e9e6;border-radius:8px;background:var(--wit);transition:border-color .3s cubic-bezier(.22,.61,.36,1)}
.calc .veld input:focus{outline:none;border-color:var(--accent)}
.calc-acties{margin-top:auto;padding-top:22px}
.calc-volgende{width:100%;display:block;text-align:center;background:var(--accent);color:var(--wit);border:0;border-radius:12px;padding:16px;cursor:pointer;font-family:inherit;font-size:16.5px;font-weight:700;line-height:1.25;transition:background .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1)}
.calc-volgende:hover{background:var(--donker);transform:translateY(-1px)}
.calc-terug{background:none;border:0;color:#8a949a;cursor:pointer;font-family:inherit;font-size:14px;margin-top:12px;display:inline-flex;align-items:center;gap:6px;padding:0}
.calc-terug:hover{color:var(--donker)}
.calc-gerust{display:flex;justify-content:center;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;line-height:1.5;color:#8a949a}
.cg-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cg-item svg{width:14px;height:14px;flex:0 0 auto}
.calc-foutmelding{color:#c0392b;font-size:13.5px;margin-top:10px;display:none}
.no-js .calc-stap{display:block!important}
.no-js .calc-voortgang,.no-js .calc-stapnr,.no-js .calc-terug{display:none}
.no-js .calc-volgende::after{content:" en versturen"}
/* in de hero-kolom (540) en het contactblok (440) staat de kaart op de kolombreedte */
.hero .calc-kaart{width:540px;max-width:100%;flex:none}   /* gemeten kolom van de bron: 540 */
.contactblok .calc-kaart{width:440px;max-width:100%;flex:none}
.artikel-zij .calc-kaart{width:100%;max-width:100%}
@media(max-width:1200px){.hero .calc-kaart{width:42%}}
@media(max-width:1024px){.hero .calc-kaart,.contactblok .calc-kaart{width:100%}}
@media(max-width:767px){.calc{padding:26px 20px}}


/* template 16: tokens van de calculator gekoppeld aan de merkkleur (SLK-chroom -> --brand, SLK-ink -> --ink) */
.calc-kaart{--accent:var(--brand);--accent-rgb:var(--brand-rgb);--donker:var(--ink)}
/* in de zoekkaart (onder de hero, droomauto, pop-up) staat de calculator kaal in de witte kaart */
.zoekkaart .calc-kaart{box-shadow:none;border-radius:0;max-width:760px;width:100%;margin-inline:auto;background:transparent}
.zoekkaart .calc{padding:0}
.zoekkaart .kop{gap:16px}
.zoekkaart .kop .tekst{max-width:640px}
.calc .veld textarea{width:100%;padding:13px 16px;font-size:16px;font-family:inherit;color:var(--donker);border:2px solid #e3e9e6;border-radius:8px;background:var(--wit);min-height:90px;resize:vertical}

/* ---------- aanvraag-pop-up (gemeten Elementor-popup 104: 1200x695, radius 12, overlay zwart;
   donker vlak links met schuine rand naar foto op merkkleur rechts; witte kaart 1058 breed, 80/48/50) ---------- */
.aanvraag{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;padding:20px;overflow:auto}
.aanvraag.open,.aanvraag:target{display:flex}
.aanvraag-paneel{position:relative;width:min(1200px,100%);border-radius:12px;border:1px solid rgba(var(--brand-rgb),.6);box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);padding:60px 70px 40px;display:flex;flex-direction:column;align-items:center;gap:30px;
  background:linear-gradient(106deg,rgba(9,22,22,.97) 0 64%,rgba(var(--brand-rgb),.82) 64%),var(--foto) center/cover no-repeat;margin:auto}
.aanvraag .zoekkaart{margin:0;width:100%;padding:80px 48px 50px;box-shadow:none}
.aanvraag-sluit{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:4px;background:#fff;border:2px solid var(--brand);color:#111;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.aanvraag-sluit svg{width:16px;height:16px;stroke-width:3}
.aanvraag-score{background:none;border:0;border-radius:0;box-shadow:none;padding:0;font-family:var(--ui);font-weight:600;font-size:22px;line-height:33px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);text-align:center;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.aanvraag-score .sterren{color:#fbbc04}.aanvraag-score .sterren svg{width:22px;height:22px}
.aanvraag-bel{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--ink);font-family:var(--ui);font-weight:600;font-size:18px;line-height:27px;padding:18px 28px;border-radius:11px;transition:background-color .3s,color .3s}
.aanvraag-bel:hover{background:var(--zwart);color:#fff}
.aanvraag-bel svg{width:20px;height:20px}
body.aanvraag-open{overflow:hidden}
@media(max-width:767px){
  .aanvraag{padding:0;align-items:flex-start}
  .aanvraag-paneel{padding:56px 14px 30px;border-radius:0;min-height:100%;background:linear-gradient(180deg,rgba(9,22,22,.97) 0 50%,rgba(var(--brand-rgb),.82) 50%),var(--foto) center/cover no-repeat}
  .aanvraag .zoekkaart{padding:40px 20px 30px}
  .aanvraag-score{font-size:18px;line-height:28px}
}

/* ---------- correcties na vergelijkingsronde 1 ---------- */
.op-kleur .acc{color:inherit}
.cta-kaart .eyebrow{align-self:center}
@media(max-width:1024px){.diensten .deco-auto{width:120px;top:-40px}}
@media(max-width:767px){
  .zoekblok .wrap{padding:0 17px}
  .diensten .deco-auto{width:78px;top:-30px}
  .rv-pijlen{gap:6px}.rv-pijlen button{width:30px;height:30px;padding:4px}.rv-pijlen svg{width:18px;height:18px}
  /* voorbeelden: bron toont 3 verkleinde kaarten naast elkaar; hier een veegrij zodat het leesbaar blijft */
  .vbgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .vbgrid .vbkaart{flex:0 0 82%;scroll-snap-align:center;height:auto}
}
/* bron: topbalk "hidden-tablet" (768-1024) */
@media(min-width:768px) and (max-width:1024px){.topbalk{display:none}}
/* spoedknop mobiel: bron 280 breed met afbrekend nummer; hier op één regel (nummer mag nooit breken) */
@media(max-width:767px){.spoed{width:auto;max-width:94vw;white-space:nowrap;font-size:16px;padding:14px 18px}}
/* pop-up met calculator: compacter zodat hij op 900 hoog past */
.aanvraag .zoekkaart{padding:36px 48px 28px;gap:18px}
.aanvraag .zoekkaart .kop .tekst{display:none}
.aanvraag .zoekkaart .kop{gap:10px}
.aanvraag-paneel{padding:40px 70px 30px;gap:18px}
@media(max-height:820px){.aanvraag{align-items:flex-start}}
@media(max-width:767px){.aanvraag .zoekkaart{padding:28px 16px 20px}}
@media(max-width:767px){.aanvraag-paneel{padding:50px 12px 24px}}

/* ---------- gemeten landingspagina /auto-veiling-nederland (ronde 2) ---------- */
/* redenen: sectie 100 boven, 0 onder; één kolom met gap 30 (eyebrow, kop, kaarten, knop); kaarten 3x410, padding 30/20 */
.redenen .wrap{padding:100px 0 0;gap:30px}
.redenen .kop{margin-bottom:0}
.redenen .knop-rij{margin-top:0}
.redengrid{gap:25px}
.redenkaart{padding:30px 20px;gap:20px}
/* compact paneel: sectie 80/80, vlak in merkkleur ZONDER foto, padding 60/20, radius 15, gap 20, kop 730, tekst 550, knoptekst zwart */
.paneel-sectie.compact .wrap,.paneel-sectie.pt.compact .wrap{padding:80px 0}
.paneel.klein{padding:60px 20px;gap:20px;border-radius:15px}
.paneel.klein::before{display:none}
.paneel.klein .kop{gap:20px}
.paneel.klein .kop .tekst{max-width:550px}
.paneel.klein .knop.wit{color:var(--zwart)}
/* merkkaarten 2x2: sectie 0 boven, 80 onder, gap 60; kop gap 30 (615 breed); raster gap 20; kaart padding 20, radius 12; icoon 68 */
.merkkaarten .wrap{padding:0 0 80px;gap:60px}
.merkkaarten .kop{margin-bottom:0;gap:30px}
.mkgrid{gap:20px 26px}
.mkkaart{padding:20px;border-radius:12px;gap:0}
.mkkaart .ic-wit{width:68px;height:68px;margin-bottom:0}
.mkkaart h3{margin-top:8px}
@media(max-width:767px){.redenen .wrap{padding-top:60px}.paneel-sectie.compact .wrap{padding:50px 0}.merkkaarten .wrap{padding-bottom:60px;gap:40px}}

/* stappen-variant "links" (gemeten /zo-werkt-het): nummer blijft gecentreerd, vak en tekst links; lijn op dezelfde plek */
.stappen.links .stap{align-items:flex-start;text-align:left}
.stappen.links .stapnr{align-self:center}
.split.geen-pt .wrap{padding-top:0}
/* BPM-paneel met 3 kleine kaarten (gemeten): sectie 40/40, tekst 750, kaarten 310x163 gap 20 met 20 marge,
   padding 25, gap 15, icoon = gevulde cirkel 42 in merkkleur met wit teken, titel Poppins 600 16/24 zwart */
.paneel-sectie.compact:has(.uspgrid.drie) .wrap{padding:40px 0}
.paneel.klein:has(.uspgrid.drie) .kop .tekst{max-width:750px}
.uspgrid.drie{gap:20px;margin:20px 0}
.uspgrid.drie .uspkaart{padding:25px;gap:15px;min-height:163px}
.uspgrid.drie .ic-klein{width:42px;height:42px;border-radius:50%;background:var(--brand);color:var(--wit);display:flex;align-items:center;justify-content:center}
.uspgrid.drie .ic-klein svg{width:24px;height:24px}
.uspgrid.drie .uspkaart h3{font-family:var(--ui);font-weight:600;font-size:16px;line-height:24px;color:var(--zwart);margin-top:8px}
/* stappen-links (gemeten /zo-werkt-het): lijn loopt over het volgende vak heen, rijafstand 366, vak -> titel 184 */
.stappen.links .stap::after{z-index:2}
.stappen.links .stap>div{margin-top:-14px}
/* tekst-CTA (gemeten /wat-gebeurt-er-nu): 80/80, gap 20, kop 45/60, tekst 750 */
.tekstcta .wrap{padding:80px 0}
.tekstcta .kop{gap:20px}
.tekstcta h2{font-size:var(--h2);line-height:var(--h2-lh)}
.tekstcta .kop .tekst{max-width:750px}
/* vinkkaarten (gemeten /over-ons): 80/80, gap 50, kaarten 307x230, padding 20, icoon 61, gap 20, titel 22/33 */
.vinkkaarten .wrap{padding:80px 0;gap:50px}
.vkgrid{gap:20px 17px}
.vkkaart{padding:20px;gap:20px;min-height:230px;border:1px solid var(--wit)}
.vkkaart svg{width:61px;height:61px}
.vkkaart h3{margin-top:8px}
@media(max-width:767px){.tekstcta .wrap,.vinkkaarten .wrap{padding:60px 0}}
@media(min-width:1367px){.split-tekst .eyebrow{white-space:nowrap}}
.hero .pijl-lijst{gap:19px}   /* gemeten: in de hero 47 per regel (9,5 + 9,5) */

/* ---------- mobiel (gemeten op 390, ronde 2) ---------- */
@media(max-width:767px){
  /* reviews: kaart 321 breed (slide 15 marge), geen uitgelichte middenkaart, pijlen rechts onder de kop */
  .rv-pijlen{align-self:flex-end}
  .rv-slide{padding:20px 15px}
  .rv-kaart{height:276px;gap:30px}
  .rv-slide.midden .rv-kaart{border-color:var(--wit)}
  .rv-slide.midden .rv-wie h3{color:var(--ink)}
  /* voorbeelden: zoals de bron drie verkleinde kaarten naast elkaar (100 breed, gap 5) */
  .vbgrid{display:flex;overflow:visible;justify-content:center;gap:5px;padding:0}
  .vbgrid .vbkaart,.vbgrid .vbkaart:nth-child(3){display:flex;flex:0 0 371px;width:371px;height:568px;zoom:.2695}
  /* blog: foto 235, inhoud 20/15, titel 18/28 */
  .blogkaart .foto{height:235px}
  .blogkaart .inhoud{padding:20px 15px}
  .blogkaart h3{font-size:18px;line-height:28px}
  /* CTA: 380 hoog, auto's 80 (linksboven) en 100 (rechtsonder) */
  .cta-kaart{padding:34px 20px 40px;gap:20px}
  .cta-kaart .auto-l{width:80px;left:-10px;top:-12px}
  .cta-kaart .auto-r{width:100px;right:-10px;bottom:-28px}
}
@media(max-width:767px){
  /* reviews mobiel (gemeten): 60/60, gap 40, kop gap 30, carrousel direct onder de kop, pijlen 33 rechts tussen kop en kaart */
  .reviews .wrap{padding:60px 0;gap:40px}
  .reviews .kop{gap:30px;position:relative}
  .rv-pijlen{position:absolute;right:0;bottom:-40px;margin:0;gap:7px}
  .rv-pijlen button{width:33px;height:33px;padding:8px}
  .rv-venster{padding-top:0}
  .rv-link{margin-top:-30px}
  .reviews .wrap:has(.rv-link){padding-bottom:26px}
  .blog .wrap{padding-bottom:60px}
}
@media(max-width:767px){
  /* split en regio mobiel (gemeten): tekstkolom gap 20, tekst -> foto 40 */
  .split-tekst,.regio .split-tekst{gap:20px}
  .split .wrap,.split.omgekeerd .wrap{gap:40px}
}
@media(max-width:767px){
  /* bron mobiel: busjes naast de kop, onder het label (niet eroverheen) */
  .stappen .deco-l,.stappen .deco-r{top:62px;width:72px}
  .stappen .deco-l{left:calc(-1 * (100vw - 100%) / 2 - 4px)}
  .stappen .deco-r{right:calc(-1 * (100vw - 100%) / 2 - 4px)}
}
@media(max-width:767px){.diensten .deco-auto{width:80px;top:5px;right:calc(-1 * (100vw - 100%) / 2)}}   /* gemeten bron 390: x310 y+5, 80x51 */
@media(max-width:767px){.paneel .deco-auto{width:120px;right:-10px}}   /* gemeten bron 390: 120x49 */

/* ---------- decoraties: gemeten posities en maten van de bron (desktop 1440 / mobiel 390) ---------- */
.diensten .deco-auto{width:220px;top:-60px}
.paneel .deco-auto{width:420px;right:-20px;bottom:-30px}
.stappen .deco-l{width:140px;top:0}
.stappen .deco-r{width:140px;top:0}
.cta-kaart .auto-l{width:220px;left:-20px;top:-35px}
.cta-kaart .auto-r{width:370px;right:-35px;bottom:-62px}
@media(max-width:1024px){.paneel .deco-auto{width:300px;right:-10px;bottom:-30px}}
@media(max-width:767px){
  .diensten .deco-auto{width:80px;top:5px}
  .paneel .deco-auto{width:120px;right:-10px;bottom:-30px}
  .stappen .deco-l{width:80px;top:55px;left:calc(-1 * (100vw - 100%) / 2)}
  .stappen .deco-r{width:50px;top:75px;right:calc(-1 * (100vw - 100%) / 2)}
  .cta-kaart .auto-l{width:80px;left:-10px;top:-12px}
  .cta-kaart .auto-r{width:100px;right:-10px;bottom:-28px}
}

/* ======================================================================
   AUTOBEDRIJF-UITBREIDING (30-09-2026): aanbod, autopagina, afspraakplanner.
   Stijl volgt de gemeten bouwstenen van de template: kaarten wit, radius 10, schaduw 0 0 35 .07,
   Funnel Display-titels, Poppins-UI, merkkleur voor prijs en knoppen.
   ====================================================================== */
/* afspraakplanner: dagtegels, gekozen auto, direct-contactregel */
.calc-tegel.dag{padding:12px 6px}
.calc-tegel.dag small{display:block;font-size:12px;line-height:16px;color:#8a949a;text-transform:capitalize;margin-bottom:2px}
.calc-tegel.dag b{font-size:15px}
.calc-tegel.gekozen.dag small{color:var(--donker)}
.calc-auto{display:flex;align-items:center;gap:8px;margin:-6px 0 16px;padding:8px 12px;border-radius:8px;background:rgba(var(--brand-rgb),.08);font-family:var(--ui);font-size:14px;font-weight:600;color:var(--ink)}
.calc-auto[hidden]{display:none}
.calc-auto svg{color:var(--brand);flex:none}
.calc .veld textarea{width:100%;padding:13px 16px;font-size:16px;font-family:inherit;color:var(--donker);border:2px solid #e3e9e6;border-radius:8px;background:var(--wit);resize:vertical}
.direct{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:6px;text-align:center}
.direct>span{font-family:var(--ui);font-size:15px;color:var(--tekst)}
.knop.lijn{background:var(--wit);color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.knop.lijn:hover{background:var(--brand);color:var(--wit)}
.knop.wa{background:#25d366;color:#fff}
.knop.wa:hover{background:#1da851}
.knop svg{flex:none}
.aanvraag .direct{display:none}

/* autokaart */
.aanbod .wrap{display:flex;flex-direction:column;gap:60px;padding:0 0 100px}
.aanbod.pt .wrap{padding-top:100px}
.aanbodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.autokaart{display:flex;flex-direction:column;background:var(--wit);border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.07);overflow:hidden;color:var(--tekst);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.autokaart:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.autokaart[hidden]{display:none}
.ak-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eef0f0}
.ak-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.autokaart:hover .ak-foto img{transform:scale(1.04)}
.ak-badge{position:absolute;left:14px;top:14px;background:var(--brand);color:var(--wit);font-family:var(--ui);font-weight:500;font-size:13px;line-height:20px;letter-spacing:.5px;text-transform:uppercase;padding:4px 14px;border-radius:60px}
.ak-badge.los{position:static;display:inline-block;align-self:flex-start}
.ak-inhoud{padding:22px 24px 20px;display:flex;flex-direction:column;flex:1}
.ak-inhoud h3{font-family:var(--kop);font-weight:700;font-size:22px;line-height:30px;color:var(--ink)}
.ak-sub{font-size:15px;line-height:22px;color:#6b6b6b;margin-top:2px}
.ak-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:18px 0 20px;font-family:var(--ui);font-size:14px;line-height:20px;color:var(--ink)}
.ak-specs li{display:flex;align-items:center;gap:8px}
.ak-specs svg{color:var(--brand);flex:none}
.ak-onder{margin-top:auto;border-top:1px solid #e6e6e6;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ak-prijs{font-family:var(--kop);font-weight:800;font-size:24px;line-height:28px;color:var(--brand)}
.ak-prijs small{display:block;font-family:var(--ui);font-weight:400;font-size:12px;line-height:16px;color:#777}
.ak-meer{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--ink);transition:gap .3s}
.autokaart:hover .ak-meer{gap:10px;color:var(--brand)}
@media(max-width:1024px){.aanbodgrid{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:767px){
  .aanbod .wrap{padding-bottom:60px;gap:40px}.aanbod.pt .wrap{padding-top:60px}
  .aanbodgrid{grid-template-columns:1fr}
}

/* aanbodpagina: filterbalk */
.aanbod.lijst .wrap{padding-top:60px;gap:24px}
.filterbalk{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--wit);border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.07);padding:22px 24px}
.filterbalk label{display:flex;flex-direction:column;gap:6px;font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.5px}
.filterbalk select{appearance:none;-webkit-appearance:none;width:100%;min-height:50px;padding:0 40px 0 18px;border:1px solid var(--rand);border-radius:50px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 18px center no-repeat;font-family:var(--ui);font-size:16px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer}
.filterbalk select:focus{outline:none;border-color:var(--brand)}
.aanbod.lijst .aantal{font-family:var(--ui);font-weight:600;color:var(--ink)}
.aanbod.lijst .geen{text-align:center;padding:40px 0}
.aanbod.lijst .geen a{color:var(--brand);text-decoration:underline}
@media(max-width:1024px){.filterbalk{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.filterbalk{padding:18px;gap:12px}}

/* autopagina */
.autopagina .wrap{padding:30px 0 60px}
.kruimel{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-family:var(--ui);font-size:14px;color:#777;margin-bottom:24px}
.kruimel a{color:var(--ink)}.kruimel a:hover{color:var(--brand)}
.kruimel svg{width:14px;height:14px}
.ap-raster{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}
.ag-hoofd{position:relative;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:#eef0f0}
.ag-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s var(--ease)}
.ag-slide.actief{opacity:1}
.ag-slide img{width:100%;height:100%;object-fit:cover}
.ag-pijl{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:background-color .3s,color .3s}
.ag-pijl:hover{background:var(--brand);color:#fff}
.ag-pijl.links{left:14px}.ag-pijl.rechts{right:14px}
.ag-teller{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.6);color:#fff;font-family:var(--ui);font-size:13px;padding:3px 10px;border-radius:20px}
.ag-duimen{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:10px;margin-top:10px}
.ag-duim{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:3/2;background:#eef0f0;opacity:.7;transition:opacity .3s,border-color .3s}
.ag-duim.actief,.ag-duim:hover{opacity:1;border-color:var(--brand)}
.ag-duim img{width:100%;height:100%;object-fit:cover}
.ap-info{position:sticky;top:20px;background:var(--wit);border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.07);padding:30px;display:flex;flex-direction:column;gap:14px}
.ap-info h1{font-size:34px;line-height:42px}
.ap-sub{margin-top:-8px;font-size:16px;color:#6b6b6b}
.ap-prijs{font-family:var(--kop);font-weight:800;font-size:38px;line-height:44px;color:var(--brand)}
.ap-prijs small{display:block;font-family:var(--ui);font-weight:400;font-size:13px;line-height:18px;color:#777;margin-top:2px}
.ap-kern{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 0;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
.ap-kern li{display:flex;align-items:center;gap:10px}
.ap-kern svg{color:var(--brand);flex:none}
.ap-kern small{display:block;font-family:var(--ui);font-size:12px;line-height:16px;color:#777}
.ap-kern b{display:block;font-family:var(--ui);font-weight:600;font-size:15px;line-height:20px;color:var(--ink)}
.ap-knoppen{display:flex;flex-direction:column;gap:10px}
.ap-knoppen .knop{width:100%;padding:15px 20px}
.ap-usp{display:flex;flex-direction:column;gap:6px;font-family:var(--ui);font-size:14px;color:var(--ink)}
.ap-usp li{display:flex;align-items:center;gap:8px}
.ap-usp svg{color:#1a9e4b;flex:none}
.ap-details{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;margin-top:50px}
.ap-details h2{font-family:var(--kop);font-weight:700;font-size:26px;line-height:34px;color:var(--ink);margin:0 0 14px}
.ap-details h2+.tekst{margin-bottom:30px}
.ap-opties{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.ap-opties li{display:flex;align-items:flex-start;gap:8px;font-size:16px;line-height:24px;color:var(--ink)}
.ap-opties svg{color:#1a9e4b;flex:none;margin-top:4px;stroke-width:3}
.ap-tabel{width:100%;border-collapse:collapse;font-family:var(--ui);font-size:15px}
.ap-tabel th,.ap-tabel td{text-align:left;padding:11px 0;border-bottom:1px solid #e9e9e9;vertical-align:top}
.ap-tabel th{font-weight:400;color:#777;width:46%}
.ap-tabel td{font-weight:600;color:var(--ink)}
.zoekblok.los{margin-top:0}
.zoekblok.los .zoekkaart{margin-top:0}
@media(max-width:1024px){.ap-raster,.ap-details{grid-template-columns:1fr}.ap-info{position:static}}
@media(max-width:767px){
  .autopagina .wrap{padding-top:20px}
  .ap-info{padding:22px 18px}.ap-info h1{font-size:28px;line-height:36px}.ap-prijs{font-size:32px;line-height:38px}
  .ag-duimen{gap:6px}.ag-pijl{width:38px;height:38px}
  .ap-opties{grid-template-columns:1fr}
}
@media(max-width:767px){.hero.kort .wrap{padding:50px 0 20px!important}}
@media(max-width:767px){.filterbalk select{font-size:14px;padding:0 30px 0 12px;background-position:right 12px center;min-height:44px}.filterbalk label{font-size:11px}}
@media(max-width:420px){.direct .knop-rij{flex-direction:column;width:100%}.direct .knop{width:100%}}

/* compacte afspraakplanner = maten van het zoekformulier van de bron (kaart 50/48, kop 60, gap 30, rijen 59, gap 15/20) */
.afspraakform .calc-auto{grid-column:1/-1;margin:0}
.afspraakform .extra.breed{grid-column:1/-1}
.afspraakform button[type=submit]{gap:10px}
.afspraakform .melding{margin:0}
.zoekform .meer-knop{align-self:center}
.aanvraag .zoekkaart{padding:50px 48px}
.aanvraag .zoekkaart .h2{font-size:var(--h2);line-height:var(--h2-lh);text-align:center}
@media(max-width:767px){.afspraakform .meer-knop{order:9;justify-self:center}.afspraakform button[type=submit]{order:10}.afspraakform .melding{order:11}}
/* gemeten bron: kop 80 onder de kaartrand, kaart 427 hoog (80 + 60 + 30 + 207 + 50) */
.zoekblok .zoekkaart{padding:80px 48px 50px}
@media(max-width:767px){.zoekblok .zoekkaart{padding:50px 20px}.aanvraag .zoekkaart{padding:40px 16px 30px}}
@media(max-width:767px){.zoekblok .zoekkaart{padding:50px 20px 26px}}   /* gemeten bron 390: kaart 569 */
@media(max-width:767px){.logobalk{margin-top:40px}.logobalk .wrap{padding:20px 0}.logobalk .marquee li{height:58px}}   /* gemeten bron 390: 40 onder de kaart, balk 98 */

/* Telefoon: de pagina mag nooit zijwaarts pannen (vaste regel Dikkie 08-10-2026, Kitbedrijf De Wit,
   contactpagina). iOS Safari negeert overflow-x:hidden op html voor het vegen met de vinger;
   overflow-x:clip wordt wel gerespecteerd en maakt body geen scrollcontainer, dus scroll-animaties
   blijven werken. overscroll-behavior-x:none stopt het doorgeven van een horizontale veeg. */
html,body{overflow-x:clip;overscroll-behavior-x:none}

/* =====================================================================================================
   VASTE REGEL Dikkie 09-10-2026 (Wasserij Van Delden, template 5; doorgevoerd in alle templates)
   1. Dienst-/landingspagina's: hero > eerste tekstblok > aanvraagkaart als eigen gekleurde band > rest > FAQ laatst
      (volgorde in bouw.py herorden()).
   2. Elk nieuw onderwerp een zichtbaar andere achtergrond: bouw.py banden() zet om en om .vlak-wit / .vlak-zacht
      (--vlak = 7% merkkleur op wit), de aanvraagband .vlak-band in de merkkleur. Gelijke lucht boven en onder.
   3. Lange tekst (artikelen): twee kolommen, links eyebrow + kop + inhoudsopgave (sticky), rechts de tekst;
      tussenkoppen met dunne lijn, opsommingen als kaartjes met een groen vinkje (#16a34a) in twee kolommen.
   4. Footer zwart #000, strak in kolommen, onderbalk met copyright links en juridisch rechts.
   ===================================================================================================== */
main>section.vlak-wit{background-color:var(--wit)}
main>section.vlak-zacht{background-color:var(--vlak)}
main>section.vlak:not(.vlak-vrij):not(.vlak-band)>.wrap{padding-top:100px!important;padding-bottom:100px!important}
main>section.voor-band.vlak:not(.vlak-vrij)>.wrap{padding-bottom:80px!important}
main>section.logobalk.vlak{margin-top:0}
main>section.zoekblok.vlak-vrij+section.logobalk.vlak{margin-top:100px}
.cta-blok.na-vlak{padding-top:100px}
/* aanvraagkaart als eigen band in de merkkleur, foto erdoor zoals de panelen */
main>section.zoekblok.band{position:relative;z-index:auto;background:var(--brand);isolation:isolate}
main>section.zoekblok.band::before{content:"";position:absolute;inset:0;background:var(--foto) center/cover no-repeat;opacity:.13;mix-blend-mode:luminosity;z-index:-1;pointer-events:none}
main>section.zoekblok.band>.wrap{padding:88px 30px!important}
main>section.zoekblok.band .zoekkaart{margin-top:0;box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
@media(max-width:1024px){main>section.vlak:not(.vlak-vrij):not(.vlak-band)>.wrap{padding-top:80px!important;padding-bottom:80px!important}}
@media(max-width:767px){
  main>section.vlak:not(.vlak-vrij):not(.vlak-band)>.wrap{padding-top:64px!important;padding-bottom:64px!important}
  main>section.voor-band.vlak:not(.vlak-vrij)>.wrap{padding-bottom:56px!important}
  main>section.zoekblok.vlak-vrij+section.logobalk.vlak{margin-top:40px}
  .cta-blok.na-vlak{padding-top:64px}
  main>section.zoekblok.band>.wrap{padding:64px 0!important}
}

/* 3. tekstblok: artikelen */
.artikel .wrap.tekstblok{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.tb-kop{position:sticky;top:130px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.tb-titel{font-family:var(--kop);font-weight:800;font-size:28px;line-height:38px;color:var(--ink);margin:0}
.tb-toc{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px solid #e3e3e3;display:flex;flex-direction:column;gap:10px;counter-reset:toc}
.tb-toc li{counter-increment:toc;display:flex;gap:10px;font-family:var(--ui);font-size:15px;line-height:22px}
.tb-toc li::before{content:counter(toc,decimal-leading-zero);color:var(--brand);font-weight:600;flex:none}
.tb-toc a{color:var(--tekst);transition:color .3s}
.tb-toc a:hover{color:var(--brand)}
.artikel .tb-tekst{font-size:17px;line-height:29px;color:var(--tekst)}
.artikel .tb-tekst h2{font-family:var(--kop);font-weight:700;font-size:28px;line-height:38px;color:var(--ink);margin:40px 0 16px;padding-top:32px;border-top:1px solid #e3e3e3;scroll-margin-top:120px}
.artikel .tb-tekst h2:first-child{margin-top:0;padding-top:0;border-top:0}
.artikel .tb-tekst h3{font-family:var(--ui);font-weight:600;font-size:17px;line-height:26px;color:var(--ink);margin:18px 0 4px}
.artikel .tb-tekst p{margin:0 0 14px}
.artikel .tb-tekst a{color:var(--brand);text-decoration:underline}
.tekst-vinken{list-style:none!important;padding:0!important;margin:18px 0 22px!important;display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:stap}
.tekst-vinken li{display:flex;align-items:flex-start;gap:12px;background:var(--wit);border:1px solid #e6e9ec;border-radius:10px;padding:14px 16px;font-size:16px;line-height:24px;color:var(--ink);box-shadow:0 6px 18px -14px rgba(0,0,0,.35)}
.tekst-vinken .v{width:24px;height:24px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;margin-top:0}
.tekst-vinken .v svg{width:14px;height:14px}
.tekst-vinken.genummerd li{counter-increment:stap}
.tekst-vinken.genummerd li::before{content:counter(stap);width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--ui);font-weight:600;font-size:13px;line-height:24px;text-align:center;flex:none}
@media(max-width:1024px){.artikel .wrap.tekstblok{grid-template-columns:1fr;gap:28px}.tb-kop{position:static}}
@media(max-width:767px){.tekst-vinken{grid-template-columns:1fr}.tb-titel{font-size:22px;line-height:30px}.artikel .tb-tekst h2{font-size:22px;line-height:30px}}

/* volledige Google-beoordeling, nooit in een vak (vaste regel 01-10 en 08-10-2026) */
.g-blok{display:inline-flex;align-items:center;gap:13px;background:none;border:0;border-radius:0;padding:0;box-shadow:none;text-decoration:none}
.g-blok .g-logo-kleur{display:flex;flex:none}
.g-blok .g-tekst{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.g-blok b{font-family:var(--ui);font-weight:600;font-size:15px;line-height:20px;color:var(--ink)}
.g-blok small{font-family:var(--ui);font-size:13px;line-height:18px;color:var(--tekst)}
.g-blok .sterren{color:#fbbc04;gap:2px}
.g-blok.op-donker b{color:#fff}.g-blok.op-donker small{color:#cfcfcf}
a.g-blok:hover small{text-decoration:underline}

/* 4. footer zwart en strak */
.footer.fz{background:#000;color:#c4c4c4;margin-top:150px;position:relative;overflow:visible}
.fz .fz-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr);gap:48px;padding:90px 0 64px}
.fz h2{font-family:var(--ui);font-weight:600;font-size:16px;line-height:24px;color:#fff;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.16);background:none}
.fz-merk{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.fz-merk .logo{display:block;padding:0}
.fz-merk .logo img{height:78px;width:auto;max-width:100%}
.fz-merk p{color:#c4c4c4;font-size:15px;line-height:26px;margin:0;max-width:380px}
.fz .f-socials{display:flex;gap:12px}
.fz .f-socials a{width:42px;height:42px;border:2px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:#fff;transition:opacity .3s}
.fz .f-socials a:hover{opacity:.8}
.fz .f-socials svg{width:20px;height:20px}
.fz .f-socials .soc-facebook{color:#1877F2}
.fz .f-socials .soc-linkedin{color:#0A66C2}
.fz .f-socials .soc-youtube{color:#FF0000}
.fz .f-socials .soc-pinterest{color:#E60023}
.fz .f-socials .soc-instagram{color:#e1306c;border:2px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) border-box}
.fz .f-socials .soc-google{color:#fff}
.fz-kol ul{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
.fz-kol li a{color:#dcdcdc;font-family:var(--tekstfont);font-size:15px;line-height:22px;transition:color .3s}
.fz-kol li a:hover{color:#fff;text-decoration:underline}
.fz-contact li{display:flex;gap:12px;align-items:flex-start;color:#dcdcdc;font-size:15px;line-height:22px}
.fz-contact li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--brand-licht)}
.fz-tijden{margin-top:26px}
.fz-tijden h3{font-family:var(--ui);font-weight:600;font-size:14px;line-height:20px;color:#fff;margin:0 0 10px}
.fz-tijden dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px;line-height:20px}
.fz-tijden dt{color:#c4c4c4}.fz-tijden dd{margin:0;color:#fff}
.fz .fz-knop{margin-top:26px;padding:14px 28px;font-size:16px;line-height:24px}
.fz .fz-knop:hover,.fz .fz-knop:focus-visible{background:#fff;color:var(--brand)}
.fz-werkgebied .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:22px 0;border-top:1px solid rgba(255,255,255,.12);font-size:14px;line-height:20px;color:#c4c4c4}
.fz-werkgebied b{color:#fff;font-family:var(--ui);font-weight:600}
.fz .onderbalk{background:#000;color:#a9a9a9;box-shadow:none;margin:0}
.fz .onderbalk .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;padding:22px 0;border-top:1px solid rgba(255,255,255,.12);font-family:var(--ui);font-size:14px;line-height:22px;text-align:left}
.fz .onderbalk b{color:#fff;font-weight:600}
.fz-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.fz-links a,.fz-links button{color:#d0d0d0;font-family:var(--ui);font-size:14px;line-height:22px;opacity:1;background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.fz-links a:hover,.fz-links button:hover{color:#fff;text-decoration:underline}
.fz-links .dps-made{color:#d0d0d0}
@media(max-width:1024px){.fz .fz-grid{grid-template-columns:1fr 1fr;gap:40px 32px}}
@media(max-width:767px){
  .footer.fz{margin-top:100px}
  .fz .fz-grid{grid-template-columns:1fr 1fr;gap:36px 18px;padding:64px 0 40px}
  .fz-merk,.fz-contact{grid-column:1/-1}
  .fz .onderbalk .wrap{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 0 104px}   /* ruimte voor de zwevende knoppen */
}

/* ---------- DPS-aanvullingen auto-paar (14-10-2026) ---------- */
/* logo zonder transparantie op de zwarte footer: witte plaat erachter, het logo zelf blijft het originele bestand */
.fz-merk .logo.plaat{background:#fff;border-radius:12px;padding:12px 18px}
.fz-merk .logo.plaat img{height:72px}
/* concept: de kaart die doorklikt krijgt een rand en een embleem, de rest wordt gedempt */
.autokaart.is-live,.dienstkaart.is-live,.blogkaart.is-live{outline:2px solid var(--brand);outline-offset:0}
.klik-hier{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:6px;padding:6px 16px;border-radius:999px;background:var(--brand);color:#fff;font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:18px;white-space:nowrap}
.dienstkaart .klik-hier{margin-top:-8px}
.autokaart.is-preview .ak-meer svg,.dienstkaart.is-preview .ic-rond,.blogkaart.is-preview .onder i{opacity:.45}
/* maatwerkblok */
.maatwerk .maatwerk-inhoud{margin-top:50px}
/* DPS-regel mobiel: dienstkaarten twee naast elkaar (oneven aantal: laatste over de volle breedte) */
@media(max-width:767px){.dienstgrid{gap:14px}.dienstkaart{width:calc((100% - 14px)/2);padding:22px 12px;gap:14px}.dienstkaart:last-child:nth-child(odd){width:100%}
  .dienstkaart h3{font-size:17px;line-height:23px;margin-top:0;hyphens:none;overflow-wrap:normal}.dienstkaart .ic-rond{transform:scale(.8);margin:-6px 0}}
/* ---------- conceptmelding (pop-up van concept-mode.js; ontbrak in de template, 14-10-2026) ---------- */
.dps-concept-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.dps-concept-modal[aria-hidden="false"]{opacity:1;visibility:visible}
.dps-concept-backdrop{position:absolute;inset:0;background:rgba(10,14,20,.62);backdrop-filter:blur(3px)}
.dps-concept-panel{position:relative;width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:16px;padding:40px 34px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3);transform:translateY(14px);transition:transform .45s var(--ease)}
.dps-concept-modal[aria-hidden="false"] .dps-concept-panel{transform:none}
.dps-concept-close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:0;background:#f1f3f5;color:#141414;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dps-concept-close svg{width:16px;height:16px}
.dps-concept-ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:rgba(var(--brand-rgb),.1);color:var(--brand)}
.dps-concept-ic svg{width:30px;height:30px}
.dps-concept-panel h3{font-family:var(--kop);font-weight:800;font-size:24px;line-height:31px;color:#141414;margin:0 0 10px}
.dps-concept-lead{font-size:16px;line-height:25px;color:#4a4a4a;margin:0 0 22px}
.dps-concept-works{background:#f6f8fa;border-radius:12px;padding:18px 20px;margin:0 0 22px;text-align:left}
.dps-concept-works strong{display:block;font-family:var(--ui);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:10px;text-align:center}
.dps-concept-works ul{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:8px;width:fit-content}
.dps-concept-works li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:22px;color:#2a2a2a}
.dps-concept-works li svg{width:18px;height:18px;flex:none;margin-top:2px;color:#2fb55c}
.dps-concept-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;border-radius:50px;background:var(--brand);color:#fff;font-family:var(--ui);font-weight:600;font-size:16px;cursor:pointer;transition:background .3s var(--ease)}
.dps-concept-btn:hover{background:var(--brand-donker)}
.dps-concept-by{display:block;margin-top:14px;font-size:12px;color:#8a8a8a;letter-spacing:.04em}
body.dps-concept-open{overflow:hidden}
@media(max-width:1024px){.dps-concept-pill{top:auto;bottom:86px;left:50%;transform:translateX(-50%)}}@media(max-width:767px){.dps-concept-panel{padding:36px 22px 24px}}
.hero-fotovorm{max-width:560px;margin-left:auto}
.hero-fotovorm .kader img{width:100%;height:100%;object-fit:cover}
@media(max-width:1024px){.hero-fotovorm{margin-inline:auto}}
/* DPS VASTE REGEL (alles in kaarten gecentreerd, op desktop en mobiel): reden- en USP-kaarten gecentreerd */
.redenkaart,.uspkaart{align-items:center;text-align:center}
.redenkaart .ic-rond,.uspkaart .ic-rond{margin-inline:auto}
/* DPS-regel mobiel (900 en kleiner): tekstblokken gecentreerd, lijsten als blok in het midden met de regels links */
@media(max-width:900px){
  .hero-tekst,.split-tekst,.kop.links{text-align:center;align-items:center}
  .hero-tekst .eyebrow,.split-tekst .eyebrow,.kop.links .eyebrow{align-self:center}
  .ic-lijst,.pijl-lijst,.regio-lijst{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
  .hero-tekst .knop-rij,.split-tekst .knop-rij{justify-content:center}
  .citaat{text-align:left}
  .kop.links .rv-pijlen{align-self:center}
}
/* concept: "Klik hier" als eigen regel gecentreerd boven de prijsregel van de autokaart */
.autokaart .klik-hier{display:flex;width:fit-content;margin:0 auto 14px}
/* rijdende auto bij de diensten (site.js): transform komt uit de scrollpositie, dus geen transition */
.diensten .deco-auto.rijdt{will-change:transform;transition:none}
@media(prefers-reduced-motion:reduce){.diensten .deco-auto.rijdt{transform:none!important}}
/* ---------- hero-mockup: rustige schaduwachtergrond achter de vrijstaande auto (Simon 14-10-2026) ----------
   De schermfoto is alleen nog sfeer: vervaagd en donker, met een schaduwwaas waar de auto staat. Zo valt er nooit
   een half logo, een rare rand of een andere auto zichtbaar achter de auto, welke pandfoto er ook in staat.
   Onder de auto ligt een zachte grondschaduw, zodat hij staat in plaats van zweeft. */
.scherm-foto{overflow:hidden;background:linear-gradient(160deg,var(--brand-donker),#0e1116)}
.scherm-foto img{filter:blur(1.1cqw) brightness(.55) saturate(.75);transform:scale(1.15)}
.scherm-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 45% at 62% 78%,rgba(0,0,0,.55),rgba(0,0,0,0) 70%),
             linear-gradient(180deg,rgba(var(--brand-rgb),.18) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.45) 100%)}
.mockup::after{content:"";position:absolute;left:19cqw;top:73.5cqw;width:78cqw;height:8cqw;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 72%);filter:blur(.6cqw)}
.mockup-auto{filter:drop-shadow(0 1.6cqw 1.8cqw rgba(0,0,0,.32))}
/* DPS vaste regel (02-10-2026): 4 dienstkaarten = op desktop 4 naast elkaar, nooit 3 + 1 (16-10-2026, Autoschade Bekker) */
@media(min-width:1025px){.dienstgrid:has(> :nth-child(4):last-child) .dienstkaart{width:calc((100% - 72px)/4)}}
/* concept-pill op desktop linksonder: bovenin viel hij over de infobalk (e-mail en socials) (16-10-2026) */
@media(min-width:1025px){.dps-concept-pill{top:auto;bottom:22px}}

/* ---------- vaste onderbalk (16-10-2026) ----------
   De zwevende belknop, de WhatsApp-knop en de concept-pill lagen los over koppen, knoppen, foto's en de footer.
   Nu staan ze samen in een eigen dekkende balk onderaan in de donkere merkkleur (net als de vaste kop bovenaan):
   de inhoud schuift er netjes onder weg en de body krijgt dezelfde ruimte onderaan, zodat de footer vrij blijft. */
:root{--dock:64px}
body{padding-bottom:var(--dock)}
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:var(--dock);z-index:79;background:var(--brand-donker);box-shadow:0 -6px 18px -10px rgba(0,0,0,.35);pointer-events:none}
.spoed{bottom:calc((var(--dock) - 51px)/2);padding:12px 24px;background:var(--brand-donker);box-shadow:none}
.spoed:hover{background:var(--zwart)}
.spoed .spoed-nr{margin-left:-10px;white-space:pre}   /* flex-gap niet tussen 'direct' en ': nummer' */
.wa-knop{bottom:calc((var(--dock) - 50px)/2);right:15px}
.wa-chat{bottom:calc(var(--dock) + 10px)}
.dps-concept-pill{bottom:calc((var(--dock) - 38px)/2)!important;top:auto!important;padding:6px 16px!important;line-height:24px}
@media(max-width:1024px){
  .dps-concept-pill{left:15px!important;transform:none!important}
}
@media(max-width:767px){
  :root{--dock:60px}
  .spoed{bottom:calc((var(--dock) - 44px)/2);left:auto;right:66px;transform:none;width:auto;max-width:none;font-size:14px;line-height:20px;padding:12px 12px;gap:8px;white-space:nowrap}
  .spoed .spoed-nr{display:none}
  .wa-knop{width:46px;height:46px;bottom:calc((var(--dock) - 46px)/2);right:12px}
  .wa-chat{bottom:calc(var(--dock) + 10px)}
  .dps-concept-pill{left:12px!important;font-size:10px!important;letter-spacing:1px!important;padding:6px 10px!important;gap:6px!important}
  .taalknop{bottom:calc(var(--dock) + 12px)}
}
@media(max-width:1024px){body.menu-open::after{visibility:hidden}}
body.cookie-open::after{visibility:hidden}
@media print{body{padding-bottom:0}body::after{display:none}}

/* hero op een laag scherm (17-10-2026, Autobedrijf Tolman): op 1280x720, 1366x768 en mobiel viel de heroknop onder
   de vouw. Alleen de verticale ruimte wordt strakker; op mobiel en op een heel laag scherm staan de knoppen direct
   onder de tekst en de icoonlijst eronder, zodat kop en knop altijd in het eerste scherm vallen. */
@media(min-width:768px) and (max-height:820px){
  .hero .wrap{padding-top:36px}
  .hero-tekst{gap:12px}
  .hero-tekst .tekst{margin:0}
  .ic-lijst{gap:8px}
  .hero .knop-rij{margin-top:4px}
}
@media(min-width:768px) and (max-height:740px){.hero .knop-rij{order:4}.hero .ic-lijst{order:5}}
@media(max-width:767px){
  .hero .wrap{padding-top:26px}
  .hero-tekst{gap:14px}
  .hero-tekst .tekst{margin:0}
  .hero .knop-rij{order:4;margin-top:0}
  .hero .ic-lijst{order:5}
}