/* Gedeelde onderdelen: reviewwidget, cookiebanner, mobiele actiebalk, CTA-band. Gebruikt de tokens uit de pagina. */

/* ---------- Reviewwidget ---------- */
.rw{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:stretch}
.rw-summary{background:var(--navy);color:var(--on-navy);border-radius:var(--radius);padding:28px;display:grid;gap:14px;align-content:start;border-top:5px solid var(--red)}
.rw-score{display:flex;align-items:baseline;gap:10px}
.rw-score b{font-family:var(--display);font-stretch:80%;font-weight:800;font-size:3.6rem;line-height:1;color:#fff}
.rw-score span{color:var(--on-navy-muted);font-size:.95rem}
.rw-stars{display:flex;gap:3px}
.rw-stars svg{width:20px;height:20px;fill:#F2B01E}
.rw-summary .rw-stars svg{width:24px;height:24px}
.rw-count{color:var(--on-navy-muted);font-size:.95rem}
.rw-count b{color:#fff}
.rw-bars{display:grid;gap:6px;margin:4px 0 6px;font-size:.82rem;color:var(--on-navy-muted);font-variant-numeric:tabular-nums}
.rw-bar{display:grid;grid-template-columns:14px 1fr 18px;gap:8px;align-items:center}
.rw-bar i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.rw-bar i::after{content:"";display:block;height:100%;width:var(--w,0%);background:#F2B01E;border-radius:3px}
.rw-summary .btn{justify-content:center;padding:12px 18px;font-size:.98rem}
.rw-summary .btn-ghost{border-color:rgba(255,255,255,.35)}
.rw-main{min-width:0;display:grid;gap:14px}
.rw-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 32px)/3);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 10px;scrollbar-width:none}
.rw-track::-webkit-scrollbar{display:none}
.rw-card{scroll-snap-align:start;margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.rw-head{display:flex;align-items:center;gap:12px}
.rw-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:.95rem;flex:none;background:var(--av,#1C314C)}
.rw-who{min-width:0;line-height:1.3}
.rw-who b{display:block;font-size:.98rem}
.rw-who small{color:var(--muted);font-size:.85rem}
.rw-card h3{font-size:1.08rem}
.rw-text{color:var(--muted);font-size:.96rem;margin:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rw-card.open .rw-text{-webkit-line-clamp:unset;display:block}
.rw-more{align-self:flex-start;background:none;border:0;padding:0;color:var(--red);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.rw-tag{margin-top:auto;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}
.rw-tag svg{width:14px;height:14px;color:#1a9e5c}
.rw-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rw-dots{display:flex;gap:6px}
.rw-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer}
.rw-dots button[aria-current="true"]{background:var(--red);width:22px;border-radius:4px}
.rw-arrows{display:flex;gap:8px}
.rw-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.rw-arrows button:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.rw-arrows button:disabled{opacity:.35;cursor:default}
.rw-arrows svg{width:18px;height:18px}
@media (max-width:1000px){.rw-track{grid-auto-columns:calc((100% - 16px)/2)}}
@media (max-width:760px){.rw{grid-template-columns:1fr}.rw-track{grid-auto-columns:86%}}

/* ---------- Vertrouwen bij CTA's ---------- */
.reassure{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.9rem;color:var(--on-navy-muted)}
.reassure span::before{content:"✓";color:var(--red-on-navy);font-weight:700;margin-right:6px}
form.quote .reassure{color:var(--muted);margin-top:0}
form.quote .reassure span::before{color:var(--red)}
.proof a{color:inherit;text-decoration:none}
.proof a:hover b{text-decoration:underline}

/* ---------- CTA-band ---------- */
.cta-band{background:var(--navy);color:var(--on-navy);border-top:6px solid var(--red)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-block:48px}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.cta-band p{color:var(--on-navy-muted);margin-top:8px}
.cta-band .ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Mobiele actiebalk ---------- */
.actionbar{display:none}
@media (max-width:760px){
  .actionbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;background:var(--navy-2);border-top:3px solid var(--red);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));transform:translateY(110%);transition:transform .25s ease}
  .actionbar.show{transform:none}
  .actionbar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:10px;font-family:var(--display);font-weight:700;font-stretch:90%;font-size:.98rem;text-decoration:none;color:#fff;background:rgba(255,255,255,.1)}
  .actionbar a.wa{background:#1FAF55}
  .actionbar a.cta{background:var(--red)}
  .actionbar svg{width:18px;height:18px;flex:none}
  .wa-float{display:none!important}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Cookiebanner ---------- */
.cb{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;max-width:560px;margin-left:auto;background:var(--card);color:var(--fg);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:20px 22px;display:grid;gap:12px}
.cb h2{font-size:1.15rem}
.cb p{font-size:.92rem;color:var(--muted)}
.cb p a{color:var(--fg)}
.cb-btns{display:flex;flex-wrap:wrap;gap:10px}
.cb-btns button{font-family:var(--display);font-weight:700;font-stretch:90%;font-size:.98rem;border-radius:999px;padding:11px 20px;cursor:pointer;border:2px solid var(--line);background:transparent;color:var(--fg)}
.cb-btns button.yes{background:var(--red);border-color:var(--red);color:#fff}
@media (max-width:760px){.cb{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ---------- Eenvoudige tekstpagina's ---------- */
.page-simple{padding-block:clamp(48px,7vw,88px)}
.page-simple .prose{max-width:70ch}
.page-simple h1{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:18px}
.page-simple .prose h2{font-size:1.4rem;margin:34px 0 10px}
.page-simple .prose p{margin:0 0 14px;color:var(--muted)}
.page-simple .prose ul{color:var(--muted);padding-left:20px;display:grid;gap:6px;margin:0 0 14px}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.nf-links a{border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;color:var(--fg);font-weight:600}
.nf-links a:hover{border-color:var(--red);color:var(--red)}

/* fijnafstemming */
.rw-main{align-content:start}
@media (max-width:480px){
  header.site .wrap{gap:10px}
  .logo{font-size:1.12rem;gap:8px}
  .logo img{width:40px}
  nav.main .btn{padding:9px 14px;font-size:.9rem;white-space:nowrap}
}
@media (max-width:420px){nav.main .btn{display:none}}

/* ---------- Mobiel menu ---------- */
.menu-btn{display:none}
.mmenu{background:var(--navy);border-top:1px solid rgba(255,255,255,.08)}
.mmenu .wrap{display:grid;gap:2px;padding-block:10px 18px}
.mmenu a:not(.btn){color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-stretch:90%;font-size:1.15rem;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mmenu .btn{justify-content:center;margin-top:12px}
.mmenu p{color:var(--on-navy-muted);font-size:.95rem;margin-top:12px;text-align:center}
.mmenu p a.plain{display:inline;border:0;padding:0;font-size:inherit;font-family:inherit;color:#fff}
@media (max-width:900px){
  .menu-btn{display:grid;gap:5px;align-content:center;justify-items:center;width:44px;height:44px;flex:none;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:transparent;cursor:pointer;padding:0}
  .menu-btn span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.site nav.main{margin-left:auto}
}
@media (min-width:901px){.mmenu{display:none!important}}

/* ---------- Compacter op mobiel ---------- */
.morelink{margin-top:22px;font-weight:600}
.morelink a{color:var(--red);text-decoration:none}
.morelink a:hover{text-decoration:underline}
@media (max-width:620px){
  .hero .hero-photo{display:none}
  .hero .wrap{padding-block:36px 40px}
  .proof{margin-top:24px;padding-top:18px;gap:10px 20px}
  .section{padding-block:48px}
  .section-head{margin-bottom:24px}
  .services{gap:10px}
  .service{grid-template-rows:none;grid-template-columns:92px minmax(0,1fr);align-items:stretch}
  .service img{aspect-ratio:auto;height:100%;min-height:92px}
  .service .txt{padding:14px 16px;gap:6px}
  .service h3{font-size:1.05rem}
  .service h3::after{display:none}
  .service p{font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .service .more{font-size:.88rem}
  .brands{gap:6px;margin-top:20px}
  .brands span{padding:5px 11px;font-size:.88rem}
  .steps{gap:20px}
  .usp{gap:14px}
  .faq summary{font-size:1rem;padding:15px 0}
}
header.site .mmenu .wrap{display:grid;justify-content:stretch;align-items:stretch;gap:2px;padding-block:6px 18px}
@media (max-width:620px){
  .topbar .wrap > span:first-child{display:none}
  .topbar .wrap{justify-content:center}
  .service .more{display:none}
  #diensten .section-head p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
.gallery img,.strip img,.member img,.hero-photo img,.rw img{height:auto}
@media (min-width:621px){.service img{height:auto}}
@media (max-width:620px){.gallery{gap:8px}.gal-h{margin:28px 0 12px}}

/* ---------- Offerteformulier ---------- */
.quote-wrap{display:grid;gap:14px;align-content:start;min-width:0}
.quote .opt{font-weight:400;color:var(--muted)}
.quote .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{background:var(--red-soft);color:var(--fg);border-left:4px solid var(--red);padding:10px 14px;border-radius:6px;font-size:.92rem}
.quote input:invalid.touched,.quote textarea:invalid.touched{border-color:var(--red)}
.thanks{display:grid;gap:10px;border-top:5px solid #1FAF55}
.thanks h3{font-size:1.4rem}
.thanks p{color:var(--muted)}
.btn-wa{background:#1FAF55;color:#fff}
.btn-wa:hover{background:#178f45}
.btn-wa svg{width:20px;height:20px}
.wa-direct{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:14px 16px;color:var(--on-navy-muted)}
.wa-direct span{font-weight:600}
@media (max-width:520px){.wa-direct{flex-direction:column;align-items:stretch;text-align:center}.wa-direct .btn{justify-content:center}}