/* Vervolgstappen — de blokken uit inc/cta-blokken.php. Alles staat onder .mwc, zodat deze stijl niets buiten de blokken raakt. Kleuren, letters en knopvormen komen uit hoofd.css; hier staat alleen de indeling van de blokken zelf. */ .mwc{--mwc-vlak:#191715;--mwc-vlak-2:#242120;--mwc-rand:rgba(243,241,236,.13)} .mwc *{box-sizing:border-box} .mwc h2,.mwc h3{text-wrap:balance} .mwc p{margin:0} /* ---------- het grote blok ---------- */ .mwc-afspraak{ padding:clamp(48px,7vw,96px) 0;background:var(--mwc-vlak); border-top:1px solid var(--mwc-rand);border-bottom:1px solid var(--mwc-rand); } .mwc-g{display:grid;grid-template-columns:1fr minmax(340px,.86fr);gap:clamp(28px,4vw,64px);align-items:start} @media(max-width:900px){.mwc-g{grid-template-columns:1fr;gap:26px}} .mwc-zeg{display:flex;flex-direction:column;gap:16px;max-width:52ch} .mwc-zeg h2{margin:0} .mwc-punten{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .mwc-punten li{position:relative;padding-left:26px;color:#CFC9BF;line-height:1.5} .mwc-punten li::before{ content:"";position:absolute;left:0;top:.62em;width:13px;height:1.5px;background:var(--amber); } .mwc-of{font-size:.94rem;color:var(--grey)} .mwc-of a{color:var(--bone);font-weight:600} .mwc-kaart{background:var(--mwc-vlak-2);border:1px solid var(--mwc-rand);border-radius:3px;padding:clamp(18px,2.4vw,28px)} /* ---------- de kiezer ---------- */ .mwc-kiezer{display:flex;flex-direction:column;gap:14px} /* Zonder javascript blijft het laadregeltje weg en staat er de noscript-uitweg; cta.js zet .mwc-js op zodra hij draait. */ .mwc-laden{display:none;color:var(--grey);font-size:.94rem;padding:10px 0} .mwc-js .mwc-laden{display:block} .mwc-noscript{font-size:.95rem;color:#CFC9BF;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .mwc-stap{display:flex;flex-direction:column;gap:14px} .mwc-stap[hidden]{display:none} @media(prefers-reduced-motion:no-preference){ .mwc-stap{animation:mwcIn .26s cubic-bezier(.2,.8,.25,1) both} } @keyframes mwcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .mwc-kop{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em} .mwc-onder{font-size:.9rem;color:var(--grey);margin-top:-6px} /* het eerstvolgende moment: één klik, en nooit een leeg lijstje */ .mwc-eerst{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px; background:rgba(237,163,27,.10);border:1px solid rgba(237,163,27,.38); border-radius:3px;padding:12px 14px; } .mwc-eerst span{font-size:.94rem;color:#E9E3D8;line-height:1.35} .mwc-eerst b{color:var(--bone);font-weight:700} .mwc-eerst button{margin-left:auto} .mwc-dagen{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .mwc-dagen::-webkit-scrollbar{height:4px} .mwc-dagen::-webkit-scrollbar-thumb{background:var(--mwc-rand);border-radius:3px} .mwc-dag{ flex:0 0 auto;min-width:62px;min-height:62px;padding:8px 10px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; background:transparent;border:1.5px solid var(--mwc-rand);border-radius:3px;color:var(--bone); font-family:Archivo,sans-serif;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .12s ease; } .mwc-dag b{font-size:1.12rem;font-weight:800;line-height:1} .mwc-dag span{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey)} .mwc-dag:hover{border-color:rgba(237,163,27,.6)} .mwc-dag.aan{border-color:var(--amber);background:rgba(237,163,27,.13)} .mwc-dag.aan span{color:#E2BE73} .mwc-tijden{display:flex;flex-wrap:wrap;gap:8px} .mwc-tijd{ min-height:44px;padding:11px 16px;background:transparent;color:var(--bone); border:1.5px solid var(--mwc-rand);border-radius:3px;cursor:pointer; font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums; transition:border-color .16s ease,background .16s ease,color .16s ease,transform .12s ease; } .mwc-tijd:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-1px)} .mwc-tijd.aan{background:var(--amber);border-color:var(--amber);color:#1A1200;transform:none} @media(prefers-reduced-motion:reduce){.mwc-tijd:hover,.mwc-dag:hover{transform:none}} /* wat er gekozen is, blijft in beeld staan */ .mwc-gekozen{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px; background:rgba(237,163,27,.12);border-left:3px solid var(--amber); padding:11px 14px;border-radius:2px;font-size:.96rem; } .mwc-gekozen b{font-weight:700} .mwc-gekozen button{ margin-left:auto;background:none;border:0;padding:4px 2px;color:var(--amber); font:inherit;font-size:.9rem;text-decoration:underline;cursor:pointer; } .mwc-velden{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:520px){.mwc-velden{grid-template-columns:1fr}} .mwc-veld{display:flex;flex-direction:column;gap:5px} .mwc-veld label{font-size:.84rem;color:#CFC9BF;font-weight:600} .mwc-veld label i{color:var(--amber);font-style:normal} .mwc-veld input{ min-height:46px;padding:11px 13px;background:rgba(16,15,14,.6);color:var(--bone); border:1.5px solid var(--mwc-rand);border-radius:3px;font:inherit;font-size:1rem; } .mwc-veld input:focus{border-color:var(--amber);outline:none} .mwc-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .mwc-knop{ width:100%;min-height:50px;background:var(--amber);color:#1A1200;border:0;border-radius:2px; font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;cursor:pointer; transition:background .16s ease,transform .12s ease; } .mwc-knop:hover{background:#FFB733;transform:translateY(-1px)} .mwc-knop[disabled]{opacity:.6;cursor:default;transform:none} @media(prefers-reduced-motion:reduce){.mwc-knop:hover{transform:none}} .mwc-mini{ background:var(--amber);color:#1A1200;border:0;border-radius:2px;padding:10px 15px;min-height:42px; font-family:Archivo,sans-serif;font-weight:700;font-size:.88rem;cursor:pointer; } .mwc-mini:hover{background:#FFB733} .mwc-klein{font-size:.82rem;color:var(--grey);line-height:1.5} .mwc-fout{ background:rgba(200,60,40,.14);border-left:3px solid #C8563C;padding:11px 14px; border-radius:2px;font-size:.94rem;line-height:1.5; } .mwc-fout a{color:var(--amber);font-weight:600} /* ---------- de bevestiging: niet te missen ---------- */ .mwc-klaar{ display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.6vw,26px); background:rgba(237,163,27,.12);border:1.5px solid var(--amber);border-radius:3px; } .mwc-klaar .vink{ width:46px;height:46px;border-radius:50%;background:var(--amber);color:#1A1200; display:grid;place-items:center;flex:0 0 auto; } .mwc-klaar .vink svg{width:24px;height:24px} .mwc-klaar h3{margin:0;font-size:1.32rem} .mwc-wanneer{ font-family:Archivo,sans-serif;font-weight:800;font-stretch:108%;letter-spacing:-.02em; font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.1;color:var(--amber); } .mwc-klaar p{color:#DCD6CB;line-height:1.55} .mwc-klaar .mwc-knoppen{margin-top:4px} .mwc-bijhand{ background:rgba(16,15,14,.42);border-left:2px solid rgba(237,163,27,.55); padding:10px 13px;border-radius:2px; } .mwc-daarna{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px;counter-reset:mwc} .mwc-daarna li{color:#DCD6CB;line-height:1.55;padding-left:4px} .mwc-daarna li::marker{color:var(--amber);font-family:Archivo,sans-serif;font-weight:800} @media(prefers-reduced-motion:no-preference){ .mwc-klaar{animation:mwcPop .34s cubic-bezier(.2,.9,.3,1.2) both} @keyframes mwcPop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} } .mwc-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px} /* ---------- compacte variant, midden in een pagina ---------- */ .mwc-bellen{ margin:clamp(28px,4vw,44px) 0;background:var(--mwc-vlak); border:1px solid var(--mwc-rand);border-left:3px solid var(--amber);border-radius:3px; padding:clamp(18px,2.6vw,26px); } .mwc-bellen-in{display:flex;flex-direction:column;gap:14px} .mwc-bellen-kop{display:flex;flex-direction:column;gap:7px} .mwc-bellen-kop h3{margin:0} .mwc-bellen-kop p{color:#C6C0B6;font-size:.98rem;line-height:1.5;max-width:58ch} /* ---------- adviesblok met een gezicht ---------- */ .mwc-advies{ display:grid;grid-template-columns:150px 1fr;gap:clamp(16px,2.4vw,26px);align-items:center; margin:clamp(24px,3.4vw,38px) 0;background:var(--mwc-vlak); border:1px solid var(--mwc-rand);border-radius:3px;padding:clamp(16px,2.2vw,24px); } @media(max-width:560px){.mwc-advies{grid-template-columns:96px 1fr;gap:14px;align-items:start}} .mwc-portret{overflow:hidden;border-radius:3px;aspect-ratio:3/4} .mwc-portret img{width:100%;height:100%;object-fit:cover} .mwc-advies-in{display:flex;flex-direction:column;gap:9px} .mwc-advies-in h3{margin:0} .mwc-advies-in p{color:#C6C0B6;line-height:1.55;max-width:56ch} .mwc-naam{font-size:.9rem;color:var(--amber);font-weight:700} /* ---------- twijfel je nog ---------- */ .mwc-twijfel{ margin:clamp(24px,3.4vw,38px) 0;background:var(--mwc-vlak); border:1px solid var(--mwc-rand);border-radius:3px;padding:clamp(18px,2.4vw,26px); display:flex;flex-direction:column;gap:16px; } .mwc-twijfel-kop{display:flex;flex-direction:column;gap:7px} .mwc-twijfel-kop h3{margin:0} .mwc-qa{display:flex;flex-direction:column;border-top:1px solid var(--mwc-rand)} .mwc-qa details{border-bottom:1px solid var(--mwc-rand)} .mwc-qa summary{ list-style:none;cursor:pointer;padding:14px 34px 14px 0;position:relative; font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;line-height:1.35; } .mwc-qa summary::-webkit-details-marker{display:none} .mwc-qa summary::after{ content:"";position:absolute;right:6px;top:50%;width:10px;height:10px; border-right:1.8px solid var(--amber);border-bottom:1.8px solid var(--amber); transform:translateY(-70%) rotate(45deg);transition:transform .2s ease; } .mwc-qa details[open] summary::after{transform:translateY(-20%) rotate(-135deg)} .mwc-qa summary:hover{color:var(--amber)} .mwc-qa details p{padding:0 0 14px;color:#C6C0B6;line-height:1.6;max-width:64ch} /* ---------- prijsindicatie ---------- */ .mwc-prijs{ margin:clamp(24px,3.4vw,38px) 0;background:var(--mwc-vlak); border:1px solid var(--mwc-rand);border-radius:3px;padding:clamp(18px,2.4vw,26px); display:flex;flex-direction:column;gap:16px; } .mwc-prijs-kop{display:flex;flex-direction:column;gap:7px} .mwc-prijs-kop h3{margin:0} .mwc-prijs-kop p{color:#C6C0B6;line-height:1.55;max-width:60ch} .mwc-bedragen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--mwc-rand)} .mwc-bedragen li{background:var(--mwc-vlak-2);padding:16px 18px;display:flex;flex-direction:column;gap:4px} .mwc-bedragen b{ font-family:Archivo,sans-serif;font-size:1.55rem;font-weight:800;font-stretch:108%; letter-spacing:-.03em;line-height:1;color:var(--amber); } .mwc-bedragen span{font-size:.9rem;color:#C6C0B6;line-height:1.4} /* ---------- buiten kantooruren ---------- */ .mwc-terugbel{ margin:clamp(24px,3.4vw,38px) 0;background:var(--mwc-vlak); border:1px solid var(--mwc-rand);border-radius:3px;padding:clamp(18px,2.4vw,26px); display:flex;flex-direction:column;gap:13px; } .mwc-terugbel h3{margin:0} .mwc-terugbel p{color:#C6C0B6;line-height:1.55;max-width:58ch} .mwc-uren{font-size:.86rem;color:var(--grey);font-variant-numeric:tabular-nums} /* ---------- whatsapp ---------- */ .mwc-wa{ display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; margin:clamp(24px,3.4vw,38px) 0;background:var(--mwc-vlak); border:1px solid var(--mwc-rand);border-radius:3px;padding:clamp(16px,2.2vw,24px); } .mwc-wa-in{display:flex;flex-direction:column;gap:7px;max-width:56ch} .mwc-wa-in h3{margin:0} .mwc-wa-in p{color:#C6C0B6;line-height:1.55} /* ---------- verder waar je gebleven was ---------- */ .mwc-verder{ display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center; background:var(--mwc-vlak-2);border-bottom:1px solid var(--mwc-rand); padding:11px clamp(20px,4vw,56px);font-size:.95rem; } .mwc-verder[hidden]{display:none} .mwc-verder b{font-weight:700} .mwc-verder .mwc-weg{ margin-left:auto;background:none;border:0;color:var(--grey);font:inherit; cursor:pointer;padding:6px 8px;line-height:1; } .mwc-verder .mwc-weg:hover{color:var(--bone)} /* hulp als iemand halverwege stilvalt — nooit over de pagina heen */ .mwc-hulp{ margin:22px 0;background:var(--mwc-vlak);border:1px solid var(--mwc-rand); border-left:3px solid var(--amber);border-radius:3px;padding:18px 20px; display:flex;flex-direction:column;gap:10px;position:relative; } .mwc-hulp h3{margin:0;font-size:1.1rem} .mwc-hulp p{color:#C6C0B6;line-height:1.55;max-width:58ch} .mwc-hulp .mwc-weg{ position:absolute;top:8px;right:8px;background:none;border:0;color:var(--grey); font-size:1.2rem;line-height:1;cursor:pointer;padding:6px 9px; } .mwc-hulp .mwc-weg:hover{color:var(--bone)} .mwc-linkrij{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .mwc-linkrij input{ flex:1 1 220px;min-height:42px;padding:9px 12px;background:rgba(16,15,14,.6); color:var(--grey);border:1.5px solid var(--mwc-rand);border-radius:3px;font-size:.85rem; } /* ---------- het blad onderaan op mobiel ---------- */ .mwc-blad-achter{ position:fixed;inset:0;z-index:200;background:rgba(10,9,8,.72); backdrop-filter:blur(3px);display:flex;align-items:flex-end; } .mwc-blad{ width:100%;max-height:88vh;overflow-y:auto;background:var(--ink-2); border-top:1px solid var(--amber);border-radius:10px 10px 0 0; padding:14px clamp(16px,5vw,24px) calc(20px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:14px; } @media(prefers-reduced-motion:no-preference){ .mwc-blad{animation:mwcOmhoog .28s cubic-bezier(.2,.8,.25,1) both} @keyframes mwcOmhoog{from{transform:translateY(100%)}to{transform:none}} } .mwc-blad-kop{display:flex;align-items:flex-start;gap:12px} .mwc-blad-kop h3{margin:0;font-size:1.2rem;flex:1} .mwc-blad-dicht{ background:none;border:1.5px solid var(--mwc-rand);border-radius:3px;color:var(--bone); width:40px;height:40px;font-size:1.2rem;line-height:1;cursor:pointer;flex:0 0 auto; } .mwc-blad-dicht:hover{border-color:var(--amber);color:var(--amber)} @media(min-width:761px){ .mwc-blad-achter{align-items:center;justify-content:center;padding:24px} .mwc-blad{max-width:540px;border-radius:4px;border:1px solid var(--amber)} @media(prefers-reduced-motion:no-preference){.mwc-blad{animation:mwcPop .24s ease both}} } /* ---------- de balk onderaan ---------- */ @media(max-width:760px){ .mwc-balk{padding-bottom:env(safe-area-inset-bottom)} .mwc-balk a{min-height:52px} .mwc-balk svg{flex:0 0 auto} /* staat de kiezer zelf in beeld, dan hoeft de balk er niet overheen */ .mwc-balk.weg{transform:translateY(110%);pointer-events:none} .mwc-balk{transition:transform .22s ease} body{padding-bottom:calc(56px + env(safe-area-inset-bottom))} } @media(prefers-reduced-motion:reduce){.mwc-balk{transition:none}}