/* Dummy: de site van Van Dijk Advies (desktop en telefoon) + de werkende rentecheck */

.vds-venster{height:820px;overflow:hidden;background:var(--vd-zand);scrollbar-width:thin;scrollbar-color:#C9BFAE transparent;overscroll-behavior:contain}
.vds-venster::-webkit-scrollbar{width:8px}
.vds-venster::-webkit-scrollbar-thumb{background:#C9BFAE;border-radius:8px}
.vds{background:var(--vd-zand)}
.vds section{padding:0 72px}
.vds h2{font-size:44px;line-height:1.08}

/* kop */
.vds-kop{display:flex;align-items:center;gap:40px;padding:24px 72px;border-bottom:1px solid var(--vd-lijn);position:sticky;top:0;background:rgba(245,241,234,.94);backdrop-filter:blur(8px);z-index:5}
.vds-nav{display:flex;gap:30px;margin-left:auto;font:500 15px/1 var(--vd-sans);color:var(--vd-grijs)}
.vds-menu{display:none}

/* held */
.vds .vds-held{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:72px}
.vds-held-tekst{display:grid;gap:22px;align-content:center}
.vds-held h1{font-size:66px;line-height:1.02;letter-spacing:-.02em;font-weight:400}
.vds-held h1::first-line{font-style:normal}
.vds-held-tekst p{font-size:19px;line-height:1.55;color:var(--vd-grijs);max-width:30ch}
.vds-knoppen{display:flex;gap:12px;margin-top:8px}
.vds-held-beeld{margin:0;position:relative}
.vds-held-beeld img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:50% 40%;border-radius:6px}
.vds-held-beeld figcaption{position:absolute;left:-28px;bottom:28px;background:var(--vd-wit);border-radius:10px;padding:14px 18px;display:grid;gap:3px;box-shadow:0 18px 40px rgba(31,58,51,.14);font-size:13.5px;color:var(--vd-grijs)}
.vds-held-beeld figcaption b{font:500 17px/1.2 var(--vd-serif);color:var(--vd-groen)}

/* checkblok */
.vds .vds-checkblok{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start;background:var(--vd-groen);color:#D9E3DE;padding-top:72px;padding-bottom:80px}
.vds-checkblok .vd-eb{color:#D9B687}
.vds-checkblok h2{color:var(--vd-zand);margin:14px 0 18px}
.vds-checktekst p{font-size:18px;line-height:1.6;max-width:34ch}
.vds-checktekst ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;font-size:15.5px}
.vds-checktekst li{display:flex;gap:12px;align-items:center}
.vds-checktekst li::before{content:"";width:18px;height:18px;border-radius:50%;background:rgba(217,182,135,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9 3 3 5-6' fill='none' stroke='%23D9B687' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;flex:none}
.vds-checkkaart{background:var(--vd-wit);border-radius:16px;padding:30px 32px 32px;box-shadow:0 30px 60px rgba(0,0,0,.18);color:var(--vd-inkt)}

/* diensten */
.vds .vds-diensten{padding-top:88px;padding-bottom:40px}
.vds-drie{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:36px}
.vds-diensten article{display:grid;gap:10px;align-content:start;padding-top:22px;border-top:1px solid var(--vd-groen)}
.vds-diensten article span{font:italic 400 18px/1 var(--vd-serif);color:var(--vd-oker-2)}
.vds-diensten h3{font-size:28px}
.vds-diensten p{color:var(--vd-grijs);font-size:16px;line-height:1.6}
.vds-diensten em{font-style:normal;font-weight:600;font-size:14.5px;color:var(--vd-groen);text-decoration:underline;text-decoration-color:var(--vd-oker);text-underline-offset:5px;margin-top:4px}

/* team */
.vds .vds-team{padding-top:72px;padding-bottom:88px}
.vds-team figure{margin:0;display:grid;gap:14px}
.vds-team img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.vds-team figcaption{display:grid;gap:2px;font-size:14.5px;color:var(--vd-grijs)}
.vds-team figcaption b{font:500 21px/1.2 var(--vd-serif);color:var(--vd-groen)}

/* citaat */
.vds .vds-citaat{display:grid;grid-template-columns:1.1fr 1fr;padding:0;background:var(--vd-zand-2)}
.vds-citaat img{width:100%;height:100%;min-height:420px;object-fit:cover}
.vds-citaat blockquote{margin:0;padding:64px 64px;display:grid;gap:18px;align-content:center}
.vds-citaat p{font:italic 400 38px/1.2 var(--vd-serif);color:var(--vd-groen);letter-spacing:-.01em}
.vds-citaat cite{font:600 13px/1 var(--vd-sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--vd-oker-2)}

/* voet */
.vds-voet{background:#17302A;color:#B9C8C1;padding:44px 72px;display:flex;align-items:center;gap:32px;font-size:14px}
.vds-voet .vd-logo{color:var(--vd-zand)}
.vds-voet .vd-logo i{background:var(--vd-zand);color:var(--vd-groen)}
.vds-voet-klein{margin-left:auto;opacity:.7;font-size:12.5px}

/* ---------- telefoonversie ---------- */
.vds-mobiel{height:auto;flex:1;min-height:0}
.vds-mobiel .vds section{padding-left:22px;padding-right:22px}
.vds-mobiel .vds h2{font-size:31px}
.vds-mobiel .vds-kop{padding:14px 22px;gap:12px}
.vds-mobiel .vd-logo{font-size:19px}
.vds-mobiel .vd-logo i{width:26px;height:26px;font-size:13px;line-height:26px}
.vds-mobiel .vds-nav,.vds-mobiel .vds-kopknop{display:none}
.vds-mobiel .vds-menu{display:grid;gap:5px;margin-left:auto;width:22px}
.vds-mobiel .vds-menu i{display:block;height:2px;background:var(--vd-groen);border-radius:2px}
.vds-mobiel .vds-held{grid-template-columns:1fr;gap:26px;padding-top:26px;padding-bottom:40px}
.vds-mobiel .vds-held-beeld{order:-1}
.vds-mobiel .vds-held-beeld img{aspect-ratio:4/3}
.vds-mobiel .vds-held-beeld figcaption{left:12px;bottom:-18px;padding:10px 14px;font-size:12px}
.vds-mobiel .vds-held-beeld figcaption b{font-size:15px}
.vds-mobiel .vds-held h1{font-size:40px}
.vds-mobiel .vds-held-tekst p{font-size:16.5px}
.vds-mobiel .vds-knoppen{flex-direction:column;align-items:stretch}
.vds-mobiel .vds-knoppen .vd-knop{justify-content:center}
.vds-mobiel .vds-checkblok{grid-template-columns:1fr;gap:26px;padding-top:40px;padding-bottom:44px}
.vds-mobiel .vds-checktekst ul{display:none}
.vds-mobiel .vds-checkkaart{padding:22px 20px 24px;border-radius:14px}
.vds-mobiel .vds-drie{grid-template-columns:1fr;gap:26px}
.vds-mobiel .vds-citaat{grid-template-columns:1fr}
.vds-mobiel .vds-citaat img{min-height:0;aspect-ratio:4/3}
.vds-mobiel .vds-citaat blockquote{padding:32px 22px 40px}
.vds-mobiel .vds-citaat p{font-size:28px}
.vds-mobiel .vds-voet{flex-direction:column;align-items:flex-start;gap:10px;padding:32px 22px 48px}
.vds-mobiel .vds-voet-klein{margin-left:0}
.dm-scherm .vds-venster{overflow:hidden}
.dm-scherm .vds-venster::-webkit-scrollbar{display:none}

/* ---------- de rentecheck ---------- */
.vdc{display:grid;gap:18px;min-height:360px;align-content:start}
.vdc-kop{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--vd-grijs)}
.vdc-naam{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--vd-groen);letter-spacing:.02em}
.vdc-naam i{width:8px;height:8px;border-radius:50%;background:var(--vd-oker)}
.vdc-balk{height:4px;border-radius:4px;background:var(--vd-zand-2);overflow:hidden;--p:0}
.vdc-balk span{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--vd-groen);border-radius:4px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.vdc-stap{display:grid;gap:18px;animation:vdc-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes vdc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vdc h4{font:400 27px/1.18 var(--vd-serif);color:var(--vd-groen);letter-spacing:-.01em}
.vdc-keuzes{display:grid;gap:10px}
.vdc-keuzes button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:var(--vd-wit);border:1px solid var(--vd-lijn);border-radius:12px;padding:15px 18px;font:500 16px/1.3 var(--vd-sans);color:var(--vd-inkt);transition:border-color .2s,background .2s,transform .2s}
.vdc-keuzes button::after{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid #C9BFAE;flex:none;transition:all .2s}
.vdc-keuzes button:hover{border-color:var(--vd-groen);background:#FBF9F5}
.vdc-keuzes button:focus-visible{outline:2px solid var(--vd-oker);outline-offset:2px}
.vdc-keuzes button.gekozen{background:var(--vd-groen);border-color:var(--vd-groen);color:var(--vd-zand)}
.vdc-keuzes button.gekozen::after{border-color:var(--vd-zand);background:var(--vd-zand);box-shadow:inset 0 0 0 4px var(--vd-groen)}
.vdc-terug,.vdc-opnieuw{justify-self:start;background:none;border:0;padding:4px 0;font:500 14px/1 var(--vd-sans);color:var(--vd-grijs);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--vd-lijn)}
.vdc-terug:hover,.vdc-opnieuw:hover{color:var(--vd-groen)}

.vdc-uitkomst{gap:16px}
.vdc-licht{display:flex;align-items:center;gap:12px;font:400 26px/1.15 var(--vd-serif);color:var(--vd-groen)}
.vdc-licht i{width:16px;height:16px;border-radius:50%;background:var(--vd-groen-ok);box-shadow:0 0 0 6px rgba(60,122,90,.15);flex:none}
.vdc[data-uitkomst="oranje"] .vdc-licht i{background:var(--vd-oranje);box-shadow:0 0 0 6px rgba(208,138,46,.18)}
.vdc[data-uitkomst="rood"] .vdc-licht i{background:var(--vd-rood);box-shadow:0 0 0 6px rgba(181,73,58,.16)}
.vdc-groen-tekst{color:var(--vd-grijs);font-size:15.5px;line-height:1.55}
.vdc-punten{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vdc-punten li{position:relative;padding:12px 14px 12px 34px;background:var(--vd-zand);border-radius:10px;font-size:14.5px;line-height:1.5;color:var(--vd-inkt)}
.vdc-punten li::before{content:"";position:absolute;left:14px;top:18px;width:9px;height:9px;border-radius:50%;background:var(--vd-oranje)}
.vdc-punten li.k-rood::before{background:var(--vd-rood)}
.vdc-punten:empty{display:none}
.vdc-eva{display:flex;gap:12px;align-items:center;padding-top:6px}
.vdc-eva img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none}
.vdc-eva p{font-size:14px;line-height:1.45;color:var(--vd-grijs)}
.vdc-eva b{color:var(--vd-groen)}
.vdc-klein{font-size:12.5px;color:var(--vd-grijs-2)}