/* LekkerParkeren — subpagina's (1-10-2026). Bouwt op styles.css van de homepage: zelfde tokens, telefoon, kaarten, lint, stappen.
   Alleen wat de homepage niet had staat hier. */
@property --g1{syntax:"<color>";inherits:true;initial-value:#1f9088}
@property --g2{syntax:"<color>";inherits:true;initial-value:#1c6a77}
@property --g3{syntax:"<color>";inherits:true;initial-value:#141238}
.grond{transition:--g1 .9s var(--ease),--g2 .9s var(--ease),--g3 .9s var(--ease)}
.sub .top{background:rgba(20,18,56,.35)}
.sub .top:not(.toon-dl) .dl{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav a[aria-current="page"],.panel a[aria-current="page"]{background:rgba(255,255,255,.18)}
.panel a[aria-current="page"]{background:#e3f6f3}

/* ---------- kop van de subpagina ---------- */
.kop{padding-top:calc(var(--hh) + 44px);padding-bottom:clamp(40px,7vw,96px);position:relative;overflow:clip}
.kop-grid{display:grid;gap:30px;align-items:center}
.kop .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 13px;border-radius:999px;background:rgba(20,18,56,.55);font-size:.8125rem;font-weight:600;color:var(--soft)}
.kop .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(53,195,182,.25)}
.kop h1{margin-top:14px;max-width:17ch;text-shadow:0 2px 14px rgba(20,18,56,.25)}
.kop .lead{max-width:40ch}
.kop .acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;align-items:center}
.kop-beeld{position:relative;justify-self:center;display:grid;place-items:center;perspective:1200px}
.kop-beeld .phone{--pw:min(250px,62vw)}
/* Edmar 21-10 msg 91121: originele Bob/AH-mockups terug i.p.v. het generieke sessiescherm */
.mockup-vrij{width:min(420px,88vw);height:auto;filter:drop-shadow(0 26px 50px rgba(8,6,30,.5))}
.stroopy{position:absolute;width:clamp(92px,24vw,150px);right:-18%;bottom:6%;z-index:3;filter:drop-shadow(0 18px 28px rgba(8,6,30,.55));animation:zweef 5s ease-in-out infinite}
.stroopy--links{right:auto;left:-20%;bottom:auto;top:10%}
@keyframes zweef{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.blob{position:absolute;inset:auto;width:min(130%,620px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(53,195,182,.45),transparent);z-index:-1;filter:blur(10px)}
@media (min-width:900px){
  .kop{padding-top:calc(var(--hh) + 70px)}
  .kop-grid{grid-template-columns:1.1fr .9fr;gap:56px}
  .kop-beeld .phone{--pw:min(290px,24vw)}
}

/* ---------- algemene secties ---------- */
.sectie-kop{max-width:760px}
.sectie-kop.center{margin-inline:auto}
.sectie-kop p{margin-top:12px;color:var(--soft);font-size:clamp(1rem,1.6vw,1.2rem);max-width:58ch;text-wrap:pretty}
.sectie-kop.center p{margin-inline:auto}
.lint-los{margin-top:clamp(40px,6vw,72px)}
.js .lint-los.lint--in{transform:translateX(-60%);opacity:0}
.js .lint-los.lint--in.is-in{transform:none;opacity:1;transition:transform 1s var(--ease),opacity .6s}
.js.no-motion .lint-los.lint--in{transform:none;opacity:1}

/* tegels: kaarten met icoon of beeld */
.tegels{display:grid;gap:16px;margin-top:clamp(32px,5vw,56px)}
@media (min-width:700px){.tegels{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tegels.drie{grid-template-columns:repeat(3,1fr)}}
.tegel-k{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:clamp(22px,2.6vw,30px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .3s var(--ease),background .3s}
.tegel-k:hover{transform:translateY(-4px);background:rgba(255,255,255,.12)}
.tegel-k h3{font-size:clamp(1.1rem,1.8vw,1.3rem)}
.tegel-k p{margin-top:8px;color:var(--soft);font-size:.975rem}
.tegel-k .ico{width:46px;height:46px;border-radius:14px;background:var(--teal);color:var(--ink);display:grid;place-items:center;margin-bottom:16px;font-weight:800}
.tegel-k .ico svg{width:24px;height:24px}
.tegel-k.wit{background:var(--white);color:var(--ink);border:0}
.tegel-k.wit p{color:var(--meta)}

/* blok: tekst naast beeld, wisselt om */
.blok{display:grid;gap:36px;align-items:center}
.blok + .blok{margin-top:clamp(64px,9vw,120px)}
.blok .tekst p{margin-top:14px;color:var(--soft);font-size:clamp(1rem,1.5vw,1.125rem);max-width:54ch}
.blok .tekst .lead{color:var(--white)}
.blok .beeld{justify-self:center;position:relative}
.blok .beeld .phone{--pw:min(250px,62vw)}
.blok .foto{border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(8,6,30,.7);max-width:520px}
.blok .foto img{width:100%;height:auto}
@media (min-width:900px){.blok{grid-template-columns:1fr 1fr;gap:72px}.blok.om .tekst{order:2}.blok .beeld .phone{--pw:270px}}

/* grote cijfers */
.cijfers{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(32px,5vw,56px)}
@media (min-width:900px){.cijfers{grid-template-columns:repeat(4,1fr)}}
.cijfer{border-top:2px solid rgba(255,255,255,.35);padding-top:14px}
.cijfer b{display:block;font-weight:800;font-size:clamp(2rem,5vw,3.25rem);line-height:1;color:var(--teal);letter-spacing:-.02em}
.cijfer span{display:block;margin-top:8px;font-weight:600}

/* prijskaarten */
.prijzen{display:grid;gap:18px;margin-top:clamp(32px,5vw,56px);align-items:stretch}
@media (min-width:800px){.prijzen{grid-template-columns:repeat(2,1fr);max-width:920px;margin-inline:auto}}
.prijs{position:relative;background:var(--white);color:var(--ink);border-radius:26px;padding:clamp(24px,3vw,36px);box-shadow:0 30px 60px -24px rgba(8,6,30,.7);display:flex;flex-direction:column}
.prijs.top-keus{box-shadow:0 0 0 3px var(--teal),0 30px 60px -24px rgba(8,6,30,.7)}
.prijs .badge{position:absolute;top:-14px;left:24px;background:var(--star);color:var(--ink);font-weight:700;font-size:.8125rem;padding:5px 12px;border-radius:999px}
.prijs h3{font-size:1rem;font-weight:600;color:var(--meta)}
.prijs .bedrag{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:10px}
.prijs .per{color:var(--meta);font-weight:500;margin-top:4px}
.prijs ul{list-style:none;padding:0;margin:20px 0 22px;display:grid;gap:10px}
.prijs li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.prijs li .check{width:22px;height:22px;margin-top:1px}
.prijs .btn{margin-top:auto;background:var(--ink);color:var(--white)}
.prijs .noot{margin-top:14px;font-size:.875rem;color:var(--meta)}

/* vergelijkingstabel (companies.html, Edmar 7-10 msg 83042): geen brede scroll-tabel meer op
   mobiel. LekkerParkeren staat altijd naast precies 1 gekozen concurrent (knoppen), op desktop
   gewoon alle kolommen in 1 overzichtelijke tabel. Zelfde <table>, alleen welke td/th zichtbaar
   zijn verschilt per breakpoint — geen dubbele content, altijd echte table/th/scope. */
/* Edmar 20-10 msg 90309: opmaak gelijk aan de glasachtige, donkere tabel van /nl/tarieven/ (.vgl) i.p.v. een losstaand wit kaartje */
.vergelijk{margin-top:clamp(32px,5vw,56px);background:rgba(255,255,255,.06);color:var(--white);border-radius:24px;border:1px solid rgba(255,255,255,.14);padding:18px 18px 22px}
.vergelijk-scroll{overflow-x:auto;overflow-y:hidden;border-radius:16px;-webkit-overflow-scrolling:touch}
.vk-kiezer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.vk-kiezer span{font-weight:600;color:var(--soft);margin-right:2px;font-size:.875rem}
.vk-knop{border:1.5px solid rgba(255,255,255,.35);background:transparent;color:var(--white);padding:9px 16px;min-height:40px;border-radius:999px;font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.vk-knop.is-actief{background:var(--teal);border-color:var(--teal);color:var(--ink);font-weight:800}
.vergelijk table{border-collapse:collapse;width:100%;font-size:.9375rem}
.vergelijk th,.vergelijk td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1);vertical-align:top}
.vergelijk thead th{font-size:.875rem;color:var(--soft);font-weight:600;background:transparent}
.vergelijk thead th.wij{background:transparent;color:var(--teal);font-weight:800}
.vergelijk td.wij{background:rgba(53,195,182,.16);font-weight:700}
.vergelijk tbody th{font-weight:600}
.vergelijk tr:last-child td,.vergelijk tr:last-child th{border-bottom:0}
@media (max-width:699px){
  .vergelijk td[data-col],.vergelijk th[data-col]{display:none}
  .vergelijk[data-vs="yellowbrick"] [data-col="yellowbrick"],
  .vergelijk[data-vs="easypark"] [data-col="easypark"],
  .vergelijk[data-vs="smsparking"] [data-col="smsparking"]{display:table-cell}
  .vergelijk th,.vergelijk td{padding:12px 10px;font-size:.8125rem;overflow-wrap:anywhere;word-break:break-word}
  .vergelijk tbody th{max-width:92px}
}
@media (min-width:700px){
  .vk-kiezer{display:none}
  .vergelijk{overflow-x:auto}
}

/* rekenhulp */
.reken{display:grid;gap:24px;margin-top:clamp(32px,5vw,56px);align-items:start}
@media (min-width:900px){.reken{grid-template-columns:1.2fr .8fr}}
.reken-in{background:var(--white);color:var(--ink);border-radius:24px;padding:clamp(22px,3vw,34px);box-shadow:0 30px 60px -24px rgba(8,6,30,.7);display:grid;gap:26px}
.veld label,.veld legend{display:flex;justify-content:space-between;gap:12px;font-weight:600;line-height:1.3}
.veld output{font-weight:800;color:var(--teal-top);font-variant-numeric:tabular-nums;white-space:nowrap}
.veld input[type=range]{width:100%;margin-top:14px;accent-color:var(--teal-top);height:28px;cursor:pointer}
.veld fieldset{border:0;padding:0}
.veld .keuzes{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.veld .keuzes label{display:block;position:relative}
.veld .keuzes input{position:absolute;opacity:0;inset:0;cursor:pointer}
.veld .keuzes span{display:block;padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 2px #d4d6e2;font-weight:600;min-height:44px;line-height:24px}
.veld .keuzes input:checked + span{background:var(--ink);color:var(--white);box-shadow:none}
.veld .keuzes input:focus-visible + span{outline:3px solid var(--star);outline-offset:3px}
.reken-uit{background:var(--teal);color:var(--ink);border-radius:24px;padding:clamp(22px,3vw,34px);box-shadow:0 30px 60px -24px rgba(8,6,30,.7);position:relative;overflow:hidden}
.reken-uit p{font-weight:600}
.reken-uit .totaal{display:block;font-size:clamp(2.6rem,7vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.reken-uit .per{font-weight:600}
.reken-uit .noot{font-size:.8125rem;font-weight:500;margin-top:16px;opacity:.85}
.reken-uit .btn{margin-top:20px;background:var(--ink);color:var(--white)}
.reken-uit img{position:absolute;right:-14px;bottom:-10px;width:110px;opacity:.95;pointer-events:none}
.reken-uit .acties{position:relative;z-index:1;max-width:calc(100% - 70px)}

/* tijdlijn (over ons) */
.tijdlijn{list-style:none;padding:0;margin-top:clamp(32px,5vw,56px);display:grid;gap:22px;border-left:2px solid rgba(255,255,255,.3);padding-left:24px}
.tijdlijn li{position:relative}
.tijdlijn li::before{content:"";position:absolute;left:-32px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 5px rgba(53,195,182,.25)}
.tijdlijn b{display:block;font-size:1.15rem}
.tijdlijn p{color:var(--soft);margin-top:4px}

/* afsluitende CTA-band */
.cta-band{background:linear-gradient(120deg,var(--teal-top),var(--teal-mid));border-radius:30px;padding:clamp(28px,5vw,56px);display:grid;gap:22px;align-items:center;position:relative;overflow:hidden;box-shadow:0 30px 60px -24px rgba(8,6,30,.7)}
.cta-band h2{font-size:clamp(1.6rem,3.6vw,2.6rem);max-width:20ch}
.cta-band p{margin-top:10px;color:var(--soft);max-width:46ch}
.cta-band .acties{display:flex;flex-wrap:wrap;gap:12px}
.cta-band img.mas{width:120px;justify-self:end}
@media (min-width:900px){.cta-band{grid-template-columns:1fr auto auto}.cta-band img.mas{width:150px}}

/* beweging: telefoons op subpagina's kantelen met de muis (sub.js), geen GSAP nodig */
.tilt{transition:transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.stroopy{animation:none}.tegel-k:hover{transform:none}.grond{transition:none}}

/* stappen met een telefoon eronder (hoe het werkt) */
.phone video{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--pw,280px)*.125);background:#14123a}
.stappen--beeld li{display:flex;flex-direction:column}
.stap-beeld{margin-top:auto;padding-top:18px;display:flex;justify-content:center}
.stap-beeld .phone{--pw:min(150px,36vw)}
.stap-stores .stores{flex-direction:column;align-items:center;margin-top:0}
.stap-stores .stores a img{height:40px}
@media (min-width:900px){.stap-beeld .phone{--pw:min(200px,17vw)}}

/* kentekens (hoe het werkt): de gele NL-platen uit de app */
.platen{position:relative;display:grid;gap:14px;justify-items:center;padding:28px 10px;perspective:900px}
.kenteken{display:inline-flex;align-items:stretch;background:#ffc81e;color:#111;font-weight:800;font-size:clamp(1.6rem,6vw,2.4rem);letter-spacing:.04em;border-radius:10px;overflow:hidden;box-shadow:0 18px 36px -12px rgba(8,6,30,.7),inset 0 0 0 3px #111;line-height:1;padding-right:18px}
.kenteken i{font-style:normal;display:grid;place-items:end center;background:#1f3fa8;color:#fff;font-size:.42em;letter-spacing:0;padding:10px 8px 8px;margin-right:16px}
.kenteken i,.kenteken{min-height:62px}
.kenteken{align-items:center}
.kenteken i{align-self:stretch}
.kenteken:nth-child(1){transform:rotate(-4deg) translateX(-6%)}
.kenteken:nth-child(2){transform:rotate(3deg) translateX(8%)}
.kenteken--plus{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);font-size:1rem;letter-spacing:0;padding:0 22px;border-style:dashed;min-height:52px}
.pil-gratis{position:absolute;top:0;right:4%;background:var(--teal);color:var(--ink);font-weight:800;padding:6px 14px;border-radius:999px;transform:rotate(8deg);box-shadow:0 10px 20px -8px rgba(8,6,30,.6)}

/* zakelijk: twee telefoons naast elkaar in de kop (statisch, zonder de scroll-pin van de homepage) */
.duo--kop{position:relative;height:auto;display:flex;justify-content:center;gap:clamp(10px,3vw,24px);margin:0;perspective:1200px}
.duo--kop figure{position:relative;transition:transform .8s var(--ease)}
.duo--kop .pil{opacity:1}
.duo--kop .phone{--pw:min(160px,40vw)}
.duo--kop .f-prive{transform:rotate(-5deg) translateY(18px)}
.duo--kop .f-zak{transform:rotate(5deg)}
.kop-beeld.is-in .duo--kop .f-prive{transform:rotate(-7deg) translate(-6px,22px)}
.kop-beeld.is-in .duo--kop .f-zak{transform:rotate(7deg) translateX(6px)}
@media (min-width:900px){.duo--kop .phone{--pw:min(220px,16vw)}}
/* Edmar 20-10 msg 90483: duo--kop hergebruikt binnen .blok .beeld (zakelijk-sectie) — die regel is specifieker
   (.blok .beeld .phone) dan .duo--kop .phone en zou 'm anders overschrijven, vandaar deze override */
.beeld .duo--kop .phone{--pw:min(160px,40vw)}
@media (min-width:900px){.beeld .duo--kop .phone{--pw:min(220px,16vw)}}
@media (max-width:899px){.cta-band img.mas{position:absolute;right:-8px;bottom:-12px;width:96px;opacity:.9}.cta-band .acties{max-width:calc(100% - 70px)}}

/* team (over ons) */
.team{display:grid;align-items:start;grid-template-columns:repeat(3,1fr);gap:clamp(12px,3vw,40px);margin-top:clamp(32px,5vw,56px);max-width:860px}
.lid{display:grid;align-content:start;justify-items:center;text-align:center;gap:14px}
.lid img{width:clamp(88px,24vw,180px);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--teal),0 0 0 10px rgba(53,195,182,.2),0 24px 44px -16px rgba(8,6,30,.7)}
.lid b{display:block;font-size:clamp(1rem,2vw,1.3rem)}
.lid span{display:block;color:var(--soft);font-size:clamp(.8125rem,1.5vw,1rem);line-height:1.3}
.stroopy-groot{width:min(300px,60vw);filter:drop-shadow(0 24px 34px rgba(8,6,30,.55));animation:zweef 5s ease-in-out infinite}
.bronvermelding{margin-top:12px;color:var(--meta);font-weight:500;font-size:.9375rem}
.bronvermelding a{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.stroopy-groot{animation:none}}
.sub .act--flow{padding-block:clamp(56px,7vw,100px)}

/* widget-kaart: rustige, kleine illustratie van de Live Activity op het vergrendelscherm */
.widget-kaart{margin-top:clamp(20px,3vw,32px);max-width:340px}
.widget-kaart img{width:100%;height:auto;display:block}
.widget-kaart figcaption{margin-top:10px;color:var(--soft);font-size:.875rem}

/* ── Locaties (10-10, Edmar 84692): zoeken + provincies als uitklapblokken ── */
.zoek{margin-top:22px;max-width:440px}
.zoek input{width:100%;font:inherit;font-size:1rem;padding:14px 18px;border-radius:999px;border:2px solid rgba(255,255,255,.25);background:rgba(20,18,56,.55);color:var(--white)}
.zoek input::placeholder{color:rgba(217,243,240,.7)}
.zoek input:focus-visible{outline:none;border-color:var(--teal)}
.zoek-uit{margin-top:8px;min-height:1.4em;font-size:.875rem;color:var(--soft)}
.provs{display:grid;gap:10px;margin-top:20px}
@media (min-width:900px){.provs{grid-template-columns:1fr 1fr;align-items:start;gap:12px 20px}}
.prov{border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.prov summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;cursor:pointer;font-weight:700;font-size:1.0625rem;list-style:none}
.prov summary::-webkit-details-marker{display:none}
.prov summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);rotate:45deg;translate:0 -3px;transition:rotate .2s;flex:none}
.prov[open] summary::after{rotate:225deg;translate:0 3px}
.prov summary small{margin-left:auto;font-weight:500;font-size:.8125rem;color:var(--soft)}
.steden{list-style:none;margin:0;padding:0 20px 18px;display:flex;flex-wrap:wrap;gap:8px}
.steden li{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.875rem}
.steden li[hidden]{display:none}
.steden a{color:var(--ink);font-weight:700;text-decoration:none}
.steden li:has(a){background:var(--teal)}
@media (max-width:899px){.kop--locaties .kop-beeld{display:none}}

/* ── LekkerBeloond (10-10, Edmar 84748) ── */
.pil-bonus{display:inline-flex;align-items:center;gap:10px;margin:18px 0 16px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:.9375rem;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.pil-bonus img{width:30px;height:30px;border-radius:50%}
.logos{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:760px){.logos{grid-template-columns:repeat(6,1fr);gap:14px}}
.logos li{display:grid;place-items:center;height:72px;padding:10px 12px;border-radius:16px;background:#fff}
.logos li.donker{background:#141238}
.logos img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain}
.faq{display:grid;gap:10px;margin-top:20px;max-width:760px}
.faq .prov summary::after{margin-left:auto}
.faq .prov p{padding:0 20px 18px;color:var(--soft)}
.logos li.donker{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
@media (max-width:759px){
  .tegels.beloningen{grid-template-columns:1fr 1fr;gap:10px}
  .tegels.beloningen .tegel-k{padding:16px}
  .tegels.beloningen .ico{width:38px;height:38px;margin-bottom:10px}
  .tegels.beloningen h3{font-size:1rem}
  .tegels.beloningen p{font-size:.875rem}
  .cta-band--vriend .mas{display:none}
}

/* ── Contact (10-10, Edmar 84760): Ron gecentreerd, kort formulier, niets dat het formulier bedekt ── */
.contact-wrap{max-width:620px;text-align:center}
.ron{display:grid;justify-items:center;gap:10px;margin:0 auto 18px}
.ron img{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--teal),0 16px 40px rgba(0,0,0,.35)}
.ron figcaption{display:grid;line-height:1.3}.ron b{font-size:1.25rem}.ron span{color:var(--soft)}
.kop--contact .lead{margin-inline:auto}
.snel{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.cform{display:grid;gap:14px;margin-top:28px;padding:clamp(20px,4vw,32px);border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);text-align:left}
.cform label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:6px}
.cform label small{font-weight:400;color:var(--soft)}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:1rem;padding:13px 16px;border-radius:14px;border:2px solid rgba(255,255,255,.2);background:rgba(20,18,56,.6);color:var(--white)}
.cform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{outline:none;border-color:var(--teal)}
.cform [hidden]{display:none}
.cform .btn{justify-self:start;border:0;cursor:pointer;font:inherit;font-weight:700}
.cform-fout{color:#ffb4a8;font-size:.9375rem}
.cform-noot{font-size:.8125rem;color:var(--soft)}.cform-noot a{color:var(--teal)}
.stap-logos{display:grid;gap:8px;padding:14px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);width:min(220px,100%)}
.stap-logos img{width:100%;height:52px;object-fit:contain;padding:8px 10px;border-radius:12px;background:#fff}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-ok{padding:14px 16px;border-radius:14px;background:rgba(53,195,182,.18);color:var(--white);font-weight:600}
.cform .btn:disabled{opacity:.6;cursor:wait}
/* Edmar 84808: stap 1 niet meer klein + leeg; App Store-scherm + rating */
.stap-proof{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:.875rem;color:var(--soft)}
.stap-proof svg{width:14px;height:14px}.stap-proof strong{color:#ffc01e}
.stap-badges{margin-top:10px}.stap-badges .stores{display:flex;flex-wrap:wrap;gap:6px}.stap-badges .stores img{height:34px;width:auto}
.kop .eyebrow--merk{background:none;padding:0;border-radius:0;font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:800;letter-spacing:-.01em;color:var(--teal)} /* Edmar 84863: geen apart vakje voor LekkerBeloond */
/* White label-bewijs (Edmar 84877/84880): partnerlogo's monochroom zonder vakjes + Consumentenbond-uitslag met bron */
.wl-logos{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,6vw,64px)}
.wl-logos img{height:clamp(28px,4vw,40px);width:auto;filter:brightness(0) invert(1);opacity:.85}
.wl-cb{margin:clamp(28px,4vw,44px) 0 0;padding:clamp(20px,3vw,28px);border-left:4px solid var(--teal);background:rgba(255,255,255,.06);border-radius:0 18px 18px 0;max-width:720px}
.wl-cb p{font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.45}.wl-cb b{color:var(--teal)}
.wl-cb figcaption{margin-top:10px;font-size:.875rem;color:var(--soft)}.wl-cb a{color:var(--teal)}
.wl-logos img[alt="Q8"]{height:clamp(40px,5.6vw,56px)}
/* Edmar 84890: logo's in eigen merkkleuren, op één lichte strook (geen losse vakjes) */
.wl-logos{background:#fff;border-radius:20px;padding:clamp(18px,3vw,28px) clamp(22px,4vw,40px);justify-content:space-around;max-width:720px}
.wl-logos img{filter:none;opacity:1}
@media (max-width:480px){.wl-logos{gap:16px;flex-wrap:nowrap;padding:16px}.wl-logos img{height:22px}.wl-logos img[alt="Q8"]{height:32px}}

/* ── FAQ (11-10, Edmar 85033) ── */
.faq-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.faq-nav a{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.12);color:var(--white);text-decoration:none;font-weight:600;font-size:.875rem}
.faq-nav a:hover{background:var(--teal);color:var(--ink)}
.faq-wrap{max-width:860px}
.faq-kop{margin-top:clamp(36px,5vw,56px);font-size:clamp(1.5rem,3vw,2.1rem);scroll-margin-top:110px}
.faq-kop:first-child{margin-top:0}
.faq .prov a{color:var(--teal);font-weight:600}
.faq [hidden],.faq-kop[hidden]{display:none}
/* Servicekosten vergeleken (Edmar 85084/85088) */
.vgl-wrap{margin-top:22px;overflow-x:auto;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.vgl{width:100%;border-collapse:collapse;font-size:.9375rem}
.vgl th,.vgl td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.1)}
.vgl thead th{font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;color:var(--soft)}
.vgl tbody th{font-weight:700;white-space:nowrap}
.vgl tr:last-child th,.vgl tr:last-child td{border-bottom:0}
.vgl .lp{background:rgba(53,195,182,.16)}.vgl .lp th{color:var(--teal)}
.vgl small{color:var(--soft);font-size:.8125rem}
.vgl-bron{margin-top:12px;font-size:.8125rem;color:var(--soft)}.vgl-bron a{color:var(--teal)}
@media (max-width:600px){.vgl{font-size:.8125rem}.vgl th,.vgl td{padding:10px}.vgl tbody th{white-space:normal}}
@media (max-width:600px){.vgl th,.vgl td{padding:9px 8px}.vgl{font-size:.78rem}}
/* Dashboard-lightbox companies.html (Edmar 20-10 msg 90309) */
.dash-open{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:16px}
.dash-open:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
/* ponytail: dialog[open] ipv kale #dash-lightbox, anders overschrijft onze position:fixed de UA display:none als de dialog dicht is */
#dash-lightbox[open]{position:fixed;inset:0;margin:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:16px;padding-top:max(16px,env(safe-area-inset-top));background:transparent;display:flex;align-items:center;justify-content:center}
#dash-lightbox::backdrop{background:rgba(8,6,30,.82)}
#dash-lightbox img{display:block;max-width:min(92vw,1100px);width:auto;max-height:85dvh;height:auto;border-radius:16px;object-fit:contain}
#dash-lightbox-sluit{position:fixed;top:max(16px,env(safe-area-inset-top));right:16px;width:36px;height:36px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(20,18,56,.6);color:var(--white);font-size:1.25rem;line-height:1;cursor:pointer;z-index:1}
#dash-lightbox-sluit:hover{background:var(--teal);color:var(--ink);border-color:var(--teal)}
@media (max-width:640px){.dash-fig{max-width:none}}
/* Artikel-body nieuws-pagina's (Edmar 22-10 msg 91297): links uitgelijnd tegen dezelfde rand als de
   hero/.wrap, GEEN margin:auto (dat centreerde 'm eerder als smalle losse kolom) */
.artikel-body{max-width:none}
.artikel-body h2{margin:40px 0 14px;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.artikel-body h2:first-child{margin-top:0}
.artikel-body p{margin:0 0 18px;line-height:1.6}
.artikel-body blockquote{margin:28px 0}
/* Edmar 22-10 msg 91328: op desktop oogde het blok hol (phone veel hoger dan de alinea ernaast) */
.artikel-sectie{padding-block:clamp(40px,5vw,64px)}
.artikel-body .blok{align-items:start;gap:28px}
@media (min-width:900px){.artikel-body .blok{grid-template-columns:1fr auto}.artikel-body .blok .beeld{justify-self:start}.artikel-body .blok .beeld .phone{--pw:125px}}
/* Breadcrumb nieuws-pagina's (Edmar 21-10 msg 91169) */
.broodkruim{font-size:.8125rem;color:var(--soft);margin-bottom:14px}
.broodkruim a{color:var(--soft);text-decoration:underline}
.broodkruim a:hover{color:var(--teal)}
.broodkruim [aria-current]{color:var(--white)}
/* QR-afsluiter Bob/AH (Edmar 21-10 msg 91145) */
.qr-rij{display:flex;justify-content:center;gap:clamp(24px,6vw,56px);flex-wrap:wrap;margin-top:clamp(32px,5vw,48px)}
.qr-rij figure{margin:0;text-align:center}
.qr-rij img{width:140px;height:auto;border-radius:12px;background:#fff;padding:8px}
.qr-rij figcaption{margin-top:8px;font-size:.875rem;color:var(--soft)}
/* Juridische pagina's (Edmar 85158): live tekst 1-op-1, alleen opmaak */
.kop--jur{padding-bottom:12px}
.jur-grid{display:grid;gap:24px;align-items:start}
@media (min-width:1000px){.jur-grid{grid-template-columns:280px 1fr}.jur-toc{position:sticky;top:96px;max-height:calc(100svh - 120px);overflow:auto}}
.jur-toc details{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px 18px}
.jur-toc summary{font-weight:700;cursor:pointer}
.jur-toc ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:.875rem}
.jur-toc a{color:var(--soft);text-decoration:none}.jur-toc a:hover{color:#fff;text-decoration:underline}
.jur-toc .toc-art{padding-left:12px;font-size:.8125rem}
.jur{background:#fff;color:var(--ink);border-radius:22px;padding:clamp(20px,4vw,48px);font-size:1rem;line-height:1.7;max-width:820px;min-width:0;overflow-wrap:anywhere}
.jur p{margin:0 0 1em}
.jur .jk{scroll-margin-top:96px;font-family:Poppins,system-ui,sans-serif}
.jur .jk-deel{margin-top:1.8em;font-size:1.25rem;line-height:1.3;color:var(--navy)}
.jur .jk-art{margin-top:1.4em;font-size:1.05rem;color:var(--navy)}
.jur>p:first-child{margin-top:0}

/* Herhaalde CTA's companies.html (Edmar 20-10 msg 90507) — opvallende groene primaire knop + outline secundair */
.cta-mini{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(40px,6vw,64px)}
.btn-groen{background:var(--groen);color:var(--white)}
.btn-groen:hover{background:#0a4335}