/* ══════════════════════════════════════════════════════════════════════════
   De opmaak van de bestaande keuzehulp.

   De quiz houdt zijn eigen ontwerp en zijn eigen inhoud. Daarom staan hier de
   regels die hij nodig heeft, uitgesneden uit de oude site.min.css, in plaats
   van dat hele bestand. Zo botst de quiz niet met de opmaak van de pagina
   eromheen.

   De kleuren staan vast op de lichte variant. De oude site had een
   donkerschakelaar die via een cookie en de systeemvoorkeur omsloeg; op de
   nieuwe pagina hoort de quiz gewoon licht te zijn. De variabelen staan
   daarom op .mw-keuzehulp en niet op :root, zodat geen enkel script ze nog
   kan omzetten.
   ══════════════════════════════════════════════════════════════════════════ */

.mw-keuzehulp{--neon:var(--mw-accent, var(--mw-felgroen));--accent-leesbaar:var(--mw-primair, var(--mw-donkergroen));--dark-green:var(--mw-primair, var(--mw-donkergroen));--light-green:var(--mw-mint, var(--mw-mint));--text:var(--mw-primair, var(--mw-donkergroen));--bg:var(--mw-vlak,var(--mw-vlak));--bg-card:var(--mw-vlak,var(--mw-vlak));--bg-mid:var(--mw-vlak-grijs,var(--mw-vlak-grijs));--border:rgba(var(--mw-primair-rgb, 3, 73, 63),.1);--border-mid:rgba(var(--mw-primair-rgb, 3, 73, 63),.25);--text-dim:rgba(var(--mw-primair-rgb, 3, 73, 63),.62);--text-mid:rgba(var(--mw-primair-rgb, 3, 73, 63),.74);--radius:var(--mw-straal-kaart,12px);--radius-lg:var(--mw-straal-sectie,16px);--shadow-neon:0 2px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.07);--shadow-card:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.06),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06);--border-animation-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.45)}

/* Wat de quiz aan het document zelf hing, blijft binnen zijn eigen doos. */
.mw-keuzehulp{color:var(--text);}
/* ══════════════════════════════════════════════════════════════════════════
   De opmaak van de bestaande keuzehulp.

   De quiz houdt zijn eigen ontwerp en zijn eigen inhoud; dat is met opzet.
   Daarom staan hier de regels die hij nodig heeft, uitgesneden uit de oude
   site.min.css, in plaats van dat hele bestand. Zo botst de quiz niet met de
   opmaak van de nieuwe pagina eromheen.

   Uitgesneden met gereedschap, niet met de hand overgetikt.
   ══════════════════════════════════════════════════════════════════════════ */

html{scroll-behavior:smooth;overflow-x:clip;width:100%}
:root{--border-animation-color:var(--mw-accent, var(--mw-felgroen))66;--border-animation-speed:7s;--border-animation-width:1px}
.mw-keuzehulp .mm-icon-btn{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.08);color:var(--mw-primair, var(--mw-donkergroen))}
.mm-header .mm-icon-btn,.mm-header .mm-icon-btn:hover,.mw-keuzehulp .mm-header .mm-icon-btn,.mw-keuzehulp .mm-header .mm-icon-btn:hover{background:var(--mw-vlak-op-donker)!important;color:var(--mw-vlak-op-donker-melk)!important}
.mm-header .mm-icon-btn:hover,.mw-keuzehulp .mm-header .mm-icon-btn:hover{background:var(--mw-rand-op-donker-zacht)!important}
.mw-keuzehulp .mm-icon-btn:hover{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.15)}
.mw-keuzehulp .mm-logo-img{content:url('/assets/mywatt-fc-light.svg')}
.mw-keuzehulp body{background:var(--mw-vlak, var(--mw-vlak));color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp nav{background:var(--mw-vlak-op-donker-melk)}
.mw-keuzehulp .nav-hamburger span{background:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .nav-links a:hover{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .theme-toggle{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.18);color:var(--mw-grijs-zacht)}
.mw-keuzehulp .theme-toggle:hover{border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-primair, var(--mw-donkergroen));background:rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .icon-sun{display:block}
.mw-keuzehulp .icon-moon{display:none}
.mw-keuzehulp .btn-neon{background:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-vlak, var(--mw-vlak));box-shadow:0 2px 12px rgba(var(--mw-primair-rgb, 3, 73, 63),.18)}
.mw-keuzehulp .btn-neon:hover{background:var(--mw-primair-diep, var(--mw-donkergroen-diep));color:var(--mw-vlak, var(--mw-vlak));box-shadow:0 4px 28px rgba(var(--mw-primair-rgb, 3, 73, 63),.38);transform:translateY(-2px) scale(1.02)}
.mw-keuzehulp .btn-outline{color:var(--mw-primair, var(--mw-donkergroen));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.35)}
.mw-keuzehulp .btn-outline:hover{border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-vlak, var(--mw-vlak));background:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .hero{background:var(--mw-vlak, var(--mw-vlak))}
.mw-keuzehulp .hero-bg{display:none}
.mw-keuzehulp .hero-bg::after{display:none}
.mw-keuzehulp .hero h1{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .hero-sub{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .hero-eyebrow{color:var(--mw-primair, var(--mw-donkergroen));border-color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .hero-eyebrow span{background:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .hero h1 em{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .hero-stars{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .hero-proof-text{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .hero-proof-text strong{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .hero-proof{border-top-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .price-card{background:var(--mw-vlak-op-donker-melk);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.12)}
.mw-keuzehulp .pc-label{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .pc-label::before{background:var(--mw-primair, var(--mw-donkergroen));box-shadow:none}
.mw-keuzehulp .pc-incl{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .cap-btn{color:var(--mw-grijs-zacht);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.15)}
.mw-keuzehulp .pc-product{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.04);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.08)}
.mw-keuzehulp .pc-product-brand{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .pc-product-desc{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .pc-tag{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.07);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.18);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .pc-divider{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.08)}
.mw-keuzehulp .pc-note{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .section-label{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.07);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.2);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .section-label::before{background:var(--mw-primair, var(--mw-donkergroen));box-shadow:none}
.mw-keuzehulp .why-card-icon svg{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .stat-col .big{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .stat-col+.stat-col::before{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .stats-row{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.08)}
.mw-keuzehulp .problem-callout{border-left-color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .problem-answer p{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .problem-answer{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.06);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.18)}
.mw-keuzehulp .steps::after{background:linear-gradient(to right,var(--mw-primair, var(--mw-donkergroen)),var(--mw-accent, var(--mw-felgroen)))}
.mw-keuzehulp .step-tag{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.08);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .step-tag svg{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .step-num{box-shadow:0 0 0 8px rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .bc-num{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .bc-icon svg{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .benefit-card::before{background:linear-gradient(to right,var(--mw-primair, var(--mw-donkergroen)),var(--mw-primair, var(--mw-donkergroen)))}
.mw-keuzehulp .brand-card .brand-logo-inline{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .brand-logo-img{filter:brightness(0)}
.mw-keuzehulp .brand-card:hover .brand-logo-img{filter:brightness(0) sepia(1) saturate(3) hue-rotate(100deg)}
.mw-keuzehulp .brand-card .brand-logo-inline path{fill:var(--mw-primair, var(--mw-donkergroen))!important}
.mw-keuzehulp .brand-card:hover .brand-logo-inline{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .brand-card:hover .brand-logo-inline path{fill:var(--mw-primair, var(--mw-donkergroen))!important}
.mw-keuzehulp .brand-origin{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .brand-for{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .sf-item strong{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .ab-tab{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.15);color:var(--mw-grijs-zacht)}
.mw-keuzehulp .ab-tab:hover:not(.active){border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .ab-tab.active svg{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-opt{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.12);color:var(--mw-grijs-zacht)}
.mw-keuzehulp .qs-opt:hover{border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-primair, var(--mw-donkergroen));background:rgba(var(--mw-primair-rgb, 3, 73, 63),.04)}
.mw-keuzehulp .qs-opt.selected{border-color:var(--mw-primair, var(--mw-donkergroen));background:rgba(var(--mw-primair-rgb, 3, 73, 63),.07);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-opt.selected .qs-opt-icon svg,.mw-keuzehulp .qs-opt:hover .qs-opt-icon svg{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-back{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .qs-back:hover{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-field input,.mw-keuzehulp .qs-field select{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.15);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-field input::placeholder{color: rgba(var(--mw-primair-rgb, 3, 73, 63),.46)}
.mw-keuzehulp .qs-field select option{background:var(--mw-vlak, var(--mw-vlak))}
.mw-keuzehulp .quiz-card{background:var(--mw-pagina, var(--mw-pagina))}
.mw-keuzehulp .quiz-prog-bar{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.08)}
.mw-keuzehulp .qr-price{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qr-box{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.05);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.15)}
.mw-keuzehulp .qr-cta-sec{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.15);color:var(--mw-grijs-zacht)}
.mw-keuzehulp .qr-cta-sec:hover{border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qr-small{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .planner-card{background:var(--mw-pagina, var(--mw-pagina))}
.mw-keuzehulp .cal-month{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .cal-day.avail{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .cal-day.avail:hover{border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .cal-day.dis{color: rgba(var(--mw-primair-rgb, 3, 73, 63),.25)}
.mw-keuzehulp .ts{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.12);color:var(--mw-grijs-zacht)}
.mw-keuzehulp .ts:hover{border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .ts.sel{background:var(--mw-primair, var(--mw-donkergroen));border-color:var(--mw-primair, var(--mw-donkergroen));color:var(--mw-vlak, var(--mw-vlak))}
.mw-keuzehulp .ts.ts-booked{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.08);color: rgba(var(--mw-primair-rgb, 3, 73, 63),.25);background:rgba(var(--mw-primair-rgb, 3, 73, 63),.03)}
.mw-keuzehulp .form-card{background:var(--mw-pagina, var(--mw-pagina))}
.mw-keuzehulp .f-group input,.mw-keuzehulp .f-group select{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.15);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .f-group input::placeholder{color: rgba(var(--mw-primair-rgb, 3, 73, 63),.46)}
.mw-keuzehulp .f-group select option{background:var(--mw-vlak, var(--mw-vlak))}
.mw-keuzehulp .faq-toggle{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .faq-item.open{border-color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp #wattjeCta button{color:var(--mw-primair, var(--mw-donkergroen))!important;background:rgba(var(--mw-primair-rgb, 3, 73, 63),.08)!important;border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.25)!important}
.mw-keuzehulp .footer-links a:hover{color:var(--mw-accent, var(--mw-felgroen))}
.mw-keuzehulp .nav-links a.nav-active{color:var(--mw-vlak, var(--mw-vlak));background:var(--mw-primair, var(--mw-donkergroen));padding: var(--mw-ruimte-3) var(--mw-ruimte-7);border-radius:var(--mw-knop-straal,9999px)}
.mw-keuzehulp .why-card{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);box-shadow:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.05),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .why-card:hover{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.3);box-shadow:0 8px 32px rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .benefit-card{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);box-shadow:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.05),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .benefit-card:hover{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.3);box-shadow:0 8px 32px rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .brand-card{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);box-shadow:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.05),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .brand-card:hover{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.35);box-shadow:0 8px 32px rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .faq-item{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);box-shadow:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.05),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .faq-item:hover{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.3)}
.mw-keuzehulp .quiz-card{background:var(--mw-vlak, var(--mw-vlak));box-shadow:0 2px 8px rgba(var(--mw-primair-rgb, 3, 73, 63),.06),0 8px 32px rgba(var(--mw-primair-rgb, 3, 73, 63),.07)}
.mw-keuzehulp .planner-card{background:var(--mw-vlak, var(--mw-vlak));box-shadow:0 2px 8px rgba(var(--mw-primair-rgb, 3, 73, 63),.06),0 8px 32px rgba(var(--mw-primair-rgb, 3, 73, 63),.07)}
.mw-keuzehulp .form-card{background:var(--mw-vlak, var(--mw-vlak));box-shadow:0 2px 8px rgba(var(--mw-primair-rgb, 3, 73, 63),.06),0 8px 32px rgba(var(--mw-primair-rgb, 3, 73, 63),.07)}
.mw-keuzehulp .problem-callout{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);box-shadow:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.05),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .step{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);box-shadow:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.05),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .step:hover{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.3);box-shadow:0 8px 32px rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp nav:not([aria-label]){box-shadow:0 1px 0 rgba(var(--mw-primair-rgb, 3, 73, 63),.08),0 2px 12px rgba(var(--mw-primair-rgb, 3, 73, 63),.05)}
.mw-keuzehulp .price-card{box-shadow:0 4px 24px rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .benefits,.mw-keuzehulp .brands,.mw-keuzehulp .final-cta,.mw-keuzehulp .support-section,.mw-keuzehulp .why{background:var(--mw-vlak, var(--mw-vlak))}
.mw-keuzehulp .ab-section,.mw-keuzehulp .faq,.mw-keuzehulp .how,.mw-keuzehulp .stats-row{background:var(--mw-pagina)}
.mw-keuzehulp .stats-row{border-top-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);border-bottom-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07)}
.mw-keuzehulp .swipe-hint svg{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .pc-amount{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .brand-pill{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.07);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.2);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .faq-a{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .faq-q{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-label{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-q{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .qs-hint{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .quiz-prog-bar{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .pl-header h3{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .pl-header p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .cal-hd{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .form-card h3{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .form-card>p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .f-group label{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .f-disc{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .why-card h3{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .why-card p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .benefit-card h3{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .benefit-card p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .brand-card p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .step h3{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .step p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .stat-col .lbl{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .stat-col .desc{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .problem-callout blockquote{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .problem-callout cite{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .pl-text p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .section-sub{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .sf-item p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .why-big-stat .stat-label{color:var(--mw-vlak, var(--mw-vlak))}
.mw-keuzehulp .why-big-stat .stat-sub{color:var(--mw-tekst-op-donker-flauw)}
.mw-keuzehulp .why-big-stat .stat-small-item .l{color:var(--mw-tekst-op-donker-zacht)}
.mw-keuzehulp .why-big-stat .stat-small-item .n{color:var(--mw-accent, var(--mw-felgroen))}
.mw-keuzehulp .why-big-stat .stat-number{color:var(--mw-accent, var(--mw-felgroen))}
.mw-keuzehulp .brand-info-btn{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.25);background:rgba(var(--mw-primair-rgb, 3, 73, 63),.06);color:var(--mw-grijs-zacht)}
.mw-keuzehulp .brand-info-btn:hover{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.1);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.4);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .bi-modal{background:linear-gradient(145deg,var(--mw-mint, var(--mw-mint)) 0,var(--mw-mint, var(--mw-mint)) 100%);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.14);box-shadow:0 24px 60px rgba(var(--mw-primair-rgb, 3, 73, 63),.18),inset 0 1px 0 rgba(var(--mw-primair-rgb, 3, 73, 63),.1)}
.mw-keuzehulp .bi-head{border-bottom-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.08)}
.mw-keuzehulp .bi-logo{filter:brightness(0)}
.mw-keuzehulp .bi-brand-name{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .bi-origin{color: rgba(var(--mw-primair-rgb, 3, 73, 63),.46)}
.mw-keuzehulp .bi-close{border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.12);background:rgba(var(--mw-primair-rgb, 3, 73, 63),.04);color:var(--mw-grijs-zacht)}
.mw-keuzehulp .bi-close:hover{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.08);color:var(--mw-donkergroen)}
.mw-keuzehulp .bi-section p{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .bi-label{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .bi-label-pos{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .bi-label-neg{color:var(--mw-fout, var(--mw-fout))}
.mw-keuzehulp .bi-cons li,.mw-keuzehulp .bi-pros li{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .bi-pros li::before{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .testimonials{background:var(--mw-mint, var(--mw-mint))}
.mw-keuzehulp .testi-stars{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .testi-name{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .testi-card{background:var(--mw-vlak, var(--mw-vlak));border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.07);box-shadow:0 1px 3px rgba(var(--mw-primair-rgb, 3, 73, 63),.05),0 4px 16px rgba(var(--mw-primair-rgb, 3, 73, 63),.06)}
.mw-keuzehulp .testi-card blockquote{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .testi-av{background:var(--mw-pagina);border-color: rgba(var(--mw-primair-rgb, 3, 73, 63),.2);color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .testi-loc{color:var(--mw-grijs-zacht)}
.mw-keuzehulp .testi-cols{mask-image:linear-gradient(to bottom,transparent,var(--mw-mint, var(--mw-mint))00 0%,black 12%,black 88%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent)}

.mw-keuzehulp .qr-alt-card{background:rgba(var(--mw-primair-rgb, 3, 73, 63),.03);border-color:rgba(var(--mw-primair-rgb, 3, 73, 63),.08)}

.mw-keuzehulp .qr-alt-price{color:var(--mw-primair, var(--mw-donkergroen))}
.mw-keuzehulp .fin-logo-dark{display:none}
.mw-keuzehulp .fin-logo-light{display:block}
.btn{display:inline-flex;align-items:center;gap: var(--mw-ruimte-4);padding: var(--mw-ruimte-8) var(--mw-ruimte-13);border-radius:var(--mw-straal-veld,8px);font-weight: var(--mw-gewicht-merk);font-size: var(--mw-maat-500);cursor:pointer;transition:background .2s,box-shadow .2s,transform .2s,border-color .2s,color .2s;border:0;font-family:inherit;white-space:nowrap}
.btn-neon{background:var(--neon);color:var(--mw-primair, var(--mw-donkergroen));box-shadow:0 0 24px rgba(var(--mw-accent-rgb, 151, 255, 120),.3)}
.btn-neon:hover{background:var(--mw-accent, var(--mw-felgroen));box-shadow:0 0 36px rgba(var(--mw-accent-rgb, 151, 255, 120),.5);transform:translateY(-2px) scale(1.02)}
.btn-outline{background:0 0;color:var(--mw-vlak, var(--mw-vlak));border:1.5px solid var(--mw-vlak-op-donker-sterk)}
.btn-outline:hover{border-color:var(--neon);color:var(--neon)}
.btn-lg{padding: var(--mw-ruimte-9) var(--mw-ruimte-15);font-size: var(--mw-intro)}
.nav-cta .btn{padding: var(--mw-ruimte-6) var(--mw-ruimte-11);font-size: var(--mw-label)}
.ab-section{background:var(--bg-mid);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ab-badge{display:inline-flex;align-items:center;gap: var(--mw-ruimte-4);background:var(--mw-let-op-vlak);border:1px solid var(--mw-let-op-rand);color:var(--mw-let-op);padding: var(--mw-ruimte-3) var(--mw-ruimte-7);border-radius:var(--mw-knop-straal,9999px);font-size: var(--mw-maat-200);font-weight: var(--mw-gewicht-merk);letter-spacing:1px;text-transform:uppercase;margin-bottom: var(--mw-ruimte-7)}
.ab-header{text-align:center;margin-bottom: var(--mw-ruimte-14)}
.ab-header h2{font-size: var(--mw-h2);font-weight: var(--mw-gewicht-merk);letter-spacing: var(--mw-spatie-2);margin-bottom: var(--mw-ruimte-6)}
.ab-header p{font-size: var(--mw-intro);color:var(--text-mid);max-width: var(--mw-kolom-m);margin: var(--mw-ruimte-0) auto}
.ab-tabs{display:none}
.ab-tab{padding: var(--mw-ruimte-6) var(--mw-ruimte-12);border-radius:var(--mw-straal-veld,8px);font-size: var(--mw-label);font-weight: var(--mw-gewicht-merk);cursor:pointer;border:1.5px solid var(--border-mid);background:0 0;color:var(--text-dim);transition:all .2s;font-family:inherit}
.ab-tab.active{background:var(--neon);border-color:var(--neon);color:var(--mw-primair, var(--mw-donkergroen))}
.ab-tab:hover:not(.active){border-color:var(--neon);color:var(--neon)}
.ab-panel{display:none}
.ab-panel.active{display:block}
.quiz-card{max-width: var(--mw-kolom-l);margin: var(--mw-ruimte-0) auto;background:var(--bg-card);border:1px solid var(--border-mid);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-neon)}
.quiz-prog-bar{height:3px;background:rgba(var(--mw-accent-rgb, 151, 255, 120),.12)}
.quiz-prog-fill{height:100%;background:var(--neon);transition:width .4s ease}
.quiz-body{padding: var(--mw-ruimte-16)}
.quiz-step{display:none}
.quiz-step.active{display:block}
.qs-label{font-size: var(--mw-maat-200);font-weight: var(--mw-gewicht-merk);letter-spacing:1.5px;text-transform:uppercase;color:var(--neon);margin-bottom: var(--mw-ruimte-6)}
.qs-q{font-size: var(--mw-titel);font-weight: var(--mw-gewicht-merk);margin-bottom: var(--mw-ruimte-3);line-height: var(--mw-regel)}
.qs-hint{font-size: var(--mw-label);color:var(--text-dim);margin-bottom: var(--mw-ruimte-13)}

/* Het informatie-icoontje bij een vraag, en de uitleg die eronder uitklapt.
   Een tooltip op hover werkt niet op een telefoon, en daar wordt de keuzehulp
   ingevuld, dus het is een knop. Het rondje is hetzelfde rondje als elders:
   lichtgroen, met het icoon in currentColor. */
.qs-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mw-badge-klein);
  height: var(--mw-badge-klein);
  margin-left: var(--mw-ruimte-4);
  vertical-align: middle;
  border: 0;
  border-radius: var(--mw-straal-rond);
  background: var(--mw-lichtgroen);
  color: var(--mw-primair, var(--mw-donkergroen));
  cursor: pointer;
  transition: background var(--mw-duur-snel) var(--mw-curve);
}
.qs-info:hover   { background: var(--mw-felgroen); }
.qs-info:focus-visible {
  outline: 2px solid var(--mw-felgroen);
  outline-offset: 2px;
}
.qs-uitleg {
  font-size: var(--mw-label);
  /* Niet --text-dim zoals de hint: die staat op wit en haalt daar 5,0:1, maar
     op het mintvlak zakt dezelfde kleur naar 3,58:1 en dat is onder de norm van
     4,5:1 voor tekst. Gemeten in de browser, niet geschat. */
  color: var(--mw-grijs-tekst);
  line-height: var(--mw-regel-lees);
  margin-bottom: var(--mw-ruimte-13);
  padding: var(--mw-ruimte-5) var(--mw-ruimte-7);
  border-radius: var(--mw-straal-kaart);
  background: var(--mw-mint);
}
.qs-options{display:grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: var(--mw-ruimte-6)}
.qs-opt{padding: var(--mw-ruimte-8) var(--mw-ruimte-9);border-radius:var(--mw-straal-kaart,12px);font-size: var(--mw-label);font-weight: var(--mw-gewicht-merk);border:1.5px solid var(--border);cursor:pointer;background:rgba(var(--mw-accent-rgb, 151, 255, 120),.03);color:var(--text-mid);transition:background .2s,border-color .2s,color .2s;text-align:left;display:flex;align-items:center;gap: var(--mw-ruimte-6);font-family:inherit}
.qs-opt:hover{border-color:var(--neon);color:var(--mw-vlak, var(--mw-vlak));background:rgba(var(--mw-accent-rgb, 151, 255, 120),.07)}
.qs-opt.selected{border-color:var(--neon);background:rgba(var(--mw-accent-rgb, 151, 255, 120),.12);color:var(--mw-vlak, var(--mw-vlak))}
.qs-opt-icon{font-size: var(--mw-intro);flex-shrink:0}
.qs-nav{display:flex;justify-content:space-between;align-items:center;margin-top: var(--mw-ruimte-13);padding-top: var(--mw-ruimte-12);border-top:1px solid var(--border)}
.qs-back{background:0 0;border:0;color:var(--text-dim);font-size: var(--mw-label);cursor:pointer;font-family:inherit;min-height:44px;padding: var(--mw-ruimte-5) var(--mw-ruimte-8)}
.qs-back:hover{color:var(--mw-vlak, var(--mw-vlak))}
.qs-next{padding: var(--mw-ruimte-7) var(--mw-ruimte-13);border-radius:var(--mw-straal-veld,8px);font-size: var(--mw-maat-500);font-weight: var(--mw-gewicht-merk);background:var(--neon);color:var(--mw-primair, var(--mw-donkergroen));border:0;cursor:pointer;font-family:inherit;transition:all .2s}
.qs-next:hover{background:var(--mw-accent, var(--mw-felgroen));transform:translateY(-1px)}
.qs-form-row{display:grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: var(--mw-ruimte-6);margin-bottom: var(--mw-ruimte-6)}
.qs-field{display:flex;flex-direction:column;gap: var(--mw-ruimte-3)}
.qs-field label{font-size: var(--mw-klein);font-weight: var(--mw-gewicht-merk);color:var(--text-dim)}
.qs-field input,.qs-field select{background:var(--mw-vlak-op-donker);border:1px solid var(--border);border-radius:var(--mw-straal-veld,8px);padding: var(--mw-ruimte-6) var(--mw-ruimte-7);font-size: var(--mw-maat-500);color:var(--mw-vlak, var(--mw-vlak));font-family:inherit;transition:border-color .2s;width:100%}
.qs-field input::placeholder{color:var(--mw-rand-op-donker-half)}
.qs-field input:focus,.qs-field select:focus{outline:0;border-color:var(--neon)}
.qs-field select option{background:var(--mw-primair, var(--mw-donkergroen))}
.qs-full{grid-column:1/-1}
.quiz-result{display:none;padding: var(--mw-ruimte-16);text-align:center}
.quiz-result.active{display:block}
.qr-icon{font-size:52px;margin-bottom: var(--mw-ruimte-8)}
.qr-title{font-size: var(--mw-titel);font-weight: var(--mw-gewicht-kop);margin-bottom: var(--mw-ruimte-3)}
.qr-sub{font-size: var(--mw-maat-500);color:var(--text-dim);margin-bottom: var(--mw-ruimte-12)}
.qr-box{background:rgba(var(--mw-accent-rgb, 151, 255, 120),.07);border:1px solid var(--border-mid);border-radius:var(--radius);padding: var(--mw-ruimte-12);text-align:left;margin-bottom: var(--mw-ruimte-12)}
.qr-brand{font-size: var(--mw-titel);font-weight: var(--mw-gewicht-titel);margin-bottom: var(--mw-ruimte-3)}
.qr-price{font-size: var(--mw-h1);font-weight: var(--mw-gewicht-kop);letter-spacing: var(--mw-spatie-groot);color:var(--neon)}
.qr-note{font-size: var(--mw-maat-200);color:var(--text-dim);margin-top: var(--mw-ruimte-2)}
.qr-cta{text-decoration:none;width:100%;min-height: var(--mw-knop-hoogte);padding: var(--mw-ruimte-9);border-radius: var(--mw-knop-straal);background:var(--neon);color:var(--mw-primair, var(--mw-donkergroen));font-size: var(--mw-intro);font-weight: var(--mw-gewicht-merk);border:0;cursor:pointer;font-family:inherit;transition:all .2s;display:flex;align-items:center;justify-content:center;gap: var(--mw-ruimte-5)}
.qr-cta:hover{background:var(--mw-accent, var(--mw-felgroen));transform:translateY(-1px)}
.qr-cta-sec{width:100%;margin-top: var(--mw-ruimte-5);min-height: var(--mw-knop-hoogte);padding: var(--mw-ruimte-7);border-radius: var(--mw-knop-straal);background:0 0;color:var(--text-dim);font-size: var(--mw-maat-500);font-weight: var(--mw-gewicht-merk);border:1px solid var(--mw-grijs-rand);color:var(--mw-primair, var(--mw-donkergroen));cursor:pointer;font-family:inherit;transition:all .2s}
.qr-cta-sec:hover{border-color:var(--mw-primair, var(--mw-donkergroen));background:var(--mw-felgroen);color:var(--mw-primair, var(--mw-donkergroen))}
.qr-small{font-size: var(--mw-maat-200);color:var(--text-dim);margin-top: var(--mw-ruimte-6)}
.btn-support{display:inline-flex;align-items:center;gap: var(--mw-ruimte-5);background:var(--neon);color:var(--mw-primair, var(--mw-donkergroen));font-weight: var(--mw-gewicht-merk);font-size: var(--mw-tekst);padding: var(--mw-ruimte-8) var(--mw-ruimte-13);border-radius:var(--mw-straal-kaart,12px);border:0;cursor:pointer;font-family:inherit;transition:all .2s;text-decoration:none;box-shadow:0 0 24px rgba(var(--mw-accent-rgb, 151, 255, 120),.3)}
.btn-support:hover{background:var(--mw-accent, var(--mw-felgroen));transform:translateY(-2px);box-shadow:0 0 36px rgba(var(--mw-accent-rgb, 151, 255, 120),.5)}
.qr-icon svg{color:var(--neon);width:52px;height:52px}
.qs-opt-icon svg{color:var(--text-dim);width:20px;height:20px;flex-shrink:0}
.qs-opt.selected .qs-opt-icon svg,.qs-opt:hover .qs-opt-icon svg{color:var(--mw-vlak, var(--mw-vlak))}
.ab-badge svg{color:var(--mw-let-op);width:14px;height:14px;vertical-align:middle}
.ab-tab svg{color:inherit;width:14px;height:14px;vertical-align:middle}
.ab-tab.active svg{color:var(--mw-primair, var(--mw-donkergroen))}
.qr-cta svg{color:var(--mw-primair, var(--mw-donkergroen));width:18px;height:18px;vertical-align:middle}
.mobile-menu-cta .btn{width:100%;justify-content:center;font-size: var(--mw-tekst)}
@media(max-width:900px){section{padding: var(--mw-ruimte-18) var(--mw-ruimte-0)}.hero-inner,.problem-grid,.support-grid,.why-grid{grid-template-columns: minmax(0, 1fr);gap: var(--mw-ruimte-15)}.steps::after{display:none}.faq-grid{grid-template-columns: minmax(0, 1fr)}.f-row,.qs-form-row,.qs-options{grid-template-columns: minmax(0, 1fr)}.stat-col+.stat-col::before{display:none}.nav-links{display:none}.nav-hamburger{display:flex}.nav-cta .btn-outline{display:none}.nav-cta .theme-toggle{display:none}.hero{min-height:auto;padding: var(--mw-ruimte-19) var(--mw-ruimte-0) var(--mw-ruimte-17)}.hero h1{font-size: var(--mw-h1)}.hero-sub{font-size: var(--mw-tekst)}.price-card{padding: var(--mw-ruimte-12)}.stats-inner{grid-template-columns: minmax(0, 1fr);gap: var(--mw-ruimte-12)}.why-cards{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap: var(--mw-ruimte-7);padding-bottom: var(--mw-ruimte-6);scrollbar-width:none;width:100%}.why-cards::-webkit-scrollbar{display:none}.why-card{flex:0 0 80vw;scroll-snap-align:start;max-width: var(--mw-kolom-xs)}.benefits-grid,.brands-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap: var(--mw-ruimte-7);padding-bottom: var(--mw-ruimte-6);scrollbar-width:none;width:100%}.benefits-grid::-webkit-scrollbar,.brands-grid::-webkit-scrollbar{display:none}.benefit-card,.brand-card{flex:0 0 75vw;max-width: var(--mw-kolom-xs);scroll-snap-align:start}.steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap: var(--mw-ruimte-7);padding-bottom: var(--mw-ruimte-6);scrollbar-width:none;margin-top: var(--mw-ruimte-15);width:100%}.steps::-webkit-scrollbar{display:none}.step{flex:0 0 75vw;max-width: var(--mw-kolom-xs);scroll-snap-align:start;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding: var(--mw-ruimte-13) var(--mw-ruimte-12)}.swipe-hint{display:flex}.ab-tab{font-size: var(--mw-klein);padding: var(--mw-ruimte-5) var(--mw-ruimte-8)}.quiz-body{padding: var(--mw-ruimte-13) var(--mw-ruimte-10)}.quiz-result{padding: var(--mw-ruimte-13) var(--mw-ruimte-10)}.support-cta-content{padding: var(--mw-ruimte-15) var(--mw-ruimte-13);max-width:100%}.support-cta-bg{background-position:right center}.footer-inner{flex-direction:column;align-items:flex-start;gap: var(--mw-ruimte-8)}}
@media(max-width:480px){.container{padding: var(--mw-ruimte-0) var(--mw-ruimte-9)}.hero h1{font-size: var(--mw-h2)}.hero-ctas{flex-direction:column}.hero-ctas .btn{width:100%;justify-content:center}.nav-inner{padding: var(--mw-ruimte-7) var(--mw-ruimte-9)}.nav-logo img{height:28px}.why-card{flex:0 0 88vw}.benefit-card,.brand-card{flex:0 0 82vw}.step{flex:0 0 82vw}.support-cta-banner{min-height:340px}.support-cta h2{font-size: var(--mw-titel)}}
.qr-benefit{display:flex;align-items:flex-start;gap: var(--mw-ruimte-4);font-size: var(--mw-klein);color:var(--text-mid);line-height: var(--mw-regelhoogte-3)}

.qr-benefit svg{flex-shrink:0;margin-top: var(--mw-ruimte-1)}

.qr-alt-card{background:var(--mw-vlak-op-donker-zacht);border:1px solid var(--mw-vlak-op-donker);border-radius:var(--mw-straal-kaart,12px);padding: var(--mw-ruimte-6) var(--mw-ruimte-7);cursor:default}

.qr-alt-name{font-size: var(--mw-klein);font-weight: var(--mw-gewicht-merk);color:var(--text);margin-bottom: var(--mw-ruimte-2)}

.qr-alt-price{font-size: var(--mw-maat-500);font-weight: var(--mw-gewicht-merk);color:var(--neon);margin-bottom: var(--mw-ruimte-2)}

.qr-alt-desc{font-size: var(--mw-maat-200);color:var(--text-dim);line-height: var(--mw-regelhoogte-3)}

.qs-opt.selected{border-color:var(--neon)!important;background:rgba(var(--mw-accent-rgb, 151, 255, 120),.1)!important}

/* ── Het designsysteem over de keuzehulp heen ──────────────────────────────
   De keuzehulp zelf blijft zoals hij is; alleen de vormtaal gaat mee met de
   rest van de site. Dat betekent: geen slagschaduwen maar een haarlijn, de
   stralen uit hoofdstuk 0 en knoppen die helemaal rond zijn.
   ------------------------------------------------------------------------ */

/* Geen enkele schaduw meer, ook niet bij hover. Diepte komt van het vlak en
   de rand. De ring om een element met toetsenbordfocus blijft staan, want die
   is geen versiering maar een aanwijzing. */
.mw-keuzehulp *,
.mw-keuzehulp *::before,
.mw-keuzehulp *::after { box-shadow: none !important; }

.mw-keuzehulp :focus-visible { outline: 2px solid var(--mw-primair, var(--mw-donkergroen)); outline-offset: 2px; }

/* Kaarten: wit vlak, haarlijn, straal 16. */
.mw-keuzehulp .why-card,
.mw-keuzehulp .benefit-card,
.mw-keuzehulp .brand-card,
.mw-keuzehulp .faq-item,
.mw-keuzehulp .quiz-card,
.mw-keuzehulp .planner-card,
.mw-keuzehulp .form-card,
.mw-keuzehulp .price-card,
.mw-keuzehulp .problem-callout,
.mw-keuzehulp .step {
  border: 1px solid rgba(var(--mw-primair-rgb, 3, 73, 63), .1);
  border-radius:var(--mw-straal-sectie,16px);
}

/* Bij hover wordt de rand donkerder in plaats van dat het vlak gaat zweven. */
.mw-keuzehulp .why-card:hover,
.mw-keuzehulp .benefit-card:hover,
.mw-keuzehulp .brand-card:hover,
.mw-keuzehulp .step:hover { border-color: rgba(var(--mw-primair-rgb, 3, 73, 63), .3); }

.mw-keuzehulp .why-card,
.mw-keuzehulp .benefit-card,
.mw-keuzehulp .brand-card,
.mw-keuzehulp .step { transition: border-color .3s cubic-bezier(.625, .05, 0, 1); }

/* Wat binnen een kaart staat is een maat kleiner. */
.mw-keuzehulp .brand-pill,
.mw-keuzehulp .bi-section,
.mw-keuzehulp .sf-item { border-radius:var(--mw-straal-kaart,12px); }

/* Velden: straal 8, haarlijn, en groen zodra de cursor erin staat. */
.mw-keuzehulp input:not([type=checkbox]):not([type=radio]),
.mw-keuzehulp select,
.mw-keuzehulp textarea {
  border-radius:var(--mw-straal-veld,8px);
  border: 1px solid rgba(var(--mw-primair-rgb, 3, 73, 63), .2);
}
.mw-keuzehulp input:focus,
.mw-keuzehulp select:focus,
.mw-keuzehulp textarea:focus { border-color: var(--mw-primair, var(--mw-donkergroen)); }

/* Knoppen zijn rond, zoals overal op de site. Het verspringen bij hover hoort
   bij de schaduw die er niet meer is, dus dat gaat er ook uit. */
.mw-keuzehulp .btn-neon,
.mw-keuzehulp .btn,
.mw-keuzehulp button.cta,
.mw-keuzehulp .brand-info-btn { border-radius:var(--mw-knop-straal,9999px); }
.mw-keuzehulp .btn-neon:hover { transform: none; }

/* De balk bovenin en de modal krijgen dezelfde haarlijn. */
.mw-keuzehulp nav:not([aria-label]) { border-bottom: 1px solid rgba(var(--mw-primair-rgb, 3, 73, 63), .1); }
.mw-keuzehulp .bi-modal { border: 1px solid rgba(var(--mw-primair-rgb, 3, 73, 63), .14); border-radius:var(--mw-straal-sectie,16px); }

/* ── De melding bij een vraag die nog openstaat ─────────────────────────────
   Een vraag overslaan kon, en dan kwam er een advies uit zonder grond. De
   melding staat onder de keuzes en boven de knoppen, zodat hij in beeld is op
   de plek waar iemand net heeft geklikt. */
.qs-hint-let-op {
  color: var(--mw-let-op-op-donker);
  margin-top: var(--mw-ruimte-5);
}

/* ── Het resultaat: aannames, voordelen, de pijl in de knop ────────────────
   Dit vak stond in oranje, de kleur van "let op". Maar een aanname is geen
   waarschuwing: het is uitleg waar we van uit zijn gegaan, en die hoort in het
   mintvlak dat het designsysteem voor informatiekaders heeft. Oranje maakt van
   een nette toelichting een foutmelding.

   De opmaak stond bovendien als inline stijl in de markup. Nu hier, met de
   tokens, zoals elk ander onderdeel. */
.qr-aanname {
  margin-top: var(--mw-ruimte-7);
  padding: var(--mw-ruimte-7) var(--mw-ruimte-8);
  background: var(--mw-mint);
  border: 1px solid var(--mw-grijs-rand);
  border-radius: var(--mw-straal-veld);
}
.qr-aanname-kop {
  font-size: var(--mw-klein);
  font-weight: var(--mw-gewicht-titel);
  color: var(--mw-primair, var(--mw-donkergroen));
  margin-bottom: var(--mw-ruimte-3);
}
.qr-aanname p {
  font-size: var(--mw-klein);
  color: var(--mw-grijs-tekst);
  line-height: var(--mw-regel-lees);
  margin: var(--mw-ruimte-0);
}

/* Het vinkje bij een voordeel: een icoon uit HugeIcons in currentColor, niet
   een zelf getekend pad met een vaste kleur erin. */
.qr-benefit svg { color: var(--mw-primair, var(--mw-donkergroen)); }

/* De pijl in de primaire knop staat in een donkergroen rondje, zoals elke
   primaire knop in het systeem. */
.qr-cta-pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* Een rondje, net als in knoppen.css: dat is altijd 50% en volgt niet de
     vormkeuze uit Instellingen, anders wordt het een vierkantje met ronde
     hoeken en is het geen rondje meer. */
  border-radius: 50%;
  background: var(--mw-primair, var(--mw-donkergroen));
  color: var(--mw-felgroen);
  flex-shrink: 0;
}
.qr-cta-pijl svg { width: 15px; height: 15px; color: inherit; }

/* De zin die uitlegt waarom deze oplossing past. Die stond als zwevende,
   gecentreerde grijze tekst tussen twee blokken in, met een vlak dat wit op wit
   was en dus niet bestond. Nu een rustig grijs vlak met dezelfde rand als de
   rest, en links uitgelijnd zoals leestekst hoort. */
#qr-why {
  background: var(--mw-vlak-grijs);
  border: 1px solid var(--mw-grijs-rand);
  border-radius: var(--mw-straal-veld);
  padding: var(--mw-ruimte-6) var(--mw-ruimte-7);
  margin-bottom: var(--mw-ruimte-6);
  font-size: var(--mw-klein);
  color: var(--mw-grijs-tekst);
  line-height: var(--mw-regel-lees);
  text-align: left;
}

/* ── Waarom deze batterij ──────────────────────────────────────────────────
   Het vak #qr-why hierboven droeg een zin die de antwoorden herhaalde. Nu
   draagt het de redenering: van verbruik naar capaciteit, van capaciteit naar
   merk, van merk naar uitvoering. Genummerd, want het is een keten en geen
   losse opsomming: wie het er niet mee eens is kan nu zeggen bij welke stap. */
.qr-waarom-kop {
  font-size: var(--mw-klein);
  font-weight: var(--mw-gewicht-titel);
  color: var(--mw-primair, var(--mw-donkergroen));
  margin-bottom: var(--mw-ruimte-4);
}
.qr-waarom {
  margin: var(--mw-ruimte-0);
  padding-left: var(--mw-ruimte-7);
  display: grid;
  gap: var(--mw-ruimte-3);
}
.qr-waarom li {
  color: var(--mw-grijs-tekst);
  line-height: var(--mw-regel-lees);
}
.qr-waarom li::marker {
  color: var(--mw-primair, var(--mw-donkergroen));
  font-weight: var(--mw-gewicht-titel);
}

/* ── Andere opties die bij je passen ───────────────────────────────────────
   Deze stonden achter een knop "Bekijk alternatieven", en die knop verscheen
   alleen als er iets te tonen was. Bij een lange kabel bleef er vaak niets
   over, en dan zag de bezoeker een enkel advies zonder dat ergens stond dat er
   geen alternatief was. Nu staan ze open onder de aanbeveling: eerst wat wij
   adviseren, daaronder wat er qua capaciteit vlak omheen ligt.

   De maten stonden als inline stijl in de markup. Nu hier, met de tokens en
   met een breekpunt uit de lijst. */
.qr-alts-blok { margin-bottom: var(--mw-ruimte-8); }
.qr-alts-blok[hidden] { display: none; }
.qr-alts-kop {
  font-size: var(--mw-klein);
  font-weight: var(--mw-gewicht-titel);
  color: var(--text-dim);
  text-align: left;
  margin-bottom: var(--mw-ruimte-4);
}
.qr-alts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mw-ruimte-5);
}
@media (max-width: 600px) {
  .qr-alts { grid-template-columns: minmax(0, 1fr); }
}

/* Hoeveel een optie van het advies afwijkt. Grijs en klein: het is een label
   bij de naam en geen tweede prijs. */
.qr-alt-diff {
  font-size: var(--mw-mini, var(--mw-klein));
  color: var(--text-dim);
  margin-bottom: var(--mw-ruimte-2);
}
.mw-keuzehulp .qr-alt-diff { color: var(--mw-grijs-tekst); }
.mw-keuzehulp .qr-alts-kop { color: var(--mw-grijs-tekst); }

/* Het gevonden adres bij postcode plus huisnummer. Geen invoerveld maar een
   bevestiging: dit is waar wij heen zouden rijden. */
.qs-adres {
  font-size: var(--mw-klein);
  color: var(--text-mid);
  line-height: var(--mw-regel-lees);
  padding-top: var(--mw-ruimte-3);
}
.qs-adres-fout { color: var(--mw-fout); }
.mw-keuzehulp .qs-adres { color: var(--mw-grijs-tekst); }

/* ── Help mij inschatten bij de laadpaal ───────────────────────────────────
   Bij de zonnepanelen staat al zo'n hulpje: weet je het niet, schuif dan en wij
   rekenen het uit. Bij de laadpaal speelt hetzelfde: niemand weet hoeveel kWh
   zijn auto vraagt, iedereen weet ongeveer hoeveel hij rijdt. */
.qs-laadpaal {
  margin-top: var(--mw-ruimte-6);
  padding: var(--mw-ruimte-7) var(--mw-ruimte-8);
  background: var(--bg-card, var(--mw-vlak-grijs));
  border: 1px solid var(--border, var(--mw-grijs-rand));
  border-radius: var(--mw-straal-kaart, 12px);
}
.qs-laadpaal[hidden] { display: none; }
.qs-laadpaal-kop {
  display: block;
  font-size: var(--mw-klein);
  color: var(--text-mid, var(--mw-grijs-tekst));
  margin-bottom: var(--mw-ruimte-5);
}
.qs-laadpaal-schuif {
  width: 100%;
  accent-color: var(--accent-leesbaar, var(--mw-felgroen));
}
.qs-laadpaal-uit {
  margin-top: var(--mw-ruimte-4);
  font-size: var(--mw-tekst);
  font-weight: var(--mw-gewicht-titel);
  color: var(--text, var(--mw-donkergroen));
}
.qs-laadpaal-hint {
  margin: var(--mw-ruimte-4) var(--mw-ruimte-0) var(--mw-ruimte-0);
  font-size: var(--mw-klein);
  line-height: var(--mw-regel-lees);
  color: var(--text-dim, var(--mw-grijs-tekst));
}
.mw-keuzehulp .qs-laadpaal-kop,
.mw-keuzehulp .qs-laadpaal-hint { color: var(--mw-grijs-tekst); }
.mw-keuzehulp .qs-laadpaal-uit  { color: var(--mw-donkergroen); }