/* ═══════════════════════════════════════════════════════════════════ VEELGESTELDE VRAGEN — de klantenservicepagina (/veel-gestelde-vragen/). Gescoped onder #pmFaq; dezelfde tokens als informatie.css, homepage.css en over-ons.css, zodat de servicepagina's één familie blijven. De accordeon (.faqLijst details) is bewust exact dezelfde bouw als het FAQ-blok op de landingspagina's: witte kaart, ronde plus die 45 graden draait bij openen. Alleen wat groter, want hier is de FAQ de pagina en niet een blok onderaan. ═══════════════════════════════════════════════════════════════════ */ #pmFaq { --groen: #95C11F; --blauw: #00AFEF; --blauw-donker: #0093c9; --teal: #1ec98d; --tealBlauw: #0aa0e9; --inkt: #0f172a; --inkt-zacht: #1e293b; --grijs: #64748b; --grijs-licht: #94a3b8; --lijn: #e2e8f0; --fond: #f8fafc; /* Het paginaveld. Zelfde kleur en zelfde aanpak als /aanvragen-overzicht/ (--pmao-veld in aanvragen-overzicht.css, op zijn beurt --surface uit de app). Robbie, 30 augustus 2026: de witte vraagkaarten stonden op wit en sprongen er niet uit. --fond blijft bestaan voor vlakjes BINNEN een witte kaart; dat is bewust een andere tint. */ --veld: #f7fbff; --radius: 22px; --schaduw: 0 12px 30px rgba(15,23,42,.07); /* Ruimte die de vaste sitekop inneemt. Wordt op drie plekken gebruikt: de sticky onderwerpenkolom, het scroll-anker van elke sectie én dat van elke losse vraag. Wordt de header ooit hoger, dan is dit het enige getal dat mee moet. */ --kop-ruimte: 112px; font-family: 'Albert Sans', -apple-system, sans-serif; /* Rand tot rand, ook binnen een smalle themacontainer, zonder aan het thema of aan te komen. BEWUST ANDERS dan .pmao en .pmad, die hiervoor `width: 100vw` + een negatieve marge gebruiken: 100vw is de vensterbreedte INCLUSIEF de verticale schuifbalk, terwijl de pagina zelf die ~15px smaller is. Op een pagina die lang genoeg is om te scrollen (deze dus) levert dat een horizontale schuifbalk van een paar pixels op. Gemeten in het harnas: viewport 485, document 500. Deze twee regels schilderen de achtergrond naar links en rechts door zónder het element breder te maken, dus er valt niets te scrollen. De kleur is exact dezelfde als op /aanvragen-overzicht/. ⚠ De clip-path knipt wél alles af wat BOVEN of ONDER deze sectie uit zou steken. Nu is dat niets (de hero heeft geen schaduw, de eind-CTA ook niet). Komt er ooit een uitklapmenu of tooltip die over de rand heen moet, dan is dit de regel die dat tegenhoudt: maak de verticale inset dan ook negatief, of val terug op 100vw. */ background: var(--veld); color: var(--inkt-zacht); line-height: 1.5; box-shadow: 0 0 0 100vmax var(--veld); clip-path: inset(0 -100vmax); } #pmFaq, #pmFaq *, #pmFaq *::before, #pmFaq *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Blocksy zet een eigen kleur op h1/h2/h3 en op p. Zo'n elementregel wint van overerving, ook als de sectie eromheen een kleur meegeeft, en dan wordt de kop in de donkere eind-CTA donkerblauw op donkerblauw. Zelfde vangnet als in informatie.css. */ #pmFaq h1, #pmFaq h2, #pmFaq h3, #pmFaq p, #pmFaq li, #pmFaq th, #pmFaq td { color: inherit; } #pmFaq a { color: var(--blauw-donker); } /* Het zoekfilter verbergt vragen, secties en menu-items met het hidden-attribuut. De browser zet daar zelf display:none op, maar dat is de ZWAKSTE regel die er bestaat: elke eigen display-regel wint ervan. En die hebben we, bijvoorbeeld display:flex op de menu-items hieronder. Nu wordt dat per ongeluk goed opgevangen door Bootstrap, dat sitewide een [hidden]{display:none!important} meelevert, maar daar wil deze pagina niet van afhangen: gaat Bootstrap er ooit uit, dan blijven verborgen items gewoon staan. */ #pmFaq [hidden] { display: none !important; } #pmFaq .wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; } /* ══ HERO ══ */ #pmFaq .heroLicht { text-align: center; padding: 46px 0 38px; background: radial-gradient(120% 150% at 50% -20%, #ecfbf4 0%, #e6f7fd 45%, var(--veld) 100%); } #pmFaq .heroEyebrow { font: 800 11.5px 'Inter', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--blauw); } #pmFaq .heroLicht h1 { font-family: 'Inter', sans-serif; font-size: 30px; font-weight: 900; letter-spacing: -.9px; line-height: 1.16; margin: 10px auto 0; max-width: 640px; color: var(--inkt); } #pmFaq .heroToel { font-size: 14.5px; color: var(--grijs); line-height: 1.65; margin: 13px auto 0; max-width: 560px; } /* ── zoekveld ── Het hart van de pagina: mensen komen hier met één vraag. Wordt door de JS zichtbaar gemaakt; zonder JS zou een veld dat niets doet alleen maar verwarren. */ #pmFaq .zoekDoos { max-width: 520px; margin: 22px auto 0; } #pmFaq .zoekVeld { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--lijn); border-radius: 999px; padding: 4px 6px 4px 18px; box-shadow: 0 10px 26px rgba(15,23,42,.08); transition: border-color .16s ease, box-shadow .16s ease; } #pmFaq .zoekVeld:focus-within { border-color: var(--blauw); box-shadow: 0 10px 30px rgba(0,175,239,.18); } #pmFaq .zoekIco { font-size: 15px; line-height: 1; flex: 0 0 auto; } #pmFaq .zoekVeld input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; font-family: 'Albert Sans', -apple-system, sans-serif; font-size: 15px; color: var(--inkt); padding: 13px 0; -webkit-appearance: none; appearance: none; } #pmFaq .zoekVeld input::placeholder { color: var(--grijs-licht); } /* Het eigen kruisje van de browser bij type="search" weg: we hebben een eigen wisknop, en twee kruisjes naast elkaar ziet er slordig uit. */ #pmFaq .zoekVeld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } #pmFaq .zoekWis { flex: 0 0 auto; width: 34px; height: 34px; margin-right: 4px; border: 0; border-radius: 50%; background: var(--fond); color: var(--grijs); font-size: 20px; line-height: 1; cursor: pointer; } #pmFaq .zoekWis:hover { background: #eef2f7; color: var(--inkt); } #pmFaq .zoekUitslag { min-height: 18px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--grijs); } /* ── meestgezochte vragen ── */ #pmFaq .populair { margin-top: 20px; } #pmFaq .populairKop { display: block; font: 800 10.5px 'Inter', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--grijs-licht); margin-bottom: 10px; } #pmFaq .populair ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } #pmFaq .populair a { display: inline-block; padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--lijn); text-decoration: none; font: 600 12.5px 'Inter', sans-serif; color: var(--inkt-zacht); transition: border-color .16s ease, color .16s ease; } #pmFaq .populair a:hover { border-color: var(--blauw); color: var(--blauw-donker); } /* ══ LAYOUT ══ */ #pmFaq .faqLayout { display: block; padding: 28px 18px 8px; } /* ── onderwerpenkolom ── */ #pmFaq .faqNavBox { background: #fff; border: 1px solid var(--lijn); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 14px rgba(15,23,42,.04); } #pmFaq .faqNavBox > summary { cursor: pointer; list-style: none; padding: 14px 16px; font: 800 12px 'Inter', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--inkt); display: flex; align-items: center; justify-content: space-between; gap: 10px; } #pmFaq .faqNavBox > summary::-webkit-details-marker { display: none; } #pmFaq .faqNavBox > summary::after { content: '▾'; font-size: 14px; color: var(--grijs); transition: transform .2s ease; } #pmFaq .faqNavBox[open] > summary::after { transform: rotate(180deg); } #pmFaq .faqNavBox nav { padding: 0 10px 10px; } #pmFaq .faqNavBox ul { list-style: none; } #pmFaq .faqNavBox a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.35; color: var(--inkt-zacht); text-decoration: none; } #pmFaq .faqNavBox a:hover { background: var(--veld); color: var(--blauw-donker); } #pmFaq .faqNavBox .navTekst { flex: 1 1 auto; min-width: 0; } #pmFaq .faqNavBox .navTeller { flex: 0 0 auto; min-width: 22px; text-align: center; padding: 2px 6px; border-radius: 999px; background: var(--veld); border: 1px solid var(--lijn); font: 700 11px 'Inter', sans-serif; color: var(--grijs); } /* De sectie waar je nu bent. Wordt door de JS gezet (IntersectionObserver). */ #pmFaq .faqNavBox a.actief { background: #eaf6fd; color: var(--inkt); font-weight: 700; } #pmFaq .faqNavBox a.actief .navTeller { background: #fff; border-color: var(--blauw); color: var(--blauw-donker); } /* ══ SECTIES ══ */ #pmFaq .faqInhoud { padding: 24px 0 10px; } #pmFaq .faqSectie { padding-top: 6px; margin-bottom: 34px; scroll-margin-top: var(--kop-ruimte); } #pmFaq .faqSectie:last-of-type { margin-bottom: 26px; } /* Geen iconen meer (Robbie, 30 augustus 2026). De kop draagt de sectie nu zelf, dus staat er iets meer lucht boven en is de lijn eronder wat rustiger. */ #pmFaq .sectieKop { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid #dbe4ec; } #pmFaq .sectieTekst { flex: 1 1 auto; min-width: 0; } #pmFaq .sectieKop h2 { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 900; letter-spacing: -.4px; line-height: 1.25; color: var(--inkt); } #pmFaq .sectieKop p { font-size: 13.5px; color: var(--grijs); line-height: 1.55; margin-top: 3px; } #pmFaq .sectieTeller { flex: 0 0 auto; align-self: center; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--lijn); font: 700 11.5px 'Inter', sans-serif; color: var(--grijs); white-space: nowrap; } /* ══ DE ACCORDEON ══ Zelfde bouw als het FAQ-blok op de landingspagina's, alleen ruimer. */ #pmFaq .faqLijst { display: flex; flex-direction: column; gap: 10px; } /* Wit op het lichtblauwe veld: dáárom staat dat veld er (Robbie, 30 augustus 2026: "zodat de vragencontainers er meer uitspringen"). De schaduw is licht, het contrast met de achtergrond doet het werk. */ #pmFaq .faqItem { background: #fff; border: 1px solid #e6edf4; border-radius: 15px; padding: 0 18px; box-shadow: 0 2px 8px rgba(15,23,42,.05); scroll-margin-top: var(--kop-ruimte); transition: border-color .16s ease, box-shadow .16s ease; } #pmFaq .faqItem:hover { border-color: #cbd5e1; box-shadow: 0 6px 16px rgba(15,23,42,.08); } #pmFaq .faqItem[open] { border-color: #cbd5e1; box-shadow: var(--schaduw); } #pmFaq .faqItem > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; } #pmFaq .faqItem > summary::-webkit-details-marker { display: none; } /* De vraag is een echte h3 (goed voor de koppenstructuur en voor AI-antwoorden) maar mag er niet uitzien als een kop midden in een kaartje. */ #pmFaq .faqItem summary h3.faqVraag { font: 700 14.5px 'Inter', sans-serif; line-height: 1.4; letter-spacing: 0; color: var(--inkt); } #pmFaq .faqItem summary .plus { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--fond); border: 1px solid var(--lijn); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--grijs); transition: transform .25s ease, background .16s ease; } #pmFaq .faqItem[open] summary .plus { transform: rotate(45deg); background: #eef2f7; } #pmFaq .antw { padding: 0 0 18px; } #pmFaq .antw > p { font-size: 14px; color: var(--grijs); line-height: 1.7; } /* Als de vraag via een anker of de zoekbalk wordt geopend, moet meteen duidelijk zijn wélke vraag dat was. Kort oplichten en weer uitdoven. */ #pmFaq .faqItem.gemarkeerd { border-color: var(--blauw); box-shadow: 0 0 0 3px rgba(0,175,239,.14); } /* ── prijstabel binnen een antwoord ── */ #pmFaq .tabelScroll { margin-top: 14px; overflow-x: auto; } #pmFaq .vraagTabel { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; font-size: 13.5px; } #pmFaq .vraagTabel th { text-align: left; font: 800 11.5px 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .4px; color: var(--inkt); background: var(--fond); padding: 11px 14px; border-bottom: 1px solid var(--lijn); } #pmFaq .vraagTabel td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; line-height: 1.5; } #pmFaq .vraagTabel tr:last-child td { border-bottom: 0; } #pmFaq .vraagTabel td:last-child { font: 800 13.5px 'Inter', sans-serif; color: #5f8a0f; white-space: nowrap; } #pmFaq .antwNoot { margin-top: 12px; font-size: 12.5px; color: var(--grijs-licht); line-height: 1.6; } #pmFaq .antwLinks { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } #pmFaq .antwLinks a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--fond); border: 1px solid var(--lijn); text-decoration: none; font: 700 12.5px 'Inter', sans-serif; color: var(--inkt-zacht); } #pmFaq .antwLinks a:hover { border-color: var(--blauw); color: var(--blauw-donker); } /* ── niets gevonden ── De onderwerpenkolom valt weg en de pagina wordt één kolom: een leeg doosje naast een "niets gevonden"-blok ziet eruit alsof er iets stuk is. */ #pmFaq.geenTreffers .faqNav { display: none; } /* ── niets gevonden ── */ #pmFaq .geenTreffer { text-align: center; background: #fff; border: 1px solid var(--lijn); border-radius: 18px; padding: 34px 22px; margin-bottom: 30px; } #pmFaq .geenKop { font: 800 16px 'Inter', sans-serif; color: var(--inkt); } #pmFaq .geenKop b { color: var(--blauw-donker); } #pmFaq .geenToel { font-size: 13.5px; color: var(--grijs); line-height: 1.65; margin: 8px auto 0; max-width: 380px; } #pmFaq .geenKnop { display: inline-block; margin-top: 16px; padding: 11px 22px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); color: #fff; text-decoration: none; font: 700 13.5px 'Inter', sans-serif; } #pmFaq .geenKnop:hover { color: #fff; filter: brightness(1.05); } /* ══ HULP NODIG ══ */ #pmFaq .hulpBlok { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: #fff; border: 1px solid var(--lijn); border-radius: 20px; padding: 24px; box-shadow: 0 4px 14px rgba(15,23,42,.04); scroll-margin-top: var(--kop-ruimte); } #pmFaq .hulpFotos { flex: 0 0 auto; display: flex; } #pmFaq .hulpFotos img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(15,23,42,.1); } #pmFaq .hulpFotos img + img { margin-left: -16px; } #pmFaq .hulpTekst { flex: 1 1 280px; min-width: 0; } #pmFaq .hulpEyebrow { display: block; font: 800 10.5px 'Inter', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--blauw); margin-bottom: 5px; } #pmFaq .hulpBlok h2 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 900; letter-spacing: -.4px; line-height: 1.25; color: var(--inkt); } #pmFaq .hulpBlok p { font-size: 13.5px; color: var(--grijs); line-height: 1.65; margin-top: 6px; } #pmFaq .hulpKnoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; } #pmFaq .hulpKnop { display: inline-block; padding: 11px 22px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); color: #fff; text-decoration: none; font: 700 13.5px 'Inter', sans-serif; } #pmFaq .hulpKnop:hover { color: #fff; filter: brightness(1.05); } #pmFaq .hulpMail { font: 600 13.5px 'Inter', sans-serif; text-decoration: underline; text-underline-offset: 2px; } /* ══ VERWANTE PAGINA'S ══ */ #pmFaq .verwant { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--lijn); } #pmFaq .verwantKop { display: block; font: 800 11px 'Inter', sans-serif; letter-spacing: .7px; text-transform: uppercase; color: var(--grijs); margin-bottom: 10px; } #pmFaq .verwant ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } #pmFaq .verwant a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--lijn); text-decoration: none; font: 600 13px 'Inter', sans-serif; color: var(--inkt-zacht); } #pmFaq .verwant a:hover { border-color: var(--blauw); color: var(--blauw-donker); } #pmFaq .bijgewerkt { margin-top: 18px; font-size: 12px; color: var(--grijs-licht); font-weight: 600; } /* ══ EIND-CTA ══ */ #pmFaq .eindCta { margin-top: 30px; background: var(--inkt); color: #fff; padding: 46px 0 52px; text-align: center; } #pmFaq .eindCta h2 { font-family: 'Inter', sans-serif; font-size: 23px; font-weight: 900; letter-spacing: -.6px; color: #fff; } #pmFaq .eindCta .toel { font-size: 14px; color: #b6c6d8; line-height: 1.65; margin: 12px auto 20px; max-width: 520px; } #pmFaq .eindKnop { display: inline-flex; flex-direction: column; gap: 3px; padding: 14px 28px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); color: #fff; text-decoration: none; box-shadow: 0 10px 26px rgba(30,201,141,.35); } #pmFaq .eindKnop .hoofd { font: 800 15px 'Inter', sans-serif; } #pmFaq .eindKnop .sub { font-size: 11.5px; opacity: .92; font-weight: 600; } #pmFaq .eindKnop:hover { color: #fff; filter: brightness(1.05); } /* ══ VANAF TABLET ══ */ @media (min-width: 700px) { #pmFaq .heroLicht { padding: 60px 0 48px; } #pmFaq .heroLicht h1 { font-size: 40px; } #pmFaq .heroToel { font-size: 15.5px; } #pmFaq .sectieKop h2 { font-size: 21px; } #pmFaq .faqItem { padding: 0 22px; } #pmFaq .faqItem summary h3.faqVraag { font-size: 15.5px; } #pmFaq .antw > p { font-size: 14.5px; } #pmFaq .hulpBlok { padding: 28px 30px; } #pmFaq .hulpBlok h2 { font-size: 20px; } #pmFaq .eindCta h2 { font-size: 27px; } } /* ══ VANAF DESKTOP: onderwerpen als sticky kolom naast de vragen ══ */ @media (min-width: 1000px) { #pmFaq .faqLayout { display: grid; grid-template-columns: 268px 1fr; gap: 44px; align-items: start; padding-top: 34px; } #pmFaq .faqNav { position: sticky; top: var(--kop-ruimte); max-height: calc(100vh - var(--kop-ruimte) - 24px); } #pmFaq .faqNavBox { max-height: calc(100vh - var(--kop-ruimte) - 24px); overflow-y: auto; } /* Op desktop staat de lijst altijd open, dus het pijltje en de klikbare kop vervallen. */ #pmFaq .faqNavBox > summary { cursor: default; } #pmFaq .faqNavBox > summary::after { display: none; } #pmFaq .faqInhoud { padding-top: 0; } #pmFaq.geenTreffers .faqLayout { display: block; max-width: 720px; } } /* ══ BEWEGING UIT ══ Wie in zijn systeem heeft aangegeven minder animatie te willen, krijgt hier ook geen draaiende plus en geen oplichtend kader. */ @media (prefers-reduced-motion: reduce) { #pmFaq * { transition: none !important; } }