/* LekkerParkeren homepage-voorbeeld v2 — stijl van de store-set: teal → navy, Poppins, teal lint */
@font-face{font-family:Poppins;src:url(fonts/poppins-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-extrabold.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --teal:#35c3b6;
  --teal-top:#1d8f86;
  --teal-mid:#1c6a77;
  --navy:#1b1a4b;
  --navy-deep:#141238;
  --groen:#0b4e3c;
  --ink:#181637;
  --white:#fff;
  --soft:#d9f3f0;
  --star:#ffc01e;
  --meta:#5b5a78;
  --gutter:clamp(18px,5vw,64px);
  --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* de grond: per sectie verschoven door JS */
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--navy-deep)}
body{font-family:Poppins,system-ui,sans-serif;background:transparent;color:var(--white);line-height:1.55;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--star);outline-offset:3px;border-radius:6px}
::selection{background:var(--star);color:var(--ink)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--ink);padding:10px 14px;z-index:60}
.skip:focus{left:12px;top:12px}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* de grond: één vaste laag, kleuren schuiven mee met de scroll */
.grond{position:fixed;inset:0;z-index:-1;--g1:#1f9088;--g2:#1c6a77;--g3:#141238;background:linear-gradient(180deg,var(--g1) 0%,var(--g2) 46%,var(--g3) 100%)}
@media (min-width:900px){.grond::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.09),transparent 60%);pointer-events:none}}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:40;transition:background .3s}
.top.is-scrolled{background:rgba(20,18,56,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.proef{font-size:.6875rem;line-height:1.2;text-align:center;padding:4px 12px;color:var(--soft);background:rgba(20,18,56,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proef .lang{display:none}@media (min-width:700px){.proef .lang{display:inline}}
.proef strong{color:var(--white);font-weight:600}
.bar{display:flex;align-items:center;gap:8px;padding-block:6px;min-height:52px}
/* logo op een donkere pil: het cyaan "PARKEREN" heeft op teal te weinig contrast */
.logo{display:block;flex:none;margin-right:auto} /* Edmar 84863: geen apart vakje of afwijkende kleur achter het logo */
.logo img{width:56px}
.nav{display:none}
.nav ul{list-style:none;padding:4px;display:flex;gap:2px;align-items:center;border-radius:999px;background:rgba(20,18,56,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}
.nav a{display:block;text-decoration:none;font-weight:500;font-size:.9rem;padding:8px 14px;white-space:nowrap;border-radius:999px;transition:background .2s}
.nav a:hover{background:rgba(255,255,255,.12)}
/* Download-pil verschijnt pas als de storeknoppen in de hero uit beeld zijn */
.dl{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 18px;border-radius:999px;background:var(--white);color:var(--teal-mid);font-weight:700;font-size:.8125rem;text-decoration:none;box-shadow:0 6px 16px -6px rgba(8,6,30,.5),0 0 0 2px var(--teal) inset;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s,background .2s,color .2s}
.dl:hover{background:var(--teal);color:var(--white)}
.dl svg{flex:none}
.top:not(.toon-dl) .dl{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--white);color:var(--ink);text-decoration:none;font-weight:700;font-size:.9375rem;padding:12px 22px;border-radius:999px;box-shadow:0 8px 20px -6px rgba(8,6,30,.5);transition:transform .16s var(--ease),box-shadow .16s var(--ease);min-height:44px}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(8,6,30,.55)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--white)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.6);background:rgba(20,18,56,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600;font-size:.8125rem;position:relative}
.menu summary::before{content:"";position:absolute;inset:-5px}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:18px;height:18px}
.panel{position:absolute;right:0;top:56px;width:min(300px,calc(100vw - 32px));background:var(--white);color:var(--ink);border-radius:18px;padding:10px;box-shadow:0 18px 48px rgba(10,8,40,.4)}
.panel a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;font-weight:500}
.panel a:hover{background:#eef8f7}
.panel a[href="/nl/companies/"]{color:var(--groen);font-weight:700}
.panel .btn{display:flex;margin-top:6px;background:var(--ink);color:var(--white)}
@media (min-width:1080px){.nav{display:block}.menu{display:none}.logo img{width:84px}.bar{gap:14px;min-height:68px}.dl{height:42px;padding:0 22px;font-size:.9rem}}
@media (min-width:1080px) and (max-width:1279px){.nav a{padding:8px 10px;font-size:.86rem}} /* Nieuws erbij (25-10): menu past nog op 1 regel */

/* ---------- typografie ---------- */
h1,h2{font-weight:700;line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:clamp(1.8rem,5.6vw,4.25rem)}
h2{font-size:clamp(1.85rem,4.4vw,3.4rem)}
h3{font-weight:700;line-height:1.2}
.lead{font-size:clamp(1rem,1.9vw,1.4rem);color:var(--white);max-width:36ch;margin-top:12px;text-wrap:pretty}
.center{text-align:center}.center .lead{margin-inline:auto}
.link{display:inline-flex;gap:8px;align-items:center;font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;margin-top:22px;min-height:44px}
.link:hover{text-decoration-color:var(--teal)}
.check{flex:none;width:26px;height:26px}

/* het lint: teal, navy tekst, schuine punt */
.lint{position:relative;width:min(94%,980px);background:var(--teal);color:var(--ink);
  clip-path:polygon(0 0,100% 0,calc(100% - clamp(26px,4vw,48px)) 50%,100% 100%,0 100%);
  padding:clamp(14px,2.2vw,24px) clamp(48px,7vw,96px) clamp(14px,2.2vw,24px) var(--gutter);
  font-weight:800;font-size:clamp(1.2rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
@media (min-width:1240px){.lint{padding-left:calc((100vw - var(--max))/2 + var(--gutter))}}
.lint--in{will-change:transform}

/* ---------- acts ---------- */
.act{position:relative}
.act--pin{height:var(--span,260svh)}
:root{--hdr:136px}@media (min-width:1080px){:root{--hdr:112px}}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-content:start;padding-top:var(--hdr)}
@media (min-width:900px){.stage{align-content:center}}
.stage .wrap{position:relative;z-index:2}
.act--flow{padding-block:clamp(72px,10vw,128px)}

/* CSS-telefoon (echte schermen) */
.phone{position:relative;width:var(--pw,280px);aspect-ratio:590/1280;padding:10px;border-radius:calc(var(--pw,280px)*.16);background:#0e0d1f;
  box-shadow:inset 0 0 0 2px #3c3b55,0 40px 80px -20px rgba(8,6,30,.75),0 12px 26px rgba(8,6,30,.35);transform-style:preserve-3d;will-change:transform}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--pw,280px)*.125);background:#14123a}
.phone::after{content:"";position:absolute;top:calc(10px + var(--pw,280px)*.035);left:50%;translate:-50% 0;width:24%;height:calc(var(--pw,280px)*.055);border-radius:999px;background:#07061a}
.phone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 38%,transparent 62%,rgba(255,255,255,.06));pointer-events:none;z-index:2;mix-blend-mode:screen}

/* gedeeld: storeknoppen en sterren (ook in footer en reviews) */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.stores a img{height:42px;width:auto}
@media (min-width:900px){.stores{margin-top:26px}.stores a img{height:50px}}
.stars{display:inline-flex;gap:2px;vertical-align:-3px}
.stars svg{width:18px;height:18px}

/* ---------- 1. hero (mockup B, 3D en scroll-reactief) ---------- */
:root{--hh:78px}
@media (min-width:1080px){:root{--hh:92px}}
/* rating-pil, rustig bovenaan de film-hero (Edmar 7-10: wel goed, telefoon-mockup + prop niet) */
.pil-rating{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(20,18,56,.62);font-size:.75rem;font-weight:500;line-height:1.2;color:var(--white);white-space:nowrap}
.pil-rating svg{width:14px;height:14px;flex:none}
.pil-rating b{font-weight:700;color:var(--star)}
@media (max-width:1079px) and (max-height:760px){.pil-rating{padding:4px 11px}}
@media (min-width:1080px){.pil-rating{font-size:.875rem;padding:7px 14px}}
/* ---------- 2. beloningen: diepte ---------- */
.beloon-grid{display:grid;gap:8px;align-items:start;height:100%;align-content:start}
.diepte{position:relative;perspective:1100px;perspective-origin:50% 45%;height:clamp(260px,40svh,560px);transform-style:preserve-3d}
.diepte > *{position:absolute;transform-style:preserve-3d;will-change:transform}
.held{left:50%;top:50%;width:min(360px,74%);translate:-50% -50%;transform:translateZ(0)}
.held img{width:100%;aspect-ratio:1000/1339;object-fit:cover;-webkit-mask-image:radial-gradient(48% 44% at 50% 54%,#000 38%,transparent 74%);mask-image:radial-gradient(48% 44% at 50% 54%,#000 38%,transparent 74%)}
.tegel{width:clamp(96px,26%,150px);aspect-ratio:1;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px -14px rgba(8,6,30,.7),inset 0 0 0 1px rgba(255,255,255,.18)}
.tegel img{width:100%;height:100%;object-fit:cover}
.tegel figcaption{position:absolute;inset:auto 0 0;padding:30px 9px 9px;font-weight:700;font-size:clamp(.66rem,1.15vw,.875rem);line-height:1.15;overflow-wrap:anywhere;hyphens:auto;background:linear-gradient(180deg,transparent 0%,rgba(20,18,56,.55) 35%,rgba(20,18,56,.94) 100%);text-shadow:0 1px 2px rgba(20,18,56,.8)}
.t-koffie{left:2%;top:16%;transform:translateZ(140px) rotate(-6deg)}
@media (min-width:900px){.t-koffie{top:10%}}
.t-donut{right:4%;top:14%;transform:translateZ(200px) rotate(7deg)}
@media (min-width:900px){.t-donut{top:18%}}
.t-was{left:8%;bottom:4%;transform:translateZ(90px) rotate(4deg)}
@media (min-width:900px){.t-was{bottom:24%}}
.koekjes{right:10%;bottom:22%;transform:translateZ(180px);display:inline-flex;align-items:center;gap:10px;background:var(--star);color:var(--ink);font-weight:700;padding:8px 16px 8px 10px;border-radius:14px;box-shadow:0 20px 40px -10px rgba(8,6,30,.7);font-variant-numeric:tabular-nums}
.koekjes img{width:30px;height:30px;border-radius:50%}
.koekjes b{font-size:1.375rem;font-weight:800;letter-spacing:-.01em;min-width:3.6ch;text-align:right}
.koekjes small{display:block;font-size:.7rem;font-weight:600;line-height:1;opacity:.85}
.beloon-lint{position:relative;margin-top:10px;width:100%;z-index:3}
@media (min-width:900px){.beloon-lint{position:absolute;left:0;bottom:clamp(14px,3vh,28px);margin:0;width:min(94%,980px)}}
@media (min-width:900px){
  .beloon-grid{grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;align-content:center}
  .diepte{height:min(72svh,640px)}
  .held{width:min(440px,72%)}
  .tegel{width:clamp(120px,24%,170px)}
  .koekjes b{font-size:1.625rem}
}

/* ---------- 3. sterren + reviews ---------- */
.score{display:flex;justify-content:center;gap:clamp(6px,1.2vw,12px);margin-top:22px}
.ster{position:relative;width:clamp(38px,7vw,60px);aspect-ratio:1}
.ster svg{position:absolute;inset:0;width:100%;height:100%}
.ster .vul{clip-path:inset(0 100% 0 0)}
.bron{font-weight:600;margin-top:14px}
.stapel{display:grid;gap:16px;margin-top:clamp(40px,6vw,64px);text-align:left;perspective:1400px}
.kaart{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);transform-style:preserve-3d;will-change:transform,opacity}
.kaart header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.kaart .naam{font-weight:700;font-size:1.125rem}
.kaart .meta{color:var(--meta);font-weight:500;font-size:.9375rem}
.kaart .stars{margin-top:10px}
.kaart .stars svg{width:22px;height:22px}
.kaart h3{font-size:clamp(1.2rem,2.2vw,1.5rem);margin-top:10px}
.kaart blockquote{margin-top:8px;font-size:1.0625rem}
.kaart.klein blockquote{font-size:1rem;margin-top:10px}
.kaart time{display:block;margin-top:14px;color:var(--meta);font-weight:500}
@media (min-width:900px){.stapel{grid-template-columns:repeat(3,1fr)}.stapel .groot{grid-column:1/-1;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,56px)}.stapel .groot blockquote{font-size:1.3rem;max-width:60ch}}

/* ---------- 4. betalen: kaarten ---------- */
.split{display:grid;gap:40px;align-items:center}
.split .phone{justify-self:center;--pw:min(280px,66vw)}
.betaal{display:grid;gap:14px;margin-top:28px;perspective:1200px;max-width:440px}
.betaalkaart{position:relative;background:var(--white);border-radius:18px;display:flex;align-items:center;gap:14px;padding:16px 20px;color:var(--ink);font-weight:700;font-size:1.0625rem;box-shadow:0 22px 44px -16px rgba(8,6,30,.7);transform-style:preserve-3d;will-change:transform,opacity;overflow:hidden}
.betaalkaart::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;background-position:var(--glans,120%) 0;pointer-events:none}
.betaalkaart img{width:160px}
.betaalkaart svg{width:36px;height:36px;flex:none}
.betaalkaart small{display:block;font-weight:500;color:var(--meta);font-size:.875rem}
.betaal-lint{margin-top:clamp(40px,6vw,72px)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}.split.om .tekst{order:2}.split .phone{--pw:300px}}

/* ---------- 5. zakelijk / privé ---------- */
.zak-copy{text-align:center}
.zak-grid{display:grid;gap:8px}
.duo{position:relative;height:clamp(220px,32svh,520px);perspective:1400px;display:grid;place-items:start center;margin-top:8px}
@media (min-width:900px){.duo{place-items:center}}
.duo figure{position:absolute;display:grid;justify-items:center;gap:6px;will-change:transform;transform-style:preserve-3d}
@media (min-width:900px){.duo figure{gap:12px}}
.duo .phone{--pw:min(210px,27vw)}
/* Mobiel: zakelijk/privé niet vastgepind maar gewoon onder elkaar (Edmar 84618 + 84650: vinkjes over de telefoons
   en de teal banner viel weg onder de vaste schermhoogte op iPhone). Telefoons boven, vinkjes en banner eronder. */
@media (max-width:899px){
  #zakelijk.act--pin{height:auto}
  #zakelijk .stage{position:relative;height:auto;overflow:visible;padding:clamp(32px,6vw,56px) 0 clamp(40px,10vw,64px)} /* Edmar 21-10 msg 91123: te veel lege ruimte boven dit blok op mobiel, was calc(--hdr - 40px) = onnodige header-marge want deze sectie staat niet sticky onder de nav */
  #zakelijk .duo{height:auto;display:flex;justify-content:center;gap:18px;margin-top:20px}
  #zakelijk .duo figure{position:relative;transform:none!important;opacity:1!important}
  #zakelijk .duo .phone{--pw:min(150px,38vw)}
  #zakelijk .f-prive{rotate:-4deg}#zakelijk .f-zak{rotate:4deg}
  #zakelijk .pil{opacity:1!important}
  #zakelijk #zak-checks li{opacity:1!important;transform:none!important}
  #zakelijk .zak-onder{margin-top:20px}
  #zakelijk .zak-lint{position:relative;margin-top:36px;width:94%;opacity:1!important;transform:none!important}
}
.pil{font-weight:700;font-size:clamp(.875rem,2.2vw,1.25rem);padding:4px 18px;line-height:1.3;border-radius:999px;box-shadow:inset 0 0 0 2px var(--white);opacity:0;color:var(--white)}
.pil.prive{background:var(--groen)}.pil.zakelijk{background:var(--ink)}
.f-zak{z-index:1}
.checks{list-style:none;padding:0;display:grid;gap:6px;margin:10px auto 0;max-width:60ch;text-align:left;font-size:clamp(.8125rem,1.4vw,1.0625rem);line-height:1.4}
.zak-copy .lead{font-size:clamp(.9375rem,1.9vw,1.4rem)}
.zak-copy h2{font-size:clamp(1.55rem,4.4vw,3.4rem)}
.zak-copy .link{margin-top:6px}
@media (min-width:900px){.zak-copy .link{margin-top:22px}}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks .check{margin-top:1px}
.zak-lint{position:relative;margin-top:10px;width:100%;z-index:3}
@media (min-width:900px){.zak-lint{position:absolute;left:0;bottom:clamp(14px,3vh,28px);margin:0;width:min(94%,980px)}}
@media (min-width:900px){#zakelijk .stage{align-content:start;padding-top:calc(var(--hdr) + 16px)}.zak-copy{text-align:left}.zak-grid{grid-template-columns:.9fr 1.1fr;gap:8px 48px;align-items:center}.zak-tekst{grid-column:1;grid-row:1;align-self:end}.zak-onder{grid-column:1;grid-row:2;align-self:start;margin-bottom:32px}.zak-grid .duo{grid-column:2;grid-row:1/3}.duo{height:min(42svh,380px)}.duo .phone{--pw:min(190px,12vw)}.checks{margin-inline:0}}
/* Edmar 22-10 msg 91436: op een korte laptop-hoogte (bv. 1280x580) viel de ribbon alsnog over de content heen,
   want de sticky-pin gaat uit van 100svh en gaat bij weinig hoogte simpelweg stuk. Structurele fix: onder een
   bepaalde viewport-HOOGTE (los van breedte) de pin/absolute-ribbon helemaal uit, normale flow in plaats
   daarvan — zelfde veilige opzet als de mobiele breedte-fallback, nu ook voor korte-maar-brede vensters. */
@media (max-height:760px){
  #zakelijk.act--pin,#beloon.act--pin{height:auto}
  #zakelijk .stage,#beloon .stage{position:relative;height:auto;min-height:0;overflow:visible;align-content:unset;padding:clamp(40px,6vw,64px) 0}
  .zak-lint,.beloon-lint{position:relative!important;left:auto;bottom:auto;margin-top:28px;width:min(94%,980px)}
}
/* CTA's onder het Zakelijk/Privé-blok (Edmar 22-10 msg 91372); index.html laadt geen sub.css, dus .acties hier los */
.zak-copy .acties{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 6. klantenservice ---------- */
.service-stapel{position:relative;justify-self:center;display:grid;justify-items:center}
.service-stapel .kaart{position:relative;margin-top:-100px;width:min(400px,100%);z-index:2;transform:rotate(-2deg)}
.contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mens{display:flex;align-items:center;gap:14px;margin-top:24px}.mens img{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.9)}.mens figcaption{display:grid;line-height:1.3}.mens b{font-size:1.125rem}.mens span{color:var(--soft)}

/* ---------- 7. reels: rail ---------- */
.reels-kop{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(260px,70vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(28px,4vw,48px) var(--gutter) 24px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent}
.rail figure{scroll-snap-align:start;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:9/16;background:#0e0d1f;box-shadow:0 30px 60px -22px rgba(8,6,30,.75)}
.rail video{width:100%;height:100%;object-fit:cover}
.rail figcaption{position:absolute;inset:auto 0 0;padding:40px 16px 16px;font-weight:700;font-size:1rem;line-height:1.2;background:linear-gradient(180deg,transparent,rgba(20,18,56,.9))}
.rail .speel{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(20,18,56,.7);color:#fff;display:grid;place-items:center;cursor:pointer}
.rail .speel svg{width:18px;height:18px}
@media (min-width:900px){.rail{grid-auto-columns:minmax(0,1fr);overflow:visible;margin-inline:0;padding-inline:0}}
.volg{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.volg-kop{font-weight:700;font-size:.9375rem;color:var(--soft)}
.volg-rij{display:flex;gap:10px}
.volg-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;transition:transform .2s var(--ease),box-shadow .2s}
.volg-ic:hover{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(0,0,0,.5)}
.volg-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.volg-fb{background:#1877F2}
.volg-tt{background:#000}
.volg-li{background:#0A66C2}

/* ---------- 8. nederland ---------- */
.stappen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,40px);margin-top:clamp(36px,5vw,56px);counter-reset:s}
.stappen li{counter-increment:s;border-top:2px solid rgba(255,255,255,.35);padding-top:14px}
.stappen li::before{content:counter(s) ".";display:block;font-weight:800;font-size:clamp(2rem,5vw,3.25rem);line-height:1;color:var(--teal)}
.stappen b{display:block;font-size:1.2rem;margin-top:8px}
.nl-lint{margin-top:clamp(40px,6vw,72px)}
@media (min-width:900px){.stappen{grid-template-columns:repeat(4,1fr)}}

/* ---------- slot ---------- */
.slot{padding-block:clamp(56px,8vw,104px) 40px;display:grid;align-content:end}
.slot-grid{display:grid;gap:36px;align-items:end}
.qr{display:none;gap:18px}
.qr img{width:124px}
.scan{font-size:.875rem;color:var(--soft);margin-top:10px}
@media (min-width:900px){.slot-grid{grid-template-columns:1.2fr .8fr}.qr{display:flex;justify-content:end}.stores.alleen-mobiel{display:none}}
.voet{margin-top:clamp(56px,8vw,88px);padding-top:32px;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:28px;font-size:.9375rem;color:var(--soft)}
.voet p{max-width:52ch}
.voet ul{list-style:none;padding:0;display:grid;gap:8px}
.voet a{text-decoration:none}.voet a:hover{text-decoration:underline}
.voet h3{color:var(--white);font-size:1rem;margin-bottom:10px}
.klein{font-size:.8125rem;opacity:.85;margin-top:28px}
.soc{display:flex;gap:10px;margin-top:4px}
.soc a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--soft);transition:background .2s,color .2s}
.soc a:hover{background:var(--teal);color:var(--white);text-decoration:none}
@media (min-width:800px){.voet{grid-template-columns:1.6fr 1fr 1fr 1fr}}

.js.no-motion .in{opacity:1!important;transform:none!important}
/* ---------- reveal-hulp (opacity houdt betekenis, positie is extra) ---------- */
.in{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .in{opacity:0;transform:translateY(28px)}
  .js .in.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
}

/* ---------- reduced motion / statisch ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .act--pin{height:auto}
  .stage{position:relative;height:auto;min-height:0;padding-block:clamp(72px,10vw,128px)}
  .diepte,.diepte > *{transform:none!important;position:relative;inset:auto;perspective:none}
  .diepte{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .held{display:none}
  .tegel{width:auto;translate:0 0}
  .koekjes{grid-column:1/-1;justify-self:start}
  .ster .vul{clip-path:none}
  .ster:last-child .vul{clip-path:inset(0 30% 0 0)}
  .kaart,.betaalkaart,.duo figure{transform:none!important;opacity:1!important}
  .duo{height:auto;display:flex;justify-content:center;gap:16px}
  .duo figure{position:relative}
  .pil{opacity:1}
  .grond{background:linear-gradient(180deg,#1d8f86,#1b1a4b 60%,#141238)}
  .beloon-lint,.zak-lint{position:relative;margin-top:32px;width:min(94%,980px)}
}

/* ── Chat in de betaal-telefoon: berichten komen binnen zoals in de app (Mike 28-9) ──
   Kleuren gemeten op het echte scherm; maten in cqw zodat alles meeschaalt met de telefoon. */
.chat{position:relative;width:100%;height:100%;border-radius:calc(var(--pw,280px)*.125);background:#19173e;overflow:hidden;container-type:inline-size;font-family:Poppins,system-ui,sans-serif;color:#fff;display:flex;flex-direction:column}
.chat-status{display:flex;justify-content:space-between;align-items:center;padding:5cqw 8cqw 0 9cqw;font-size:4.2cqw;height:13cqw}
.chat-status span{display:flex;gap:.8cqw;align-items:flex-end}
.chat-status i{display:block;width:1.2cqw;background:#fff;border-radius:.4cqw}
.chat-status i:nth-child(1){height:1.6cqw}.chat-status i:nth-child(2){height:2.4cqw}.chat-status i:nth-child(3){height:3.2cqw;opacity:.45}.chat-status i:nth-child(4){height:4cqw;opacity:.45}
.chat-kop{display:flex;align-items:center;gap:4cqw;background:#24235e;padding:3cqw 5cqw 5cqw;border-radius:0 0 5cqw 5cqw;margin-top:-13cqw;padding-top:16cqw}
.chat-kop img{width:11.5cqw;height:11.5cqw;border-radius:50%}
.chat-kop strong{font-size:4.3cqw;font-weight:600;line-height:1.2}
.chat-terug{display:grid;place-items:center;width:7.5cqw;height:7.5cqw;border-radius:50%;background:#2e2c6b;font-size:3.4cqw;color:#c9c8ea;flex:none}
.chat-stroom{flex:1;display:flex;flex-direction:column;gap:2.4cqw;padding:5cqw 4cqw 4cqw;overflow:hidden}
.bub{max-width:78%;display:flex;flex-direction:column;gap:1cqw}
.bub p{margin:0;padding:2.6cqw 4cqw;font-size:3.25cqw;line-height:1.35;border-radius:3.8cqw}
.bub time{font-size:2.3cqw;color:#8d8cb3}
.bub em{font-style:normal;color:#718cc5;margin-left:1cqw}
.bub--in p{background:#24235e;border:.35cqw solid #463e97;border-bottom-left-radius:1cqw}
.bub--uit{align-self:flex-end;align-items:flex-end}
.bub--uit p{background:#ebc252;color:#5a4617;border-bottom-right-radius:1cqw}
.chat-kaart{background:#24235e;border:.35cqw solid #453e92;border-radius:3.8cqw;padding:5cqw 5.5cqw;margin-top:1.5cqw}
.chat-kaart h4{margin:0 0 2.4cqw;font-size:3.8cqw;font-weight:600;color:#6be3cf}
.chat-kaart ul{list-style:none;margin:0 0 3cqw;padding:0;display:grid;gap:1.6cqw}
.chat-kaart li{position:relative;padding-left:8cqw;font-size:3.2cqw;line-height:1.3}
.chat-kaart li::before{content:"✓";position:absolute;left:0;top:-.2cqw;width:4.4cqw;height:4.4cqw;border:.4cqw solid #e6b94b;border-radius:50%;display:grid;place-items:center;font-size:2.4cqw;color:#e6b94b}
.chat-knop{display:block;text-align:center;padding:2.2cqw 0;border-radius:2.8cqw;background:linear-gradient(90deg,#71efc2,#5fd3e6);color:#15133a;font-weight:600;font-size:3.6cqw}
.chat-kaart hr{border:0;border-top:.3cqw solid #2b2864;margin:4cqw 0 3.5cqw}
.typt{display:none;align-self:flex-start;gap:1.2cqw;padding:3cqw 4cqw;background:#24235e;border:.35cqw solid #463e97;border-radius:3.8cqw;border-bottom-left-radius:1cqw}
.typt i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#b9b7e6;animation:typt 1s infinite ease-in-out}
.typt i:nth-child(2){animation-delay:.15s}.typt i:nth-child(3){animation-delay:.3s}
@keyframes typt{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-1.2cqw);opacity:1}}
/* Animatie alleen als JS de klasse zet; zonder JS of met reduced-motion staat alles er gewoon. */
.chat.is-anim [data-stap]{display:none}
.chat.is-anim [data-stap].is-er{display:flex;animation:bub-in .42s cubic-bezier(.2,.9,.3,1.2) both}
.chat.is-anim .chat-kaart.is-er{display:block;animation:kaart-in .6s cubic-bezier(.2,.9,.3,1) both}
.chat.is-anim .typt.is-er{display:flex}
@keyframes bub-in{from{opacity:0;transform:translateY(3cqw) scale(.92)}to{opacity:1;transform:none}}
@keyframes kaart-in{from{opacity:0;transform:translateY(10cqw)}to{opacity:1;transform:none}}

/* ---------- 0. film: video als achtergrond, loopt mee met scroll; teksten per beat ---------- */
.film .stage.film-stage{padding:0;display:block;background:#0d0c26}
.film-poster img,.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.film-video{opacity:0;transition:opacity .35s}.film-video.is-klaar{opacity:1}
.film-waas{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,12,38,.82) 0%,rgba(13,12,38,.42) 24%,rgba(13,12,38,0) 42%,rgba(13,12,38,0) 60%,rgba(13,12,38,.72) 76%,rgba(13,12,38,.92) 100%)}
.film .stage .film-teksten{position:absolute;inset:0;z-index:2;pointer-events:none;max-width:none;margin:0;padding:0}
/* rating-pil: rustig, altijd zichtbaar, boven de (wisselende) kop (Edmar 7-10, msg 83040) */
.film-pil{position:absolute;left:50%;top:calc(var(--hh) + 10px);translate:-50% 0;z-index:3;pointer-events:none}
.film-t{position:absolute;left:0;right:0;top:calc(var(--hh) + 50px);padding-inline:20px;text-align:center;opacity:0;will-change:opacity,transform}
.film-t:first-of-type{opacity:1}
.film-kop{font-weight:800;font-size:clamp(2rem,9vw,2.6rem);line-height:1.02;letter-spacing:-.025em;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.film-sub{margin-top:8px;font-size:1rem;line-height:1.35;color:#c8f5ec;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.film-t .stores{justify-content:center;margin-top:14px;gap:8px;pointer-events:auto}.film-t .stores a img{height:44px}
.film-t--eind{top:auto;bottom:calc(18px + env(safe-area-inset-bottom))}
.film-scroll{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#9fe9dc;transition:opacity .3s}
.film-scroll i{width:22px;height:34px;border:2px solid currentColor;border-radius:12px;position:relative}
.film-scroll i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:currentColor;animation:film-wiel 1.6s ease-in-out infinite}
@keyframes film-wiel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
@media (min-aspect-ratio:1/1){
  /* telefoon in de video naar rechts, links ruimte voor de tekst; de videorand valt weg in de waas */
  .film-video,.film-poster img{left:18vw;width:100%;object-position:50% 50%}
  .film-waas{background:linear-gradient(90deg,#0d0c26 0%,#0d0c26 18vw,rgba(13,12,38,.55) 30vw,rgba(13,12,38,0) 44vw)}
  .film-pil{left:max(32px,calc((100vw - 1200px) / 2));translate:0 0;top:calc(var(--hh) + 14px)}
  .film-t,.film-t--eind{top:50%;bottom:auto;translate:0 -50%;text-align:left;left:max(32px,calc((100vw - 1200px) / 2));right:auto;max-width:min(34vw,500px);padding:0}
  .film-kop{font-size:clamp(2.6rem,4.4vw,4.2rem)}
  .film-sub{font-size:1.25rem;margin-top:14px}
  .film-t .stores{justify-content:flex-start;margin-top:26px;gap:12px}.film-t .stores a img{height:52px}
}
/* zonder beweging: stilstaand beeld met de slottekst */
@media (prefers-reduced-motion:reduce){.film.act--pin{height:auto}.film .stage.film-stage{position:relative;height:100svh}.film-t{display:none}.film-t--eind{display:block;opacity:1}.film-scroll{display:none}}
.js.no-motion .film.act--pin{height:auto}.js.no-motion .film .stage.film-stage{position:relative;height:100svh}.js.no-motion .film-t{display:none}.js.no-motion .film-t--eind{display:block;opacity:1}.js.no-motion .film-scroll{display:none}

/* ── Hero v3 (10-10, Edmar 84671): App Store-scherm 1 als basis, echt app-scherm, altijd zichtbaar ── */
.held2{padding:calc(var(--hdr) + 8px) 0 clamp(48px,8vw,96px)}
.held2-grid{display:grid;gap:28px;align-items:center;text-align:center}
.held2 .pil-rating{margin-bottom:14px}
.held2 h1{font-weight:800;font-size:clamp(2.2rem,9.5vw,4.4rem);line-height:1.02;letter-spacing:-.03em}
.held2 h1 span{display:block;color:var(--teal)}
.held2 .lead{margin:14px auto 0;max-width:34ch;color:#d9f3f0}
.held2 .stores{display:flex;justify-content:center;gap:10px;margin-top:22px}.held2 .stores img{height:46px;width:auto}
.held2-plus{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.875rem;color:#d9f3f0}
.held2-plus img{width:28px;height:28px;border-radius:50%}
.held2-beeld{position:relative;justify-self:center}
.held2-beeld::before{content:"";position:absolute;inset:-18% -30%;background:radial-gradient(closest-side,rgba(53,195,182,.45),rgba(53,195,182,0));z-index:-1}
.held2-beeld .phone{--pw:min(250px,62vw);rotate:-3deg;box-shadow:0 30px 80px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:no-preference){.held2-beeld .phone{animation:held2-zweef 6s ease-in-out infinite}}
@keyframes held2-zweef{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (min-width:900px){.held2-grid{grid-template-columns:1.1fr .9fr;text-align:left;gap:48px}.held2 .lead{margin-left:0}.held2 .stores{justify-content:flex-start}.held2-beeld .phone{--pw:300px}.held2{min-height:100svh;display:grid;align-content:center}}
@media (max-width:899px){.held2-grid{gap:0;justify-items:center}.held2-tekst{display:contents}.held2 .pil-rating{order:1}.held2 h1{order:2}.held2 .lead{order:3}.held2-beeld{order:4;margin-top:26px}.held2 .stores{order:5;margin-top:30px}.held2-plus{order:6}.held2 h1{font-size:clamp(2rem,9vw,2.6rem)}.held2-beeld .phone{--pw:min(210px,56vw)}}
@media (max-width:899px){.held2{padding-top:calc(var(--hdr) - 36px)}}

/* ── Nieuws (10-10, Edmar 84677). Het lege vlak kwam van de footer: min-height 100svh met de inhoud onderaan. ── */
.nieuws{padding-block:clamp(16px,3vw,40px) 0}
.nieuws h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.nieuws-rij{display:grid;gap:16px;margin-top:24px}
@media (min-width:760px){.nieuws-rij{grid-template-columns:repeat(3,1fr);gap:20px}}
.nieuws-kaart a{display:grid;height:100%;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:inherit;text-decoration:none;transition:transform .3s var(--ease),background .3s}
.nieuws-kaart a:hover,.nieuws-kaart a:focus-visible{transform:translateY(-4px);background:rgba(255,255,255,.11)}
.nieuws-kaart img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.nieuws-kaart div{padding:16px 18px 20px}
.nieuws-meta{font-size:.8125rem;color:var(--teal);font-weight:600}
.nieuws-kaart h2,.nieuws-kaart h3{margin-top:6px;font-size:1.125rem;line-height:1.25}
.nieuws-kaart p:last-child{margin-top:6px;color:var(--soft);font-size:.9375rem}
@media (prefers-reduced-motion:reduce){.nieuws-kaart a:hover{transform:none}}

/* Voordelen uit store-scherm 2 als rustige zwevende labels rond de telefoon (Edmar 84690: subtiel, niet druk) */
.held2-voordelen{list-style:none;margin:0;padding:0}
.held2-voordelen li{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:.75rem;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.held2-voordelen svg{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--teal);color:var(--ink);flex:none}
.held2-voordelen img{width:20px;height:20px;border-radius:50%;flex:none}
/* Edmar 84715: spaarpunten rechtsboven, kentekens bij het kenteken op het scherm, herinneringen + tarieven */
.held2-voordelen .v1{top:4%;right:-24%}
.held2-voordelen .v2{top:50%;right:-30%}
.held2-voordelen .v3{top:30%;left:-30%}
.held2-voordelen .v4{top:67%;left:-26%}
@media (max-width:420px){.held2-voordelen li{font-size:.6875rem;padding:5px 9px 5px 5px}.held2-voordelen .v1{right:-18%}.held2-voordelen .v2{right:-20%}.held2-voordelen .v3{left:-20%}.held2-voordelen .v4{left:-16%}}
@media (min-width:900px){.held2-voordelen li{font-size:.875rem;padding:8px 14px 8px 8px}.held2-voordelen svg,.held2-voordelen img{width:24px;height:24px}
  .held2-voordelen .v1{right:-34%}.held2-voordelen .v2{right:-44%}.held2-voordelen .v3{left:-50%}.held2-voordelen .v4{left:-38%}}
@media (prefers-reduced-motion:no-preference){.held2-voordelen li{animation:held2-zweef 7s ease-in-out infinite}.held2-voordelen .v2{animation-delay:-2s}.held2-voordelen .v3{animation-delay:-4s}.held2-voordelen .v4{animation-delay:-5.5s}}
.held2-nl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:.9375rem;color:#d9f3f0}
.held2-nl svg{width:18px;height:18px;color:var(--teal);flex:none}
@media (max-width:899px){.held2-nl{order:6}}
@media (min-width:900px){.held2-nl{justify-content:flex-start}}
.held2-nl{width:fit-content;max-width:100%;text-align:left}
/* Edmar 84737: opvallender, als pil in dezelfde stijl als de labels */
.held2-nl{margin-top:18px;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-weight:600;font-size:1rem;line-height:1.25;box-shadow:0 8px 24px rgba(0,0,0,.25);gap:10px}
.held2-nl svg{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--teal);color:var(--ink)}
@media (max-width:420px){.held2-nl{font-size:.875rem}}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){.js:not(.no-motion) .beloon-lint{position:absolute;left:0;bottom:14px;margin:0;width:94%}} /* Edmar 84742: band viel onderaan weg op 390x664 */
/* Edmar 84852: White label onder Voor bedrijven + duidelijke plek voor zakelijk inloggen/registreren */
.nav li.sub{position:relative}
.nav .sub>ul{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:230px;flex-direction:column;align-items:stretch;gap:0;padding:6px;border-radius:16px;background:var(--white);border:0;box-shadow:0 18px 48px rgba(10,8,40,.4)}
.nav .sub>ul::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nav .sub:hover>ul,.nav .sub:focus-within>ul{display:flex}
.nav .sub>ul a{color:var(--ink);border-radius:10px;padding:10px 12px}
.nav .sub>ul a:hover{background:#eef8f7}
/* Edmar 20-10 msg 90305: menu-item "Voor bedrijven" in de zakelijk-groene kleur */
.nav li.sub>a:first-child{background:var(--groen)}
.nav li.sub>a:first-child:hover{background:#0a4335}
.zk{display:none;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);color:var(--white);font-weight:700;font-size:.8125rem;text-decoration:none;white-space:nowrap}
.zk:hover{background:rgba(255,255,255,.12)}
.panel .btn-zk{background:var(--teal);color:var(--ink)}
@media (min-width:1080px){.zk{display:inline-flex;height:42px;padding:0 18px;font-size:.9rem}}
/* Edmar 84928: servicesectie minder kleurloos: Stroopy + concrete service-voordelen (alleen bewezen) */
.service-voordelen{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.service-voordelen li{display:flex;align-items:center;gap:12px;font-weight:600}
.service-voordelen svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--teal);fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.service-stroopy{position:absolute;z-index:3;width:clamp(110px,14vw,170px);height:auto;right:-6%;top:22%;filter:drop-shadow(0 16px 24px rgba(0,0,0,.35))}
@media (prefers-reduced-motion:no-preference){.service-stroopy{animation:held2-zweef 6s ease-in-out infinite}}
@media (max-width:899px){.service-stroopy{right:0;top:14%;width:96px}}
/* Edmar 85159: footer meer in de huisstijl — kopjes teal, links zacht, hover wit */
.voet h3{color:var(--teal);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.voet a{color:var(--soft);transition:color .15s}.voet a:hover{color:var(--white)}
.voet>div:first-child p{color:var(--soft);opacity:.9}
.slot .klein{color:var(--soft);opacity:.7}

/* Edmar 17-10: 3D-kaarten vingen de tik op "Ontdek alle beloningen" op mobiel */
.diepte{pointer-events:none}
.link{position:relative;z-index:2}

/* Cookiemelding (Edmar 20-10 msg 90392-90394) — vanilla JS in cookies.js, geen library */
/* Compacte cookiebalk (Edmar 20-10 msg 90563-90565): max ±25% schermhoogte, geen overlay,
   één zin, Weigeren/Accepteren even prominent (AP-richtlijn), Voorkeuren als link */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(13,12,38,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -12px 40px rgba(0,0,0,.4);padding:12px max(14px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right))}
.cookiebar-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.cookiebar-tekst{flex:1 1 320px;margin:0;color:var(--soft);font-size:.8125rem;line-height:1.4}
.cookiebar-tekst a{color:var(--teal);font-weight:600}
.cookiebar-acties{display:flex;flex-wrap:nowrap;align-items:center;gap:10px}
.btn-gelijk{font:inherit;font-weight:700;font-size:.8125rem;padding:9px 18px;border-radius:999px;cursor:pointer;min-height:40px;white-space:nowrap;background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4)}
.btn-gelijk:hover{border-color:var(--white)}
.btn-gelijk-accent{color:var(--teal);border-color:var(--teal)}
.btn-gelijk-accent:hover{background:rgba(53,195,182,.12)}
.btn-gelijk:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.cookiebar-link{font:inherit;font-weight:600;font-size:.8125rem;color:var(--soft);text-decoration:underline;background:none;border:0;padding:4px;cursor:pointer;white-space:nowrap}
.cookiebar-link:hover{color:var(--white)}
.cookiebar-link:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.btn-klein{font:inherit;font-weight:700;font-size:.8125rem;padding:10px 16px;border-radius:999px;cursor:pointer;min-height:40px;white-space:nowrap;background:var(--teal);color:var(--ink);border:1.5px solid var(--teal)}
.btn-klein:hover{background:var(--teal-top)}
.btn-klein:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.cookiebar-voorkeuren{flex-basis:100%;display:grid;gap:10px;margin-top:4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.cookiebar-voorkeuren label{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;color:var(--white);font-size:.875rem;font-weight:600}
.cookiebar-voorkeuren label span{flex-basis:100%;color:var(--soft);font-weight:400;font-size:.8125rem}
.cookiebar-voorkeuren input[type=checkbox]{width:18px;height:18px;accent-color:var(--teal)}
.cookiebar-voorkeuren input:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (max-width:420px){.cookiebar-acties{gap:8px}.btn-gelijk{padding:9px 14px;font-size:.75rem}.cookiebar-link{font-size:.75rem}}

/* Partnerstrook onder de hero (Edmar 20-10 msg 90516-90518): bedrijven die LekkerParkeren gebruiken, geen "whitelabel"-woord */
.partnerstrook-wrap{margin-top:clamp(48px,7vw,88px)}
.partnerstrook-kop{text-align:center;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--soft);margin-bottom:24px;text-transform:uppercase}
.partnerstrook{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:clamp(44px,7vw,80px)}
.partnerstrook img{height:clamp(32px,4.6vw,44px);width:auto}
.partnerstrook img[alt="Q8"]{height:clamp(40px,6vw,56px)}
@media (max-width:640px){.partnerstrook{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:40px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}.partnerstrook li{scroll-snap-align:center;flex:none}.partnerstrook img{height:32px}.partnerstrook img[alt="Q8"]{height:40px}}
.club-partnerstrook img{height:clamp(44px,6vw,64px);width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.club-partnerstrook a{display:inline-flex;transition:transform .2s var(--ease)}
.club-partnerstrook a:hover,.club-partnerstrook a:focus-visible{transform:translateY(-2px)}

/* Aankondigingsbalk (Edmar 22-10 msg 91344/91345) — in styles.css, want sub.css laadt niet op de homepage */
.aankondiging{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;padding:10px var(--gutter);padding-right:48px;font-size:.875rem;font-weight:600;text-align:center;position:fixed;top:0;left:0;right:0;z-index:50}
.aankondiging--info{background:var(--teal-top);color:var(--white)}
.aankondiging--waarschuwing{background:var(--star);color:var(--ink)}
.aankondiging a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.aankondiging button{position:absolute;right:12px;top:50%;translate:0 -50%;background:none;border:0;color:inherit;font-size:1.25rem;line-height:1;cursor:pointer;padding:4px 8px;opacity:.75}
.aankondiging button:hover{opacity:1}