/* Katja x domogo: styles from the design (claude.ai artifact TiZoV2wHEbACN3gX9SLCGn), copied as-is.
   Update by re-copying the <style> block from the artifact; local additions live at the bottom. */
@font-face{font-family: Lufga;font-weight: 300;font-display: swap;src: url(../assets/fonts/lufga-light.woff2) format('woff2')}
@font-face{font-family: Lufga;font-weight: 400;font-display: swap;src: url(../assets/fonts/lufga-regular.woff2) format('woff2')}
@font-face{font-family: Lufga;font-weight: 500 900;font-display: swap;src: url(../assets/fonts/lufga-medium.woff2) format('woff2')}
:root{--groen: #57E27F;--groen-hover: #3fd06a;--inkt: #000;--grijs: #535353;--donker: #2D2D2D;--u: min(calc(100vw / 391), calc(1600px / 391));--uk: min(calc(100vw / 391), calc(100svh / 326), calc(1600px / 391));--rand: clamp(20px, 4vw, 64px)}
*{box-sizing: border-box;margin: 0}
body{font-family: Lufga, system-ui, sans-serif;background: #fff;color: var(--inkt);-webkit-font-smoothing: antialiased}
a{color: inherit;text-decoration: none}
.logo{display: block;height: 100%;width: auto;fill: currentColor;overflow: visible}
:focus-visible{outline: 2px solid var(--groen);outline-offset: 2px}
.nav{position: relative;z-index: 3;height: calc(34 * var(--uk));background: #fff}
.nav__binnen{position: relative;width: calc(391 * var(--u));height: 100%;margin: 0 auto}
.nav__merk{position: absolute;left: calc(24 * var(--u));top: calc(13.4 * var(--uk));height: calc(11.7 * var(--uk))}
.nav__links{position: absolute;left: calc(115 * var(--u));top: 0;height: 100%;display: flex;align-items: center;list-style: none;padding: 0}
.nav__links li{position: absolute;top: calc(50% + 1.2 * var(--uk));translate: 0 -50%;white-space: nowrap}
.nav__links li:nth-child(1){left: 0}
.nav__links li:nth-child(2){left: calc(38.2 * var(--u))}
.nav__links li:nth-child(3){left: calc(85.6 * var(--u))}
.nav__links li:nth-child(4){left: calc(114.4 * var(--u))}
.nav__links a{font-size: calc(5.44 * var(--uk));font-weight: 700;color: var(--grijs);transition: color .15s}
.nav__links a:hover{color: var(--inkt)}
.pil{display: inline-flex;align-items: center;justify-content: center;border: 0;cursor: pointer;font-family: inherit;font-weight: 600;color: var(--inkt);background: var(--groen);border-radius: 999px;transition: background .15s, transform .15s;white-space: nowrap}
.pil:hover{background: var(--groen-hover)}
.pil:active{transform: scale(.98)}
.nav .pil{position: absolute;right: calc(25 * var(--u) + 37 * var(--uk));top: calc(12 * var(--uk));width: calc(58 * var(--uk));height: calc(13 * var(--uk));font-size: calc(4.5 * var(--uk))}
.duo{position: absolute;right: calc(25 * var(--u));top: calc(12 * var(--uk));height: calc(13 * var(--uk));display: flex;border-radius: calc(3 * var(--uk));overflow: hidden}
.duo > *{width: calc(13 * var(--uk));display: grid;place-items: center;border: 0;padding: 0;cursor: pointer}
.duo__app{background: var(--groen)}
.duo__app svg{width: calc(6.2 * var(--uk));height: calc(6 * var(--uk))}
.duo__menu{background: var(--inkt)}
.duo__menu span,.duo__menu span::after{display: block;width: calc(5 * var(--uk));height: max(1px, calc(.5 * var(--uk)));border-radius: 1px;background: rgba(255,255,255,.8);transition: transform .2s}
.duo__menu span{transform: translateY(calc(-1.25 * var(--uk)))}
.duo__menu span::after{content: "";transform: translateY(calc(2.5 * var(--uk) - 100%))}
.menu-open .duo__menu span{transform: rotate(45deg)}
.menu-open .duo__menu span::after{transform: rotate(-90deg)}
.lade{position: absolute;z-index: 2;right: max(0px, calc(50% - 195.5 * var(--u)));top: calc(34 * var(--uk));width: 300px;display: block;background: #fff;padding: 8px 24px 20px;border-radius: 0 0 0 16px;box-shadow: 0 12px 24px rgba(0,0,0,.08);transform: translateY(-8px);opacity: 0;visibility: hidden;transition: .2s}
.lade a{display: block;padding: 12px 0;font-size: 17px;font-weight: 600;color: var(--grijs);border-bottom: 1px solid #eee}
.lade a:last-child{border: 0}
.menu-open .lade{transform: none;opacity: 1;visibility: visible}
.hero{position: relative;isolation: isolate;overflow: hidden;color: #fff;background: #2a2420;height: calc(292 * var(--uk))}
.hero__binnen{position: relative;width: calc(391 * var(--u));height: 100%;margin: 0 auto}
.hero__foto{position: absolute;z-index: -2;left: min(0px, calc(50% - 391.5 * var(--uk)));right: 0;top: calc(-26 * var(--uk));width: auto;height: calc(330 * var(--uk));object-fit: cover;object-position: 0 0}
.vlek{position: absolute;z-index: -1;width: calc(170 * var(--uk));height: calc(174 * var(--uk));border-radius: 50%;background: rgba(0,0,0,.56);filter: blur(calc(54.5 * var(--uk)));pointer-events: none}
.vlek--1{left: calc(-7 * var(--u));bottom: 0}
.vlek--2{left: calc(189 * var(--u));bottom: calc(-167 * var(--uk))}
.tekst h1{position: absolute;left: calc(21.6 * var(--u));bottom: calc(77.1 * var(--uk));margin: 0;white-space: nowrap;font-size: calc(35 * var(--uk));font-weight: 500;line-height: calc(38 * var(--uk));letter-spacing: 0}
.tekst h1 span{display: block}
.advies{position: absolute;right: calc(25 * var(--u));bottom: calc(70 * var(--uk));width: calc(123 * var(--uk));height: calc(71 * var(--uk));border-radius: calc(10 * var(--uk));background: rgba(255,255,255,.75);-webkit-backdrop-filter: blur(calc(4 * var(--uk)));backdrop-filter: blur(calc(4 * var(--uk)))}
.advies input{position: absolute;left: calc(9 * var(--uk));top: calc(12 * var(--uk));width: calc(106.7 * var(--uk));height: calc(20.6 * var(--uk));border: 0;border-radius: calc(4.9 * var(--uk));padding: calc(1.4 * var(--uk)) 0 0 calc(10.7 * var(--uk));background: rgba(255,255,255,.81);font: 600 calc(6.86 * var(--uk)) Lufga, system-ui, sans-serif;color: var(--inkt);outline: none}
.advies input::placeholder{color: rgba(0,0,0,.6)}
.advies input:focus-visible{box-shadow: 0 0 0 2px var(--groen)}
.advies .pil{position: absolute;left: calc(9 * var(--uk));top: calc(38 * var(--uk));width: calc(106.7 * var(--uk));height: calc(20.6 * var(--uk));font-size: calc(6.86 * var(--uk));font-weight: 700;padding: calc(1.4 * var(--uk)) 0 0 calc(5 * var(--uk))}
@media (min-width: 821px) and (max-width: 1079px), (min-width: 821px) and (max-height: 869px){.nav{height: max(56px, calc(34 * var(--uk)))}
.nav__binnen{width: auto;padding: 0 calc(25 * var(--u));display: flex;align-items: center;gap: 12px}
.nav__merk{position: static;height: 24px;margin-right: auto}
.nav__links{display: none}
.nav .pil{position: static;width: auto;height: 36px;padding: 0 18px;font-size: 14px}
.duo{position: static;height: 36px;border-radius: 8px}
.duo > *{width: 40px}
.duo__app svg{width: 18px;height: 17px}
.duo__menu span,.duo__menu span::after{width: 16px;height: 1.5px}
.duo__menu span{transform: translateY(-3px)}
.duo__menu span::after{transform: translateY(5px)}
.lade{top: max(56px, calc(34 * var(--uk)))}
}
@media (max-width: 820px){.nav{height: 60px}
.nav__binnen{width: auto;padding: 0 20px;display: flex;align-items: center;gap: 12px}
.nav__merk{position: static;height: 22px;margin-right: auto}
.nav__links{display: none}
.nav .pil{position: static;width: auto;height: 36px;padding: 0 18px;font-size: 14px}
.duo{position: static;height: 36px;border-radius: 8px}
.duo > *{width: 40px}
.duo__app svg{width: 18px;height: 17px}
.duo__menu span,.duo__menu span::after{width: 16px;height: 1.5px}
.duo__menu span{transform: translateY(-3px)}
.duo__menu span::after{transform: translateY(5px)}
.lade{top: 60px;left: 0;width: auto;border-radius: 0;padding: 8px 20px 20px}
.hero{height: auto;min-height: calc(100svh - 60px)}
.hero__binnen{width: auto;min-height: inherit;padding: 20px 20px 28px;display: flex;flex-direction: column;gap: 20px}
.hero__foto{left: 0;top: 0;width: 100%;height: 100%;object-position: 49% 30%}
.vlek{display: none}
.hero__binnen::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.62) 42%, transparent 62%)}
.tekst{margin-top: auto}
.tekst h1{position: static}
.tekst h1{font-size: clamp(44px, 13vw, 64px);line-height: 1;white-space: normal}
.advies{position: relative;left: auto;right: auto;bottom: auto;width: 100%;height: auto;padding: 16px;border-radius: 20px;display: grid;gap: 12px;background: rgba(255,255,255,.62)}
.advies input,.advies .pil{position: static;width: 100%;height: 50px;border-radius: 12px}
.advies input{padding: 0 0 0 18px;font-size: 16px}
.advies .pil{border-radius: 999px;font-size: 16px;font-weight: 700;padding: 0}
}
@media (max-width: 400px){.nav .pil{display: none}
}
.glas{background: rgba(236,236,236,.74);-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px)}
.vraag{background: linear-gradient(#F1F1F1, #F5F5F5);padding: clamp(56px, 8vw, 120px) var(--rand);display: grid;grid-template-columns: max(220px, calc(80 * var(--u))) minmax(0, calc(190 * var(--u)));justify-content: center;align-items: center;column-gap: calc(40 * var(--u));overflow: hidden}
.reel{position: relative;justify-self: center;width: 100%;container-type: inline-size}
.reel__toestel{position: relative;aspect-ratio: 71.6 / 147.6;transform: rotate(-3.75deg);border-radius: 17.5cqw;padding: 1.3cqw;background: linear-gradient(135deg, #a1a1a6 0%, #505055 10%, #2c2c2e 28%, #6a6a6f 50%, #2c2c2e 72%, #505055 90%, #a1a1a6 100%);box-shadow: inset 0 0 0 .35cqw rgba(255,255,255,.22), 0 5cqw 10cqw -3cqw rgba(0,0,0,.38), 0 1.5cqw 3cqw rgba(0,0,0,.16)}
.reel__knop{position: absolute;z-index: -1;width: 1.4cqw;border-radius: .7cqw;background: linear-gradient(90deg, #2c2c2e, #8a8a8f 50%, #2c2c2e)}
.reel__knop--actie{left: -.8cqw;top: 17%;height: 5.5%}
.reel__knop--luid{left: -.8cqw;top: 26%;height: 10%}
.reel__knop--zacht{left: -.8cqw;top: 38%;height: 10%}
.reel__knop--aan{right: -.8cqw;top: 29%;height: 15%}
.reel__scherm{height: 100%;border-radius: 16.2cqw;padding: 3cqw;background: #050505;box-shadow: inset 0 0 0 .3cqw #1c1c1e}
.reel__beeld{position: relative;isolation: isolate;height: 100%;border-radius: 13.4cqw;overflow: hidden;background: #111}
.reel__beeld img,.reel__beeld video{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover}
.reel__beeld::after{content: "";position: absolute;inset: 0;z-index: 2;pointer-events: none;transition: opacity .3s;background: linear-gradient(118deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 40%)}
.speelt .reel__beeld::after{opacity: 0}
.reel__beeld video{opacity: 0;transition: opacity .3s}
.speelt .reel__beeld video{opacity: 1}
.reel__eiland{position: absolute;z-index: 3;top: 2.4%;left: 50%;translate: -50% 0;width: 33cqw;height: 9.6cqw;border-radius: 999px;background: #000;display: flex;align-items: center;justify-content: flex-end;padding-right: 3cqw}
.reel__eiland::after{content: "";width: 3.6cqw;aspect-ratio: 1;border-radius: 50%;background: #0d0d10;box-shadow: inset 0 0 0 .9cqw #16161a, inset 0 0 0 1.4cqw rgba(60,80,120,.35)}
.reel__speel{position: absolute;z-index: 3;left: 50%;top: 52%;translate: -50% -50%;width: 20cqw;aspect-ratio: 1;border: 0;border-radius: 50%;background: var(--groen);cursor: pointer;display: grid;place-items: center;box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.25);transition: transform .2s, opacity .2s}
.reel__speel:hover{transform: scale(1.06)}
.reel__speel svg{width: 7cqw;height: 7cqw;margin-left: 1.2cqw}
.speelt .reel__speel{opacity: 0;pointer-events: none}
.speelt .reel__eiland{opacity: 0}
.vraag__tekst{position: relative}
.vraag h2{font-size: clamp(26px, 2.6vw, 38px);font-weight: 700;line-height: 1.12;letter-spacing: -.01em;max-width: 11em}
.vraag blockquote{margin-top: clamp(28px, 3.4vw, 52px);font-size: clamp(30px, 3.4vw, 50px);font-weight: 400;line-height: 1.12;letter-spacing: -.015em;color: #383838;max-width: 12.5em}
.vraag__sub{margin-top: clamp(18px, 2vw, 28px);font-size: clamp(15px, 1.1vw, 17px);color: var(--inkt)}
@media (max-width: 820px){.vraag{grid-template-columns: 1fr;row-gap: 56px}
.vraag__tekst{grid-row: 1}
.reel{grid-row: 2;max-width: 250px}
.vraag h2{font-size: clamp(22px, 6.4vw, 34px)}
.vraag blockquote{margin-top: 24px;font-size: clamp(24px, 7.6vw, 44px)}
}
@media (max-width: 420px){.reel{max-width: 220px}
}
.dag{position: relative;height: calc(300 * var(--u));overflow: hidden}
.dag::before{content: "";position: absolute;inset: 0 0 auto 0;height: calc(112 * var(--u));background: #F5F5F5;border-bottom-left-radius: calc(37 * var(--u))}
.dag__binnen{position: relative;width: calc(391 * var(--u));height: 100%;margin: 0 auto}
.dag h2{position: absolute;left: calc(25 * var(--u));top: calc(33.1 * var(--u));margin: 0;white-space: nowrap;font-size: calc(16 * var(--u));font-weight: 400;line-height: calc(17.4 * var(--u));color: var(--inkt)}
.dag h2 strong{font-weight: 700}
.dag__baan{position: absolute;left: calc(25 * var(--u));right: 0;top: calc(96 * var(--u));display: flex;gap: calc(8 * var(--u));overflow-x: auto;scroll-snap-type: x mandatory;scroll-behavior: smooth;scrollbar-width: none;padding: 0 0 calc(4 * var(--u));list-style: none;margin: 0}
.dag__baan::-webkit-scrollbar{display: none}
.dag__kaart{position: relative;flex: none;width: calc(85 * var(--u));padding: calc(5 * var(--u)) 0 0 calc(3 * var(--u));scroll-snap-align: start}
.dag__kaart:last-child{scroll-snap-align: end}
.dag__kaart img{display: block;width: calc(82 * var(--u));height: calc(124 * var(--u));object-fit: cover;border-radius: calc(5 * var(--u))}
.dag__label{position: absolute;left: calc(25 * var(--u));top: calc(240.3 * var(--u));font-size: calc(8 * var(--u));font-weight: 400;color: var(--inkt)}
.dag__knoppen{position: absolute;left: calc(328.75 * var(--u));top: calc(240 * var(--u));display: flex;gap: calc(4.5 * var(--u))}
.dag__knoppen button{width: calc(19.5 * var(--u));height: calc(19.5 * var(--u));padding: 0;border-radius: 50%;cursor: pointer;background: transparent;border: max(1px, calc(.5 * var(--u))) solid rgba(32,32,32,.61);display: grid;place-items: center;color: #474747;transition: background .15s, opacity .15s}
.dag__knoppen button:hover:not(:disabled){background: #F4F4F4}
.dag__knoppen button:disabled{opacity: .35;cursor: default}
.dag__knoppen svg{width: calc(5 * var(--u));height: calc(5 * var(--u))}
.gesprek{position: relative;height: calc(310 * var(--u))}
.gesprek__binnen{position: relative;width: calc(391 * var(--u));height: 100%;margin: 0 auto}
.gesprek__tekst{position: absolute;left: 0;right: 0;top: calc(207.2 * var(--u));margin: 0;padding-left: calc(.8 * var(--u));text-align: center;font-size: calc(12 * var(--u));font-weight: 400;line-height: calc(16 * var(--u));color: var(--inkt)}
.gesprek__tekst span{display: block}
@media (max-width: 820px){.dag{height: auto;padding: 44px 0 48px}
.dag::before{height: 150px;border-bottom-left-radius: 40px}
.dag__binnen{width: auto;display: grid;grid-template-columns: 1fr auto;row-gap: 24px;padding: 0 0 0 20px}
.dag h2,.dag__baan,.dag__label,.dag__knoppen{position: static}
.dag h2{grid-column: 1 / -1;padding-right: 20px;white-space: normal;font-size: clamp(22px, 6.6vw, 30px);line-height: 1.12}
.dag h2 br{display: none}
.dag__baan{grid-column: 1 / -1;gap: 12px;padding: 0 20px 4px 0;scroll-padding-left: 0}
.dag__kaart{width: min(62vw, 250px);padding: 8px 0 0 5px}
.dag__kaart img{width: 100%;height: auto;aspect-ratio: 82 / 124;border-radius: 12px}
.dag__label{align-self: center;font-size: 16px}
.dag__knoppen{gap: 10px;padding-right: 20px}
.dag__knoppen button{width: 44px;height: 44px;border-width: 1px}
.dag__knoppen svg{width: 12px;height: 12px}
.gesprek{height: auto;padding: 8px 20px 56px}
.gesprek__binnen{width: auto;display: flex;flex-direction: column;align-items: center;gap: 28px}
.gesprek__tekst{position: static}
.gesprek__tekst{padding-left: 0;font-size: clamp(18px, 5vw, 24px);line-height: 1.35;text-wrap: balance}
.gesprek__tekst span{display: block;text-wrap: balance}
}
.moment{width: calc(78 * var(--u));height: calc(134 * var(--u));border-radius: calc(10 * var(--u));background: #fff;padding: calc(12 * var(--u)) calc(10 * var(--u));display: flex;flex-direction: column}
.moment svg{width: calc(24 * var(--u));height: calc(24 * var(--u));flex: none}
.moment h3{margin: calc(42 * var(--u)) 0 calc(4 * var(--u));font-size: calc(9 * var(--u));font-weight: 600;line-height: 1.15}
.moment p{margin: 0;font-size: calc(7 * var(--u));line-height: calc(9.5 * var(--u));color: #383838}
@media (max-width: 820px){.moment{flex: 1;width: auto;height: auto;min-height: 210px;border-radius: 16px;padding: 18px 14px}
.moment svg{width: 36px;height: 36px}
.moment h3{margin: 28px 0 6px;font-size: 18px}
.moment p{font-size: 15px;line-height: 1.35}
}
.bewijs__beeld{--b: var(--u);position: absolute;left: calc(128 * var(--u));top: calc(7 * var(--u));width: calc(218 * var(--b));height: calc(203 * var(--b))}
.bewijs__beeld img{position: absolute;width: calc(173 * var(--b));height: calc(173 * var(--b))}
@media (max-width: 820px){.bewijs__beeld{--b: min(calc((100vw - 80px) / 218), 2.2px);position: relative;left: auto;top: auto;align-self: center;margin-top: 8px}
}
.geregeld{position: relative;height: calc(208 * var(--u))}
.geregeld h2{position: absolute;left: calc(23 * var(--u));top: calc(14.45 * var(--u));width: calc(110 * var(--u));margin: 0;font-size: calc(16 * var(--u));font-weight: 400;line-height: calc(17 * var(--u));color: var(--inkt)}
.geregeld h2 strong{font-weight: 600}
@media (max-width: 820px){.geregeld{height: auto;padding: 44px 20px 48px}
.geregeld h2{position: static}
.geregeld h2{width: auto;font-size: clamp(26px, 7.6vw, 34px);line-height: 1.1}
.geregeld h2 br{display: none}
}
.route{position: relative;height: calc(326 * var(--u));background: #F4F4F4}
.route__binnen{position: relative;width: calc(391 * var(--u));height: 100%;margin: 0 auto}
.route h2{position: absolute;left: calc(25 * var(--u));top: calc(19 * var(--u));margin: 0;font-size: calc(12 * var(--u));font-weight: 400;line-height: calc(16 * var(--u));color: var(--inkt)}
.route h2 strong{display: block;font-weight: 600}
.cijfers{position: relative;height: calc(268 * var(--u))}
.cijfers__binnen{position: relative;width: calc(391 * var(--u));height: 100%;margin: 0 auto}
.cijfers__toestel{position: absolute;left: calc(31.97 * var(--u));top: calc(31.56 * var(--u));width: calc(116 * var(--u));height: calc(217 * var(--u));border-radius: calc(14 * var(--u));overflow: hidden;transform: rotate(-3.75deg)}
.cijfers__toestel img{width: 100%;height: 100%;object-fit: cover;display: block}
.cijfers h2{position: absolute;left: calc(179 * var(--u));top: calc(31 * var(--u));margin: 0;font-size: calc(12 * var(--u));font-weight: 400;line-height: calc(15 * var(--u));color: var(--inkt);white-space: nowrap}
.cijfers h2 strong{display: block;font-weight: 600}
.stappen{position: absolute;left: calc(179 * var(--u));top: calc(73 * var(--u));width: calc(187 * var(--u));list-style: none;margin: 0;padding: 0}
.stap{height: calc(20 * var(--u));border-radius: calc(5 * var(--u));background: #F5F5F5;display: flex;align-items: center;font-size: max(12px, calc(5.42 * var(--u)));color: #6E6E6E;white-space: nowrap}
.stap + .stap{margin-top: calc(7 * var(--u))}
.stap:nth-child(3){margin-top: calc(5 * var(--u))}
.stap b{height: 100%;flex: none;border-radius: calc(5 * var(--u));background: var(--groen);display: grid;place-items: center;font-weight: 500;color: var(--inkt);margin-right: calc(5.4 * var(--u))}
.stap:nth-child(1) b{width: calc(20 * var(--u));margin-right: calc(4.4 * var(--u))}
.stap:nth-child(2) b{width: calc(41 * var(--u))}
.stap:nth-child(3) b{width: calc(53 * var(--u))}
.stap:nth-child(4) b{width: calc(69 * var(--u))}
@media (max-width: 820px){.route{height: auto;padding: 44px 20px 48px}
.route__binnen{width: auto}
.route h2{position: static}
.route h2{font-size: clamp(24px, 7vw, 32px);line-height: 1.2}
.cijfers{height: auto;padding: 40px 20px 56px}
.cijfers__binnen{width: auto;display: flex;flex-direction: column;gap: 24px}
.cijfers__toestel,.cijfers h2,.stappen{position: static}
.cijfers h2{order: -1;white-space: normal;font-size: clamp(24px, 7vw, 32px);line-height: 1.2}
.cijfers__toestel{position: relative;left: auto;top: auto;align-self: center;width: min(58vw, 260px);height: auto;aspect-ratio: 116 / 217;border-radius: 28px;margin: 20px 0 28px}
.stappen{width: auto}
.stap{height: auto;min-height: 48px;border-radius: 12px;font-size: 15px;white-space: normal;align-items: stretch}
.stap + .stap,.stap:nth-child(3){margin-top: 10px}
.stap b{width: auto !important;min-width: 56px;height: auto;padding: 0 14px;border-radius: 12px;margin-right: 0 !important;font-size: 14px;white-space: nowrap}
.stap span{padding: 13px 14px;line-height: 1.4}
}
.vragenkaart{position: absolute;left: calc(187 * var(--u));top: calc(16 * var(--u));width: calc(179 * var(--u));min-height: calc(199 * var(--u));border-radius: calc(13 * var(--u));background: #fff;padding: calc(10 * var(--u)) calc(13 * var(--u)) calc(10 * var(--u)) calc(15 * var(--u))}
.vragenkaart__balk{height: calc(3 * var(--u));width: calc(151 * var(--u));border-radius: 999px;background: rgba(217,217,217,.47);overflow: hidden}
.vragenkaart__balk span{display: block;height: 100%;width: calc(61 * var(--u));border-radius: inherit;background: var(--groen);transition: width .3s ease}
.vragenkaart fieldset{border: 0;margin: 0;padding: 0;min-width: 0}
.vragenkaart legend{float: left;width: 100%;padding: 0;margin: calc(4.3 * var(--u)) 0 calc(10.8 * var(--u)) calc(1 * var(--u));font-size: calc(10 * var(--u));font-weight: 600;color: var(--inkt)}
.keuze{position: relative;clear: both;display: flex;align-items: center;width: calc(151 * var(--u));height: calc(26 * var(--u));padding-left: calc(18.7 * var(--u));border: 1px solid rgba(118,118,118,.55);border-radius: calc(5.9 * var(--u));cursor: pointer;font-size: calc(8 * var(--u));font-weight: 500;color: #404040;transition: border-color .15s, background .15s}
.keuze + .keuze{margin-top: calc(5 * var(--u))}
.keuze:hover{border-color: #404040}
.keuze input{position: absolute;opacity: 0;pointer-events: none}
.keuze::before{content: "";position: absolute;left: calc(6 * var(--u));top: 50%;translate: 0 -50%;width: calc(6.8 * var(--u));height: calc(6.8 * var(--u));border-radius: 50%;border: 1px solid rgba(0,0,0,.37);box-sizing: border-box;transition: background .15s, box-shadow .15s}
.keuze:has(input:checked){border-color: var(--groen);background: rgba(87,226,127,.08)}
.keuze:has(input:checked)::before{border-color: #000;background: var(--groen);box-shadow: inset 0 0 0 calc(1.2 * var(--u)) #fff}
.keuze:has(input:focus-visible){outline: 2px solid var(--groen);outline-offset: 2px}
.vragenkaart__volgende{margin-top: calc(7.9 * var(--u));height: calc(21 * var(--u));width: calc(56 * var(--u));padding: calc(.6 * var(--u)) 0 0;font-size: calc(7.16 * var(--u));font-weight: 600}
.vragenkaart__volgende:disabled{opacity: .45;cursor: default}
.vragenkaart__volgende:disabled:hover{background: var(--groen)}
.vragenkaart__klaar{display: grid;gap: calc(6 * var(--u));margin-top: calc(4.8 * var(--u))}
.vragenkaart__klaar h3{margin: 0;font-size: calc(10 * var(--u));font-weight: 600}
.vragenkaart__klaar p{margin: 0;font-size: calc(7 * var(--u));line-height: calc(10 * var(--u));color: #404040}
.vragenkaart__klaar ul{list-style: none;margin: 0;padding: 0;display: grid;gap: calc(3 * var(--u));font-size: calc(7 * var(--u));color: #404040}
.vragenkaart__klaar li{display: flex;justify-content: space-between;gap: calc(6 * var(--u));padding: calc(4 * var(--u)) calc(6 * var(--u));border-radius: calc(5 * var(--u));background: #F7F7F7}
.vragenkaart__klaar li b{font-weight: 500;color: var(--inkt);text-align: right;white-space: nowrap}
.vragenkaart__knoppen{display: flex;align-items: center;gap: calc(8 * var(--u));margin-top: calc(2 * var(--u))}
.vragenkaart__knoppen .pil{height: calc(21 * var(--u));padding: 0 calc(10 * var(--u));font-size: calc(7.16 * var(--u))}
.vragenkaart__opnieuw{border: 0;background: none;padding: 0;cursor: pointer;font: inherit;font-size: calc(7 * var(--u));color: #404040;text-decoration: underline}
@media (max-width: 820px){.vragenkaart{position: static}
.vragenkaart{width: auto;min-height: 0;border-radius: 20px;padding: 20px}
.vragenkaart__balk{width: 100%;height: 6px}
.vragenkaart__balk span{width: 40%}
.vragenkaart legend{margin: 18px 0 14px;font-size: 21px}
.keuze{width: 100%;height: 56px;padding-left: 46px;border-radius: 12px;font-size: 16px}
.keuze + .keuze{margin-top: 10px}
.keuze::before{left: 16px;width: 18px;height: 18px}
.keuze:has(input:checked)::before{box-shadow: inset 0 0 0 3px #fff}
.vragenkaart__volgende{margin-top: 16px;width: auto;height: 50px;padding: 0 32px;font-size: 16px}
.vragenkaart__klaar{gap: 12px;margin-top: 18px}
.vragenkaart__klaar h3{font-size: 21px}
.vragenkaart__klaar p,.vragenkaart__klaar ul,.vragenkaart__opnieuw{font-size: 16px;line-height: 1.45}
.vragenkaart__klaar ul{gap: 8px}
.vragenkaart__klaar li{padding: 10px 14px;border-radius: 10px}
.vragenkaart__knoppen{flex-wrap: wrap;gap: 16px}
.vragenkaart__knoppen .pil{height: 50px;padding: 0 24px;font-size: 16px}
}
.situatie{position: relative;isolation: isolate;overflow: hidden;color: #fff;background: #2a2420;height: max(520px, min(66.67vw, 100svh))}
.situatie > img{position: absolute;inset: 0;z-index: -2;width: 100%;height: 100%;object-fit: cover;object-position: 50% 30%}
.situatie::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 62%), linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0) 55%)}
.situatie__binnen{position: relative;width: calc(391 * var(--u));height: 100%;margin: 0 auto}
.situatie__tekst{position: absolute;left: calc(25 * var(--u));bottom: calc(28 * var(--u));max-width: calc(210 * var(--u))}
.situatie h2{margin: 0;font-size: calc(24 * var(--u));font-weight: 500;line-height: 1.04;letter-spacing: -.01em;text-wrap: balance}
.situatie p{margin: calc(8 * var(--u)) 0 0;font-size: calc(9 * var(--u));line-height: 1.35;color: rgba(255,255,255,.92)}
.situatie__knop{margin-top: calc(14 * var(--u));height: calc(24 * var(--u));padding: 0 calc(18 * var(--u));gap: calc(6 * var(--u));font-size: calc(9 * var(--u));font-weight: 700;box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.25)}
.situatie__knop svg{width: calc(9 * var(--u));height: calc(9 * var(--u));transition: transform .2s}
.situatie__knop:hover svg{transform: translateX(calc(1.5 * var(--u)))}
@media (max-width: 820px){.situatie{height: auto;min-height: min(100svh, 760px);display: flex}
.situatie > img{object-position: 33% 30%}
.situatie::before{background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,0) 66%)}
.situatie__binnen{width: auto;height: auto;flex: 1;display: flex;align-items: flex-end;padding: 0 20px 36px}
.situatie__tekst{position: static;max-width: 34em}
.situatie h2{font-size: clamp(32px, 9.4vw, 48px)}
.situatie p{margin-top: 12px;font-size: 18px}
.situatie__knop{margin-top: 22px;width: 100%;height: 56px;padding: 0 24px;gap: 10px;font-size: 17px}
.situatie__knop svg{width: 18px;height: 18px}
}
.plan{border-radius: calc(13 * var(--u));background: #fff;padding: calc(14 * var(--u));box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.06)}
.plan__stap{display: flex;justify-content: space-between;margin: 0 0 calc(4 * var(--u));font-size: max(12px, calc(6 * var(--u)));color: #6E6E6E}
.plan__balk{height: calc(3 * var(--u));border-radius: 999px;background: rgba(217,217,217,.47);overflow: hidden;margin-bottom: calc(10 * var(--u))}
.plan__balk span{display: block;height: 100%;width: 50%;border-radius: inherit;background: var(--groen);transition: width .3s ease}
.plan h3{margin: 0 0 calc(7 * var(--u));font-size: calc(10 * var(--u));font-weight: 600;color: var(--inkt)}
.plan__veld{display: block}
.plan__veld + .plan__veld{margin-top: calc(6 * var(--u))}
.plan__veld span{display: block;margin-bottom: calc(2.5 * var(--u));font-size: max(12px, calc(6 * var(--u)));font-weight: 500;color: #404040}
.plan input{width: 100%;height: calc(24 * var(--u));padding: 0 calc(9 * var(--u));border: 1px solid #E3E3E3;border-radius: calc(8 * var(--u));background: #F9F9F9;font: 400 max(16px, calc(7.5 * var(--u))) Lufga, system-ui, sans-serif;color: var(--inkt);outline: none;transition: border-color .15s, background .15s}
.plan input::placeholder{color: #9A9A9A}
.plan input:focus{border-color: var(--groen);background: #fff;box-shadow: 0 0 0 calc(2 * var(--u)) rgba(87,226,127,.25)}
.plan input[aria-invalid="true"]{border-color: #C2410C}
.plan__hulp{margin: calc(4 * var(--u)) 0 0;font-size: max(12px, calc(6 * var(--u)));line-height: 1.4;color: #6E6E6E}
.plan__fout{margin: calc(4 * var(--u)) 0 0;font-size: max(12px, calc(6 * var(--u)));color: #B4320A}
.plan__knop{width: 100%;height: calc(24 * var(--u));margin-top: calc(10 * var(--u));font-size: calc(7.5 * var(--u));font-weight: 700}
.plan__terug{display: block;margin: calc(6 * var(--u)) auto 0;border: 0;background: none;cursor: pointer;font: inherit;font-size: max(12px, calc(6.5 * var(--u)));color: #404040;text-decoration: underline;text-underline-offset: 2px}
.plan__klaar{text-align: center;padding: calc(8 * var(--u)) 0}
.plan__klaar b{display: grid;place-items: center;width: calc(26 * var(--u));height: calc(26 * var(--u));margin: 0 auto calc(8 * var(--u));border-radius: 50%;background: var(--groen)}
.plan__klaar b svg{width: calc(12 * var(--u));height: calc(12 * var(--u))}
.plan__klaar p{margin: calc(4 * var(--u)) 0 0;font-size: calc(7.5 * var(--u));line-height: calc(11 * var(--u));color: #404040}
@media (max-width: 820px){.plan{border-radius: 20px;padding: 22px 20px}
.plan__stap{margin-bottom: 8px;font-size: 13px}
.plan__balk{height: 6px;margin-bottom: 18px}
.plan h3{margin-bottom: 14px;font-size: 21px}
.plan__veld + .plan__veld{margin-top: 12px}
.plan__veld span{margin-bottom: 6px;font-size: 14px}
.plan input{height: 52px;padding: 0 16px;border-radius: 12px;font-size: 16px}
.plan input:focus{box-shadow: 0 0 0 4px rgba(87,226,127,.25)}
.plan__hulp,.plan__fout{margin-top: 8px;font-size: 14px}
.plan__knop{height: 54px;margin-top: 18px;font-size: 17px}
.plan__terug{margin-top: 14px;font-size: 15px}
.plan__klaar b{width: 56px;height: 56px;margin-bottom: 14px}
.plan__klaar b svg{width: 26px;height: 26px}
.plan__klaar p{margin-top: 8px;font-size: 16px;line-height: 1.5}
}
.faq{padding: calc(28 * var(--u)) 0 calc(36 * var(--u));background: #fff}
.faq__binnen{width: calc(391 * var(--u));margin: 0 auto;padding: 0 calc(25 * var(--u));display: grid;grid-template-columns: calc(150 * var(--u)) calc(179 * var(--u));justify-content: space-between;align-items: start}
.faq h2{margin: 0;font-size: calc(12 * var(--u));font-weight: 500;color: var(--inkt)}
.faq__intro{margin: calc(6 * var(--u)) 0 calc(12 * var(--u));font-size: calc(8 * var(--u));line-height: calc(11 * var(--u));color: #272727}
.faq__lijst{list-style: none;margin: 0;padding: 0;display: grid;gap: calc(4 * var(--u))}
.faq__vraag{width: 100%;display: flex;align-items: center;gap: calc(6 * var(--u));padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));border: 1px solid transparent;border-radius: calc(8 * var(--u));background: #F4F4F4;cursor: pointer;text-align: left;font: 500 calc(7.5 * var(--u))/calc(10 * var(--u)) Lufga, system-ui, sans-serif;color: var(--inkt);transition: border-color .15s, box-shadow .15s}
.faq__vraag:hover{border-color: rgba(0,0,0,.15)}
.faq__vraag[aria-expanded="true"]{background: #fff;border-color: var(--groen);box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.06)}
.faq__vraag span:last-child{flex: 1}
.faq__vraag span:last-child::after{content: "";float: right;width: calc(4 * var(--u));height: calc(4 * var(--u));margin: calc(3 * var(--u)) 0 0 calc(4 * var(--u));border-right: 1.5px solid #6E6E6E;border-bottom: 1.5px solid #6E6E6E;rotate: -45deg;transition: rotate .2s}
.faq__vraag[aria-expanded="true"] span:last-child::after{border-color: var(--groen)}
.faq__antwoord{position: sticky;top: calc(16 * var(--u));border-radius: calc(13 * var(--u));background: #F4F4F4;overflow: hidden}
.faq__media{position: relative;aspect-ratio: 16 / 10;background: #1a1a1a}
.faq__media img,.faq__media video{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;display: block}
.faq__media video{background: #000}
.faq__speel{position: absolute;left: 50%;top: 50%;translate: -50% -50%;width: calc(22 * var(--u));height: calc(22 * var(--u));border: 0;border-radius: 50%;background: var(--groen);cursor: pointer;display: grid;place-items: center;transition: transform .2s}
.faq__speel:hover{transform: scale(1.06)}
.faq__speel svg{width: calc(6.5 * var(--u));height: calc(7.4 * var(--u));margin-left: calc(1.6 * var(--u))}
.faq__melding{position: absolute;left: 50%;top: calc(50% + 17 * var(--u));translate: -50% 0;padding: calc(2 * var(--u)) calc(6 * var(--u));border-radius: 999px;background: rgba(0,0,0,.62);color: #fff;font-size: max(12px, calc(6 * var(--u)));font-weight: 500;white-space: nowrap;animation: faq-melding 2.6s ease forwards;pointer-events: none}
@keyframes faq-melding{0%, 80%{opacity: 1}
100%{opacity: 0}
}
.faq__duur{position: absolute;right: calc(6 * var(--u));bottom: calc(6 * var(--u));padding: calc(1.5 * var(--u)) calc(4 * var(--u));border-radius: calc(3 * var(--u));background: rgba(0,0,0,.58);color: #fff;font-size: max(12px, calc(5 * var(--u)));font-weight: 600}
.faq__tekst{padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u))}
.faq__tekst h3{margin: 0 0 calc(4 * var(--u));font-size: calc(9 * var(--u));font-weight: 600;line-height: calc(11 * var(--u))}
.faq__tekst p{margin: 0;font-size: max(13px, calc(7 * var(--u)));line-height: calc(10.5 * var(--u));color: #404040}
.faq__tekst p a{color: var(--inkt);text-decoration: underline;text-underline-offset: 2px}
.faq__verder{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: calc(6 * var(--u)) calc(8 * var(--u));margin-top: calc(10 * var(--u))}
.faq__verder .pil{height: calc(21 * var(--u));padding: 0 calc(10 * var(--u));font-size: calc(7.16 * var(--u))}
@media (max-width: 820px){.faq{padding: 44px 20px 56px}
.faq__binnen{width: auto;padding: 0;grid-template-columns: 1fr}
.faq h2{font-size: clamp(24px, 7vw, 32px)}
.faq__intro{margin: 10px 0 20px;font-size: 17px;line-height: 1.45}
.faq__lijst{gap: 10px}
.faq__vraag{gap: 14px;padding: 10px 16px 10px 10px;border-radius: 14px;font-size: 16px;line-height: 1.35}
.faq__vraag span:last-child::after{width: 9px;height: 9px;margin: 5px 0 0 10px;rotate: 45deg}
.faq__vraag[aria-expanded="true"] span:last-child::after{rotate: 225deg}
.faq__antwoord{position: static;margin-top: 10px;border-radius: 16px}
.faq__speel{width: 56px;height: 56px}
.faq__speel svg{width: 16px;height: 18px;margin-left: 4px}
.faq__melding{top: calc(50% + 38px);padding: 5px 12px;font-size: 14px}
.faq__duur{right: 10px;bottom: 10px;padding: 3px 8px;border-radius: 6px}
.faq__tekst{padding: 16px 18px 18px}
.faq__tekst h3{margin-bottom: 6px;font-size: 18px;line-height: 1.3}
.faq__tekst p{font-size: 16px;line-height: 1.55}
.faq__verder{flex-wrap: wrap;margin-top: 16px}
.faq__verder .pil{height: 46px;padding: 0 20px;font-size: 15px}
}
@media (max-width: 440px){.moment{min-height: 0;display: grid;grid-template-columns: 36px 1fr;column-gap: 14px;align-items: start}
.moment svg{grid-row: 1 / 3}
.moment h3{margin: 6px 0 4px}
}
@media (prefers-reduced-motion: reduce){*{transition: none !important}
}
:root{--marge: clamp(20px, 2.78vw, 40px);--goot: 20px;--pagina: min(100vw, 1600px);--kol: calc((var(--pagina) - 2 * var(--marge) - 11 * var(--goot)) / 12);--kant: calc(var(--kol) + var(--goot));--vlak: #F5F5F5;--hoek: 10px;--tussen: clamp(16px, 2.2vw, 32px);--sectie-y: clamp(56px, 7.5vw, 112px);--t-display: clamp(48px, 5.83vw, 84px);--t-kop: clamp(34px, 4.24vw, 61px);--t-groot: clamp(22px, 2.15vw, 31px)}
body{font-size: 14px;line-height: 1.5}
.pil{height: 42px;padding: 0 20px;gap: 10px;border-radius: 6px;font-size: 13px;font-weight: 600;letter-spacing: .01em}
.pil::after{content: "";flex: none;width: 9px;height: 9px;background: currentColor;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}
.situatie__knop svg{display: none}
@media (min-width: 821px){.nav{height: 84px}
.nav__binnen{width: var(--pagina);height: 100%;margin: 0 auto;padding: 0 var(--marge);display: flex;align-items: center;gap: 24px}
.nav__merk{position: static;height: 30px}
.nav__links{position: static;height: auto;display: flex;gap: 44px;margin: 0 auto}
.nav__links li{position: static;translate: none}
.nav__links a{font-size: 16px;font-weight: 500;color: var(--inkt)}
.nav .pil{position: static;translate: none;width: auto;height: 42px;padding: 0 18px;font-size: 13px}
.duo{position: static;translate: none;height: 42px;border-radius: 6px}
.duo > *{width: 42px}
.duo__app svg{width: 18px;height: 17px}
.duo__menu span,.duo__menu span::after{width: 16px;height: 1.5px}
.duo__menu span{transform: translateY(-3px)}
.duo__menu span::after{transform: translateY(5px)}
.lade{top: 84px;right: var(--marge)}
.hero__binnen{width: var(--pagina)}
.hero__foto{left: 0;right: 0;top: 0;width: 100%;height: 100%;object-fit: cover;object-position: 0% 35%}
.vlek{display: none}
.hero::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background: radial-gradient(32% 42% at 24% 72%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,0) 100%)}
.tekst{position: absolute;left: calc(var(--marge) + var(--kant));bottom: clamp(40px, 6vw, 96px);display: flex;flex-direction: column;align-items: flex-start}
.tekst h1{position: static;font-size: var(--t-display);line-height: .98;letter-spacing: -.02em}
.advies{left: auto;right: calc(var(--marge) + var(--kant));bottom: clamp(40px, 6vw, 96px);width: calc(3 * var(--kol) + 2 * var(--goot));min-width: 300px;height: auto;padding: 16px;border-radius: var(--hoek);display: grid;gap: 10px}
.advies input{position: static;width: 100%;height: 42px;padding: 0 14px;border-radius: 6px;font: 400 14px Lufga, system-ui, sans-serif}
.advies .pil{position: static;width: 100%;height: 42px;padding: 0 18px;font-size: 13px}
.vraag,.route,.faq{width: calc(var(--pagina) - 2 * var(--marge));height: auto;margin: var(--tussen) auto 0;border-radius: var(--hoek);background: var(--vlak);padding: var(--sectie-y) var(--kant)}
.dag,.gesprek,.geregeld,.cijfers{height: auto;padding: var(--sectie-y) 0}
.dag__binnen,.gesprek__binnen,.cijfers__binnen{width: var(--pagina);height: auto;margin: 0 auto;padding: 0 calc(var(--marge) + var(--kant))}
.route__binnen,.faq__binnen{width: auto;height: auto;margin: 0;padding: 0}
.vraag{display: grid;grid-template-columns: repeat(10, 1fr);column-gap: var(--goot);align-items: center}
.reel{grid-column: 1 / span 3}
.vraag__tekst{grid-column: 5 / span 6}
.vraag h2{display: inline-flex;align-items: center;height: 30px;padding: 0 12px;border-radius: 6px;background: #fff;max-width: none;font-size: 12px;font-weight: 600;letter-spacing: .01em;line-height: 1}
.vraag blockquote{margin: 24px 0 0;max-width: none;font-size: var(--t-kop);line-height: 1;letter-spacing: -.02em;color: var(--inkt)}
.vraag__sub{margin-top: 24px;font-size: 14px}
.dag::before{display: none}
.dag__binnen{display: grid;grid-template-columns: 1fr auto;row-gap: 40px;align-items: center}
.dag h2{position: static;grid-column: 1 / -1;font-size: var(--t-kop);line-height: 1;letter-spacing: -.02em;white-space: normal}
.dag h2 br{display: none}
.dag__baan{position: static;grid-column: 1 / -1;gap: var(--goot);padding: 0}
.dag__kaart{width: calc((100% - 3 * var(--goot)) / 4);padding: 10px 0 0 8px}
.dag__kaart img{width: 100%;height: auto;aspect-ratio: 82 / 124;border-radius: var(--hoek)}
.dag__label{position: static;font-size: 14px}
.dag__knoppen{position: static;gap: 10px}
.dag__knoppen button{width: 42px;height: 42px;border-width: 1px}
.dag__knoppen svg{width: 12px;height: 12px}
.gesprek__binnen{display: flex;flex-direction: column;align-items: center;gap: 32px}
.gesprek__tekst{position: static;padding: 0;font-size: var(--t-groot);line-height: 1.25}
.moment{flex: 1;width: auto;height: auto;min-height: 300px;border-radius: var(--hoek);padding: 24px}
.moment svg{width: 40px;height: 40px}
.moment h3{margin: 72px 0 8px;font-size: 20px}
.moment p{font-size: 14px;line-height: 1.5}
.bewijs__beeld{--b: calc((5 * var(--kol) + 4 * var(--goot)) / 218);position: relative;left: auto;top: auto;grid-column: 6 / span 5;grid-row: 1 / span 2}
.geregeld h2{position: static;grid-column: 1 / span 5;width: auto;font-size: var(--t-display);line-height: .98;letter-spacing: -.02em}
.geregeld h2 br{display: none}
.route h2{position: static;font-size: var(--t-display);line-height: .98;letter-spacing: -.02em}
.cijfers__binnen{display: grid;grid-template-columns: repeat(10, 1fr);column-gap: var(--goot);row-gap: 28px;align-items: start}
.cijfers__toestel{position: relative;left: auto;top: auto;grid-column: 1 / span 3;grid-row: 1 / span 3;width: 100%;height: auto;aspect-ratio: 116 / 217;border-radius: 24px}
.cijfers h2{position: static;grid-column: 5 / span 6;font-size: var(--t-kop);line-height: 1;letter-spacing: -.02em;white-space: normal}
.stappen{position: static;grid-column: 5 / span 6;width: auto}
.stap{height: auto;min-height: 52px;border-radius: var(--hoek);font-size: 14px;white-space: normal;align-items: stretch}
.stap + .stap,.stap:nth-child(3){margin-top: 10px}
.stap b,.stap:nth-child(n) b{width: auto;min-width: 104px;height: auto;padding: 0 16px;margin-right: 0;border-radius: var(--hoek);font-size: 12px;font-weight: 600;white-space: nowrap}
.stap span{padding: 15px 18px;line-height: 1.4}
.vragenkaart{position: static;grid-column: 6 / span 5;grid-row: 1 / span 4;width: auto;min-height: 0;border-radius: var(--hoek);padding: 32px}
.vragenkaart__balk{width: 100%;height: 6px}
.vragenkaart__balk span{width: 40.4%}
.vragenkaart legend{margin: 24px 0 16px;font-size: 24px}
.keuze{width: 100%;height: 52px;padding-left: 48px;border-radius: var(--hoek);font-size: 14px}
.keuze + .keuze{margin-top: 10px}
.keuze::before{left: 16px;width: 18px;height: 18px}
.keuze:has(input:checked)::before{box-shadow: inset 0 0 0 3px #fff}
.vragenkaart__volgende{margin-top: 20px;width: auto;height: 42px;padding: 0 18px;font-size: 13px}
.vragenkaart__klaar{gap: 12px;margin-top: 24px}
.vragenkaart__klaar h3{font-size: 24px}
.vragenkaart__klaar p,.vragenkaart__klaar ul,.vragenkaart__opnieuw{font-size: 14px;line-height: 1.5}
.vragenkaart__klaar ul{gap: 8px}
.vragenkaart__klaar li{padding: 12px 16px;border-radius: var(--hoek)}
.vragenkaart__knoppen{gap: 16px;margin-top: 4px}
.vragenkaart__knoppen .pil{height: 42px;padding: 0 18px;font-size: 13px}
.situatie__binnen{width: var(--pagina)}
.situatie__tekst{left: calc(var(--marge) + var(--kant));bottom: clamp(48px, 6vw, 96px);max-width: calc(6 * var(--kol) + 5 * var(--goot))}
.situatie h2{font-size: var(--t-display);line-height: .98;letter-spacing: -.02em}
.situatie p{margin-top: 20px;font-size: 14px}
.situatie__knop{margin-top: 32px;height: 42px;padding: 0 18px;font-size: 13px;box-shadow: none}
.plan{grid-column: 6 / span 5;border-radius: var(--hoek);padding: 32px}
.plan__stap{margin-bottom: 8px;font-size: 12px}
.plan__balk{height: 6px;margin-bottom: 20px}
.plan h3{margin-bottom: 16px;font-size: 24px}
.plan__veld + .plan__veld{margin-top: 12px}
.plan__veld span{margin-bottom: 6px;font-size: 12px;font-weight: 600}
.plan input{height: 42px;padding: 0 14px;border-radius: 6px;font-size: 14px}
.plan input:focus{box-shadow: 0 0 0 3px rgba(87,226,127,.25)}
.plan__hulp,.plan__fout{margin-top: 8px;font-size: 12px}
.plan__knop{height: 42px;margin-top: 20px;font-size: 13px}
.plan__terug{margin-top: 14px;font-size: 14px}
.plan__klaar b{width: 56px;height: 56px;margin-bottom: 16px}
.plan__klaar b svg{width: 24px;height: 24px}
.plan__klaar p{margin-top: 8px;font-size: 14px;line-height: 1.5}
.faq{margin-bottom: var(--tussen)}
.faq__binnen{grid-template-columns: repeat(10, 1fr);column-gap: var(--goot)}
.faq__binnen > div:first-child{grid-column: 1 / span 5;padding-right: var(--goot)}
.faq__antwoord{grid-column: 6 / span 5;top: 100px;border-radius: var(--hoek);background: #fff}
.faq h2{font-size: var(--t-display);line-height: .98;letter-spacing: -.02em}
.faq__intro{margin: 24px 0 32px;font-size: 14px;line-height: 1.5}
.faq__lijst{gap: 8px}
.faq__vraag{gap: 14px;padding: 8px 16px 8px 8px;border-radius: var(--hoek);background: #fff;font-size: 14px;line-height: 1.35}
.faq__vraag[aria-expanded="true"]{background: #fff}
.faq__vraag span:last-child::after{width: 8px;height: 8px;margin: 5px 0 0 12px}
.faq__speel{width: 64px;height: 64px}
.faq__speel svg{width: 18px;height: 20px;margin-left: 4px}
.faq__melding{top: calc(50% + 44px);padding: 6px 12px;font-size: 12px}
.faq__duur{right: 12px;bottom: 12px;padding: 4px 8px;border-radius: 6px;font-size: 12px}
.faq__tekst{padding: 24px}
.faq__tekst h3{margin-bottom: 8px;font-size: 20px;line-height: 1.3}
.faq__tekst p{font-size: 14px;line-height: 1.5}
.faq__verder{margin-top: 20px;gap: 12px 16px}
.faq__verder .pil{height: 42px;padding: 0 18px;font-size: 13px}
}
@media (min-width: 821px) and (max-width: 1079px){.hero::before{background: radial-gradient(42% 46% at 27% 72%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,0) 100%)}
.nav__links{display: none}
.nav__merk{margin-right: auto}
}
@media (max-width: 820px){:root{--t-display: clamp(34px, 11vw, 56px);--t-kop: clamp(28px, 8.4vw, 40px);--t-groot: clamp(20px, 6vw, 26px);--hoek: 12px}
.tekst h1,.geregeld h2,.route h2,.situatie h2,.faq h2{font-size: var(--t-display);line-height: .98;letter-spacing: -.02em}
h1,h2{overflow-wrap: break-word}
.tekst h1,.geregeld h2,.route h2,.situatie h2,.faq h2{hyphens: auto;-webkit-hyphens: auto}
.dag h2,.cijfers h2,.vraag blockquote{font-size: var(--t-kop);line-height: 1.02;letter-spacing: -.02em}
.gesprek__tekst{font-size: var(--t-groot);line-height: 1.25}
.vraag h2{display: inline-flex;align-items: center;height: 30px;padding: 0 12px;border-radius: 6px;background: #fff;font-size: 12px;font-weight: 600}
.vraag__sub,.moment p,.stap,.faq__intro,.faq__tekst p,.situatie p,.keuze,.plan input,.dag__label{font-size: 14px;line-height: 1.5}
.vraag,.route,.faq{margin: var(--tussen) 20px 0;border-radius: var(--hoek);background: var(--vlak)}
.faq{margin-bottom: var(--tussen)}
.vraag{padding: 48px 20px}
.route,.faq{padding: 44px 20px 48px}
.faq__vraag,.faq__antwoord{background: #fff}
.plan,.vragenkaart{border-radius: var(--hoek)}
.pil,.advies .pil,.plan__knop,.situatie__knop,.vragenkaart__volgende,.faq__verder .pil,.vragenkaart__knoppen .pil{height: 46px;border-radius: 6px;font-size: 14px}
.advies input,.plan input{height: 46px;border-radius: 6px}
}
:root{--lees: 17px;--label: 14px;--knoptekst: 15px;--knop: 48px}
@media (max-width: 820px){:root{--lees: 16px}
}
.vraag__sub,.dag__label,.moment p,.stap,.keuze,.situatie p,.faq__intro,.faq__vraag,.faq__tekst p,.plan input,.advies input,.vragenkaart__klaar p,.vragenkaart__klaar ul,.plan__klaar p,.plan__terug,.vragenkaart__opnieuw{font-size: var(--lees);line-height: 1.55}
.faq__vraag,.keuze,.plan input,.advies input{line-height: 1.3}
.vraag h2,.stap b,.plan__veld span,.plan__hulp,.plan__fout,.plan__stap,.faq__duur,.faq__melding{font-size: var(--label)}
.pil,.nav .pil,.advies .pil,.situatie__knop,.vragenkaart__volgende,.vragenkaart__knoppen .pil,.plan__knop,.faq__verder .pil{height: var(--knop);font-size: var(--knoptekst);padding: 0 22px}
.plan__knop,.advies .pil{padding: 0 22px}
.plan input,.advies input{height: var(--knop)}
.vraag h2{height: 36px;padding: 0 14px}
.stap{min-height: 58px}
.stap b{min-width: 124px}
.stap:nth-child(n) b{font-size: var(--label)}
.route__label{display: inline-flex;align-items: center;height: 36px;margin: 0 0 24px;padding: 0 14px;border-radius: 6px;background: #fff;font-size: var(--label);font-weight: 600}
.route__intro{margin: 0;font-size: var(--lees);line-height: 1.55;color: #383838}
@media (min-width: 821px){.route__kop{display: grid;grid-template-columns: repeat(10, 1fr);column-gap: var(--goot);align-items: end}
.route__kop > div{grid-column: 1 / span 7}
.route__intro{grid-column: 8 / span 3;padding-bottom: 8px}
}
@media (max-width: 820px){.route__intro{margin-top: 16px}
}
.vraag__acties{display: flex;flex-wrap: wrap;align-items: center;gap: 16px 28px;margin-top: 36px}
.vraag__speel::after{width: 10px;height: 11px;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'%3E%3Cpath d='M1 1v9l8-4.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 11'%3E%3Cpath d='M1 1v9l8-4.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat}
.vraag__sub{font-size: var(--lees);color: #383838}
.reel::before{content: "";position: absolute;z-index: 0;left: -42%;right: -42%;top: 4%;bottom: 0;border-radius: 50%;pointer-events: none;background: radial-gradient(closest-side, rgba(87,226,127,.55) 35%, rgba(87,226,127,.22) 62%, rgba(87,226,127,0) 100%)}
.reel__toestel{z-index: 1}
:root{--rand-in: calc((100vw - var(--pagina)) / 2 + var(--marge));--band-y: clamp(64px, 8.3vw, 120px);--deel-y: clamp(24px, 3.3vw, 48px)}
.vraag,.route,.faq,.dag,.gesprek,.geregeld,.cijfers{width: auto !important;margin: 0 !important;border-radius: 0 !important}
.vraag,.route{background: var(--vlak) !important}
.dag,.gesprek,.geregeld,.cijfers,.faq{background: #fff !important}
@media (min-width: 821px){.vraag,.route,.faq{padding: var(--band-y) var(--rand-in) !important}
.dag__binnen,.gesprek__binnen,.cijfers__binnen{width: var(--pagina) !important;padding: 0 var(--marge) !important}
.dag{padding: var(--band-y) 0 var(--deel-y) !important}
.gesprek{padding: var(--deel-y) 0 var(--band-y) !important}
.geregeld{padding: var(--deel-y) 0 var(--band-y) !important}
.cijfers{padding: var(--deel-y) 0 var(--band-y) !important}
.faq{margin-bottom: 0 !important}
.tekst,.situatie__tekst{left: var(--rand-in) !important}
.advies{right: var(--rand-in) !important}
.hero__binnen,.situatie__binnen{width: 100% !important}
.reel{grid-column: 1 / span 4 !important;max-width: 300px;justify-self: center}
.cijfers__toestel{grid-column: 1 / span 4 !important;max-width: 300px;justify-self: center}
.bewijs__beeld{--b: calc(((var(--pagina) - 2 * var(--marge) - 9 * var(--goot)) / 10 * 5 + 4 * var(--goot)) / 218 * .82) !important;justify-self: center}
}
.plan{box-shadow: none}
.faq__vraag,.faq__vraag[aria-expanded="true"]{background: var(--vlak) !important}
.faq__vraag[aria-expanded="true"]{background: #fff !important}
.faq__antwoord{background: var(--vlak) !important}
@media (max-width: 820px){.vraag,.route,.faq{padding: 64px 20px !important}
.dag{padding: 64px 0 24px !important}
.gesprek{padding: 24px 20px 64px !important}
.geregeld{padding: 24px 20px 64px !important}
.cijfers{padding: 24px 20px 64px !important}
}
:root{--vlak: #F5F5F5;--hoek: 16px}
.vraag,.route{border-radius: 32px !important}
@media (max-width: 820px){.vraag,.route{border-radius: 24px !important}
}
.pil,.advies input,.plan input,.vraag h2,.route__label,.duo{border-radius: 10px}
.advies,.plan,.vragenkaart,.stap,.stap b,.keuze,.faq__vraag,.faq__antwoord,.moment,.dag__kaart img{border-radius: 16px}
.faq__lijst{gap: 0 !important;border-top: 1px solid #E3E3E3}
.faq__lijst li{border-bottom: 1px solid #E3E3E3}
.faq__vraag,.faq__vraag[aria-expanded="true"]{background: none !important;border: 0 !important;box-shadow: none !important;border-radius: 0 !important;padding: 20px 4px !important;gap: 16px !important;font-size: var(--lees) !important;line-height: 1.4 !important;color: #474747;font-weight: 400;transition: color .15s}
.faq__vraag:hover{color: var(--inkt)}
.faq__vraag[aria-expanded="true"]{color: var(--inkt);font-weight: 500}
.faq__vraag span:last-child::after{border-color: #9A9A9A}
.faq__vraag[aria-expanded="true"] span:last-child::after{border-color: #000}
.faq__vraag:focus-visible{outline: 2px solid #000;outline-offset: -2px}
.faq__vraag span:last-child{display: flex;align-items: center;justify-content: space-between;gap: 16px}
.faq__vraag span:last-child::after{float: none;flex: none;margin: 0 4px 0 0 !important}
.voet{background: #000;color: #fff;padding: clamp(56px, 7vw, 96px) var(--rand-in) 32px}
.voet__binnen{display: grid;grid-template-columns: 2fr 1fr 1fr;gap: 48px var(--goot)}
.voet .logo{height: 32px;color: #fff}
.voet__merk p{max-width: 26em;margin: 20px 0 28px;font-size: var(--lees);line-height: 1.55;color: rgba(255,255,255,.75)}
.voet__kolom{display: flex;flex-direction: column;gap: 12px}
.voet__kolom h2{margin: 0 0 6px;font-size: var(--label);font-weight: 600 !important;color: rgba(255,255,255,.6)}
.voet__kolom a{font-size: var(--lees);color: #fff;text-decoration: none;width: fit-content}
.voet__kolom a:hover{text-decoration: underline;text-decoration-color: var(--groen);text-underline-offset: 4px}
.voet__onder{margin: 56px 0 0;padding-top: 24px;border-top: 1px solid rgba(255,255,255,.14);font-size: var(--label);color: rgba(255,255,255,.6)}
@media (max-width: 820px){.voet{padding: 56px 20px 28px}
.voet__binnen{grid-template-columns: 1fr 1fr}
.voet__merk{grid-column: 1 / -1}
}
.reel::before{content: none !important}
@media (max-width: 820px){.reel{justify-self: start !important;max-width: 300px !important;translate: 6.63% 0}
}
@media (max-width: 420px){.reel{max-width: 270px !important}
}
@media (min-width: 821px){.reel{justify-self: start !important;max-width: min(360px, calc((100% + 20px) / 1.36)) !important;translate: 6.63% 0}
}
@media (max-width: 420px){.reel{max-width: min(270px, calc((100vw - 40px) / 1.17)) !important}
}
@media (max-width: 767px){html body .reel{justify-self: center !important;translate: -8px 0 !important}
}
@media (min-width: 821px){.hero{--hk: calc(var(--uk) * 1.12)}
.hero::before{content: "";position: absolute;inset: 0;z-index: -1;pointer-events: none;background: none !important}
.tekst::before{content: "";position: absolute;z-index: -1;inset: -110px -32px -110px -140px;pointer-events: none;border-radius: 160px;background: rgba(0,0,0,.3);filter: blur(64px)}
.tekst h1{text-shadow: 0 2px 24px rgba(0,0,0,.28)}
.tekst{bottom: calc(52 * var(--hk)) !important}
.tekst h1{font-size: calc(35 * var(--hk)) !important;line-height: 1.08 !important;letter-spacing: -.01em !important}
.advies{bottom: calc(52 * var(--hk)) !important;width: calc(123 * var(--hk)) !important;min-width: 0 !important;padding: calc(9 * var(--hk)) !important;gap: calc(6 * var(--hk)) !important;border-radius: calc(10 * var(--hk)) !important;background: #fff !important;-webkit-backdrop-filter: none;backdrop-filter: none}
.advies input{height: calc(20.6 * var(--hk)) !important;padding: 0 calc(10 * var(--hk)) !important;border-radius: calc(6 * var(--hk)) !important;background: #EFEFEF !important;font: 600 calc(6.86 * var(--hk)) Lufga, system-ui, sans-serif !important}
.advies .pil{height: calc(20.6 * var(--hk)) !important;font-size: calc(6.86 * var(--hk)) !important;font-weight: 700 !important}
}
@media (max-width: 820px){.tekst h1{font-size: clamp(48px, 14.5vw, 76px) !important}
}
@media (min-width: 821px){.dag__baan{margin-right: calc(-1 * var(--rand-in)) !important;padding-right: var(--rand-in) !important;scroll-padding-left: 0;cursor: grab;user-select: none;-webkit-user-select: none}
.dag__kaart{width: clamp(240px, 25vw, 380px) !important}
.dag__kaart:last-child{scroll-snap-align: start}
}
.dag__baan img{-webkit-user-drag: none;pointer-events: none}
.dag__baan.sleept{scroll-snap-type: none;scroll-behavior: auto;cursor: grabbing}
.dag__baan:focus-visible{outline: 2px solid #000;outline-offset: 4px;border-radius: 4px}
.dag::before{display: block !important;content: "";position: absolute;z-index: 0;top: 0;left: 0;right: 0;background: var(--vlak) !important}
.dag__binnen{position: relative;z-index: 1}
@media (min-width: 821px){.dag::before{height: auto !important;bottom: calc(var(--deel-y) + 42px + 40px + clamp(240px, 25vw, 380px) * 124 / 82 * .55);border-bottom-left-radius: clamp(56px, 9.4vw, 150px) !important}
}
.vraag{border-bottom-left-radius: 0 !important;border-bottom-right-radius: 0 !important}
@media (min-width: 821px){.dag{padding-top: var(--deel-y) !important}
}
@media (max-width: 820px){.dag{padding-top: 24px !important}
}
@media (max-width: 820px){.dag::before{height: auto !important;bottom: calc(24px + 44px + 24px + min(62vw, 250px) * 124 / 82 * .55);border-bottom-left-radius: 48px !important}
}
.hero__foto{filter: brightness(1.18) saturate(1.04)}
@media (max-width: 820px){.hero__binnen::before{background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.66) 46%, rgba(0,0,0,0) 72%) !important}
}
.dag__kaart{padding: 0 !important}
.dag__binnen{grid-template-columns: 1fr auto !important;column-gap: clamp(20px, 3vw, 40px)}
.dag__label{font-size: 15px !important;font-weight: 600 !important;color: var(--inkt) !important;white-space: nowrap}
.dag__knoppen{gap: 10px !important}
.dag__knoppen button{width: 44px !important;height: 44px !important;border: 1px solid #D6D6D6 !important;color: var(--inkt) !important;background: #fff !important;transition: background .15s, color .15s, border-color .15s, opacity .15s}
.dag__knoppen button:hover:not(:disabled){background: #000 !important;border-color: #000 !important;color: #fff !important}
.dag__knoppen button:disabled{opacity: .3}
.dag__knoppen button:focus-visible{outline: 2px solid #000;outline-offset: 3px}
.dag__knoppen svg{width: 12px !important;height: 12px !important}
@media (max-width: 820px){.dag__binnen{column-gap: 16px}
.dag__label{font-size: 15px !important}
}
@media (min-width: 821px){:root{--lees: 21px;--label: 17px;--knoptekst: 19px;--knop: 62px}
}
@media (max-width: 820px){:root{--lees: 18px;--label: 16px;--knoptekst: 17px;--knop: 54px}
}
@media (min-width: 821px){.moment h3,.faq__tekst h3{font-size: 24px !important}
.nav__links a{font-size: 17px !important}
}
@media (min-width: 821px){.nav{height: 104px !important}
.nav__merk{height: 36px !important}
.nav__links{gap: 52px !important}
.nav__links a{font-size: 20px !important;font-weight: 500 !important}
.duo{height: var(--knop) !important;border-radius: 10px}
.duo > *{width: var(--knop) !important}
.duo__app svg{width: 26px !important;height: 25px !important}
.duo__menu span,.duo__menu span::after{width: 22px !important;height: 2px !important}
.duo__menu span{transform: translateY(-4px)}
.duo__menu span::after{transform: translateY(6px)}
}
@media (min-width: 821px) and (max-width: 1180px){.nav__links{gap: 32px !important}
.nav__links a{font-size: 18px !important}
}
@media (max-width: 820px){.nav{height: 72px !important}
.nav__merk{height: 28px !important}
.duo{height: var(--knop) !important}
.duo > *{width: var(--knop) !important}
.duo__app svg{width: 22px !important;height: 21px !important}
.duo__menu span,.duo__menu span::after{width: 20px !important;height: 2px !important}
}
@media (min-width: 821px){.nav{height: 116px !important}
.nav__merk{height: 42px !important}
.nav__links{gap: 56px !important}
.nav__links a{font-size: 22px !important}
}
@media (min-width: 821px) and (max-width: 1180px){.nav__links{gap: 28px !important}
.nav__links a{font-size: 19px !important}
.nav__merk{height: 36px !important}
}
@media (max-width: 820px){.nav{height: 80px !important}
.nav__merk{height: 32px !important}
}
@media (max-width: 599px){.nav .pil{display: none !important}
}
.hero__foto{filter: none !important}
@media (max-width: 820px){.hero__foto{object-position: 50% 30% !important}
}
@media (min-width: 821px){.hero::before{background: linear-gradient(90deg, rgba(28,17,9,.78) 0%, rgba(28,17,9,.78) 32%, rgba(28,17,9,0) 46%) !important}
.tekst::before{content: none !important}
.tekst h1{font-size: min(calc(35 * var(--hk)), 112px) !important}
}
@media (max-width: 820px) and (max-height: 700px){.hero__binnen::before{background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.76) 68%, rgba(0,0,0,0) 96%) !important}
}
.hero__foto{scale: -1 1}
@media (min-width: 821px){.tekst{left: auto !important;right: var(--rand-in) !important}
.advies{right: auto !important;left: var(--rand-in) !important}
.hero__foto{left: -8% !important;right: auto !important;width: 108% !important}
.hero::before{background: linear-gradient(270deg, rgba(28,17,9,.78) 0%, rgba(28,17,9,.78) 32%, rgba(28,17,9,0) 46%) !important}
}
@media (min-width: 821px){.hero__foto{scale: -1 1;left: 0 !important;right: 0 !important;width: 100% !important}
.tekst{right: auto !important;left: var(--rand-in) !important}
.advies{left: auto !important;right: var(--rand-in) !important}
.hero::before,.tekst::before{background: none !important;content: none !important}
.tekst h1{text-shadow: none !important}
}
@media (min-width: 821px){.nav{height: 128px !important}
.nav__merk{height: 48px !important}
.nav__links{gap: 60px !important}
.nav__links a{font-size: 24px !important}
.nav .pil{height: 66px !important;font-size: 20px !important;padding: 0 26px !important}
.duo{height: 66px !important}
.duo > *{width: 66px !important}
.duo__app svg{width: 28px !important;height: 27px !important}
}
@media (min-width: 821px) and (max-width: 1180px){.nav__links{gap: 28px !important}
.nav__links a{font-size: 20px !important}
.nav__merk{height: 40px !important}
.nav .pil{font-size: 18px !important;padding: 0 20px !important}
}
.advies{background: rgba(255,255,255,.9) !important;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px)}
@media (min-width: 821px){.advies{grid-template-rows: 1fr auto auto;align-content: stretch}
}
@media (min-width: 1600px){.advies{width: 418px !important;padding: 31px !important;gap: 20px !important;border-radius: 34px !important}
.advies input,.advies .pil{height: 70px !important;font-size: 23px !important}
.advies input{padding: 0 34px !important;border-radius: 20px !important}
}
@media (min-width: 821px){.advies{width: calc(140 * var(--hk)) !important}
}
@media (min-width: 1600px){.advies{width: 476px !important}
}
.vraag h2,.route__label{border-radius: 999px !important;padding-left: 18px !important;padding-right: 18px !important}
.bewijsbalk{background: #F1F1F1;padding: var(--deel-y, 32px) var(--rand-in, 20px) 0}
.bewijsbalk__binnen{display: grid;grid-template-columns: minmax(0, 1fr) 360px;gap: 16px}
.bewijsbalk__cijfers,.bewijsbalk__review{margin: 0;background: #fff;border-radius: 24px}
.bewijsbalk__cijfers{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));padding: 28px 0}
.bewijsbalk__cijfers > div{padding: 4px 32px;border-left: 1px solid #E6E6E6;min-width: 0}
.bewijsbalk__cijfers > div:first-child{border-left: 0}
.bewijsbalk dt{display: flex;align-items: flex-start;gap: 6px;line-height: 1}
.bewijsbalk dt span{font-size: 48px;font-weight: 500;letter-spacing: -.02em;color: var(--inkt)}
.bewijsbalk dt sup{font-size: 16px;font-weight: 500;color: #474747;top: 0;margin-top: 4px}
.bewijsbalk dd{margin: 14px 0 0;font-size: var(--label);line-height: 1.35;color: #383838}
.bewijsbalk__review{display: grid;grid-template-columns: 1fr auto;grid-template-rows: auto 1fr;column-gap: 16px;padding: 24px 28px;align-content: center}
.bewijsbalk__review figcaption{display: contents}
.bewijsbalk__wie{grid-column: 1;grid-row: 1;font-size: var(--label);font-weight: 500;color: var(--inkt)}
.bewijsbalk__review blockquote{grid-column: 1;grid-row: 2;margin: 4px 0 0;font-size: var(--label);line-height: 1.4;color: #383838}
.bewijsbalk__review blockquote b{display: inline-flex;align-items: center;gap: 6px;font-weight: 600;color: var(--inkt)}
.bewijsbalk__review blockquote svg{width: 18px;height: 18px;color: #1d6b35}
.bewijsbalk__score{grid-column: 2;grid-row: 1;justify-self: end;display: inline-flex;align-items: center;gap: 6px;margin: 0;font-size: var(--label);font-weight: 600;color: var(--inkt)}
.bewijsbalk__score svg{width: 18px;height: 18px;fill: var(--groen)}
.vraag{padding-top: var(--band-y, 64px) !important}
@media (max-width: 1180px){.bewijsbalk__binnen{grid-template-columns: 1fr}
.bewijsbalk__cijfers > div{padding: 4px 24px}
.bewijsbalk dt span{font-size: 40px}
}
@media (max-width: 820px){.bewijsbalk{padding: 24px 20px 0}
.bewijsbalk__cijfers{grid-template-columns: repeat(2, minmax(0, 1fr));padding: 8px 0;border-radius: 20px}
.bewijsbalk__cijfers > div{padding: 18px 20px;border-left: 0;border-top: 1px solid #E6E6E6}
.bewijsbalk__cijfers > div:nth-child(-n+2){border-top: 0}
.bewijsbalk__cijfers > div:nth-child(even){border-left: 1px solid #E6E6E6}
.bewijsbalk dt span{font-size: 34px}
.bewijsbalk dd{margin-top: 10px}
.bewijsbalk__review{padding: 20px;border-radius: 20px}
}
.vraag{border-top-left-radius: 0 !important;border-top-right-radius: 0 !important;background: #F1F1F1 !important}
@media (min-width: 1181px){.bewijsbalk__binnen{grid-template-columns: minmax(0, 1fr) 320px}
.bewijsbalk__cijfers > div{padding: 4px 24px 4px 28px}
.bewijsbalk dd{font-size: 16px}
}
@media (min-width: 821px){.hero__foto{object-position: 100% 35% !important}
.tekst{left: 32px !important;bottom: calc(62 * var(--hk)) !important}
.advies{bottom: calc(62 * var(--hk)) !important}
.tekst h1{font-size: min(calc(38 * var(--hk)), 124px) !important}
}
@media (min-width: 821px) and (max-aspect-ratio: 7/5){.tekst,.advies{bottom: calc(44 * var(--hk)) !important}
.tekst h1{font-size: calc(30 * var(--hk)) !important}
.advies{width: calc(112 * var(--hk)) !important}
}
@media (min-width: 821px){.tekst{left: clamp(40px, 4.5vw, 88px) !important}
.advies{right: clamp(40px, 4.5vw, 88px) !important}
.tekst h1{font-size: min(calc(35 * var(--hk)), 116px) !important}
}
@media (min-width: 821px) and (max-aspect-ratio: 7/5){.tekst h1{font-size: calc(30 * var(--hk)) !important}
}
@media (min-width: 821px){.tekst{left: var(--rand-in) !important}
.advies{right: var(--rand-in) !important}
}
.bewijsbalk,.vraag{background: var(--vlak) !important}
.bewijsbalk{position: relative;z-index: 2;padding-top: 0 !important;background: linear-gradient(transparent 72px, var(--vlak) 72px) !important}
.bewijsbalk__binnen{margin-top: -72px}
.bewijsbalk__cijfers,.bewijsbalk__review{box-shadow: 0 12px 32px rgba(0,0,0,.08)}
@media (max-width: 820px){.bewijsbalk{background: linear-gradient(transparent 32px, var(--vlak) 32px) !important}
.bewijsbalk__binnen{margin-top: -32px}
.advies{margin-bottom: 40px !important}
}
.dag__kaart::after{content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;border-radius: 16px;background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 20%, rgba(0,0,0,0) 42%)}
.dag__kaart img{aspect-ratio: 1 / 1 !important;height: auto !important;object-position: 50% 30%}
@media (min-width: 821px){.dag::before{bottom: calc(var(--deel-y) + 42px + 40px + clamp(240px, 25vw, 380px) * .55) !important}
}
@media (max-width: 820px){.dag::before{bottom: calc(24px + 44px + 24px + min(62vw, 250px) * .55) !important}
}
.dag__kaart::after{background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.52) 24%, rgba(0,0,0,0) 50%) !important}
.dag__kaart:not(:has(.dag__tijd))::after{content: none}
.gesprek__tekst{font-size: var(--t-kop) !important;font-weight: 500 !important;line-height: 1.08 !important;letter-spacing: -.02em;color: var(--inkt);text-wrap: balance}
@media (max-width: 820px){.gesprek__tekst{font-size: clamp(30px, 8.6vw, 40px) !important}
}
.dag__kaart img[src="katja-dag-05.jpg"]{filter: sepia(.3) saturate(1.35) hue-rotate(-8deg) contrast(.9)}
.dag__kaart img[src="katja-dag-06.jpg"]{filter: sepia(.45) saturate(1.6) hue-rotate(-12deg) contrast(.86) brightness(.96)}
#dag-kop strong,#dag-kop .dag__citaat{display: block;text-wrap: balance}
.moment{padding: 32px !important;border-radius: 24px !important}
.moment > svg{width: 44px !important;height: 44px !important}
.moment h3{font-size: 28px !important}
.moment p{font-size: var(--lees) !important;line-height: 1.45 !important}
@media (max-width: 820px){.moment{padding: 24px !important;border-radius: 20px !important}
.moment > svg{width: 36px !important;height: 36px !important}
.moment h3{font-size: 22px !important}
}
.geregeld{background: #141414 !important;color: #fff;padding-top: var(--band-y) !important;padding-bottom: var(--band-y) !important}
.geregeld h2,.geregeld h2 strong{color: #fff !important}
@media (max-width: 820px){.geregeld{padding: 64px 20px !important}
}
.geregeld{background: #ECECEC !important;color: var(--inkt)}
.geregeld h2,.geregeld h2 strong{color: var(--inkt) !important}
.cijfers{background: #ECECEC !important;padding-top: var(--band-y) !important;padding-bottom: var(--band-y) !important}
.cijfers .stap{background: #fff !important}
@media (max-width: 820px){.cijfers{padding-top: 64px !important;padding-bottom: 64px !important}
}
.cijfers{background: #fff !important}
.cijfers__binnen{background: #ECECEC;border-radius: 32px;box-sizing: border-box}
@media (min-width: 821px){.cijfers__binnen{width: calc(var(--pagina) - 2 * var(--marge)) !important;max-width: calc(100vw - 2 * var(--marge));padding: clamp(40px, 5vw, 80px) !important}
}
@media (max-width: 820px){.cijfers__binnen{padding: 24px !important;border-radius: 24px}
}
.cijfers .stap span{text-wrap: pretty}
.geregeld{background: #fff !important}
.cijfers__toestel{container-type: inline-size;overflow: visible !important;border-radius: 0 !important;aspect-ratio: auto !important;height: auto !important;transform: none !important;background: none !important;z-index: 2}
.cijfers__toestel .reel__toestel{transform: rotate(-3.5deg)}
.cijfers__binnen{overflow: visible !important}
@media (min-width: 821px){.cijfers__toestel{grid-column: 1 / span 4 !important;grid-row: 1 / span 3 !important;width: min(100%, 360px) !important;max-width: none !important;justify-self: center !important;align-self: center !important;margin: -170px 0 !important}
}
@media (max-width: 820px){.cijfers__toestel{width: min(68vw, 300px) !important;margin: -64px auto 28px !important;align-self: center !important}
}
@media (min-width: 821px){.cijfers__toestel{width: min(100%, 320px) !important;margin: 0 !important}
.cijfers__toestel .reel__toestel{transform: rotate(-3.5deg) scale(1.24)}
}
@media (max-width: 820px){.cijfers__toestel{width: min(64vw, 280px) !important;margin: -56px auto 32px !important}
}
@media (min-width: 821px) and (max-width: 1180px){.cijfers__toestel .reel__toestel{transform: rotate(-3.5deg) scale(1.06)}
}
@media (min-width: 821px) and (max-width: 1180px){.cijfers__toestel{width: min(100%, 250px) !important}
.cijfers__toestel .reel__toestel{transform: rotate(-3.5deg)}
}
@media (max-width: 820px){.cijfers__toestel{margin: 8px auto 32px !important}
}
.reel__vlak{position: absolute;z-index: 0;right: -20cqw;top: 10%;width: 64cqw;height: 84%;border-radius: 12cqw;pointer-events: none;background: linear-gradient(140deg, rgba(87,226,127,.28) 0%, rgba(87,226,127,.62) 55%, rgba(60,180,100,.7) 100%);-webkit-backdrop-filter: blur(16px);backdrop-filter: blur(16px);transform: none}
@media (max-width: 359px){.reel__vlak{right: -8cqw}
}
.pil,.nav .pil,.advies .pil,.situatie__knop,.vragenkaart__volgende,.vragenkaart__knoppen .pil,.plan__knop,.faq__verder .pil,.vraag__speel{border-radius: 999px !important}
.duo{border-radius: 999px !important;overflow: hidden}
@media (max-width: 820px){.situatie > img{object-position: 72% 30% !important}
}
@media (min-width: 821px){.situatie::before{background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,0) 74%), linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,0) 60%) !important}
}
@media (min-width: 821px){.situatie::before{background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 40%, rgba(0,0,0,0) 76%), linear-gradient(to right, rgba(0,0,0,.45), rgba(0,0,0,0) 60%) !important}
}
@media (min-width: 821px) and (max-aspect-ratio: 7/5){.situatie > img{object-position: 0% 30% !important}
}
.situatie::before{background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,0) 55%) !important}
.situatie__tekst{isolation: isolate}
.situatie__tekst::before{content: "";position: absolute;z-index: -1;inset: -60px -60px -50px -80px;border-radius: 120px;pointer-events: none;background: rgba(0,0,0,.42);filter: blur(48px)}
@media (max-width: 820px){.situatie__tekst{position: relative}
.situatie__tekst::before{inset: -40px -30px -30px -40px;filter: blur(36px)}
}
.situatie__tekst::before{background: rgba(0,0,0,.55) !important}
.situatie__tekst p{transform: translate(0)}
.situatie__tekst p::before{content: "";position: absolute;z-index: -1;inset: -12px -28px;border-radius: 40px;pointer-events: none;background: rgba(0,0,0,.35);filter: blur(16px)}
.dag__kaart img[src="katja-dag-08.jpg"]{filter: contrast(.9) brightness(1.02)}
.hero__video{scale: none !important;filter: none !important;object-fit: cover;object-position: 50% 45% !important;background: #2a2420}
@media (max-width: 820px){.hero__video{object-position: 62% 45% !important}
}
@media (min-width: 821px){.tekst::before{content: "" !important;position: absolute;z-index: -1;inset: -90px -70px -90px -110px;border-radius: 160px;pointer-events: none;background: rgba(0,0,0,.6) !important;filter: blur(60px)}
}
@media (min-width: 821px){.tekst::before{content: none !important}
.tekst h1{text-shadow: 0 1px 14px rgba(0,0,0,.28);filter: drop-shadow(0 1px 10px rgba(0,0,0,.22))}
.tekst h1{filter: none}
}
@media (max-width: 820px){.hero__video{object-position: 50% 45% !important}
}
.advies{grid-template-columns: minmax(0, 1fr) !important}
@media (max-width: 400px){.advies .pil{font-size: 15px !important;padding: 0 16px !important;gap: 8px !important}
}
svg.dm{fill: none;stroke: var(--lijn);stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;overflow: visible}
.geregeld{background: #fff !important;padding: var(--band-y) var(--rand-in, 20px) !important;height: auto !important}
.lijn3{--lijnkleur: #E3E3E3;--licht: #E3E3E3;max-width: 1180px;margin: 0 auto}
.lijn3__kop{margin: 0 0 clamp(40px, 6vw, 88px);font-size: var(--t-display, 56px);line-height: .98;letter-spacing: -.02em;font-weight: 400}
.lijn3__kop strong{font-weight: 600}
.lijn3__stappen{list-style: none;margin: 0;padding: 0;position: relative}
.lijn3__stappen::before{content: "";position: absolute;left: 50%;top: 0;bottom: 0;width: 2px;margin-left: -1px;background: var(--lijnkleur)}
.lijn3__stap{position: relative;display: grid;grid-template-columns: 1fr 72px 1fr;align-items: center;min-height: clamp(200px, 22vw, 300px)}
.lijn3__stap + .lijn3__stap{margin-top: clamp(24px, 3vw, 48px)}
.lijn3__nr{grid-column: 1;justify-self: end;font-size: clamp(110px, 13vw, 210px);font-weight: 300;line-height: .8;letter-spacing: -.04em;color: var(--licht)}
.lijn3__punt{grid-column: 2;justify-self: center;width: 16px;height: 16px;border-radius: 50%;background: var(--lijnkleur);position: relative;z-index: 1}
.lijn3__tekst{grid-column: 3;max-width: 30em}
.lijn3__tekst h3{margin: 0;font-size: clamp(34px, 3.8vw, 58px);font-weight: 600;line-height: 1.04;letter-spacing: -.02em;color: var(--inkt)}
.lijn3__tekst p{margin: 18px 0 0;font-size: var(--lees);line-height: 1.55;color: #1E1E1E}
.lijn3__stap--om .lijn3__nr{grid-column: 3;grid-row: 1;justify-self: start}
.lijn3__stap--om .lijn3__punt{grid-row: 1}
.lijn3__stap--om .lijn3__tekst{grid-column: 1;grid-row: 1;justify-self: end;text-align: right}
.lijn3__stap--actief .lijn3__nr{color: transparent;-webkit-text-stroke: 3px var(--groen)}
.lijn3__stap--actief::before{content: "";position: absolute;left: 50%;top: 0;bottom: 0;width: 2px;margin-left: -1px;background: var(--groen)}
.lijn3__stap--actief .lijn3__punt{width: 24px;height: 24px;background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat}
.lijn3__actie{display: flex;flex-wrap: wrap;align-items: center;gap: 14px 22px;margin-top: 28px}
@media (max-width: 820px){.geregeld{padding: 64px 20px !important}
.lijn3__stappen::before{left: 11px}
.lijn3__stap,.lijn3__stap--om{grid-template-columns: 24px 1fr;column-gap: 20px;align-items: start;min-height: 0}
.lijn3__stap--actief::before{left: 11px}
.lijn3__punt,.lijn3__stap--om .lijn3__punt{grid-column: 1;grid-row: 1;justify-self: center;margin-top: 14px}
.lijn3__nr,.lijn3__stap--om .lijn3__nr{grid-column: 2;grid-row: 1;justify-self: start;font-size: 72px}
.lijn3__tekst,.lijn3__stap--om .lijn3__tekst{grid-column: 2;grid-row: 2;justify-self: start;text-align: left;margin-top: 10px}
.lijn3__stap--actief .lijn3__nr{-webkit-text-stroke: 2px var(--groen)}
.lijn3__tekst h3{font-size: clamp(30px, 8.6vw, 38px)}
.lijn3__stap + .lijn3__stap{margin-top: 40px}
}
.geregeld h2.lijn3__kop{position: static !important;width: auto !important;left: auto !important;top: auto !important;color: var(--inkt) !important;grid-column: auto !important}
@media (max-width: 820px){.lijn3__stap,.lijn3__stap--om{grid-template-columns: 24px minmax(0, 1fr) !important}
.lijn3__tekst h3{overflow-wrap: break-word;hyphens: auto}
}
@media (max-width: 359px){.lijn3__tekst h3{font-size: 26px !important}
.lijn3__actie .pil{font-size: 15px !important;padding: 0 16px !important}
}
@media (min-width: 821px){.lijn3__nr{font-size: clamp(150px, 16vw, 250px) !important}
.lijn3__stap--actief .lijn3__nr{-webkit-text-stroke: 3.5px var(--groen)}
}
.lijn3{max-width: none !important;margin: 0 !important}
.lijn3__stap--actief .lijn3__nr{color: var(--groen) !important;-webkit-text-stroke: 0 !important}
@media (min-width: 821px){.lijn3__stap{grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) !important}
}
.lijn3{--tussen: clamp(24px, 3vw, 48px)}
.geregeld h2.lijn3__kop{text-align: center !important;font-size: var(--t-kop) !important;line-height: 1.05 !important;margin: 0 auto clamp(56px, 7vw, 112px) !important;max-width: 18em;text-wrap: balance}
.lijn3__stappen::before,.lijn3__stap--actief::before{content: none !important}
.lijn3__stap{min-height: clamp(230px, 24vw, 330px) !important}
.lijn3__stap + .lijn3__stap{margin-top: var(--tussen) !important}
.lijn3__stap::after{content: "";position: absolute;left: 50%;top: 50%;width: 2px;margin-left: -1px;height: calc(100% + var(--tussen));background: var(--lijnkleur);z-index: 0}
.lijn3__stap:last-child::after{content: none}
.lijn3__stap--actief::after{background: linear-gradient(var(--groen) 0 55%, var(--lijnkleur) 55%)}
@media (max-width: 820px){.lijn3{--tussen: 44px}
.geregeld h2.lijn3__kop{text-align: left !important;margin-bottom: 48px !important}
.lijn3__stap{min-height: 0 !important}
.lijn3__stap::after{left: 12px;top: 26px;height: calc(100% + var(--tussen))}
}
.geregeld{padding-top: 0 !important}
.geregeld h2.lijn3__kop br{display: inline !important}
.geregeld h2.lijn3__kop{text-align: left !important;font-size: var(--t-display) !important;line-height: .98 !important;letter-spacing: -.02em !important;max-width: none;text-wrap: wrap;margin: 0 0 clamp(56px, 6vw, 96px) !important}
@media (min-width: 821px){.lijn3__stap .lijn3__nr,.lijn3__stap--om .lijn3__nr{grid-column: 1 !important;grid-row: 1;justify-self: end !important;text-align: right}
.lijn3__stap .lijn3__punt,.lijn3__stap--om .lijn3__punt{grid-column: 2 !important;grid-row: 1}
.lijn3__stap .lijn3__tekst,.lijn3__stap--om .lijn3__tekst{grid-column: 3 !important;grid-row: 1;justify-self: start !important;text-align: left !important}
}
@media (min-width: 821px){.bewijs__beeld{justify-self: end !important;margin-right: calc(-29 * var(--b))}
}
.lijn3__stappen{border: 1px solid #D6D6D6;border-radius: 24px;padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px) !important;margin: 0 !important;max-width: none !important}
.lijn3__stap .lijn3__tekst{max-width: 36em !important}
@media (min-width: 821px){.lijn3__stap{grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) !important}
.lijn3__nr{font-size: clamp(160px, 17vw, 280px) !important}
}
@media (max-width: 820px){.lijn3__stappen{border-radius: 16px;padding: 32px 16px !important}
.lijn3__stap{column-gap: 14px !important}
}
@media (max-width: 359px){.lijn3__stappen{padding: 28px 12px !important}
.lijn3__stap{column-gap: 10px !important}
.lijn3__tekst{min-width: 0}
.lijn3__actie .pil{max-width: 100%;white-space: normal;text-align: left;height: auto;min-height: 48px;padding: 12px 20px}
}
.gesprek__tekst{text-align: left !important}
.gesprek__tekst span{display: block}
@media (min-width: 821px){.gesprek__binnen{display: grid !important;grid-template-columns: minmax(0, 1fr) auto;column-gap: 48px;row-gap: clamp(32px, 3.5vw, 56px);align-items: end}
.gesprek__tekst{grid-column: 1;justify-self: start;font-size: clamp(30px, 3.2vw, 46px) !important;line-height: 1.12 !important}
.gesprek__tekst span + span{color: #6B6B6B}
.gesprek__tekst{text-wrap: wrap !important}
}
@media (max-width: 820px){.gesprek__binnen{align-items: stretch !important}
.gesprek__tekst span + span{color: #6B6B6B}
}
@media (min-width: 1024px){.gesprek__binnen{display: grid !important;grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);column-gap: clamp(40px, 4vw, 72px) !important;row-gap: 0 !important;align-items: end !important}
.gesprek__tekst{grid-column: 2;grid-row: 2;align-self: end;text-wrap: balance !important;justify-self: start;margin: 0 0 clamp(28px, 3vw, 44px) !important;font-size: clamp(30px, 2.9vw, 44px) !important;line-height: 1.1 !important}
}
.dag__label,.dag__knoppen{display: none !important}
@media (min-width: 821px){.dag__baan{display: grid !important;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 20px !important;overflow: visible !important;margin: 0 !important;padding: 0 !important;width: auto !important}
.dag__kaart{width: auto !important;min-width: 0 !important;flex: none !important;aspect-ratio: 1 / 1;height: auto !important}
.dag__kaart img{width: 100% !important;height: 100% !important;object-fit: cover}
}
.gesprek{padding-top: var(--band-y) !important;padding-bottom: var(--band-y) !important}
.gesprek__binnen{background: #fff;border: 1px solid #D6D6D6;border-radius: 24px;padding: clamp(32px, 4vw, 64px) !important}
@media (min-width: 821px){.gesprek__binnen{margin: 0 var(--rand-in) !important;width: auto !important}
}
@media (max-width: 820px){.gesprek__binnen{border-radius: 16px;padding: 16px 16px 28px !important}
}
:root{--inkt: #2B2B2B}
html,body{color: var(--inkt)}
:root{--tekst-grijs: #474747;--hulp-grijs: #6B6B6B}
.vraag__sub,.moment:not(.moment--avond) p,.lijn3__tekst p,.route__intro,.cijfers .stap > span,.faq__intro,.faq__tekst p{font-size: var(--lees) !important;font-weight: 400 !important;color: var(--tekst-grijs) !important;line-height: 1.55 !important}
.plan__hulp{color: var(--hulp-grijs) !important}
h1,h2,h3,h2 strong,h2 span,h3 span,h3 strong{font-weight: 500 !important}
section:not(.situatie) h2:not(.gesprek__kop),section:not(.situatie) h2:not(.gesprek__kop) :is(strong,span),section h3:not(.moment--avond h3),section h3 :is(strong,span){color: var(--inkt) !important}
footer.voet h2{font-weight: 500 !important}
.cijfers .stappen{background: none !important;padding: 0 !important;margin: 0;display: grid;gap: 10px}
.cijfers .stappen .stap,.cijfers .stappen .stap:nth-child(n){display: grid !important;grid-template-columns: clamp(118px, 10vw, 148px) minmax(0, 1fr) !important;align-items: center;column-gap: clamp(14px, 1.6vw, 22px) !important;background: #fff !important;border-radius: 16px !important;min-height: 0 !important;height: auto !important;padding: 8px clamp(16px, 1.8vw, 24px) 8px 8px !important;margin: 0 !important;border: 0 !important}
.cijfers .stappen .stap b,.cijfers .stappen .stap:nth-child(n) b{justify-self: stretch;display: grid !important;place-items: center;width: auto !important;min-width: 0 !important;height: 48px !important;padding: 0 10px !important;margin: 0 !important;border-radius: 12px !important;background: rgba(87, 226, 127, .22) !important;color: var(--inkt) !important;font-size: 15px !important;font-weight: 500 !important;white-space: nowrap}
.cijfers .stappen .stap.stap--nu:nth-child(n) b{background: var(--groen) !important}
.cijfers .stappen .stap > span{padding: 0 !important}
@media (max-width: 400px){.cijfers .stappen .stap,.cijfers .stappen .stap:nth-child(n){grid-template-columns: 104px minmax(0, 1fr) !important;column-gap: 12px !important;padding-right: 14px !important}
.cijfers .stappen .stap b{font-size: 14px !important;height: auto !important;min-height: 44px;white-space: normal !important;text-align: center;line-height: 1.2;padding: 6px 8px !important}
}
.faq__speel{left: clamp(16px, 2vw, 24px) !important;top: auto !important;bottom: clamp(16px, 2vw, 24px) !important;translate: none !important}
@media (max-width: 820px){.situatie{overflow-x: clip !important;overflow-y: visible !important}
.situatie > img{clip-path: inset(0)}
}
@media (max-width: 820px){.situatie__tekst{left: 0 !important}
}
footer.voet{background: #F5F5F5 !important;color: var(--inkt) !important}
footer.voet .voet__merk,footer.voet .voet__kolom,footer.voet .logo{color: var(--inkt) !important}
footer.voet .voet__merk p{color: var(--tekst-grijs) !important}
footer.voet h2{color: var(--hulp-grijs) !important}
footer.voet .voet__kolom a{color: var(--inkt) !important}
footer.voet .voet__kolom a:hover{color: #000 !important}
footer.voet .voet__onder{color: var(--hulp-grijs) !important;border-color: #E3E3E3 !important}
footer.voet a:focus-visible{outline-color: var(--inkt) !important}
.advies{-webkit-backdrop-filter: blur(16px) !important;backdrop-filter: blur(16px) !important}
@media (max-width: 820px){.advies,.reel__vlak,.glas{-webkit-backdrop-filter: none !important;backdrop-filter: none !important}
.advies{background: rgba(255,255,255,.96) !important}
}
:root{--snel: 240ms;--ontvouw: 600ms;--groot: 900ms;--uit: cubic-bezier(.2,.7,.2,1);--in-uit: cubic-bezier(.65,0,.35,1);--veer: cubic-bezier(.34,1.4,.64,1);--afstand: 24px}
@media (max-width: 820px){:root{--afstand: 16px}
}
.js-beweeg [data-beweeg]{transition: opacity var(--ontvouw) var(--uit) var(--wacht, 0ms), translate var(--ontvouw) var(--uit) var(--wacht, 0ms), scale var(--groot) var(--in-uit) var(--wacht, 0ms), clip-path var(--groot) var(--in-uit) var(--wacht, 0ms)}
.js-beweeg [data-beweeg="omhoog"]:not(.is-in-beeld){opacity: 0;translate: 0 var(--afstand)}
.js-beweeg [data-beweeg="vervaag"]:not(.is-in-beeld){opacity: 0}
.js-beweeg [data-beweeg="uitsnede"]:not(.is-in-beeld){opacity: 0}
@media (min-width: 1024px){.js-beweeg [data-beweeg="uitsnede"]:not(.is-in-beeld){opacity: 1;clip-path: inset(10% 10% 10% 10% round 24px);scale: 1.06}
.js-beweeg .dag__kaart[data-beweeg="uitsnede"]:not(.is-in-beeld){clip-path: inset(3% 3% 3% 3% round 20px);scale: 1.015;opacity: 0}
}
.pil,.duo__app,.duo__menu{transition: translate var(--snel) var(--uit), scale 100ms var(--uit), box-shadow var(--snel) var(--uit), background-color var(--snel) var(--uit), border-color var(--snel) var(--uit), color var(--snel) var(--uit)}
.reel__speel,.faq__speel{transition: scale var(--snel) var(--uit), opacity .2s}
.nav__links a,.voet__kolom a{text-decoration: none;background: linear-gradient(var(--groen), var(--groen)) 0 100% / 0 2px no-repeat;transition: background-size var(--snel) var(--uit), color var(--snel)}
.keuze{transition: border-color var(--snel) var(--uit), background-color var(--snel) var(--uit)}
.keuze:has(input:checked){animation: kies var(--snel) var(--veer)}
@keyframes kies{from{scale: .97}
}
a:focus-visible,button:focus-visible{outline: 2px solid var(--inkt);outline-offset: 3px}
@media (hover: hover){.pil:hover,.duo__app:hover{translate: 0 -2px;box-shadow: 0 10px 24px -10px rgba(43,43,43,.35)}
.pil:active,.duo__app:active{translate: none;scale: .98;box-shadow: none}
.reel__speel:hover,.faq__speel:hover{scale: 1.08}
.reel__speel:active,.faq__speel:active{scale: .94}
.nav__links a:hover,.voet__kolom a:hover{background-size: 100% 2px}
.keuze:hover{border-color: rgba(43,43,43,.55)}
}
@media (hover: hover) and (min-width: 1024px){.dag__kaart{overflow: hidden;border-radius: 16px}
.dag__kaart img{transition: scale var(--ontvouw) var(--uit)}
.dag__kaart:hover img{scale: 1.015}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration: 1ms !important;animation-delay: 0ms !important;animation-iteration-count: 1 !important;scroll-behavior: auto !important}
.pil,.duo__app,.reel__speel,.faq__speel,.dag__kaart img,.keuze{translate: none !important;scale: none !important;transition-property: background-color, border-color, color, box-shadow, background-size !important}
}
@keyframes vervaagIn{from{opacity: 0}
}
@keyframes kopOp{from{translate: 0 12px}
}
@keyframes kopBinnen{from{opacity: 0;translate: 0 var(--afstand)}
}
.nav{animation: vervaagIn var(--snel) var(--uit) both}
.hero h1 > span{display: inline-block;animation: kopOp var(--ontvouw) var(--uit) 120ms both}
.hero h1 > span + span{animation-delay: 200ms}
.advies{animation: kopBinnen var(--ontvouw) var(--uit) 600ms both}
.bewijsbalk{animation: kopBinnen var(--ontvouw) var(--uit) 880ms both}
.advies input:focus-visible{box-shadow: 0 0 0 2px var(--groen) !important;outline: none}
header.kop{display: contents}
.nav{position: sticky !important;top: env(safe-area-inset-top, 0px);z-index: 30 !important;transition: background-color var(--snel) var(--uit), box-shadow var(--snel) var(--uit)}
html{scroll-padding-top: 140px}
@media (max-width: 820px){html{scroll-padding-top: 92px}
}
.nav.is-gescrold{background: rgba(255,255,255,.97) !important;box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 30px -18px rgba(0,0,0,.25)}
@media (min-width: 821px){.nav.is-gescrold{background: rgba(255,255,255,.82) !important;-webkit-backdrop-filter: blur(16px) saturate(1.2);backdrop-filter: blur(16px) saturate(1.2)}
}
@keyframes kopZoom{to{transform: scale(1.05)}
}
@supports (animation-timeline: scroll()){@media (min-width: 1024px) and (prefers-reduced-motion: no-preference){.hero__video{animation: kopZoom linear both;animation-timeline: scroll(root);animation-range: 0px 800px}
}
}
.js-beweeg [data-beweeg="rechts"]:not(.is-in-beeld){opacity: 0;translate: 40px 0}
.js-beweeg [data-beweeg="terugzoom"]{transition: scale 1200ms var(--uit) var(--wacht, 0ms)}
@media (min-width: 1024px){.js-beweeg [data-beweeg="terugzoom"]:not(.is-in-beeld){scale: 1.08}
}
@keyframes lijnY{from{transform: scaleY(0)}
}
@keyframes lijnX{from{transform: scaleX(0)}
}
@keyframes stipIn{from{scale: .4;opacity: 0}
}
.js-beweeg .lijn3__stap::after{transform-origin: top}
@supports (animation-timeline: view()){.js-beweeg .lijn3__stap{view-timeline: --stap block}
.js-beweeg .lijn3__stap::after{animation: lijnY linear both;animation-timeline: --stap;animation-range: entry 100% cover 70%}
}
@supports not (animation-timeline: view()){.js-beweeg .lijn3__stap.is-in-beeld::after{animation: lijnY var(--groot) var(--in-uit) 300ms both}
}
.js-beweeg .lijn3__stap.is-in-beeld .lijn3__punt{animation: stipIn 420ms var(--veer) 150ms both}
@keyframes puls{from{box-shadow: 0 0 0 0 rgba(87,226,127,.55)}
to{box-shadow: 0 0 0 14px rgba(87,226,127,0)}
}
.js-beweeg .stap--nu.is-in-beeld b{animation: puls 1200ms var(--uit) 500ms 1}
.teller{display: inline-block;font-variant-numeric: tabular-nums;text-align: inherit}
:root{--pagina: min(100vw, 1696px);--marge: clamp(20px, calc(12.8906vw - 41.875px), 86px);--goot: clamp(20px, calc(17.333px + .5556vw), 28px);--rand: var(--marge);--d-72: clamp(38px, calc(26.667px + 2.3611vw), 72px);--d-64: clamp(36px, calc(26.667px + 1.9444vw), 64px);--d-48: clamp(32px, calc(26.667px + 1.1111vw), 48px);--d-40: clamp(28px, calc(24px + .8333vw), 40px);--d-32: clamp(24px, calc(22.857px + .2381vw), 32px);--d-24: clamp(20px, calc(18.667px + .2778vw), 24px);--d-20: clamp(18px, calc(17.333px + .1389vw), 20px);--d-18: clamp(16px, calc(15.333px + .1389vw), 18px);--d-16: clamp(15px, calc(14.667px + .0694vw), 16px);--t-display: var(--d-64);--t-kop: var(--d-48);--t-groot: var(--d-24);--lees: var(--d-18);--label: 14px;--knoptekst: 15px;--knop: 48px}
@media (min-width: 1024px){:root{--marge: clamp(64px, calc(42.667px + 4.4444vw), 128px)}
}
@media (min-width: 821px){:root{--lees: var(--d-18);--label: 14px;--knoptekst: 15px;--knop: 48px}
}
html body .hero h1,html body .hero h1 > span{font-size: var(--d-72) !important;line-height: 1.05 !important}
html body .hero h1{white-space: normal !important;max-width: calc(7 * var(--kol) + 6 * var(--goot))}
html body .hero h1 > span{display: block !important;white-space: nowrap}
@media (max-width: 820px){html body .hero h1{max-width: none}
}
@media (min-width: 821px){html body .nav{height: 84px !important}
html body .nav__merk{height: 34px !important}
html body .nav__links{gap: clamp(24px, 2.5vw, 40px) !important}
html body .nav__links a{font-size: 16px !important;font-weight: 500 !important}
html body .nav .pil{height: 42px !important;font-size: 15px !important;padding: 0 18px !important}
html body .duo{height: 42px !important}
html body .duo > *{width: 42px !important}
html body .duo__app svg{width: 20px !important;height: 19px !important}
}
html body .lade a{font-size: 16px !important;font-weight: 500 !important}
html body .hero .advies{display: block !important;height: auto !important;min-height: 0 !important;padding: 28px !important;border-radius: 20px !important;background: #fff !important;color: var(--inkt);box-shadow: 0 12px 40px rgba(0,0,0,.18)}
@media (min-width: 821px){html body .hero .advies{width: clamp(340px, calc(4 * var(--kol) + 3 * var(--goot)), 440px) !important}
}
@media (max-width: 820px){html body .hero .advies{padding: 22px !important}
}
html body .hero .advies__kop{margin: 0 0 16px;font-size: var(--d-32) !important;font-weight: 500;line-height: 1.15 !important;letter-spacing: -.01em;color: var(--inkt);text-wrap: balance}
html body .hero .advies__punten{margin: 0 0 20px;padding: 0;list-style: none;display: grid;gap: 8px}
html body .hero .advies__punten li{position: relative;padding-left: 26px;font-size: var(--d-16) !important;line-height: 1.4 !important;color: #474747}
html body .hero .advies__punten li::before{content: "";position: absolute;left: 0;top: .2em;width: 16px;height: 16px;background: #1E9E4A;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}
html body .hero .advies__sub{margin: 0 0 12px;font-size: var(--d-16) !important;font-weight: 500;line-height: 1.3 !important;color: var(--inkt)}
html body .hero .advies__velden{display: grid;grid-template-columns: 1fr 1fr;gap: 8px}
html body .hero .advies__veld--postcode{grid-column: 1 / -1}
html body .hero .advies__veld{position: relative;display: block}
html body .hero .advies__veld svg{position: absolute;left: 14px;top: 50%;translate: 0 -50%;width: 16px;height: 16px;fill: none;stroke: var(--inkt);stroke-width: 1.8;stroke-linejoin: round;pointer-events: none}
html body .hero .advies input{position: static !important;width: 100% !important;height: 48px !important;margin: 0;padding: 0 12px 0 38px !important;border: 0;border-radius: 10px !important;background: var(--vlak) !important;color: var(--inkt);font: 400 16px Lufga, system-ui, sans-serif !important}
html body .hero .advies__veld--kaal input{padding-left: 14px !important}
html body .hero .advies input::placeholder{color: #8A8A8A}
html body .hero .advies input:focus-visible{outline: 2px solid var(--inkt);outline-offset: 1px;box-shadow: none}
html body .hero .advies input[aria-invalid="true"]{box-shadow: inset 0 0 0 1.5px #B4320A}
html body .hero .advies__fout{margin: 8px 0 0;font-size: 14px !important;line-height: 1.4 !important;color: #B4320A}
html body .hero .advies__knop{position: static !important;display: flex;justify-content: center;width: 100% !important;height: 52px !important;margin: 12px 0 0;border-radius: 999px !important;font-size: 15px !important}
html body .hero .advies__klein{margin: 12px 0 0;text-align: center;font-size: 14px !important;line-height: 1.4 !important;color: #474747}
html body .hero .advies__klein b{font-weight: 500;color: var(--inkt)}
@media (min-width: 821px) and (max-height: 860px){html body .hero .advies{padding: 22px !important}
html body .hero .advies__kop{margin-bottom: 12px}
html body .hero .advies__punten{margin-bottom: 14px;gap: 6px}
}
html body .hero__kopfoto{scale: none !important;filter: none !important;left: 0 !important;right: 0 !important;top: 0 !important;width: 100% !important;height: 100% !important;object-fit: cover;object-position: 50% 30% !important;background: #2a2420}
html body .hero__kopfoto{scale: none !important}
@media (min-width: 1280px){html body .hero__kopfoto{object-position: 50% 40% !important}
}
@media (min-width: 1100px) and (max-width: 1279px){html body .hero__kopfoto{object-position: 45% 40% !important}
}
@media (min-width: 821px) and (max-width: 1099px){html body .hero__kopfoto{object-position: 35% 40% !important}
}
@media (min-width: 768px) and (max-width: 820px){html body .hero__kopfoto{object-position: 15% 40% !important}
}
@media (max-width: 767px){html body .hero__kopfoto{object-position: 50% 0% !important}
}
@media (min-width: 768px) and (max-width: 1099px){html body .hero .hero__binnen::before{background: none !important}
html body .hero .tekst{isolation: isolate;position: relative}
html body .hero .tekst::before{content: "" !important;display: block !important;position: absolute;z-index: -1;inset: -56px -40px -48px calc(-1 * var(--rand-in, 32px) - 40px);pointer-events: none;background: linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,0) 62%), linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.4) 18%, rgba(0,0,0,0) 36%) !important;-webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent);border-radius: 0 !important;filter: none !important}
}
@media (min-width: 821px) and (max-width: 1099px){html body .hero__kopfoto{scale: none !important}
}
@media (max-width: 767px){html body .hero{--fh: calc(100vw * 1.5);height: auto !important;min-height: 0 !important;background: var(--vlak) !important}
html body .hero .hero__kopfoto{position: absolute !important;top: 0 !important;left: 0 !important;right: 0 !important;width: 100% !important;height: var(--fh) !important;object-fit: cover}
html body .hero .hero__binnen::before{inset: 0 0 auto 0 !important;height: var(--fh) !important;background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,0) 70%) !important}
html body .hero .tekst{min-height: calc(var(--fh) - 20px - 20px - 48px);display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start}
}
@media (max-width: 767px){html body .bewijsbalk .bewijsbalk__review{display: flex;align-items: center;flex-wrap: wrap;gap: 4px 6px;margin-top: 4px;padding: 12px 0 0;background: none;border-radius: 0;box-shadow: none;border-top: 1px solid #DCDCDC}
html body .bewijsbalk .bewijsbalk__score{order: -1;font-size: 13px !important;gap: 4px}
html body .bewijsbalk .bewijsbalk__score svg,html body .bewijsbalk .bewijsbalk__review blockquote svg{width: 14px;height: 14px}
html body .bewijsbalk .bewijsbalk__wie,html body .bewijsbalk .bewijsbalk__review blockquote{font-size: 13px !important;margin: 0}
html body .bewijsbalk .bewijsbalk__review blockquote b{gap: 4px}
html body .bewijsbalk .bewijsbalk__review blockquote b svg{color: inherit}
}
@media (min-width: 768px){html body .bewijsbalk .bewijsbalk__review{grid-template-rows: auto auto !important;align-content: space-between !important;row-gap: 12px;padding: 28px 32px !important}
html body .bewijsbalk .bewijsbalk__wie{font-size: 18px !important;font-weight: 600}
html body .bewijsbalk .bewijsbalk__score{font-size: 18px !important}
html body .bewijsbalk .bewijsbalk__review blockquote{margin: 0 !important;font-size: clamp(17px, 1.3vw, 20px) !important;line-height: 1.35 !important}
html body .bewijsbalk .bewijsbalk__review blockquote svg{width: 20px;height: 20px}
}
.dag__duimen{display: none}
@media (max-width: 767px){html body .dag .dag__binnen{padding: 0 20px !important;row-gap: 20px}
html body .dag .dag__baan{margin: 0 !important;padding: 0 !important;gap: 12px !important;scroll-snap-type: x mandatory;scroll-padding-left: 0 !important}
html body .dag .dag__kaart{width: 100% !important;scroll-snap-align: start !important;scroll-snap-stop: always}
html body .dag .dag__duimen{grid-column: 1 / -1;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 8px}
html body .dag .dag__duim{display: grid;gap: 6px;padding: 0;border: 0;background: none;cursor: pointer;text-align: left;font: inherit;color: var(--inkt);-webkit-tap-highlight-color: transparent}
html body .dag .dag__duim img{display: block;width: 100%;height: auto;aspect-ratio: 1 / 1;object-fit: cover;border-radius: 10px;opacity: .5;outline: 2px solid transparent;outline-offset: 2px;transition: opacity .2s, outline-color .2s}
html body .dag .dag__duim span{font-size: 13px;font-weight: 500;line-height: 1.2;opacity: .6;transition: opacity .2s}
html body .dag .dag__duim[aria-current="true"] img{opacity: 1;outline-color: var(--groen)}
html body .dag .dag__duim[aria-current="true"] span{opacity: 1}
html body .dag .dag__duim:focus-visible{outline: 2px solid var(--inkt);outline-offset: 4px;border-radius: 12px}
html body .dag::before{bottom: calc(24px + (100vw - 40px - 24px) / 4 + 6px + 16px + 20px + 62px + 20px + (100vw - 40px) * .45) !important}
}
@media (min-width: 821px){html body .hero .tekst__intro{max-width: min(26em, calc(4 * var(--kol) + 3 * var(--goot)))}
}
@media (min-width: 821px){html body .hero{height: clamp(680px, 47.1vw, 860px) !important;min-height: 0 !important}
}
@media (max-width: 820px){html body .hero{min-height: 0 !important}
}
@media (min-width: 821px){html body .hero__binnen{display: grid !important;grid-template-columns: minmax(0, 1fr) auto;align-items: center;column-gap: var(--goot);height: 100% !important;padding: 24px var(--rand-in) calc(72px + 24px) !important;box-sizing: border-box}
html body .hero .tekst,html body .hero .advies{position: relative !important;inset: auto !important;margin: 0 !important}
html body .hero .tekst{grid-column: 1;justify-self: start}
html body .hero .advies{grid-column: 2}
}
html body .vraag .vraag__titel{margin: 24px 0 0;font-size: var(--d-48) !important;font-weight: 500;line-height: 1.08 !important;letter-spacing: -.02em;color: var(--inkt);text-wrap: balance}
html body .vraag .vraag__tekst blockquote{margin: 24px 0 0;font-size: var(--d-24) !important;line-height: 1.35 !important;letter-spacing: 0;color: var(--inkt);text-wrap: pretty}
html body .vraag .vraag__sub{margin-top: 20px;max-width: 34em}
html body .vraag .vraag__acties{margin-top: 32px}
html body .vraag .vraag__klein{margin: 12px 0 0;font-size: 14px !important;line-height: 1.4 !important;color: #6B6B6B}
html body .vraag .reel__toestel{padding: 0;background: none;box-shadow: none;border-radius: 9cqw}
html body .vraag .reel__knop,html body .vraag .reel__eiland,html body .vraag .reel__beeld::after{display: none}
html body .vraag .reel__scherm{padding: 0;background: none;box-shadow: none;border-radius: 9cqw}
html body .vraag .reel__beeld{border-radius: 9cqw;box-shadow: 0 5cqw 10cqw -3cqw rgba(0,0,0,.3), 0 1.5cqw 3cqw rgba(0,0,0,.12)}
html body .vraag .reel__beeld{background: transparent !important;-webkit-mask-image: -webkit-radial-gradient(white, black)}
html body .vraag .reel__beeld img,html body .vraag .reel__beeld video{inset: -1px !important;width: calc(100% + 2px) !important;height: calc(100% + 2px) !important}
html body .vraag .reel__toestel{backface-visibility: hidden;-webkit-backface-visibility: hidden;outline: 1px solid transparent;will-change: transform}
html body .vraag .reel__vlak{background: rgba(87,226,127,.22) !important;-webkit-backdrop-filter: none !important;backdrop-filter: none !important}
html body .dag__kaart{aspect-ratio: auto !important;height: auto !important;overflow: visible !important;border-radius: 0 !important;clip-path: none !important}
html body .dag__foto{aspect-ratio: 1 / 1;overflow: hidden;border-radius: 16px}
html body .dag__foto img{display: block;width: 100% !important;height: 100% !important;object-fit: cover}
html body .dag__onderschrift{margin: 12px 0 0;display: grid;gap: 2px;line-height: 1.35 !important}
html body .dag__onderschrift b{font-size: var(--d-16) !important;font-weight: 500;color: var(--inkt)}
html body .dag__onderschrift span{font-size: var(--d-16) !important;color: #6B6B6B}
html body .gesprek{background: #F5F5F5 !important;padding: clamp(64px, 8.3vw, 120px) var(--rand-in) !important;height: auto !important;min-height: 0 !important}
html body .gesprek .gesprek--verhaal{display: grid !important;grid-template-columns: 1fr;row-gap: 48px;align-items: center;width: auto !important;max-width: none !important;margin: 0 !important;padding: 0 !important;background: none !important;border: 0 !important;border-radius: 0 !important;box-shadow: none !important;height: auto !important}
@media (min-width: 821px){html body .gesprek .gesprek--verhaal{grid-template-columns: repeat(12, minmax(0, 1fr)) !important;column-gap: var(--goot) !important}
html body .gesprek__inhoud{grid-column: 1 / span 6 !important;grid-row: 1 !important;padding-right: 0}
html body .gesprek__media{grid-column: 7 / -1 !important;grid-row: 1 !important}
}
@media (min-width: 1180px){html body .gesprek__inhoud{grid-column: 1 / span 5 !important}
html body .gesprek__media{grid-column: 7 / -1 !important}
}
html body .gesprek .gesprek--verhaal{grid-template-rows: auto !important;grid-auto-rows: auto !important}
html body .gesprek__media{position: relative}
html body .gesprek__vlak{position: absolute;z-index: 0;left: 18%;right: max(-32px, calc(-1 * var(--rand-in) + 4px));top: -32px;bottom: calc(3.2em + 12px + 32px);border-radius: 28px;background: rgba(0,0,0,.06);pointer-events: none}
html body .gesprek__videos{position: relative;z-index: 1;display: grid;grid-template-columns: 1fr 1fr;gap: var(--goot);align-items: start}
html body .gesprek__video{position: relative;margin: 0}
html body .gesprek__video video{display: block;width: 100%;height: auto;aspect-ratio: 4 / 5;object-fit: cover;border-radius: 20px;background: #2a2420;box-shadow: 0 18px 36px -12px rgba(0,0,0,.3), 0 6px 12px rgba(0,0,0,.1)}
html body .gesprek__speel{position: absolute;left: 50%;top: calc((100% - 3.2em) / 2);translate: -50% -50%;width: 64px;height: 64px;border: 0;border-radius: 50%;background: var(--groen);display: grid;place-items: center;cursor: pointer;box-shadow: 0 6px 18px rgba(0,0,0,.25);transition: scale .2s var(--uit)}
html body .gesprek__speel:hover{scale: 1.06}
html body .gesprek__speel:focus-visible{outline: 3px solid #fff;outline-offset: 3px}
html body .gesprek__speel svg{width: 22px;height: 22px;margin-left: 3px;fill: #000}
html body .gesprek__video.speelt .gesprek__speel{opacity: 0;pointer-events: none}
html body .gesprek__video figcaption{margin: 12px 0 0;min-height: 3.2em;font-size: var(--d-16) !important;font-weight: 500;line-height: 1.4 !important;color: var(--inkt)}
html body .gesprek__video{border-radius: 20px;overflow: hidden;box-shadow: 0 18px 36px -12px rgba(0,0,0,.3), 0 6px 12px rgba(0,0,0,.1)}
html body .gesprek__video video{box-shadow: none}
html body .gesprek__video::after{content: "";position: absolute;inset: 45% 0 0 0;border-radius: 0 0 20px 20px;pointer-events: none;background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, rgba(0,0,0,0));transition: opacity .3s}
html body .gesprek__video figcaption{position: absolute;left: 0;right: 0;bottom: 0;z-index: 1;margin: 0;min-height: 0;padding: 0 18px 16px;color: #fff;font-size: var(--d-16) !important;font-weight: 500;line-height: 1.35 !important;text-wrap: balance;pointer-events: none;transition: opacity .3s}
html body .gesprek__speel{top: 44%}
@media (max-width: 1100px){html body .gesprek__speel{top: 36%;width: 52px;height: 52px}
html body .gesprek__speel svg{width: 18px;height: 18px}
html body .gesprek__video figcaption{font-size: 13px !important;padding: 0 12px 12px}
}
html body .gesprek__video.speelt::after,html body .gesprek__video.speelt figcaption{opacity: 0}
html body .gesprek__vlak{bottom: 32px !important}
@media (max-width: 359px){html body .gesprek__speel{top: 32%;width: 44px;height: 44px}
html body .gesprek__video figcaption{font-size: 12px !important;padding: 0 10px 10px}
}
@media (max-width: 480px){html body .gesprek__videos{gap: 12px}
html body .gesprek__speel{width: 48px;height: 48px}
html body .gesprek__speel svg{width: 18px;height: 18px}
html body .gesprek__video figcaption{font-size: 13px !important;padding: 0 12px 12px}
}
.videopop{position: fixed;inset: 0;width: 100%;height: 100%;max-width: none;max-height: none;margin: 0;padding: 0;border: 0;background: transparent;overflow: hidden}
.videopop:not([open]){display: none}
.videopop::backdrop{background: transparent}
.videopop__achter{position: absolute;inset: 0;background: rgba(0,0,0,.84);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);opacity: 0;transition: opacity .42s ease}
.videopop.open .videopop__achter{opacity: var(--vaag, 1)}
.videopop.sleept .videopop__achter,.videopop.sleept .videopop__onder,.videopop.sleept .videopop__sluit{transition: none}
.videopop__binnen{position: absolute;inset: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 16px;touch-action: none;padding: calc(72px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));box-sizing: border-box;pointer-events: none}
.videopop__binnen > *{pointer-events: auto}
.videopop__kader{position: relative;width: min(100%, 520px, calc((100dvh - 250px) * 4 / 5));aspect-ratio: 4 / 5;border-radius: 20px;overflow: hidden;background: #2a2420;box-shadow: 0 30px 80px rgba(0,0,0,.5);transform-origin: 0 0;will-change: transform}
.videopop__kader video{display: block;width: 100%;height: 100%;object-fit: cover;transition: opacity .2s ease}
.videopop__kader.wisselt video{opacity: 0}
.videopop__laden{position: absolute;left: 50%;top: 50%;width: 56px;height: 56px;margin: -28px 0 0 -28px;border-radius: 50%;background: rgba(0,0,0,.4);display: grid;place-items: center;opacity: 0;transition: opacity .2s ease;pointer-events: none}
.videopop__kader.laadt .videopop__laden{opacity: 1;transition-delay: .15s}
.videopop__laden svg{width: 32px;height: 32px;animation: videopop-draai .9s linear infinite}
@keyframes videopop-draai{to{rotate: 360deg}
}
.videopop__onder{width: min(100%, 520px, calc((100dvh - 250px) * 4 / 5));display: flex;align-items: center;gap: 16px;opacity: var(--vaag, 1);translate: 0 8px;transition: opacity .3s ease .18s, translate .3s ease .18s}
.videopop:not(.open) .videopop__onder{opacity: 0}
.videopop.open .videopop__onder{translate: 0 0}
.videopop__titel{flex: 1;min-width: 0;margin: 0;color: #fff;font-size: clamp(15px, 4.2vw, 17px);font-weight: 500;line-height: 1.35;text-wrap: balance}
@media (max-width: 480px){.videopop__titel{min-height: 4.05em;display: flex;align-items: center}
}
@media (max-width: 359px){.videopop__titel{min-height: 5.4em}
}
.videopop__nav{display: flex;align-items: center;gap: 8px;flex: none}
.videopop__teller{min-width: 2.6em;text-align: center;color: #fff;font-size: 14px;font-weight: 500;font-variant-numeric: tabular-nums;opacity: .75}
.videopop__sluit,.videopop__nav button{display: grid;place-items: center;width: 44px;height: 44px;padding: 0;border: 0;border-radius: 50%;background: #fff;color: #000;cursor: pointer;box-shadow: 0 6px 20px rgba(0,0,0,.3);transition: opacity .2s ease, scale .2s ease}
.videopop__nav button:disabled{opacity: .35;cursor: default}
.videopop__nav svg{width: 18px;height: 18px}
.videopop__sluit{position: absolute;z-index: 2;top: calc(16px + env(safe-area-inset-top));right: 16px;opacity: 0;scale: .8;transition: opacity .25s ease .12s, scale .3s cubic-bezier(.2,.8,.2,1) .12s}
.videopop.open .videopop__sluit{opacity: var(--vaag, 1);scale: 1}
.videopop__sluit svg{width: 18px;height: 18px}
.videopop__sluit:focus-visible,.videopop__nav button:focus-visible{outline: 3px solid var(--groen);outline-offset: 3px}
.videopop.dicht .videopop__onder,.videopop.dicht .videopop__sluit{transition-delay: 0s}
html.videopop-aan{overflow: hidden}
@media (prefers-reduced-motion: reduce){.videopop__achter,.videopop__onder,.videopop__sluit{transition: opacity .15s linear !important;translate: none !important;scale: none !important}
.videopop__laden svg{animation-duration: 2s}
}
html body .gesprek__inhoud{display: flex;flex-direction: column;align-items: flex-start}
html body .gesprek .gesprek__label{display: inline-flex;align-items: center;height: 36px;margin: 0;padding: 0 18px;border-radius: 999px;background: #fff;font-size: 14px !important;font-weight: 500;line-height: 1 !important;color: var(--inkt);white-space: nowrap;position: static !important}
html body .gesprek .gesprek__tekst{position: static !important;margin: 24px 0 0 !important;padding: 0 !important;max-width: 14em;font-size: var(--d-48) !important;font-weight: 500;line-height: 1.08 !important;letter-spacing: -.02em;color: var(--inkt);text-wrap: balance}
html body .gesprek .gesprek__uitleg{margin: 16px 0 0;max-width: 34em;font-size: var(--d-18) !important;line-height: 1.55 !important;color: #383838}
html body .gesprek .gesprek__uitleg + .gesprek__uitleg{margin-top: 12px}
html body .gesprek .gesprek__aanloop{margin: 28px 0 0;font-size: var(--d-18) !important;font-weight: 500;line-height: 1.4 !important;color: var(--inkt)}
html body .sectie-label{display: inline-flex !important;align-items: center;align-self: flex-start;justify-self: start;width: auto !important;height: 36px !important;margin: 0 0 20px !important;padding: 0 18px !important;border-radius: 999px !important;background: #fff !important;color: var(--inkt) !important;font-size: 14px !important;font-weight: 500 !important;line-height: 1 !important;letter-spacing: 0 !important;text-transform: none !important;white-space: nowrap;position: static !important;box-shadow: none !important;border: 0 !important;grid-column: 1 / -1}
html body .sectie-label::before,html body .sectie-label::after{content: none !important;display: none !important}
html body .sectie-label--in-kop{display: flex !important;width: fit-content !important}
html body .situatie__tekst > p.sectie-label{font-size: 14px !important;line-height: 1 !important;margin: 0 0 20px !important}
html body .dag .sectie-label + h2,html body .gesprek .sectie-label + h2{margin-top: 0 !important}
html body .dag .sectie-label{margin-bottom: calc(20px - 40px) !important}
@media (max-width: 820px){html body .dag .sectie-label{margin-bottom: calc(20px - 24px) !important}
}
html body .vraag .vraag__titel{margin-top: 20px !important}
@media (max-width: 820px){html body .gesprek__inhoud{order: -1}
}
html body .dag .sectie-label,html body .geregeld .sectie-label,html body .faq .sectie-label{background: #F2F2F2 !important}
html body .pil,html body .duo,html body .nav .pil,html body .nav__binnen .pil,html body .hero .advies__knop,html body .voet .pil,html body .voet__merk .pil,html body .faq__verder .pil,html body .faq .pil,html body section .pil{border-radius: 8px !important}
html body .duo > *{border-radius: 0 !important}
html body .geregeld{padding-top: clamp(64px, 8.3vw, 120px) !important}
html body .lijn3__stap .lijn3__nr,html body .lijn3__stap--om .lijn3__nr{justify-self: start !important;text-align: left !important}
html body .lijn3__kaart{border: 1px solid #D6D6D6;border-radius: 24px;padding: clamp(32px, 6vw, 86px) clamp(16px, 5vw, 72px)}
html body .lijn3__kaart .lijn3__stappen{border: 0 !important;border-radius: 0 !important;padding: 0 !important;margin-top: clamp(40px, 5vw, 72px) !important;background: none !important}
@media (max-width: 820px){html body .lijn3__kaart{border-radius: 16px}
}
html body .lijn3__kaart .lijn3__kop{hyphens: manual !important;-webkit-hyphens: manual !important}
html body .route__video{position: relative;margin: clamp(32px, 4.4vw, 64px) 0 0;border-radius: 24px;overflow: hidden;background: #2a2420;box-shadow: 0 18px 36px -12px rgba(0,0,0,.3), 0 6px 12px rgba(0,0,0,.1)}
html body .route__video video{display: block;width: 100%;height: auto;aspect-ratio: 16 / 9;object-fit: cover}
html body .route__speel{position: absolute;left: 50%;top: 50%;translate: -50% -50%;width: 80px;height: 80px;border: 0;border-radius: 50%;background: var(--groen);display: grid;place-items: center;cursor: pointer;box-shadow: 0 6px 18px rgba(0,0,0,.25);transition: scale .2s var(--uit), opacity .3s}
html body .route__speel:hover{scale: 1.06}
html body .route__speel:focus-visible{outline: 3px solid #fff;outline-offset: 3px}
html body .route__speel svg{width: 26px;height: 26px;margin-left: 4px;fill: #000}
html body .route__video.speelt .route__speel{opacity: 0;pointer-events: none}
@media (max-width: 600px){html body .route__speel{width: 56px;height: 56px}
html body .route__speel svg{width: 20px;height: 20px}
html body .route__video{border-radius: 16px}
}
html body .hoofdstuk{margin: clamp(32px, 4.4vw, 64px) 0 0;padding: 0;background: none;border: 0;border-radius: 0}
html body .hoofdstuk .route__video{margin: 0;border-radius: 24px}
@media (max-width: 600px){html body .hoofdstuk .route__video{border-radius: 16px}
}
html body .hoofdstuk__lijst{list-style: none;margin: 20px 0 0;padding: 0;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--goot)}
html body .hoofdstuk__knop{display: grid;gap: 6px;width: 100%;padding: 0 0 4px;border: 0;background: none;text-align: left;cursor: pointer;font: inherit;color: inherit}
html body .hoofdstuk__balk{display: block;height: 4px;border-radius: 4px;background: #E6E6E6;overflow: hidden;margin-bottom: 6px}
html body .hoofdstuk__balk span{display: block;height: 100%;width: 0;background: var(--groen);border-radius: 4px}
html body .hoofdstuk__knop.is-actief .hoofdstuk__balk span{width: var(--voortgang, 100%)}
html body .hoofdstuk__knop.is-gezien .hoofdstuk__balk span{width: 100%}
html body .hoofdstuk__meta{font-size: 13px !important;color: #6B6B6B;line-height: 1.3 !important}
html body .hoofdstuk__naam{font-size: var(--d-16) !important;font-weight: 400;color: #474747;line-height: 1.35 !important}
html body .hoofdstuk__knop.is-actief .hoofdstuk__naam{font-weight: 500;color: var(--inkt)}
html body .hoofdstuk__knop:hover .hoofdstuk__naam{color: var(--inkt)}
html body .hoofdstuk__knop:focus-visible{outline: 2px solid var(--inkt);outline-offset: 4px;border-radius: 4px}
@media (max-width: 600px){html body .hoofdstuk__lijst{gap: 10px}
html body .hoofdstuk__naam{font-size: 13px !important}
html body .hoofdstuk__meta{font-size: 11px !important}
}
html body .route__kop{display: block !important}
html body .route__kop > div{display: flex;flex-direction: column;align-items: flex-start}
html body .route__kop h2{margin: 0 !important}
html body .route .route__intro{position: static !important;grid-column: auto !important;margin: 20px 0 0 !important;max-width: 40em !important;width: auto !important;font-size: var(--d-18) !important;line-height: 1.55 !important;color: #383838 !important;text-wrap: pretty}
html body .cijfers{background: #F5F5F5 !important;padding: clamp(64px, 8.3vw, 120px) var(--rand-in) !important}
html body .cijfers__binnen{display: grid !important;grid-template-columns: 1fr;row-gap: 0;align-items: start;width: auto !important;max-width: none !important;margin: 0 !important;padding: 0 !important;background: none !important;border-radius: 0 !important;min-height: 0 !important;height: auto !important}
html body .cijfers__toestel{position: relative !important;inset: auto !important;transform: none !important;scale: none !important;width: min(72%, 280px) !important;margin: 0 auto 56px !important;grid-column: 1 !important;grid-row: auto !important;order: -1}
html body .cijfers .reel__toestel{width: 100% !important;transform: rotate(-3.75deg) !important;padding: 0 !important;background: none !important;box-shadow: none !important;border-radius: 9cqw !important;backface-visibility: hidden;outline: 1px solid transparent;will-change: transform}
html body .cijfers .reel__knop,html body .cijfers .reel__eiland,html body .cijfers .reel__beeld::after{display: none !important}
html body .cijfers .reel__scherm{padding: 0 !important;background: none !important;box-shadow: none !important;border-radius: 9cqw !important}
html body .cijfers .reel__beeld{border-radius: 9cqw !important;background: transparent !important;-webkit-mask-image: -webkit-radial-gradient(white, black);box-shadow: 0 5cqw 10cqw -3cqw rgba(0,0,0,.3), 0 1.5cqw 3cqw rgba(0,0,0,.12)}
html body .cijfers .reel__beeld img{inset: -1px !important;width: calc(100% + 2px) !important;height: calc(100% + 2px) !important}
html body .cijfers__toestel{container-type: inline-size}
html body .cijfers__toestel .reel__toestel{position: relative;z-index: 1}
html body .cijfers h2{margin: 0 !important;grid-column: 1 !important;grid-row: auto !important;position: static !important;width: auto !important}
html body .cijfers .stappen{grid-column: 1 !important;grid-row: auto !important;position: static !important;width: auto !important;max-width: none !important;margin-left: 0 !important;margin-right: 0 !important}
html body .cijfers .stappen{margin-top: 32px !important}
@media (min-width: 821px){html body .cijfers__binnen{grid-template-columns: repeat(12, minmax(0, 1fr)) !important;column-gap: var(--goot) !important;grid-template-rows: 1fr auto auto auto 1fr}
html body .cijfers__toestel{grid-column: 1 / span 5 !important;grid-row: 1 / -1 !important;margin: 0 !important;width: min(100%, 360px) !important;justify-self: center;align-self: center;order: 0}
html body .cijfers h2{grid-column: 7 / -1 !important;grid-row: 2 !important}
html body .cijfers .stappen{grid-column: 7 / -1 !important;grid-row: 3 !important}
}
@media (min-width: 821px){html body .vragenkaart{grid-column: 7 / -1 !important;grid-row: 1 / span 4 !important;align-self: center !important}
}
html body .cijfers .reel__beeld{background: linear-gradient(160deg, #FFFFFF 0%, #ECECEC 100%) !important}
html body .cijfers__batterijen{container-type: inline-size;width: 100% !important;max-width: 460px;margin: 0 auto 40px !important}
html body .cijfers__batterijen .bewijs__beeld{--b: calc(100cqw / 218) !important;position: relative !important;left: auto !important;top: auto !important;width: calc(218 * var(--b)) !important;height: calc(203 * var(--b)) !important;margin: 0 !important;grid-column: auto !important;justify-self: auto !important}
@media (min-width: 821px){html body .cijfers__batterijen{width: 100% !important;margin: 0 !important}
}
html body .cijfers__batterijen .bewijs__beeld img{width: calc(173 * var(--b)) !important;height: calc(173 * var(--b)) !important}
html body .cijfers__batterijen .bewijs__beeld .bewijs__duo{left: calc(-.9 * var(--b)) !important;top: calc(-5.6 * var(--b)) !important;width: calc(207.8 * var(--b)) !important;height: calc(209.6 * var(--b)) !important}
@media (max-width: 820px){html body .cijfers__batterijen{max-width: 320px;margin-bottom: 48px !important}
}
html body .cijfers .stappen{position: relative;list-style: none;padding: 0 !important;display: grid !important;gap: 0 !important;background: none !important}
html body .cijfers .stappen .stap:nth-child(n){position: relative;display: grid !important;grid-template-columns: 28px 1fr auto !important;column-gap: 16px;align-items: start !important;padding: 0 0 28px !important;margin: 0 !important;background: none !important;border: 0 !important;border-radius: 0 !important;box-shadow: none !important;min-height: 0 !important;height: auto !important}
html body .cijfers .stappen .stap:nth-child(n):last-child{padding-bottom: 0 !important}
html body .cijfers .stappen .stap:nth-child(n)::before{content: "";position: absolute;left: 13px;top: 28px;bottom: 0;width: 2px;background: #DDDDDD}
html body .cijfers .stappen .stap:nth-child(n):last-child::before{display: none}
html body .cijfers .stappen .stap.stap--nu:nth-child(n)::before{background: linear-gradient(var(--groen), #DDDDDD) !important}
html body .cijfers .stappen .stap:nth-child(n)::after{content: "";grid-column: 1;grid-row: 1 / span 2;width: 14px;height: 14px;margin: 7px;border-radius: 50%;background: #DDDDDD}
html body .cijfers .stappen .stap.stap--nu:nth-child(n)::after{width: 28px;height: 28px;margin: 0;background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat}
html body .cijfers .stappen .stap:nth-child(n) b{grid-column: 2;grid-row: 1;display: block !important;width: auto !important;height: auto !important;padding: 0 !important;margin: 2px 0 0 !important;background: none !important;border-radius: 0 !important;font-size: var(--d-18) !important;font-weight: 500 !important;line-height: 1.35 !important;color: var(--inkt) !important;text-align: left !important;box-shadow: none !important}
html body .cijfers .stappen .stap:nth-child(n) > span{grid-column: 2;grid-row: 2;margin: 4px 0 0 !important;padding: 0 !important;font-size: var(--d-16) !important;line-height: 1.5 !important;color: #6B6B6B !important}
html body .cijfers .stappen .stap.stap--nu:nth-child(n) b,html body .cijfers .stappen .stap:nth-child(n) b{background: none !important;min-height: 0 !important;height: auto !important;animation: none !important}
@media (max-width: 1180px){html body .cijfers__batterijen{padding-bottom: 56px}
}
html body .batterij-dag{position: absolute;z-index: 4;right: 0;bottom: calc(6 * var(--b));margin: 0;padding: 6px 16px;list-style: none;border-radius: 16px;background: rgba(255,255,255,.6);-webkit-backdrop-filter: blur(18px) saturate(1.2);backdrop-filter: blur(18px) saturate(1.2);box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 10px 30px -12px rgba(0,0,0,.2);--lijn: var(--inkt);--accent: var(--groen);--vlak: transparent}
html body .batterij-dag li{display: flex;align-items: center;gap: 12px;padding: 10px 0}
html body .batterij-dag li + li{border-top: 1px solid rgba(0,0,0,.08)}
html body .batterij-dag svg.dm{flex: none;width: 24px;height: 24px;stroke-width: 1.6}
html body .batterij-dag span{display: grid;font-size: 13px !important;line-height: 1.35 !important;color: #5A5A5A;white-space: nowrap}
html body .batterij-dag b{font-size: 14px;font-weight: 500;color: var(--inkt)}
@media (max-width: 1180px){html body .batterij-dag{right: 0;bottom: auto;top: calc(100% + 16px);max-width: 100%}
html body .cijfers__batterijen{padding-bottom: 136px !important}
}
html body .quote{background: #fff;padding: clamp(72px, 9vw, 140px) var(--rand-in)}
html body .quote__binnen{margin: 0;max-width: calc(10 * var(--kol) + 9 * var(--goot))}
html body .quote__tekst{margin: 0;font-size: var(--d-48) !important;font-weight: 500;line-height: 1.15 !important;letter-spacing: -.02em;color: var(--inkt);text-wrap: balance}
html body .quote__wie{display: flex;align-items: center;gap: 14px;margin: 0 0 clamp(20px, 2.4vw, 32px)}
html body .quote__wie img{width: 56px;height: 56px;border-radius: 50%;object-fit: cover}
html body .quote__wie span{display: grid;font-size: 14px !important;line-height: 1.4 !important;color: #6B6B6B}
html body .quote__wie b{font-size: var(--d-16) !important;font-weight: 500;color: var(--inkt)}
html body .cijfers .stappen{margin-bottom: 0 !important}
html body .situatie > img{object-position: 50% 40% !important}
@media (max-width: 820px){html body .situatie > img{object-position: 60% 40% !important}
}
@media (max-width: 767px){html body .situatie > img{top: 0 !important;bottom: auto !important;height: min(100%, calc(100vw * 1.12)) !important;object-position: 48% 30% !important;-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);mask-image: linear-gradient(to bottom, #000 72%, transparent)}
}
@media (min-width: 821px){html body .situatie{height: clamp(680px, 52vw, 900px) !important;min-height: 0 !important}
}
@media (max-width: 820px){html body .situatie{min-height: 0 !important;height: auto !important;padding-top: 200px !important;padding-bottom: 48px !important}
}
html body .vraag .reel__toestel{transform: none !important}
html body .vraag .reel__vlak{top: auto !important;left: auto !important;right: clamp(-28px, -2.4vw, -16px) !important;bottom: clamp(-28px, -2.4vw, -16px) !important;width: 78% !important;height: 70% !important;border-radius: 9cqw !important;transform: none !important}
html body .situatie::before{background: none !important}
html body .situatie__tekst::before{background: rgba(0,0,0,.28) !important}
html body .situatie__tekst p::before{background: rgba(0,0,0,.18) !important}
html body .cijfers__batterijen .batterij-dag{right: auto !important;bottom: auto !important;left: calc(2 * var(--b)) !important;top: calc(104 * var(--b)) !important}
@media (max-width: 1180px){html body .cijfers__batterijen .batterij-dag{top: calc(100% + 16px) !important;left: 0 !important}
}
html body .situatie__tekst{left: 50% !important;right: auto !important;top: auto !important;bottom: clamp(48px, 6vw, 96px) !important;transform: translateX(-50%) !important;width: min(640px, calc(100% - 2 * var(--rand-in))) !important;max-width: none !important;text-align: center !important;display: flex !important;flex-direction: column;align-items: center}
html body .situatie__tekst > *{margin-left: auto !important;margin-right: auto !important}
html body .situatie__tekst > p.sectie-label{align-self: center !important;justify-self: center !important;margin: 0 auto 20px !important}
html body .situatie__tekst .situatie__knop{width: auto !important;align-self: center !important}
@media (max-width: 820px){html body .situatie__tekst{position: relative !important;left: auto !important;bottom: auto !important;transform: none !important;width: auto !important}
html body .situatie{padding-top: 280px !important}
}
html body .situatie__tekst{left: var(--rand-in) !important;transform: none !important;text-align: left !important;align-items: flex-start !important}
html body .situatie__tekst > *{margin-left: 0 !important;margin-right: 0 !important}
html body .situatie__tekst > p.sectie-label{align-self: flex-start !important;margin: 0 0 20px !important}
html body .situatie__tekst > p.sectie-label{background: rgba(255,255,255,.18) !important;-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);color: #fff !important;box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;background-clip: padding-box;transform: none !important}
html body .situatie__tekst .situatie__knop{align-self: flex-start !important}
@media (max-width: 820px){html body .situatie__tekst{left: auto !important}
}
@media (min-width: 1181px){html body .cijfers__batterijen .batterij-dag{width: calc(84 * var(--b)) !important;min-height: calc(57 * var(--b));padding: 8px 16px !important;display: flex;flex-direction: column;justify-content: center}
html body .batterij-dag span{white-space: normal !important}
}
@media (min-width: 821px){html body .cijfers__batterijen{align-self: start !important;grid-row: 2 / -1 !important;padding-top: 0 !important}
}
@media (min-width: 1181px){html body .cijfers__batterijen .batterij-dag{top: calc(116 * var(--b)) !important;transform: translateY(-50%)}
}
@media (min-width: 821px){html body .cijfers__binnen{grid-template-rows: 0 auto auto auto 1fr !important;row-gap: 0 !important}
}
@media (min-width: 821px){html body .cijfers__batterijen{grid-column: 1 / span 6 !important;justify-self: stretch !important;width: auto !important;max-width: none !important;margin: 0 !important}
html body .cijfers h2,html body .cijfers .stappen{grid-column: 7 / -1 !important}
}
@media (min-width: 1025px){html body .cijfers h2,html body .cijfers .stappen{grid-column: 8 / -1 !important}
}
html body .quote__tekst{padding-left: 0}
@media (min-width: 821px){html body .quote__binnen{display: grid !important;grid-template-columns: repeat(12, minmax(0, 1fr));column-gap: var(--goot);row-gap: clamp(20px, 2.4vw, 32px);max-width: none !important;align-items: center}
html body .quote__wie{display: contents !important}
html body .quote__wie img{grid-column: 1;grid-row: 1;justify-self: start}
html body .quote__wie span{grid-column: 2 / -1;grid-row: 1}
html body .quote__tekst{grid-column: 2 / span 10;grid-row: 2}
}
html body .aanmelden{background: var(--vlak);padding: clamp(64px, 8vw, 128px) var(--rand-in)}
html body .aanmelden__binnen{display: grid;gap: 32px;align-items: center}
@media (min-width: 821px){html body .aanmelden__binnen{grid-template-columns: repeat(12, minmax(0, 1fr));column-gap: var(--goot)}
html body .aanmelden__tekst{grid-column: 1 / span 6}
html body .aanmelden .advies{grid-column: 8 / -1;justify-self: end}
}
html body .aanmelden__tekst h2{margin: 0;font-size: var(--d-48) !important;font-weight: 500;line-height: 1.1 !important;letter-spacing: -.02em;color: var(--inkt);text-wrap: balance}
html body .aanmelden__intro{margin: clamp(16px, 1.8vw, 24px) 0 0;max-width: 34em;font-size: var(--d-18, 18px) !important;line-height: 1.55 !important;color: #474747}
html body .aanmelden__citaat{margin: clamp(24px, 2.6vw, 36px) 0 0;padding-left: 18px;border-left: 2px solid var(--inkt)}
html body .aanmelden__citaat blockquote{margin: 0;font-size: var(--d-24, 22px) !important;font-weight: 500;line-height: 1.3 !important;color: var(--inkt);text-wrap: balance}
html body .aanmelden__citaat figcaption{margin-top: 8px;font-size: 14px !important;line-height: 1.4 !important;color: #6B6B6B}
html body .aanmelden__contact{display: flex;flex-wrap: wrap;gap: 8px 28px;margin: clamp(24px, 2.6vw, 36px) 0 0}
html body .aanmelden__contact a{font-size: var(--d-16, 16px) !important;font-weight: 500;color: var(--inkt);text-decoration: none;padding-bottom: 4px;border-bottom: 1px solid rgba(0,0,0,.35)}
html body .aanmelden__contact a:hover{border-bottom-color: var(--inkt)}
@media (max-width: 820px){html body section.aanmelden .advies{padding: 22px !important}
}
html body .aanmelden .advies{position: relative !important;inset: auto !important;left: auto !important;right: auto !important;top: auto !important;bottom: auto !important;width: 100% !important;max-width: 440px;min-width: 0 !important;margin: 0 !important;animation: none !important;-webkit-backdrop-filter: none !important;backdrop-filter: none !important;box-shadow: none !important}
html body .aanmelden .advies{display: block !important;height: auto !important;min-height: 0 !important;padding: 28px !important;border-radius: 20px !important;background: #fff !important;color: var(--inkt);box-shadow: 0 12px 40px rgba(0,0,0,.18)}
html body .aanmelden .advies__kop{margin: 0 0 16px;font-size: var(--d-32) !important;font-weight: 500;line-height: 1.15 !important;letter-spacing: -.01em;color: var(--inkt);text-wrap: balance}
html body .aanmelden .advies__punten{margin: 0 0 20px;padding: 0;list-style: none;display: grid;gap: 8px}
html body .aanmelden .advies__punten li{position: relative;padding-left: 26px;font-size: var(--d-16) !important;line-height: 1.4 !important;color: #474747}
html body .aanmelden .advies__punten li::before{content: "";position: absolute;left: 0;top: .2em;width: 16px;height: 16px;background: #1E9E4A;-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}
html body .aanmelden .advies__sub{margin: 0 0 12px;font-size: var(--d-16) !important;font-weight: 500;line-height: 1.3 !important;color: var(--inkt)}
html body .aanmelden .advies__velden{display: grid;grid-template-columns: 1fr 1fr;gap: 8px}
html body .aanmelden .advies__veld--postcode{grid-column: 1 / -1}
html body .aanmelden .advies__veld{position: relative;display: block}
html body .aanmelden .advies__veld svg{position: absolute;left: 14px;top: 50%;translate: 0 -50%;width: 16px;height: 16px;fill: none;stroke: var(--inkt);stroke-width: 1.8;stroke-linejoin: round;pointer-events: none}
html body .aanmelden .advies input{position: static !important;width: 100% !important;height: 48px !important;margin: 0;padding: 0 12px 0 38px !important;border: 0;border-radius: 10px !important;background: var(--vlak) !important;color: var(--inkt);font: 400 16px Lufga, system-ui, sans-serif !important}
html body .aanmelden .advies__veld--kaal input{padding-left: 14px !important}
html body .aanmelden .advies input::placeholder{color: #8A8A8A}
html body .aanmelden .advies input:focus-visible{outline: 2px solid var(--inkt);outline-offset: 1px;box-shadow: none}
html body .aanmelden .advies input[aria-invalid="true"]{box-shadow: inset 0 0 0 1.5px #B4320A}
html body .aanmelden .advies__fout{margin: 8px 0 0;font-size: 14px !important;line-height: 1.4 !important;color: #B4320A}
html body .aanmelden .advies__knop{position: static !important;display: flex;justify-content: center;width: 100% !important;height: 52px !important;margin: 12px 0 0;border-radius: 999px !important;font-size: 15px !important}
html body .aanmelden .advies__klein{margin: 12px 0 0;text-align: center;font-size: 14px !important;line-height: 1.4 !important;color: #474747}
html body .aanmelden .advies__klein b{font-weight: 500;color: var(--inkt)}
html body section.quote .quote__binnen{display: flex !important;flex-direction: column;margin: 0 auto}
html body section.quote .quote__tekst{order: 1;margin: 0;text-indent: -.42em;font-size: var(--d-48) !important;line-height: 1.18 !important;letter-spacing: -.02em;text-wrap: pretty}
html body section.quote .quote__wie{order: 2;display: flex !important;align-items: center;gap: 16px;margin: clamp(28px, 3vw, 44px) 0 0}
html body section.quote .quote__wie img{width: 56px;height: 56px;border-radius: 50%;object-fit: cover;box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--groen)}
html body section.quote .quote__wie span{display: grid;gap: 2px}
html body section.quote .quote__wie b{font-size: var(--d-18) !important;font-weight: 500;line-height: 1.3 !important;color: var(--inkt)}
html body section.quote .quote__wie small{font-size: 14px !important;line-height: 1.4 !important;color: #6B6B6B}
@media (min-width: 821px){html body section.quote .quote__binnen{display: grid !important;grid-template-columns: repeat(12, minmax(0, 1fr));column-gap: var(--goot);row-gap: 0}
html body section.quote .quote__tekst{grid-column: 2 / span 10;grid-row: 1}
html body section.quote .quote__wie{grid-column: 2 / span 10;grid-row: 2}
}
@media (max-width: 767px){html body section.quote{padding-top: 56px !important;padding-bottom: 56px !important}
html body section.quote .quote__binnen{max-width: none !important;margin: 0 !important;padding-left: .42em;font-size: clamp(22px, 6.4vw, 28px)}
html body section.quote .quote__tekst{grid-column: 1 / -1 !important;font-size: clamp(22px, 6.4vw, 28px) !important;line-height: 1.22 !important}
html body section.quote .quote__wie{grid-column: 1 / -1 !important;margin-top: 24px !important}
html body section.quote .quote__wie img{width: 48px;height: 48px}
}
@media (min-width: 821px){html body footer.voet .voet__binnen{grid-template-columns: 2fr 1fr 1fr 1fr !important}
}
@media (min-width: 821px) and (max-width: 1099px){html body .hero{height: auto !important;min-height: 0 !important}
html body .hero__binnen{display: flex !important;flex-direction: column !important;align-items: flex-start !important;justify-content: flex-end !important;gap: 32px !important;height: auto !important;min-height: 760px !important;padding: 220px var(--rand-in) calc(72px + 48px) !important}
html body .hero__binnen::before{content: "";position: absolute;inset: 0;z-index: 0;pointer-events: none;background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,0) 85%) !important}
html body .hero .tekst,html body .hero .advies{position: relative !important;z-index: 1;inset: auto !important;margin: 0 !important}
html body .hero .tekst__intro{max-width: 34em !important}
html body .hero .advies{width: min(100%, 560px) !important}
html body .gesprek__binnen{grid-template-columns: minmax(0, 1fr) !important;row-gap: 40px !important}
html body section.gesprek .gesprek__binnen > *{grid-column: 1 / -1 !important;grid-row: auto !important}
html body .gesprek__inhoud{order: -1}
html body .gesprek__media{width: 100% !important}
html body section.cijfers .cijfers__binnen{grid-template-columns: minmax(0, 1fr) !important;grid-template-rows: none !important;row-gap: 24px !important}
html body section.cijfers .cijfers__binnen > *,html body section.cijfers .cijfers__binnen h2,html body section.cijfers .cijfers__binnen .stappen{grid-column: 1 / -1 !important;grid-row: auto !important}
html body section.cijfers .cijfers__binnen .cijfers__batterijen{width: 100% !important;max-width: 560px !important;justify-self: start !important;margin: 0 0 32px !important}
html body .aanmelden__binnen{grid-template-columns: minmax(0, 1fr) !important;row-gap: 40px !important}
html body section.aanmelden .aanmelden__tekst,html body section.aanmelden form.advies{grid-column: 1 / -1 !important;justify-self: start !important}
html body .aanmelden .advies{max-width: 560px !important}
html body footer.voet .voet__binnen{grid-template-columns: repeat(3, minmax(0, 1fr)) !important}
html body footer.voet .voet__merk{grid-column: 1 / -1 !important}
}
@media (min-width: 1100px){html body .aanmelden .advies{min-width: 400px}
}
html body .advies__velden{grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important}
html body .advies input{text-overflow: ellipsis}
html body .advies__knop{height: auto !important;min-height: 52px;padding: 12px 20px !important;white-space: normal !important;text-align: center;line-height: 1.3}
@media (max-width: 1180px){html body .cijfers__batterijen{padding-bottom: 0 !important}
html body .cijfers__batterijen .batterij-dag{top: calc(116 * var(--b)) !important;left: calc(2 * var(--b)) !important;right: auto !important;bottom: auto !important;transform: translateY(-50%);width: max(calc(84 * var(--b)), 168px) !important;max-width: none !important;padding: 6px 14px !important}
html body .batterij-dag span{white-space: normal !important}
}
@media (max-width: 600px){html body .cijfers__batterijen{max-width: 360px !important}
html body .batterij-dag li{gap: 10px;padding: 8px 0}
html body .batterij-dag svg.dm{width: 20px;height: 20px}
}
@media (min-width: 821px) and (max-width: 1099px){html body section.faq .faq__binnen{grid-template-columns: minmax(0, 1fr) !important}
html body section.faq .faq__binnen > div:first-child{grid-column: 1 / -1 !important;padding-right: 0 !important}
html body section.faq .faq__antwoord{grid-column: 1 / -1 !important;position: static !important;margin: 8px 0 16px !important}
html body section.faq .faq__media{aspect-ratio: 16 / 9 !important}
html body section.faq .faq__intro{max-width: 34em}
}
@media (min-width: 821px) and (max-width: 1099px){html body section.aanmelden form.advies{width: 100% !important;max-width: none !important;justify-self: stretch !important}
html body section.aanmelden .advies__velden{grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) !important}
html body section.aanmelden .advies__veld--postcode{grid-column: auto !important}
html body section.aanmelden .advies__punten{display: flex !important;flex-wrap: wrap;gap: 8px 28px !important}
}
html body .skiplink{position: absolute;left: 12px;top: -60px;z-index: 1000;padding: 12px 18px;border-radius: 8px;background: #000;color: #fff;font: 500 15px Lufga, system-ui, sans-serif;text-decoration: none;transition: top .15s}
html body .skiplink:focus{top: 12px;outline: 2px solid var(--groen);outline-offset: 2px}
html body video:focus-visible{outline: 3px solid var(--groen) !important;outline-offset: 3px}
@media (max-width: 820px){html body .nav__merk{min-height: 44px;display: inline-flex;align-items: center}
html body .nav .duo{flex: none !important;height: 48px !important}
html body .nav .duo > *{flex: none !important;width: 48px !important;height: 48px !important}
html body .nav__merk{flex: none !important}
html body .nav__merk svg{width: min(178px, calc(100vw - 160px)) !important;height: auto !important}
html body footer.voet .voet__kolom a,html body .aanmelden__contact a,html body .contact a{min-height: 44px;display: inline-flex;align-items: center}
html body footer.voet .voet__kolom{gap: 0 !important}
html body .hoofdstuk span,html body [data-hoofdstukken] button span{font-size: 13px !important}
}
@media (max-width: 400px){html body .advies__velden{grid-template-columns: minmax(0, 1fr) !important}
html body .advies__veld--postcode{grid-column: auto !important}
}
@media (min-width: 821px) and (max-width: 1099px){html body .hero .advies{width: 100% !important;max-width: none !important;align-self: stretch !important}
html body .hero .advies__velden{grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) !important}
html body .hero .advies__veld--postcode{grid-column: auto !important}
}
:root{color-scheme: only light}
html body input,html body textarea,html body select{color: var(--inkt) !important;-webkit-text-fill-color: var(--inkt)}
html body input::placeholder{-webkit-text-fill-color: #8A8A8A}
@media (hover: hover){html body .faq__vraag:hover{background: rgba(87,226,127,.10) !important}
html body .duo__menu:hover{filter: brightness(1.35)}
}
html body .tekst__label{display: inline-flex;align-items: center;height: 36px;margin: 0 0 16px;padding: 0 16px;border-radius: 999px;background: rgba(255,255,255,.18);-webkit-backdrop-filter: blur(20px);backdrop-filter: blur(20px);color: #fff;font-size: 14px !important;font-weight: 400;line-height: 1 !important;letter-spacing: 0;white-space: nowrap;animation: kopBinnen 360ms var(--uit) 40ms both}
@media (prefers-reduced-motion: reduce){html body .tekst__label{animation: none}
}
html body .tekst__reclame{display: inline-flex;align-items: center;gap: 10px;margin-left: 10px;color: rgba(255,255,255,.9)}
html body .tekst__reclame::before{content: "";width: 1px;height: 14px;background: rgba(255,255,255,.55)}
html body .tekst__intro{margin: 16px 0 0;max-width: min(34em, calc(6 * var(--kol) + 5 * var(--goot)));color: rgba(255,255,255,.92);font-size: var(--d-18) !important;line-height: 1.5 !important;font-weight: 400;text-wrap: pretty;animation: kopBinnen 360ms var(--uit) 320ms both}
@media (max-width: 820px){html body .tekst__intro{max-width: none}
}
@media (prefers-reduced-motion: reduce){html body .tekst__intro{animation: none}
}
html body .lijn3__kop,html body .route h2,html body .situatie__tekst h2,html body .faq h2{font-size: var(--d-64) !important;line-height: 1.05 !important}
html body .vraag__tekst blockquote,html body .dag__binnen h2,html body .cijfers__binnen h2{font-size: var(--d-48) !important;line-height: 1.1 !important}
html body h2 > strong,html body h2 > span{font-size: inherit !important}
html body .lijn3__tekst h3,html body .gesprek__tekst,html body .gesprek__tekst > span{font-size: var(--d-32) !important;line-height: 1.2 !important}
html body .moment h3,html body .faq__tekst h3,html body .plan__inhoud h3,html body .vragenkaart legend{font-size: var(--d-24) !important;line-height: 1.3 !important}
html body .bewijsbalk dt > span{font-size: var(--d-40) !important}
html body .vraag__sub,html body .route__intro,html body .situatie__tekst > p,html body .faq__intro{font-size: var(--d-20) !important;line-height: 1.5 !important}
html body .faq__verder{justify-content: flex-start !important}
html body .faq__verder .pil.faq__meer{background: transparent !important;color: var(--inkt) !important;box-shadow: inset 0 0 0 1.5px currentColor !important}
html body .faq__verder .pil.faq__meer:hover{background: rgba(0,0,0,.05) !important}
html body .cijfers .stappen.stappen--punten .stap:nth-child(n)::before{display: none !important}
html body .cijfers .stappen.stappen--punten .stap:nth-child(n) b{color: var(--inkt) !important}
html body .cijfers .stappen.stappen--punten .stap:nth-child(n){padding-bottom: clamp(18px, 1.8vw, 26px) !important}
html body .cijfers .stappen.stappen--punten .stap:nth-child(n):last-child{padding-bottom: 0 !important}
@media (max-width: 767px){html body .faq__verder{gap: 10px !important}
html body .faq__verder .pil{flex: 1 1 100%;justify-content: center}
}
html body section.faq h2 + .faq__lijst{margin-top: clamp(24px, 2.8vw, 40px) !important}
html body section p,html body section li,html body section label.keuze,html body .faq__vraag > span,html body .voet__merk p,html body .voet__kolom a{font-size: var(--lees) !important;line-height: 1.55 !important}
html body .bewijsbalk dd,html body .bewijsbalk blockquote,html body .bewijsbalk__wie,html body .bewijsbalk__score,html body .plan__hulp,html body .voet__onder{font-size: var(--d-16) !important}
html body .route__label,html body .vraag__tekst h2,html body .voet__kolom h2,html body .plan__stap > span,html body .plan__veld > span{font-size: 14px !important}
html body .pil{font-size: 15px !important}
html body input:not([type="radio"]):not([type="checkbox"]),html body select,html body textarea{font-size: 16px !important}
.hero__film{display: inline-flex;align-items: center;gap: 12px;margin-top: 24px;padding: 0;border: 0;background: none;color: rgb(255,255,254);font: 500 16px/1 Lufga, system-ui, sans-serif;cursor: pointer}
.hero__film-rond{width: 44px;height: 44px;border-radius: 50%;display: grid;place-items: center;box-shadow: inset 0 0 0 1.5px rgba(255,255,254,.9);transition: background .2s ease, scale .2s ease}
.hero__film-rond svg{width: 16px;height: 16px;fill: currentColor;margin-left: 2px}
.hero__film:hover .hero__film-rond{background: rgba(255,255,254,.16);scale: 1.06}
.hero__film-duur{font-weight: 400;opacity: .7}
.hero__film:focus-visible{outline: 3px solid var(--groen);outline-offset: 4px;border-radius: 999px}
.heropop{position: fixed;inset: 0;width: 100%;height: 100%;max-width: none;max-height: none;margin: 0;padding: 0;border: 0;background: transparent;overflow: hidden}
.heropop:not([open]){display: none}
.heropop::backdrop{background: transparent}
.heropop__achter{position: absolute;inset: 0;background: rgba(0,0,0,.86);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);opacity: 0;transition: opacity .4s ease}
.heropop.open .heropop__achter{opacity: 1}
.heropop__binnen{position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;padding: calc(72px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));box-sizing: border-box;pointer-events: none}
.heropop__kader{pointer-events: auto;width: min(100%, 1200px, calc((100dvh - 120px) * 16 / 9));aspect-ratio: 16 / 9;border-radius: 20px;overflow: hidden;background: rgb(0,0,0);box-shadow: 0 30px 80px rgba(0,0,0,.5);transform-origin: 0 0}
.heropop__kader video{display: block;width: 100%;height: 100%;object-fit: contain;background: rgb(0,0,0)}
.heropop__sluit{position: absolute;z-index: 2;top: calc(16px + env(safe-area-inset-top));right: 16px;width: 44px;height: 44px;padding: 0;border: 0;border-radius: 50%;display: grid;place-items: center;background: rgb(255,255,254);color: rgb(20,20,20);cursor: pointer;box-shadow: 0 6px 20px rgba(0,0,0,.3);opacity: 0;scale: .8;transition: opacity .25s ease .12s, scale .3s cubic-bezier(.2,.8,.2,1) .12s}
.heropop.open .heropop__sluit{opacity: 1;scale: 1}
.heropop__sluit svg{width: 18px;height: 18px}
.heropop__sluit:focus-visible{outline: 3px solid var(--groen);outline-offset: 3px}
html.heropop-aan{overflow: hidden}
@media (prefers-reduced-motion: reduce){.heropop__achter,.heropop__sluit{transition: opacity .15s linear !important;scale: none !important}
}
@font-face{font-family: LufgaMenu;font-weight: 600;font-display: swap;src: url(../assets/fonts/lufga-semibold-menu.woff2) format('woff2')}
html body .lade .lade__domogo{display: flex;gap: 8px;align-items: center;color: var(--inkt);font-family: LufgaMenu, Lufga, sans-serif;font-weight: 600 !important}
html body .hero .advies__panelen{grid-column: 1 / -1 !important;position: relative;display: flex;align-items: center;gap: 6px;height: 48px;padding: 0 6px 0 38px;border-radius: 10px;background: var(--vlak)}
html body .hero .advies__panelen svg{position: absolute;left: 14px;top: 50%;translate: 0 -50%;width: 16px;height: 16px;fill: none;stroke: var(--inkt);stroke-width: 1.6;stroke-linejoin: round;stroke-linecap: round}
html body .hero .advies__panelen-kop{flex: 1;min-width: 0;font-size: 15px;color: var(--inkt);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
html body .hero .advies__keuze{flex: none;min-width: 58px;height: 36px;padding: 0 12px;border: 1px solid #E3E3E3;border-radius: 8px;background: #fff;color: var(--inkt);font: 400 15px Lufga, system-ui, sans-serif;cursor: pointer;transition: background .15s, border-color .15s}
html body .hero .advies__keuze[aria-pressed="true"]{background: var(--groen);border-color: var(--groen);font-weight: 500}
html body .hero .advies__keuze:focus-visible{outline: 2px solid var(--inkt);outline-offset: 1px}
@media (hover: hover){html body .hero .advies__keuze[aria-pressed="false"]:hover{border-color: #BDBDBD}
}
@media (max-width: 400px){html body .hero .advies__keuze{min-width: 0;padding: 0 10px}
html body .hero .advies__panelen-kop{font-size: 14px}
}
@media (min-width: 1100px){html body .hero__binnen{align-items:start!important;align-content:center!important}
}

/* ---------- Local additions (not in the design) ----------
   Step 2 of the adviesformulier: after a valid address the same panel asks name, phone and email.
   Fields reuse .advies__veld; these rules lay them out and style the checkbox, back link and honeypot. */
html body .advies [hidden]{display: none !important}
html body .advies__velden--contact{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important}
html body .advies__velden--contact .advies__veld:first-child{grid-column: 1 / -1 !important}
@media (max-width: 480px){html body .advies__velden--contact{grid-template-columns: minmax(0, 1fr) !important}}
html body .advies__velden--contact input{width: 100%}
.advies__stap{margin: 0 0 10px;font-size: 14px;line-height: 1.4;color: #474747}
.advies__stap b{font-weight: 500;color: var(--inkt)}
.advies__terug{display: inline;margin: 0 0 0 4px;padding: 0;border: 0;background: none;font: inherit;color: inherit;text-decoration: underline;cursor: pointer}
html body .advies .advies__vinkje{display: flex;gap: 10px;align-items: flex-start;margin: 10px 0 0;font-size: 14px;line-height: 1.4;color: #474747;cursor: pointer}
html body .advies .advies__vinkje input{appearance: auto;-webkit-appearance: checkbox;position: static !important;flex: none;width: 18px !important;height: 18px !important;margin: 1px 0 0 !important;padding: 0 !important;border-radius: 4px !important;background: none !important;box-shadow: none !important;accent-color: #1E9E4A}
html body .advies .advies__vinkje a{text-decoration: underline}
html body .advies [aria-invalid="true"]{box-shadow: 0 0 0 2px #B4320A !important}
.advies.is-bezig .advies__knop{opacity: .6;pointer-events: none}
html body form.advies input.honing.honing{position: absolute !important;left: -9999px !important;width: 1px !important;height: 1px !important;margin: 0 !important;padding: 0 !important;opacity: 0}
/* Cijfers verticaal centreren in de kaart (kaart rekt mee met de reviewkaart) */
html body .bewijsbalk .bewijsbalk__cijfers > div{display: flex;flex-direction: column;justify-content: center}

/* Onderste formulier (.aanmelden) gelijk aan het kopformulier: zonnepanelen-keuze, zelfde regels als .hero (ook donker) */
html body .aanmelden .advies__panelen{grid-column:1 / -1 !important;position:relative;display:flex;align-items:center;gap:6px;height:48px;padding:0 6px 0 38px;border-radius:10px;background:var(--vlak)}
html body .aanmelden .advies__panelen svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:16px;height:16px;fill:none;stroke:var(--inkt);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
html body .aanmelden .advies__panelen-kop{flex:1;min-width:0;font-size:15px;color:var(--inkt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .aanmelden .advies__keuze{flex:none;min-width:58px;height:36px;padding:0 12px;border:1px solid #E3E3E3;border-radius:8px;background:#fff;color:var(--inkt);font:400 15px Lufga,system-ui,sans-serif;cursor:pointer;transition:background .15s,border-color .15s}
html body .aanmelden .advies__keuze[aria-pressed="true"]{background:var(--groen);border-color:var(--groen);font-weight:500}
html body .aanmelden .advies__keuze:focus-visible{outline:2px solid var(--inkt);outline-offset:1px}
@media (hover:hover){html body .aanmelden .advies__keuze[aria-pressed="false"]:hover{border-color:#BDBDBD}}
@media (max-width:400px){html body .aanmelden .advies__keuze{min-width:0;padding:0 10px}}
@media (max-width:400px){html body .aanmelden .advies__panelen-kop{font-size:14px}}
@media (prefers-color-scheme:dark){html body .aanmelden .advies__panelen{background:var(--vlak)}}
@media (prefers-color-scheme:dark){html body .aanmelden .advies__panelen-kop{color:var(--inkt)}}
@media (prefers-color-scheme:dark){html body .aanmelden .advies__keuze{border:1px solid rgb(52,57,54);background:rgb(20,22,21);color:var(--inkt)}}
@media (prefers-color-scheme:dark){html body .aanmelden .advies__keuze[aria-pressed="true"]{background:var(--groen);border-color:var(--groen)}}
@media (prefers-color-scheme:dark){html body .aanmelden .advies__keuze:focus-visible{outline:2px solid var(--inkt)}}
@media (prefers-color-scheme:dark){@media (hover:hover){html body .aanmelden .advies__keuze[aria-pressed="false"]:hover{border-color:rgb(52,57,54)}}}
@media (prefers-color-scheme:dark){html body .aanmelden .advies__keuze[aria-pressed="true"]{color:rgb(0,0,0)!important;background:rgb(87,226,127)!important;border-color:rgb(87,226,127)!important}}
@media (prefers-color-scheme:dark){html body .aanmelden .advies__panelen{background:rgb(44,49,46)!important;box-shadow:inset 0 0 0 1px rgb(62,68,64)!important}}

/* Mobiel: vaste CTA-balk onderin (katja.js toont hem na het kopformulier, niet als een formulier of de footer in beeld is) */
.ctabalk{display: none}
@media (max-width: 820px){
.ctabalk{display: flex;gap: 10px;position: fixed;left: 0;right: 0;bottom: 0;z-index: 40;padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));background: rgba(255,255,255,.94);-webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);box-shadow: 0 -1px 0 rgba(0,0,0,.08), 0 -8px 24px rgba(0,0,0,.08);translate: 0 110%;transition: translate .3s cubic-bezier(.2,.7,.2,1)}
.ctabalk.is-zichtbaar{translate: 0 0}
html body .ctabalk .ctabalk__knop{position: static;display: flex;flex: 1;min-width: 0;width: auto;height: 52px;padding: 0 20px;border-radius: 8px !important;font-size: 16px}
.ctabalk__bel{flex: none;display: grid;place-items: center;width: 52px;height: 52px;border-radius: 8px;background: #fff;color: #2B2B2B;box-shadow: inset 0 0 0 1.5px #2B2B2B}
.ctabalk__bel svg{width: 22px;height: 22px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linejoin: round}
.ctabalk__bel:focus-visible{outline: 3px solid #57E27F;outline-offset: 2px}
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce){.ctabalk{transition: none}}
html.heropop-aan .ctabalk{display: none}
@media (prefers-color-scheme: dark){@media (max-width: 820px){.ctabalk{background: rgba(20,22,21,.94);box-shadow: 0 -1px 0 rgb(52,57,54), 0 -8px 24px rgba(0,0,0,.4)}.ctabalk__bel{background: rgb(44,49,46);color: rgb(241,243,242);box-shadow: inset 0 0 0 1px rgb(72,79,75)}}}

/* Mobiel (staande kopfoto): foto iets omhoog zodat Katja hoger in beeld staat, tekst iets omlaag */
@media (max-width: 767px){html body .hero .hero__kopfoto{top: calc(var(--fh) * -.08) !important;height: calc(var(--fh) * 1.08) !important}html body .hero .tekst{min-height: calc(var(--fh) - 68px)}}

/* Knop van het onderste formulier gelijk aan die in de kop (afronding 8px i.p.v. pil) */
html body .aanmelden .advies__knop{border-radius: 8px !important}

/* Kop: achtergrondvideo (startbeeld = eerste frame), zonder spiegelen */
html body .hero .hero__kopvideo{scale: none !important;object-position: 50% 50% !important;pointer-events: none}
@media (max-width: 767px){html body .hero .hero__kopvideo{position: absolute !important;top: 0 !important;left: 0 !important;right: 0 !important;width: 100% !important;height: var(--fh) !important;object-fit: cover}}


/* Kop (desktop): tekstblok verticaal gecentreerd naast het formulier. Het label zonder backdrop-filter:
   die gaf in Chrome een zichtbaar vlak in de video rond de kop. */
@media (min-width: 821px){html body .hero__binnen{align-items: center !important}
}
html body .hero .tekst__label{-webkit-backdrop-filter: none !important;backdrop-filter: none !important;background: rgba(0,0,0,.32) !important}

/* Kop: geluidsknop linksboven */
html body .hero .hero__geluid{position: absolute;z-index: 3;top: 20px;left: var(--rand-in, 20px);display: inline-flex;align-items: center;justify-content: center;width: 44px;height: 44px;padding: 0;border: 0;border-radius: 999px;background: rgba(0,0,0,.32);color: #fff;cursor: pointer;transition: background .2s}
html body .hero .hero__geluid:hover{background: rgba(0,0,0,.5)}
html body .hero .hero__geluid:focus-visible{outline: 2px solid #fff;outline-offset: 2px}
html body .hero .hero__geluid[hidden]{display: none}
html body .hero .hero__geluid svg{width: 22px;height: 22px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round}
html body .hero .hero__geluid svg path:first-child{fill: currentColor}
html body .hero .hero__geluid[aria-pressed="true"] .hero__geluid-uit,html body .hero .hero__geluid[aria-pressed="false"] .hero__geluid-aan{display: none}
@media (max-width: 820px){html body .hero .hero__geluid{top: 16px;left: 16px}
}

/* Zonnepanelen: vier keuzes (<6, 6-10, 10-20, 20+). Kop met icoon op de eerste regel, knoppen even breed eronder. */
html body .advies .advies__panelen{display: grid !important;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 6px;height: auto !important;padding: 10px 6px 6px !important}
html body .advies .advies__panelen svg{top: 22px !important}
html body .advies .advies__panelen-kop{grid-column: 1 / -1;padding-left: 32px;line-height: 24px}
html body .advies .advies__keuze{min-width: 0 !important;padding: 0 4px !important}

/* Donker: de regels die in het donkere ontwerp anders zijn, voor wie zijn toestel op donkere modus heeft staan.
   Gegenereerd uit claude.ai artifact TiZoV2wHEbACN3gX9SLCGn, version 1794406005 (licht vs. -donker). */
@media (prefers-color-scheme: dark){
:root{--groen:rgb(87,226,127);--groen-hover:rgb(63,208,106);--inkt:rgb(241,243,242);--grijs:rgb(200,205,202)}
body{background:rgb(20,22,21)}
.nav{background:rgb(20,22,21)}
.pil{color:#000;background:var(--groen)}
.pil:hover{background:var(--groen-hover)}
.duo__app{background:var(--groen)}
.duo__menu{background:rgb(44,49,46)}
.duo__menu span,.duo__menu span::after{background:rgba(30,33,31,0.8)}
.lade{background:rgb(20,22,21)}
.lade a{color:var(--grijs);border-bottom:1px solid rgb(52,57,54)}
html body .lade .lade__domogo{color:var(--inkt)}
.hero{color:rgb(255,255,255);background:rgb(42,36,32)}
.vlek{background:rgba(0,0,0,0.56)}
.advies{background:rgba(30,33,31,0.75)}
.advies input{background:rgba(30,33,31,0.81);color:var(--inkt)}
.advies input::placeholder{color:rgba(241,243,242,0.6)}
@media (max-width:820px){.hero__binnen::before{background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.62) 42%,transparent 62%)}}
@media (max-width:820px){.advies{background:rgba(30,33,31,0.62)}}
.glas{background:rgba(30,33,31,0.74)}
.vraag{background:linear-gradient(rgb(30,33,31),rgb(20,22,21))}
.reel__toestel{background:linear-gradient(135deg,rgb(52,57,54) 0%,rgb(80,80,85) 10%,rgb(44,44,46) 28%,rgb(106,106,111) 50%,rgb(44,44,46) 72%,rgb(80,80,85) 90%,rgb(52,57,54) 100%)}
.reel__knop{background:linear-gradient(90deg,rgb(44,44,46),rgb(138,138,143) 50%,rgb(44,44,46))}
.reel__scherm{background:rgb(44,49,46)}
.reel__beeld{background:rgb(44,49,46)}
.reel__beeld::after{background:linear-gradient(118deg,rgba(30,33,31,0.18) 0%,rgba(30,33,31,0.06) 26%,rgba(30,33,31,0.0) 40%)}
.reel__eiland{background:rgb(44,49,46)}
.reel__eiland::after{background:rgb(44,49,46)}
.reel__speel{background:var(--groen)}
.vraag blockquote{color:rgb(241,243,242)}
.vraag__sub{color:var(--inkt)}
.dag::before{background:rgb(20,22,21)}
.dag h2{color:var(--inkt)}
.dag__label{color:var(--inkt)}
.dag__knoppen button{background:transparent;border:max(1px,calc(.5 * var(--u))) solid rgba(200,205,202,0.61);color:rgb(200,205,202)}
.dag__knoppen button:hover:not(:disabled){background:rgb(20,22,21)}
.gesprek__tekst{color:var(--inkt)}
.moment{background:rgb(20,22,21)}
.moment p{color:rgb(241,243,242)}
.geregeld h2{color:var(--inkt)}
.route{background:rgb(20,22,21)}
.route h2{color:var(--inkt)}
.cijfers h2{color:var(--inkt)}
.stap{background:rgb(20,22,21);color:rgb(160,167,163)}
.stap b{background:var(--groen);color:#000}
.vragenkaart{background:rgb(20,22,21)}
.vragenkaart__balk{background:rgba(30,33,31,0.47)}
.vragenkaart__balk span{background:var(--groen)}
.vragenkaart fieldset{border:0}
.vragenkaart legend{color:var(--inkt)}
.keuze{border:1px solid rgba(118,118,118,0.55);color:rgb(200,205,202)}
.keuze:hover{border-color:rgb(200,205,202)}
.keuze::before{border:1px solid rgba(0,0,0,0.37)}
.keuze:has(input:checked){border-color:var(--groen);background:rgba(87,226,127,0.08)}
.keuze:has(input:checked)::before{border-color:rgb(200,205,202);background:var(--groen)}
.vragenkaart__volgende:disabled:hover{background:var(--groen)}
.vragenkaart__klaar p{color:rgb(200,205,202)}
.vragenkaart__klaar ul{color:rgb(200,205,202)}
.vragenkaart__klaar li{background:rgb(20,22,21)}
.vragenkaart__klaar li b{color:var(--inkt)}
.vragenkaart__opnieuw{border:0;background:none;color:rgb(200,205,202)}
.situatie{color:rgb(255,255,255);background:rgb(42,36,32)}
.situatie::before{background:linear-gradient(to top,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.55) 30%,rgba(0,0,0,0.0) 62%),linear-gradient(to right,rgba(0,0,0,0.35),rgba(0,0,0,0.0) 55%)}
.situatie p{color:rgba(255,255,255,0.92)}
@media (max-width:820px){.situatie::before{background:linear-gradient(to top,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.6) 38%,rgba(0,0,0,0.0) 66%)}}
.plan{background:rgb(20,22,21)}
.plan__stap{color:rgb(160,167,163)}
.plan__balk{background:rgba(30,33,31,0.47)}
.plan__balk span{background:var(--groen)}
.plan h3{color:var(--inkt)}
.plan__veld span{color:rgb(200,205,202)}
.plan input{border:1px solid rgb(52,57,54);background:rgb(20,22,21);color:var(--inkt)}
.plan input::placeholder{color:rgb(154,154,154)}
.plan input:focus{border-color:var(--groen);background:rgb(20,22,21)}
.plan input[aria-invalid="true"]{border-color:rgb(194,65,12)}
.plan__hulp{color:rgb(160,167,163)}
.plan__fout{color:rgb(180,50,10)}
.plan__terug{border:0;background:none;color:rgb(200,205,202)}
.plan__klaar b{background:var(--groen)}
.plan__klaar p{color:rgb(200,205,202)}
.faq{background:rgb(20,22,21)}
.faq h2{color:var(--inkt)}
.faq__intro{color:rgb(241,243,242)}
.faq__vraag{border:1px solid transparent;background:rgb(20,22,21);color:var(--inkt)}
.faq__vraag:hover{border-color:rgba(0,0,0,0.15)}
.faq__vraag[aria-expanded="true"]{background:rgb(20,22,21);border-color:var(--groen)}
.faq__vraag span:last-child::after{border-right:1.5px solid rgb(110,110,110);border-bottom:1.5px solid rgb(110,110,110)}
.faq__vraag[aria-expanded="true"] span:last-child::after{border-color:var(--groen)}
.faq__antwoord{background:rgb(20,22,21)}
.faq__media{background:rgb(44,49,46)}
.faq__media video{background:rgb(44,49,46)}
.faq__speel{border:0;background:var(--groen)}
.faq__melding{background:rgba(0,0,0,0.62);color:rgb(255,255,255)}
.faq__duur{background:rgba(0,0,0,0.58);color:rgb(255,255,255)}
.faq__tekst p{color:rgb(200,205,202)}
.faq__tekst p a{color:var(--inkt)}
:root{--vlak:rgb(20,22,21)}
.pil::after{background:currentColor}
@media (min-width:821px){.nav__links a{color:var(--inkt)}}
@media (min-width:821px){.hero::before{background:radial-gradient(32% 42% at 24% 72%,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.0) 100%)}}
@media (min-width:821px){.vraag,.route,.faq{background:var(--vlak)}}
@media (min-width:821px){.vraag h2{background:rgb(20,22,21)}}
@media (min-width:821px){.vraag blockquote{color:var(--inkt)}}
@media (min-width:821px){.faq__antwoord{background:rgb(20,22,21)}}
@media (min-width:821px){.faq__vraag{background:rgb(20,22,21)}}
@media (min-width:821px){.faq__vraag[aria-expanded="true"]{background:rgb(20,22,21)}}
@media (min-width:821px) and (max-width:1079px){.hero::before{background:radial-gradient(42% 46% at 27% 72%,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.0) 100%)}}
@media (max-width:820px){.vraag h2{background:rgb(20,22,21)}}
@media (max-width:820px){.vraag,.route,.faq{background:var(--vlak)}}
@media (max-width:820px){.faq__vraag,.faq__antwoord{background:rgb(20,22,21)}}
.route__label{background:rgb(20,22,21)}
.route__intro{color:rgb(241,243,242)}
.vraag__sub{color:rgb(241,243,242)}
.reel::before{background:radial-gradient(closest-side,rgba(87,226,127,0.55) 35%,rgba(87,226,127,0.22) 62%,rgba(87,226,127,0.0) 100%)}
.vraag,.route{background:var(--vlak) !important}
.dag,.gesprek,.geregeld,.cijfers,.faq{background:rgb(20,22,21) !important}
.faq__vraag,.faq__vraag[aria-expanded="true"]{background:var(--vlak) !important}
.faq__vraag[aria-expanded="true"]{background:rgb(20,22,21) !important}
.faq__antwoord{background:var(--vlak) !important}
:root{--vlak:rgb(20,22,21)}
.faq__lijst{border-top:1px solid rgb(52,57,54)}
.faq__lijst li{border-bottom:1px solid rgb(52,57,54)}
.faq__vraag,.faq__vraag[aria-expanded="true"]{background:none !important;border:0 !important;color:rgb(200,205,202)}
.faq__vraag:hover{color:var(--inkt)}
.faq__vraag[aria-expanded="true"]{color:var(--inkt)}
.faq__vraag span:last-child::after{border-color:rgb(52,57,54)}
.faq__vraag[aria-expanded="true"] span:last-child::after{border-color:rgb(200,205,202)}
.faq__vraag:focus-visible{outline:2px solid rgb(200,205,202)}
.voet{background:rgb(44,49,46);color:rgb(255,255,255)}
.voet .logo{color:rgb(255,255,255)}
.voet__merk p{color:rgba(255,255,255,0.75)}
.voet__kolom h2{color:rgba(255,255,255,0.6)}
.voet__kolom a{color:rgb(255,255,255)}
.voet__onder{border-top:1px solid rgba(52,57,54,0.14);color:rgba(255,255,255,0.6)}
@media (min-width:821px){.hero::before{background:none !important}}
@media (min-width:821px){.tekst::before{background:rgba(0,0,0,0.3)}}
@media (min-width:821px){.advies{background:rgb(20,22,21) !important}}
@media (min-width:821px){.advies input{background:rgb(30,33,31) !important}}
.dag__baan:focus-visible{outline:2px solid rgb(200,205,202)}
.dag::before{background:var(--vlak) !important}
@media (max-width:820px){.hero__binnen::before{background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.66) 46%,rgba(0,0,0,0.0) 72%) !important}}
.dag__label{color:var(--inkt) !important}
.dag__knoppen button{border:1px solid rgb(52,57,54) !important;color:var(--inkt) !important;background:rgb(20,22,21) !important}
.dag__knoppen button:hover:not(:disabled){background:rgb(44,49,46) !important;border-color:rgb(200,205,202) !important;color:rgb(255,255,255) !important}
.dag__knoppen button:focus-visible{outline:2px solid rgb(200,205,202)}
@media (min-width:821px){.hero::before{background:linear-gradient(90deg,rgba(28,17,9,0.78) 0%,rgba(28,17,9,0.78) 32%,rgba(28,17,9,0.0) 46%) !important}}
@media (max-width:820px) and (max-height:700px){.hero__binnen::before{background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.76) 68%,rgba(0,0,0,0.0) 96%) !important}}
@media (min-width:821px){.hero::before{background:linear-gradient(270deg,rgba(28,17,9,0.78) 0%,rgba(28,17,9,0.78) 32%,rgba(28,17,9,0.0) 46%) !important}}
@media (min-width:821px){.hero::before,.tekst::before{background:none !important}}
.advies{background:rgba(30,33,31,0.9) !important}
.bewijsbalk{background:rgb(30,33,31)}
.bewijsbalk__cijfers,.bewijsbalk__review{background:rgb(20,22,21)}
.bewijsbalk__cijfers>div{border-left:1px solid rgb(52,57,54)}
.bewijsbalk__cijfers>div:first-child{border-left:0}
.bewijsbalk dt span{color:var(--inkt)}
.bewijsbalk dt sup{color:rgb(200,205,202)}
.bewijsbalk dd{color:rgb(241,243,242)}
.bewijsbalk__wie{color:var(--inkt)}
.bewijsbalk__review blockquote{color:rgb(241,243,242)}
.bewijsbalk__review blockquote b{color:var(--inkt)}
.bewijsbalk__review blockquote svg{color:rgb(29,107,53)}
.bewijsbalk__score{color:var(--inkt)}
@media (max-width:820px){.bewijsbalk__cijfers>div{border-left:0;border-top:1px solid rgb(52,57,54)}}
@media (max-width:820px){.bewijsbalk__cijfers>div:nth-child(-n+2){border-top:0}}
@media (max-width:820px){.bewijsbalk__cijfers>div:nth-child(even){border-left:1px solid rgb(52,57,54)}}
.vraag{background:rgb(30,33,31) !important}
.bewijsbalk,.vraag{background:var(--vlak) !important}
.bewijsbalk{background:linear-gradient(transparent 72px,var(--vlak) 72px) !important}
@media (max-width:820px){.bewijsbalk{background:linear-gradient(transparent 32px,var(--vlak) 32px) !important}}
.dag__kaart::after{background:linear-gradient(to top,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0.0) 42%)}
.dag__kaart::after{background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.52) 24%,rgba(0,0,0,0.0) 50%) !important}
.gesprek__tekst{color:var(--inkt)}
.geregeld{background:rgb(44,49,46) !important;color:rgb(255,255,255)}
.geregeld h2,.geregeld h2 strong{color:rgb(255,255,255) !important}
.geregeld{background:rgb(30,33,31) !important;color:var(--inkt)}
.geregeld h2,.geregeld h2 strong{color:var(--inkt) !important}
.cijfers{background:rgb(30,33,31) !important}
.cijfers .stap{background:rgb(20,22,21) !important}
.cijfers{background:rgb(20,22,21) !important}
.cijfers__binnen{background:rgb(30,33,31)}
.geregeld{background:rgb(20,22,21) !important}
.cijfers__toestel{background:none !important}
.reel__vlak{background:linear-gradient(140deg,rgba(87,226,127,0.28) 0%,rgba(87,226,127,0.62) 55%,rgba(60,180,100,0.7) 100%)}
@media (min-width:821px){.situatie::before{background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.6) 38%,rgba(0,0,0,0.0) 74%),linear-gradient(to right,rgba(0,0,0,0.45),rgba(0,0,0,0.0) 60%) !important}}
@media (min-width:821px){.situatie::before{background:linear-gradient(to top,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.66) 40%,rgba(0,0,0,0.0) 76%),linear-gradient(to right,rgba(0,0,0,0.45),rgba(0,0,0,0.0) 60%) !important}}
.situatie::before{background:linear-gradient(to top,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.18) 30%,rgba(0,0,0,0.0) 55%) !important}
.situatie__tekst::before{background:rgba(0,0,0,0.42)}
.situatie__tekst::before{background:rgba(0,0,0,0.55) !important}
.situatie__tekst p::before{background:rgba(0,0,0,0.35)}
.hero__video{background:rgb(42,36,32)}
@media (min-width:821px){.tekst::before{background:rgba(0,0,0,0.6) !important}}
.geregeld{background:rgb(20,22,21) !important}
.lijn3{--lijnkleur:rgb(52,57,54);--licht:rgb(30,33,31)}
.lijn3__stappen::before{background:var(--lijnkleur)}
.lijn3__nr{color:var(--licht)}
.lijn3__punt{background:var(--lijnkleur)}
.lijn3__tekst h3{color:var(--inkt)}
.lijn3__tekst p{color:rgb(241,243,242)}
.lijn3__stap--actief .lijn3__nr{color:transparent}
.lijn3__stap--actief::before{background:var(--groen)}
.lijn3__stap--actief .lijn3__punt{background:var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat}
.geregeld h2.lijn3__kop{color:var(--inkt) !important}
.lijn3__stap--actief .lijn3__nr{color:var(--groen) !important}
.lijn3__stap::after{background:var(--lijnkleur)}
.lijn3__stap--actief::after{background:linear-gradient(var(--groen) 0 55%,var(--lijnkleur) 55%)}
.lijn3__stappen{border:1px solid rgb(52,57,54)}
@media (min-width:821px){.gesprek__tekst span + span{color:rgb(160,167,163)}}
@media (max-width:820px){.gesprek__tekst span + span{color:rgb(160,167,163)}}
.gesprek__binnen{background:rgb(20,22,21);border:1px solid rgb(52,57,54)}
:root{--inkt:rgb(241,243,242)}
html,body{color:var(--inkt)}
:root{--tekst-grijs:rgb(200,205,202);--hulp-grijs:rgb(160,167,163)}
.vraag__sub,.moment:not(.moment--avond) p,.lijn3__tekst p,.route__intro,.cijfers .stap>span,.faq__intro,.faq__tekst p{color:var(--tekst-grijs) !important}
.plan__hulp{color:var(--hulp-grijs) !important}
section:not(.situatie) h2:not(.gesprek__kop),section:not(.situatie) h2:not(.gesprek__kop):is(strong,span),section h3:not(.moment--avond h3),section h3:is(strong,span){color:var(--inkt) !important}
.cijfers .stappen{background:none !important}
.cijfers .stappen .stap,.cijfers .stappen .stap:nth-child(n){background:rgb(20,22,21) !important;border:0 !important}
.cijfers .stappen .stap b,.cijfers .stappen .stap:nth-child(n) b{background:rgba(87,226,127,0.22) !important;color:var(--inkt) !important}
.cijfers .stappen .stap.stap--nu:nth-child(n) b{background:var(--groen) !important}
footer.voet{background:rgb(20,22,21) !important;color:var(--inkt) !important}
footer.voet .voet__merk,footer.voet .voet__kolom,footer.voet .logo{color:var(--inkt) !important}
footer.voet .voet__merk p{color:var(--tekst-grijs) !important}
footer.voet h2{color:var(--hulp-grijs) !important}
footer.voet .voet__kolom a{color:var(--inkt) !important}
footer.voet .voet__kolom a:hover{color:rgb(241,243,242) !important}
footer.voet .voet__onder{color:var(--hulp-grijs) !important;border-color:rgb(52,57,54) !important}
@media (max-width:820px){.advies{background:rgba(20,22,21,0.96) !important}}
.nav__links a,.voet__kolom a{background:linear-gradient(var(--groen),var(--groen)) 0 100% / 0 2px no-repeat}
a:focus-visible,button:focus-visible{outline:2px solid var(--inkt)}
@media (hover:hover){.keuze:hover{border-color:rgba(200,205,202,0.55)}}
.advies input:focus-visible{outline:none}
.nav.is-gescrold{background:rgba(20,22,21,0.97) !important}
@media (min-width:821px){.nav.is-gescrold{background:rgba(30,33,31,0.82) !important}}
html body .hero .advies{background:rgb(20,22,21) !important;color:var(--inkt)}
html body .hero .advies__kop{color:var(--inkt)}
html body .hero .advies__punten li{color:rgb(200,205,202)}
html body .hero .advies__punten li::before{background:rgb(30,158,74)}
html body .hero .advies__sub{color:var(--inkt)}
html body .hero .advies input{border:0;background:var(--vlak) !important;color:var(--inkt)}
html body .hero .advies__panelen{background:var(--vlak)}
html body .hero .advies__panelen-kop{color:var(--inkt)}
html body .hero .advies__keuze{border:1px solid rgb(52,57,54);background:rgb(20,22,21);color:var(--inkt)}
html body .hero .advies__keuze[aria-pressed="true"]{background:var(--groen);border-color:var(--groen)}
html body .hero .advies__keuze:focus-visible{outline:2px solid var(--inkt)}
@media (hover:hover){html body .hero .advies__keuze[aria-pressed="false"]:hover{border-color:rgb(52,57,54)}}
html body .hero .advies input::placeholder{color:rgb(160,167,163)}
html body .hero .advies input:focus-visible{outline:2px solid var(--inkt)}
html body .hero .advies__fout{color:rgb(180,50,10)}
html body .hero .advies__klein{color:rgb(200,205,202)}
html body .hero .advies__klein b{color:var(--inkt)}
html body .hero__kopfoto{background:rgb(42,36,32)}
@media (min-width:768px) and (max-width:1099px){html body .hero .hero__binnen::before{background:none !important}}
@media (min-width:768px) and (max-width:1099px){html body .hero .tekst::before{background:linear-gradient(to right,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0.45) 30%,rgba(0,0,0,0.0) 62%),linear-gradient(to top,rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.4) 18%,rgba(0,0,0,0.0) 36%) !important}}
@media (max-width:767px){html body .hero{background:var(--vlak) !important}}
@media (max-width:767px){html body .hero .hero__binnen::before{background:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.45) 40%,rgba(0,0,0,0.0) 70%) !important}}
@media (max-width:767px){html body .bewijsbalk .bewijsbalk__review{background:none;border-top:1px solid rgb(52,57,54)}}
@media (max-width:767px){html body .bewijsbalk .bewijsbalk__review blockquote b svg{color:inherit}}
@media (max-width:767px){html body .dag .dag__duim{border:0;background:none;color:var(--inkt)}}
@media (max-width:767px){html body .dag .dag__duim img{outline:2px solid transparent}}
@media (max-width:767px){html body .dag .dag__duim:focus-visible{outline:2px solid var(--inkt)}}
html body .vraag .vraag__titel{color:var(--inkt)}
html body .vraag .vraag__tekst blockquote{color:var(--inkt)}
html body .vraag .vraag__klein{color:rgb(160,167,163)}
html body .vraag .reel__toestel{background:none}
html body .vraag .reel__scherm{background:none}
html body .vraag .reel__beeld{background:transparent !important}
html body .vraag .reel__toestel{outline:1px solid transparent}
html body .vraag .reel__vlak{background:rgba(87,226,127,0.22) !important}
html body .dag__onderschrift b{color:var(--inkt)}
html body .dag__onderschrift span{color:rgb(160,167,163)}
html body .gesprek{background:rgb(20,22,21) !important}
html body .gesprek .gesprek--verhaal{background:none !important;border:0 !important}
html body .gesprek__vlak{background:rgba(0,0,0,0.06)}
html body .gesprek__video video{background:rgb(42,36,32)}
html body .gesprek__speel{border:0;background:var(--groen)}
html body .gesprek__speel:focus-visible{outline:3px solid rgb(52,57,54)}
html body .gesprek__speel svg{fill:rgb(241,243,242)}
html body .gesprek__video figcaption{color:var(--inkt)}
html body .gesprek__video::after{background:linear-gradient(to top,rgba(0,0,0,0.72),rgba(0,0,0,0.35) 55%,rgba(0,0,0,0.0))}
html body .gesprek__video figcaption{color:rgb(255,255,255)}
.videopop{border:0;background:transparent}
.videopop::backdrop{background:transparent}
.videopop__achter{background:rgba(0,0,0,0.84)}
.videopop__kader{background:rgb(42,36,32)}
.videopop__laden{background:rgba(0,0,0,0.4)}
.videopop__titel{color:rgb(255,255,255)}
.videopop__teller{color:rgb(255,255,255)}
.videopop__sluit,.videopop__nav button{border:0;background:rgb(20,22,21);color:rgb(241,243,242)}
.videopop__sluit:focus-visible,.videopop__nav button:focus-visible{outline:3px solid var(--groen)}
html body .gesprek .gesprek__label{background:rgb(20,22,21);color:var(--inkt)}
html body .gesprek .gesprek__tekst{color:var(--inkt)}
html body .gesprek .gesprek__uitleg{color:rgb(241,243,242)}
html body .gesprek .gesprek__aanloop{color:var(--inkt)}
html body .sectie-label{background:rgb(20,22,21) !important;color:var(--inkt) !important;border:0 !important}
html body .dag .sectie-label,html body .geregeld .sectie-label,html body .faq .sectie-label{background:rgb(30,33,31) !important}
html body .lijn3__kaart{border:1px solid rgb(52,57,54)}
html body .lijn3__kaart .lijn3__stappen{border:0 !important;background:none !important}
html body .route__video{background:rgb(42,36,32)}
html body .route__speel{border:0;background:var(--groen)}
html body .route__speel:focus-visible{outline:3px solid rgb(52,57,54)}
html body .route__speel svg{fill:rgb(241,243,242)}
html body .hoofdstuk{background:none;border:0}
html body .hoofdstuk__knop{border:0;background:none;color:inherit}
html body .hoofdstuk__balk{background:rgb(30,33,31)}
html body .hoofdstuk__balk span{background:var(--groen)}
html body .hoofdstuk__meta{color:rgb(160,167,163)}
html body .hoofdstuk__naam{color:rgb(200,205,202)}
html body .hoofdstuk__knop.is-actief .hoofdstuk__naam{color:var(--inkt)}
html body .hoofdstuk__knop:hover .hoofdstuk__naam{color:var(--inkt)}
html body .hoofdstuk__knop:focus-visible{outline:2px solid var(--inkt)}
html body .route .route__intro{color:rgb(241,243,242) !important}
html body .cijfers{background:rgb(20,22,21) !important}
html body .cijfers__binnen{background:none !important}
html body .cijfers .reel__toestel{background:none !important;outline:1px solid transparent}
html body .cijfers .reel__scherm{background:none !important}
html body .cijfers .reel__beeld{background:transparent !important}
html body .cijfers .reel__beeld{background:linear-gradient(160deg,rgb(20,22,21) 0%,rgb(30,33,31) 100%) !important}
html body .cijfers .stappen{background:none !important}
html body .cijfers .stappen .stap:nth-child(n){background:none !important;border:0 !important}
html body .cijfers .stappen .stap:nth-child(n)::before{background:rgb(30,33,31)}
html body .cijfers .stappen .stap.stap--nu:nth-child(n)::before{background:linear-gradient(var(--groen),rgb(30,33,31)) !important}
html body .cijfers .stappen .stap:nth-child(n)::after{background:rgb(30,33,31)}
html body .cijfers .stappen .stap.stap--nu:nth-child(n)::after{background:var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat}
html body .cijfers .stappen .stap:nth-child(n) b{background:none !important;color:var(--inkt) !important}
html body .cijfers .stappen .stap:nth-child(n)>span{color:rgb(160,167,163) !important}
html body .cijfers .stappen .stap.stap--nu:nth-child(n) b,html body .cijfers .stappen .stap:nth-child(n) b{background:none !important}
html body .batterij-dag{background:rgba(30,33,31,0.6);--vlak:transparent}
html body .batterij-dag li + li{border-top:1px solid rgba(0,0,0,0.08)}
html body .batterij-dag span{color:rgb(200,205,202)}
html body .batterij-dag b{color:var(--inkt)}
html body .quote{background:rgb(20,22,21)}
html body .quote__tekst{color:var(--inkt)}
html body .quote__wie span{color:rgb(160,167,163)}
html body .quote__wie b{color:var(--inkt)}
html body .situatie::before{background:none !important}
html body .situatie__tekst::before{background:rgba(0,0,0,0.28) !important}
html body .situatie__tekst p::before{background:rgba(0,0,0,0.18) !important}
html body .situatie__tekst>p.sectie-label{background:rgba(30,33,31,0.18) !important;color:rgb(255,255,255) !important}
html body .aanmelden{background:var(--vlak)}
html body .aanmelden__tekst h2{color:var(--inkt)}
html body .aanmelden__intro{color:rgb(200,205,202)}
html body .aanmelden__citaat{border-left:2px solid var(--inkt)}
html body .aanmelden__citaat blockquote{color:var(--inkt)}
html body .aanmelden__citaat figcaption{color:rgb(160,167,163)}
html body .aanmelden__contact a{color:var(--inkt);border-bottom:1px solid rgba(0,0,0,0.35)}
html body .aanmelden .advies{background:rgb(20,22,21) !important;color:var(--inkt)}
html body .aanmelden .advies__kop{color:var(--inkt)}
html body .aanmelden .advies__punten li{color:rgb(200,205,202)}
html body .aanmelden .advies__punten li::before{background:rgb(30,158,74)}
html body .aanmelden .advies__sub{color:var(--inkt)}
html body .aanmelden .advies__veld svg{fill:none}
html body .aanmelden .advies input{border:0;background:var(--vlak) !important;color:var(--inkt)}
html body .aanmelden .advies input::placeholder{color:rgb(160,167,163)}
html body .aanmelden .advies input:focus-visible{outline:2px solid var(--inkt)}
html body .aanmelden .advies__fout{color:rgb(180,50,10)}
html body .aanmelden .advies__klein{color:rgb(200,205,202)}
html body .aanmelden .advies__klein b{color:var(--inkt)}
html body section.quote .quote__wie b{color:var(--inkt)}
html body section.quote .quote__wie small{color:rgb(160,167,163)}
@media (min-width:821px) and (max-width:1099px){html body .hero__binnen::before{background:linear-gradient(to top,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.55) 50%,rgba(0,0,0,0.0) 85%) !important}}
html body .skiplink{background:rgb(44,49,46);color:rgb(255,255,255)}
html body .skiplink:focus{outline:2px solid var(--groen)}
html body video:focus-visible{outline:3px solid var(--groen) !important}
html body input,html body textarea,html body select{color:var(--inkt) !important}
html body input::placeholder{-webkit-text-fill-color:rgb(160,167,163)}
@media (hover:hover){html body .faq__vraag:hover{background:rgba(87,226,127,0.1) !important}}
html body .tekst__label{background:rgba(30,33,31,0.18);color:rgb(255,255,255)}
html body .tekst__reclame{color:rgba(255,255,255,0.9)}
html body .tekst__reclame::before{background:rgba(30,33,31,0.55)}
html body .tekst__intro{color:rgba(255,255,255,0.92)}
html body .faq__verder .pil.faq__meer{background:transparent !important;color:var(--inkt) !important}
html body .faq__verder .pil.faq__meer:hover{background:rgba(0,0,0,0.05) !important}
html body .cijfers .stappen.stappen--punten .stap:nth-child(n) b{color:var(--inkt) !important}
.hero__film{border:0;background:none;color:rgb(255,255,254)}
.hero__film-rond svg{fill:currentColor}
.hero__film:hover .hero__film-rond{background:rgba(30,33,31,0.16)}
.hero__film:focus-visible{outline:3px solid var(--groen)}
.heropop{border:0;background:transparent}
.heropop::backdrop{background:transparent}
.heropop__achter{background:rgba(0,0,0,0.86)}
.heropop__kader{background:rgb(44,49,46)}
.heropop__kader video{background:rgb(44,49,46)}
.heropop__sluit{border:0;background:rgb(20,22,21);color:rgb(241,243,242)}
.heropop__sluit:focus-visible{outline:3px solid var(--groen)}
html body form.advies .advies__veld input,html body input{background:rgb(44,49,46)!important;box-shadow:inset 0 0 0 1px rgb(62,68,64)!important}
html body .hero .advies__keuze[aria-pressed="true"]{color:rgb(0,0,0)!important;background:rgb(87,226,127)!important;border-color:rgb(87,226,127)!important}
html body .advies input::placeholder{-webkit-text-fill-color:rgb(160,167,163)!important;color:rgb(160,167,163)!important}
html body .advies__veld svg{stroke:rgb(200,205,202)!important}
html body .duo__menu{background:rgb(44,49,46)!important}
html body .duo__menu span,html body .duo__menu span::after{background:rgb(241,243,242)!important}
html body .geregeld,html body .lijn3{--licht:rgb(70,77,73)!important}
:root{color-scheme:only dark}
html,body{background:rgb(20,22,21)!important}
.pil:not(.pil--rand):not(.pil--zwart),.advies__knop,.btn.p{color:#000!important}
.pil--rand{color:rgb(241,243,242)!important;border-color:rgb(120,128,123)!important;box-shadow:inset 0 0 0 1.5px rgb(120,128,123)!important}
.pil--zwart,.btn.d{background:rgb(44,49,46)!important;color:rgb(241,243,242)!important}
.pil svg,.advies__knop svg{color:#000}
@media (max-width:767px){html body .hero .advies{box-shadow:0 0 0 1px rgb(62,68,64),0 12px 40px rgba(0,0,0,.4)!important}}
@media (max-width:767px){html body .dag .dag__duim[aria-current="true"] img{outline-color:rgb(241,243,242)!important}}
html body .bewijsbalk .bewijsbalk__cijfers{background:rgb(30,33,31)!important;box-shadow:0 0 0 1px rgb(52,57,54),0 12px 32px rgba(0,0,0,.35)!important}
@media (min-width:768px){html body .bewijsbalk .bewijsbalk__review{background:rgb(30,33,31)!important;box-shadow:0 0 0 1px rgb(52,57,54),0 12px 32px rgba(0,0,0,.35)!important}}
html body .sectie-label{background:rgb(44,49,46)!important}
@media (min-width:1024px){html body .kopband{background:rgb(23,26,24)!important}}
@media (min-width:1024px){html body .kopband::after{background:linear-gradient(to right,rgb(23,26,24) 0%,rgb(23,26,24) 34%,rgba(23,26,24,.7) 42%,rgba(23,26,24,0) 56%),linear-gradient(to top,rgba(23,26,24,.55) 0%,rgba(23,26,24,0) 30%)!important}}
html body .vink svg{stroke:rgb(0,0,0)!important}
html body .knoppen .pil--rand svg{color:inherit!important}
html body .tijdlijn{--tl:rgb(58,64,60)!important}
html body .lijst .vakje svg{stroke:rgb(0,0,0)!important}
html body .hero .advies__panelen{background:rgb(44,49,46)!important;box-shadow:inset 0 0 0 1px rgb(62,68,64)!important}
html body .strook-buiten .bewijsbalk__review blockquote b svg{color:rgb(87,226,127)!important}
html body .strook{background:rgb(30,33,31)!important;box-shadow:0 24px 60px -28px rgba(0,0,0,.6),0 0 0 1px rgb(52,58,54)!important}
@media (max-width:1023px){html body .kopband .pil--rand{color:rgb(241,243,242)!important;box-shadow:inset 0 0 0 1.5px rgb(120,128,123)!important}}
html body .strook>div+div{border-color:rgb(52,58,54)!important}
html body .videopop__sluit,html body .videopop__nav button{background:rgb(44,49,46)!important;box-shadow:0 0 0 1px rgb(72,79,75),0 6px 20px rgba(0,0,0,.4)!important}
[class*="__speel"]{color:#000!important}
[class*="__speel"] svg,[class*="__speel"] svg *{fill:#000!important;color:#000!important}
[class*="__speel"]::after{background:#000!important}
}
/* Donker, eigen aanvullingen: stap 2 van het formulier (niet in het ontwerp). */
@media (prefers-color-scheme: dark){.advies__stap,html body .advies .advies__vinkje{color:rgb(200,205,202)}}